@kolkrabbi/kol-component 0.214.0 → 0.216.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.214.0",
-  "description": "KOL design-system components \u2014 atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
+  "version": "0.216.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",
@@ -34,7 +34,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "workspace:^"
+    "@kolkrabbi/kol-icons": "^0.27.0"
   },
   "files": [
     "src",
@@ -56,4 +56,4 @@
     "access": "public"
   },
   "sideEffects": false
-}
+}

package/src/index.js

@@ -48,6 +48,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 +165,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'

package/src/organisms/ColumnBrowser.jsx

@@ -239,10 +239,23 @@ const ZONE_BOX = 44
  * to what it was. */
 function Row({
   icon, label, active, cursor = false, trailing, onClick, muted = false,
-  indent = 0, meta, zones = false, thumb, onDisclose, disclosed,
+  indent = 0, meta, zones = false, thumb, onDisclose, disclosed, onContextMenu, drop,
 }) {
+  const [over, setOver] = useState(false)
+  /* A COLUMN ROW IS THE SAME ROW as the list view's, so it takes the same two seams: right-click
+   * and, for a folder, a drop target. Without them every handler is undefined and nothing moves. */
+  const dropProps = drop ? {
+    draggable: true,
+    onDragStart: (e) => { e.stopPropagation(); drop.onDragStart(e, drop.path) },
+    onDragOver: (e) => { if (drop.canDrop(drop.path)) { e.preventDefault(); setOver(true) } },
+    onDragLeave: () => setOver(false),
+    onDrop: (e) => { e.preventDefault(); e.stopPropagation(); setOver(false); drop.onDrop(drop.path) },
+  } : {}
   return (
     <li
+      onContextMenu={onContextMenu}
+      {...dropProps}
+      data-drop-over={over || undefined}
       /* Row metrics are the DS Table's (kol-components-organisms.css .kol-table-cell-*):
        * 12px 16px padding, mono 12, an oq-08 hairline between rows, none after the last.
        * The `zones` row sets its own 60px instead — a 44px thumbnail in a
@@ -441,6 +454,11 @@ export default function ColumnBrowser({
   columnWidth = 260,
   columnWidths,
   onColumnResize,
+  /* RIGHT-CLICK AND DROP, handed down (2026-09-21). `onRowContextMenu(event, { type, path, o })`
+   * and `dragFor(path)` are the page's; this component owns the geometry of a row, never what a
+   * row can have done to it. Absent, the columns behave exactly as they did. */
+  onRowContextMenu,
+  dragFor,
   /* THE TWO SEAMS THE MOBILE TICKET'S RULINGS POINT AT (ColumnBrowserMobileViews,
    * kol-r2b2 2026-09-03). Both are questions the DS must not answer for a
    * consumer, so neither is computed here:
@@ -734,10 +752,13 @@ export default function ColumnBrowser({
             })}
           </div>
         ) : (
-        <ul className="kol-column-browser-column flex-1 overflow-y-auto">
+        <ul className="kol-column-browser-column flex-1 overflow-y-auto"
+          onContextMenu={(e) => onRowContextMenu?.(e, { type: 'level', path: prefix })}>
           {rows.map((r) =>
+            /* Same ruling as the desktop column: nothing to say, so it says nothing. This is the
+             * mobile stack's row for an empty folder. */
             r.kind === 'empty' ? (
-              <li key={r.key} className="kol-mono-12 text-fg-32 px-4 py-3">empty</li>
+              <li key={r.key} className="min-h-12" />
             ) : r.kind === 'folder' ? (
               <Row
                 key={r.key}
@@ -806,6 +827,32 @@ export default function ColumnBrowser({
           <ul
             className="kol-column-browser-column shrink-0 overflow-y-auto border-r"
             style={{ borderColor: 'var(--kol-oq-08)', width: widthOf(k) }}
+            /* THE WHOLE COLUMN IS A TARGET, not just its rows and not just an empty column.
+             *
+             * RIGHT-CLICK: `openAt` stops propagation, so a row that was hit answers first and
+             * this only fires on the blank area below the last row — where you reach for
+             * "new folder" in every file manager.
+             *
+             * DROP: a column IS the folder it is showing, so dropping anywhere in it files the
+             * item there. You could drop ON a folder row but not INTO the folder you were looking
+             * at, which is the one target that was missing. The highlight goes straight to a data
+             * attribute rather than through state — it is transient, it belongs to one node, and a
+             * re-render per dragover across every column buys nothing. */
+            onContextMenu={(e) => onRowContextMenu?.(e, { type: 'level', path: level })}
+            onDragOver={(e) => {
+              const d = dragFor?.(level)
+              if (!d?.canDrop(level)) return
+              e.preventDefault()
+              e.currentTarget.dataset.dropOver = '1'
+            }}
+            onDragLeave={(e) => { if (e.currentTarget === e.target) delete e.currentTarget.dataset.dropOver }}
+            onDrop={(e) => {
+              delete e.currentTarget.dataset.dropOver
+              const d = dragFor?.(level)
+              if (!d?.canDrop(level)) return
+              e.preventDefault()
+              d.onDrop(level)
+            }}
           >
             {folders.map((f, i) => (
               <Row
@@ -815,6 +862,8 @@ export default function ColumnBrowser({
                 active={f === activeFolder}
                 cursor={cursorActive && cursor.col === k && cursor.idx === i}
                 trailing={<Icon name="chevron-right" size={12} className="text-fg-32" />}
+                onContextMenu={(e) => onRowContextMenu?.(e, { type: 'folder', path: level + f })}
+                drop={dragFor?.(level + f)}
                 onClick={() => { setCursor({ col: k, idx: i }); setCursorActive(true); rootRef.current?.focus(); pick(null); onPrefix(level + f) }}
               />
             ))}
@@ -825,11 +874,17 @@ export default function ColumnBrowser({
                 label={o.displayKey ?? o.key}
                 active={shown?.key === o.key}
                 cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
+                onContextMenu={(e) => onRowContextMenu?.(e, { type: 'file', path: o.key, o })}
+                drop={dragFor?.(o.key)}
                 onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pickFile(level, o) }}
               />
             ))}
+            {/* AN EMPTY COLUMN IS VISIBLY EMPTY (user 2026-09-21). It used to print the word
+              * "empty", which tells you what you can already see. The row stays as a right-click
+              * target — that is the only thing it was ever load-bearing for — and says nothing. */}
             {folders.length === 0 && files.length === 0 && (
-              <li className="kol-mono-12 text-fg-32 px-4 py-3">empty</li>
+              <li className="flex-1 min-h-12"
+                onContextMenu={(e) => onRowContextMenu?.(e, { type: 'level', path: level })} />
             )}
           </ul>
           <ResizeHandle axis="x" onDrag={resizeCol(k)} onEnd={endDrag} />

package/src/organisms/MediaLibrary.jsx

@@ -8,11 +8,13 @@ import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
 import SizeOrDownload from '../atoms/SizeOrDownload.jsx'
 import ViewToggle from '../atoms/ViewToggle.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 import ContentCard from '../molecules/ContentCard.jsx'
 import ContentRow from '../molecules/ContentRow.jsx'
 import ContentFilters from './ContentFilters.jsx'
 import MediaViewer from './MediaViewer.jsx'
 import { MediaLibraryBrowse, MediaLibraryLibrary } from './MediaLibraryPages.jsx'
+import MediaLibraryExplorer from './MediaLibraryExplorer.jsx'
 import { SettingsChipRow, chipCls } from './SettingsPanel.jsx'
 
 /**
@@ -629,15 +631,17 @@ function Toolbar({ viewMode, onViewMode }) {
           )}
         </div>
         <div className="flex items-center gap-3">
-          <button
-            type="button"
-            aria-pressed={flat}
-            title="Show all files recursively"
-            onClick={() => setFlat(!flat)}
-            className={chipCls(flat)}
-          >
-            Flat
-          </button>
+          {/* The DS's own Tooltip, not a `title` attribute — see LibraryHeader. */}
+          <Tooltip label="Show all files recursively">
+            <button
+              type="button"
+              aria-pressed={flat}
+              onClick={() => setFlat(!flat)}
+              className={chipCls(flat)}
+            >
+              Flat
+            </button>
+          </Tooltip>
           <ViewToggle viewMode={viewMode} onViewChange={onViewMode} variant="icon" />
           <Divider variant="vertical" />
           <SortControls />
@@ -970,7 +974,10 @@ function PickerShell({ onClose, onPick }) {
  * `defaults` to seed) · `folderTree` (browse: the baked tree) · `headerActions`
  * (the app's own upload / write icons) · `refreshKey`.
  *
- * @param {string}   variant  'browse' | 'library' | 'modal' | 'page' (alias of library)
+ * @param {string}   variant  'explorer' | 'browse' | 'library' | 'modal' | 'page' (alias of library)
+ *   `explorer` is browse + library as two views of ONE surface — one header, one
+ *   count, one listing, a switch beside the bucket dropdown. Prefer it for a new
+ *   consumer; the other two remain for the ones that stack them by hand.
  * @param {boolean}  open     modal only — mounts the overlay
  * @param {object}   client   `{ listMedia, mediaUrl, proxied? }`; omit inside a provider
  * @param {string|string[]} accept  'all' (default) = everything · one kind · an
@@ -999,6 +1006,12 @@ export default function MediaLibrary({
     return withProvider(<PickerShell onClose={onClose} onPick={onSelect} />, opts)
   }
   if (variant === 'browse') return <MediaLibraryBrowse client={client} {...pageProps} />
+  /* `explorer` = the two above as TWO VIEWS OF ONE SURFACE, one mounted at a
+   * time behind a switch in the header — one wordmark, one count, one listing,
+   * and the upload target reachable without scrolling past a full-height
+   * browser. Added 2026-09-21; `browse` and `library` are unchanged, so no
+   * consumer moves until it chooses to. */
+  if (variant === 'explorer') return <MediaLibraryExplorer client={client} {...pageProps} />
   /* `page` = the library wall (alias, one release): its old knobs map onto the settings seed */
   const seed = variant === 'page' ? { defaults: { pageSize, sortBy: defaultSort?.by, sortDir: defaultSort?.dir, flat, ...(pageProps.defaults ?? {}) } } : {}
   return <MediaLibraryLibrary client={client} {...pageProps} {...seed} />

package/src/organisms/MediaLibraryExplorer.jsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import Divider from '../atoms/Divider.jsx'
+import { MediaLibraryBrowse, MediaLibraryLibrary } from './MediaLibraryPages.jsx'
+
+/**
+ * MediaLibraryExplorer — the browse tree and the file wall as TWO VIEWS OF ONE
+ * SURFACE, which is what `MediaLibraryPages` has called them in its own comments
+ * since 2026-09-04 while shipping them as two pages a consumer stacks by hand.
+ *
+ * WHAT WAS WRONG WITH THE STACK (kol-r2b2, the apps-tier ticket):
+ *   - Both pages rendered ALWAYS, the browser at a fixed 800px, so the wall and
+ *     the upload drop zone sat below the fold. Pressing Upload scrolled you past
+ *     a full-height browser to reach the target.
+ *   - Both rendered `LibraryHeader`, so the consumer passed `header={false}` to
+ *     suppress a duplicate wordmark, bucket dropdown and gear.
+ *   - Both printed a stats line, so the consumer passed `stats={false}` too.
+ *   - Both called `useBucketLibrary`, so one bucket was listed twice into two
+ *     object lists that could disagree.
+ *   - Every shared seam had to be handed to both by the consumer, which is the
+ *     divergence-defect family the pages' own comments document at length.
+ *
+ * WHAT THIS DOES: holds the view, mounts exactly one page, and hands it the
+ * seams once. One page mounted means one header, one stats line, one listing and
+ * one body — every symptom above falls out of that rather than being patched.
+ *
+ * WHAT IT DOES NOT DO: it does not hoist `useBucketLibrary` into itself. The two
+ * pages keep their own state, so switching views re-lists the bucket and drops
+ * column scroll position and selection. Against this repo's fixture that is
+ * free; against a live bucket it is a 30s-cached GET. Hoisting the hook and the
+ * header into a true shared parent is the deeper fix and it is a rewrite of both
+ * page bodies — worth doing, not worth blocking the surface on.
+ *
+ * `prefix` stays OWNED BY THE CONSUMER (it already was), so the folder you are
+ * in survives the switch even though the page instance does not.
+ *
+ * ADDITIVE. `variant="browse"` and `variant="library"` are untouched, so
+ * kol-r2b2 and kol-client-olina keep rendering exactly what they render today.
+ */
+
+const VIEWS = [
+  { value: 'browse', label: 'BROWSE' },
+  { value: 'files', label: 'FILES' },
+]
+
+export default function MediaLibraryExplorer({
+  view: viewProp,
+  onViewChange,
+  defaultView = 'browse',
+  headerActions,
+  className = '',
+  ...pageProps
+}) {
+  const [ownView, setOwnView] = useState(defaultView)
+  const view = viewProp ?? ownView
+  const setView = (v) => { setOwnView(v); onViewChange?.(v) }
+
+  /* The switch rides `headerActions` rather than being a fourth thing in the
+   * header's own markup: the header already has a slot for consumer chrome, and
+   * putting the view control there keeps it beside the bucket dropdown where
+   * every reference product puts it. The consumer's own actions follow it.
+   *
+   * HIDDEN BELOW `md`. At 390 the header carries a wordmark, a bucket dropdown
+   * and up to four icons; adding a two-segment strip pushed the strip off the
+   * right edge and truncated the wordmark to three glyphs. The pages already
+   * take the mobile tab pill (`tabs` / `activeTab` / `onTabChange`), which is
+   * the same control for the same question — so the phone keeps the pill and
+   * the desktop keeps the strip, rather than both competing for one row.
+   *
+   * BARE TEXT, NOT A `SegmentedToggle`. This surface already has a switch
+   * idiom and uses it twice — ROW·COLUMN on the crumb line and SELECT·FLAT on
+   * the filter bar are both `kol-helper-14`, `oq-96` active over `oq-48` at
+   * rest, letterspacing 1, no frame. A boxed toggle put a bordered chip next to
+   * an unbordered dropdown and two unbordered switches, which read as a style
+   * break because it was one. Same control, third instance, same treatment.
+   *
+   * AND IT SITS LAST, RIGHT OF A DIVIDER. The crumb row directly beneath this
+   * header reads `[list][columns] │ ROW COLUMN` — icons, divider, text switch.
+   * Placed before the icons the header mirrored the row under it, which is the
+   * same inconsistency in a different direction. Icons left, divider, text
+   * right; two rows, one arrangement. It rides `headerTrailing` rather than
+   * `headerActions` because the gear is rendered by the header itself and the
+   * switch has to clear it. */
+  /* THE GAPS ARE THE CRUMB ROW'S, MEASURED: `gap-6` (24px) around the divider,
+   * `gap-4` (16px) between the two labels. Built flat at gap-4 throughout, the
+   * divider sat 8px too tight against the icons and the row below it did not
+   * line up with the row above. Two nested containers, same two numbers. */
+  /* `ml-4` IS NOT DECORATION. The divider needs 24px on BOTH sides to match the
+   * crumb row, where its own `gap-6` container supplies both. Here the LEFT gap
+   * comes from the header's `gap-2` between this group and the gear — 8px — so
+   * the divider sat tight against the icons and open against the text. 8 + 16
+   * puts it back on 24. */
+  const trailing = (
+    <span className="max-md:hidden flex items-center gap-6 ml-4">
+      <Divider variant="vertical" />
+      <span className="flex items-center gap-4">
+        {VIEWS.map((opt) => (
+          <span key={opt.value} role="button" onClick={() => setView(opt.value)}
+            aria-pressed={view === opt.value}
+            className={`kol-helper-14 cursor-pointer select-none ${view === opt.value ? 'text-oq-96' : 'text-oq-48 hover:text-oq-64'}`}
+            style={{ letterSpacing: 1 }}>
+            {opt.label}
+          </span>
+        ))}
+      </span>
+    </span>
+  )
+
+  const shared = { ...pageProps, headerActions, headerTrailing: trailing, className }
+
+  /* `header` and `stats` are NOT forwarded and NOT accepted. One surface prints
+   * one header and one count; a consumer suppressing either is the workaround
+   * this component exists to delete. */
+  return view === 'files'
+    ? <MediaLibraryLibrary {...shared} />
+    : <MediaLibraryBrowse {...shared} />
+}

package/src/organisms/MediaLibraryPages.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
 import formatSize from '../utilities/formatSize.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
@@ -16,6 +16,8 @@ import SortControls from '../molecules/SortControls.jsx'
 import SearchInput from '../molecules/SearchInput.jsx'
 import MobileTabBar, { TABBAR_H } from '../molecules/MobileTabBar.jsx'
 import { MenuItem, MenuDropdownItem, MenuDropdownDivider } from '../molecules/MenuItem.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
+import ContextMenu, { useContextMenu } from '../utilities/ContextMenu.jsx'
 import KindPreview from '../molecules/KindPreview.jsx'
 import AudioSheet from '../molecules/AudioSheet.jsx'
 import VideoSheet from '../molecules/VideoSheet.jsx'
@@ -99,7 +101,10 @@ const SORT_OPTIONS = [
 ]
 
 /* bytes → weight: `utilities/formatSize` since 0.178.0 — one copy, exported */
-const formatDate = (iso) => (iso ? new Date(iso).toISOString().slice(0, 10) : '')
+/* the pages' shared date default. Named `default*` because BOTH pages now take
+ * a `formatDate` prop, and a prop of the same name would shadow this into a TDZ
+ * error at the destructure. */
+const defaultFormatDate = (iso) => (iso ? new Date(iso).toISOString().slice(0, 10) : '')
 const isImage = (ct) => !!ct && ct.startsWith('image/')
 const isVideo = (ct) => !!ct && ct.startsWith('video/')
 
@@ -168,13 +173,93 @@ function ImageFrame({ src }) {
   )
 }
 
-/* `struck` = folder grouping is bypassed (flat mode) — still navigable, de-emphasised. */
-function FolderRow({ name, onClick, struck = false }) {
+/* `struck` = folder grouping is bypassed (flat mode) — still navigable, de-emphasised.
+ *
+ * `depth` indents a row under the folder it was expanded from; `expanded`/`onToggle` draw the
+ * disclosure twisty. A folder row without `onToggle` keeps the old behaviour exactly — one chevron
+ * that navigates — so nothing that already renders these moves. */
+function FolderRow({ name, onClick, struck = false, depth = 0, expanded, onToggle, meta, onContextMenu, drag, selected }) {
+  const [over, setOver] = useState(false)
+  /* A FOLDER IS A DROP TARGET. `drag` carries the page's move verb and the path this row is; the
+   * row highlights only while something is actually over it, so an accidental hover reads as
+   * nothing. Without `drag` every handler below is undefined and the row is exactly what it was. */
+  const dropProps = drag ? {
+    draggable: true,
+    onDragStart: (e) => { e.stopPropagation(); drag.onDragStart(e, drag.path) },
+    onDragOver: (e) => { if (drag.canDrop(drag.path)) { e.preventDefault(); setOver(true) } },
+    onDragLeave: () => setOver(false),
+    onDrop: (e) => { e.preventDefault(); e.stopPropagation(); setOver(false); drag.onDrop(drag.path) },
+  } : {}
   return (
-    <li className="flex items-center gap-3 py-2 border-b cursor-pointer hover:bg-fg-04 transition-colors px-1 rounded" style={{ borderColor: 'var(--kol-fg-08)' }} onClick={onClick}>
+    <li onContextMenu={onContextMenu} {...dropProps} className={`flex items-center gap-3 py-2 border-b cursor-pointer transition-colors px-1 rounded ${over ? 'bg-fg-08' : selected ? 'bg-fg-04' : 'hover:bg-fg-04'}`} style={{ borderColor: 'var(--kol-fg-08)', paddingLeft: depth * 20 + 4 }} onClick={onClick}>
+      {onToggle ? (
+        <button type="button" aria-label={expanded ? `Collapse ${name}` : `Expand ${name}`} aria-expanded={!!expanded}
+          onClick={(e) => { e.stopPropagation(); onToggle() }}
+          className="w-4 h-4 shrink-0 flex items-center justify-center text-fg-32 hover:text-fg-default transition-transform"
+          style={{ transform: expanded ? 'rotate(90deg)' : 'none' }}>
+          <Icon name="chevron-right" size={12} />
+        </button>
+      ) : <span className="w-4 shrink-0" />}
       <div className="w-8 h-8 shrink-0 flex items-center justify-center text-fg-48"><Icon name="folder" size={18} /></div>
-      <span className={`kol-mono-12 flex-1 ${struck ? 'line-through text-fg-48' : 'text-fg-default'}`}>{name}</span>
-      <Icon name="chevron-right" size={14} className="text-fg-32" />
+      <span className={`kol-mono-12 flex-1 min-w-0 truncate ${struck ? 'line-through text-fg-48' : 'text-fg-default'}`}>{name}</span>
+      {meta && <span className="kol-mono-12 text-fg-32 shrink-0">{meta}</span>}
+      <Icon name="chevron-right" size={14} className="text-fg-32 shrink-0" />
+    </li>
+  )
+}
+
+/* One expanded level, drawn inline under its folder, recursing for anything expanded beneath it —
+ * the disclosure behaviour a list view is expected to have. Depth only indents; the data comes from
+ * the same `rowLevel` the top level uses, so an expanded branch cannot disagree with the columns. */
+function RowSubtree({ level, depth, rowLevel, expanded, onToggle, onOpenFolder, onOpenFile, formatDate, folderMeta, thumbnailFor, flat, onRowContextMenu, dragFor }) {
+  const { folders, files } = rowLevel(level)
+  return (
+    <>
+      {folders.map((f) => {
+        const path = level + f
+        const open = expanded.has(path)
+        return (
+          <Fragment key={path}>
+            <FolderRow
+              name={f} depth={depth} struck={flat} expanded={open}
+              meta={folderMeta?.(path) || undefined}
+              onToggle={() => onToggle(path)}
+              onContextMenu={(e) => onRowContextMenu?.(e, { type: 'folder', path })}
+              drag={dragFor?.(path)}
+              onClick={() => onOpenFolder(path)}
+            />
+            {open && <RowSubtree
+              level={path} depth={depth + 1} rowLevel={rowLevel} expanded={expanded} onToggle={onToggle}
+              onOpenFolder={onOpenFolder} onOpenFile={onOpenFile} onRowContextMenu={onRowContextMenu} dragFor={dragFor}
+              formatDate={formatDate} folderMeta={folderMeta} thumbnailFor={thumbnailFor} flat={flat}
+            />}
+          </Fragment>
+        )
+      })}
+      {files.map((o) => (
+        <FileRow key={o.key} o={o} depth={depth} formatDate={formatDate} thumb={thumbnailFor?.(o)}
+          onContextMenu={(e) => onRowContextMenu?.(e, { type: 'file', path: o.key, o })}
+          drag={dragFor?.(o.key)}
+          onClick={() => onOpenFile(o)} />
+      ))}
+    </>
+  )
+}
+
+/* The file half of the row view. Row view listed FOLDERS ONLY and dropped `files` on the floor, so
+ * `#img/` drew two rows where the column browser drew four — the two folders, the empty folder the
+ * columns knew about, and a file. A list view that cannot show a file is not a list view. */
+function FileRow({ o, onClick, depth = 0, formatDate, thumb, onContextMenu, drag, selected }) {
+  const dragProps = drag ? { draggable: true, onDragStart: (e) => { e.stopPropagation(); drag.onDragStart(e, o.key) } } : {}
+  return (
+    <li onContextMenu={onContextMenu} {...dragProps} className={`flex items-center gap-3 py-2 border-b cursor-pointer transition-colors px-1 rounded ${selected ? 'bg-fg-04' : 'hover:bg-fg-04'}`} style={{ borderColor: 'var(--kol-fg-08)', paddingLeft: depth * 20 + 4 }} onClick={onClick}>
+      <span className="w-4 shrink-0" />
+      <div className="w-8 h-8 shrink-0 flex items-center justify-center text-fg-48 overflow-hidden rounded">
+        {thumb ?? <Icon name={kindOf(o) === 'image' ? 'image' : 'file'} size={18} />}
+      </div>
+      <span className="kol-mono-12 flex-1 min-w-0 truncate text-fg-default">{o.displayKey ?? o.key.split('/').pop()}</span>
+      <span className="kol-mono-12 text-fg-32 shrink-0">{formatDate?.(o.uploaded)}</span>
+      <span className="kol-mono-12 text-fg-32 shrink-0 w-20 text-right">{formatSize(o.size)}</span>
     </li>
   )
 }
@@ -313,18 +398,39 @@ function MediaSettings({ bucketMeta, settings, onChange, onReset, onClose, profi
  * and pushed the gear off the right edge — they resolved it by SWAPPING a
  * control below `md` rather than adding one, which is the pattern to copy. If a
  * consumer needs more than one at this width, it belongs in a sheet, not here. */
-function LibraryHeader({ title, buckets, bucketId, appRoot, onBucket, bucketMeta, writable, headerActions, onSettings }) {
+function LibraryHeader({ title, buckets, bucketId, appRoot, onBucket, bucketMeta, writable, headerActions, onSettings, onHome, headerTrailing }) {
   const options = buckets.length ? [{ value: 'all', label: `${title} · all` }, ...buckets.map((b) => ({ value: b.id, label: b.label }))] : []
+  /* THE WORDMARK IS THE HOME BUTTON when `onHome` is given (user 2026-09-21: "it should reload,
+   * like a home button"). The crumb row's root already did exactly this and the wordmark above it
+   * did nothing — the one element every file manager makes clickable was the one that was inert.
+   * Without the prop it stays a plain <h1>, so nothing existing changes. */
   return (
     <header className="flex items-baseline justify-between gap-4">
-      <h1 className="kol-sans-display-03 min-w-0 truncate">{title}</h1>
+      {onHome ? (
+        <button type="button" onClick={onHome}
+          className="kol-sans-display-03 min-w-0 truncate text-left cursor-pointer transition-opacity hover:opacity-64"
+          aria-label={`${title} — back to the top`}>{title}</button>
+      ) : (
+        <h1 className="kol-sans-display-03 min-w-0 truncate">{title}</h1>
+      )}
       <div className="flex items-center gap-2 min-w-0">
         {options.length > 0 && <Dropdown className="min-w-0 max-w-[45vw] md:w-48 md:max-w-none" value={appRoot ? 'all' : bucketId} onChange={onBucket} options={options} />}
         {headerActions}
+        {/* The DS's own `Tooltip` (utilities/Popover → `.kol-tooltip`), not a `title`
+            attribute. These two were the only header chrome still handing the label to
+            the browser, which drew its native box beside DS-styled ones. */}
         {!writable && bucketMeta.id && (
-          <IconFrame name="lock" variant="primary" size="sm" title={`${bucketMeta.label} is read-only here`} aria-label="Read-only" />
+          <Tooltip label={`${bucketMeta.label} is read-only here`}>
+            <IconFrame name="lock" variant="primary" size="sm" aria-label="Read-only" />
+          </Tooltip>
         )}
-        <IconFrame name="settings-01" variant="primary" size="sm" onClick={onSettings} aria-label="Display settings" title="Display settings" />
+        <Tooltip label="Display settings">
+          <IconFrame name="settings-01" variant="primary" size="sm" onClick={onSettings} aria-label="Display settings" />
+        </Tooltip>
+        {/* AFTER the icons, because the crumb row below reads `[icons] │ ROW COLUMN` and a text
+          * switch in this surface sits to the RIGHT of its divider. Put before them it mirrored
+          * the row directly beneath it. */}
+        {headerTrailing}
       </div>
     </header>
   )
@@ -367,7 +473,15 @@ function sortObjects(objects, sortBy = 'name', sortDir = 'asc') {
 
 export function MediaLibraryBrowse({
   client, title = 'MEDIA', bucket, onBucketChange, prefix: prefixProp, onPrefix, defaults, settings: settingsProp, onSettingsChange,
-  folderTree, headerActions, refreshKey, onOpen, autoFocus = false, settingsFooter, className = '',
+  folderTree, headerActions, headerTrailing, refreshKey, onOpen, autoFocus = false, settingsFooter, className = '', banner,
+  /* THE FILE VERBS, as ONE seam (2026-09-21). `{ createFolder, rename, move, remove }`, each
+   * optional and each async; whatever is supplied becomes a right-click menu entry and
+   * anything absent simply is not offered. One object rather than four props because they
+   * arrive together — a consumer with a writable store has all of them, one with a read-only
+   * bucket has none — and because the page must never have to know WHICH verbs exist to
+   * decide whether to draw a menu at all. The consumer re-lists after a mutation by bumping
+   * `refreshKey`; the page does not own the data. */
+  fileActions,
   /* PASS-THROUGHS TO `ColumnBrowser`. A documented prop this page does not
    * forward is a prop no consumer of the PAGE can reach, which makes the seam
    * fictional — `thumbnailFor` and `folderMeta` shipped, were announced, and
@@ -378,7 +492,9 @@ export function MediaLibraryBrowse({
    * `ColumnBrowser`, IT IS ADDED HERE IN THE SAME EDIT, unless the page holds a
    * real opinion about it (it owns `height`, the widths and `partition`, so
    * those are deliberately absent from this list). */
-  thumbnailFor, folderMeta, formatDate, stackView,
+  thumbnailFor, folderMeta, stackView,
+  /* defaulted, not bare — see the note on the sibling page */
+  formatDate = defaultFormatDate,
   /* THE TAB PILL'S LIST (ColumnBrowserMobileViews item 16). What a tab MEANS is
    * the consumer's — a repo whose surfaces are routes wires its router here.
    * No tabs, no pill, and the page is exactly what it was. */
@@ -395,6 +511,133 @@ export function MediaLibraryBrowse({
   const switchBucket = (id, pfx = '') => { if (bucket == null) setOwnBucket(id); onBucketChange?.(id); setPrefix(pfx) }
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [pickedFile, setPickedFile] = useState(null)
+  /* Row view's inline disclosure set — folder paths currently expanded. Kept here rather than in
+   * settings: it is a transient reading state, not a preference, and Finder does not persist it
+   * across a relaunch either. */
+  const [expandedRows, setExpandedRows] = useState(() => new Set())
+
+  /* ── THE FILE VERBS ────────────────────────────────────────────────────────────────────────
+   * Right-click is the surface; `fileActions` is the implementation. The page owns neither the
+   * data nor the store — it collects an intent, asks for the one piece of text it needs, calls
+   * the consumer's verb and lets the consumer re-list. `prompt`/`confirm` are deliberate: this
+   * file already uses both for batch move and delete, and inventing a dialog here would be a
+   * second modal idiom in one component. */
+  const menu = useContextMenu()
+  const canWrite = !!fileActions && writable
+  const [busyAction, setBusyAction] = useState(false)
+
+  const runAction = async (fn) => {
+    if (!fn) return
+    setBusyAction(true)
+    try { await fn() } catch (e) { alert(e.message) } finally { setBusyAction(false) }
+  }
+
+  const doCreateFolder = (parent) => {
+    const name = prompt(`New folder in ${parent || 'the bucket root'}:`)
+    if (!name?.trim()) return
+    runAction(() => fileActions.createFolder(`${parent}${name.trim().replace(/^\/+|\/+$/g, '')}/`))
+  }
+  const doCreateFile = (parent) => {
+    const name = prompt(`New file in ${parent || 'the bucket root'}:`, 'untitled.txt')
+    if (!name?.trim()) return
+    runAction(() => fileActions.createFile(`${parent}${name.trim().replace(/^\/+/, '')}`))
+  }
+  const doRename = (path, isFolder) => {
+    const current = path.replace(/\/$/, '').split('/').pop()
+    const name = prompt(`Rename ${isFolder ? 'folder' : 'file'}:`, current)
+    if (!name?.trim() || name === current) return
+    const parent = path.replace(/\/$/, '').slice(0, path.replace(/\/$/, '').length - current.length)
+    runAction(() => fileActions.rename(path, `${parent}${name.trim()}${isFolder ? '/' : ''}`))
+  }
+  const doMove = (path) => {
+    const dest = prompt(`Move into which folder? (blank = bucket root)`, prefix)
+    if (dest === null) return
+    const clean = dest ? `${dest.replace(/^\/+|\/+$/g, '')}/` : ''
+    runAction(() => fileActions.move(path, clean))
+  }
+  /* DRAG TO MOVE. HTML5 drag-and-drop, not a pointer-tracking implementation: the rows are a list,
+   * the targets are folders, and the browser already does the hit-testing and the cursor. The
+   * dragged path lives in a ref rather than dataTransfer alone so `canDrop` can answer without
+   * reading the event — a folder may not be dropped into itself or into its own subtree, which is
+   * the one rule that makes this safe to wire straight to `move`. */
+  /* MULTI-SELECT in the browse views. ⌘/Ctrl-click adds one, ⇧-click takes the run between the
+   * anchor and the click, a plain click clears back to navigation. The wall has had its own SELECT
+   * mode since 0.119.0; this is the browse half, and it deliberately does NOT reuse that mode's
+   * chrome — there the wall IS the surface and a mode bar fits, here selection is a modifier on a
+   * tree you are still walking. The menu acts on the whole set when the clicked row is in it. */
+  const [rowSelection, setRowSelection] = useState(() => new Set())
+  const selectAnchorRef = useRef(null)
+
+  const selectRow = (path, e, orderedPaths) => {
+    const additive = e.metaKey || e.ctrlKey
+    const ranged = e.shiftKey && selectAnchorRef.current
+    if (!additive && !ranged) { setRowSelection(new Set()); selectAnchorRef.current = path; return false }
+    e.preventDefault()
+    setRowSelection((prev) => {
+      const next = new Set(prev)
+      if (ranged) {
+        const a = orderedPaths.indexOf(selectAnchorRef.current)
+        const b = orderedPaths.indexOf(path)
+        if (a !== -1 && b !== -1) for (let i = Math.min(a, b); i <= Math.max(a, b); i++) next.add(orderedPaths[i])
+      } else {
+        next.has(path) ? next.delete(path) : next.add(path)
+        selectAnchorRef.current = path
+      }
+      return next
+    })
+    return true
+  }
+
+  /* The set the menu acts on: the selection when you right-clicked something inside it, otherwise
+   * just the row you hit — which is what every file manager does and what stops a right-click on an
+   * unrelated row from silently deleting five things. */
+  const targetsFor = (path) => (rowSelection.has(path) ? [...rowSelection] : [path])
+
+  const doBatch = (paths, verb, label) => {
+    if (paths.length === 1) return null
+    if (label === 'Delete' && !confirm(`Delete ${paths.length} items? This cannot be undone.`)) return null
+    let dest = null
+    if (label === 'Move') {
+      dest = prompt(`Move ${paths.length} items into which folder? (blank = bucket root)`, prefix)
+      if (dest === null) return null
+      dest = dest ? `${dest.replace(/^\/+|\/+$/g, '')}/` : ''
+    }
+    runAction(async () => {
+      for (const p of paths) {
+        if (label === 'Delete') await fileActions.remove(p)
+        else await fileActions.move(p, dest)
+      }
+      setRowSelection(new Set())
+    })
+    void verb
+    return true
+  }
+
+  const draggingRef = useRef(null)
+  const dragFor = canWrite && fileActions.move ? (path) => ({
+    path,
+    onDragStart: (e, from) => { draggingRef.current = from; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', from) },
+    canDrop: (dest) => {
+      const from = draggingRef.current
+      if (!from || from === dest) return false
+      if (from.endsWith('/') && dest.startsWith(from)) return false // into itself
+      const parent = from.replace(/\/$/, '').split('/').slice(0, -1).join('/')
+      return dest !== (parent ? `${parent}/` : '')                  // already there
+    },
+    onDrop: (dest) => {
+      const from = draggingRef.current
+      draggingRef.current = null
+      if (!from) return
+      const name = from.replace(/\/$/, '').split('/').pop()
+      runAction(() => fileActions.move(from, dest))
+      void name
+    },
+  }) : null
+
+  const doDelete = (path, isFolder) => {
+    if (!confirm(`Delete ${isFolder ? `"${path}" and everything in it` : `"${path}"`}? This cannot be undone.`)) return
+    runAction(() => fileActions.remove(path))
+  }
   const [quickLook, setQuickLook] = useState(null)
   const columnsRef = useRef(null)
   const { folderView = 'columns', flat } = settings
@@ -416,8 +659,17 @@ export function MediaLibraryBrowse({
     [searched, settings.sortBy, settings.sortDir],
   )
 
+  const treeFolders = (level) => (folderTree?.[bucketMeta.id]?.folders ?? [])
+    .filter((p) => p.startsWith(level) && p.length > level.length && !p.slice(level.length, -1).includes('/'))
+    .map((p) => p.slice(level.length))
+
   const scoped = prefix ? sortedObjects.filter((o) => o.key.startsWith(prefix)) : sortedObjects
-  const { folders, files: dirFiles } = partition(scoped, prefix)
+  const { folders: keyFolders, files: dirFiles } = partition(scoped, prefix)
+  /* THE COUNT COUNTS WHAT IS ON SCREEN. `partition` derives folders from file keys, so an EMPTY
+   * folder is invisible to it — the stats line said "2 folders" under a list showing three, the
+   * third being `03-scratch/`, which exists in `folderTree` and nowhere else. Both views draw the
+   * merged set now, so the tally is taken from the same place. */
+  const folders = [...new Set([...treeFolders(prefix), ...keyFolders])].sort()
   const keySet = new Set(objects.map((o) => o.key))
   const levelFiles = flat ? scoped.map((o) => ({ ...o, displayKey: prefix ? o.key.slice(prefix.length) : o.key })) : dirFiles
   const systemCount = levelFiles.filter((o) => isSystemFile(o.key)).length
@@ -441,9 +693,24 @@ export function MediaLibraryBrowse({
   const ROOT = title
   const label = bucketMeta.label || 'bucket'
   const VROOT = single ? '' : `${ROOT}/${label}/`
-  const treeFolders = (level) => (folderTree?.[bucketMeta.id]?.folders ?? [])
-    .filter((p) => p.startsWith(level) && p.length > level.length && !p.slice(level.length, -1).includes('/'))
-    .map((p) => p.slice(level.length))
+  const unroot = (p) => (VROOT && p.startsWith(VROOT) ? p.slice(VROOT.length) : p)
+  /* ONE LEVEL, ONE ANSWER. The column view merges the baked tree with the live partition inside its
+   * `partition` prop; the row view used the live partition alone and therefore disagreed with the
+   * columns about what a folder even is. This is that merge, lifted so both callers share it —
+   * folders from `folderTree` (real nodes, empty ones included) unioned with the ones derived from
+   * keys, plus the level's own files, which the row view never rendered at all. */
+  const rowLevel = (level) => {
+    /* `partition` slices every key by `prefix` WITHOUT checking it matches, so it must be handed an
+     * already-scoped list. Given the whole bucket it cut four characters off every root key and
+     * drew `readme.md` as `me.md` and `video/` as `o/`. Scope first, always. */
+    const inLevel = level ? objects.filter((o) => o.key.startsWith(level)) : objects
+    const live = partition(inLevel, level)
+    const baked = treeFolders(level)
+    return {
+      folders: [...new Set([...baked, ...live.folders])].sort(),
+      files: sortObjects(live.files.filter((o) => !isSystemFile(o.key)), settings.sortBy, settings.sortDir),
+    }
+  }
 
   useEffect(() => {
     if (folderView !== 'columns') return undefined
@@ -458,10 +725,19 @@ export function MediaLibraryBrowse({
 
   return (
     <div className={`flex flex-col gap-6 ${className}`.trim()}>
-      <LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={appRoot} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions}
+      <LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={appRoot} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions} headerTrailing={headerTrailing}
+        onHome={() => { setAppRoot(true); setPickedFile(null); setPrefix('') }}
         onBucket={(v) => { if (v === 'all') { setAppRoot(true); setPrefix('') } else { setAppRoot(false); switchBucket(v) } }}
         onSettings={() => setSettingsOpen(true)} />
 
+      {/* THE BANNER SLOT — anything that must sit directly under the header and above the body.
+        * The upload drop zone is why it exists: a consumer rendering it AFTER the page put it
+        * below an 800px column browser, so pressing Upload scrolled you past the whole browser to
+        * reach the target you had just asked for. A slot is the fix; telling the consumer to
+        * re-order is not, because the header is ours and the body is ours and there was no
+        * between. */}
+      {banner}
+
       <div className="flex flex-col gap-3">
         {/* Breadcrumb (uppercase, active segment at full ink) · folder-view toggle
           *
@@ -641,6 +917,13 @@ export function MediaLibraryBrowse({
                 const poster = posterFor(real.key, keySet)
                 return <KindPreview o={real} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
               }}
+              /* THE COLUMNS SPEAK IN VIRTUAL PATHS. With more than one bucket every level is
+                * prefixed `<title>/<bucket>/` so the stores share one tree — so a path coming OUT
+                * of the browser must be un-rooted before it reaches a file verb, or the store is
+                * asked to move `MEDIA/R2 · kol-media/img/x.jpg`, which it has never heard of. The
+                * row view needs none of this; it is already bucket-relative. */
+              onRowContextMenu={(e, payload) => menu.openAt(e, { ...payload, path: unroot(payload.path) })}
+              dragFor={dragFor ? (path) => dragFor(unroot(path)) : undefined}
               partition={(objs, level) => {
                 if (!single) {
                   if (level === '') return { folders: [`${ROOT}/`], files: [] }
@@ -652,16 +935,90 @@ export function MediaLibraryBrowse({
               }}
             />
           </div>
-        ) : folders.length > 0 && (
-          <ul className="flex flex-col">{folders.map((f) => <FolderRow key={f} name={f} onClick={() => setPrefix(prefix + f)} struck={flat} />)}</ul>
+        ) : (
+          /* ROW VIEW — the same level the column view draws, not a different one. It used to render
+           * `partition(scoped, prefix).folders` and nothing else, which lost two things: an EMPTY
+           * folder (partition derives folders from file keys, so a folder with no files under it
+           * does not exist to it — `folderTree` is where real nodes live, and the column view was
+           * already merging the two) and every FILE at the level. `#img/` drew 2 rows against the
+           * columns' 4. Folders first, then files, each expandable in place like a list view. */
+          /* SAME AREA AS THE COLUMNS. The row view used to be content-height, so the two folder
+           * views made the page jump between them and the blank space below the last row — where
+           * you right-click for "new folder" and drop to file something here — did not exist. It
+           * takes the column browser's own height now, from the same setting.
+           *
+           * The list IS the current folder, so it is a drop target for `prefix`, matching a column
+           * being a target for its level. Highlight via a data attribute for the same reason. */
+          <ul className="flex flex-col overflow-y-auto kol-row-browser"
+            style={{ height: settings.columnHeight ?? SETTINGS_BASE.columnHeight }}
+            onContextMenu={(e) => menu.openAt(e, { type: 'level', path: prefix })}
+            onDragOver={(e) => {
+              const d = dragFor?.(prefix)
+              if (!d?.canDrop(prefix)) return
+              e.preventDefault()
+              e.currentTarget.dataset.dropOver = '1'
+            }}
+            onDragLeave={(e) => { if (e.currentTarget === e.target) delete e.currentTarget.dataset.dropOver }}
+            onDrop={(e) => {
+              delete e.currentTarget.dataset.dropOver
+              const d = dragFor?.(prefix)
+              if (!d?.canDrop(prefix)) return
+              e.preventDefault()
+              d.onDrop(prefix)
+            }}>
+            {rowLevel(prefix).folders.map((f) => {
+              const path = prefix + f
+              const open = expandedRows.has(path)
+              const order = [...rowLevel(prefix).folders.map((x) => prefix + x), ...rowLevel(prefix).files.map((x) => x.key)]
+              return (
+                <Fragment key={f}>
+                  <FolderRow
+                    name={f} struck={flat} expanded={open}
+                    selected={rowSelection.has(path)}
+                    onContextMenu={(e) => menu.openAt(e, { type: 'folder', path, targets: targetsFor(path) })}
+                    drag={dragFor?.(path)}
+                    meta={folderMeta?.(path) || undefined}
+                    onToggle={() => setExpandedRows((prev) => {
+                      const next = new Set(prev)
+                      next.has(path) ? next.delete(path) : next.add(path)
+                      return next
+                    })}
+                    onClick={(e) => { if (!selectRow(path, e, order)) setPrefix(path) }}
+                  />
+                  {open && <RowSubtree
+                    level={path} depth={1} rowLevel={rowLevel} expanded={expandedRows}
+                    onToggle={(p) => setExpandedRows((prev) => { const n = new Set(prev); n.has(p) ? n.delete(p) : n.add(p); return n })}
+                    onOpenFolder={setPrefix} onOpenFile={(o) => setPickedFile(o)}
+                    onRowContextMenu={(e, payload) => menu.openAt(e, payload)} dragFor={dragFor}
+                    formatDate={formatDate} folderMeta={folderMeta} thumbnailFor={thumbnailFor} flat={flat}
+                  />}
+                </Fragment>
+              )
+            })}
+            {rowLevel(prefix).files.map((o) => (
+              <FileRow key={o.key} o={o} formatDate={formatDate} thumb={thumbnailFor?.(o)}
+                selected={rowSelection.has(o.key)}
+                onContextMenu={(e) => menu.openAt(e, { type: 'file', path: o.key, o, targets: targetsFor(o.key) })}
+                drag={dragFor?.(o.key)}
+                onClick={(e) => {
+                  const order = [...rowLevel(prefix).folders.map((x) => prefix + x), ...rowLevel(prefix).files.map((x) => x.key)]
+                  if (!selectRow(o.key, e, order)) setPickedFile(o)
+                }} />
+            ))}
+          </ul>
         )}
 
+        {/* `mt-2` BALANCES THE INK, not the boxes (user 2026-09-21: "what was unclear about matching
+          * the gap above to below"). The column pane, the crumb row above it and this line share one
+          * `gap-3`, so box-to-box both gaps are 12px — but the crumb row's box runs 8px lower than
+          * its own text, because the ROW·COLUMN icon buttons are taller than the crumbs. Measured
+          * against the pane's BORDER: 20px above, 12px below. The 8 puts the text gaps level. */}
         {appRoot && folderView === 'columns' && folderTree ? (
-          <p className="kol-mono-12 text-fg-48">
+          <p className="kol-mono-12 text-fg-48 mt-2">
             {buckets.length} buckets · {Object.values(folderTree).reduce((n, t) => n + (t.files ?? 0), 0)} files · {formatSize(Object.values(folderTree).reduce((n, t) => n + (t.bytes ?? 0), 0))}
           </p>
         ) : (
-          <p className="kol-mono-12 text-fg-48">
+          <p className="kol-mono-12 text-fg-48 mt-2">
             {folders.length > 0 && `${folders.length} folder${folders.length > 1 ? 's' : ''} · `}
             {rawFiles.length} {rawFiles.length === 1 ? 'file' : 'files'} · {formatSize(totalBytes)}
             {(!prefix || flat) && rawFiles.length !== bucketFiles && <span className="text-fg-32">{'  ·  bucket: '}{bucketFiles} files · {formatSize(bucketBytes)}</span>}
@@ -670,6 +1027,65 @@ export function MediaLibraryBrowse({
         )}
         {void onOpen}
 
+        {/* ONE MENU FOR EVERY ROW. `useContextMenu` carries the payload from whichever row opened
+          * it, so this is a single instance rather than one per row, and the entries are built from
+          * what `fileActions` actually supplies — a read-only bucket gets no menu at all. */}
+        {canWrite && (
+          <ContextMenu menu={menu}>
+            {(target) => {
+              if (!target) return null
+              const isFolder = target.type === 'folder'
+              const isLevel = target.type === 'level'
+              /* A SELECTION OF MORE THAN ONE takes over the verbs that can act on a set. Rename is
+               * not one of them — renaming five things to one name is not a thing — so it stays
+               * single and disappears from a multi-selection rather than lying about what it does. */
+              const many = (target.targets ?? []).length > 1 ? target.targets : null
+              if (many) {
+                return (
+                  <>
+                    <MenuDropdownItem disabled>{many.length} selected</MenuDropdownItem>
+                    <MenuDropdownDivider />
+                    {fileActions.move && (
+                      <MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doBatch(many, 'move', 'Move')}>Move {many.length} to…</MenuDropdownItem>
+                    )}
+                    {fileActions.remove && (
+                      <MenuDropdownItem iconLeft={<Icon name="trash" size={14} />} onClick={() => doBatch(many, 'remove', 'Delete')}>Delete {many.length}</MenuDropdownItem>
+                    )}
+                  </>
+                )
+              }
+              return (
+                <>
+                  {fileActions.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()}` : ''}
+                    </MenuDropdownItem>
+                  )}
+                  {fileActions.createFile && (
+                    <MenuDropdownItem iconLeft={<Icon name="file" size={14} />} onClick={() => doCreateFile(isFolder ? target.path : (isLevel ? target.path : prefix))}>
+                      New file
+                    </MenuDropdownItem>
+                  )}
+                  {!isLevel && <MenuDropdownDivider />}
+                  {!isLevel && fileActions.rename && (
+                    <MenuDropdownItem iconLeft={<Icon name="edit" size={14} />} onClick={() => doRename(target.path, isFolder)}>Rename</MenuDropdownItem>
+                  )}
+                  {!isLevel && fileActions.move && (
+                    <MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doMove(target.path)}>Move to…</MenuDropdownItem>
+                  )}
+                  {!isLevel && fileActions.remove && (
+                    <>
+                      <MenuDropdownDivider />
+                      <MenuDropdownItem iconLeft={<Icon name="trash" size={14} />} onClick={() => doDelete(target.path, isFolder)}>Delete</MenuDropdownItem>
+                    </>
+                  )}
+                </>
+              )
+            }}
+          </ContextMenu>
+        )}
+        {busyAction && <span className="sr-only" role="status">Working…</span>}
+
         {/* THE TAB PILL (item 16) — floats over the list, so the list owes it
             room or its last row sits under the bar forever.
             THE SPACER GOES LAST, AND THAT IS THE WHOLE POINT
@@ -695,10 +1111,25 @@ export function MediaLibraryBrowse({
 /* ══ LIBRARY — the content-filters wall ═══════════════════════════════════ */
 export function MediaLibraryLibrary({
   client, title = 'MEDIA', bucket, onBucketChange, prefix = '', defaults, settings: settingsProp, onSettingsChange,
-  headerActions, refreshKey, header = true, stats = true, settingsFooter, className = '',
+  headerActions, headerTrailing, refreshKey, header = true, stats = true, settingsFooter, className = '', banner,
   /* the same pill the browse page takes — the wall is one of the surfaces it
      switches between, so it has to carry it too (item 16) */
   tabs, activeTab, onTabChange,
+  /* A SEAM ON ONE PAGE IS A SEAM ON BOTH, when the field is one both render
+   * (FormatDateSkipsTheLibraryPage, kol-r2b2 2026-09-04). This reached
+   * `MediaLibraryBrowse` and not here, so a consumer passing ONE props object
+   * to both got `19.6.2026` on the Browse tab and `2026-06-19` on the Files tab
+   * — two formats for one field, one tap apart. The desktop stack had the same
+   * mismatch; the tab pill just moved the two halves close enough to see it.
+   *
+   * THE RULE, WIDENED — the fourth defect of this exact shape (`settingsFooter`
+   * documented and hardcoded past · `thumbnailFor` and `folderMeta` not
+   * forwarded · now this). These two pages are ONE SURFACE SPLIT IN TWO and a
+   * consumer hands the same props object to both, so: a prop naming how a
+   * SHARED FIELD renders is added to BOTH pages in the same edit. Props about a
+   * concept only one page has stay put — `thumbnailFor`, `folderMeta` and
+   * `stackView` are folder and stack concepts and are correctly absent here. */
+  formatDate = defaultFormatDate,
 }) {
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket
@@ -837,16 +1268,32 @@ export function MediaLibraryLibrary({
     }
     return o.displayKey.split('/').pop()
   }
+  /* ONE PREVIEWER (2026-09-21). This was a hand-rolled ladder that knew image, a sibling poster
+   * and an autoloaded video, and printed the literal word "video" or "markdown" for everything
+   * else — while the column preview eight hundred lines up already called `KindPreview`, which
+   * renders markdown, code, json, yaml, audio and HLS for real. That is why every kind previewed
+   * in the column pane and nothing previewed in the grid or the list: two previewers for one
+   * object, and the wall's predates the component.
+   *
+   * Images stay the caller's, as they are in the column pane and as `KindPreview` documents —
+   * it has no image branch on purpose, because in a frame the frame draws its own. A video keeps
+   * its poster when the bucket has a sibling still, because a poster is cheaper than the file and
+   * `videoPreview` is the consumer's setting about exactly that. Everything else falls through. */
   const renderThumb = (o, onClick) => {
-    const media = isImage(o.contentType) || isVideo(o.contentType)
-    const poster = (isVideo(o.contentType) || kindOf(o) === 'playlist') ? posterFor(o.key, keySet) : null
+    const kind = kindOf(o)
+    const poster = (isVideo(o.contentType) || kind === 'playlist') ? posterFor(o.key, keySet) : null
     const imgSrc = isImage(o.contentType) ? mediaUrl(o.key) : poster && videoPreview !== 'none' ? mediaUrl(poster) : null
     if (imgSrc) return <img src={imgSrc} alt="" loading="lazy" className={onClick ? 'cursor-zoom-in' : undefined} onClick={onClick || undefined} />
+    if (isVideo(o.contentType) && videoPreview === 'none') {
+      return (
+        <div className={`w-full h-full flex items-center justify-center bg-fg-04 overflow-hidden${onClick ? ' cursor-zoom-in' : ''}`} onClick={onClick || undefined}>
+          <span className="kol-mono-12 text-fg-48">video</span>
+        </div>
+      )
+    }
     return (
-      <div className={`w-full h-full flex items-center justify-center bg-fg-04 overflow-hidden${media && onClick ? ' cursor-zoom-in' : ''}`} onClick={media && onClick ? onClick : undefined}>
-        {isVideo(o.contentType) && videoPreview === 'autoload' ? <video src={mediaUrl(o.key)} className="w-full h-full object-cover" muted preload="metadata" />
-          : isVideo(o.contentType) ? <span className="kol-mono-12 text-fg-48">video</span>
-          : <span className="kol-mono-12 text-fg-48">{KIND_LABEL[kindOf(o)] || 'file'}{o.segmentCount ? ` ${o.segmentCount}` : ''}</span>}
+      <div className={`kol-media-thumb w-full h-full flex items-center justify-center bg-fg-04 overflow-hidden${onClick ? ' cursor-zoom-in' : ''}`} onClick={onClick || undefined}>
+        <KindPreview o={o} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
       </div>
     )
   }
@@ -859,9 +1306,12 @@ export function MediaLibraryLibrary({
   return (
     <div className={`flex flex-col gap-6 ${className}`.trim()}>
       {header && (
-        <LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={false} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions}
+        <LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={false} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions} headerTrailing={headerTrailing}
           onBucket={(v) => { if (v === 'all') return; if (bucket == null) setOwnBucket(v); onBucketChange?.(v) }} onSettings={() => setSettingsOpen(true)} />
       )}
+      {/* A SEAM ON ONE PAGE IS A SEAM ON BOTH — `banner` is shared chrome, so it lands here in the
+        * same edit it landed on the browse page. See the note on `formatDate` above. */}
+      {banner}
       {settingsOpen && (
         <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} settingsFooter={settingsFooter} />
       )}

package/src/utilities/ContextMenu.jsx

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useState } from 'react'
+import { usePopover, PopoverPanel } from './Popover.jsx'
+
+/**
+ * ContextMenu — a right-click menu, anchored at the pointer.
+ *
+ * `onContextMenu` appeared NOWHERE in this package before 2026-09-21, which is
+ * why every file-manager verb the media product needed (new folder, rename,
+ * move, delete) had no surface to be invoked from: the operations existed on
+ * the client and nothing could reach them. This is that surface.
+ *
+ * Built on `usePopover`'s `referenceElement` seam rather than a new floating
+ * implementation — a context menu is a popover whose anchor is a point instead
+ * of an element, and floating-ui takes a virtual element for exactly this. So
+ * it inherits flip, shift, the portal, dismissal and the `.kol-popover` chrome,
+ * and a menu near the viewport edge behaves like every other panel.
+ *
+ *   const menu = useContextMenu()
+ *   <li onContextMenu={(e) => menu.openAt(e, row)}>…</li>
+ *   <ContextMenu menu={menu}>
+ *     {(row) => <MenuDropdownItem onClick={() => rename(row)}>Rename</MenuDropdownItem>}
+ *   </ContextMenu>
+ *
+ * `children` may be a render function taking the payload handed to `openAt`,
+ * so one menu instance serves a whole list instead of one per row.
+ */
+export function useContextMenu() {
+  const [state, setState] = useState(null) // { x, y, payload } | null
+
+  const openAt = useCallback((event, payload = null) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setState({ x: event.clientX, y: event.clientY, payload })
+  }, [])
+
+  const close = useCallback(() => setState(null), [])
+
+  const popover = usePopover({
+    open: !!state,
+    onOpenChange: (v) => { if (!v) close() },
+    placement: 'right-start',
+    offset: 2,
+    click: false,
+    role: 'menu',
+  })
+
+  /* A VIRTUAL ELEMENT — a zero-size rect at the pointer. It goes through
+   * `setPositionReference`, NOT the `elements.reference` option: floating-ui
+   * rejects a virtual element there ("must be a real DOM element") because that
+   * slot also feeds the interaction hooks, which call `getAttribute` on it.
+   * `setPositionReference` is the seam for exactly this — position from a point,
+   * interactions from nothing. */
+  const { setPositionReference } = popover.refs
+  useEffect(() => {
+    if (!state) return
+    const { x, y } = state
+    setPositionReference({
+      getBoundingClientRect: () => ({ width: 0, height: 0, x, y, top: y, left: x, right: x, bottom: y }),
+    })
+  }, [state, setPositionReference])
+
+  return { open: !!state, payload: state?.payload ?? null, openAt, close, popover }
+}
+
+export default function ContextMenu({ menu, children, className = '' }) {
+  if (!menu.open) return null
+  return (
+    /* `focus={false}` — FloatingFocusManager reads attributes off the reference,
+     * and a point has none. Dismissal is outside-click and Escape, which the
+     * popover already wires. */
+    <PopoverPanel popover={menu.popover} focus={false} className={`kol-dd-list min-w-44 ${className}`.trim()}>
+      {/* Any click inside closes — a menu item that leaves the menu open after
+        * acting is the one interaction people report as broken. Items keep their
+        * own onClick; this runs after it on the way up. */}
+      <div onClick={menu.close} role="none">
+        {typeof children === 'function' ? children(menu.payload) : children}
+      </div>
+    </PopoverPanel>
+  )
+}