@kolkrabbi/kol-component 0.215.0 → 0.217.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.215.0",
-  "description": "KOL design-system components \u2014 atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
+  "version": "0.217.0",
+  "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
+    "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1"
   },
   "peerDependencies": {
@@ -34,7 +35,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "workspace:^"
+    "@kolkrabbi/kol-icons": "^0.27.1"
   },
   "files": [
     "src",
@@ -56,4 +57,4 @@
     "access": "public"
   },
   "sideEffects": false
-}
+}

package/src/atoms/ActionButton.jsx

@@ -3,6 +3,7 @@ import { DURATION } from '../utilities/motion.js'
 import gsap from 'gsap'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { glyphSize } from '../hooks/glyphLadders.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /**
  * ActionButton — an icon control that CONFIRMS what it did (2026-08-15 user
@@ -179,16 +180,16 @@ export default function ActionButton({
 
   /* The element follows the affordance — IconFrame's contract, same reasoning:
    * a link must be a real <a> for middle-click, focus order and screen readers. */
-  if (href) {
-    return (
-      <a className={cls} href={href} onClick={handle} aria-label={aria} title={aria} {...rest}>
-        {glyph}
-      </a>
-    )
-  }
-  return (
-    <button type="button" className={cls} onClick={handle} aria-label={aria} title={aria} {...rest}>
+  const control = href ? (
+    <a className={cls} href={href} onClick={handle} aria-label={aria} {...rest}>
+      {glyph}
+    </a>
+  ) : (
+    <button type="button" className={cls} onClick={handle} aria-label={aria} {...rest}>
       {glyph}
     </button>
   )
+  /* The label shows as the DS Tooltip, not a native `title` (kol-client-olina 2026-09-22) — and
+   * it follows the swap, so a Copy URL reads "Copied" while the check is up. */
+  return aria ? <Tooltip label={aria}>{control}</Tooltip> : control
 }

package/src/atoms/FileIcon.jsx

@@ -0,0 +1,31 @@
+import { Icon } from '@kolkrabbi/kol-icons'
+
+/**
+ * FileIcon — the file as a page: folded corner, the kind's glyph, the extension under it.
+ * Finder's generic document icon (user 2026-09-23: *"a generic preview for that like wav and
+ * the type below that finder has"*). What a file shows when it has nothing of its own to draw:
+ * audio without cover art, an empty file, a kind no renderer handles.
+ *
+ * Drawn in one SVG so the label scales with the page — the box sets the size, never the type.
+ *
+ * @param {string} ext        the extension, shown as authored upper-case (`WAV`)
+ * @param {string} glyph      a kol-icons name drawn on the page, or none
+ * @param {string} className  sizes the icon; it keeps its own 100:128 ratio
+ */
+export default function FileIcon({ ext, glyph, className = '' }) {
+  const label = ext ? String(ext).toUpperCase() : ''
+  /* a long extension (GITIGNORE) is FITTED to the page, never cut — "GITIG" named nothing */
+  const fit = label.length > 5 ? { textLength: 76, lengthAdjust: 'spacingAndGlyphs' } : {}
+  return (
+    <svg className={`kol-file-icon ${className}`.trim()} viewBox="0 0 100 128" role="img" aria-label={label ? `${label} file` : 'File'}>
+      <path className="kol-file-icon-page" d="M8 2h58l32 32v86a6 6 0 0 1-6 6H8a6 6 0 0 1-6-6V8a6 6 0 0 1 6-6z" />
+      <path className="kol-file-icon-fold" d="M66 2v26a6 6 0 0 0 6 6h26z" />
+      {glyph && (
+        <foreignObject x="30" y={label ? 42 : 52} width="40" height="40">
+          <Icon name={glyph} size={40} className="kol-file-icon-glyph" />
+        </foreignObject>
+      )}
+      {label && <text className="kol-file-icon-ext" x="50" y="108" textAnchor="middle" {...fit}>{label}</text>}
+    </svg>
+  )
+}

package/src/atoms/ViewToggle.jsx

@@ -1,5 +1,7 @@
+import { Fragment } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { toneClass } from '../utilities/tone.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /**
  * ViewToggle — control for switching between view modes.
@@ -63,7 +65,6 @@ const ViewToggle = ({
         onClick={() => onViewChange(next)}
         className={cls}
         aria-pressed={isOn}
-        title={isOn ? onOpt.label : offOpt.label}
       >
         <span className="grid">
           <span className={`col-start-1 row-start-1 ${isOn ? '' : 'invisible'}`}>{onOpt.label}</span>
@@ -100,22 +101,39 @@ const ViewToggle = ({
 
   return (
     <div className={containerClasses}>
-      {options.map((option) => (
-        <button
-          key={option.value}
-          onClick={() => onViewChange(option.value)}
-          className={buttonClasses(viewMode === option.value)}
-          aria-label={option.label}
-          aria-pressed={viewMode === option.value}
-          title={option.label}
-        >
-          {isIconVariant && option.icon ? (
-            <Icon name={option.icon} size={14} variant={iconVariant} />
-          ) : (
-            option.label
-          )}
-        </button>
-      ))}
+      {options.map((option) => {
+        /* AN OPTION CAN BE ITS OWN BUTTON (2026-09-23): `onClick` (+ optional `pressed`) makes it an
+         * independent action in the same well — the media pages' filter and search, which sit beside
+         * the view switch and must be the same height and chip, not a second hand-built strip. */
+        const active = option.onClick ? !!option.pressed : viewMode === option.value
+        const button = (
+          <button
+            key={option.value}
+            onClick={option.onClick ?? (() => onViewChange(option.value))}
+            className={buttonClasses(active)}
+            aria-label={option.label}
+            aria-pressed={option.onClick && option.pressed == null ? undefined : active}
+          >
+            {isIconVariant && option.icon ? (
+              <Icon name={option.icon} size={14} variant={iconVariant} />
+            ) : (
+              option.label
+            )}
+          </button>
+        )
+        /* THE DS TOOLTIP, NOT `title` (native-title-tooltips-in-ds-components, kol-client-olina
+         * 2026-09-22). Only an ICON option gets one — a text option already shows its label, and
+         * a tooltip repeating it is noise; the native `title` did exactly that. */
+        const item = isIconVariant && option.icon
+          ? <Tooltip key={option.value} label={option.label}>{button}</Tooltip>
+          : button
+        /* `dividerBefore` (2026-09-23): a hairline in the well between two options that are not the
+         * same kind of thing — filter and search are two independent actions, and two bare chips
+         * side by side read as one control. A light hairline (oq-16, opaque, flips with the theme) — the dark one vanished. */
+        return isIconVariant && option.dividerBefore
+          ? <Fragment key={option.value}><span aria-hidden="true" className="w-px h-4 shrink-0 bg-oq-16" />{item}</Fragment>
+          : item
+      })}
     </div>
   )
 }

package/src/hooks/useMarquee.js

@@ -0,0 +1,93 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * useMarquee — drag a band across a list and select what it touches, Finder's
+ * rubber band (user 2026-09-22: *"at least in column and row a drag to
+ * highlight/select multiple items"*).
+ *
+ * The container is whatever gets `props`; every selectable child carries
+ * `data-marquee-key`. The band is drawn by the caller from `rect` — one
+ * absolutely-positioned div inside a `relative` container — so the hook owns
+ * the geometry and the DOM stays the caller's.
+ *
+ * A drag that never leaves its starting pixel is a CLICK and is left alone:
+ * the threshold is what keeps row clicks, double-clicks and the context menu
+ * working. Modifier-drag adds to the selection instead of replacing it, which
+ * is the one thing every file manager agrees on.
+ *
+ * @param {Function} onSelect  (keys: string[], additive: boolean) => void
+ * @param {boolean}  enabled   false → the container behaves exactly as before
+ * @returns {{ ref, rect, props }} rect is `{left, top, width, height}` in container space, or null
+ */
+const THRESHOLD = 4
+
+export default function useMarquee({ onSelect, enabled = true } = {}) {
+  const ref = useRef(null)
+  const start = useRef(null)
+  /* A finished band ends in a `click` on the container, and the container's own click is
+   * "you clicked the background, so deselect" — which would undo the band the moment it landed.
+   * The flag swallows exactly that one click. */
+  const dragged = useRef(false)
+  const [rect, setRect] = useState(null)
+
+  const onPointerDown = useCallback((e) => {
+    if (!enabled || e.button !== 0) return
+    const box = ref.current
+    if (!box) return
+    /* A DRAG THAT BEGINS ON A ROW IS NOT A MARQUEE — it is a row drag (move to a folder), which
+     * this must not steal. The band starts on the list's own background. */
+    /* …unless the row says only part of it is the item (`data-hit-zone`, the list view's rows —
+     * Finder's: the file ends where its name ends). Then only a press on `[data-hit]` is a row. */
+    const keyEl = e.target.closest?.('[data-marquee-key]')
+    if (keyEl && (!keyEl.hasAttribute('data-hit-zone') || e.target.closest('[data-hit]'))) return
+    const origin = box.getBoundingClientRect()
+    start.current = {
+      x: e.clientX - origin.left + box.scrollLeft,
+      y: e.clientY - origin.top + box.scrollTop,
+      additive: e.metaKey || e.ctrlKey || e.shiftKey,
+      moved: false,
+    }
+
+    const move = (ev) => {
+      const s = start.current
+      if (!s) return
+      const now = box.getBoundingClientRect()
+      const x = ev.clientX - now.left + box.scrollLeft
+      const y = ev.clientY - now.top + box.scrollTop
+      if (!s.moved && Math.abs(x - s.x) < THRESHOLD && Math.abs(y - s.y) < THRESHOLD) return
+      s.moved = true
+      const band = { left: Math.min(s.x, x), top: Math.min(s.y, y), width: Math.abs(x - s.x), height: Math.abs(y - s.y) }
+      setRect(band)
+      const keys = []
+      for (const el of box.querySelectorAll('[data-marquee-key]')) {
+        const r = el.getBoundingClientRect()
+        const top = r.top - now.top + box.scrollTop
+        const bottom = top + r.height
+        const left = r.left - now.left + box.scrollLeft
+        const right = left + r.width
+        if (bottom > band.top && top < band.top + band.height && right > band.left && left < band.left + band.width) {
+          keys.push(el.getAttribute('data-marquee-key'))
+        }
+      }
+      onSelect?.(keys, s.additive)
+    }
+
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      dragged.current = !!start.current?.moved
+      start.current = null
+      setRect(null)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }, [enabled, onSelect])
+
+  const onClickCapture = useCallback((e) => {
+    if (!dragged.current) return
+    dragged.current = false
+    e.stopPropagation()
+  }, [])
+
+  return { ref, rect, props: { onPointerDown, onClickCapture } }
+}

package/src/index.js

@@ -24,6 +24,7 @@ export { default as Badge } from './atoms/Badge.jsx'
 export { default as Button } from './atoms/Button.jsx'
 export { default as CloseButton } from './utilities/CloseButton.jsx'
 export { default as ActionButton } from './atoms/ActionButton.jsx'
+export { default as FileIcon } from './atoms/FileIcon.jsx'
 export { default as SizeOrDownload } from './atoms/SizeOrDownload.jsx'
 export { default as SortHeader } from './atoms/SortHeader.jsx'
 export { default as SortControls } from './molecules/SortControls.jsx'
@@ -48,6 +49,7 @@ export { default as LabeledControl } from './molecules/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './utilities/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './utilities/Popover.jsx'
+export { default as ContextMenu, useContextMenu } from './utilities/ContextMenu.jsx'
 export { default as ProsePreview } from './utilities/ProsePreview.jsx'
 export { default as QuantityInput } from './molecules/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
@@ -164,6 +166,7 @@ export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPi
  * rendered both mobile viewer views and was module-private, so every consumer
  * needing a phone viewer hand-rolled one. */
 export { MediaInspector } from './organisms/MediaLibraryPages.jsx'
+export { default as MediaLibraryExplorer } from './organisms/MediaLibraryExplorer.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
 export { default as SettingsPanel, LabeledControlSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsMulti, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
@@ -178,6 +181,8 @@ export { default as AudioPreview, AudioTile, VideoTile, formatLength } from './m
 export { default as VideoSheet } from './molecules/VideoSheet.jsx'
 export { default as PlaybackBar } from './molecules/PlaybackBar.jsx'
 export { default as AudioSheet } from './molecules/AudioSheet.jsx'
+export { default as QuickLookFrame } from './molecules/QuickLookFrame.jsx'
+export { default as MediaTile } from './molecules/MediaTile.jsx'
 export { default as DocPage } from './molecules/DocPage.jsx'
 export { default as DocFrontmatter } from './molecules/DocFrontmatter.jsx'
 export { default as ProfileCard } from './molecules/ProfileCard.jsx'

package/src/molecules/AudioPreview.jsx

@@ -27,6 +27,8 @@ import { readCover } from '../utilities/id3.js';
  * @param {string}   poster      VideoTile — the poster URL
  * @param {Function} onDuration  AudioPreview — (seconds) => void once metadata lands
  * @param {string}   className   AudioPreview — wrapper classes (the width is the consumer's)
+ * @param {ReactNode} fallback   AudioTile — shown when the file carries no cover art (2026-09-23:
+ *                               it was an empty square, so a WAV read as a missing file)
  */
 export const formatLength = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
 const fmt = formatLength;
@@ -49,14 +51,14 @@ function PlayDisc({ playing, onClick }) {
   );
 }
 
-export function AudioTile({ src }) {
+export function AudioTile({ src, fallback = null }) {
   const ref = useRef(null);
   const [playing, setPlaying] = useState(false);
   const cover = useCover(src);
   return (
     <div className="kol-media-tile relative w-full aspect-square rounded overflow-hidden flex items-center justify-center">
       <audio ref={ref} src={src} preload="metadata" onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)} />
-      {cover && <img src={cover} alt="" className="absolute inset-0 w-full h-full object-cover" />}
+      {cover ? <img src={cover} alt="" className="absolute inset-0 w-full h-full object-cover" /> : fallback && <div className="absolute inset-0 flex items-center justify-center">{fallback}</div>}
       <PlayDisc playing={playing} onClick={() => (playing ? ref.current.pause() : ref.current.play())} />
     </div>
   );

package/src/molecules/AudioSheet.jsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-icons'
 import usePlayback from '../hooks/usePlayback.js'
 import PlaybackBar, { clock } from './PlaybackBar.jsx'
+import QuickLookFrame from './QuickLookFrame.jsx'
+import FileIcon from '../atoms/FileIcon.jsx'
 import { readCover } from '../utilities/id3.js'
 
-/* taxonomy-ok: molecule — nests PlaybackBar (relative) + kol-icons' Icon. */
+/* taxonomy-ok: molecule — nests PlaybackBar + QuickLookFrame (relative) + FileIcon (atom). */
 
 function useCover(src) {
   const [cover, setCover] = useState(null)
@@ -17,46 +18,31 @@ function useCover(src) {
 }
 
 /**
- * AudioSheet — audio in the overlay, ruled against the QuickTime audio reference
- * (PlaybackBarAndAudioSheet, kol-r2b2 2026-08-27), two variants:
- *
- *   cover  the same as VideoSheet — the artwork is the frame (`w-[min(78vh,100vw_-_10rem)]`,
- *          square), the bar floating over its bottom edge (inset 16, radius 12)
- *   sheet  the QuickTime window — a dark plate (`bg-fg-ab-88`, `min(100vw − 10rem, 1000px)`),
- *          the cover square left, `Time: mm:ss` beside it, the bar flush along the bottom
- *
- * Artwork = the file's embedded ID3 `APIC` cover (`readCover`); no cover → a light
- * square carrying the `music-note` glyph, the reference's. `autoPlay`; `onDuration`
- * for the overlay's facts. The `10rem` in the widths is the overlay's arrow gutter.
+ * AudioSheet — audio in the Quick Look window, Finder's layout (user 2026-09-23, the reference
+ * shot): the artwork square left, `Time: mm:ss` beside it, the QuickTime bar docked in the
+ * window's footer. Artwork = the file's embedded ID3 `APIC` cover (`readCover`); no cover →
+ * `FileIcon`, the same page the tile shows. The `cover` / `sheet` variants are gone — there is
+ * one window now, and it is the sheet.
  *
  * @param {string}   src         the audio URL
+ * @param {string}   ext         the extension, for the no-cover icon
  * @param {Function} onDuration  (seconds) => void once metadata lands
- * @param {'cover'|'sheet'} variant
+ * @param {Object}   frame       the window's header — `QuickLookFrame`'s title · meta · actions · onClose
  */
-export default function AudioSheet({ src, onDuration, variant = 'cover' }) {
+export default function AudioSheet({ src, ext, onDuration, frame }) {
   const { ref, handlers, bar } = usePlayback((el) => onDuration?.(el.duration))
   const cover = useCover(src)
-  const audio = <audio ref={ref} src={src} autoPlay preload="metadata" {...handlers} />
-  const art = cover
-    ? <img src={cover} alt="" className="w-full h-full object-cover" />
-    : <div className="w-full h-full flex items-center justify-center bg-ab-white text-fg-ab-32"><Icon name="music-note" size={64} /></div>
-
-  if (variant === 'sheet') return (
-    <div className="relative w-[min(100vw_-_10rem,1000px)] rounded overflow-hidden bg-fg-ab-88">
-      {audio}
-      <div className="flex items-center gap-16 p-10 pb-24">
-        <div className="w-[min(50vh,380px)] aspect-square shrink-0 overflow-hidden">{art}</div>
-        <span className="kol-mono-16 text-ab-white"><span className="opacity-48">Time: </span><b className="opacity-80">{clock(bar.duration)}</b></span>
-      </div>
-      <PlaybackBar {...bar} place="left-0 right-0 bottom-0" />
-    </div>
-  )
-
   return (
-    <div className="relative max-w-full">
-      {audio}
-      <div className="w-[min(78vh,100vw_-_10rem)] aspect-square rounded overflow-hidden">{art}</div>
-      <PlaybackBar {...bar} place="left-4 right-4 bottom-4 rounded-xl" />
-    </div>
+    <QuickLookFrame {...frame} footer={<PlaybackBar {...bar} docked />}>
+      <audio ref={ref} src={src} preload="metadata" {...handlers} />
+      <div className="kol-quicklook-audio">
+        <div className="kol-quicklook-art">
+          {cover
+            ? <img src={cover} alt="" className="w-full h-full object-cover" />
+            : <FileIcon ext={ext} glyph="music-note" className="w-[52%]" />}
+        </div>
+        <span className="kol-mono-16 text-meta">Time: <b className="text-strong">{clock(bar.duration)}</b></span>
+      </div>
+    </QuickLookFrame>
   )
 }

package/src/molecules/CodeBlock.jsx

@@ -77,7 +77,7 @@ const syntaxTheme = (foregroundToken = 80) => ({
  * for anything else. `md` is those exact values, named; `sm` is one step down
  * on both axes. Size is INDEPENDENT of `bare`: bare removes the frame, size
  * sets the box, and a bare block still has one. */
-export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value, bare = false, size = 'md' }) {
+export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value, bare = false, size = 'md', copy = true }) {
   const code = String(value?.code ?? codeProp ?? children ?? '')
   const language = value?.language ?? languageProp ?? 'text'
   const filename = value?.filename ?? filenameProp
@@ -118,7 +118,9 @@ export default function CodeBlock({ children, code: codeProp, language: language
         >
           {code}
         </SyntaxHighlighter>
-        <CopyButton text={code} className="kol-frame-control" />
+        {/* `copy={false}` (2026-09-23): a PREVIEW of a file is not a snippet to lift — the file's
+          * own copy action lives on its card (user: *"thats a feature in grid mode"*). */}
+        {copy && <CopyButton text={code} className="kol-frame-control" />}
       </div>
     </div>
   )

package/src/molecules/ContentCard.jsx

@@ -185,6 +185,12 @@ export default function ContentCard({
   expandedContent,
   selected = false,
   onClick,
+  /* RIGHT-CLICK AND DOUBLE-CLICK RIDE ALONG (user 2026-09-23: *"where are the right click options
+   * in grid view … CONSISTENCY"*). A card that takes a click takes the other two gestures the same
+   * surface offers on its rows — the file wall's tiles are the same objects its rows are, and a
+   * menu that exists on one and not the other is the inconsistency, not a missing feature. */
+  onContextMenu,
+  onDoubleClick,
   href,
   onNavigate,
   className = '',
@@ -455,6 +461,13 @@ export default function ContentCard({
     return (
       <article
         onClick={onClick}
+        onContextMenu={onContextMenu}
+        onDoubleClick={onDoubleClick}
+        /* SELECTED HAS TO SHOW (user 2026-09-23: a click in the grid "should select/highlight").
+         * `selected` only flipped a border colour on the variants that HAVE a border, and the file
+         * wall's cards have none — so the prop was true and the card looked untouched. The
+         * attribute is the hook; the theme paints it, once, for every variant. */
+        data-selected={selected || undefined}
         role="button"
         tabIndex={0}
         onKeyDown={(e) => {

package/src/molecules/ContentRow.jsx

@@ -158,6 +158,12 @@ export default function ContentRow({
   ratioAxis = 'width',
   selected = false,
   onClick,
+  /* RIGHT-CLICK AND DOUBLE-CLICK RIDE ALONG (user 2026-09-23: *"where are the right click options
+   * in grid view … CONSISTENCY"*). A card that takes a click takes the other two gestures the same
+   * surface offers on its rows — the file wall's tiles are the same objects its rows are, and a
+   * menu that exists on one and not the other is the inconsistency, not a missing feature. */
+  onContextMenu,
+  onDoubleClick,
   href,
   onNavigate,
   tagVariant,
@@ -308,6 +314,9 @@ export default function ContentRow({
     return (
       <div
         onClick={onClick}
+        onContextMenu={onContextMenu}
+        onDoubleClick={onDoubleClick}
+        data-selected={selected || undefined}
         role="button"
         tabIndex={0}
         onKeyDown={(e) => {

package/src/molecules/DocFrontmatter.jsx

@@ -68,7 +68,7 @@ export default function DocFrontmatter({ metadata }) {
         return (
           <div key={key} className="flex items-baseline gap-4 py-1">
             <span className="flex items-center gap-2 min-w-[120px] kol-helper-12 text-meta">
-              {icon && <Icon name={icon} size={14} />}
+              {icon && <Icon name={icon} size={14} className="text-oq-48" />}
               {FIELD_LABELS[key] ?? humanise(key)}
             </span>
             <span className="flex-1 min-w-0 [overflow-wrap:anywhere] kol-mono-12 text-strong">

package/src/molecules/KindPreview.jsx

@@ -3,6 +3,8 @@ import { AudioTile, VideoTile } from './AudioPreview.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import CodeBlock from './CodeBlock.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
+import FileIcon from '../atoms/FileIcon.jsx'
+import PdfPage, { PdfDocument } from './PdfPage.jsx'
 import { kindOf as defaultKindOf, extOf as defaultExtOf, KIND_LABEL } from '../utilities/mediaKinds.js'
 import markdownToHtml from '../utilities/markdownToHtml.js'
 import { parseFrontmatter } from '../utilities/frontmatter.js'
@@ -24,7 +26,7 @@ import DocPage from './DocPage.jsx'
  * `DocPage` (DocPageAndKindShowcase 2026-08-27: the overlay's A-series page, the
  * column's zoomed frame; markdown's frontmatter rendered above the prose from
  * the same fetch), the rest
- * → `AssetPlaceholder`. Images are the caller's (ColumnBrowser keeps its own
+ * → `FileIcon` (the generic document). Images are the caller's (ColumnBrowser keeps its own
  * `<img>` so it can read the dimensions). Text fetches cap at `textLimit`.
  *
  * @param {object}   o          the object — `{ key, contentType?, displayKey?, segmentCount? }`
@@ -40,6 +42,8 @@ import DocPage from './DocPage.jsx'
  * @param {number}   textLimit  bytes of text fetched for a preview (default 200 KB)
  */
 const TEXT_LIMIT = 200 * 1024
+/* The glyph a FileIcon carries per kind. A kind not listed gets the bare page + extension. */
+export const KIND_GLYPH = { audio: 'music-note', video: 'video', image: 'image', code: 'code', json: 'code', yaml: 'code', font: 'type' }
 const LANG = {
   js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript',
   ts: 'typescript', tsx: 'typescript', json: 'json', yaml: 'yaml', yml: 'yaml',
@@ -68,7 +72,63 @@ function useTextContent(url, enabled, limit) {
   return { ...result, loading: enabled && result.url !== url }
 }
 
-export default function KindPreview({ o, text: textProp, kind: kindProp, urlOf = (x) => x.url, poster, kindOf = defaultKindOf, extOf = defaultExtOf, kindLabel = KIND_LABEL, textLimit = TEXT_LIMIT }) {
+/* A FONT SHOWS ITSELF (user 2026-09-23: *"Font needs a preview, we have a big font based collection
+ * here"*). The browser loads the file with `FontFace` and the specimen sets it: `Aa`, then the
+ * alphabet and the figures. Scoped to a generated family so it can never collide with the app's
+ * type, and removed on unmount. Lifted from the media app's overview so the pane and Quick Look
+ * get it too — no `kol-foundry` dependency, which sits above this package. */
+function useFontFace(src) {
+  const [family, setFamily] = useState({ src: null, name: null, failed: false })
+  useEffect(() => {
+    let live = true
+    let h = 0
+    for (let i = 0; i < src.length; i += 1) h = (h * 31 + src.charCodeAt(i)) | 0
+    const name = `kol-font-preview-${Math.abs(h)}`
+    const face = new FontFace(name, `url(${JSON.stringify(src)})`)
+    face.load()
+      .then((loaded) => { if (!live) return; document.fonts.add(loaded); setFamily({ src, name, failed: false }) })
+      .catch(() => { if (live) setFamily({ src, name: null, failed: true }) })
+    return () => { live = false; document.fonts.delete(face) }
+  }, [src])
+  return family.src === src ? family : { name: null, failed: false }
+}
+function FontSpecimen({ src, fit, fallback }) {
+  const { name, failed } = useFontFace(src)
+  if (failed) return fallback
+  if (!name) return <span className="kol-mono-12 text-meta">Loading the face…</span>
+  const big = fit === 'sheet'
+  return (
+    <div className={`kol-font-specimen${big ? ' kol-font-specimen--sheet' : ''}`} style={{ fontFamily: `"${name}"` }}>
+      <span className="kol-font-specimen-aa">Aa</span>
+      <span className="kol-font-specimen-set">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789</span>
+    </div>
+  )
+}
+
+/* A PDF IS A DOCUMENT AND SHOWS ITS FIRST PAGE (user 2026-09-23: *"pdf is not showing any
+ * preview … this is all mapped in finder dropbox google drive"*). Every one of those renders page
+ * one; we drew a placeholder card. `PdfPage` draws it with pdf.js.
+ *
+ * THE SIZE GATE is the honest part: pdf.js pulls the whole file to paint one page, which against
+ * a live bucket is a 40MB download for a thumbnail. Past the limit the file icon stands. */
+const PDF_LIMIT = 8 * 1024 * 1024
+
+export default function KindPreview({
+  o, text: textProp, kind: kindProp, urlOf = (x) => x.url, poster, kindOf = defaultKindOf,
+  extOf = defaultExtOf, kindLabel = KIND_LABEL, textLimit = TEXT_LIMIT,
+  /* ONE RENDERER, THREE FITS (user 2026-09-23: *"theres just a bunch of different views, why? you
+   * know what consistency means?"*). Five surfaces each patched this component with their own CSS
+   * or bypassed it — the pane, the wall tile, the row thumb, the kind overview and the overlay. The
+   * fit says how much room there is; the LADDER below stays one ladder.
+   *
+   *   pane  — the column preview and the overlay: captions, full controls
+   *   tile  — a card in the wall or the overview: the render, no prose beside it
+   *   thumb — a 44px box: no embed, no player; whatever paints instantly or nothing
+   *   sheet — the body of the Quick Look window: every page of a PDF with a thumbnail rail
+   */
+  fit = 'pane',
+  pdfLimit = PDF_LIMIT,
+}) {
   /* CONTENT IN HAND, OR A URL TO FETCH (content-card-needs-no-cover,
    * kol-client-olina 2026-09-04; shape ruled by kol-r2b2, whose component this
    * is). A markdown note in a D1 row has no file and no URL behind it, so the
@@ -101,7 +161,17 @@ export default function KindPreview({ o, text: textProp, kind: kindProp, urlOf =
     ? { loading: false, error: null, text: String(textProp).slice(0, textLimit), truncated: String(textProp).length > textLimit }
     : fetched
 
+  /* NOTHING TO DRAW → THE FILE AS A PAGE (user 2026-09-23). An empty file, audio without artwork
+   * and a kind no renderer handles all show the same generic document, sized by the fit. */
+  const icon = (
+    <FileIcon ext={ext} glyph={KIND_GLYPH[kind]}
+      className={fit === 'thumb' ? 'h-full w-auto' : fit === 'tile' ? 'w-[38%] max-w-[160px]' : fit === 'sheet' ? 'w-[200px] m-16' : 'w-[40%] max-w-[180px] my-6'} />
+  )
+  if (o.size === 0) return <div className="w-full h-full flex items-center justify-center">{icon}</div>
+
   if (kind === 'playlist') {
+    /* the caption is pane chrome — in a tile it is a line of prose over the picture */
+    if (fit !== 'pane') return <HlsVideo src={url} poster={poster} className="w-full h-full object-cover" />
     return (
       <div className="flex flex-col items-center gap-2">
         <HlsVideo src={url} poster={poster} className="max-w-full max-h-[70vh] rounded" />
@@ -110,7 +180,7 @@ export default function KindPreview({ o, text: textProp, kind: kindProp, urlOf =
     )
   }
   if (kind === 'video') return <VideoTile src={url} poster={poster} />
-  if (kind === 'audio') return <AudioTile src={url} />
+  if (kind === 'audio') return <AudioTile src={url} fallback={icon} />
   if (isText) {
     if (loading) return <span className="kol-mono-12 text-meta">Loading…</span>
     if (error) return <span className="kol-mono-12 text-ui-error">Couldn’t load: {error}</span>
@@ -126,13 +196,29 @@ export default function KindPreview({ o, text: textProp, kind: kindProp, urlOf =
     const language = kind === 'json' ? 'json' : kind === 'yaml' ? 'yaml' : LANG[ext] || 'text'
     return (
       <DocPage>
-        <CodeBlock code={text} language={language} filename={name} />
+        <CodeBlock code={text} language={language} filename={name} copy={false} />
         {truncated && <p className="kol-mono-12 text-meta">truncated at {textLimit / 1024} KB</p>}
       </DocPage>
     )
   }
+  /* PDF — drawn by pdf.js at every fit but `thumb` (a 44px box cannot show a page and the
+   * download is the same size either way): page one in a tile or the pane, every page with a
+   * thumbnail rail in the Quick Look window — Finder's layout. The browser's `<embed>` is gone:
+   * it is a viewer, and Chrome paints its toolbar over a tile whatever the URL fragment says.
+   * Only for a URL a browser can fetch: a placeholder scheme (a fixture, an unresolved key) gets
+   * the icon, not a console error and an empty frame. The size gate stands — the whole file is
+   * pulled to paint one page. */
+  const servableUrl = /^(https?:|data:|blob:|\/)/.test(String(url ?? ''))
+  if (ext === 'pdf' && servableUrl && fit !== 'thumb' && (o.size ?? 0) <= pdfLimit) {
+    if (fit === 'sheet') return <PdfDocument src={url} fallback={icon} />
+    return (
+      <PdfPage src={url} fallback={icon}
+        className={fit === 'tile' ? 'w-full h-full object-cover object-top' : 'w-full h-auto rounded'} />
+    )
+  }
+  if (kind === 'font' && servableUrl && fit !== 'thumb') return <FontSpecimen src={url} fit={fit} fallback={icon} />
   if (kind === 'segments') {
     return <AssetPlaceholder category="HLS" name={`${o.segmentCount} segments`} note="STREAM CHUNKS" className="w-[420px] max-w-full" />
   }
-  return <AssetPlaceholder category={kindLabel[kind] || 'file'} name={name} note={ext ? ext.toUpperCase() : 'FILE'} className="w-[420px] max-w-full" />
+  return <div className="w-full h-full flex items-center justify-center">{icon}</div>
 }