@kolkrabbi/kol-component 0.118.3 → 0.119.0

package/package.json

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

@@ -98,15 +98,22 @@ const COL_ICON = { image: 'image', video: 'video', audio: 'file', playlist: 'vid
  * row keeps its bottom hairline (`only:`) — its last row is also its first, and a missing
  * hairline beside neighbours that show one reads as a defect; and ONE ink for folders and files
  * — the `bg-fg-04` fill alone marks selection ("why is folder full opacity but not files?").
- * `muted` stays a prop for other callers; the file rows no longer pass it. */
+ * `muted` stays a prop for other callers; the file rows no longer pass it.
+ * STATE CLASSES (ColumnBrowserSeams, kol-r2b2 2026-08-28): `is-selected` / `is-cursor` on the row,
+ * and the fill LIVES IN THE THEME now (kol-components-molecules.css) instead of a `bg-fg-04`
+ * utility — the only hook a consumer had for "selected" was that utility, and a restyle that
+ * changes it breaks every rule hanging off it silently (twice already in kol-r2b2). It also lets the
+ * theme say the user's ruling — "ONLY one selected state can exist, not TWO": the selected row in
+ * the deepest column that holds one is full strength, every column on the way there is the trail. */
 function Row({ icon, label, active, cursor = false, trailing, onClick, muted = false }) {
   return (
     <li
       /* Row metrics are the DS Table's (kol-components-organisms.css .kol-table-cell-*):
        * 12px 16px padding, mono 12, an oq-08 hairline between rows, none after the last. */
       /* `cursor` = the keyboard row, drawn with the hover fill so ↑/↓ always shows where you are. */
-      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 border-b last:border-b-0 only:border-b cursor-pointer transition-colors ${
-        active || cursor ? 'bg-fg-04 text-fg-default' : muted ? 'text-fg-48 hover:bg-fg-04' : 'text-fg-default hover:bg-fg-04'
+      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 border-b last:border-b-0 only:border-b cursor-pointer transition-colors${
+        active ? ' is-selected' : ''}${cursor ? ' is-cursor' : ''} ${
+        active || cursor || !muted ? 'text-fg-default' : 'text-fg-48'
       }`}
       style={{ borderColor: 'var(--kol-oq-08)' }}
       onClick={onClick}
@@ -223,6 +230,7 @@ export default function ColumnBrowser({
   columnWidth = 260,
   columnWidths,
   onColumnResize,
+  autoFocus = false,
   className = '',
 }) {
   /* height: controlled-or-uncontrolled like Slider; widths: organism-internal,
@@ -296,6 +304,10 @@ export default function ColumnBrowser({
    * read as a second selection. Arrows arm it; a click seeds it. */
   const [cursorActive, setCursorActive] = useState(false)
   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
+   * on `prefix`, so a bucket switch from the header (which takes focus) hands the keyboard back. */
+  useEffect(() => { if (autoFocus) rootRef.current?.focus() }, [autoFocus, prefix])
 
   const land = (level, item) => {
     if (!item) return

package/src/organisms/MediaLibraryPages.jsx

@@ -299,7 +299,7 @@ const profileOf = (objects, rawFiles, systemCount) => ({
 /* ══ BROWSE — folder / files ═══════════════════════════════════════════════ */
 export function MediaLibraryBrowse({
   client, title = 'MEDIA', bucket, onBucketChange, prefix: prefixProp, onPrefix, defaults, settings: settingsProp, onSettingsChange,
-  folderTree, headerActions, refreshKey, onOpen, className = '',
+  folderTree, headerActions, refreshKey, onOpen, autoFocus = false, className = '',
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -405,6 +405,7 @@ export function MediaLibraryBrowse({
         {folderView === 'columns' ? (
           <div ref={columnsRef} className="relative">
             <ColumnBrowser
+              autoFocus={autoFocus}
               className={appRoot ? 'is-root' : ''}
               height={settings.columnHeight}
               onHeightChange={(px) => setSettings({ ...settings, columnHeight: px })}
@@ -467,7 +468,7 @@ export function MediaLibraryBrowse({
 /* ══ LIBRARY — the content-filters wall ═══════════════════════════════════ */
 export function MediaLibraryLibrary({
   client, title = 'MEDIA', bucket, onBucketChange, prefix = '', defaults, settings: settingsProp, onSettingsChange,
-  headerActions, refreshKey, header = true, className = '',
+  headerActions, refreshKey, header = true, stats = true, className = '',
 }) {
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket
@@ -635,10 +636,14 @@ export function MediaLibraryLibrary({
         <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} />
       )}
 
-      <p className="kol-mono-12 text-fg-48">
-        {files.length !== rawFiles.length ? `${files.length} of ${rawFiles.length}` : rawFiles.length}{' '}{rawFiles.length === 1 ? 'file' : 'files'} · {formatSize(totalBytes)}
-        {systemCount > 0 && <span className="text-fg-32">{'  ·  '}{systemCount} system files hidden</span>}
-      </p>
+      {/* `stats={false}` (ColumnBrowserSeams, kol-r2b2 2026-08-28) — beside `header={false}`: a browse
+        * page stacked above this one already prints the folder-aware count ("it used to be a row") */}
+      {stats && (
+        <p className="kol-mono-12 text-fg-48">
+          {files.length !== rawFiles.length ? `${files.length} of ${rawFiles.length}` : rawFiles.length}{' '}{rawFiles.length === 1 ? 'file' : 'files'} · {formatSize(totalBytes)}
+          {systemCount > 0 && <span className="text-fg-32">{'  ·  '}{systemCount} system files hidden</span>}
+        </p>
+      )}
 
       <ContentFilters
         items={files}