@kolkrabbi/kol-component 0.208.0 → 0.209.0

package/package.json

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

package/src/organisms/ColumnBrowser.jsx

@@ -57,6 +57,7 @@ import { GRAB_COLUMN } from '../utilities/motion.js'
  * @param {Function} kindOf       (o) => 'image' | 'video' | 'audio' | string
  * @param {Object}   kindLabel    kind → label shown when there is no visual preview
  * @param {Function} formatSize   (bytes) => string
+ * @param {Function} formatDate   (isoString) => string — the row/preview date, ISO date-only by default
  * @param {Function} partition    (objects, level) => { folders: string[], files: object[] }
  * @param {Function} renderPreview  (file) => ReactNode — replaces the preview column's media frame (the facts stay — Dimensions and Length are read off whatever <img> / <video> / <audio> the node loads); without it images render the organism's <img>, everything else the DS KindPreview
  * @param {number}   height         controlled height in px (omit for uncontrolled)
@@ -97,6 +98,54 @@ const defaultFormatSize = (bytes) => {
   if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
   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 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.
+ *
+ * @param {object[]} objects   the flat key space
+ * @param {string[]} openPath  the open levels, shallowest first
+ * @param {Function} partition (objects, level) => { folders, files }
+ * @returns {object[]} rows — `folder` | `file` | `empty`, each with its `depth`
+ */
+export function stackRows(objects, openPath, partition) {
+  const rows = []
+  const walk = (depth) => {
+    const level = openPath[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)
+    })
+    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)
+  return rows
+}
+
+/* A ROW SHOWS A DATE, NOT A TIMESTAMP. `2026-06-19T02:00:14.629Z` is storage
+ * answering "when" in its own voice, and it shipped into the stack meta line
+ * because the value arrives as a string and a string renders (D2, kol-r2b2
+ * 2026-09-04). A seam beside `formatSize` for the same reason that one is a
+ * seam: how a date reads is the consumer's call, not the DS's. The default is
+ * ISO-8601 date-only — unambiguous everywhere, which no locale format is.
+ * Anything unparseable comes through verbatim rather than as `Invalid Date`. */
+const defaultFormatDate = (v) => {
+  if (!v) return ''
+  const d = new Date(v)
+  return Number.isNaN(d.getTime()) ? String(v) : d.toISOString().slice(0, 10)
+}
 /* kol-r2b2's partition: the next path segment is a folder, the rest are files */
 const defaultPartition = (objects, prefix) => {
   const folderSet = new Set()
@@ -227,7 +276,7 @@ function Row({
   )
 }
 
-function Preview({ o, urlOf, kindOf, kindLabel, formatSize, renderPreview, width }) {
+function Preview({ o, urlOf, kindOf, kindLabel, formatSize, formatDate, renderPreview, width }) {
   // Pixel size and length come from the loaded media itself — the bucket stores
   // none. `{ w, h }` off an <img> load, `{ w, h, len }` off a <video>'s and
   // `{ len }` off an <audio>'s loadedmetadata (ColumnBrowserMediaFacts, kol-r2b2
@@ -243,7 +292,7 @@ function Preview({ o, urlOf, kindOf, kindLabel, formatSize, renderPreview, width
     ['Size', formatSize(o.size)],
     ...(sized ? [['Dimensions', dims?.w ? `${dims.w} × ${dims.h} px` : '…']] : []),
     ...(timed ? [['Length', dims?.len != null ? formatLength(dims.len) : '…']] : []),
-    ['Date', o.uploaded ? new Date(o.uploaded).toISOString().slice(0, 10) : '—'],
+    ['Date', formatDate(o.uploaded) || '—'],
   ]
   return (
     <div className="kol-column-browser-preview shrink-0 overflow-y-auto p-4 flex flex-col gap-4" style={{ width }}>
@@ -343,6 +392,7 @@ export default function ColumnBrowser({
   kindOf = defaultKindOf,
   kindLabel = DEFAULT_KIND_LABEL,
   formatSize = defaultFormatSize,
+  formatDate = defaultFormatDate,
   partition = defaultPartition,
   renderPreview,
   height,
@@ -563,23 +613,9 @@ export default function ColumnBrowser({
 
     /* 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 = []
-    openPath.forEach((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,
-        })
-        /* the open folder's own children are pushed by the next iteration —
-         * nothing recursive here, the loop IS the path */
-      })
-      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 })
-    })
+    const rows = stackRows(objects, openPath, partition)
 
-    const metaOf = (o) => [o.size != null && formatSize(o.size), o.uploaded].filter(Boolean).join(' · ')
+    const metaOf = (o) => [o.size != null && formatSize(o.size), formatDate(o.uploaded)].filter(Boolean).join(' · ')
 
     return (
       <div
@@ -741,7 +777,7 @@ export default function ColumnBrowser({
       })}
       {shown && (
         <>
-          <Preview key={shown.key} o={shown} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} formatSize={formatSize} renderPreview={renderPreview} width={widthOf('preview')} />
+          <Preview key={shown.key} o={shown} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} formatSize={formatSize} formatDate={formatDate} renderPreview={renderPreview} width={widthOf('preview')} />
           <ResizeHandle axis="x" onDrag={resizeCol('preview')} onEnd={endDrag} />
         </>
       )}

package/src/organisms/MediaLibraryPages.jsx

@@ -314,6 +314,17 @@ const profileOf = (objects, rawFiles, systemCount) => ({
 export function MediaLibraryBrowse({
   client, title = 'MEDIA', bucket, onBucketChange, prefix: prefixProp, onPrefix, defaults, settings: settingsProp, onSettingsChange,
   folderTree, headerActions, refreshKey, onOpen, autoFocus = false, settingsFooter, className = '',
+  /* PASS-THROUGHS TO `ColumnBrowser`. A documented prop this page does not
+   * forward is a prop no consumer of the PAGE can reach, which makes the seam
+   * fictional — `thumbnailFor` and `folderMeta` shipped, were announced, and
+   * rendered as if they never existed because this signature ended before them
+   * (ColumnBrowserMobileViews items 10 + 13, kol-r2b2 2026-09-04). Second time
+   * this shape bit: `SettingsPanel` documented a `footer` slot this file
+   * hardcoded past. The rule the sweep leaves behind — WHEN A PROP IS ADDED TO
+   * `ColumnBrowser`, IT IS ADDED HERE IN THE SAME EDIT, unless the page holds a
+   * real opinion about it (it owns `height`, the widths and `partition`, so
+   * those are deliberately absent from this list). */
+  thumbnailFor, folderMeta, formatDate, stackView,
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -483,6 +494,10 @@ export function MediaLibraryBrowse({
               kindOf={kindOf}
               kindLabel={KIND_LABEL}
               formatSize={formatSize}
+              formatDate={formatDate}
+              thumbnailFor={thumbnailFor}
+              folderMeta={folderMeta}
+              stackView={stackView}
               renderPreview={(o) => {
                 const real = { ...o, key: o.key.slice(VROOT.length) }
                 if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} />