@kolkrabbi/kol-component 0.216.0 → 0.218.0

package/src/molecules/Modal.jsx

@@ -4,13 +4,14 @@ import Button from '../atoms/Button.jsx'
 import Input from '../atoms/Input.jsx'
 
 /**
- * Modal — promise-based prompt + confirm dialogs.
+ * Modal — promise-based prompt + confirm + alert dialogs.
  *
- *   const { prompt, confirm } = useModal()
+ *   const { prompt, confirm, alert } = useModal()
  *   const name    = await prompt('Name this frame:', 'Untitled')
  *   const proceed = await confirm('Discard unsaved changes?')
  *   const restore = await confirm('Restore your last canvas?',
  *                                 { okLabel: 'Restore', cancelLabel: 'New file' })
+ *   await alert('Upload failed: quota exceeded')
  *
  * Both take an options object — `{ okLabel, cancelLabel }` (prompt: third
  * arg, after defaultValue) — so the buttons can SAY the outcome; defaults
@@ -20,6 +21,9 @@ import Input from '../atoms/Input.jsx'
  * Returned promise resolves to:
  *   - prompt  → string (value) on submit, `null` on cancel
  *   - confirm → boolean: `true` on confirm, `false` on cancel
+ *   - alert   → undefined, once dismissed. One button; `okLabel` names it.
+ *     Added 2026-09-22 (media-pages-route-dialogs-through-usemodal) so an
+ *     error report needs no native `alert()` beside DS prompts.
  *
  * Mounted once at the app root (BrandLayout). Renders into `document.body`
  * via portal, so it floats above any rail / scroll-context.
@@ -45,8 +49,12 @@ export function ModalProvider({ children }) {
     new Promise((resolve) => setState({ kind: 'confirm', title, okLabel, cancelLabel, resolve })),
   [])
 
+  const alert = useCallback((title, { okLabel } = {}) =>
+    new Promise((resolve) => setState({ kind: 'alert', title, okLabel, resolve })),
+  [])
+
   return (
-    <ModalCtx.Provider value={{ prompt, confirm }}>
+    <ModalCtx.Provider value={{ prompt, confirm, alert }}>
       {children}
       {state && typeof document !== 'undefined' && createPortal(
         <ModalView state={state} closeWith={closeWith} />,
@@ -60,18 +68,19 @@ function ModalView({ state, closeWith }) {
   const [val, setVal] = useState(state.defaultValue ?? '')
   const inputRef = useRef(null)
 
+  /* alert resolves `undefined` whichever way it is dismissed */
+  const submit = () => closeWith(state.kind === 'prompt' ? val : state.kind === 'alert' ? undefined : true)
+  const cancel = () => closeWith(state.kind === 'prompt' ? null : state.kind === 'alert' ? undefined : false)
+
   useEffect(() => {
     if (state.kind === 'prompt') inputRef.current?.focus()
     const onKey = (e) => {
-      if (e.key === 'Escape') closeWith(state.kind === 'prompt' ? null : false)
-      if (e.key === 'Enter')  closeWith(state.kind === 'prompt' ? val : true)
+      if (e.key === 'Escape') cancel()
+      if (e.key === 'Enter')  submit()
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [state.kind, val, closeWith])
-
-  const submit = () => closeWith(state.kind === 'prompt' ? val : true)
-  const cancel = () => closeWith(state.kind === 'prompt' ? null : false)
+  }, [state.kind, val, closeWith]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div
@@ -97,7 +106,8 @@ function ModalView({ state, closeWith }) {
       >
         {/* kol-mono-12, not helper: dialog copy WRAPS, and helper's
           * line-height 1 is single-line chrome only (type protocol). */}
-        <p className="kol-mono-12 text-emphasis">{state.title}</p>
+        {/* pre-line: an alert can carry a failure list, one per line */}
+        <p className="kol-mono-12 text-emphasis whitespace-pre-line">{state.title}</p>
         {state.kind === 'prompt' && (
           <Input
             ref={inputRef}
@@ -109,7 +119,7 @@ function ModalView({ state, closeWith }) {
           />
         )}
         <div className="flex gap-2 justify-end">
-          <Button variant="secondary" size="sm" onClick={cancel}>{state.cancelLabel ?? 'Cancel'}</Button>
+          {state.kind !== 'alert' && <Button variant="secondary" size="sm" onClick={cancel}>{state.cancelLabel ?? 'Cancel'}</Button>}
           <Button variant="primary"   size="sm" onClick={submit}>{state.okLabel ?? 'OK'}</Button>
         </div>
       </div>
@@ -129,7 +139,7 @@ export function useModal() {
    * don't need to null-check. */
   if (!warnedNoProvider && typeof console !== 'undefined') {
     warnedNoProvider = true
-    console.warn('[kol] useModal(): no <ModalProvider> mounted — falling back to native window.prompt/confirm. Custom labels are ignored on the fallback.')
+    console.warn('[kol] useModal(): no <ModalProvider> mounted — falling back to native window.prompt/confirm/alert. Custom labels are ignored on the fallback.')
   }
   return {
     prompt:  async (title, def = '') => {
@@ -141,5 +151,8 @@ export function useModal() {
       if (typeof window === 'undefined') return false
       return window.confirm(title)
     },
+    alert: async (title) => {
+      if (typeof window !== 'undefined') window.alert(title)
+    },
   }
 }

package/src/molecules/PdfPage.jsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from 'react'
+
+/* taxonomy-ok: molecule — a renderer KindPreview composes; no DS parts of its own to nest. */
+
+/**
+ * PdfPage · PdfDocument — a PDF drawn flat to canvases. The thumbnail Finder, Drive and Dropbox
+ * all show (user 2026-09-23: *"why is pdf preview inconsistent"*). The browser's `<embed>` is a
+ * viewer — Chrome paints its toolbar over the tile whatever the URL fragment says — so every fit
+ * draws pictures with pdf.js instead, and Quick Look gets Finder's layout from the same renderer.
+ *
+ *   PdfPage      page one, sized to its box — tiles and the column pane
+ *   PdfDocument  every page in a scroller with a thumbnail rail — the Quick Look window
+ *
+ * pdf.js is imported on first use, so a page with no PDF never loads it. A canvas paints at its
+ * box's width × device pixel ratio, and only once it scrolls into view.
+ *
+ * @param {string}    src       the PDF's URL
+ * @param {ReactNode} fallback  shown if the file cannot be parsed
+ */
+let pdfjs = null
+async function loadPdfjs() {
+  if (pdfjs) return pdfjs
+  const [lib, worker] = await Promise.all([
+    import('pdfjs-dist'),
+    import('pdfjs-dist/build/pdf.worker.min.mjs?url'),
+  ])
+  lib.GlobalWorkerOptions.workerSrc = worker.default
+  pdfjs = lib
+  return lib
+}
+
+function usePdf(src) {
+  const [state, setState] = useState({ src: null, doc: null, failed: false })
+  useEffect(() => {
+    let cancelled = false
+    let loading = null
+    loadPdfjs()
+      .then((lib) => { loading = lib.getDocument({ url: src }); return loading.promise })
+      .then((doc) => { if (!cancelled) setState({ src, doc, failed: false }) })
+      .catch(() => { if (!cancelled) setState({ src, doc: null, failed: true }) })
+    return () => { cancelled = true; loading?.destroy() }
+  }, [src])
+  return state.src === src ? state : { doc: null, failed: false }
+}
+
+function PdfCanvas({ doc, page, className = '' }) {
+  const ref = useRef(null)
+  useEffect(() => {
+    const canvas = ref.current
+    if (!doc || !canvas) return undefined
+    let task = null
+    let done = false
+    const paint = async () => {
+      done = true
+      const p = await doc.getPage(page)
+      const width = canvas.clientWidth || canvas.parentElement?.clientWidth || 400
+      const base = p.getViewport({ scale: 1 })
+      const viewport = p.getViewport({ scale: (width / base.width) * (window.devicePixelRatio || 1) })
+      canvas.width = viewport.width
+      canvas.height = viewport.height
+      task = p.render({ canvas, viewport })
+      await task.promise.catch(() => {})
+    }
+    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting && !done) { io.disconnect(); paint() } })
+    io.observe(canvas)
+    return () => { io.disconnect(); task?.cancel() }
+  }, [doc, page])
+  return <canvas ref={ref} className={`kol-pdf-page ${className}`.trim()} />
+}
+
+export default function PdfPage({ src, fallback = null, className = '' }) {
+  const { doc, failed } = usePdf(src)
+  if (failed) return fallback
+  return <PdfCanvas doc={doc} page={1} className={className} />
+}
+
+export function PdfDocument({ src, fallback = null }) {
+  const { doc, failed } = usePdf(src)
+  const [current, setCurrent] = useState(1)
+  const mainRef = useRef(null)
+  const pages = doc ? Array.from({ length: doc.numPages }, (_, i) => i + 1) : []
+  /* the rail follows the scroller: whichever page holds the middle of the view is current */
+  useEffect(() => {
+    const main = mainRef.current
+    if (!main || !doc) return undefined
+    const io = new IntersectionObserver((entries) => {
+      for (const e of entries) if (e.isIntersecting) setCurrent(Number(e.target.dataset.page))
+    }, { root: main, rootMargin: '-50% 0px -50% 0px' })
+    main.querySelectorAll('[data-page]').forEach((el) => io.observe(el))
+    return () => io.disconnect()
+  }, [doc])
+  if (failed) return fallback
+  const go = (n) => mainRef.current?.querySelector(`[data-page="${n}"]`)?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+  return (
+    <div className="kol-pdf-document">
+      <div ref={mainRef} className="kol-pdf-document-main">
+        {pages.map((n) => <div key={n} data-page={n}><PdfCanvas doc={doc} page={n} /></div>)}
+      </div>
+      {pages.length > 1 && (
+        <div className="kol-pdf-document-rail">
+          {pages.map((n) => (
+            <button key={n} type="button" onClick={() => go(n)} aria-label={`Page ${n}`} aria-current={n === current || undefined}>
+              <PdfCanvas doc={doc} page={n} />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/molecules/PlaybackBar.jsx

@@ -37,24 +37,32 @@ const RATES = [1, 1.5, 2]
  * @param {Function} onVolume  (0..1) => void
  * @param {Function} onRate    (rate) => void — omit to hide the speed control
  * @param {string}   place     the strip's position classes (see above)
+ * @param {boolean}  docked    in a window's footer (`QuickLookFrame`, 2026-09-23): in flow, full
+ *                             width, 48 tall, the 4px container radius (the 12 is the FLOATING bar's
+ *                             ruling, not a window's), and the THEME's ink on an oq plate — it sits on the
+ *                             window, not on media, so white glyphs would vanish in light; `place`
+ *                             is ignored
  */
-export default function PlaybackBar({ playing, time, duration, rate = 1, onToggle, onSeek, onVolume, onRate, place = 'left-4 right-4 bottom-4 rounded-xl' }) {
+export default function PlaybackBar({ playing, time, duration, rate = 1, onToggle, onSeek, onVolume, onRate, place = 'left-4 right-4 bottom-4 rounded-xl', docked = false }) {
   const [volume, setVolume] = useState(100)
   const [open, setOpen] = useState(false)
   const pop = usePopover({ open, onOpenChange: setOpen, placement: 'top' })
   const nextRate = RATES[(RATES.indexOf(rate) + 1) % RATES.length]
   return (
-    <div className={`kol-playback-bar absolute h-16 px-8 flex items-center gap-7 bg-fg-ab-48 backdrop-blur-xl text-ab-white ${place}`}>
-      <div className="flex items-center gap-5">
-        <IconFrame name="skip-back-15" variant="ghost" size="sm" onClick={() => onSeek(time - 15)} aria-label="Back 15 seconds" />
-        <IconFrame name={playing ? 'pause' : 'play'} variant="ghost" size="sm" onClick={onToggle} aria-label={playing ? 'Pause' : 'Play'} />
-        <IconFrame name="skip-forward-15" variant="ghost" size="sm" onClick={() => onSeek(time + 15)} aria-label="Forward 15 seconds" />
+    <div className={`kol-playback-bar flex items-center ${docked ? 'kol-playback-bar--docked relative w-full h-12 px-4 gap-5 rounded' : `h-16 px-8 gap-7 bg-fg-ab-48 text-ab-white absolute backdrop-blur-xl ${place}`}`}>
+      {/* TARGETS YOU CAN HIT (user 2026-09-23: *"the click range around the icons is very small …
+        * it should be easy to press pause and play"*). Play/pause is the big one (40px), the skips
+        * 32px, and each glyph grows with its frame — at 16px the 15s numerals clogged. */}
+      <div className="flex items-center gap-3">
+        <IconFrame name="skip-back-15" variant="ghost" size="md" iconSize={22} onClick={() => onSeek(time - 15)} aria-label="Back 15 seconds" />
+        <IconFrame name={playing ? 'pause' : 'play'} variant="ghost" size="lg" iconSize={24} onClick={onToggle} aria-label={playing ? 'Pause' : 'Play'} />
+        <IconFrame name="skip-forward-15" variant="ghost" size="md" iconSize={22} onClick={() => onSeek(time + 15)} aria-label="Forward 15 seconds" />
       </div>
       <span className="kol-mono-16 tabular-nums opacity-80">{clock(time)}</span>
       <input type="range" className="kol-playback-scrub flex-1 min-w-0" min={0} max={duration || 0} step={0.1} value={time} onChange={(e) => onSeek(Number(e.target.value))} aria-label="Scrub" />
       <span className="kol-mono-16 tabular-nums opacity-80">{clock(duration)}</span>
       <span ref={pop.refs.setReference} {...pop.getReferenceProps()} className="inline-flex">
-        <IconFrame name="speaker" variant={open ? 'secondary' : 'ghost'} size="sm" onClick={() => {}} aria-label="Volume" />
+        <IconFrame name="speaker" variant={open ? 'secondary' : 'ghost'} size="md" onClick={() => {}} aria-label="Volume" />
       </span>
       <PopoverPanel popover={pop} className="p-2">
         <div className="w-6 h-24 flex items-center justify-center">
@@ -71,7 +79,7 @@ export default function PlaybackBar({ playing, time, duration, rate = 1, onToggl
       </PopoverPanel>
       {onRate && (
         <span className="flex items-center gap-1">
-          <IconFrame name="chevrons-right" variant="ghost" size="sm" onClick={() => onRate(nextRate)} aria-label={`Playback speed ${rate}× — next ${nextRate}×`} />
+          <IconFrame name="chevrons-right" variant="ghost" size="md" onClick={() => onRate(nextRate)} aria-label={`Playback speed ${rate}× — next ${nextRate}×`} />
           {rate !== 1 && <span className="kol-mono-12 tabular-nums opacity-80">{rate}×</span>}
         </span>
       )}

package/src/molecules/QuickLookFrame.jsx

@@ -0,0 +1,88 @@
+import { useRef, useState } from 'react'
+import Button from '../atoms/Button.jsx'
+import CloseButton from '../utilities/CloseButton.jsx'
+
+/* taxonomy-ok: molecule — nests Button (atom) + CloseButton (utility). */
+
+/**
+ * QuickLookFrame — the Finder Quick Look window (user 2026-09-23: *"put them in a container LIKE
+ * FINDER … it just makes everything in the design easier to manage if its wrapped together"*).
+ * Every kind sat loose on the scrim with its own chrome — a caption line under a picture, a bar
+ * floating over a video, a see-through page — so no two kinds looked like one feature. One
+ * opaque window now holds all of them:
+ *
+ *   header  close · ‹ › n / N · the file's name · its facts · the kind's actions, right-aligned
+ *   body    the media at its own aspect ratio, capped to the viewport — the window hugs it
+ *   footer  the transport, when the kind has one (`PlaybackBar docked`)
+ *
+ * RESIZABLE (user 2026-09-23, Finder's corner): drag the bottom-right corner and the window takes
+ * that size; the body's caps follow it, so media still fits and documents get the room. `size` /
+ * `onResize` let a caller keep the size across files (Finder keeps it); without them the window
+ * holds its own.
+ *
+ * @param {string}    title    the file's name
+ * @param {ReactNode} meta     facts after the name (size · dimensions · length)
+ * @param {ReactNode} actions  the kind's controls, right-aligned in the header
+ * @param {Function}  onClose  shows the close control when given
+ * @param {Object}    nav      `{ index, total, onPrev, onNext }` — ‹ › and `1 / 2` beside the close,
+ *                             Finder's, when the window pages through more than one file
+ * @param {Object}    size     `{ w, h }` in px, or null for the automatic size
+ * @param {Function}  onResize ({ w, h }) => void while the corner is dragged
+ * @param {ReactNode} footer   the transport row
+ * @param {ReactNode} children the body
+ */
+export default function QuickLookFrame({ title, meta, actions, onClose, nav, size: sizeProp, onResize, footer, className = '', children }) {
+  const [own, setOwn] = useState(null)
+  const size = sizeProp !== undefined ? sizeProp : own
+  const setSize = onResize ?? setOwn
+  const ref = useRef(null)
+  const drag = useRef(null)
+  const header = title || meta || actions || onClose || nav
+
+  const onPointerDown = (e) => {
+    e.preventDefault()
+    const box = ref.current.getBoundingClientRect()
+    drag.current = { x: e.clientX, y: e.clientY, w: box.width, h: box.height }
+    e.currentTarget.setPointerCapture(e.pointerId)
+  }
+  const onPointerMove = (e) => {
+    const d = drag.current
+    if (!d) return
+    /* the window is centred, so a corner drag grows it on both sides — twice the pointer's travel */
+    const w = Math.max(360, Math.min(window.innerWidth - 32, d.w + (e.clientX - d.x) * 2))
+    const h = Math.max(240, Math.min(window.innerHeight - 32, d.h + (e.clientY - d.y) * 2))
+    setSize({ w: Math.round(w), h: Math.round(h) })
+  }
+  const onPointerUp = () => { drag.current = null }
+
+  const style = size ? { width: size.w, height: size.h, '--kol-ql-frame-h': `${size.h}px`, '--kol-ql-max-w': `${size.w - 2}px` } : undefined
+  return (
+    <div ref={ref} style={style}
+      className={`kol-quicklook${footer ? ' kol-quicklook--footer' : ''}${size ? ' kol-quicklook--sized' : ''} ${className}`.trim()}>
+      {header && (
+        <div className="kol-quicklook-header">
+          {/* THE ESTATE'S CLOSE IDIOM, and every header control wears it (user 2026-09-23): bare at
+            * rest, a wash on hover — a filled container read as a second surface on the header */}
+          {onClose && <CloseButton size="sm" onClick={onClose} />}
+          {nav?.total > 1 && (
+            /* the pager is its own group: the count sits off the chevrons, and the group sits clear of
+             * the file's name (user 2026-09-23) */
+            <span className="flex items-center gap-1 mr-3">
+              <Button variant="nav" size="sm" iconOnly="chevron-left" onClick={nav.onPrev} aria-label="Previous" />
+              <Button variant="nav" size="sm" iconOnly="chevron-right" onClick={nav.onNext} aria-label="Next" />
+              <span className="kol-mono-12 text-meta tabular-nums ml-3">{nav.index + 1} / {nav.total}</span>
+            </span>
+          )}
+          {title && <span className="kol-mono-12 text-strong truncate">{title}</span>}
+          {meta && <span className="kol-mono-12 text-meta truncate">{meta}</span>}
+          <span className="flex-1" />
+          {actions}
+        </div>
+      )}
+      <div className="kol-quicklook-body">{children}</div>
+      {footer && <div className="kol-quicklook-footer">{footer}</div>}
+      <span className="kol-quicklook-grip" role="separator" aria-label="Resize"
+        onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp} />
+    </div>
+  )
+}

package/src/molecules/ShellDrawer.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { pushLayer, popLayer, isTopLayer } from '../utilities/layerStack.js'
 import { createPortal } from 'react-dom'
 import { Icon } from '@kolkrabbi/kol-icons'
 import CloseButton from '../utilities/CloseButton.jsx'
@@ -97,12 +98,17 @@ export default function ShellDrawer({
     return () => clearTimeout(t)
   }, [open, reduced])
 
-  // Escape closes; Tab is trapped inside the panel while open
+  // Escape closes; Tab is trapped inside the panel while open — while this is the TOP layer
+  // (`layerStack`: a sheet opened over the drawer owns the keyboard until it closes)
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
   useEffect(() => {
     if (!open) return undefined
+    const layer = pushLayer()
     const onKey = (e) => {
+      if (!isTopLayer(layer)) return
       if (e.key === 'Escape') {
-        onClose?.()
+        onCloseRef.current?.()
         return
       }
       if (e.key !== 'Tab') return
@@ -129,8 +135,8 @@ export default function ShellDrawer({
       }
     }
     document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-  }, [open, onClose])
+    return () => { popLayer(layer); document.removeEventListener('keydown', onKey) }
+  }, [open])
 
   /* Body scroll-lock + focus in/out. Gated on `present` too so the panel
    * exists before we focus it (it mounts one commit after `open` flips). */

package/src/molecules/Stepper.jsx

@@ -79,11 +79,11 @@ export default function Stepper({
     const chev = CHEVRON_SIZE[size]
     return (
       <div className={`inline-flex items-center justify-center gap-0.5 select-none ${SIZE_TYPE[size]} ${className}`.trim()} style={style}>
-        <button type="button" onClick={handleDecrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Previous">
+        <button type="button" onClick={handleDecrement} className="inline-flex items-center justify-center px-0.5 text-oq-40 hover:text-emphasis transition-colors" aria-label="Previous">
           <Icon name="chevron-left" size={chev} />
         </button>
         <span className="min-w-[3ch] text-center text-fg-64" {...props}>{value ?? ''}</span>
-        <button type="button" onClick={handleIncrement} className="inline-flex items-center justify-center px-0.5 text-fg-40 hover:text-emphasis transition-colors" aria-label="Next">
+        <button type="button" onClick={handleIncrement} className="inline-flex items-center justify-center px-0.5 text-oq-40 hover:text-emphasis transition-colors" aria-label="Next">
           <Icon name="chevron-right" size={chev} />
         </button>
       </div>

package/src/molecules/VideoSheet.jsx

@@ -1,24 +1,25 @@
 import usePlayback from '../hooks/usePlayback.js'
 import PlaybackBar from './PlaybackBar.jsx'
+import QuickLookFrame from './QuickLookFrame.jsx'
 
-/* taxonomy-ok: molecule — nests PlaybackBar (relative). */
+/* taxonomy-ok: molecule — nests PlaybackBar + QuickLookFrame (relative). */
 
 /**
- * VideoSheet — the overlay for video: the frame with the QuickTime bar floating
- * over its bottom edge (`PlaybackBar`, inset 16, radius 12 — PlaybackBarAndAudioSheet,
- * kol-r2b2 2026-08-27). No native controls; click on the video toggles play;
- * `autoPlay`, `playsInline`, `preload="metadata"`. Aria-labels only.
+ * VideoSheet — video in the Quick Look window: the frame at the video's own aspect ratio, the
+ * QuickTime bar docked in the window's footer (2026-09-23 — it floated over the picture, which
+ * made video the one kind whose controls sat on the media). No native controls; click on the
+ * video toggles play; no autoplay (user 2026-09-23 — Quick Look opens paused), `playsInline`, `preload="metadata"`.
  *
  * @param {string}   src     the video URL
  * @param {string}   poster  the poster URL
- * @param {Function} onMeta  ({ w, h, len }) => void once metadata lands — the overlay's facts
+ * @param {Function} onMeta  ({ w, h, len }) => void once metadata lands — the window's facts
+ * @param {Object}   frame   the window's header — `QuickLookFrame`'s title · meta · actions · onClose
  */
-export default function VideoSheet({ src, poster, onMeta }) {
+export default function VideoSheet({ src, poster, onMeta, frame }) {
   const { ref, handlers, bar } = usePlayback((el) => onMeta?.({ w: el.videoWidth, h: el.videoHeight, len: el.duration }))
   return (
-    <div className="relative max-w-full">
-      <video ref={ref} src={src} poster={poster} autoPlay playsInline preload="metadata" className="max-w-full max-h-[78vh] rounded" onClick={bar.onToggle} {...handlers} />
-      <PlaybackBar {...bar} place="left-4 right-4 bottom-4 rounded-xl" />
-    </div>
+    <QuickLookFrame {...frame} footer={<PlaybackBar {...bar} docked />}>
+      <video ref={ref} src={src} poster={poster} playsInline preload="metadata" className="kol-quicklook-media" onClick={bar.onToggle} {...handlers} />
+    </QuickLookFrame>
   )
 }