@kolkrabbi/kol-component 0.97.1 → 0.97.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.97.1",
+  "version": "0.97.3",
   "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/organisms/ColumnBrowser.jsx

@@ -35,6 +35,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {Function} onPrefix     (prefix) => void
  * @param {{files: object[], index: number}|null} quickLook   the open Quick Look, or null
  * @param {Function} onQuickLook  (quickLook|null) => void — space opens / closes, ↑/↓ step while open
+ * @param {Function} onPick       (file|null) => void — the picked file whenever it changes (a folder pick or an outside prefix change → null)
  * @param {Function} urlOf        (o) => string — the object's public URL for the preview image
  * @param {Function} kindOf       (o) => 'image' | 'video' | 'audio' | string
  * @param {Object}   kindLabel    kind → label shown when there is no visual preview
@@ -141,6 +142,7 @@ export default function ColumnBrowser({
   onPrefix = () => {},
   quickLook = null,
   onQuickLook,
+  onPick,
   urlOf,
   kindOf = defaultKindOf,
   kindLabel = DEFAULT_KIND_LABEL,
@@ -149,14 +151,11 @@ export default function ColumnBrowser({
   className = '',
 }) {
   const [picked, setPicked] = useState(null)
-  // Keyboard cursor: which column, which row. Clicks keep it in sync.
-  const [cursor, setCursor] = useState({ col: 0, idx: 0 })
-  /* 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)
-  const rootRef = useRef(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) }
+  useEffect(() => { if (picked) pick(null) }, [prefix]) // eslint-disable-line react-hooks/exhaustive-deps
   const levelsOf = (pfx) => {
     const out = ['']
     if (pfx) {
@@ -169,10 +168,31 @@ export default function ColumnBrowser({
     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)
+    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(() => { 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)
+  const rootRef = useRef(null)
+
   const land = (level, item) => {
     if (!item) return
-    if (item.type === 'folder') { setPicked(null); onPrefix(level + item.name) }
-    else setPicked(item.o)
+    if (item.type === 'folder') { pick(null); onPrefix(level + item.name) }
+    else pick(item.o)
   }
 
   const onKeyDown = (e) => {
@@ -191,6 +211,9 @@ export default function ColumnBrowser({
     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)))
+      /* 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') {
@@ -206,7 +229,7 @@ export default function ColumnBrowser({
       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 })
-      setPicked(null)
+      pick(null)
       onPrefix(lv[col])
     }
   }
@@ -228,7 +251,7 @@ export default function ColumnBrowser({
       do { idx += step } while (items[idx] && items[idx].type !== 'file')
       if (!items[idx]) return
       setCursor({ col, idx })
-      setPicked(items[idx].o)
+      pick(items[idx].o)
       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) })
     }
@@ -267,7 +290,7 @@ export default function ColumnBrowser({
                 active={f === activeFolder}
                 cursor={cursorActive && cursor.col === k && cursor.idx === i}
                 trailing={<Icon name="chevron-right" size={12} className="text-fg-32" />}
-                onClick={() => { setCursor({ col: k, idx: i }); setCursorActive(true); rootRef.current?.focus(); setPicked(null); onPrefix(level + f) }}
+                onClick={() => { setCursor({ col: k, idx: i }); setCursorActive(true); rootRef.current?.focus(); pick(null); onPrefix(level + f) }}
               />
             ))}
             {files.map((o, i) => (
@@ -278,7 +301,7 @@ export default function ColumnBrowser({
                 muted={shown?.key !== o.key}
                 active={shown?.key === o.key}
                 cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
-                onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); setPicked(o) }}
+                onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pick(o) }}
               />
             ))}
             {folders.length === 0 && files.length === 0 && (