diff --git a/apps/docs/components/ui/action-media.tsx b/apps/docs/components/ui/action-media.tsx
index 32ce557eae6..79d47f5477a 100644
--- a/apps/docs/components/ui/action-media.tsx
+++ b/apps/docs/components/ui/action-media.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useRef, useState } from 'react'
+import { Lightbox } from '@sim/emcn'
 import { cn, getAssetUrl } from '@/lib/utils'
-import { Lightbox } from './lightbox'
 
 interface ActionImageProps {
   src: string
@@ -17,10 +17,6 @@ interface ActionVideoProps {
 }
 
 export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProps) {
-  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
-
-  const openLightbox = () => setIsLightboxOpen(true)
-
   const image = (
     <img
       src={src}
@@ -32,42 +28,28 @@ export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProp
     />
   )
 
+  if (!enableLightbox) return image
+
   return (
-    <>
-      {enableLightbox ? (
-        <button
-          type='button'
-          onClick={openLightbox}
-          aria-label={`Open ${alt} in media viewer`}
-          className='group inline-block cursor-pointer rounded p-0 text-left'
-        >
-          {image}
-        </button>
-      ) : (
-        image
-      )}
-      {enableLightbox && (
-        <Lightbox
-          isOpen={isLightboxOpen}
-          onClose={() => setIsLightboxOpen(false)}
-          src={src}
-          alt={alt}
-          type='image'
-        />
-      )}
-    </>
+    <Lightbox src={src} alt={alt}>
+      <button
+        type='button'
+        aria-label={`Open ${alt} in media viewer`}
+        className='group inline-block cursor-pointer rounded p-0 text-left'
+      >
+        {image}
+      </button>
+    </Lightbox>
   )
 }
 
 export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProps) {
   const videoRef = useRef<HTMLVideoElement>(null)
-  const startTimeRef = useRef(0)
-  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+  const [startTime, setStartTime] = useState(0)
   const resolvedSrc = getAssetUrl(src)
 
   const openLightbox = () => {
-    startTimeRef.current = videoRef.current?.currentTime ?? 0
-    setIsLightboxOpen(true)
+    setStartTime(videoRef.current?.currentTime ?? 0)
   }
 
   const video = (
@@ -85,30 +67,18 @@ export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProp
     />
   )
 
+  if (!enableLightbox) return video
+
   return (
-    <>
-      {enableLightbox ? (
-        <button
-          type='button'
-          onClick={openLightbox}
-          aria-label={`Open ${alt} in media viewer`}
-          className='group inline-block cursor-pointer rounded p-0 text-left'
-        >
-          {video}
-        </button>
-      ) : (
-        video
-      )}
-      {enableLightbox && (
-        <Lightbox
-          isOpen={isLightboxOpen}
-          onClose={() => setIsLightboxOpen(false)}
-          src={src}
-          alt={alt}
-          type='video'
-          startTime={startTimeRef.current}
-        />
-      )}
-    </>
+    <Lightbox src={resolvedSrc} alt={alt} type='video' startTime={startTime}>
+      <button
+        type='button'
+        onClick={openLightbox}
+        aria-label={`Open ${alt} in media viewer`}
+        className='group inline-block cursor-pointer rounded p-0 text-left'
+      >
+        {video}
+      </button>
+    </Lightbox>
   )
 }
diff --git a/apps/docs/components/ui/image.tsx b/apps/docs/components/ui/image.tsx
index ce966c50fef..93bd3a30ac1 100644
--- a/apps/docs/components/ui/image.tsx
+++ b/apps/docs/components/ui/image.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { Lightbox } from '@sim/emcn'
 import NextImage, { type ImageProps as NextImageProps } from 'next/image'
-import { Lightbox } from '@/components/ui/lightbox'
 import { cn } from '@/lib/utils'
 
 interface ImageProps extends Omit<NextImageProps, 'className'> {
@@ -17,9 +16,7 @@ export function Image({
   src,
   ...props
 }: ImageProps) {
-  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
-
-  const openLightbox = () => setIsLightboxOpen(true)
+  const lightboxSrc = typeof src === 'string' ? src : 'default' in src ? src.default.src : src.src
 
   const image = (
     <NextImage
@@ -34,30 +31,17 @@ export function Image({
     />
   )
 
-  return (
-    <>
-      {enableLightbox ? (
-        <button
-          type='button'
-          onClick={openLightbox}
-          aria-label={`Open ${alt} in media viewer`}
-          className='group contents'
-        >
-          {image}
-        </button>
-      ) : (
-        image
-      )}
+  if (!enableLightbox) return image
 
-      {enableLightbox && (
-        <Lightbox
-          isOpen={isLightboxOpen}
-          onClose={() => setIsLightboxOpen(false)}
-          src={typeof src === 'string' ? src : String(src)}
-          alt={alt}
-          type='image'
-        />
-      )}
-    </>
+  return (
+    <Lightbox src={lightboxSrc} alt={alt}>
+      <button
+        type='button'
+        aria-label={`Open ${alt || 'image'} in media viewer`}
+        className='group contents'
+      >
+        {image}
+      </button>
+    </Lightbox>
   )
 }
diff --git a/apps/docs/components/ui/lightbox.tsx b/apps/docs/components/ui/lightbox.tsx
deleted file mode 100644
index d227f389d5b..00000000000
--- a/apps/docs/components/ui/lightbox.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client'
-
-import { useEffect, useEffectEvent, useLayoutEffect, useRef } from 'react'
-import { getAssetUrl } from '@/lib/utils'
-
-interface LightboxProps {
-  isOpen: boolean
-  onClose: () => void
-  src: string
-  alt: string
-  type: 'image' | 'video'
-  startTime?: number
-}
-
-export function Lightbox({ isOpen, onClose, src, alt, type, startTime }: LightboxProps) {
-  const overlayRef = useRef<HTMLDivElement>(null)
-  const mediaButtonRef = useRef<HTMLButtonElement>(null)
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const previouslyFocusedRef = useRef<HTMLElement | null>(null)
-  const closeLightbox = useEffectEvent(onClose)
-
-  useEffect(() => {
-    if (!isOpen) return
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        closeLightbox()
-        return
-      }
-      if (event.key === 'Tab') {
-        event.preventDefault()
-        mediaButtonRef.current?.focus()
-      }
-    }
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (overlayRef.current && event.target === overlayRef.current) {
-        closeLightbox()
-      }
-    }
-
-    const previousOverflow = document.body.style.overflow
-
-    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
-    document.addEventListener('keydown', handleKeyDown)
-    document.addEventListener('click', handleClickOutside)
-    document.body.style.overflow = 'hidden'
-    mediaButtonRef.current?.focus()
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('click', handleClickOutside)
-      document.body.style.overflow = previousOverflow
-      previouslyFocusedRef.current?.focus()
-    }
-  }, [isOpen])
-
-  useLayoutEffect(() => {
-    if (isOpen && type === 'video' && videoRef.current && startTime != null && startTime > 0) {
-      videoRef.current.currentTime = startTime
-    }
-  }, [isOpen, startTime, type])
-
-  if (!isOpen) return null
-
-  return (
-    <div
-      ref={overlayRef}
-      className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-12 backdrop-blur-sm'
-      role='dialog'
-      aria-modal='true'
-      aria-label='Media viewer'
-    >
-      <div className='relative max-h-full max-w-full overflow-hidden rounded-xl'>
-        <button
-          ref={mediaButtonRef}
-          type='button'
-          onClick={onClose}
-          aria-label='Close media viewer'
-          className='block cursor-pointer rounded-xl p-0 outline-none focus-visible:ring-2 focus-visible:ring-white/70'
-        >
-          {type === 'image' ? (
-            <img
-              src={src}
-              alt={alt}
-              className='max-h-[75vh] max-w-[75vw] rounded-xl object-contain'
-              loading='lazy'
-            />
-          ) : (
-            <video
-              ref={videoRef}
-              src={getAssetUrl(src)}
-              autoPlay
-              loop
-              muted
-              playsInline
-              className='max-h-[75vh] max-w-[75vw] rounded-xl outline-none focus:outline-none'
-            />
-          )}
-        </button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/docs/components/ui/video.tsx b/apps/docs/components/ui/video.tsx
index f3b1f4f9e0b..10ba67ab168 100644
--- a/apps/docs/components/ui/video.tsx
+++ b/apps/docs/components/ui/video.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
+import { Lightbox } from '@sim/emcn'
 import { cn, getAssetUrl } from '@/lib/utils'
-import { Lightbox } from './lightbox'
 
 interface VideoProps {
   src: string
@@ -28,8 +28,7 @@ export function Video({
   height,
 }: VideoProps) {
   const videoRef = useRef<HTMLVideoElement>(null)
-  const startTimeRef = useRef(0)
-  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+  const [startTime, setStartTime] = useState(0)
   const [isInView, setIsInView] = useState(false)
 
   useEffect(() => {
@@ -55,8 +54,7 @@ export function Video({
   }, [])
 
   const openLightbox = () => {
-    startTimeRef.current = videoRef.current?.currentTime ?? 0
-    setIsLightboxOpen(true)
+    setStartTime(videoRef.current?.currentTime ?? 0)
   }
 
   const video = (
@@ -78,31 +76,18 @@ export function Video({
     />
   )
 
-  return (
-    <>
-      {enableLightbox ? (
-        <button
-          type='button'
-          onClick={openLightbox}
-          aria-label={`Open ${src} in media viewer`}
-          className='group contents'
-        >
-          {video}
-        </button>
-      ) : (
-        video
-      )}
+  if (!enableLightbox) return video
 
-      {enableLightbox && (
-        <Lightbox
-          isOpen={isLightboxOpen}
-          onClose={() => setIsLightboxOpen(false)}
-          src={src}
-          alt={`Video: ${src}`}
-          type='video'
-          startTime={startTimeRef.current}
-        />
-      )}
-    </>
+  return (
+    <Lightbox src={getAssetUrl(src)} alt={`Video: ${src}`} type='video' startTime={startTime}>
+      <button
+        type='button'
+        onClick={openLightbox}
+        aria-label={`Open ${src} in media viewer`}
+        className='group contents'
+      >
+        {video}
+      </button>
+    </Lightbox>
   )
 }
diff --git a/apps/sim/app/(landing)/components/content-image/content-image.tsx b/apps/sim/app/(landing)/components/content-image/content-image.tsx
index 001430c7a4a..c14d508f9c8 100644
--- a/apps/sim/app/(landing)/components/content-image/content-image.tsx
+++ b/apps/sim/app/(landing)/components/content-image/content-image.tsx
@@ -1,9 +1,7 @@
 'use client'
 
-import { useState } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, Lightbox } from '@sim/emcn'
 import NextImage from 'next/image'
-import { Lightbox } from '@/app/(landing)/components/lightbox'
 
 interface ContentImageProps {
   src: string
@@ -24,30 +22,27 @@ export function ContentImage({
   height = 450,
   className,
 }: ContentImageProps) {
-  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
-
   return (
-    <>
-      <NextImage
-        src={src}
-        alt={alt}
-        width={width}
-        height={height}
-        className={cn(
-          'h-auto w-full cursor-pointer rounded-lg transition-opacity hover:opacity-95',
-          className
-        )}
-        sizes='(max-width: 768px) 100vw, 800px'
-        loading='lazy'
-        unoptimized
-        onClick={() => setIsLightboxOpen(true)}
-      />
-      <Lightbox
-        isOpen={isLightboxOpen}
-        onClose={() => setIsLightboxOpen(false)}
-        src={src}
-        alt={alt}
-      />
-    </>
+    <Lightbox src={src} alt={alt}>
+      <button
+        type='button'
+        aria-label={`Open ${alt || 'image'} in media viewer`}
+        className='block w-full'
+      >
+        <NextImage
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          className={cn(
+            'h-auto w-full cursor-pointer rounded-lg transition-opacity hover:opacity-95',
+            className
+          )}
+          sizes='(max-width: 768px) 100vw, 800px'
+          loading='lazy'
+          unoptimized
+        />
+      </button>
+    </Lightbox>
   )
 }
diff --git a/apps/sim/app/(landing)/components/index.ts b/apps/sim/app/(landing)/components/index.ts
index 657a1db4c07..d0ee91b5b1d 100644
--- a/apps/sim/app/(landing)/components/index.ts
+++ b/apps/sim/app/(landing)/components/index.ts
@@ -15,7 +15,6 @@ export { HomeStructuredData } from './home-structured-data'
 export type { JsonLdData } from './json-ld'
 export { JsonLd } from './json-ld'
 export { LandingShell } from './landing-shell'
-export { Lightbox } from './lightbox'
 export { LogoShell } from './logo-shell'
 export { Navbar } from './navbar'
 export { PlatformHeroVisual } from './platform-hero-visual'
diff --git a/apps/sim/app/(landing)/components/lightbox/index.ts b/apps/sim/app/(landing)/components/lightbox/index.ts
deleted file mode 100644
index 1055bfa3ff7..00000000000
--- a/apps/sim/app/(landing)/components/lightbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Lightbox } from './lightbox'
diff --git a/apps/sim/app/(landing)/components/lightbox/lightbox.tsx b/apps/sim/app/(landing)/components/lightbox/lightbox.tsx
deleted file mode 100644
index 7afd596cd72..00000000000
--- a/apps/sim/app/(landing)/components/lightbox/lightbox.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client'
-
-import { useEffect, useEffectEvent, useRef } from 'react'
-
-interface LightboxProps {
-  isOpen: boolean
-  onClose: () => void
-  src: string
-  alt: string
-}
-
-export function Lightbox({ isOpen, onClose, src, alt }: LightboxProps) {
-  const overlayRef = useRef<HTMLDivElement>(null)
-
-  const onCloseEvent = useEffectEvent(onClose)
-
-  useEffect(() => {
-    if (!isOpen) return
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onCloseEvent()
-      }
-    }
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (overlayRef.current && event.target === overlayRef.current) {
-        onCloseEvent()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    document.addEventListener('click', handleClickOutside)
-    document.body.style.overflow = 'hidden'
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('click', handleClickOutside)
-      document.body.style.overflow = 'unset'
-    }
-  }, [isOpen])
-
-  if (!isOpen) return null
-
-  return (
-    <div
-      ref={overlayRef}
-      className='fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-12 backdrop-blur-xs'
-      role='dialog'
-      aria-modal='true'
-      aria-label='Image viewer'
-    >
-      <div className='relative max-h-full max-w-full overflow-hidden rounded-xl shadow-2xl'>
-        <button type='button' className='block cursor-pointer rounded-xl' onClick={onClose}>
-          <img
-            src={src}
-            alt={alt}
-            className='max-h-[75vh] max-w-[75vw] rounded-xl object-contain'
-            loading='lazy'
-          />
-        </button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx
index 0e6e3602842..ddf44547039 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { bindPreviewWheelZoom, cn } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { sanitizeRenderedHyperlinks, stripEmbeddedFrames } from '@/lib/core/security/url-safety'
@@ -9,7 +9,6 @@ import { assertOoxmlPreviewWithinLimits } from '@/lib/file-parsers/ooxml-preview
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { PREVIEW_LOADING_OVERLAY, PreviewError, resolvePreviewError } from './preview-shared'
 import { PreviewToolbar } from './preview-toolbar'
-import { bindPreviewWheelZoom } from './preview-wheel-zoom'
 import { useDocPreviewBinary } from './use-doc-preview-binary'
 
 const logger = createLogger('DocxPreview')
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
index d548c8ac2f2..653d7b2bde2 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
@@ -9,9 +9,9 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { pdfjs, Document as ReactPdfDocument, Page as ReactPdfPage } from 'react-pdf'
 import 'react-pdf/dist/Page/TextLayer.css'
+import { bindPreviewWheelZoom } from '@sim/emcn'
 import { PREVIEW_LOADING_OVERLAY } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared'
 import { PreviewToolbar } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar'
-import { bindPreviewWheelZoom } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
 
 /**
  * The worker runs in its own context that browser-polyfills cannot reach, so
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-sandbox-host.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-sandbox-host.tsx
index cc769c274a2..e99013757cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-sandbox-host.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pptx-sandbox-host.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { bindPreviewWheelZoom } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { openSimPptxViewer, type SimPptxViewerHandle } from '@/lib/pptx-renderer/sim-pptx-viewer'
 import { PreviewToolbar } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar'
-import { bindPreviewWheelZoom } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
 
 const logger = createLogger('PptxSandboxHost')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll.ts
index d5d941d26c0..0cd9ff3e40a 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll.ts
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll.ts
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useRef } from 'react'
-import { bindPreviewHorizontalWheel } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
+import { bindPreviewHorizontalWheel } from '@sim/emcn'
 
 /**
  * Ref callback that gives a preview scroll container horizontal wheel scrolling.
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx
index 327e2808393..afa9665bf77 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx
@@ -2,9 +2,8 @@
 
 import type { MouseEvent, ReactNode } from 'react'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { bindPreviewWheelZoom, cn } from '@sim/emcn'
 import { PreviewToolbar } from './preview-toolbar'
-import { bindPreviewWheelZoom } from './preview-wheel-zoom'
 
 const ZOOM_MIN = 0.25
 const ZOOM_MAX = 4
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx
index ff13612456f..10d16ddd7f0 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@sim/emcn'
+import { cn, Lightbox } from '@sim/emcn'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatMessageAttachment } from '@/app/workspace/[workspaceId]/home/types'
 
@@ -57,9 +57,15 @@ export function ChatMessageAttachments(props: {
           )
         }
         return (
-          <div key={att.id} className='size-[56px] overflow-hidden rounded-lg'>
-            <img src={att.previewUrl} alt={att.filename} className='size-full object-cover' />
-          </div>
+          <Lightbox key={att.id} src={att.previewUrl} alt={att.filename}>
+            <button
+              type='button'
+              aria-label={`Preview ${att.filename}`}
+              className='size-[56px] cursor-pointer overflow-hidden rounded-lg'
+            >
+              <img src={att.previewUrl} alt={att.filename} className='size-full object-cover' />
+            </button>
+          </Lightbox>
         )
       })}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
index db3f8c36ecd..4f42d169c1c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState } from 'react'
-import { cn, Loader } from '@sim/emcn'
+import { cn, Lightbox, Loader } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
@@ -41,74 +41,86 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
   const isMedia = isVideo || file.type.startsWith('image/')
   const extension = getFileExtension(file.name)
   const [previewFailed, setPreviewFailed] = useState(false)
+  const lightboxSrc = file.type.startsWith('image/') && !previewFailed ? file.previewUrl : undefined
 
-  return (
-    /* Owns the width cap: it anchors the remove badge, which a max-content button would strand. */
-    <div
+  const preview = (
+    <button
+      type='button'
       className={cn(
-        'group relative',
-        isMedia ? 'size-[48px] shrink-0' : 'h-[48px] min-w-0 max-w-[min(220px,100%)]'
+        CHIP_SURFACE,
+        'size-full',
+        isMedia ? 'overflow-hidden' : 'flex items-center gap-2 py-[7px] pr-5 pl-2'
       )}
+      onClick={lightboxSrc ? undefined : () => onFileClick(file)}
+      aria-label={lightboxSrc ? `Preview ${file.name}` : `Open ${file.name}`}
     >
-      <button
-        type='button'
-        className={cn(
-          CHIP_SURFACE,
-          'size-full',
-          isMedia ? 'overflow-hidden' : 'flex items-center gap-2 py-[7px] pr-5 pl-2'
-        )}
-        onClick={() => onFileClick(file)}
-      >
-        {isMedia ? (
-          <>
-            <span className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
-              <Icon className='size-[18px]' />
-            </span>
-            {file.previewUrl &&
-              !previewFailed &&
-              (isVideo ? (
-                <video
-                  src={file.previewUrl}
-                  muted
-                  playsInline
-                  preload='metadata'
-                  className='relative size-full object-cover'
-                />
-              ) : (
-                <img
-                  src={file.previewUrl}
-                  alt={file.name}
-                  onError={() => setPreviewFailed(true)}
-                  className='relative size-full object-cover'
-                />
-              ))}
-          </>
-        ) : (
-          <>
-            {/* Fill is constant — the chip's own hover is the only hover affordance. It
+      {isMedia ? (
+        <>
+          <span className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
+            <Icon className='size-[18px]' />
+          </span>
+          {file.previewUrl &&
+            !previewFailed &&
+            (isVideo ? (
+              <video
+                src={file.previewUrl}
+                muted
+                playsInline
+                preload='metadata'
+                className='relative size-full object-cover'
+              />
+            ) : (
+              <img
+                src={file.previewUrl}
+                alt={file.name}
+                onError={() => setPreviewFailed(true)}
+                className='relative size-full object-cover'
+              />
+            ))}
+        </>
+      ) : (
+        <>
+          {/* Fill is constant — the chip's own hover is the only hover affordance. It
                 sits a step below `--surface-6` in light mode so the chip's hover fill
                 (`--surface-active`) cannot close on it. */}
-            <span className='flex size-[32px] shrink-0 items-center justify-center rounded-md bg-[var(--surface-7)] text-[var(--text-icon)] dark:bg-[var(--surface-3)]'>
-              <Icon className='size-[16px]' />
+          <span className='flex size-[32px] shrink-0 items-center justify-center rounded-md bg-[var(--surface-7)] text-[var(--text-icon)] dark:bg-[var(--surface-3)]'>
+            <Icon className='size-[16px]' />
+          </span>
+          <span className='flex min-w-0 flex-col items-start'>
+            <span className='w-full truncate text-[var(--text-body)] text-small leading-tight'>
+              {file.name}
             </span>
-            <span className='flex min-w-0 flex-col items-start'>
-              <span className='w-full truncate text-[var(--text-body)] text-small leading-tight'>
-                {file.name}
+            {extension && (
+              <span className='text-[var(--text-icon)] text-caption uppercase leading-tight'>
+                {extension}
               </span>
-              {extension && (
-                <span className='text-[var(--text-icon)] text-caption uppercase leading-tight'>
-                  {extension}
-                </span>
-              )}
-            </span>
-          </>
-        )}
-        {file.uploading && (
-          <span className='absolute inset-0 flex items-center justify-center rounded-[inherit] bg-[var(--surface-5)]/70 dark:bg-[var(--surface-4)]/70'>
-            <Loader className='size-[14px] text-[var(--text-icon)]' animate />
+            )}
           </span>
-        )}
-      </button>
+        </>
+      )}
+      {file.uploading && (
+        <span className='absolute inset-0 flex items-center justify-center rounded-[inherit] bg-[var(--surface-5)]/70 dark:bg-[var(--surface-4)]/70'>
+          <Loader className='size-[14px] text-[var(--text-icon)]' animate />
+        </span>
+      )}
+    </button>
+  )
+
+  return (
+    /* Owns the width cap: it anchors the remove badge, which a max-content button would strand. */
+    <div
+      className={cn(
+        'group relative',
+        isMedia ? 'size-[48px] shrink-0' : 'h-[48px] min-w-0 max-w-[min(220px,100%)]'
+      )}
+    >
+      {lightboxSrc ? (
+        <Lightbox src={lightboxSrc} alt={file.name}>
+          {preview}
+        </Lightbox>
+      ) : (
+        preview
+      )}
       {!file.uploading && (
         <button
           type='button'
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index ecfcb816719..68601fa558a 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -153,6 +153,7 @@ export {
 export { Input, type InputProps } from './input/input'
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
 export { Label } from './label/label'
+export { Lightbox, type LightboxProps } from './lightbox/lightbox'
 export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus'
 export {
   MODAL_SIZES,
diff --git a/packages/emcn/src/components/lightbox/lightbox.test.tsx b/packages/emcn/src/components/lightbox/lightbox.test.tsx
new file mode 100644
index 00000000000..739410ce0a3
--- /dev/null
+++ b/packages/emcn/src/components/lightbox/lightbox.test.tsx
@@ -0,0 +1,142 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { Lightbox } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('next/navigation', () => ({ usePathname: () => '/introduction' }))
+
+let root: Root
+let container: HTMLDivElement
+
+function button(label: string): HTMLButtonElement {
+  const element = document.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`)
+  if (!element) throw new Error(`Missing button: ${label}`)
+  return element
+}
+
+function media(): HTMLImageElement {
+  const element = document.querySelector<HTMLImageElement>('[role="dialog"] img')
+  if (!element) throw new Error('Missing lightbox image')
+  return element
+}
+
+function wheel(init: WheelEventInit): WheelEvent {
+  const event = new WheelEvent('wheel', { bubbles: true, cancelable: true, ...init })
+  act(() => media().dispatchEvent(event))
+  return event
+}
+
+async function click(label: string) {
+  await act(async () => button(label).click())
+}
+
+describe('Lightbox interactions', () => {
+  beforeEach(async () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    await act(async () =>
+      root.render(
+        <Lightbox src='/image.png' alt='Example image'>
+          <button type='button' aria-label='Open image'>
+            Preview
+          </button>
+        </Lightbox>
+      )
+    )
+    await click('Open image')
+  })
+
+  afterEach(async () => {
+    await act(async () => root.unmount())
+    container.remove()
+    document.body.replaceChildren()
+    document.body.removeAttribute('style')
+    vi.restoreAllMocks()
+  })
+
+  it.each([{ ctrlKey: true }, { metaKey: true }])(
+    'zooms the media in both directions and cancels page zoom for %j',
+    (modifier) => {
+      const zoomIn = wheel({ ...modifier, deltaY: -40 })
+      expect(zoomIn.defaultPrevented).toBe(true)
+      expect(Number(media().style.zoom)).toBeCloseTo(Math.exp(0.2))
+
+      const zoomOut = wheel({ ...modifier, deltaY: 40 })
+      expect(zoomOut.defaultPrevented).toBe(true)
+      expect(Number(media().style.zoom)).toBeCloseTo(1)
+    }
+  )
+
+  it('leaves ordinary vertical scrolling available without changing zoom', () => {
+    const event = wheel({ deltaY: 40 })
+    expect(event.defaultPrevented).toBe(false)
+    expect(media().style.zoom).toBe('1')
+  })
+
+  it('keeps toolbar controls open, clamps zoom, and resets to fit', async () => {
+    await click('Zoom in')
+    expect(media().style.zoom).toBe('1.25')
+    await click('Zoom out')
+    expect(media().style.zoom).toBe('1')
+
+    wheel({ ctrlKey: true, deltaY: -10000 })
+    expect(media().style.zoom).toBe('4')
+    expect(button('Zoom in').disabled).toBe(true)
+    wheel({ ctrlKey: true, deltaY: 10000 })
+    expect(media().style.zoom).toBe('0.25')
+    expect(button('Zoom out').disabled).toBe(true)
+    await click('Reset zoom (25%)')
+    expect(media().style.zoom).toBe('1')
+  })
+
+  it('preserves the point beneath the gesture when zoom changes', () => {
+    const frame = button('Close media viewer')
+    const viewport = frame.parentElement?.parentElement
+    if (!viewport) throw new Error('Missing viewport')
+    const getBounds = vi.spyOn(frame, 'getBoundingClientRect')
+    getBounds.mockReturnValueOnce(new DOMRect(100, 100, 400, 300))
+    getBounds.mockReturnValueOnce(new DOMRect(100, 100, 800, 600))
+
+    wheel({ ctrlKey: true, deltaY: -Math.log(2) / 0.005, clientX: 200, clientY: 175 })
+
+    expect(viewport.scrollLeft).toBeCloseTo(100)
+    expect(viewport.scrollTop).toBeCloseTo(75)
+  })
+
+  it('closes on the image, restores focus, and binds gestures again after reopening', async () => {
+    const oldMedia = media()
+    wheel({ ctrlKey: true, deltaY: -40 })
+    await click('Close media viewer')
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+    await vi.waitFor(() => expect(document.activeElement).toBe(button('Open image')))
+    const detachedWheel = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      ctrlKey: true,
+      deltaY: -40,
+    })
+    oldMedia.dispatchEvent(detachedWheel)
+    expect(detachedWheel.defaultPrevented).toBe(false)
+
+    await click('Open image')
+    expect(media().style.zoom).toBe('1')
+    expect(wheel({ ctrlKey: true, deltaY: -40 }).defaultPrevented).toBe(true)
+    expect(Number(media().style.zoom)).toBeGreaterThan(1)
+  })
+
+  it('dismisses on the viewport background and Escape', async () => {
+    const dialog = document.querySelector<HTMLElement>('[role="dialog"]')
+    await act(async () => dialog?.click())
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+    await click('Open image')
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    })
+    expect(document.querySelector('[role="dialog"]')).toBeNull()
+  })
+})
diff --git a/packages/emcn/src/components/lightbox/lightbox.tsx b/packages/emcn/src/components/lightbox/lightbox.tsx
new file mode 100644
index 00000000000..cc67372190d
--- /dev/null
+++ b/packages/emcn/src/components/lightbox/lightbox.tsx
@@ -0,0 +1,201 @@
+'use client'
+
+import { type ReactElement, useCallback, useLayoutEffect, useRef, useState } from 'react'
+import {
+  bindPreviewWheelZoom,
+  Chip,
+  chipFieldSurfaceClass,
+  cn,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalTrigger,
+} from '@sim/emcn'
+import { Minus, Plus } from '@sim/emcn/icons'
+
+export interface LightboxProps {
+  /** A button that opens the viewer. */
+  children: ReactElement
+  src: string
+  alt: string
+  type?: 'image' | 'video'
+  /** Playback position to resume when a video opens. */
+  startTime?: number
+}
+
+const ZOOM_MIN = 0.25
+const ZOOM_MAX = 4
+const ZOOM_STEP = 0.25
+const ZOOM_WHEEL_SENSITIVITY = 0.005
+const MEDIA_CLASS = 'block h-auto max-h-[calc(100dvh-6rem)] w-auto max-w-[92vw] object-contain'
+
+interface ZoomAnchor {
+  clientX: number
+  clientY: number
+  fractionX: number
+  fractionY: number
+}
+
+function centerViewport(viewport: HTMLDivElement | null) {
+  if (!viewport) return
+  viewport.scrollLeft = (viewport.scrollWidth - viewport.clientWidth) / 2
+  viewport.scrollTop = (viewport.scrollHeight - viewport.clientHeight) / 2
+}
+
+/**
+ * A click-to-close media viewer with bottom zoom controls, the platform's modal
+ * focus trap, Escape dismissal, and focus restoration to its trigger.
+ *
+ * @example
+ * ```tsx
+ * <Lightbox src={src} alt='Screenshot'>
+ *   <button type='button'><img src={src} alt='Screenshot' /></button>
+ * </Lightbox>
+ * ```
+ */
+export function Lightbox({ children, src, alt, type = 'image', startTime = 0 }: LightboxProps) {
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const mediaFrameRef = useRef<HTMLButtonElement>(null)
+  const controlsRef = useRef<HTMLDivElement>(null)
+  const zoomAnchorRef = useRef<ZoomAnchor | null>(null)
+  const [open, setOpen] = useState(false)
+  const [zoom, setZoom] = useState(1)
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (nextOpen) {
+      zoomAnchorRef.current = null
+      setZoom(1)
+    }
+    setOpen(nextOpen)
+  }
+
+  function handleControlZoom(nextZoom: number) {
+    zoomAnchorRef.current = null
+    setZoom(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, nextZoom)))
+  }
+
+  const attachViewport = useCallback((viewport: HTMLDivElement | null) => {
+    viewportRef.current = viewport
+    if (!viewport) return
+
+    const unbind = bindPreviewWheelZoom(viewport, (event) => {
+      const frame = mediaFrameRef.current?.getBoundingClientRect()
+      if (frame && frame.width > 0 && frame.height > 0) {
+        zoomAnchorRef.current = {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          fractionX: (event.clientX - frame.left) / frame.width,
+          fractionY: (event.clientY - frame.top) / frame.height,
+        }
+      }
+      setZoom((current) =>
+        Math.min(
+          ZOOM_MAX,
+          Math.max(ZOOM_MIN, current * Math.exp(-event.deltaY * ZOOM_WHEEL_SENSITIVITY))
+        )
+      )
+    })
+
+    return () => {
+      unbind()
+      viewportRef.current = null
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current
+    const anchor = zoomAnchorRef.current
+    const frame = mediaFrameRef.current?.getBoundingClientRect()
+    if (viewport && anchor && frame) {
+      viewport.scrollLeft += frame.left + anchor.fractionX * frame.width - anchor.clientX
+      viewport.scrollTop += frame.top + anchor.fractionY * frame.height - anchor.clientY
+    } else {
+      centerViewport(viewport)
+    }
+    zoomAnchorRef.current = null
+  }, [open, zoom])
+
+  return (
+    <Modal open={open} onOpenChange={handleOpenChange}>
+      <ModalTrigger asChild>{children}</ModalTrigger>
+      <ModalContent
+        bare
+        size='full'
+        srTitle={alt || 'Media viewer'}
+        overlayClassName='bg-black/80'
+        className='h-dvh max-h-none w-screen min-w-full max-w-none gap-3 py-4 outline-none'
+        onClick={(event) => {
+          if (!controlsRef.current?.contains(event.target as Node)) setOpen(false)
+        }}
+      >
+        <div ref={attachViewport} className='min-h-0 flex-1 overflow-auto overscroll-contain'>
+          <div className='flex min-h-full w-max min-w-full items-center justify-center'>
+            <ModalClose asChild>
+              <button
+                ref={mediaFrameRef}
+                type='button'
+                aria-label='Close media viewer'
+                className='m-1 block shrink-0 cursor-pointer overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-0 shadow-[var(--shadow-overlay)] outline-none'
+              >
+                {type === 'image' ? (
+                  <img
+                    src={src}
+                    alt={alt}
+                    draggable={false}
+                    onLoad={() => centerViewport(viewportRef.current)}
+                    className={MEDIA_CLASS}
+                    style={{ zoom }}
+                  />
+                ) : (
+                  <video
+                    src={src}
+                    aria-label={alt}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    onLoadedMetadata={(event) => {
+                      if (startTime > 0) event.currentTarget.currentTime = startTime
+                      centerViewport(viewportRef.current)
+                    }}
+                    className={MEDIA_CLASS}
+                    style={{ zoom }}
+                  />
+                )}
+              </button>
+            </ModalClose>
+          </div>
+        </div>
+        <div
+          ref={controlsRef}
+          role='group'
+          aria-label='Media zoom'
+          className={cn(
+            chipFieldSurfaceClass,
+            'mx-auto flex shrink-0 items-center p-1 shadow-[var(--shadow-overlay)]'
+          )}
+        >
+          <Chip
+            leftIcon={Minus}
+            aria-label='Zoom out'
+            disabled={zoom <= ZOOM_MIN}
+            onClick={() => handleControlZoom(zoom - ZOOM_STEP)}
+          />
+          <Chip
+            aria-label={`Reset zoom (${Math.round(zoom * 100)}%)`}
+            onClick={() => handleControlZoom(1)}
+            className='min-w-16 text-center tabular-nums'
+          >
+            {Math.round(zoom * 100)}%
+          </Chip>
+          <Chip
+            leftIcon={Plus}
+            aria-label='Zoom in'
+            disabled={zoom >= ZOOM_MAX}
+            onClick={() => handleControlZoom(zoom + ZOOM_STEP)}
+          />
+        </div>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx
index 6309ee44ae7..bbf47f5e36e 100644
--- a/packages/emcn/src/components/modal/modal.tsx
+++ b/packages/emcn/src/components/modal/modal.tsx
@@ -426,6 +426,8 @@ export type ModalSize = keyof typeof MODAL_SIZES
 
 export interface ModalContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /** Backdrop styling for specialized surfaces such as media viewers. */
+  overlayClassName?: string
   /**
    * Whether to show the close button
    * @default true
@@ -488,6 +490,7 @@ const ModalContent = React.forwardRef<
   (
     {
       className,
+      overlayClassName,
       children,
       showClose = true,
       size = 'md',
@@ -562,6 +565,7 @@ const ModalContent = React.forwardRef<
     return (
       <ModalPortal>
         <ModalOverlay
+          className={overlayClassName}
           nativeSurfaceBarrierClaimedRef={nativeSurfaceBarrierClaimedRef}
           nativeSurfaceReady={nativeSurfaceReady}
           onNativeSurfaceReadyChange={handleNativeSurfaceReadyChange}
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index 24147d385e0..606265b1994 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -51,3 +51,4 @@ export { useScrollEdges } from './hooks/use-scroll-edges'
 export * from './icons'
 export { cn } from './lib/cn'
 export { handleKeyboardActivation, isKeyboardActivation } from './lib/keyboard'
+export { bindPreviewHorizontalWheel, bindPreviewWheelZoom } from './lib/preview-wheel-zoom'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.test.ts b/packages/emcn/src/lib/preview-wheel-zoom.test.ts
similarity index 97%
rename from apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.test.ts
rename to packages/emcn/src/lib/preview-wheel-zoom.test.ts
index 2d57af9d430..a5b42ef1423 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.test.ts
+++ b/packages/emcn/src/lib/preview-wheel-zoom.test.ts
@@ -7,8 +7,9 @@
  * of the way otherwise, and — unlike the zooming variant — leave ctrl/cmd+wheel to the browser
  * so page zoom still works over a table.
  */
+
+import { bindPreviewHorizontalWheel } from '@sim/emcn'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { bindPreviewHorizontalWheel } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
 
 /** jsdom does no layout, so scrollWidth/clientWidth are stubbed to model an overflowing container. */
 function makeContainer({ scrollWidth = 2000, clientWidth = 1000 } = {}): HTMLElement {
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.ts b/packages/emcn/src/lib/preview-wheel-zoom.ts
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom.ts
rename to packages/emcn/src/lib/preview-wheel-zoom.ts