@kolkrabbi/kol-styleguide 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": false,
   "description": "Brand guide components and the brand tool",
   "license": "MIT",
@@ -12,20 +12,20 @@
     "./src/*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.188.0",
-    "@kolkrabbi/kol-framework": ">=0.39.0",
+    "@kolkrabbi/kol-component": ">=0.315.0",
+    "@kolkrabbi/kol-framework": ">=0.64.0",
     "@kolkrabbi/kol-icons": ">=0.18.0",
     "@kolkrabbi/kol-print": ">=0.1.0",
-    "@kolkrabbi/kol-theme": ">=0.53.0",
+    "@kolkrabbi/kol-theme": ">=0.198.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.313.0",
-    "@kolkrabbi/kol-framework": "^0.62.4",
+    "@kolkrabbi/kol-component": "^0.315.0",
+    "@kolkrabbi/kol-framework": "^0.64.0",
     "@kolkrabbi/kol-icons": "^0.52.0",
-    "@kolkrabbi/kol-print": "^0.1.1",
-    "@kolkrabbi/kol-theme": "^0.196.0"
+    "@kolkrabbi/kol-theme": "^0.198.0",
+    "@kolkrabbi/kol-print": "^0.1.1"
   },
   "files": [
     "src",

package/src/DocumentIndex.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { FullscreenOverlay, KindPreview, PageHeader, QuickLookFrame, KIND_LABEL } from '@kolkrabbi/kol-component'
+import { FileQuickLook, PageHeader, KIND_LABEL } from '@kolkrabbi/kol-component'
 import { Contents } from './BrandGuide.jsx'
 
 /* DOCUMENT INDEX — a folder's pages as the brand book's contents cards (BrandGuide's `Contents`, routed), grouped by
@@ -24,22 +24,19 @@ export default function DocumentIndex({ rows, title, lede, onNavigate }) {
   const index = rows.map((r) => (r.file
     ? { ...r, href: r.file, meta: r.meta ?? fileLabel(r), onClick: (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); setOpen(files.indexOf(r)) } }
     : r))
-  const cur = open === null ? null : files[open]
-  const step = (d) => setOpen((i) => (i + d + files.length) % files.length)
   return (
     <div className="kol-page flex flex-col gap-6">
       {title && <PageHeader title={title} subtitle={lede} size="sm" voice="mono" />}
       <Contents index={index} onNavigate={onNavigate} />
-      {cur && (
-        /* QUICK LOOK DIMS, it does not black out — the list stays in view (MediaLibraryPages' rule) */
-        <FullscreenOverlay open onClose={() => setOpen(null)} closeButton={false} scrim>
-          <QuickLookFrame title={cur.title} meta={fileLabel(cur)} onClose={() => setOpen(null)} nav={files.length > 1 ? { index: open, total: files.length, onPrev: () => step(-1), onNext: () => step(1) } : undefined}>
-            {cur.kind === 'image' || /^(png|jpe?g|webp|gif|svg|avif)$/i.test(cur.ext ?? '')
-              ? <img src={cur.file} alt={cur.title} className="kol-quicklook-media" />
-              : <KindPreview key={cur.file} o={{ key: cur.file.split('?')[0], url: cur.file }} fit="sheet" urlOf={(x) => x.url} />}
-          </QuickLookFrame>
-        </FullscreenOverlay>
-      )}
+      {/* the DS Quick Look over the folder's files (kol-component FileQuickLook, 2026-10-29 — the composition this file drew
+        * by hand: dims, pages ‹ ›, a download) */}
+      <FileQuickLook
+        files={files.map((f) => ({ key: f.file.split('?')[0], name: f.title, url: f.file, type: f.kind === 'image' ? 'image/' : undefined }))}
+        index={open}
+        onIndex={setOpen}
+        onClose={() => setOpen(null)}
+        meta={(x) => fileLabel(files.find((f) => f.file === x.url))}
+      />
     </div>
   )
 }

package/src/DocumentLibrary.jsx

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import { Button, FileQuickLook, Table } from '@kolkrabbi/kol-component'
+import { MarkdownPage, PageSection, libraryLinks } from '@kolkrabbi/kol-framework'
+import DocumentIndex from './DocumentIndex.jsx'
+
+/* DOCUMENT LIBRARY — a `documentLibrary` (kol-framework) drawn: a sortable table per folder, the title opening the text,
+ * the originals opening in the DS Quick Look, the markdown downloading (DocumentLibraryAndBoardParts, kol-website
+ * 2026-10-29 — record's DocumentsIndex · FolderTable · Files · MdDownload, made the DS's so brand and record draw their
+ * documents the same way: *"I already asked for tables, and download and file preview"*).
+ *
+ *   <DocumentLibrary library={lib} onNavigate={navigate} urlOf={(f) => f.url} />          every folder, a section each
+ *   <DocumentLibrary library={lib} folder="press" … />                                   one folder
+ *   <DocumentView library={lib} row={row} urlOf={…} resolveLink={…} assetUrl={…} />     the open document
+ *
+ * DocumentLibrary
+ *   library    `{ rows, folders }` from documentLibrary
+ *   folder     one folder's id; omitted, every folder
+ *   columns    the table's columns — an array of keys (`title · kind · date · lang · assets · markdown`) and/or Table column
+ *              objects, or `(defaults) => columns` to drop, reorder or add
+ *   view       `table` (default) · `cards` (DocumentIndex's contents cards, for anyone who still wants them)
+ *   onNavigate (to) => void — a title's click; the link is a real `href` too
+ *   urlOf      (file) => string — an original's URL (default `file.url`; record serves the bucket in prod and a mirror in dev)
+ *
+ * DocumentFiles — the Assets cell on its own: a button per original, labelled by extension, two of one kind told apart by
+ * language (`PDF IS`, `PDF EN`); each opens Quick Look over the row's files. `DocumentMarkdown` — the source as `<stem>.md`. */
+const LANGS = ['is', 'en', 'de']
+const ext = (f) => (f.key ?? f.name ?? '').split('.').pop().toUpperCase()
+export const fileLabel = (files, f) => (files.filter((x) => ext(x) === ext(f)).length > 1
+  ? `${ext(f)} ${(f.key ?? f.name).split('/').pop().split(/[-.]/).filter((t) => LANGS.includes(t)).join(' ').toUpperCase()}`.trim()
+  : ext(f))
+const plain = (e) => !(e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
+
+/* the one Quick Look a page holds: `open(files, index)` and the overlay to render */
+export function useFileQuickLook(urlOf) {
+  const [look, setLook] = useState(null)
+  const overlay = look && <FileQuickLook files={look.files} index={look.index} onIndex={(index) => setLook({ ...look, index })} onClose={() => setLook(null)} urlOf={urlOf} />
+  return [(files, index) => setLook({ files, index }), overlay]
+}
+
+export function DocumentFiles({ row, onOpen }) {
+  if (!row.files?.length) return null
+  return (
+    <div className="flex flex-wrap gap-1">
+      {row.files.map((f, i) => <Button key={f.key} variant="nav" size="sm" onClick={() => onOpen(row.files, i)} title={f.name ?? f.key.split('/').pop()}>{fileLabel(row.files, f)}</Button>)}
+    </div>
+  )
+}
+
+export const DocumentMarkdown = ({ row }) => (
+  <Button variant="nav" size="sm" iconOnly="download" href={`data:text/markdown;charset=utf-8,${encodeURIComponent(row.source ?? '')}`} download={`${row.id.split('/').pop()}.md`} aria-label="Download markdown" />
+)
+
+const DEFAULT_KEYS = ['title', 'kind', 'date', 'lang', 'assets', 'markdown']
+
+function columnsFor({ onNavigate, onOpen }) {
+  return {
+    title: { header: 'Title', accessor: 'title', wrap: true, sortable: true, render: (r) => (
+      <a href={r.to} className="underline-offset-2 hover:underline" onClick={onNavigate ? (e) => { if (!plain(e)) return; e.preventDefault(); onNavigate(r.to) } : undefined}>{r.title}</a>
+    ) },
+    kind: { header: 'Kind', accessor: 'kind', sortable: true },
+    date: { header: 'Date', accessor: 'date', sortable: true },
+    lang: { header: 'Language', accessor: 'lang' },
+    assets: { header: 'Assets', accessor: 'files', render: (r) => <DocumentFiles row={r} onOpen={onOpen} /> },
+    markdown: { header: 'Markdown', accessor: 'source', render: (r) => <DocumentMarkdown row={r} /> },
+  }
+}
+
+export default function DocumentLibrary({ library, folder, columns, view = 'table', onNavigate, urlOf = (f) => f.url }) {
+  const [open, overlay] = useFileQuickLook(urlOf)
+  const named = columnsFor({ onNavigate, onOpen: open })
+  const defaults = DEFAULT_KEYS.map((k) => named[k])
+  const resolve = (c) => (typeof c === 'string' ? named[c] : c)
+  const cols = (typeof columns === 'function' ? columns(defaults) : columns ?? DEFAULT_KEYS).map(resolve).filter(Boolean)
+  const folders = folder != null ? library.folders.filter((f) => f.id === folder) : library.folders
+
+  if (view === 'cards') {
+    /* the contents cards: pages as cards in their folder's part, the originals as file cards (DocumentIndex opens them) */
+    const rows = folders.flatMap((f) => library.rows.filter((r) => r.folder === f.id).flatMap((r) => [
+      { id: r.id, to: r.to, title: r.title, label: r.kind || undefined, part: f.label },
+      ...(r.files ?? []).map((x) => ({ id: `${r.id}:${x.key}`, file: urlOf(x), title: x.name ?? x.key.split('/').pop(), part: f.label })),
+    ]))
+    return <DocumentIndex rows={rows} onNavigate={onNavigate} />
+  }
+  return (
+    <div>
+      {folders.map((f) => (
+        <PageSection key={f.id || 'root'} id={f.id || 'documents'} label={f.label}>
+          <Table columns={cols} rows={library.rows.filter((r) => r.folder === f.id)} width="column" variant="simple" />
+        </PageSection>
+      ))}
+      {overlay}
+    </div>
+  )
+}
+
+/* THE OPEN DOCUMENT: the same Assets and Markdown buttons above `MarkdownPage`, then `actions` — record's DocumentsPage.
+ * Every other prop goes to MarkdownPage (`resolveLink`, `assetUrl`, `toc`, `numbered`, …); `resolveLink` defaults to the
+ * library's own (`libraryLinks`, kol-framework) when the caller passes `library` and no resolver. */
+export function DocumentView({ row, library, urlOf = (f) => f.url, actions, markdown = true, ...page }) {
+  const [open, overlay] = useFileQuickLook(urlOf)
+  if (library && !page.resolveLink) page.resolveLink = libraryLinks(library)
+  return (
+    <>
+      <div className="kol-page flex items-center justify-end gap-1 pb-0">
+        <DocumentFiles row={row} onOpen={open} />
+        {markdown && <DocumentMarkdown row={row} />}
+        {actions}
+      </div>
+      <MarkdownPage key={row.id} source={row.source} {...page} />
+      {overlay}
+    </>
+  )
+}

package/src/index.js

@@ -27,6 +27,7 @@ export { generatePalette, fgOn, hexToHsl, hslToHex, GENERATION_MODES } from './c
 export { default as AssetCard } from './AssetCard.jsx'
 /* a folder's pages as the brand book's contents cards (plan-2026-10-28-document W5.2) */
 export { default as DocumentIndex } from './DocumentIndex.jsx'
+export { default as DocumentLibrary, DocumentView, DocumentFiles, DocumentMarkdown, useFileQuickLook } from './DocumentLibrary.jsx'
 /* print (PdfToolsFromStudio, 2026-10-28): A4 sheets for any content, and markdown to PDF · DOCX · MD on @kolkrabbi/kol-print */
 export { default as A4Pages } from './A4Pages.jsx'
 export { default as PrintStudio } from './PrintStudio.jsx'