@kolkrabbi/kol-component 0.97.0 → 0.97.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.97.0",
+  "version": "0.97.1",
   "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

@@ -151,6 +151,10 @@ export default function ColumnBrowser({
   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)
 
   const levelsOf = (pfx) => {
@@ -181,6 +185,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])
@@ -260,9 +265,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(); setPicked(null); onPrefix(level + f) }}
               />
             ))}
             {files.map((o, i) => (
@@ -272,8 +277,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(); setPicked(o) }}
               />
             ))}
             {folders.length === 0 && files.length === 0 && (