@kolkrabbi/kol-component 0.210.0 → 0.211.0

package/package.json

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

package/src/organisms/ColumnBrowser.jsx

@@ -103,38 +103,58 @@ const defaultFormatSize = (bytes) => {
   return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
 }
 
-/* THE STACK'S ROW ORDER — walked, not iterated, and lifted out of the component
- * so it is reachable by a check (the defect below is invisible to every
- * structural assertion: the rows are all present and each carries the right
- * `depth`, they are merely in the wrong ORDER).
+/* THE STACK'S ROW LIST — the CURRENT LEVEL'S CONTENTS, and nothing above it.
  *
- * The open folder's children have to land DIRECTLY under its own row. That
- * adjacency IS inline expand, and inline expand is the whole ruling. A flat
- * loop over `openPath` appends each level after the one before it, so an open
- * folder's children surfaced below its last SIBLING and below that level's
- * files (D1, kol-r2b2 2026-09-04) — which read as an indent bug rather than a
- * sequence bug, and is how a comment claiming "the loop IS the path" survived.
+ * Lifted out of the component so the order is reachable by a check: the two
+ * defects this function has had were both invisible to a structural assertion —
+ * every row present, every `depth` right, and the LIST still wrong.
  *
- * @param {object[]} objects   the flat key space
- * @param {string[]} openPath  the open levels, shallowest first
- * @param {Function} partition (objects, level) => { folders, files }
+ * D1 (2026-09-04) was order: a flat loop over the open path appended each level
+ * after the whole level above it, so an open folder's children landed after its
+ * last sibling and after that level's files. The walk is recursive now and a
+ * subtree is contiguous under its parent.
+ *
+ * `StackModeChromeAndAncestors` (kol-r2b2, 2026-09-04) was MEMBERSHIP, and the
+ * correction is theirs against their own spec: the browser walked from the root
+ * down the open path, so every ANCESTOR of the current level rendered as a row —
+ * at a bucket root, two rows and 120px of a 844px viewport restating the
+ * breadcrumb directly above them, with rows indented to 56px because depth
+ * counted from the root.
+ *
+ * The original spec held two rules that fight: "ancestors are reached by back,
+ * not by a scroll nobody can see" and "inline expand, capped at three levels of
+ * indent" — back means they are off screen, an indent cap implies they are on
+ * it. The resolution is that NAVIGATING and EXPANDING were fused into one piece
+ * of state and had to come apart:
+ *
+ *   the ROW opens the folder      → `onPrefix`, and the list re-bases to it
+ *   the CHEVRON expands in place  → local state, children spliced under it
+ *
+ * which is what item 11 already said the two targets were for. So `base` is the
+ * level the consumer navigated to, depth restarts there, and nothing above it is
+ * ever a row.
+ *
+ * @param {object[]} objects     the flat key space
+ * @param {string}   base        the current level — its contents are the list
+ * @param {Function} isExpanded  (folderPath) => boolean; `() => false` is a flat list
+ * @param {Function} partition   (objects, level) => { folders, files }
+ * @param {number}   cap         deepest expansion below `base` (default INDENT_CAP)
  * @returns {object[]} rows — `folder` | `file` | `empty`, each with its `depth`
  */
-export function stackRows(objects, openPath, partition) {
+export function stackRows(objects, base, isExpanded, partition, cap = INDENT_CAP) {
   const rows = []
-  const walk = (depth) => {
-    const level = openPath[depth]
+  const walk = (level, depth) => {
     const { folders, files } = partition(objects.filter((o) => o.key.startsWith(level)), level)
-    const openFolder = openPath[depth + 1]?.slice(level.length) ?? null
     folders.forEach((f) => {
-      const isOpen = f === openFolder
-      rows.push({ kind: 'folder', key: level + f, level, name: f, depth, open: isOpen })
-      if (isOpen) walk(depth + 1)
+      const path = level + f
+      const open = depth < cap && isExpanded(path)
+      rows.push({ kind: 'folder', key: path, level, name: f, depth, open })
+      if (open) walk(path, depth + 1)
     })
     files.forEach((o) => rows.push({ kind: 'file', key: o.key, o, depth, level }))
     if (!folders.length && !files.length) rows.push({ kind: 'empty', key: level + '·empty', depth })
   }
-  walk(0)
+  walk(base, 0)
   return rows
 }
 
@@ -186,11 +206,17 @@ const COL_ICON = { image: 'image', video: 'video', audio: 'file', playlist: 'vid
  * the deepest column that holds one is full strength, every column on the way there is the trail. */
 /* `indent` and `meta` serve the STACK mode and are inert without it: the
  * columns pass neither, so a desktop row is byte-identical to what it was. */
-/* Three levels of indent, then the list re-bases and the back control takes
- * over — the user's cap (ColumnBrowserStackMode, 2026-09-03): a deep bucket
- * path indents until the name has no room. */
+/* Three levels of inline expansion below the current level, then the chevron
+ * stops expanding — the user's cap (ColumnBrowserStackMode, 2026-09-03): a deep
+ * path indents until the name has no room. Past it the ROW is the way down; it
+ * re-bases the list and the back control names what it left. */
 const INDENT_CAP = 3
 
+/* The four-zone row's icon/thumbnail box. ONE constant because the glyph that
+ * stands in for a missing thumbnail is sized off it — two numbers here is how
+ * the box and its contents drifted apart in the first place. */
+const ZONE_BOX = 44
+
 /* THE FOUR-ZONE ROW (ColumnBrowserMobileViews §1, kol-r2b2 2026-09-03) is the
  * `zones` form. The first stack build inherited the DS Table's `12px 16px` with
  * a 14px glyph in a 20px slot, and the user's read was *"kinda underwhelming…
@@ -250,13 +276,23 @@ function Row({
         <span aria-hidden="true" className="shrink-0" style={{ width: 14 }} />
       ))}
 
-      {/* ZONE 2 — the icon box, or the thumbnail the consumer supplies */}
+      {/* ZONE 2 — the icon box, or the thumbnail the consumer supplies.
+          THE GLYPH FILLS THE BOX (StackModeChromeAndAncestors §3, kol-r2b2
+          2026-09-04). It sat at 20 in a 44 box while a file's thumbnail filled
+          its 44, so the icon column read ragged — thumbnails filling their
+          squares, folder marks floating in the middle of theirs. The grid had
+          it right already (tile-box 103, thumb 103); this is the list catching
+          up, and it is what makes the column read as ONE RAIL.
+          Not a glyph-ladder rung and not a contradiction of one: SOLO pairs
+          12/16/20/24 with the CONTROL squares 22/26/32/40. This is not a
+          control square — it is a MEDIA slot that a glyph stands in for when
+          the consumer has no thumbnail, which is why an <img> fills it. */}
       {zones ? (
         <span
           className="kol-column-browser-thumb shrink-0 inline-flex items-center justify-center overflow-hidden"
-          style={{ width: 44, height: 44, borderRadius: 5, background: thumb ? 'var(--kol-oq-04)' : 'transparent' }}
+          style={{ width: ZONE_BOX, height: ZONE_BOX, borderRadius: 5, background: thumb ? 'var(--kol-oq-04)' : 'transparent' }}
         >
-          {thumb ?? <Icon name={icon} size={20} className="text-fg-48" />}
+          {thumb ?? <Icon name={icon} size={ZONE_BOX} className="text-fg-48" />}
         </span>
       ) : (
         <span className="w-5 shrink-0 flex items-center justify-center text-fg-48">
@@ -465,6 +501,7 @@ export default function ColumnBrowser({
   }
   const pickedByCollapse = useRef(false)
   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) {
@@ -499,6 +536,19 @@ export default function ColumnBrowser({
    * 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
@@ -607,29 +657,33 @@ export default function ColumnBrowser({
   const stack = useMediaQuery('(max-width: 767px)')
 
   if (stack) {
-    /* Re-base so the deepest open level is at most INDENT_CAP below the base:
-     * everything above scrolls out of the list and is reached by the back
-     * control instead. */
-    const baseIdx = Math.max(0, levels.length - 1 - INDENT_CAP)
-    const base = levels[baseIdx]
-    const parent = baseIdx > 0 ? levels[baseIdx - 1] : null
-    const openPath = levels.slice(baseIdx)
+    /* 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
 
-    /* One flat row list, walked down the open path: each level's items, with
-     * the open folder's children spliced in directly under it. */
-    const rows = stackRows(objects, openPath, partition)
+    /* 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 (
       <div
-        className={`kol-column-browser kol-column-browser--stack flex flex-col border rounded ${className}`.trim()}
+        /* NO FRAME BELOW `md` (StackModeChromeAndAncestors §2). On desktop this
+           is a PANE — a thing with edges sitting in a page — so it is bordered
+           and rounded. In stack mode it IS the page's content: rows run to the
+           page's own padding and the only line is the divider between them.
+           Neither reference frames it. */
+        className={`kol-column-browser kol-column-browser--stack flex flex-col ${className}`.trim()}
         /* THE VIEWPORT IS THE HEIGHT (item 4). `height` is a value someone
          * dragged on a desktop; applied literally to a phone it painted a
          * black void the length of the viewport under two near-empty columns.
          * A desktop drag is not a phone measurement, so below the breakpoint
          * the stored one is ignored outright rather than clamped. */
-        style={{ borderColor: 'var(--kol-oq-08)' }}
       >
         {parent != null && (
           <button
@@ -697,7 +751,10 @@ export default function ColumnBrowser({
                  * in place, the ROW opens the folder. One control doing both is
                  * what left no way to peek without leaving where you are. */
                 disclosed={r.open}
-                onDisclose={() => onPrefix(r.open ? r.level : r.level + r.name)}
+                /* the chevron expands where it stands and does NOT move the
+                 * 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}
                 onClick={() => onPrefix(r.level + r.name)}
               />
             ) : (

package/src/organisms/MediaLibraryPages.jsx

@@ -285,14 +285,31 @@ function MediaSettings({ bucketMeta, settings, onChange, onReset, onClose, profi
   )
 }
 
-/* ── the header — bucket Dropdown · lock / the app's actions · settings ──── */
+/* ── the header — bucket Dropdown · lock / the app's actions · settings ────
+ *
+ * THE ROW HAS TO GIVE AT 390 (StackModeChromeAndAncestors §4, kol-r2b2
+ * 2026-09-04). The title was `white-space: normal` in a box the fixed `w-48`
+ * dropdown had squeezed to 48px, so `KOL-R2B2` wrapped MID-TOKEN into two
+ * 36px lines — 72px of header spent breaking a word in half. Neither reference
+ * wraps a title.
+ *
+ * The dropdown's 192px was the actual cost: 192 of 390 before the title, the
+ * lock and the gear have had any. It keeps that width from `md` up, where the
+ * room exists, and shrinks below it. The title never wraps — it takes the room
+ * left and ellipsises, which is honest where a mid-token break is not.
+ *
+ * `headerActions` is a REAL slot and it is narrow here: at 390 the row holds
+ * the dropdown, the gear, and about ONE consumer icon. kol-r2b2 added a second
+ * 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 }) {
   const options = buckets.length ? [{ value: 'all', label: `${title} · all` }, ...buckets.map((b) => ({ value: b.id, label: b.label }))] : []
   return (
     <header className="flex items-baseline justify-between gap-4">
-      <h1 className="kol-sans-display-03">{title}</h1>
-      <div className="flex items-center gap-2">
-        {options.length > 0 && <Dropdown className="w-48" value={appRoot ? 'all' : bucketId} onChange={onBucket} options={options} />}
+      <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}
         {!writable && bucketMeta.id && (
           <IconFrame name="lock" variant="primary" size="sm" title={`${bucketMeta.label} is read-only here`} aria-label="Read-only" />