@kolkrabbi/kol-styleguide 0.14.1 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.14.1",
+  "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.311.1",
-    "@kolkrabbi/kol-framework": "^0.62.1",
-    "@kolkrabbi/kol-theme": "^0.196.0",
-    "@kolkrabbi/kol-print": "^0.1.0",
-    "@kolkrabbi/kol-icons": "^0.52.0"
+    "@kolkrabbi/kol-component": "^0.315.0",
+    "@kolkrabbi/kol-framework": "^0.64.0",
+    "@kolkrabbi/kol-icons": "^0.52.0",
+    "@kolkrabbi/kol-theme": "^0.198.0",
+    "@kolkrabbi/kol-print": "^0.1.1"
   },
   "files": [
     "src",

package/src/A4Pages.jsx

@@ -1,4 +1,5 @@
 import { useRef, useState, useLayoutEffect } from 'react'
+import { QuickLookFrame } from '@kolkrabbi/kol-component'
 
 /* A4 portrait @96dpi, with print-style page margins. */
 const A4_W = 794
@@ -22,7 +23,11 @@ const CONTENT_H = A4_H - MARGIN * 2 - PRINT_SAFETY
  *
  * Re-measured on resize and as images (heroes) finish loading.
  */
-export default function A4Pages({ children, label }) {
+/* `paged` (LayoutsAppPages, 2026-10-29 — user: *"one in view at a time, then next … we are not reinventing anything, just LOOK
+ * AROUND"*): one sheet in view, centred, paged with QuickLookFrame's `nav` (‹ › and `n / N`, as MediaLibrary and
+ * DocumentIndex page a PDF). Print still prints every sheet. */
+export default function A4Pages({ children, label, paged = false }) {
+  const [at, setAt] = useState(0)
   const measureRef = useRef(null)
   // breaks[k]..breaks[k+1] is page k's vertical slice of the content.
   const [breaks, setBreaks] = useState([0, CONTENT_H])
@@ -74,6 +79,37 @@ export default function A4Pages({ children, label }) {
   }, [])
 
   const pageCount = Math.max(1, breaks.length - 1)
+  const page = Math.min(at, pageCount - 1)
+
+  const sheets = Array.from({ length: pageCount }, (_, k) => {
+    const from = breaks[k] ?? 0
+    const to = breaks[k + 1] ?? from + CONTENT_H
+    return (
+      <section key={k} className={`kol-a4-sheet${paged && k !== page ? ' hidden print:block' : ''}`} aria-label={`${label} — page ${k + 1} of ${pageCount}`}>
+        <div className="kol-a4-clip" style={{ height: to - from }}>
+          {/* Negative margin (not transform) shifts the slice — Chrome's
+              print engine drops images inside transformed containers. */}
+          <div style={{ marginTop: -from }}>{children}</div>
+        </div>
+      </section>
+    )
+  })
+
+  if (paged) {
+    return (
+      <>
+        <div ref={measureRef} className="kol-a4-measure" aria-hidden="true">{children}</div>
+        <div className="flex justify-center print:block">
+          <QuickLookFrame
+            title={label}
+            nav={{ index: page, total: pageCount, onPrev: () => setAt((i) => (i - 1 + pageCount) % pageCount), onNext: () => setAt((i) => (i + 1) % pageCount) }}
+          >
+            <div className="flex justify-center p-6 print:p-0">{sheets}</div>
+          </QuickLookFrame>
+        </div>
+      </>
+    )
+  }
 
   return (
     <>
@@ -82,19 +118,7 @@ export default function A4Pages({ children, label }) {
         {children}
       </div>
 
-      {Array.from({ length: pageCount }, (_, k) => {
-        const from = breaks[k] ?? 0
-        const to = breaks[k + 1] ?? from + CONTENT_H
-        return (
-          <section key={k} className="kol-a4-sheet" aria-label={`${label} — page ${k + 1} of ${pageCount}`}>
-            <div className="kol-a4-clip" style={{ height: to - from }}>
-              {/* Negative margin (not transform) shifts the slice — Chrome's
-                  print engine drops images inside transformed containers. */}
-              <div style={{ marginTop: -from }}>{children}</div>
-            </div>
-          </section>
-        )
-      })}
+      {sheets}
     </>
   )
 }

package/src/AssetTable.jsx

@@ -101,40 +101,49 @@ export default function AssetTable({
          against the table's own ground — the consumer's behaviour, kept. */
       className: (row) =>
         `kol-table-cell-text${inkTokens && tokenFor(row.id) !== inkTokens.ink ? ' bg-fg-04' : ''}`,
-      style: { minWidth: 160 },
+      style: { minWidth: 112 },
       render: (row) => <PreviewCell row={row} token={tokenFor(row.id)} onZoom={onPreviewZoom} />,
     },
     {
       accessor: 'name',
       header: 'Name',
-      className: 'kol-table-cell-text',
+      /* a name wraps at its words (`lockup / hori / wide`); a path never does */
+      className: 'kol-table-cell-text kol-table-cell-text--wrap',
+      style: { minWidth: 80 },
     },
     hasPath && {
       accessor: 'path',
       header: 'Path',
-      className: 'kol-table-cell-meta',
+      /* a path never wraps at its slash (LayoutsAppPages, 2026-10-29: `marks/` ⏎ `logomark-01.svg`) — it takes the width it
+         needs, from Preview, which has more than it uses */
+      className: 'kol-table-cell-meta whitespace-nowrap',
       render: (row) => (row.path ? <code>{row.path}</code> : null),
     },
     {
       accessor: 'format',
       header: 'Format',
-      className: 'kol-table-cell-meta',
+      className: 'kol-table-cell-meta whitespace-nowrap',
+      /* the meta cell's 160px floor is for prose; `SVG` needs a word's width — the room goes to Path (LayoutsAppPages) */
+      style: { minWidth: 0 },
     },
     {
       accessor: 'dimensions',
       header: 'Dimensions',
-      className: 'kol-table-cell-meta',
+      className: 'kol-table-cell-meta whitespace-nowrap',
+      style: { minWidth: 0 },
     },
     inkTokens && {
       accessor: 'color',
       header: 'Color',
-      className: 'kol-table-cell-meta',
+      className: 'kol-table-cell-meta whitespace-nowrap',
+      style: { minWidth: 0 },
       render: (row) => <code>{tokenFor(row.id)}</code>,
     },
     hasDownload && {
       accessor: 'download',
       header: 'Download',
-      style: { width: 96 },
+      /* no fixed 96px: the chips are wider than that, and the column was clipped ("Co…") */
+      className: 'whitespace-nowrap',
       render: (row) => (
         <DownloadControl
           row={row}
@@ -145,7 +154,8 @@ export default function AssetTable({
     },
   ].filter(Boolean)
 
-  return <Table caption={caption} columns={columns} rows={withId} variant={variant} className={className} />
+  /* a DATA table: it runs the content column (Table `width="column"`), not the prose panel cap it stopped at */
+  return <Table caption={caption} columns={columns} rows={withId} variant={variant} className={className} width="column" />
 }
 
 /* Preview cell. With `onZoom` it is a zoom button; without, the bare node —
@@ -156,7 +166,8 @@ function PreviewCell({ row, token, onZoom }) {
 
   const style = {
     ...(token ? { color: `var(${token})` } : {}),
-    ...(row.previewWidth ? { width: row.previewWidth } : {}),
+    /* up to its width, down to the column's — the preview scales before the table runs out of its column */
+    ...(row.previewWidth ? { width: '100%', maxWidth: row.previewWidth } : {}),
   }
 
   if (!onZoom) {

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'