@kolkrabbi/kol-component 0.317.2 → 0.317.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.2",
+  "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.2"
+    "@kolkrabbi/kol-icons": "^0.53.5"
   },
   "files": [
     "src",

package/src/index.js

@@ -150,7 +150,7 @@ export { default as ToolPalette } from './organisms/ToolPalette.jsx'
 export { default as DocumentEditor } from './organisms/DocumentEditor.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow, TABBAR_H, TABBAR_PILL_INSET, TABBAR_PILL_TAB, tabbarPillWidth } from './molecules/TabsRow.jsx'
-/** @deprecated 2026-10-17 — alias of `TabsRow look="chip"` */
+/** @deprecated 2026-10-17 — alias of `TabsRow variant="chip"` */
 export { default as TabChips } from './molecules/TabChips.jsx'
 
 // organisms
@@ -180,7 +180,7 @@ export { default as Carousel } from './molecules/Carousel.jsx'
  * stage reaches for it instead of re-typing the button markup, which is how the
  * three in-package copies (and kol-website's CarouselNavigation) happened. */
 export { default as EmblaNav } from './molecules/EmblaNav.jsx'
-/** @deprecated 2026-10-17 — alias of `TabsRow look="stacked" placement="phone"` */
+/** @deprecated 2026-10-17 — alias of `TabsRow variant="stacked" placement="phone"` */
 export { default as MobileTabBar } from './molecules/MobileTabBar.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as PageHeader, PAGE_HEADER_ROLES } from './molecules/PageHeader.jsx'

package/src/molecules/MobileTabBar.jsx

@@ -1,10 +1,10 @@
 import TabsRow, { TABBAR_H } from './TabsRow.jsx'
 
 /**
- * @deprecated 2026-10-17 — alias of `TabsRow look="stacked" placement="phone"` (TabsStackedLayout). Drops when nobody imports it (04-retirements.md).
+ * @deprecated 2026-10-17 — alias of `TabsRow variant="stacked" placement="phone"` (TabsStackedLayout). Drops when nobody imports it (04-retirements.md).
  * MobileTabBar — Old name for the stacked phone bar. Same props: `tabs` (`{ value, label, icon }`) · `value` · `onChange` · `className`.
  */
 export { TABBAR_H }
 export default function MobileTabBar(props) {
-  return <TabsRow look="stacked" placement="phone" {...props} />
+  return <TabsRow variant="stacked" placement="phone" {...props} />
 }

package/src/molecules/PageControls.jsx

@@ -13,7 +13,7 @@ import TabsRow from './TabsRow.jsx'
  *
  * The slots, in the order they are drawn — an empty slot is not there:
  *   row 1   toggles · views · count     the series chips (Tag), the view switches (SegmentedToggle), the readout
- *   row 2   jump                        the section tabs (TabsRow look="chip"), scrolling sideways when long
+ *   row 2   jump                        the section tabs (TabsRow variant="chip"), scrolling sideways when long
  *   row 3   legend                      a dot and a name per series, as many columns as series
  *
  * STICKY by default: `sticky top-0` on the page's z-sticky rung, a hairline under it, the surface painted so the
@@ -51,7 +51,7 @@ export default function PageControls({ toggles, views = [], count, jump, legend,
       )}
       {jump && (
         <div className="overflow-x-auto">
-          <TabsRow look="chip" size="sm" ariaLabel={jump.label} value={jump.value} onChange={jump.onChange} tabs={jump.tabs} />
+          <TabsRow variant="chip" size="sm" ariaLabel={jump.label} value={jump.value} onChange={jump.onChange} tabs={jump.tabs} />
         </div>
       )}
       {legend && legend.length > 0 && (

package/src/molecules/TabChips.jsx

@@ -1,9 +1,9 @@
 import TabsRow from './TabsRow.jsx'
 
 /**
- * @deprecated 2026-10-17 — alias of `TabsRow look="chip"` (TabsStackedLayout: one tab component). Drops when nobody imports it (04-retirements.md).
- * TabChips — Old name for TabsRow's chip look. Same props: `tabs` · `value` · `onChange` · `size` · `ariaLabel` · `className`.
+ * @deprecated 2026-10-17 — alias of `TabsRow variant="chip"` (TabsStackedLayout: one tab component). Drops when nobody imports it (04-retirements.md).
+ * TabChips — Old name for TabsRow's chip variant. Same props: `tabs` · `value` · `onChange` · `size` · `ariaLabel` · `className`.
  */
 export default function TabChips(props) {
-  return <TabsRow look="chip" {...props} />
+  return <TabsRow variant="chip" {...props} />
 }

package/src/molecules/TabsRow.jsx

@@ -24,16 +24,21 @@ import { RAIL_ROW } from '../hooks/railRow.js'
  * @param {Function} onClose    () => void — show + wire the leading close button
  * @param {Function} onMinimise () => void — show + wire the trailing minimise chevron
  *
- * ONE TAB COMPONENT, FOUR LOOKS (TabsStackedLayout, kol-monitor 2026-10-17 — four components drew one control):
+ * ONE TAB COMPONENT, FOUR VARIANTS (TabsStackedLayout, kol-monitor 2026-10-17 — four components drew one control). The prop
+ * is `variant`, the one word the DS uses for a look (control-chrome: "variant is the look"); `look` was an agent's coinage
+ * on the merge and is read as a silent alias until no published consumer passes it (the user, 2026-10-30: *"USE VARIANT"*).
  * @param {'scroll'|'wrap'} [overflow='scroll']  A ROW WIDER THAN ITS COLUMN (TabsRowOverflow, kol-website 2026-10-29 — six
  *   underline tabs are 394px, so at 390 the page scrolled sideways and record wrapped the row in its own div): `scroll`
  *   keeps one line that scrolls sideways with no scrollbar, `.kol-scroll-fade--x` fading the clipped edge(s), and the
  *   active tab scrolled into view when it changes — arrow keys included; `wrap` breaks the tabs onto a second line.
- *   Every look but `stacked`, which has its phone bar
- * @param {'underline'|'chip'|'text'|'stacked'} [look='underline']
+ *   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'|'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. `size="md"` is the sans body
- *        face with a 20px glyph in a 48px row (the user's ref, Adobe's tab strip, 2026-10-29)
+ *        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
+ *                    user's ref, Adobe's tab strip, 2026-10-29; named `type` by him, 2026-10-30)
  *        chip      — the active tab a filled chip, the rest quiet (was `TabChips`); `size` is the control rung
  *        text      — flat helper-type tabs, the active one bright (was kol-shell's `TabStrip`); `size` is the
  *                    helper size (default 14), `tracked` adds 1px tracking
@@ -71,13 +76,14 @@ export const tabbarPillWidth = (count) => count * TABBAR_PILL_TAB + 14
 /* the collapse's motion — one duration for the width and the glyph swap (300, user 2026-10-23: 180 read as abrupt) */
 const COLLAPSE_MS = 300
 
-export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMinimise, look = 'underline', filled = false, placement = 'inline', shape = 'bar', collapsed = false, onExpand, edge, border, shadow, dock, active, foldable, folded, onFoldChange, foldSide, size, tracked = false, overflow = 'scroll', ariaLabel, className, style }) {
+export default function TabsRow({ tabs: raw = [], value, onChange, onClose, onMinimise, variant, look: lookLegacy, type = 'mono', filled = false, placement = 'inline', shape = 'bar', collapsed = false, onExpand, edge, border, shadow, dock, active, foldable, folded, onFoldChange, foldSide, size, tracked = false, overflow = 'scroll', ariaLabel, className, style }) {
   const tabs = raw.map((t) => ({ ...t, id: t.id ?? t.value }))
+  const look = variant ?? lookLegacy ?? 'underline'
   const wrap = overflow === 'wrap'
   if (look === 'chip') return <Overflow mode={overflow} value={value}><ChipTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 'sm'} filled={filled} ariaLabel={ariaLabel} className={`${wrap ? 'flex-wrap ' : ''}${className ?? ''}`} /></Overflow>
   if (look === 'text') return <Overflow mode={overflow} value={value}><TextTabs tabs={tabs} value={value} onChange={onChange} size={size ?? 14} tracked={tracked} className={`${wrap ? 'flex-wrap gap-y-2 ' : ''}${className ?? 'gap-6'}`} style={style} /></Overflow>
   if (look === 'stacked') return <StackedTabs tabs={tabs} value={value} onChange={onChange} placement={placement} shape={shape} collapsed={collapsed} onExpand={onExpand} edge={edge} border={border} shadow={shadow} dock={dock} active={active} foldable={foldable} folded={folded} onFoldChange={onFoldChange} foldSide={foldSide} ariaLabel={ariaLabel} className={className ?? ''} />
-  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} size={size} /></Overflow>
+  return <Overflow mode={overflow} value={value}><UnderlineTabs tabs={tabs} value={value} onChange={onChange} onClose={onClose} onMinimise={onMinimise} wrap={wrap} type={type} /></Overflow>
 }
 
 /* `overflow="scroll"`: the row in a sideways scroller that fades its clipped edges and keeps the active tab (`data-active`)
@@ -265,10 +271,10 @@ function StackedTabs({ tabs, value, onChange, placement, shape = 'bar', collapse
   )
 }
 
-function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size }) {
-  /* `size="md"` (2026-10-29, the user's ref — Adobe's tab strip): the sans body face at medium weight, a 20px glyph at a
-   * 2 stroke (`.kol-tab-md`, the theme), a 48px row, 24 between tabs — review 8: *"the problem … was thickness and stroke"* */
-  const md = size === 'md'
+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' || type === 'mono-light'
   const listRef = useRef(null)
   const activeIdx = tabs.findIndex((t) => t.id === value)
 
@@ -282,7 +288,7 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size
   }
 
   return (
-    <div className={`flex items-stretch gap-4 ${wrap ? (md ? 'min-h-12' : 'min-h-10') : md ? 'h-12' : 'h-10'}`}>
+    <div className={`flex items-stretch gap-4 ${wrap ? 'min-h-10' : 'h-10'}`}>
       {onClose && (
         /* the one close, at the rung whose glyph is the 12 this hand-rolled
          * (2026-09-03) — xs SOLO is 12, so the drawing does not move */
@@ -302,15 +308,15 @@ function UnderlineTabs({ tabs, value, onChange, onClose, onMinimise, wrap, size
               tabIndex={isActive || (activeIdx === -1 && i === 0) ? 0 : -1}
               onClick={() => onChange?.(t.id)}
               className={[
-                `group ${md ? 'kol-tab-md kol-sans-body-02 font-medium gap-2.5' : 'kol-mono-12 gap-2'} flex items-center cursor-pointer border-b-2`,
+                `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/ColorPickerPopover.jsx

@@ -74,8 +74,9 @@ function ChannelStrip({ ch, hex, hsva, onHsva }) {
         onKeyDown={(e) => { const d = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 }[e.key]; if (d) { e.preventDefault(); set(value + d * (e.shiftKey ? 10 : 1)) } }}>
         <span className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ left: `${pct}%`, boxShadow: '0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.35)', background: hex.slice(0, 7) }} />
       </div>
-      {/* the box hugs three characters by the Input's own `chars` — a utility width is not guaranteed in every consumer (review 8, ref 81) */}
-      <Input size="sm" type="number" chars={3} value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
+      {/* the box is 56 wide by the Input's own `width` — a utility width was not honoured in a consumer (ref 81), and `chars`
+        * alone did not hold against the row's flex (0.317.2, seen in the review-8 pass) */}
+      <Input size="sm" type="number" chars={3} width="56px" value={Math.round(value)} aria-label={`${ch.label ?? ch.key} value`} onChange={(e) => { const v = Number(e.target.value); if (!Number.isNaN(v)) set(v) }} />
     </div>
   )
 }
@@ -212,7 +213,7 @@ export default function ColorPickerPopover({ color, onChange, defaultValue, size
       <div className={`flex w-full flex-col gap-3 ${className}`.trim()}>
         <div className="flex items-center justify-between gap-3">
           <span className="kol-eyebrow text-fg-80">{title ?? label}</span>
-          {modes && <Dropdown variant="nav" size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
+          {modes && <Dropdown size="sm" value={mode} onChange={setMode} options={PICKER_MODES} ariaLabel={`${label} mode`} />}
         </div>
         {hexField}
         <div className="w-full overflow-hidden rounded-[var(--kol-radius-xs)]" style={{ height: 200 }}>

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

@@ -262,23 +262,53 @@ function useBucketLibrary({ client, bucket, defaults, settings: controlled, onSe
 
 /* ── shared pieces, kol-r2b2's ─────────────────────────────────────────────── */
 
-/* The frame is square until the file reports its size, then snaps to its nearest preset. A photo
- * near a preset fills it (`cover`, a few percent cropped); a vector or anything past the ladder's
- * ends — a 2.8:1 wordmark, an 11:1 nav logo — shows whole (`contain`, kol-client-olina 2026-09-25). */
-function ImageFrame({ src, vector }) {
+/* The frame is square until the file reports its size. `mode="native"` (the default since
+ * MediaPreviewNativeRatio, kol-website 2026-10-30 — a certificate lost its top and bottom) then takes
+ * the file's own ratio and shows it whole, a very tall one capped at the media box's height (the pane
+ * shrinks that box to what is left under the facts) so it never runs off. `mode="preset"` is the older look: snap to
+ * the nearest preset; a photo near one fills it (`cover`, a few percent cropped); a vector or anything
+ * past the ladder's ends — a 2.8:1 wordmark, an 11:1 nav logo — shows whole (`contain`,
+ * kol-client-olina 2026-09-25). */
+function ImageFrame({ src, vector, mode = 'native' }) {
   const [frame, setFrame] = useState({ ratio: '1 / 1', contain: !!vector })
+  const native = mode !== 'preset'
   const onLoad = (e) => {
     const { naturalWidth: w, naturalHeight: h } = e.target
     const r = w && h ? w / h : 1
-    setFrame({ ratio: nearestRatio(w, h), contain: vector || r > 16 / 9 || r < 9 / 16 })
+    if (native) setFrame({ ratio: w && h ? `${w} / ${h}` : '1 / 1', contain: true })
+    else setFrame({ ratio: nearestRatio(w, h), contain: vector || r > 16 / 9 || r < 9 / 16 })
   }
   return (
-    <div className="w-full rounded overflow-hidden flex items-center justify-center" style={{ aspectRatio: frame.ratio }}>
+    <div className={`w-full rounded overflow-hidden flex items-center justify-center${native ? ' max-h-full' : ''}`} style={{ aspectRatio: frame.ratio }}>
       <img src={src} alt="" className={`w-full h-full ${frame.contain ? 'object-contain' : 'object-cover'}`} loading="lazy" onLoad={onLoad} />
     </div>
   )
 }
 
+/* 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 (!combo || !on) return undefined
+    const parts = combo.toLowerCase().split('+')
+    const key = parts.pop()
+    const mod = parts.includes('mod')
+    const onKey = (e) => {
+      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()
+      run()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [combo, on, run])
+}
+
 
 /* TAGS IN THE PREVIEW PANE (the media D1 pass, 2026-09-25). The file's tags as removable chips and
  * one field that adds on Enter — comma-separated adds several. Tags are the CLIENT's (`setTags`);
@@ -1127,6 +1157,21 @@ export function MediaLibraryBrowse({
   searchPlaceholder = 'Search this bucket',
   /* `o.displayName` on a listed object is its LABEL in every view, Quick Look and search (kol-fxr
    * 2026-10-08: names not unique, so the key is an id). Absent, the label is the key, as before. */
+  /* `previewFrame` — how the preview pane and the column / Quick Look frame an image
+   * (MediaPreviewNativeRatio, kol-website 2026-10-30): `'native'` the file's own ratio, shown whole;
+   * `'preset'` snapped to the nearest preset and filled. Grid tiles are not part of it. */
+  previewFrame = 'native',
+  /* `settingsKey` — the key that toggles the settings drawer (`','`, AppHub's; `null` for none).
+   * `settingsOpen` / `onSettingsOpenChange` — the drawer, controlled, so a host can drive it. */
+  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
@@ -1141,7 +1186,10 @@ export function MediaLibraryBrowse({
    * say it is writable. */
   const writable = lib.writable || (!!fileActions && !!bucketMeta.writable)
   const switchBucket = (id, pfx = '') => { if (bucket == null) setOwnBucket(id); onBucketChange?.(id); setPrefix(pfx) }
-  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [ownSettingsOpen, setOwnSettingsOpen] = useState(false)
+  const settingsOpen = settingsOpenProp ?? ownSettingsOpen
+  const setSettingsOpen = (v) => { if (settingsOpenProp == null) setOwnSettingsOpen(v); onSettingsOpenChange?.(v) }
+  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
@@ -1644,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
@@ -1807,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
@@ -1886,7 +1939,7 @@ export function MediaLibraryBrowse({
         formatSize={formatSize} formatDate={formatDate} width={previewWidth}
         renderDetails={detailsFor}
         renderPreview={(o) => {
-          if (isImage(o.contentType)) return <ImageFrame src={mediaUrl(o.key)} vector={o.contentType === 'image/svg+xml'} />
+          if (isImage(o.contentType)) return <ImageFrame src={mediaUrl(o.key)} vector={o.contentType === 'image/svg+xml'} mode={previewFrame} />
           const poster = posterFor(o.key, keySet)
           return <KindPreview o={o} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
         }} />
@@ -2100,9 +2153,18 @@ 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'} />
+                  if (isImage(real.contentType)) return <ImageFrame src={mediaUrl(real.key)} vector={real.contentType === 'image/svg+xml'} mode={previewFrame} />
                   const poster = posterFor(real.key, keySet)
                   return <KindPreview o={real} urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
                 }}
@@ -2808,7 +2870,7 @@ export function MediaLibraryBrowse({
         {tabs?.length > 0 && (
           <>
             <div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
-            <TabsRow look="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
+            <TabsRow variant="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
           </>
         )}
       </div>
@@ -3014,6 +3076,11 @@ export function MediaLibraryLibrary({
    * concept only one page has stay put — `thumbnailFor`, `folderMeta` and
    * `stackView` are folder and stack concepts and are correctly absent here. */
   formatDate = defaultFormatDate,
+  /* the settings drawer's key and its controlled state — the same seam as the browse page (the
+   * drawer is on both; MediaPreviewNativeRatio, kol-website 2026-10-30) */
+  settingsKey = ',',
+  settingsOpen: settingsOpenProp,
+  onSettingsOpenChange,
 }) {
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket
@@ -3021,7 +3088,10 @@ export function MediaLibraryLibrary({
   const { buckets, bucketMeta, settings, setSettings, objects, setObjects, error, mediaUrl, downloadUrl, writable } = lib
   /* the same one dialog idiom as the browse page — see its note on `useModal()` */
   const modal = useModal()
-  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [ownSettingsOpen, setOwnSettingsOpen] = useState(false)
+  const settingsOpen = settingsOpenProp ?? ownSettingsOpen
+  const setSettingsOpen = (v) => { if (settingsOpenProp == null) setOwnSettingsOpen(v); onSettingsOpenChange?.(v) }
+  useHotkey(settingsKey, header, () => setSettingsOpen(!settingsOpen))
   const [editingKey, setEditingKey] = useState(null)
   const [editingValue, setEditingValue] = useState('')
   const [renaming, setRenaming] = useState(false)
@@ -3238,7 +3308,7 @@ export function MediaLibraryLibrary({
       {tabs?.length > 0 && (
         <>
           <div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
-          <TabsRow look="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
+          <TabsRow variant="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
         </>
       )}
     </div>