@kolkrabbi/kol-component 0.317.4 → 0.317.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.317.4",
+  "version": "0.317.5",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

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
  *
@@ -525,6 +526,10 @@ export default function ColumnBrowser({
    * 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,
@@ -844,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
@@ -989,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) => {
@@ -1094,20 +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 || folderPane) && (
+      {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 && (
         <>
-          {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}
+          {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} />}
@@ -1117,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'
@@ -536,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
@@ -1172,6 +1271,10 @@ export function MediaLibraryBrowse({
    * 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
@@ -1691,16 +1794,18 @@ export function MediaLibraryBrowse({
       setPickedFolder(null); setPickedFile(o)
     }
   }
-  const spaceQuickLook = () => {
+  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
@@ -1729,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) }
@@ -1834,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)
@@ -1847,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()
       }
     }
@@ -1856,10 +1961,10 @@ 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)
+  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
@@ -2124,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}` }))}
@@ -2630,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}