@kolkrabbi/kol-component 0.217.0 → 0.219.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.217.0",
+  "version": "0.219.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/hooks/useLongPress.js

@@ -0,0 +1,41 @@
+import { useRef } from 'react'
+
+/**
+ * useLongPress — the touch half of right-click. iOS never fires `contextmenu` from a held press,
+ * so a container spreads these props and a held touch dispatches that event itself, at the finger,
+ * on whatever was pressed. Every `onContextMenu` inside — and the payload it builds — works
+ * unchanged, with no per-row wiring.
+ *
+ *   const press = useLongPress()
+ *   <div {...press}> …rows and tiles with onContextMenu… </div>
+ *
+ * Touch only (a mouse and a pen have a right button). It acts only when a handler took the event
+ * (`preventDefault`, which is what `useContextMenu().openAt` does): a held press on anything else
+ * stays a press, and its click is not swallowed. When one did, the click that follows the lift is
+ * swallowed so the row underneath does not also select or open. Moving past `slop` px is a scroll
+ * or a drag and cancels it. A trusted `contextmenu` after ours (Android fires one) is dropped.
+ */
+export default function useLongPress({ ms = 450, slop = 10 } = {}) {
+  const s = useRef({ timer: 0, x: 0, y: 0, target: null, fired: false })
+  const cancel = () => { clearTimeout(s.current.timer); s.current.timer = 0 }
+  return {
+    /* iOS draws its own callout over a held image — the thumbnails are images */
+    style: { WebkitTouchCallout: 'none' },
+    onPointerDown: (e) => {
+      const t = s.current
+      cancel()
+      t.fired = false
+      if (e.pointerType !== 'touch' || !e.isPrimary || e.target.closest('input,textarea,select')) return
+      t.x = e.clientX; t.y = e.clientY; t.target = e.target
+      t.timer = setTimeout(() => {
+        t.timer = 0
+        t.fired = !t.target.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: t.x, clientY: t.y, button: 2 }))
+      }, ms)
+    },
+    onPointerMove: (e) => { const t = s.current; if (t.timer && Math.hypot(e.clientX - t.x, e.clientY - t.y) > slop) cancel() },
+    onPointerUp: cancel,
+    onPointerCancel: cancel,
+    onClickCapture: (e) => { if (s.current.fired) { s.current.fired = false; e.preventDefault(); e.stopPropagation() } },
+    onContextMenuCapture: (e) => { if (s.current.fired && e.nativeEvent.isTrusted) { e.preventDefault(); e.stopPropagation() } },
+  }
+}

package/src/index.js

@@ -183,6 +183,7 @@ 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 RowMenuButton } from './molecules/RowMenuButton.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'
@@ -221,6 +222,7 @@ export { default as useScrollSpy } from './hooks/useScrollSpy.js'
 export { default as useTilt } from './hooks/useTilt.js'
 export { default as usePlayback } from './hooks/usePlayback.js'
 export { default as useCoarsePointer } from './hooks/useCoarsePointer.js'
+export { default as useLongPress } from './hooks/useLongPress.js'
 export { default as useInViewAttention } from './hooks/useInViewAttention.js'
 export { default as useAxisAnimation } from './hooks/useAxisAnimation.js'
 export { useEyedropper, pickFromCanvasElement } from './hooks/useEyedropper.js'

package/src/molecules/KindPreview.jsx

@@ -182,11 +182,16 @@ export default function KindPreview({
   if (kind === 'video') return <VideoTile src={url} poster={poster} />
   if (kind === 'audio') return <AudioTile src={url} fallback={icon} />
   if (isText) {
+    /* A THUMBNAIL IS A PICTURE of the document, not the document: a README's links stayed live
+     * inside a grid tile, and tapping the tile navigated the app away. `inert` takes the whole page
+     * out of hit-testing and the tab order, so the tap lands on the tile. The pane and the sheet
+     * are for reading, and keep their links. */
+    const picture = (node) => (fit === 'tile' || fit === 'thumb' ? <div inert className="contents">{node}</div> : node)
     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>
     if (kind === 'markdown') {
       const meta = parseFrontmatter(text)
-      return (
+      return picture(
         <DocPage frontmatter={Object.keys(meta).length ? meta : null}>
           <div className="kol-prose" dangerouslySetInnerHTML={{ __html: markdownToHtml(text) }} />
           {truncated && <p className="kol-mono-12 text-meta">truncated at {textLimit / 1024} KB</p>}
@@ -194,7 +199,7 @@ export default function KindPreview({
       )
     }
     const language = kind === 'json' ? 'json' : kind === 'yaml' ? 'yaml' : LANG[ext] || 'text'
-    return (
+    return picture(
       <DocPage>
         <CodeBlock code={text} language={language} filename={name} copy={false} />
         {truncated && <p className="kol-mono-12 text-meta">truncated at {textLimit / 1024} KB</p>}

package/src/molecules/MediaTile.jsx

@@ -1,4 +1,5 @@
-/* taxonomy-ok: molecule — lays out a caller's preview node and a name; no DS parts of its own. */
+/* taxonomy-ok: molecule — lays out a caller's preview node and a name; its one DS part is the touch `···`. */
+import RowMenuButton from './RowMenuButton.jsx'
 
 /**
  * MediaTile — one file in the grid view, Finder's icon view (user 2026-09-23: *"skip the container
@@ -18,12 +19,13 @@
  */
 export default function MediaTile({ preview, name, selected = false, markKey, onClick, onDoubleClick, onContextMenu, className = '' }) {
   return (
-    <div className={`kol-media-tile-item ${className}`.trim()} data-selected={selected || undefined} data-marquee-key={markKey}
+    <div className={`kol-media-tile-item relative ${className}`.trim()} data-selected={selected || undefined} data-marquee-key={markKey}
       role="button" tabIndex={0} aria-pressed={selected}
       onClick={onClick} onDoubleClick={onDoubleClick} onContextMenu={onContextMenu}
       onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); onDoubleClick?.(e) } }}>
       <div className="kol-media-tile-thumb">{preview}</div>
       <span className="kol-media-tile-name">{name}</span>
+      <RowMenuButton variant="grey" onOpen={onContextMenu} className="absolute top-1 right-1" />
     </div>
   )
 }

package/src/molecules/RowMenuButton.jsx

@@ -0,0 +1,20 @@
+/* taxonomy-ok: molecule — one Button behind the coarse-pointer gate; the menu it opens is the caller's. */
+import Button from '../atoms/Button.jsx'
+import useCoarsePointer from '../hooks/useCoarsePointer.js'
+
+/**
+ * RowMenuButton — the `···` that stands in for right-click on a touch device (media D-touch,
+ * 2026-09-23). A finger has no right button, and a held press (`useLongPress`) is invisible until
+ * you know it, so on `pointer: coarse` a row or tile that has a context menu wears this. It calls
+ * the SAME handler right-click calls, with the tap as the event, so the payload, the selection
+ * rules and the menu are the row's own; `openAt` stops the tap, so the row underneath does not
+ * also select or open. Renders nothing on a fine pointer, or without a handler.
+ *
+ * @param {(e: Event) => void} onOpen  the row's `onContextMenu`
+ * @param {string}             variant `ghost` on a row; `grey` — an opaque plate — over a picture
+ */
+export default function RowMenuButton({ onOpen, variant = 'ghost', className = '' }) {
+  const coarse = useCoarsePointer()
+  if (!coarse || !onOpen) return null
+  return <Button variant={variant} size="md" iconOnly="more" aria-label="More actions" className={`shrink-0 ${className}`.trim()} onClick={onOpen} />
+}

package/src/organisms/ColumnBrowser.jsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import KindPreview, { KIND_GLYPH } from '../molecules/KindPreview.jsx'
 import FileIcon from '../atoms/FileIcon.jsx'
+import RowMenuButton from '../molecules/RowMenuButton.jsx'
 import { formatLength } from '../molecules/AudioPreview.jsx'
 import { kindOf as dsKindOf, KIND_LABEL as DS_KIND_LABEL } from '../utilities/mediaKinds.js'
 import useGrabEdge from '../hooks/useGrabEdge.js'
@@ -342,6 +343,9 @@ function Row({
 
       {/* ZONE 4 */}
       {zones ? <span className="shrink-0 inline-flex justify-end" style={{ width: 20 }}>{trailing}</span> : trailing}
+      {/* on touch the row's menu has a face — see RowMenuButton; the negative margins keep the row's
+          height and inset what they were without it */}
+      <RowMenuButton onOpen={onContextMenu} className="-my-2 -mr-2" />
     </li>
   )
 }
@@ -807,11 +811,14 @@ export default function ColumnBrowser({
             {rows.filter((r) => r.kind !== 'empty').map((r) => {
               const isFolder = r.kind === 'folder'
               const o = r.o
+              const menu = onRowContextMenu && ((e) => onRowContextMenu(e, isFolder ? { type: 'folder', path: r.level + r.name } : { type: 'file', path: o.key, o }))
               return (
+                /* the wrapper exists so the `···` is a SIBLING of the tile, not a button inside one */
+                <div key={r.key} className="relative min-w-0">
                 <button
-                  key={r.key}
                   type="button"
-                  className={`kol-column-browser-tile${!isFolder && shown?.key === o.key ? ' is-selected' : ''}`}
+                  className={`kol-column-browser-tile w-full${!isFolder && shown?.key === o.key ? ' is-selected' : ''}`}
+                  onContextMenu={menu}
                   onClick={() => {
                     if (isFolder) { onPrefix(r.level + r.name); return }
                     const files = itemsAt(r.level ?? '').filter((it) => it.type === 'file').map((it) => it.o)
@@ -830,6 +837,8 @@ export default function ColumnBrowser({
                     {isFolder ? folderMeta?.(r.level + r.name, 'grid') : (o.size != null ? formatSize(o.size) : '')}
                   </span>
                 </button>
+                <RowMenuButton variant="grey" onOpen={menu} className="absolute top-1 right-1" />
+                </div>
               )
             })}
           </div>
@@ -858,6 +867,9 @@ export default function ColumnBrowser({
                  * level; past the indent cap it has nothing left to offer, so
                  * the row is the only way down */
                 onDisclose={r.depth < INDENT_CAP ? () => toggleExpanded(r.key) : undefined}
+                /* THE ROW'S OWN MENU. Only the <ul> carried one, so a menu opened on a phone row
+                 * targeted the LEVEL — the rename and delete the row was asking for were not there. */
+                onContextMenu={onRowContextMenu && ((e) => onRowContextMenu(e, { type: 'folder', path: r.level + r.name }))}
                 onClick={() => onPrefix(r.level + r.name)}
               />
             ) : (
@@ -870,6 +882,7 @@ export default function ColumnBrowser({
                 indent={r.depth}
                 meta={metaOf(r.o)}
                 active={shown?.key === r.o.key}
+                onContextMenu={onRowContextMenu && ((e) => onRowContextMenu(e, { type: 'file', path: r.o.key, o: r.o }))}
                 /* A FILE IS A PUSH, NOT A PREVIEW PANE (item 6): there is no
                  * column for the preview to sit beside at this width, so the
                  * tap opens the full-screen inspector the consumer already
@@ -957,7 +970,7 @@ export default function ColumnBrowser({
                 active={f === activeFolder || isPicked(level + f)}
                 cursor={cursorActive && cursor.col === k && cursor.idx === i}
                 trailing={<Icon name="chevron-right" size={12} className="text-oq-32" />}
-                onContextMenu={(e) => onRowContextMenu?.(e, { type: 'folder', path: level + f })}
+                onContextMenu={onRowContextMenu && ((e) => onRowContextMenu(e, { type: 'folder', path: level + f }))}
                 drop={dragFor?.(level + f)}
                 dropFiles={onDropFiles ? (list) => onDropFiles(list, level + f) : undefined}
                 onClick={(e) => { if (onSelectClick?.(level + f, e, colKeys)) return; setCursor({ col: k, idx: i }); setCursorActive(true); rootRef.current?.focus(); pick(null); onPrefix(level + f) }}
@@ -971,7 +984,7 @@ export default function ColumnBrowser({
                 markKey={o.key}
                 active={shown?.key === o.key || isPicked(o.key)}
                 cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
-                onContextMenu={(e) => onRowContextMenu?.(e, { type: 'file', path: o.key, o })}
+                onContextMenu={onRowContextMenu && ((e) => onRowContextMenu(e, { type: 'file', path: o.key, o }))}
                 drop={dragFor?.(o.key)}
                 onClick={(e) => { if (onSelectClick?.(o.key, e, colKeys)) return; setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pickFile(level, o) }}
               />

package/src/organisms/MediaLibraryPages.jsx

@@ -12,6 +12,7 @@ import ViewToggle from '../atoms/ViewToggle.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
 import ContentCard from '../molecules/ContentCard.jsx'
 import MediaTile from '../molecules/MediaTile.jsx'
+import RowMenuButton from '../molecules/RowMenuButton.jsx'
 import ContentRow from '../molecules/ContentRow.jsx'
 import SortControls from '../molecules/SortControls.jsx'
 import SearchInput from '../molecules/SearchInput.jsx'
@@ -20,6 +21,8 @@ import { MenuItem, MenuDropdownItem, MenuDropdownDivider } from '../molecules/Me
 import { Tooltip } from '../utilities/Popover.jsx'
 import ContextMenu, { useContextMenu } from '../utilities/ContextMenu.jsx'
 import useMarquee from '../hooks/useMarquee.js'
+import useLongPress from '../hooks/useLongPress.js'
+import useMediaQuery from '../hooks/useMediaQuery.js'
 import KindPreview from '../molecules/KindPreview.jsx'
 import AudioSheet from '../molecules/AudioSheet.jsx'
 import VideoSheet from '../molecules/VideoSheet.jsx'
@@ -257,6 +260,7 @@ function FolderRow({ name, onClick, onDoubleClick, depth = 0, expanded, onToggle
         <span className="kol-mono-12 text-fg-32 shrink-0 truncate" style={{ width: cols.date }}>{meta}</span>
         <span className="kol-mono-12 text-fg-24 shrink-0 truncate" style={{ width: cols.size }}>—</span>
       </>}
+      <RowMenuButton onOpen={onContextMenu} className="-my-1 -mr-1" />
     </li>
   )
 }
@@ -331,6 +335,7 @@ function FileRow({ o, onClick, onDoubleClick, depth = 0, formatDate, thumb, cols
         <span className="kol-mono-12 text-fg-32 shrink-0 truncate" style={{ width: cols.date }}>{formatDate?.(o.uploaded)}</span>
         <span className="kol-mono-12 text-fg-32 shrink-0 truncate" style={{ width: cols.size }}>{formatSize(o.size)}</span>
       </>}
+      <RowMenuButton onOpen={onContextMenu} className="-my-1 -mr-1" />
     </li>
   )
 }
@@ -844,6 +849,9 @@ export function MediaLibraryBrowse({
    * 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. */
   tabs, activeTab, onTabChange,
+  /* `bucketLevel` — keep title → bucket → folders with ONE bucket (kol-client-olina 2026-09-23).
+   * Absent, a one-bucket consumer collapses the level as ruled 2026-09-03. */
+  bucketLevel = false,
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -928,6 +936,8 @@ export function MediaLibraryBrowse({
    * that does not gets the native ones, exactly as before (kol-client-olina 2026-09-22: the
    * browser's own grey prompt box was the last non-DS surface on media.olina-productions.com). */
   const menu = useContextMenu()
+  /* touch has no right button: a held press on a row or tile opens the same menu (useLongPress) */
+  const press = useLongPress()
   const modal = useModal()
   const canWrite = !!fileActions && writable
   const [busyAction, setBusyAction] = useState(false)
@@ -1117,6 +1127,15 @@ export function MediaLibraryBrowse({
   /* stepping into a folder drops the pick — the preview would otherwise describe something no
    * longer in the list */
   const goFolder = (path) => { setPickedFile(null); setPickedFolder(null); setPrefix(path) }
+  /* ONE "GO UP" FOR ALL THREE VIEWS (kol-client-olina 2026-09-23: *"3 different stops for 3
+   * modes … they should all go all the way to the shared root folder"*): parent folder → … → the
+   * bucket's top → the title root, which is what `onHome` does. With one bucket and no
+   * `bucketLevel` there is no level above the bucket's top, so that is where it ends. Columns walk
+   * the same path with ArrowLeft. */
+  const goUp = () => {
+    if (prefix) { goFolder(dirOf(prefix)); return }
+    if (!single && !appRoot) { setAppRoot(true); setPickedFile(null); setPickedFolder(null) }
+  }
   /* SPACE IS QUICK LOOK IN EVERY VIEW (user 2026-09-23: *"spacebar preview only works in column,
    * fix that. CONSISTENCY"*). `ColumnBrowser` has owned that key since it shipped, so the columns
    * had it and the two views built later did not. The target is whatever is picked — the previewed
@@ -1217,9 +1236,11 @@ export function MediaLibraryBrowse({
       if (el?.tabIndex >= 0) el.focus({ preventScroll: true })
     }
     if (view === 'grid') {
+      /* BEFORE the empty-list bail-out: a folder that holds only subfolders has an empty wall, and
+       * ⌘↑ was swallowed there */
+      if (e.metaKey && e.key === 'ArrowUp') { goUp(); return true }
       const list = gridOrderRef.current
       if (!list.length) return true
-      if (e.metaKey && e.key === 'ArrowUp') { if (prefix) goFolder(dirOf(prefix)); return true }
       const i = list.findIndex((f) => f.key === cur)
       if (e.metaKey && e.key === 'ArrowDown') { if (i !== -1) openQuickLook({ files: list, index: i }); return true }
       const box = gridMarquee.ref.current
@@ -1243,7 +1264,7 @@ export function MediaLibraryBrowse({
       }
       const isFolder = cur?.endsWith('/')
       const open = isFolder && rowsExpanded.has(cur)
-      if (e.metaKey && e.key === 'ArrowUp') { const up = cur ? dirOf(cur) : dirOf(prefix); if (up) select(up); return true }
+      if (e.metaKey && e.key === 'ArrowUp') { const up = cur ? dirOf(cur) : dirOf(prefix); if (up) select(up); else goUp(); return true }
       if (e.metaKey && e.key === 'ArrowDown') {
         if (!cur) return true
         if (isFolder) goFolder(cur)
@@ -1303,6 +1324,10 @@ export function MediaLibraryBrowse({
   const view = stored === 'list' ? 'rows' : stored
   const isWall = view === 'grid'
   const folderView = view === 'rows' ? 'rows' : 'columns'
+  /* BELOW `md` BOTH TREE VIEWS ARE THE PHONE LIST. `ColumnBrowser` already forks to its one-level
+   * stack there; the row view had no phone form and drew the desktop list and its preview pane
+   * squeezed into 390 — 35px of rows with no names. Same query, same breakpoint as the columns. */
+  const phone = useMediaQuery('(max-width: 767px)')
   const setView = (v) => {
     onViewChange?.(v)
     setSettings({
@@ -1395,7 +1420,7 @@ export function MediaLibraryBrowse({
    * to reach a folder. The virtual root collapses to the empty string, which
    * makes every `slice(VROOT.length)` below a no-op and leaves column 0 as the
    * bucket's own folders. Multi-bucket browse is untouched. */
-  const single = buckets.length <= 1
+  const single = !bucketLevel && buckets.length <= 1
   const ROOT = title
   const label = bucketMeta.label || 'bucket'
   const VROOT = single ? '' : `${ROOT}/${label}/`
@@ -1459,7 +1484,7 @@ export function MediaLibraryBrowse({
   const treeBody = (keep) => {
     const treeObjects = keep ? sortedObjects.filter((o) => keep.has(o.key)) : sortedObjects
     return (
-  folderView === 'columns' ? (
+  folderView === 'columns' || phone ? (
             <div ref={columnsRef} className="relative">
               <ColumnBrowser
                 autoFocus={autoFocus}
@@ -1648,8 +1673,18 @@ export function MediaLibraryBrowse({
     <div className="flex flex-col gap-2" style={{ height: settings.columnHeight ?? SETTINGS_BASE.columnHeight }}>
     <div className="relative border rounded flex overflow-hidden flex-1 min-h-0" style={{ borderColor: 'var(--kol-oq-08)' }}>
     <div className={`flex-1 min-w-0 overflow-y-auto p-4${showGridPreview ? ' border-r' : ''}`} style={{ borderColor: 'var(--kol-oq-08)' }}
+      /* THE CONTAINER IS A LEVEL, like a column (kol-client-olina 2026-09-23: *"context menu anywhere
+       * by right click"*). A tile's own menu stops the event first, so it still wins. */
+      onContextMenu={(e) => menu.openAt(e, { type: 'level', path: prefix })}
       onClick={(e) => { if (!e.target.closest('[data-marquee-key]')) { setRowSelection(new Set()); setPickedFile(null); setPickedFolder(null) } }}>
     <WallBody files={files} layout="grid" tiles="media" cardMin={tileSize} marquee={gridMarquee} onSorted={(list) => { gridOrderRef.current = list }}
+      /* THE GRID DRAWS THE LEVEL'S SUBFOLDERS, ahead of the files (same source: kol-client-olina
+       * 2026-09-23 — `projects/` read `0 files` over a blank pane). `flat` is the subtree's files
+       * and no folders, as it was. */
+      folders={settings.flat ? [] : folders.map((f) => prefix + f)}
+      onOpenFolder={goFolder}
+      onPickFolder={(path, e) => { if (selectRow(path, e, [...folders.map((f) => prefix + f), ...files.map((f) => f.key)])) return; rowPickFolder(path) }}
+      onFolderContextMenu={(e, path) => menu.openAt(e, { type: 'folder', path, targets: targetsFor(path) })}
       onBackgroundClick={() => { setRowSelection(new Set()); setPickedFile(null); setPickedFolder(null) }}
       sortBy={settings.sortBy} sortDir={settings.sortDir}
       pageSize={settings.pageSize} listId={`${prefix}|${view}|${settings.flat}|${refreshKey}|${bucketMeta.id}`}
@@ -1696,7 +1731,7 @@ export function MediaLibraryBrowse({
     : treeBody(filtered ? new Set(filtered.map((f) => f.key)) : null))
 
   return (
-    <div className={`flex flex-col gap-6 ${className}`.trim()}>
+    <div {...press} className={`flex flex-col gap-6 ${className}`.trim()}>
       <LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={appRoot} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions} headerTrailing={headerTrailing} onTrash={trash ? () => setTrashOpen(true) : undefined}
         onHome={() => { setAppRoot(true); setPickedFile(null); setPrefix('') }}
         onBucket={(v) => { if (v === 'all') { setAppRoot(true); setPrefix('') } else { setAppRoot(false); switchBucket(v) } }}
@@ -1908,7 +1943,7 @@ export function MediaLibraryBrowse({
            * this row 8px taller than the fill budget, so the page scrolled by that much */
           <div className="flex items-center justify-between gap-4 h-4">
             <p className="kol-mono-12 text-fg-48">
-              {wallFiles.length} {wallFiles.length === 1 ? 'file' : 'files'} · {formatSize(wallFiles.reduce((n, o) => n + (o.size ?? 0), 0))}
+              {!settings.flat && folders.length > 0 && `${folders.length} folder${folders.length > 1 ? 's' : ''} · `}{wallFiles.length} {wallFiles.length === 1 ? 'file' : 'files'} · {formatSize(wallFiles.reduce((n, o) => n + (o.size ?? 0), 0))}
             </p>
             <input type="range" className="slider-black w-32 cursor-pointer" min={100} max={360} step={20} value={tileSize}
               onChange={(e) => setSettings({ ...settings, tileSize: Number(e.target.value) })} aria-label="Tile size" />
@@ -1921,7 +1956,11 @@ export function MediaLibraryBrowse({
           <p className="kol-mono-12 text-fg-48">
             {folders.length > 0 && `${folders.length} folder${folders.length > 1 ? 's' : ''} · `}
             {rawFiles.length} {rawFiles.length === 1 ? 'file' : 'files'} · {formatSize(totalBytes)}
+            {/* THE GREY TAIL TOTALS WHERE YOU STAND (kol-client-olina 2026-09-23): the bucket at the
+              * root, the current folder recursively below it. Hidden when it would repeat the
+              * bright part — a leaf has nothing beneath it to add. */}
             {!prefix && rawFiles.length !== bucketFiles && <span className="text-fg-32">{'  ·  bucket: '}{bucketFiles} files · {formatSize(bucketBytes)}</span>}
+            {prefix && scoped.length !== levelFiles.length && <span className="text-fg-32">{`  ·  in ${crumbs.at(-1)}: `}{scoped.length} files · {formatSize(scoped.reduce((n, o) => n + (o.size || 0), 0))}</span>}
             {systemCount > 0 && <span className="text-fg-32">{'  ·  '}{systemCount} system files hidden</span>}
           </p>
         )}
@@ -2099,6 +2138,8 @@ export function WallBody({
   files, layout = 'list', sortBy = 'name', sortDir = 'asc', pageSize = 200, listId = '', cardMin = 260,
   mediaUrl, downloadUrl, keySet, videoPreview, formatDate = defaultFormatDate,
   selected, selectMode = false, onToggleSelect, onSorted, onContextMenu, onPick,
+  /* the media grid's folder tiles — see the page's `wallPane` */
+  folders = [], onOpenFolder, onPickFolder, onFolderContextMenu,
   /* ONE INSPECTOR (user 2026-09-23). Given `onOpen`, the wall hands the open UP and keeps no
    * lightbox of its own — otherwise a page that also opens one (space, a row double-click) ends up
    * with two stacked overlays of the same file. The standalone wall passes nothing and keeps its
@@ -2154,7 +2195,7 @@ export function WallBody({
   const openAt = (o, idx) => (onOpen ? onOpen(o, sorted) : setLightboxIndex(idx))
   return (
     <div className="flex flex-col gap-3">
-      {sorted.length === 0 ? null : layout !== 'grid' ? (
+      {sorted.length === 0 && !(layout === 'grid' && tiles === 'media' && folders.length) ? null : layout !== 'grid' ? (
         <div className="flex flex-col">
           {shown.map((o, idx) => (
             <ContentRow key={o.key} variant="default" media={renderThumb(o, null)} title={renderName(o)} date={formatDate(o.uploaded)} size={formatSize(o.size)}
@@ -2169,6 +2210,13 @@ export function WallBody({
           style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${cardMin}px, 1fr))` }}
           onClick={(e) => { if (!e.target.closest('[data-marquee-key]')) onBackgroundClick?.() }}>
           {marquee?.rect && <div className="kol-marquee" style={marquee.rect} />}
+          {folders.map((path) => (
+            <MediaTile key={path} markKey={path} preview={<Icon name="folder" size={56} className="text-oq-48" />}
+              name={path.replace(/\/$/, '').split('/').pop()} selected={isSelected(path)}
+              onContextMenu={onFolderContextMenu ? (e) => onFolderContextMenu(e, path) : undefined}
+              onDoubleClick={() => onOpenFolder?.(path)}
+              onClick={onPickFolder ? (e) => onPickFolder(path, e) : undefined} />
+          ))}
           {shown.map((o, idx) => (
             <MediaTile key={o.key} markKey={o.key} preview={renderThumb(o, null)} name={renderName(o)} selected={isSelected(o.key)}
               onContextMenu={onContextMenu ? (e) => onContextMenu(e, o) : undefined}

package/src/utilities/ContextMenu.jsx

@@ -72,7 +72,10 @@ export default function ContextMenu({ menu, children, className = '' }) {
       {/* 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">
+      {/* A COLUMN, not a block: the items are `inline-flex`, so in a block they are one line of
+        * inline boxes to the float's shrink-to-fit, and the menu took the width of every label
+        * side by side — 510px for seven short verbs, past the edge of a phone. */}
+      <div onClick={menu.close} role="none" className="flex flex-col">
         {typeof children === 'function' ? children(menu.payload) : children}
       </div>
     </PopoverPanel>