{ e.preventDefault(); e.currentTarget.setPointerCapture(e.pointerId); start.current = axis === 'x' ? e.clientX : e.clientY; setDragging(true) }}
onPointerMove={(e) => { if (start.current == null) return; onDrag((axis === 'x' ? e.clientX : e.clientY) - start.current) }}
onPointerUp={(e) => { e.currentTarget.releasePointerCapture(e.pointerId); start.current = null; setDragging(false); onEnd?.() }}
onPointerCancel={() => { start.current = null; setDragging(false); onEnd?.() }}
/>
)
}
const MIN_H = 240
const MIN_W = 160
const PREVIEW_W = 320
export default function ColumnBrowser({
objects = [],
prefix = '',
onPrefix = () => {},
quickLook = null,
onQuickLook,
onPick,
/* `picked` — the file the CALLER holds picked (a key or an object; kol-client-olina 2026-09-25:
* a pick made in rows or grid was lost on the switch to columns, because this browser kept its
* own). Given, the browser opens on that file's level with its row selected and previewed, and
* follows it when it changes; absent (`undefined`), the pick is internal exactly as before. */
picked: pickedIn,
urlOf,
kindOf = defaultKindOf,
kindLabel = DEFAULT_KIND_LABEL,
formatSize = defaultFormatSize,
formatDate = defaultFormatDate,
partition = defaultPartition,
renderPreview,
/* `renderDetails(file)` — extra rows under the preview column's facts (tags, an Edit action);
* absent, the column is exactly what it was */
renderDetails,
height,
defaultHeight = 528,
onHeightChange,
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,
/* `onDropFiles(files, folderPath)` — files dragged in FROM THE OS onto a folder row or a column
* (kol-client-olina 2026-09-22). The browser hands over the `FileList` and the target path and
* never uploads: each consumer's pipeline differs, so the upload is theirs, and they re-list.
* Absent, an OS drag shows nothing and does nothing. */
onDropFiles,
/* MULTI-SELECT BY DRAG (user 2026-09-22). `selectedKeys` is the set the caller owns — paths for
* folders, keys for files, exactly as this component hands them out — and `onSelectKeys(keys,
* additive)` reports what a band touched. Without the pair, a drag on the background does
* nothing, as before. */
selectedKeys,
onSelectKeys,
/* `onSelectClick(key, event, columnKeys)` — every row click, modifiers included, handed to the
* caller's selection model first (user 2026-09-23: ⇧-click *"should add to selection"*). Return
* true when the click was a selection gesture and the browser must not navigate. */
onSelectClick,
/* `folderIcon(path)` — the glyph a folder row wears (default `folder`). The media pages mark a
* bucket — a SOURCE, not a prefix — with `database` (user 2026-09-23). */
folderIcon,
/* `rowSize` — the desktop rows' step on the control ramp (xs · sm · md · lg = 22 · 26 · 32 · 40),
* height, glyph and type together (user 2026-09-30). md matches the search field. */
rowSize = 'md',
/* 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:
*
* `thumbnailFor(o)` — a node for the 44px box, or null for the kind glyph.
* WHERE a thumbnail comes from is the consumer's and it is not free: R2 and
* B2 serve originals, so a 44px tile can mean downloading a 2 MB JPEG. That
* repo's own mitigations (lazy originals, a resolution-set that picks the
* smallest variant) and whether to buy image resizing are its calls.
*
* `folderMeta(prefix)` — the folder's own meta line, `date · N items` in the
* references. Counting `objects` by prefix is O(n) per folder against a
* 3443-object bucket, and that repo already passes a baked folder tree
* carrying files and bytes. A seam, not a computation — the ticket says so
* and it is right. */
thumbnailFor,
folderMeta,
/* `list` (default) or `grid` below the breakpoint — item 14. 3-up, and for a
* 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 = '',
}) {
/* height: controlled-or-uncontrolled like Slider; widths: organism-internal,
* by column index (the preview keyed apart), seeded from `columnWidth` */
const [ownH, setOwnH] = useState(defaultHeight)
const h = height ?? ownH
const [widths, setWidths] = useState({})
const widthOf = (i) => columnWidths?.[i] ?? widths[i] ?? (i === 'preview' ? PREVIEW_W : columnWidth)
const dragBase = useRef(null)
const resizeCol = (i) => (dx) => {
if (dragBase.current == null) dragBase.current = widthOf(i)
const w = Math.max(MIN_W, Math.round(dragBase.current + dx))
setWidths((prev) => (prev[i] === w ? prev : { ...prev, [i]: w }))
onColumnResize?.(i, w)
}
const resizeH = (dy) => {
/* a string height (`'100%'`, `calc()`) has no arithmetic — the drag starts from what it
* RENDERED at, so there is no jump, and reports px from then on */
if (dragBase.current == null) dragBase.current = typeof h === 'number' ? h : (rootRef.current?.getBoundingClientRect().height ?? MIN_H)
const next = Math.max(MIN_H, Math.round(dragBase.current + dy))
if (height == null) setOwnH(next)
onHeightChange?.(next)
}
const endDrag = () => { dragBase.current = null }
const [picked, setPicked] = useState(null)
/* `onPick` (ColumnBrowserOnPick, kol-r2b2 2026-08-27): the picked file, for
* a Finder-style breadcrumb — fired whenever it changes; a folder pick or an
* outside prefix change fires null */
const pick = (o) => { setPicked(o); onPick?.(o) }
/* picking a FILE in a column that has an open folder closes that folder
* (Finder: one highlight per column) — the prefix collapses to the file's
* level, and the cursor STAYS on the file instead of re-seeding
* (SettingsPanelApproved §4, kol-r2b2 2026-08-27) */
const keepCursor = useRef(false)
const pickFile = (level, o) => {
pick(o)
if (prefix !== level) { keepCursor.current = true; pickedByCollapse.current = true; onPrefix(level) }
}
const pickedByCollapse = useRef(false)
const pickedInKey = typeof pickedIn === 'string' ? pickedIn : pickedIn?.key ?? null
useEffect(() => {
if (pickedIn === undefined || (picked?.key ?? null) === pickedInKey) return
const o = typeof pickedIn === 'string' ? objects.find((x) => x.key === pickedIn) : pickedIn
if (!o) { setPicked(null); return }
const level = o.key.slice(0, o.key.lastIndexOf('/') + 1)
setPicked(o)
setCursor(seedCursor(level))
if (prefix !== level) { keepCursor.current = true; pickedByCollapse.current = true; onPrefix(level) }
}, [pickedInKey]) // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => { if (pickedByCollapse.current) { pickedByCollapse.current = false; return } if (picked) pick(null) }, [prefix]) // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => { setExpanded((prev) => (prev.size ? new Set() : prev)) }, [prefix])
const levelsOf = (pfx) => {
const out = ['']
if (pfx) {
const segs = pfx.replace(/\/$/, '').split('/')
segs.forEach((_, i) => out.push(segs.slice(0, i + 1).join('/') + '/'))
}
return out
}
const itemsAt = (level) => {
const { folders, files } = partition(objects.filter((o) => o.key.startsWith(level)), level)
return [...folders.map((f) => ({ type: 'folder', name: f })), ...files.map((o) => ({ type: 'file', o }))]
}
// Keyboard cursor: which column, which row. Clicks keep it in sync.
/* SEEDED on the open folder of the deepest column that has one (Finder's
* start — ColumnBrowserCursorSeed, kol-r2b2 2026-08-27): with a deep `prefix`
* the first ↓ used to act in column 0. Re-seeded when `prefix` changes; the
* internal moves land on the same spot, so nothing jumps. */
const seedCursor = (pfx) => {
const lv = levelsOf(pfx)
/* a caller's `picked` file at this level is where the keyboard starts — on the file, not on
* the folder that opened its column */
if (pickedInKey?.startsWith(pfx) && !pickedInKey.slice(pfx.length).includes('/')) {
const idx = itemsAt(pfx).findIndex((it) => it.type === 'file' && it.o.key === pickedInKey)
if (idx >= 0) return { col: lv.length - 1, idx }
}
if (lv.length < 2) return { col: 0, idx: 0 }
const col = lv.length - 2
const opened = lv[col + 1].slice(lv[col].length)
const idx = itemsAt(lv[col]).findIndex((it) => it.type === 'folder' && it.name === opened)
return { col, idx: Math.max(0, idx) }
}
const [cursor, setCursor] = useState(() => seedCursor(prefix))
useEffect(() => {
if (keepCursor.current) { keepCursor.current = false; return }
setCursor(seedCursor(prefix))
}, [prefix, objects.length]) // eslint-disable-line react-hooks/exhaustive-deps
/* the cursor is NOT drawn until the keyboard is used (ColumnBrowserCursorStart,
* kol-r2b2 2026-08-27): at rest it sat on row 0 beside the open folder and
* read as a second selection. Arrows arm it; a click seeds it. */
const [cursorActive, setCursorActive] = useState(false)
/* STACK EXPANSION IS NOT NAVIGATION (StackModeChromeAndAncestors, kol-r2b2
* 2026-09-04). The chevron expands a folder where it stands; the ROW opens it
* and re-bases the list. Fusing both into `prefix` is what put the whole
* ancestor chain on screen as rows. Local because it is a VIEW state below a
* breakpoint — a consumer persisting it would be storing a phone gesture, and
* a desktop never reads it. Cleared whenever the level changes: expansions
* belong to the list they were made in. */
const [expanded, setExpanded] = useState(() => new Set())
const toggleExpanded = (path) => setExpanded((prev) => {
const next = new Set(prev)
if (!next.delete(path)) next.add(path)
return next
})
const rootRef = useRef(null)
/* `autoFocus` (ColumnBrowserSeams, kol-r2b2 2026-08-28): the arrow keys were dead until a row was
* clicked — nothing focused the root on mount, and the consumer reached into the DOM for it. Re-run
* on `prefix`, so a bucket switch from the header (which takes focus) hands the keyboard back.
* `preventScroll` (explorer-autofocus-scrolls-the-fixed-page, kol-website 2026-10-06): inside
* `PageShell mode="fixed"` the focus scrolled the page's scroller 102px to bring the browser into
* view, and the header opened off-screen. The keyboard still lands here; the page stays put. */
useEffect(() => { if (autoFocus) rootRef.current?.focus({ preventScroll: true }) }, [autoFocus, prefix])
/* THE KEYBOARD SELECTS TOO (user 2026-09-23: *"the highlight focus is on the correct item, this
* has been a problem for awhile"*). Clicks reported through `onSelectClick`; the arrows moved
* the cursor and the pick and told the caller nothing, so its selection kept the last CLICKED
* row lit beside the one the arrows had reached. Every keyboard move now replaces it. */
const selectOnly = (key) => onSelectKeys?.(key ? [key] : [], false)
const land = (level, item) => {
if (!item) return
if (item.type === 'folder') { pick(null); selectOnly(level + item.name); onPrefix(level + item.name) }
else { selectOnly(item.o.key); pickFile(level, item.o) }
}
const shiftAnchor = useRef(null)
const onKeyDown = (e) => {
/* typing in a field inside the browser (the preview's tag field) is not navigation */
const el = e.target
if (el?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el?.tagName ?? '')) return
/* ⌘↑ / ⌘↓ (user 2026-09-23: *"all modes should 'command up down' to move up and down parent
* child"*) — Finder's: ⌘↑ is ←, back to the enclosing folder; ⌘↓ opens what the cursor is on,
* → for a folder and Quick Look for a file. */
if (e.metaKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
e.preventDefault()
if (e.key === 'ArrowUp') return onKeyDown({ key: 'ArrowLeft', preventDefault() {} })
if (picked) return onKeyDown({ key: ' ', preventDefault() {} })
return onKeyDown({ key: 'ArrowRight', preventDefault() {} })
}
// Space = Quick Look over the picked column's files, starting at the picked one.
if (e.key === ' ' && picked) {
e.preventDefault()
const siblings = itemsAt(levelsOf(prefix)[cursor.col] ?? '').filter((it) => it.type === 'file').map((it) => it.o)
onQuickLook?.({ files: siblings, index: Math.max(0, siblings.findIndex((o) => o.key === picked.key)) })
return
}
if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return
e.preventDefault()
setCursorActive(true)
const lv = levelsOf(prefix)
const col = Math.min(cursor.col, lv.length - 1)
const items = itemsAt(lv[col])
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
const idx = Math.max(0, Math.min(items.length - 1, cursor.idx + (e.key === 'ArrowDown' ? 1 : -1)))
/* ⇧ + ↑↓ EXTENDS within the column (user 2026-09-23): the run from where it began to the
* cursor becomes the selection; nothing opens, nothing is previewed but the stack */
if (e.shiftKey && onSelectKeys) {
/* a new run starts wherever the cursor is unless it is still where the last ⇧ step left it */
const sa = shiftAnchor.current
if (!sa || sa.col !== col || sa.last !== cursor.idx) shiftAnchor.current = { col, idx: cursor.idx }
shiftAnchor.current.last = idx
const a = shiftAnchor.current.idx
const keyOf = (it) => (it.type === 'folder' ? lv[col] + it.name : it.o.key)
setCursor({ col, idx })
onSelectKeys(items.slice(Math.min(a, idx), Math.max(a, idx) + 1).map(keyOf), false)
return
}
shiftAnchor.current = null
/* an arrow that did not move the cursor does nothing — re-landing on an
* open folder re-fired onPrefix (ColumnBrowserCursorSeed) */
if (idx === cursor.idx && col === cursor.col) return
setCursor({ col, idx })
land(lv[col], items[idx])
} else if (e.key === 'ArrowRight') {
// Into the open folder's column, first row.
if (lv[col + 1]) {
const next = itemsAt(lv[col + 1])
setCursor({ col: col + 1, idx: 0 })
land(lv[col + 1], next[0])
}
} else if (col > 0) {
// Back to the parent column, on the folder we came out of.
const parentItems = itemsAt(lv[col - 1])
const opened = lv[col].slice(lv[col - 1].length)
const idx = Math.max(0, parentItems.findIndex((it) => it.type === 'folder' && it.name === opened))
setCursor({ col: col - 1, idx })
pick(null)
selectOnly(lv[col])
onPrefix(lv[col])
}
}
// While Quick Look is open the overlay holds focus, so the same keys are read
// off window: ↑/↓ step the picked file (overlay follows), space closes. The
// opening keystroke bubbles from this component and is ignored.
useEffect(() => {
if (!quickLook) return
const onKey = (e) => {
if (rootRef.current?.contains(e.target)) return
if (e.key === ' ') { e.preventDefault(); onQuickLook?.(null); return }
if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return
e.preventDefault()
const lv = levelsOf(prefix)
const col = Math.min(cursor.col, lv.length - 1)
const items = itemsAt(lv[col])
let idx = cursor.idx
const step = e.key === 'ArrowDown' ? 1 : -1
do { idx += step } while (items[idx] && items[idx].type !== 'file')
if (!items[idx]) return
setCursor({ col, idx })
pick(items[idx].o)
selectOnly(items[idx].o.key)
const siblings = items.filter((it) => it.type === 'file').map((it) => it.o)
onQuickLook?.({ files: siblings, index: siblings.findIndex((o) => o.key === items[idx].o.key) })
}
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
})
const levels = levelsOf(prefix) // '' → ['']; 'a/b/' → ['', 'a/', 'a/b/']
// While Quick Look is open the overlay's index is the truth for the highlight.
const shown = quickLook ? quickLook.files[quickLook.index] : picked
/* ── THE STACK MODE (ColumnBrowserStackMode, kol-r2b2 2026-09-03) ─────────
*
* Miller columns put hierarchy on the X AXIS, and a phone has no width to
* spend on it: at 390 two 260px columns plus a gutter overflow, the inner row
* scrolls with nothing to say so, and a horizontal scroll inside a vertical
* page is a gesture nobody goes looking for. Measured on a live site, in a
* different repo running these same organisms — the layout ported and carried
* the missing mobile story with it, which is what makes this the DS's.
*
* THE RULING IS INLINE EXPAND, not push-and-back (user, 2026-09-03). iOS
* Files and Dropbox arrived at one-level-at-a-time independently and differ
* only on the descent; push discards the very thing this organism exists for
* — a parent that stays put while you look at its child — and leaves a
* generic file list any component could render. Inline expand keeps the idea
* and moves it from two axes onto one.
*
* CAPPED AT THREE LEVELS, then it pushes: a deep bucket path indents until
* the name has no room. Past the cap the list re-bases on a deeper folder and
* the back control NAMES the parent it returns to — a bare chevron does not
* say where it goes.
*
* This is a different TREE, not the same tree restyled, which is why it forks
* in JS on a media query rather than in the stylesheet. The breakpoint is
* `md` (768) — the one `ContentFilters` already uses, so a page has one
* responsive story and not two. */
const stack = useMediaQuery('(max-width: 767px)')
/* one band for the whole browser rather than one per column: a drag that starts in a column and
* runs into the next is a drag the user meant */
const marquee = useMarquee({
enabled: !!onSelectKeys,
onSelect: (keys, additive) => onSelectKeys?.(keys, additive),
})
const isPicked = (key) => selectedKeys?.has(key)
/* THE DEEPEST COLUMN STAYS IN VIEW (user 2026-09-23: arrowing onto a file left the preview
* clipped under the frame's right edge). Whenever the trail or the pick changes, the strip scrolls
* to its end — the newest column, or the preview, is always the one you just reached. */
useEffect(() => {
const box = marquee.ref.current
if (box && box.scrollWidth > box.clientWidth) box.scrollTo({ left: box.scrollWidth, behavior: 'smooth' })
}, [prefix, picked?.key, selectedKeys?.size]) // eslint-disable-line react-hooks/exhaustive-deps
if (stack) {
/* THE CURRENT LEVEL IS THE LIST (StackModeChromeAndAncestors, kol-r2b2
* 2026-09-04). `base` is where the consumer navigated to and depth restarts
* there; nothing above it is ever a row. The back control is the only place
* an ancestor appears, and it NAMES the one it returns to. */
const base = prefix
const parent = levels.length > 1 ? levels[levels.length - 2] : null
/* The grid is FLAT — a tile has nowhere to put a child list, so expansion
* is not offered there and the list is one level, as both references draw
* it. */
const rows = stackRows(objects, base, stackView === 'grid' ? () => false : (path) => expanded.has(path), partition)
const metaOf = (o) => [o.size != null && formatSize(o.size), formatDate(o.uploaded)].filter(Boolean).join(' · ')
return (
{parent != null && (
onPrefix(parent)}
className="kol-column-browser-back flex items-center gap-2 px-4 py-3 border-b text-fg-default"
style={{ borderColor: 'var(--kol-oq-08)' }}
>
{parent === '' ? 'All files' : parent.replace(/\/$/, '').split('/').pop()}
)}
{stackView === 'grid' ? (
/* THE GRID (item 14). Flat — one level at a time, no inline expand:
a grid of tiles has nowhere to put a child list, which is why both
references drop disclosure in this view and navigate by tap. */
{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 */
{
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)) })
}}
>
{isFolder
?
{isFolder ? r.name.replace(/\/$/, '') : (o.displayKey ?? o.key)}
{/* counts for a folder, size for a file — never dates (§2) */}
{isFolder ? folderMeta?.(r.level + r.name, 'grid') : (o.size != null ? formatSize(o.size) : '')}
)
})}
) : (
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' ? (
toggleExpanded(r.key) : undefined}
/* THE ROW'S OWN MENU. Only the 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)}
/>
) : (
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
* renders for Quick Look. */
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)) })
}}
/>
),
)}
)}
)
}
return (
{/* A CLICK ON THE BACKGROUND DESELECTS (user 2026-09-22) — the band's own closing click is
swallowed by the hook, so this only ever fires on a real click into empty space. */}
{ if (!e.target.closest('[data-marquee-key]')) { pick(null); onSelectKeys?.([], false) } }}>
{marquee.rect &&
}
{levels.map((level, k) => {
const { folders, files } = partition(objects.filter((o) => o.key.startsWith(level)), level)
const next = levels[k + 1]
const activeFolder = next ? next.slice(level.length) : null
const last = k === levels.length - 1 && !shown
const colKeys = [...folders.map((f) => level + f), ...files.map((o) => o.key)]
return (
onRowContextMenu?.(e, { type: 'level', path: level })}
onDragOver={(e) => {
const files = onDropFiles && isFileDrag(e)
/* `d.path`, never `level`: the caller may re-root the path it was handed (the media
* pages prefix every level with `/<bucket>/`), and moving to the raw level
* renamed files under a prefix nothing lists — they vanished (user 2026-09-23). */
const d = !isFileDrag(e) && dragFor?.(level)
if (!files && !d?.canDrop(d.path)) return
e.preventDefault()
e.currentTarget.dataset.dropOver = '1'
}}
/* cleared however the drag ends: a drop on a row stops propagation, so capture runs
* first; and leaving through a child fires on the child, not on the column */
onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) delete e.currentTarget.dataset.dropOver }}
onDropCapture={(e) => { delete e.currentTarget.dataset.dropOver }}
onDrop={(e) => {
if (onDropFiles && isFileDrag(e)) { e.preventDefault(); onDropFiles(e.dataTransfer.files, level); return }
const d = !isFileDrag(e) && dragFor?.(level)
if (!d?.canDrop(d.path)) return
e.preventDefault()
d.onDrop(d.path)
}}
>
{folders.map((f, i) => (
<Row
key={f}
size={rowSize}
icon={folderIcon?.(level + f) ?? 'folder'}
label={f.replace(/\/$/, '')}
markKey={level + f}
active={f === activeFolder || isPicked(level + f)}
/* a folder on the path is the TRAIL unless it is the deepest pick — the column after
* it is its own contents with nothing chosen, and no file is showing */
trail={f === activeFolder && !isPicked(level + f) && (!!shown || k < levels.length - 2)}
cursor={cursorActive && cursor.col === k && cursor.idx === i}
trailing={<Icon name="chevron-right" size={12} className={f === activeFolder && !shown && k === levels.length - 2 ? '' : 'text-oq-32'} />}
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) }}
/>
))}
{files.map((o, i) => (
<Row
key={o.key}
size={rowSize}
icon={COL_ICON[kindOf(o)] || 'file'}
label={o.displayKey ?? o.key}
markKey={o.key}
active={shown?.key === o.key || isPicked(o.key)}
cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
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) }}
/>
))}
{/* 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="flex-1 min-h-12"
onContextMenu={(e) => onRowContextMenu?.(e, { type: 'level', path: level })} />
)}
</ul>
<ResizeHandle axis="x" onDrag={resizeCol(k)} onEnd={endDrag} />
</Fragment>
)
})}
{selectedKeys?.size > 1 ? (
<>
<SelectionPreview keys={[...selectedKeys]} objects={objects} urlOf={urlOf} kindOf={kindOf} formatSize={formatSize} formatDate={formatDate} width={widthOf('preview')} />
<ResizeHandle axis="x" onDrag={resizeCol('preview')} onEnd={endDrag} />
</>
) : shown && (
<>
<Preview key={shown.key} o={shown} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} formatSize={formatSize} formatDate={formatDate} renderPreview={renderPreview} renderDetails={renderDetails} width={widthOf('preview')} />
<ResizeHandle axis="x" onDrag={resizeCol('preview')} onEnd={endDrag} />
</>
)}
</div>
{/* A FILL HEIGHT HAS NO GRABBER (user 2026-09-22). A CSS length says "take the room you
* are given"; dragging would fight it. A px height keeps its handle. */}
{typeof h !== 'string' && <ResizeHandle axis="y" onDrag={resizeH} onEnd={endDrag} />}
</div>
)
}
/* The preview column, for the media page's ROW view (user 2026-09-22 — Finder's "Show preview"):
* one preview, the same pane beside rows as beside columns. Not in the barrel. */
export { Preview, SelectionPreview }
/* SelectionPreview — the preview pane for MORE THAN ONE selected item (user 2026-09-23, Finder's:
* *"preview of 3 overlapping files, 2 and 3 slightly rotated behind 1 … the info fields should say
* how many files and calculated size"*). The pane kept describing one file while four were lit.
* The stack says "several"; the facts do the counting. Shared by the column and row panes.
*
* `keys` — the selected keys (folders end in `/`); `objects` — every object the view knows, for
* sizes, kinds and dates; `urlOf(o)` — an image's own picture. */
function SelectionPreview({ keys, objects, urlOf, kindOf = dsKindOf, formatSize = (n) => `${n} B`, formatDate = (d) => d, width }) {
const byKey = new Map(objects.map((o) => [o.key, o]))
const folders = keys.filter((k) => k.endsWith('/'))
const files = keys.filter((k) => !k.endsWith('/')).map((k) => byKey.get(k)).filter(Boolean)
const inFolders = objects.filter((o) => folders.some((f) => o.key.startsWith(f)))
const all = [...files, ...inFolders]
const bytes = all.reduce((n, o) => n + (o.size || 0), 0)
const dates = all.map((o) => o.uploaded).filter(Boolean).sort()
const range = dates.length ? (dates[0] === dates[dates.length - 1] ? formatDate(dates[0]) : `${formatDate(dates[0])} – ${formatDate(dates[dates.length - 1])}`) : '—'
const plural = (n, w) => `${n} ${w}${n === 1 ? '' : 's'}`
const kinds = [files.length && plural(files.length, 'document'), folders.length && plural(folders.length, 'folder')].filter(Boolean).join(', ')
const face = (k) => {
if (k.endsWith('/')) return <FileIcon glyph="folder" className="w-[46%]" />
const o = byKey.get(k)
if (o && isImage(o) && urlOf) return <img src={urlOf(o)} alt="" className="w-full h-full object-cover" />
const ext = k.split('.').pop()
return <FileIcon ext={ext} glyph={o ? KIND_GLYPH[kindOf(o)] : undefined} className="w-[46%]" />
}
const stack = keys.slice(0, 3)
return (
<div className="kol-column-browser-preview shrink-0 overflow-y-auto p-4 flex flex-col gap-4" style={{ width }}>
<div className="kol-selection-stack">
{stack.map((k, i) => (
<div key={k} className="kol-selection-stack-card" data-depth={i}>{face(k)}</div>
))}
</div>
<p className="kol-mono-12 text-fg-default">{plural(keys.length, 'item')}</p>
<dl className="flex flex-col gap-1">
{[['Kind', kinds], ['Size', formatSize(bytes)], ['Date', range]].map(([k, v]) => (
<div key={k} className="flex justify-between gap-4 kol-mono-12">
<dt className="text-fg-48">{k}</dt>
<dd className="text-fg-default text-right break-all">{v}</dd>
</div>
))}
</dl>
</div>
)
}