@kolkrabbi/kol-component 0.243.0 → 0.245.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.243.0",
+  "version": "0.245.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

package/src/atoms/SegmentedToggle.jsx

@@ -29,8 +29,12 @@
  *               strip (canvas alignment, transform cluster); onChange is the
  *               action dispatch.
  *   onChange  — handler (newValue) => void
- *   options   — [{ value, label, ariaLabel?, tooltip? }] — a cell whose label is not a string
- *               (a glyph) shows its `ariaLabel` as a KOL Tooltip; `tooltip` overrides it
+ *   options   — [{ value, label, ariaLabel?, tooltip?, disabled? }] — a cell whose label is not a string
+ *               (a glyph) shows its `ariaLabel` as a KOL Tooltip; `tooltip` overrides it.
+ *               `disabled` (kol-fxr 2026-10-09): the cell draws the family's disabled ink
+ *               (`aria-disabled`, not the attribute — the tooltip still gives the reason),
+ *               refuses the press, and ←/→ step over it. It may still be the current `value`
+ *               (the ground changed under it): selected + disabled, no throw.
  *   variant   — 'default' (shipped chrome: shared outer stroke + dividers,
  *               filled active cell) | 'filled' (the state law's tiles: every
  *               cell a surface-secondary tile with 1px transparent gaps, NO
@@ -66,7 +70,12 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
     const dir = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[e.key]
     if (!dir || !options.length) return
     e.preventDefault()
-    const next = (focusIdx + dir + options.length) % options.length
+    let next = focusIdx
+    for (let step = 0; step < options.length; step++) {
+      next = (next + dir + options.length) % options.length
+      if (!options[next].disabled) break
+    }
+    if (options[next].disabled) return
     onChange?.(options[next].value)
     e.currentTarget.children[next]?.focus()
   }
@@ -94,8 +103,9 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
             role={stateless ? undefined : 'radio'}
             aria-checked={stateless ? undefined : isActive}
             aria-label={opt.ariaLabel}
+            aria-disabled={opt.disabled || undefined}
             tabIndex={stateless ? 0 : (i === focusIdx ? 0 : -1)}
-            onClick={() => onChange?.(opt.value)}
+            onClick={opt.disabled ? undefined : () => onChange?.(opt.value)}
             className={['kol-seg-cell', cellType, isActive && 'is-active'].filter(Boolean).join(' ')}
           >
             {opt.label}

package/src/hooks/usePointerSort.js

@@ -0,0 +1,51 @@
+import { useRef, useState } from 'react'
+
+/**
+ * usePointerSort — a vertical reorder by pointer, the ~50 lines `RecordManager` carried inline
+ * (2026-08-09, "util before any dependency"), lifted so `StepList` is not a second copy (kol-fxr
+ * StepList, 2026-10-09). Pointer events, so a finger works where HTML drag does not.
+ *
+ *   const { drag, startDrag } = usePointerSort(onReorder)
+ *   <button onPointerDown={(e) => startDrag(e, i, rowEls)} className="touch-none">⠿</button>
+ *
+ * `startDrag(e, from, rowEls)`: `rowEls` is the list of row elements in order (a NodeList or an
+ * array); their rects are measured once at the start. While the pointer is down `drag` is
+ * `{ from, over, x, y }` — `over` is the row under the pointer, `x`/`y` the pointer, for a
+ * floating label — and null otherwise. On release `onReorder(from, over)` fires when they differ.
+ * Without `onReorder` a start is a no-op, so a handle can render conditionally on it.
+ */
+export default function usePointerSort(onReorder) {
+  const dragRef = useRef(null)
+  const [drag, setDrag] = useState(null)
+
+  const startDrag = (e, from, rowEls) => {
+    if (!onReorder) return
+    e.preventDefault()
+    if (!rowEls?.length) return
+    const rects = [...rowEls].map((el) => el.getBoundingClientRect())
+    const move = (ev) => {
+      const hit = rects.findIndex((r) => ev.clientY < r.bottom)
+      const over = hit === -1 ? rects.length - 1 : hit
+      dragRef.current = { from, over, x: ev.clientX, y: ev.clientY }
+      setDrag(dragRef.current)
+    }
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      const d = dragRef.current
+      dragRef.current = null
+      setDrag(null)
+      if (d && d.over !== d.from) onReorder(d.from, d.over)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    document.body.style.cursor = 'grabbing'
+    document.body.style.userSelect = 'none'
+    dragRef.current = { from, over: from, x: e.clientX, y: e.clientY }
+    setDrag(dragRef.current)
+  }
+
+  return { drag, startDrag }
+}

package/src/index.js

@@ -79,6 +79,7 @@ export { default as InspectorRail } from './molecules/InspectorRail.jsx'
 export { default as PathNodeOverlay } from './utilities/PathNodeOverlay.jsx'
 export { default as CropOverlay } from './utilities/CropOverlay.jsx'
 export { default as LayerStack, AddLayerButton, BLEND_MODES } from './organisms/LayerStack.jsx'
+export { default as StepList } from './molecules/StepList.jsx'
 export { TYPE_LABELS, BOOL_OP_LABELS, SHAPE_KIND_LABELS, labelForLayer, rowLabelForLayer, findLayerDeep } from './hooks/layerTree.js'
 export { default as TimelineDock, sampleTrack, TIMELINE_EASINGS } from './organisms/TimelineDock.jsx'
 export { default as CurveEditor, CURVE_KINDS, defaultCurveFor } from './organisms/CurveEditor.jsx'

package/src/molecules/ContextMenu.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { usePopover, PopoverPanel } from '../utilities/Popover.jsx'
+import { pushLayer, popLayer } from '../utilities/layerStack.js'
 
 /**
  * ContextMenu — a right-click menu, anchored at the pointer.
@@ -63,6 +64,13 @@ export function useContextMenu() {
 }
 
 export default function ContextMenu({ menu, children, className = '' }) {
+  /* ONE ESCAPE, ONE LEVEL (kol-fxr 2026-10-08: a menu opened inside a FullscreenOverlay took the
+   * dialog with it). Open, the menu is the top layer, so the overlay under it ignores that Escape. */
+  useEffect(() => {
+    if (!menu.open) return undefined
+    const layer = pushLayer()
+    return () => popLayer(layer)
+  }, [menu.open])
   if (!menu.open) return null
   return (
     /* `focus={false}` — FloatingFocusManager reads attributes off the reference,

package/src/molecules/StepList.jsx

@@ -0,0 +1,109 @@
+import { useRef } from 'react'
+import Button from '../atoms/Button.jsx'
+import { Icon } from '@kolkrabbi/kol-icons'
+import usePointerSort from '../hooks/usePointerSort.js'
+
+/**
+ * StepList — A numbered list of slots ordered by hand. the Morph rail's steps in kol-fxr (each row a
+ * generator preset, the morph tweening from row 1 to row N), generic enough for any ordered slots —
+ * a playlist, a chain of stages (lobby: StepList, kol-fxr 2026-10-09). One row is active, × removes
+ * a row, the dashed last row adds one.
+ *
+ *   <StepList items={steps} activeIndex={i} onSelect={setI} onRemove={remove} onMove={move} onAdd={add} />
+ *
+ * Reorder is `usePointerSort` — the pointer sort `RecordManager` runs — not the HTML drag the brief
+ * named from `LayerStack`: HTML drag does nothing under a finger, and fxr runs on a phone. The
+ * `arrows` variant is the keyboard path.
+ *
+ * @param {{ id: string|number, label: import('react').ReactNode }[]} items  the rows, in order
+ * @param {number|null} activeIndex  the highlighted (editing) row
+ * @param {'grab'|'arrows'} reorder  `grab`: a ⠿ handle and a pointer drag (touch too) · `arrows`: ↑ ↓ quiet buttons, one slot a press
+ * @param {boolean} readOnly  no handle or arrows, no ×, no add row; the body does not open
+ * @param {'xs'|'sm'|'md'|'lg'} size  the control rung the × and the arrows ride
+ * @param {(index: number) => void} onSelect  the body pressed
+ * @param {(index: number) => void} onRemove  ×
+ * @param {(from: number, to: number) => void} onMove  after a drop or an arrow press
+ * @param {() => void} onAdd  the dashed row
+ * @param {import('react').ReactNode} addLabel  the dashed row's words — the consumer's copy
+ * @param {string} className  on the list
+ */
+export default function StepList({
+  items = [],
+  activeIndex = null,
+  reorder = 'grab',
+  readOnly = false,
+  size = 'sm',
+  onSelect,
+  onRemove,
+  onMove,
+  onAdd,
+  addLabel = 'Add a step',
+  className = '',
+}) {
+  const listRef = useRef(null)
+  const { drag, startDrag } = usePointerSort(readOnly ? null : onMove)
+  const grab = !readOnly && reorder === 'grab' && !!onMove
+  const arrows = !readOnly && reorder === 'arrows' && !!onMove
+  const rows = () => listRef.current?.querySelectorAll('.kol-step-list-item')
+
+  return (
+    <ul ref={listRef} className={`flex flex-col gap-1 ${className}`.trim()}>
+      {items.map((it, i) => {
+        const active = i === activeIndex
+        const dragging = drag && drag.from === i
+        const over = drag && drag.over === i && drag.over !== drag.from
+        const mark = over ? (drag.over > drag.from ? 'bottom-0' : 'top-0') : null
+        return (
+          <li
+            key={it.id}
+            className={`kol-step-list-item relative flex items-center gap-2 rounded px-2 py-1${active ? ' bg-fg-08' : ''}${dragging ? ' opacity-40' : ''}`}
+          >
+            {/* the drop mark: a 1px accent line above or below the row under the pointer */}
+            {mark && <span aria-hidden="true" className={`absolute left-2 right-2 h-px ${mark}`} style={{ background: 'var(--kol-accent-primary)' }} />}
+            {grab && (
+              <button
+                type="button"
+                aria-label={`Reorder step ${i + 1}`}
+                className="cursor-grab shrink-0 touch-none border-0 bg-transparent p-0"
+                onPointerDown={(e) => startDrag(e, i, rows())}
+              >
+                <Icon name="drag-handle" size={12} className="text-oq-48" />
+              </button>
+            )}
+            {arrows && (
+              <span className="flex shrink-0 items-center">
+                <Button tone="ghost" quiet iconOnly="chevron-up" size={size} aria-label={`Move step ${i + 1} up`} disabled={i === 0} onClick={() => onMove(i, i - 1)} />
+                <Button tone="ghost" quiet iconOnly="chevron-down" size={size} aria-label={`Move step ${i + 1} down`} disabled={i === items.length - 1} onClick={() => onMove(i, i + 1)} />
+              </span>
+            )}
+            <button
+              type="button"
+              className="flex min-w-0 flex-1 items-center gap-2 border-0 bg-transparent p-0 text-left"
+              onClick={readOnly ? undefined : () => onSelect?.(i)}
+              disabled={readOnly}
+            >
+              <span className="kol-helper-10 text-meta tabular-nums w-4 shrink-0">{i + 1}</span>
+              <span className="kol-mono-12 text-emphasis truncate">{it.label}</span>
+            </button>
+            {!readOnly && onRemove && (
+              <Button tone="ghost" quiet iconOnly="x" size={size} aria-label={`Remove step ${i + 1}`} onClick={() => onRemove(i)} />
+            )}
+          </li>
+        )
+      })}
+      {!readOnly && onAdd && (
+        <li>
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 rounded border border-dashed border-oq-16 px-2 py-1 text-meta hover:text-body hover:border-oq-24"
+            onClick={onAdd}
+          >
+            <span className="kol-helper-10 tabular-nums w-4 shrink-0">{items.length + 1}</span>
+            <Icon name="plus" size={12} className="text-oq-48" />
+            <span className="kol-mono-12">{addLabel}</span>
+          </button>
+        </li>
+      )}
+    </ul>
+  )
+}

package/src/organisms/ColumnBrowser.jsx

@@ -87,6 +87,7 @@ import { GRAB_COLUMN } from '../utilities/motion.js'
  * `KOL-R2B2/<label>/…`) must strip its own prefix before it can look anything up or build a URL —
  * the browser has no idea which part of a path is yours (kol-r2b2 2026-09-04).
  * @param {Function} folderMeta  (prefix, view) => string — a folder's own meta line (`date · N items` in list, `N items` in grid). A SEAM, not a computation: counting by prefix is O(n) per folder, and a consumer that already holds a folder tree answers it for free
+ * @param {boolean} tapSelects  below the breakpoint a file tap selects only, no Quick Look (a picker)
  * @param {'list'|'grid'} stackView  the mobile view below the breakpoint (default 'list'); `grid` is 3-up tiles, flat — a grid has nowhere to put an inline child list
  *
  * BELOW `md` (768) THIS IS A DIFFERENT TREE — one full-width inline-expanding
@@ -573,6 +574,9 @@ export default function ColumnBrowser({
    * media bucket the thumbnail IS the tile, so it carries counts and sizes
    * rather than dates (§2). Above the breakpoint the columns are unaffected. */
   stackView = 'list',
+  /* `tapSelects` — below the breakpoint a file tap SELECTS and opens nothing (kol-fxr 2026-10-08: a
+   * picker's tap must pick, and Quick Look covered the host's Open button). Off: a tap opens Quick Look. */
+  tapSelects = false,
   autoFocus = false,
   className = '',
 }) {
@@ -899,6 +903,7 @@ export default function ColumnBrowser({
                     if (isFolder) { onPrefix(r.level + r.name); return }
                     const files = itemsAt(r.level ?? '').filter((it) => it.type === 'file').map((it) => it.o)
                     pick(o)
+                    if (tapSelects) return
                     onQuickLook?.({ files: files.length ? files : [o], index: Math.max(0, files.findIndex((f) => f.key === o.key)) })
                   }}
                 >
@@ -966,6 +971,7 @@ export default function ColumnBrowser({
                 onClick={() => {
                   const files = itemsAt(r.level ?? '').filter((it) => it.type === 'file').map((it) => it.o)
                   pick(r.o)
+                  if (tapSelects) return
                   onQuickLook?.({ files: files.length ? files : [r.o], index: Math.max(0, files.findIndex((f) => f.key === r.o.key)) })
                 }}
               />

package/src/organisms/MediaLibraryPages.jsx

@@ -247,7 +247,10 @@ function useBucketLibrary({ client, bucket, defaults, settings: controlled, onSe
   const mediaUrl = (key) => client?.mediaUrl?.(key, bucketId ?? undefined) ?? key
   const downloadUrl = (key) => client?.downloadUrl?.(key, bucketId ?? undefined) ?? mediaUrl(key)
   const writable = !!bucketMeta.writable && !!(client?.deleteObject || client?.renameObject)
-  return { buckets, bucketMeta, bucketId, settings, setSettings, objects, setObjects, folderInfo, setFolderInfo, reload, error, ready, mediaUrl, downloadUrl, writable }
+  /* A CLIENT WITH NO `mediaUrl` HAS NO URLS (kol-fxr 2026-10-08: a stored preset is not a fetchable
+   * object) — Copy URL, Download and Quick Look's fetch all go, as write verbs go without a writer. */
+  const hasUrl = typeof client?.mediaUrl === 'function'
+  return { buckets, bucketMeta, bucketId, settings, setSettings, objects, setObjects, folderInfo, setFolderInfo, reload, error, ready, mediaUrl, downloadUrl, writable, hasUrl }
 }
 
 /* ── shared pieces, kol-r2b2's ─────────────────────────────────────────────── */
@@ -622,7 +625,7 @@ function FileEditorHost({ o, client, bucket, onClose, onSaved, assets }) {
  * @param {boolean} showNav - ‹ › and n / N in the header (default on); off when not paging a selection
  * @param {Function} onEdit - `(file) => void` — an Edit action in the header for a text file (markdown · json · yaml · text · code); absent, no Edit
  */
-export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl, downloadUrl, keySet, showNav = true, onEdit }) {
+export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl, downloadUrl, keySet, showNav = true, onEdit, hasUrl = true }) {
   const o = files[index]
   const [dims, setDims] = useState(null)
   /* the window's size survives paging — Finder keeps it — so it lives here, not in the frame,
@@ -666,17 +669,26 @@ export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl
             <Button variant="nav" size="sm" iconOnly="edit" onClick={() => onEdit(o)} aria-label="Edit" />
           </Tooltip>
         )}
-        <CopyAction label="Copy URL" text={mediaUrl(o.key)} />
-        <Tooltip label="Download">
-          <Button variant="nav" size="sm" iconOnly="download" href={downloadUrl(o.key)} download={o.key.split('/').pop()} aria-label="Download" />
-        </Tooltip>
+        {hasUrl && (
+          <>
+            <CopyAction label="Copy URL" text={mediaUrl(o.key)} />
+            <Tooltip label="Download">
+              <Button variant="nav" size="sm" iconOnly="download" href={downloadUrl(o.key)} download={o.key.split('/').pop()} aria-label="Download" />
+            </Tooltip>
+          </>
+        )}
       </span>
     ),
   }
   return (
     /* QUICK LOOK DIMS, it does not black out — you keep the list you came from in view */
     <FullscreenOverlay open onClose={onClose} closeButton={false} scrim>
-      {isImage(o.contentType) ? (
+      {!hasUrl ? (
+        /* nothing to fetch, so nothing to draw — said, not spun on (kol-fxr 2026-10-08) */
+        <QuickLookFrame {...frame}>
+          <p className="kol-helper-12 text-meta p-8">No preview</p>
+        </QuickLookFrame>
+      ) : isImage(o.contentType) ? (
         <QuickLookFrame {...frame}>
           {/* A VECTOR HAS NO PIXEL SIZE (user 2026-09-24: a 32px logo.svg opened as a 32px window). It
             * is drawn in a 640 box — the window's max if that is smaller — and contained in it. */}
@@ -1081,6 +1093,8 @@ export function MediaLibraryBrowse({
    * browse surface inside the modal card needs the selection for its Use button). Keys are
    * bucket-relative. Absent, nothing. */
   onPickFile,
+  /* `searchPlaceholder` — the search field's words; a store that is not a bucket names itself (kol-fxr 2026-10-08) */
+  searchPlaceholder = 'Search this bucket',
   /* `o.displayName` on a listed object is its LABEL in every view, Quick Look and search (kol-fxr
    * 2026-10-08: names not unique, so the key is an id). Absent, the label is the key, as before. */
 }) {
@@ -1091,7 +1105,11 @@ export function MediaLibraryBrowse({
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket
   const lib = useBucketLibrary({ client, bucket: bucketId, defaults, settings: settingsProp, onSettingsChange, refreshKey })
-  const { buckets, bucketMeta, settings, setSettings, objects, error, mediaUrl, downloadUrl, writable } = lib
+  const { buckets, bucketMeta, settings, setSettings, objects, error, mediaUrl, downloadUrl, hasUrl } = lib
+  /* `fileActions` GIVEN IS A WRITER (kol-fxr 2026-10-08): the consumer brings its own verbs, so the
+   * client need not carry a `deleteObject` stub to be treated as writable. The bucket still has to
+   * say it is writable. */
+  const writable = lib.writable || (!!fileActions && !!bucketMeta.writable)
   const switchBucket = (id, pfx = '') => { if (bucket == null) setOwnBucket(id); onBucketChange?.(id); setPrefix(pfx) }
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [trashOpen, setTrashOpen] = useState(false)
@@ -2008,6 +2026,7 @@ export function MediaLibraryBrowse({
               <ColumnBrowser
                 autoFocus={autoFocus}
                 className={atTitleRoot ? 'is-root' : ''}
+                tapSelects={!!onPickFile}
                 height={colH}
                 onHeightChange={onColH}
                 rowSize={rowSize}
@@ -2435,7 +2454,7 @@ export function MediaLibraryBrowse({
             value={query}
             onChange={(e) => setQuery(e.target.value ?? '')}
             onClear={() => setQuery('')}
-            placeholder="Search this bucket"
+            placeholder={searchPlaceholder}
             size="sm"
             className="flex-1 min-w-0"
           />
@@ -2499,7 +2518,7 @@ export function MediaLibraryBrowse({
             onClose={() => { setSearchOpen(false); setSearchQuery('') }}
             query={searchQuery}
             onQueryChange={setSearchQuery}
-            placeholder="Search this bucket"
+            placeholder={searchPlaceholder}
             results={searchResults}
             onExpand={() => searchResults[0] && jumpTo(searchResults[0].id)}
             onSelect={(item) => (item.run ? item.run() : jumpTo(item.id))}
@@ -2516,7 +2535,7 @@ export function MediaLibraryBrowse({
           </FullscreenOverlay>
         )}
         {quickLook && (
-          <MediaInspector files={quickLook.files} index={quickLook.index} onClose={closeQuickLook} mediaUrl={mediaUrl} downloadUrl={downloadUrl} keySet={keySet} showNav={rowSelection.size > 1}
+          <MediaInspector files={quickLook.files} index={quickLook.index} onClose={closeQuickLook} mediaUrl={mediaUrl} downloadUrl={downloadUrl} hasUrl={hasUrl} keySet={keySet} showNav={rowSelection.size > 1}
             onEdit={canEdit ? (f) => { closeQuickLook(); openEditor(f) } : undefined}
             onPrev={() => stepQuickLook(-1)} onNext={() => stepQuickLook(1)} />
         )}
@@ -2639,7 +2658,7 @@ export function MediaLibraryBrowse({
                     {fa.move && (
                       <MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doBatch(many, 'move', 'Move')}>Move {many.length} to…</MenuDropdownItem>
                     )}
-                    {many.every((p) => !p.endsWith('/')) && (
+                    {hasUrl && many.every((p) => !p.endsWith('/')) && (
                       <>
                         <MenuDropdownItem iconLeft={<Icon name="copy" size={14} />} onClick={() => doCopyUrl(many)}>Copy {many.length} URLs</MenuDropdownItem>
                         <MenuDropdownItem iconLeft={<Icon name="download" size={14} />} onClick={() => doDownload(many)}>Download {many.length}</MenuDropdownItem>
@@ -2653,8 +2672,17 @@ export function MediaLibraryBrowse({
                   </>
                 )
               }
+              const qlFile = onPickFile && target.type === 'file' ? objects.find((o) => o.key === target.path) : null
               return (
                 <>
+                  {/* A PICKER'S TAP SELECTS (`tapSelects`), so Quick Look needs a door of its own on a
+                    * phone — the menu (kol-fxr 2026-10-08). Only with `onPickFile`; others are unchanged. */}
+                  {qlFile && (
+                    <>
+                      <MenuDropdownItem iconLeft={<Icon name="eye-on" size={14} />} onClick={() => openQuickLook({ files: [qlFile], index: 0 })}>Quick Look</MenuDropdownItem>
+                      <MenuDropdownDivider />
+                    </>
+                  )}
                   {fa.createFolder && (
                     <MenuDropdownItem iconLeft={<Icon name="folder" size={14} />} onClick={() => doCreateFolder(isFolder ? target.path : (isLevel ? target.path : prefix))}>
                       New folder{isFolder ? ` in ${target.path.replace(/\/$/, '').split('/').pop()}` : ''}
@@ -2687,10 +2715,10 @@ export function MediaLibraryBrowse({
                       seam a file goes through, so what a folder URL means is the consumer's call
                       (a CDN prefix, a listing, a signed path) and never this page's guess. No
                       Download: a folder is not an object to fetch. */}
-                  {!isLevel && (
+                  {hasUrl && !isLevel && (
                     <MenuDropdownItem iconLeft={<Icon name="copy" size={14} />} onClick={() => doCopyUrl([target.path])}>Copy URL</MenuDropdownItem>
                   )}
-                  {target.type === 'file' && (
+                  {hasUrl && target.type === 'file' && (
                     <MenuDropdownItem iconLeft={<Icon name="download" size={14} />} onClick={() => doDownload([target.path])}>Download</MenuDropdownItem>
                   )}
                   {!isLevel && canTag && (

package/src/organisms/RecordManager.jsx

@@ -10,6 +10,7 @@ import FieldRow, { StatusChip } from '../molecules/FieldRow'
 import { Tooltip } from '../utilities/Popover'
 import Table from './Table'
 import MediaLibrary from './MediaLibrary'
+import usePointerSort from '../hooks/usePointerSort.js'
 
 /* TOOLBAR ICONS ARE BARE GLYPHS (user ruling 2026-08-09, verbatim: "did I
  * ask for a button?? … the only thing that should hover is full opacity and
@@ -93,8 +94,9 @@ export default function RecordManager({
 }) {
   const wrapRef = useRef(null)
   const [searchOpen, setSearchOpen] = useState(false)
-  const dragRef = useRef(null)
-  const [drag, setDrag] = useState(null) // { from, over, x, y } during a drag
+  /* { from, over, x, y } during a drag — the sort lives in hooks/usePointerSort (lifted 2026-10-09
+   * so StepList is not a second copy); this file keeps only which rows it measures */
+  const { drag, startDrag: beginSort } = usePointerSort(onReorder)
   const [active, setActive] = useState(null)
   const [picker, setPicker] = useState(null) // the field being picked for
   const [selected, setSelected] = useState(() => new Set())
@@ -118,36 +120,7 @@ export default function RecordManager({
     onSelectionChange?.([...next])
   }
 
-  /* ── pointer sort ─────────────────────────────────────────────────────── */
-  const startDrag = (e, from) => {
-    if (!onReorder) return
-    e.preventDefault()
-    const rowEls = wrapRef.current?.querySelectorAll('.kol-table-row')
-    if (!rowEls?.length) return
-    const rects = [...rowEls].map((el) => el.getBoundingClientRect())
-    const move = (ev) => {
-      const hit = rects.findIndex((r) => ev.clientY < r.bottom)
-      const over = hit === -1 ? rects.length - 1 : hit
-      dragRef.current = { from, over, x: ev.clientX, y: ev.clientY }
-      setDrag(dragRef.current)
-    }
-    const up = () => {
-      window.removeEventListener('pointermove', move)
-      window.removeEventListener('pointerup', up)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-      const d = dragRef.current
-      dragRef.current = null
-      setDrag(null)
-      if (d && d.over !== d.from) onReorder(d.from, d.over)
-    }
-    window.addEventListener('pointermove', move)
-    window.addEventListener('pointerup', up)
-    document.body.style.cursor = 'grabbing'
-    document.body.style.userSelect = 'none'
-    dragRef.current = { from, over: from, x: e.clientX, y: e.clientY }
-    setDrag(dragRef.current)
-  }
+  const startDrag = (e, from) => beginSort(e, from, wrapRef.current?.querySelectorAll('.kol-table-row'))
 
   /* ── columns: resolve types, prepend handle + checkbox ────────────────── */
   const builtColumns = useMemo(() => {

package/src/utilities/mediaKinds.js

@@ -127,7 +127,7 @@ export function groupVariants(files) {
   for (const [base, list] of groups) {
     if (list.length < 2) { out.push(list[0]); continue }
     list.sort((a, b) => a.width - b.width)
-    out.push({ ...list[0], displayKey: base, variants: list, totalSize: list.reduce((n, f) => n + (f.size || 0), 0) })
+    out.push({ ...list[0], displayKey: list[0].displayName ?? base, variants: list, totalSize: list.reduce((n, f) => n + (f.size || 0), 0) })
   }
   return out
 }
@@ -140,7 +140,7 @@ export function partition(objects, prefix) {
     const rel = prefix ? o.key.slice(prefix.length) : o.key
     const slash = rel.indexOf('/')
     if (slash !== -1) folderSet.add(rel.slice(0, slash + 1))
-    else files.push({ ...o, displayKey: rel })
+    else files.push({ ...o, displayKey: o.displayName ?? rel })
   }
   return { folders: [...folderSet].sort(), files }
 }