@kolkrabbi/kol-component 0.209.0 → 0.211.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.209.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/molecules/ContentCard.jsx

@@ -244,6 +244,23 @@ export default function ContentCard({
    * One prop is not done until every derivation reads it. */
   const framed = box.border != null || (bg ?? box.bg) != null
 
+  /* NO COVER IS NOT A MISSING COVER (content-card-needs-no-cover,
+   * kol-client-olina 2026-09-04). `ContentMedia` turns absent children into an
+   * `AssetPlaceholder` on purpose — a card whose image failed must not collapse
+   * into a text blob, and that dashed MISSING plate is the honest answer for a
+   * media library. It is the wrong answer for a markdown note in a database
+   * row, which has no picture and never will: their `/notes` page drew a wall
+   * of dashed frames with nothing misconfigured.
+   *
+   * The card cannot tell the two apart — only the consumer knows whether a
+   * cover is owed — so it is declared, and `media={false}` declares it: no
+   * media slot at all, text takes the full width. `false` rather than a new
+   * prop because it is React's own idiom for "render nothing", and because
+   * `media={false}` today renders an EMPTY framed box, a state nobody can want.
+   * `media={null}` and an omitted `media` keep the placeholder, so every
+   * existing consumer is untouched. */
+  const noMedia = media === false
+
   const textNode = hasPlate ? (
     <div
       className="kol-card-plate relative"
@@ -251,7 +268,7 @@ export default function ContentCard({
         '--kol-plate-pad': padding,
         '--kol-plate-pad-md': box.padMd,
         padding,
-        marginTop: box.layout === 'stack' ? box.mediaGap : undefined,
+        marginTop: box.layout === 'stack' && !noMedia ? box.mediaGap : undefined,
         borderTop: (plateRule ?? box.plateTop) ? '1px solid var(--kol-fg-04)' : undefined,
         background: box.layout === 'drawer' ? 'var(--kol-surface-inverse)' : box.plateBg,
         color: box.layout === 'drawer' ? 'var(--kol-fg-inverse)' : undefined,
@@ -311,11 +328,15 @@ export default function ContentCard({
     box.layout === 'stack' ? (
       <>
         {heroHeader}
-        <div className="relative">
-          <ContentMedia ratio={r} {...mediaProps}>{media}</ContentMedia>
-          {controlNode}
-          {controlStartNode}
-        </div>
+        {/* the frame-corner controls go with the frame — `.kol-frame-control`
+          * positions against the media box, and there is none */}
+        {!noMedia && (
+          <div className="relative">
+            <ContentMedia ratio={r} {...mediaProps}>{media}</ContentMedia>
+            {controlNode}
+            {controlStartNode}
+          </div>
+        )}
         {textNode}
       </>
     ) : box.layout === 'fill-card' ? (
@@ -326,6 +347,7 @@ export default function ContentCard({
           * card gave each half 174 and the prose 126, and one module's specs
           * ran 1177px tall. The 50% half is a `md:` class now, not an inline
           * style — an inline flex-basis has no breakpoint. */}
+        {!noMedia && (
         <div
           className={`flex-1 min-w-0 min-h-0 relative overflow-hidden ${expanded ? 'max-md:flex-none max-md:aspect-[var(--kol-card-ratio)] md:flex-[0_0_50%]' : ''}`}
           style={{ ...(expanded ? { '--kol-card-ratio': r ?? '3 / 2' } : null), ...(doFlip ? { perspective: '1000px' } : null) }}
@@ -344,6 +366,7 @@ export default function ContentCard({
           {controlNode}
           {controlStartNode}
         </div>
+        )}
         {expanded ? (
           <div
             className="flex flex-1 flex-col justify-between overflow-auto"
@@ -355,11 +378,13 @@ export default function ContentCard({
       </>
     ) : box.layout === 'drawer' ? (
       <>
-        <div className="relative h-full">
-          <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
-          {controlNode}
-          {controlStartNode}
-        </div>
+        {!noMedia && (
+          <div className="relative h-full">
+            <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
+            {controlNode}
+            {controlStartNode}
+          </div>
+        )}
         {/* the plate is INVERSE and hidden until hover — `kol-card-drawer` owns
           * the reveal so the transition sits with the rest of the chrome */}
         {textNode && <div className="kol-card-drawer">{textNode}</div>}
@@ -371,11 +396,13 @@ export default function ContentCard({
        * choreography (kol-theme `.kol-card.has-reveal`), the consumer owns the
        * node (what it says and which face it wears are never the family's). */
       <>
-        <div className="kol-card-canvas-media absolute" style={{ inset: 0 }}>
-          <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
-          {controlNode}
-          {controlStartNode}
-        </div>
+        {!noMedia && (
+          <div className="kol-card-canvas-media absolute" style={{ inset: 0 }}>
+            <ContentMedia ratio={null} {...mediaProps}>{media}</ContentMedia>
+            {controlNode}
+            {controlStartNode}
+          </div>
+        )}
         {textNode}
         {reveal != null && (
           <div className="kol-card-reveal absolute inset-0 flex items-center justify-center p-8 pointer-events-none" style={{ zIndex: 2 }}>{reveal}</div>

package/src/molecules/ContentRow.jsx

@@ -14,7 +14,8 @@ import ContentText from './ContentText.jsx'
  *                             (`default` is an alias of `file`). `roster` is the pickable
  *                             row: filled tile, no border or divider, a FIXED 56px height the
  *                             content fills, a 40px square thumb and two truncated lines.
- * @param {ReactNode} media     thumb content (omit → placeholder)
+ * @param {ReactNode|false} media  thumb content (omit → placeholder; `false` → no thumb at all — the
+ *                             content HAS no cover, as against one that failed to load)
  * @param {number|'fill'} thumb  thumb edge px — overrides the ruled default; 0 hides; `'fill'` = a square
  *                             the height of the row's content, whatever the rung (WorkListingRowsAndFilters)
  * @param {string}    ratio     thumb aspect-ratio — overrides the ruled default.
@@ -175,7 +176,13 @@ export default function ContentRow({
   const aliased = ALIAS[variantProp] ?? variantProp
   const variant = aliased.startsWith('showcase') && layout ? LAYOUT_KEY[layout] ?? aliased : aliased
   const box = BOX[variant] ?? BOX.file
-  const thumbPx = thumb ?? box.thumb
+  /* `media={false}` — NO COVER, not a missing one (content-card-needs-no-cover,
+   * kol-client-olina 2026-09-04). The row could already hide its thumb with
+   * `thumb={0}`, but that is a SIZE answering a question about MEANING, and a
+   * consumer listing coverless documents should not have to say it two
+   * different ways on the card and the row. `media={false}` reads the same in
+   * both; `thumb` still wins when it is passed explicitly. */
+  const thumbPx = thumb ?? (media === false ? 0 : box.thumb)
   const padY = (paddingY != null ? `${paddingY}px` : String(box.pad)).trim().split(/\s+/)[0]
 
   /* The md: STEP is a custom property, not a Tailwind variant. Tailwind cannot

package/src/molecules/ContentText.jsx

@@ -214,6 +214,21 @@ const GAPS = {
  * because ContentText is exported and a consumer can drive it directly. */
 const ALIAS = { default: 'file', print: 'catalog', work: 'showcase', typeface: 'showcaseCanvas' }
 
+/* dev-only, and warns ONCE per offending prop — a card family renders these by
+ * the hundred in a list and a per-render warning would bury the first one. */
+const warned = new Set()
+function warnUnknownSlots(unknown) {
+  for (const key of Object.keys(unknown)) {
+    if (warned.has(key)) continue
+    warned.add(key)
+    console.warn(
+      `ContentText: "${key}" is not a text slot and was ignored. `
+      + 'Slots: title · body · eyebrow (kicker) · detail · date · size · meta · tags, '
+      + 'each with a matching *Class. This warning is dev-only.',
+    )
+  }
+}
+
 export default function ContentText({
   variant: variantProp = 'file',
   form = 'card',
@@ -222,7 +237,16 @@ export default function ContentText({
   titleClass, bodyClass, eyebrowClass, kickerClass, detailClass, dateClass, sizeClass, metaClass, tagsClass,
   text,
   className = '',
+  ...unknown
 }) {
+  /* AN UNKNOWN SLOT SAYS SO (content-card-needs-no-cover aside, kol-client-olina
+   * 2026-09-04). They passed `summary`, every card rendered EMPTY, and nothing
+   * — build, lint or console — said a word; it cost an hour. A card's text
+   * slots are a closed vocabulary and a typo in one is indistinguishable from
+   * missing data, which is the worst kind of silent failure: the page looks
+   * built and is blank. Dev only, and it names the vocabulary rather than just
+   * the mistake, because "summary is not a slot" does not tell you `body` is. */
+  if (import.meta.env.DEV) warnUnknownSlots(unknown)
   /* `kicker` / `kickerClass` = aliases of `eyebrow` / `eyebrowClass` (2026-08-27) */
   eyebrow = eyebrow ?? kicker
   eyebrowClass = eyebrowClass ?? kickerClass

package/src/molecules/KindPreview.jsx

@@ -28,6 +28,11 @@ import DocPage from './DocPage.jsx'
  * `<img>` so it can read the dimensions). Text fetches cap at `textLimit`.
  *
  * @param {object}   o          the object — `{ key, contentType?, displayKey?, segmentCount? }`
+ * @param {string}   text       content ALREADY IN HAND — skips the fetch and joins the same render
+ *                              path. For a source with no file behind it (a database row). Pass
+ *                              `kind` with it: there is no extension to classify by
+ * @param {string}   kind       classification override — `markdown` · `json` · `yaml` · `code` ·
+ *                              `text` · `image` · `video` · `audio`. Wins over `kindOf(o)`
  * @param {Function} urlOf      (o) => string — the object's public URL (default: `o.url`)
  * @param {string}   poster     a poster URL for HLS (the sibling image)
  * @param {Function} kindOf · extOf   classification seams (defaults: the DS mediaKinds)
@@ -63,13 +68,38 @@ function useTextContent(url, enabled, limit) {
   return { ...result, loading: enabled && result.url !== url }
 }
 
-export default function KindPreview({ o, urlOf = (x) => x.url, poster, kindOf = defaultKindOf, extOf = defaultExtOf, kindLabel = KIND_LABEL, textLimit = TEXT_LIMIT }) {
-  const kind = kindOf(o)
+export default function KindPreview({ o, text: textProp, kind: kindProp, urlOf = (x) => x.url, poster, kindOf = defaultKindOf, extOf = defaultExtOf, kindLabel = KIND_LABEL, textLimit = TEXT_LIMIT }) {
+  /* CONTENT IN HAND, OR A URL TO FETCH (content-card-needs-no-cover,
+   * kol-client-olina 2026-09-04; shape ruled by kol-r2b2, whose component this
+   * is). A markdown note in a D1 row has no file and no URL behind it, so the
+   * fetch has nothing to pull — but the RENDER path is the one this component
+   * already owns, and a second previewer in the estate is what the lobby exists
+   * to prevent.
+   *
+   * `text` sits BESIDE `o`, not inside it: `o` is the media object — key, size,
+   * contentType, uploaded — and that shape is what `kindOf`, `posterFor` and
+   * the resolution-set grouping all read. Prose inside it would make the object
+   * mean two things.
+   *
+   * `kind` is not optional sugar. Classification reads the EXTENSION off the
+   * key, and a database row has no filename, so `text` alone lands on `other`
+   * and renders the right content as the wrong thing — worse than the
+   * placeholder it replaces. The two ship together or the seam half-works for
+   * the only caller that asked. Precedent: `urlOf`, `kindOf`, `kindLabel` and
+   * `partition` are already caller-supplied for the same reason — the DS does
+   * not decide what a consumer's object IS. */
+  const kind = kindProp ?? kindOf(o)
   const url = urlOf(o)
   const ext = extOf(o.key)
   const name = o.displayKey ?? o.key
   const isText = kind === 'text' || kind === 'code' || kind === 'markdown' || kind === 'json' || kind === 'yaml'
-  const { loading, text, error, truncated } = useTextContent(url, isText, textLimit)
+  const fetched = useTextContent(url, isText && textProp == null, textLimit)
+  /* content in hand is never loading and never errors — there is nothing to
+   * wait for. It still honours `textLimit`, so one long note cannot outgrow a
+   * tile the way a fetched one cannot. */
+  const { loading, text, error, truncated } = textProp != null
+    ? { loading: false, error: null, text: String(textProp).slice(0, textLimit), truncated: String(textProp).length > textLimit }
+    : fetched
 
   if (kind === 'playlist') {
     return (

package/src/organisms/ColumnBrowser.jsx

@@ -73,6 +73,10 @@ import { GRAB_COLUMN } from '../utilities/motion.js'
  * @param {string}   className    extra classes on the browser
  *
  * @param {Function} thumbnailFor  (o) => node — the 44px tile's content below the breakpoint; null falls back to the kind glyph. WHERE a thumbnail comes from is the consumer's: R2 and B2 serve originals, so a 44px tile can mean a 2 MB download
+ * NOTE, both seams: the key/prefix they receive is the one the browser was GIVEN, verbatim. A
+ * consumer that mounts a virtual root above real storage (multi-bucket browse hands these
+ * `KOL-R2B2/<label>/…`) must strip its own prefix before it can look anything up or build a URL —
+ * the browser has no idea which part of a path is yours (kol-r2b2 2026-09-04).
  * @param {Function} folderMeta  (prefix, view) => string — a folder's own meta line (`date · N items` in list, `N items` in grid). A SEAM, not a computation: counting by prefix is O(n) per folder, and a consumer that already holds a folder tree answers it for free
  * @param {'list'|'grid'} stackView  the mobile view below the breakpoint (default 'list'); `grid` is 3-up tiles, flat — a grid has nowhere to put an inline child list
  *
@@ -99,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
 }
 
@@ -182,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…
@@ -246,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">
@@ -461,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) {
@@ -495,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
@@ -603,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
@@ -693,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" />