@kolkrabbi/kol-component 0.97.0 → 0.97.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.97.0",
+  "version": "0.97.2",
   "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,8 +151,17 @@ export default function ColumnBrowser({
   className = '',
 }) {
   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) }
+  useEffect(() => { if (picked) pick(null) }, [prefix]) // eslint-disable-line react-hooks/exhaustive-deps
   // 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)
 
   const levelsOf = (pfx) => {
@@ -167,8 +178,8 @@ export default function ColumnBrowser({
   }
   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) => {
@@ -181,6 +192,7 @@ export default function ColumnBrowser({
     }
     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])
@@ -201,7 +213,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])
     }
   }
@@ -223,7 +235,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) })
     }
@@ -260,9 +272,9 @@ export default function ColumnBrowser({
                 icon="folder"
                 label={f.replace(/\/$/, '')}
                 active={f === activeFolder}
-                cursor={cursor.col === k && cursor.idx === i}
+                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 }); 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) => (
@@ -272,8 +284,8 @@ export default function ColumnBrowser({
                 label={o.displayKey ?? o.key}
                 muted={shown?.key !== o.key}
                 active={shown?.key === o.key}
-                cursor={cursor.col === k && cursor.idx === folders.length + i}
-                onClick={() => { setCursor({ col: k, idx: folders.length + i }); rootRef.current?.focus(); setPicked(o) }}
+                cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
+                onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pick(o) }}
               />
             ))}
             {folders.length === 0 && files.length === 0 && (