@kolkrabbi/kol-component 0.317.3 → 0.317.5

package/package.json

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

@@ -78,6 +78,7 @@ import { GRAB_COLUMN } from '../utilities/motion.js'
  *                                  so a consumer hands back what it stored. A key with no column is ignored;
  *                                  any column it does not name falls back to the drag state, then `columnWidth`
  * @param {Function} onColumnResize (index, px) => void — the column's index, or `'preview'`
+ * @param {'inline'|'dock'} previewPlacement  the preview column after the last column (default), or docked at the right edge, the columns scrolling to its left; empty until something is shown
  * @param {Function} onDropFiles   (files, folderPath) => void — OS files dropped on a folder row or column; the consumer uploads
  * @param {string}   className    extra classes on the browser
  *
@@ -521,6 +522,14 @@ 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,
+  /* `previewPlacement` — where the preview column sits (ColumnPreviewDocked, kol-website 2026-10-30):
+   * `'inline'` the column after the last one, as ever; `'dock'` pinned at the right edge beside a
+   * self-scrolling strip of columns, the way the media page's Rows and Grid dock theirs. */
+  previewPlacement = 'inline',
   height,
   defaultHeight = 528,
   onHeightChange,
@@ -798,6 +807,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) ─────────
    *
@@ -838,7 +849,7 @@ export default function ColumnBrowser({
   useEffect(() => {
     const box = marquee.ref.current
     if (box && box.scrollWidth > box.clientWidth) box.scrollTo({ left: box.scrollWidth, behavior: 'smooth' })
-  }, [prefix, picked?.key, selectedKeys?.size]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [prefix, picked?.key, selectedKeys?.size, previewPlacement]) // eslint-disable-line react-hooks/exhaustive-deps
 
   if (stack) {
     /* THE CURRENT LEVEL IS THE LIST (StackModeChromeAndAncestors, kol-r2b2
@@ -983,19 +994,16 @@ export default function ColumnBrowser({
     )
   }
 
-  return (
-    <div
-      ref={rootRef}
-      tabIndex={0}
-      onKeyDown={onKeyDown}
-      // 12 rows of 44px by default (user ruling 2026-08-27), so the browser never jumps as columns change; each column scrolls.
-      // The scroll box is the INNER flex row: the bottom handle is absolute on this root, so it spans the visible width, not the scrolled one.
-      className={`kol-column-browser relative border rounded outline-none ${className}`.trim()}
-      style={{ borderColor: 'var(--kol-oq-08)', height: h }}
-    >
-      {/* A CLICK ON THE BACKGROUND DESELECTS (user 2026-09-22) — the band's own closing click is
-          swallowed by the hook, so this only ever fires on a real click into empty space. */}
-      <div ref={marquee.ref} {...marquee.props} className="relative flex h-full overflow-x-auto"
+  /* the preview pane: several selected → the stack; a file → its preview; else the open folder's pane */
+  const dock = previewPlacement === 'dock'
+  const pane = selectedKeys?.size > 1
+    ? <SelectionPreview keys={[...selectedKeys]} objects={objects} urlOf={urlOf} kindOf={kindOf} formatSize={formatSize} formatDate={formatDate} 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
+  /* the scrolling strip of columns; inline, the pane rides at its end */
+  const strip = (cls, after) => (
+      <div ref={marquee.ref} {...marquee.props} className={`relative flex h-full overflow-x-auto${cls}`}
         onClick={(e) => { if (!e.target.closest('[data-marquee-key]')) { pick(null); onSelectKeys?.([], false) } }}>
         {marquee.rect && <div className="kol-marquee" style={marquee.rect} />}
       {levels.map((level, k) => {
@@ -1088,18 +1096,39 @@ export default function ColumnBrowser({
           </Fragment>
         )
       })}
-      {selectedKeys?.size > 1 ? (
-        <>
-          <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 && (
+      {after}
+      </div>
+  )
+
+  return (
+    <div
+      ref={rootRef}
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+      // 12 rows of 44px by default (user ruling 2026-08-27), so the browser never jumps as columns change; each column scrolls.
+      // The scroll box is the INNER flex row: the bottom handle is absolute on this root, so it spans the visible width, not the scrolled one.
+      className={`kol-column-browser relative border rounded outline-none ${className}`.trim()}
+      style={{ borderColor: 'var(--kol-oq-08)', height: h }}
+    >
+      {/* A CLICK ON THE BACKGROUND DESELECTS (user 2026-09-22) — the band's own closing click is
+          swallowed by the hook, so this only ever fires on a real click into empty space. */}
+      {dock ? (
+        /* the strip tucks 1px under the pane's edge, so once the columns overflow the last one's edge
+         * and the divider are one line (`.kol-column-browser-strip--dock`, kol-theme) */
+        <div className="flex h-full">
+          {strip(' kol-column-browser-strip--dock flex-1 min-w-0 -mr-px')}
+          {/* the handle sits on the pane's LEFT edge, so a drag to the left widens it */}
+          <ResizeHandle axis="x" onDrag={(dx) => resizeCol('preview')(-dx)} onEnd={endDrag} />
+          <div className="relative flex shrink-0 border-l" style={{ borderColor: 'var(--kol-oq-08)' }}>
+            {pane || <div className="kol-column-browser-preview shrink-0" style={{ width: widthOf('preview') }} />}
+          </div>
+        </div>
+      ) : strip('', pane && (
         <>
-          <Preview key={shown.key} o={shown} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} formatSize={formatSize} formatDate={formatDate} renderPreview={renderPreview} renderDetails={renderDetails} width={widthOf('preview')} />
+          {pane}
           <ResizeHandle axis="x" onDrag={resizeCol('preview')} onEnd={endDrag} />
         </>
-      )}
-      </div>
+      ))}
       {/* A FILL HEIGHT HAS NO GRABBER (user 2026-09-22). A CSS length says "take the room you
         * are given"; dragging would fight it. A px height keeps its handle. */}
       {typeof h !== 'string' && <ResizeHandle axis="y" onDrag={resizeH} onEnd={endDrag} />}
@@ -1109,7 +1138,7 @@ export default function ColumnBrowser({
 
 /* The preview column, for the media page's ROW view (user 2026-09-22 — Finder's "Show preview"):
  * one preview, the same pane beside rows as beside columns. Not in the barrel. */
-export { Preview, SelectionPreview }
+export { Preview, SelectionPreview, COL_ICON }
 
 /* SelectionPreview — the preview pane for MORE THAN ONE selected item (user 2026-09-23, Finder's:
  * *"preview of 3 overlapping files, 2 and 3 slightly rotated behind 1 … the info fields should say

package/src/organisms/MediaLibraryPages.jsx

@@ -42,7 +42,7 @@ import DocumentEditor from './DocumentEditor.jsx'
 import { listDrafts, moveDrafts, DRAFTS_EVENT } from '../utilities/localDrafts.js'
 import { parseFrontmatter } from '@kolkrabbi/kol-markdown'
 import CommandOverlay from './CommandOverlay.jsx'
-import ColumnBrowser, { isFileDrag, Preview as ColumnPreview, SelectionPreview } from './ColumnBrowser.jsx'
+import ColumnBrowser, { isFileDrag, Preview as ColumnPreview, SelectionPreview, COL_ICON } from './ColumnBrowser.jsx'
 import SettingsPanel, { SettingsSwitch, SettingsChoice, SettingsMulti, SettingsFooter } from './SettingsPanel.jsx'
 import SettingsSections from './SettingsSections.jsx'
 import { kindOf, extOf, KIND_LABEL, KINDS, DEFAULT_KINDS, isSystemFile, isSegment, groupSegments, groupVariants, posterFor, partition } from '../utilities/mediaKinds.js'
@@ -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])
 }
 
 
@@ -530,6 +536,105 @@ function ContainerPreview({ name, icon, facts, width, details }) {
   )
 }
 
+/* GET INFO (MediaGetInfoModal, kol-website 2026-10-30) — Finder's ⌘I body, one for a folder and a
+ * file, drawn inside Quick Look's window (`QuickLookFrame` in a `FullscreenOverlay`, as
+ * `MediaInspector` draws it): the head row (a glyph no taller than its lines, the name, the size,
+ * "Modified"), the tags, General as key/value rows, then a file's small preview. Never the pane's
+ * full-height plate. `general` is `[label, value]` pairs. */
+function InfoBody({ icon, name, size, modified, tags, general, preview }) {
+  return (
+    <div className="flex-1 self-start w-[min(var(--kol-ql-max-w),420px)] max-h-[var(--kol-ql-media-h)] overflow-y-auto p-4 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <IconFrame name={icon} variant="ghost" size="sm" />
+        <div className="flex-1 min-w-0 flex flex-col gap-0.5 kol-mono-12">
+          <div className="flex items-baseline justify-between gap-4">
+            <span className="text-strong break-all">{name}</span>
+            {size && <span className="text-fg-default shrink-0">{size}</span>}
+          </div>
+          {modified && <span className="text-meta">Modified {modified}</span>}
+        </div>
+      </div>
+      {tags}
+      <dl className="flex flex-col gap-1">
+        {general.map(([k, v]) => (
+          <div key={k} className="flex justify-between gap-4 kol-mono-12">
+            <dt className="text-meta shrink-0">{k}</dt>
+            <dd className="text-fg-default text-right break-all">{v}</dd>
+          </div>
+        ))}
+      </dl>
+      {preview}
+    </div>
+  )
+}
+
+/* the size as Finder's Get Info writes it: bytes, then readable, then the count for a folder */
+const infoSize = (bytes, items) => `${bytes.toLocaleString('en-US')} bytes (${formatSize(bytes)})${items != null ? ` for ${items} item${items === 1 ? '' : 's'}` : ''}`
+
+/* ⌘I's modal: a folder's or a file's Get Info in Quick Look's window. `path` is a folder (ends `/`) or
+ * a file key; `where` is the bucket's label, the head of the Where breadcrumb. */
+function GetInfoModal({ path, objects, where, onClose, formatDate, tags, mediaUrl, downloadUrl, hasUrl = true, keySet }) {
+  const [dims, setDims] = useState(null)
+  const folder = path.endsWith('/')
+  const o = folder ? null : objects.find((x) => x.key === path)
+  const parts = path.replace(/\/$/, '').split('/')
+  const name = o ? (o.displayKey ?? o.displayName ?? parts[parts.length - 1]) : parts[parts.length - 1]
+  const crumb = [where, ...parts.slice(0, -1)].join(' › ')
+  let frame, body
+  if (folder) {
+    const inside = objects.filter((x) => x.key.startsWith(path))
+    const bytes = inside.reduce((n, x) => n + (x.size ?? 0), 0)
+    const last = inside.reduce((t, x) => (x.uploaded && x.uploaded > t ? x.uploaded : t), '')
+    frame = { title: name, meta: [`${inside.length} items`, formatSize(bytes)].join(' · ') }
+    body = <InfoBody icon="folder" name={name} size={formatSize(bytes)} modified={last ? formatDate(last) : null} tags={tags}
+      general={[['Kind', 'Folder'], ['Size', infoSize(bytes, inside.length)], ['Where', crumb], ...(last ? [['Newest', formatDate(last) || '—']] : [])]} />
+  } else {
+    if (!o) return null
+    const kind = kindOf(o)
+    const url = hasUrl ? mediaUrl(o.key) : null
+    const sized = isImage(o.contentType) || kind === 'video'
+    const timed = kind === 'video' || kind === 'audio'
+    const poster = kind === 'video' ? posterFor(o.key, keySet) : null
+    const onMeta = (e) => { const t = e.currentTarget; setDims({ w: t.videoWidth, h: t.videoHeight, len: t.duration }) }
+    frame = {
+      title: name,
+      meta: [formatSize(o.size), dims?.w && `${dims.w} × ${dims.h} px`, dims?.len && formatLength(dims.len)].filter(Boolean).join(' · '),
+      actions: url && (
+        <span className="flex items-center gap-1">
+          <CopyAction label="Copy URL" text={url} />
+          <Tooltip label="Download">
+            <Button variant="nav" size="sm" iconOnly="download" href={downloadUrl(o.key)} download={o.key.split('/').pop()} aria-label="Download" />
+          </Tooltip>
+        </span>
+      ),
+    }
+    body = <InfoBody icon={COL_ICON[kind] || 'file'} name={name} size={formatSize(o.size)} modified={o.uploaded ? formatDate(o.uploaded) : null} tags={tags}
+      general={[
+        ['Kind', KIND_LABEL[kind] || 'file'],
+        ['Type', o.contentType || '—'],
+        ['Size', infoSize(o.size ?? 0)],
+        ['Where', crumb],
+        ['Modified', formatDate(o.uploaded) || '—'],
+        ...(sized ? [['Dimensions', dims?.w ? `${dims.w} × ${dims.h} px` : url ? '…' : '—']] : []),
+        ...(timed ? [['Length', dims?.len ? formatLength(dims.len) : url ? '…' : '—']] : []),
+        ...(url ? [['URL', <span key="u" className="inline-flex items-center gap-1">{url}<CopyAction label="Copy URL" text={url} /></span>]] : []),
+      ]}
+      preview={url && (isImage(o.contentType) ? (
+        <img src={url} alt="" className="w-full h-auto rounded" onLoad={(e) => setDims({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })} />
+      ) : kind === 'video' ? (
+        <video src={url} poster={poster ? mediaUrl(poster) : undefined} preload="metadata" controls className="w-full h-auto rounded" onLoadedMetadata={onMeta} />
+      ) : kind === 'audio' ? (
+        /* no picture to show; loaded only for its length */
+        <audio src={url} preload="metadata" className="hidden" onLoadedMetadata={onMeta} />
+      ) : null)} />
+  }
+  return (
+    <FullscreenOverlay open onClose={onClose} closeButton={false} scrim>
+      <QuickLookFrame {...frame} onClose={onClose}>{body}</QuickLookFrame>
+    </FullscreenOverlay>
+  )
+}
+
 /* THE COLUMN HEADER — Name · Date · Size, each one the sort control for its own column (user
  * 2026-09-22). Unlabelled meta at the end of a row is a number nobody can read a column of; a
  * header names them AND gives them the one behaviour a labelled column implies. Clicking the
@@ -1160,6 +1265,16 @@ 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,
+  /* `previewPlacement` — Columns: the preview pane docked at the right edge as Rows and Grid dock
+   * theirs (`'dock'`, ColumnPreviewDocked, kol-website 2026-10-30), or the column after the last
+   * one (`'inline'`, as before). Handed to ColumnBrowser. */
+  previewPlacement = 'dock',
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -1177,7 +1292,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
@@ -1679,14 +1794,18 @@ export function MediaLibraryBrowse({
       setPickedFolder(null); setPickedFile(o)
     }
   }
-  const spaceQuickLook = () => {
-    const key = pickedFile?.key ?? pickedFolder ?? (rowSelection.size === 1 ? [...rowSelection][0] : null)
+  const spaceQuickLook = (info) => {
+    /* 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 && previewRoot) { setInfoFor(ROOT_KEY); return }
     if (!key) return
     /* A FOLDER QUICK-LOOKS TOO (user 2026-09-23: *"anything can be quick viewed, also folders"*) —
      * the same pane the preview column draws, at overlay size. */
-    if (key.endsWith('/')) { setQuickLookFolder(key); return }
+    if (key.endsWith('/')) { setInfoFor(key); return }
+    /* ⌘I on a file is its Get Info, not the media viewer (MediaGetInfoModal) */
+    if (info === true) { setInfoFor(key); return }
     const files = isWall
       ? wallFiles
       : rowLevel(key.slice(0, key.lastIndexOf('/') + 1), sortedObjects).files
@@ -1715,7 +1834,7 @@ export function MediaLibraryBrowse({
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return false
     /* ⇧+ARROWS KEEP SELECTING UNDER QUICK LOOK (user 2026-09-24), Finder's: the selection grows
      * underneath and the window pages through it */
-    if (view === 'columns' || (quickLook && !e.shiftKey) || quickLookFolder || searchOpen) return false
+    if (view === 'columns' || (quickLook && !e.shiftKey) || infoFor || searchOpen) return false
     if (atTitleRoot && !single) {
       if (e.metaKey && e.key === 'ArrowUp') goUp()
       else if (e.metaKey && e.key === 'ArrowDown') { if (atTop) goTitleRoot(); else openBucket(bucketList.find((b) => (b.id ?? b.label) === pickedBucket) ?? bucketMeta) }
@@ -1820,7 +1939,7 @@ export function MediaLibraryBrowse({
       /* ENTER OPENS THE SELECTED FOLDER, ⇧ENTER GOES TO THE PARENT (user 2026-09-24). The same
        * two moves as a double-click and ⌘↑, so the child you leave is still the one selected.
        * A focused tile has already opened itself on Enter (it calls preventDefault). */
-      if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.defaultPrevented && !quickLook && !quickLookFolder && !searchOpen) {
+      if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.defaultPrevented && !quickLook && !infoFor && !searchOpen) {
         if (e.shiftKey) { e.preventDefault(); goUp(); return }
         if (view !== 'columns') {
           const root = rootItems.find((it) => it.key === pickedBucket)
@@ -1833,7 +1952,7 @@ export function MediaLibraryBrowse({
       if (e.key === ' ' && view !== 'columns' && !searchOpen) {
         e.preventDefault()
         if (quickLook) closeQuickLook()
-        else if (quickLookFolder) setQuickLookFolder(null)
+        else if (infoFor) setInfoFor(null)
         else spaceQuickLook()
       }
     }
@@ -1842,7 +1961,10 @@ export function MediaLibraryBrowse({
   })
 
   const [quickLook, setQuickLook] = useState(null)
-  const [quickLookFolder, setQuickLookFolder] = useState(null)
+  const [infoFor, setInfoFor] = useState(null)
+  /* ⌘I — GET INFO (MediaLibraryInfoKey; MediaGetInfoModal: the Get Info modal, file or folder),
+   * from every view; ⌘I again or Esc closes it; inert over Quick Look and the search modal */
+  useHotkey(infoKey, !quickLook && !searchOpen, () => (infoFor ? setInfoFor(null) : spaceQuickLook(true)))
   /* …and the open window takes the new selection as its set, on the file the cursor reached */
   useEffect(() => {
     if (!quickLook || rowSelection.size < 2) return
@@ -2107,6 +2229,7 @@ export function MediaLibraryBrowse({
                 height={colH}
                 onHeightChange={onColH}
                 rowSize={rowSize}
+                previewPlacement={previewPlacement}
                 columnWidths={settings.columnWidths}
                 onColumnResize={(i, px) => setSettings({ ...settings, columnWidths: { ...(settings.columnWidths ?? {}), [i]: px } })}
                 objects={treeObjects.filter((o) => !isSystemFile(o.key)).map((o) => ({ ...o, key: `${VROOT}${o.key}` }))}
@@ -2136,6 +2259,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} />
@@ -2604,13 +2736,21 @@ export function MediaLibraryBrowse({
             onOpenResults={(q) => { setSettings({ ...settings, filters: true }); setBarQuery(q) }}
           />
         )}
-        {quickLookFolder && (
-          <FullscreenOverlay open onClose={() => setQuickLookFolder(null)} scrim>
-            {quickLookFolder === ROOT_KEY
-              ? previewRoot && <ContainerPreview name={previewRoot.name} icon={previewRoot.icon} facts={previewRoot.facts} width={420} />
-              : <FolderPreview path={quickLookFolder} objects={objects} width={420} formatDate={formatDate} />}
+        {/* GET INFO (MediaGetInfoModal, kol-website 2026-10-30): ⌘I, and Space on a folder, open Finder's
+          * Get Info in Quick Look's window — never the pane's plate at overlay size */}
+        {infoFor && (infoFor === ROOT_KEY ? (
+          <FullscreenOverlay open onClose={() => setInfoFor(null)} closeButton={false} scrim>
+            {previewRoot && (
+              <QuickLookFrame title={previewRoot.name} onClose={() => setInfoFor(null)}>
+                <InfoBody icon={previewRoot.icon} name={previewRoot.name} general={previewRoot.facts} />
+              </QuickLookFrame>
+            )}
           </FullscreenOverlay>
-        )}
+        ) : (
+          <GetInfoModal path={infoFor} objects={objects} where={bucketMeta.label || 'bucket'} onClose={() => setInfoFor(null)} formatDate={formatDate}
+            tags={(canTag || tagsOf(infoFor).length > 0) && <TagEditor tags={tagsOf(infoFor)} suggestions={allTags} onChange={canTag ? (next) => saveTags(infoFor, next) : undefined} />}
+            mediaUrl={mediaUrl} downloadUrl={downloadUrl} hasUrl={hasUrl} keySet={keySet} />
+        ))}
         {quickLook && (
           <MediaInspector files={quickLook.files} index={quickLook.index} onClose={closeQuickLook} mediaUrl={mediaUrl} downloadUrl={downloadUrl} hasUrl={hasUrl} keySet={keySet} showNav={rowSelection.size > 1}
             onEdit={canEdit ? (f) => { closeQuickLook(); openEditor(f) } : undefined}
@@ -3065,7 +3205,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)