@kolkrabbi/kol-component 0.317.3 → 0.317.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.3",
+  "version": "0.317.4",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.53.3"
+    "@kolkrabbi/kol-icons": "^0.53.5"
   },
   "files": [
     "src",

package/src/molecules/TabsRow.jsx

@@ -34,7 +34,7 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  *   Every variant but `stacked`, which has its phone bar
  * @param {'underline'|'chip'|'text'|'stacked'} [variant='underline']
  * @param {string} [look]  @deprecated 2026-10-30 — the old spelling of `variant`; `variant` wins when both are passed
- * @param {'mono'|'sans'} [type='mono']  `underline` only: the tab's type
+ * @param {'mono'|'sans'|'mono-light'} [type='mono']  `underline` only: the tab's type — `mono-light` is `sans`'s row on JetBrains Mono at 300 (his word, 2026-10-30)
  * @param {boolean} [filled=false] - `chip` only: every chip shows at rest (Button `tab-filled`), so the row reads as choices
  *        underline — this row, as it always was; a tab's `icon` sits before its label. `type` picks its type: `mono`
  *                    (default, the mono-12 row) or `sans` (the neutral sans at 300, a 20px glyph in a 40px row — the
@@ -274,7 +274,7 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
 function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, type }) {
   /* `type="sans"` (2026-10-29, the user's ref — Adobe's tab strip): the neutral sans at 300 (his word, 2026-10-30), a 20px glyph at the
    * set's 1.5 stroke and a 1px underline (his word, 2026-10-30), a 40px row (his word, 2026-10-30), 24 between tabs — review 8: *"the problem … was thickness and stroke"* */
-  const md = type === 'sans'
+  const md = type === 'sans' || type === 'mono-light'
   const listRef = useRef(null)
   const activeIdx = tabs.findIndex((t) => t.id === value)
 
@@ -308,15 +308,15 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, type
               tabIndex={isActive || (activeIdx === -1 && i === 0) ? 0 : -1}
               onClick={() => onChange?.(t.id)}
               className={[
-                `group ${md ? 'kol-tab-sans kol-sans-body-02 font-light gap-2.5 border-b' : 'kol-mono-12 gap-2 border-b-2'} flex items-center cursor-pointer`,
+                `group ${md ? `${type === 'sans' ? 'kol-tab-sans' : 'kol-tab-mono-light'} kol-sans-body-02 font-light gap-2.5 border-b` : 'kol-mono-12 gap-2 border-b-2'} flex items-center cursor-pointer`,
                 isActive
-                  ? 'text-emphasis border-fg'
-                  : 'text-meta hover:text-emphasis border-transparent',
+                  ? 'text-oq-96 border-fg'
+                  : 'text-oq-48 hover:text-oq-80 border-transparent',
               ].join(' ')}
             >
               {/* a tab may carry its glyph before the label (2026-10-29, Adobe's Base color · Image · Color wheel) */}
               {/* the glyph in OPAQUE ink (icons take oq, never fg) — full when active, meta otherwise, full under the pointer */}
-              {t.icon && <Icon name={t.icon} size={md ? 20 : 16} className={isActive ? 'text-oq-96' : 'text-oq-48 group-hover:text-oq-96'} />}
+              {t.icon && <Icon name={t.icon} size={md ? 20 : 16} className={isActive ? 'text-oq-96' : 'text-oq-48 group-hover:text-oq-80'} />}
               {t.label}
             </button>
           )

package/src/organisms/ColumnBrowser.jsx

@@ -521,6 +521,10 @@ export default function ColumnBrowser({
   /* `renderDetails(file)` — extra rows under the preview column's facts (tags, an Edit action);
    * absent, the column is exactly what it was */
   renderDetails,
+  /* `renderFolderPreview(level, width)` — the preview column when NO file is shown: the open
+   * folder's own pane (MediaLibraryInfoKey, kol-website 2026-10-30 — the media page's folder facts,
+   * as its rows draw them). Null for a level with nothing to say; absent, the column is empty. */
+  renderFolderPreview,
   height,
   defaultHeight = 528,
   onHeightChange,
@@ -798,6 +802,8 @@ export default function ColumnBrowser({
   const levels = levelsOf(prefix) // '' → ['']; 'a/b/' → ['', 'a/', 'a/b/']
   // While Quick Look is open the overlay's index is the truth for the highlight.
   const shown = quickLook ? quickLook.files[quickLook.index] : picked
+  /* no file shown: the open folder's pane, when the caller has one for this level */
+  const folderPane = !shown && renderFolderPreview ? renderFolderPreview(prefix, widthOf('preview')) : null
 
   /* ── THE STACK MODE (ColumnBrowserStackMode, kol-r2b2 2026-09-03) ─────────
    *
@@ -1093,9 +1099,11 @@ export default function ColumnBrowser({
           <SelectionPreview keys={[...selectedKeys]} objects={objects} urlOf={urlOf} kindOf={kindOf} formatSize={formatSize} formatDate={formatDate} width={widthOf('preview')} />
           <ResizeHandle axis="x" onDrag={resizeCol('preview')} onEnd={endDrag} />
         </>
-      ) : shown && (
+      ) : (shown || folderPane) && (
         <>
-          <Preview key={shown.key} o={shown} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} formatSize={formatSize} formatDate={formatDate} renderPreview={renderPreview} renderDetails={renderDetails} width={widthOf('preview')} />
+          {shown
+            ? <Preview key={shown.key} o={shown} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} formatSize={formatSize} formatDate={formatDate} renderPreview={renderPreview} renderDetails={renderDetails} width={widthOf('preview')} />
+            : folderPane}
           <ResizeHandle axis="x" onDrag={resizeCol('preview')} onEnd={endDrag} />
         </>
       )}

package/src/organisms/MediaLibraryPages.jsx

@@ -285,22 +285,28 @@ function ImageFrame({ src, vector, mode = 'native' }) {
   )
 }
 
-/* `,` TOGGLES THE SETTINGS DRAWER (MediaPreviewNativeRatio, kol-website 2026-10-30: the media app is
- * not on AppHub, which binds its own). AppHub's guard — no modifiers, no repeat, not while typing.
- * `on` is false when the gear hands over (`onOpenSettings`): the host's key owns it then. */
-function useSettingsKey(key, on, toggle) {
+/* THE PAGE'S OWN KEYS, ONE GUARD. `,` toggles the settings drawer (MediaPreviewNativeRatio,
+ * kol-website 2026-10-30: the media app is not on AppHub, which binds its own); `mod+i` opens Get
+ * Info (MediaLibraryInfoKey, kol-website 2026-10-30). AppHub's guard — no other modifiers, no
+ * repeat, not while typing. A bare key takes no modifier at all; `mod` is ⌘ or Ctrl. `on` false
+ * hands the key to the host (the gear's `onOpenSettings`), or holds it while an overlay is up. */
+function useHotkey(combo, on, run) {
   useEffect(() => {
-    if (!key || !on) return undefined
+    if (!combo || !on) return undefined
+    const parts = combo.toLowerCase().split('+')
+    const key = parts.pop()
+    const mod = parts.includes('mod')
     const onKey = (e) => {
-      if (!(e.key === key || (key === ',' && e.code === 'Comma')) || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return
+      if (!(e.key?.toLowerCase() === key || (key === ',' && e.code === 'Comma')) || e.altKey || e.repeat) return
+      if (mod ? !(e.metaKey || e.ctrlKey) : (e.metaKey || e.ctrlKey)) return
       const el = e.target
       if (el?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el?.tagName ?? '')) return
       e.preventDefault()
-      toggle()
+      run()
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [key, on, toggle])
+  }, [combo, on, run])
 }
 
 
@@ -1160,6 +1166,12 @@ export function MediaLibraryBrowse({
   settingsKey = ',',
   settingsOpen: settingsOpenProp,
   onSettingsOpenChange,
+  /* `infoKey` — Get Info on the pick, file or folder, in every view (MediaLibraryInfoKey, kol-website
+   * 2026-10-30; Finder's ⌘I): the same overlay Space opens, Esc closes. `'mod+i'`; `false` for none.
+   * `columnFolderInfo` — Columns: the open folder's facts pane in the preview column, as the rows
+   * draw a picked folder's; `false` leaves the column empty, as before. */
+  infoKey = 'mod+i',
+  columnFolderInfo = true,
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -1177,7 +1189,7 @@ export function MediaLibraryBrowse({
   const [ownSettingsOpen, setOwnSettingsOpen] = useState(false)
   const settingsOpen = settingsOpenProp ?? ownSettingsOpen
   const setSettingsOpen = (v) => { if (settingsOpenProp == null) setOwnSettingsOpen(v); onSettingsOpenChange?.(v) }
-  useSettingsKey(settingsKey, !onOpenSettings, () => setSettingsOpen(!settingsOpen))
+  useHotkey(settingsKey, !onOpenSettings, () => setSettingsOpen(!settingsOpen))
   const [trashOpen, setTrashOpen] = useState(false)
   const [pickedFile, setPickedFile] = useState(null)
   useEffect(() => { onPickFile?.(pickedFile) }, [pickedFile]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -1680,7 +1692,9 @@ export function MediaLibraryBrowse({
     }
   }
   const spaceQuickLook = () => {
-    const key = pickedFile?.key ?? pickedFolder ?? (rowSelection.size === 1 ? [...rowSelection][0] : null)
+    /* in the columns a folder is picked by being OPEN — the deepest level (MediaLibraryInfoKey: ⌘I
+     * is the only caller there; the columns keep their own Space) */
+    const key = pickedFile?.key ?? (view === 'columns' ? (prefix || null) : pickedFolder ?? (rowSelection.size === 1 ? [...rowSelection][0] : null))
     /* a picked bucket or the title Quick-Looks like any folder (user 2026-09-25) */
     if (!key && previewRoot) { setQuickLookFolder(ROOT_KEY); return }
     if (!key) return
@@ -1843,6 +1857,9 @@ export function MediaLibraryBrowse({
 
   const [quickLook, setQuickLook] = useState(null)
   const [quickLookFolder, setQuickLookFolder] = useState(null)
+  /* ⌘I — GET INFO (MediaLibraryInfoKey): what Space opens, from every view; inert over an open
+   * overlay (Esc closes it) and over the search modal */
+  useHotkey(infoKey, !quickLook && !quickLookFolder && !searchOpen, spaceQuickLook)
   /* …and the open window takes the new selection as its set, on the file the cursor reached */
   useEffect(() => {
     if (!quickLook || rowSelection.size < 2) return
@@ -2136,6 +2153,15 @@ export function MediaLibraryBrowse({
                    owns it through settings (item 15) */
                 stackView={stackView ?? settings.stackView ?? 'list'}
                 renderDetails={(o) => detailsFor({ ...o, key: o.key.slice(VROOT.length) })}
+                /* THE OPEN FOLDER'S FACTS IN THE PREVIEW COLUMN (MediaLibraryInfoKey, kol-website
+                 * 2026-10-30: picking a folder showed nothing beside the list) — the rows' pane, drawn
+                 * where the columns put a file's. A level above the bucket (the title, a bucket) has
+                 * no pane here, as before. */
+                renderFolderPreview={columnFolderInfo ? (level, width) => {
+                  const real = unroot(level)
+                  if (!real || (VROOT && real === level)) return null
+                  return <FolderPreview key={real} path={real} objects={objects} width={width} formatDate={formatDate} details={detailsFor(real)} />
+                } : undefined}
                 renderPreview={(o) => {
                   const real = { ...o, key: o.key.slice(VROOT.length) }
                   if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} vector={real.contentType === 'image/svg+xml'} mode={previewFrame} />
@@ -3065,7 +3091,7 @@ export function MediaLibraryLibrary({
   const [ownSettingsOpen, setOwnSettingsOpen] = useState(false)
   const settingsOpen = settingsOpenProp ?? ownSettingsOpen
   const setSettingsOpen = (v) => { if (settingsOpenProp == null) setOwnSettingsOpen(v); onSettingsOpenChange?.(v) }
-  useSettingsKey(settingsKey, header, () => setSettingsOpen(!settingsOpen))
+  useHotkey(settingsKey, header, () => setSettingsOpen(!settingsOpen))
   const [editingKey, setEditingKey] = useState(null)
   const [editingValue, setEditingValue] = useState('')
   const [renaming, setRenaming] = useState(false)