@kolkrabbi/kol-styleguide 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "private": false,
   "description": "Brand guide components and the brand tool",
   "license": "MIT",
@@ -21,11 +21,11 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-print": "^0.1.0",
-    "@kolkrabbi/kol-component": "^0.311.0",
-    "@kolkrabbi/kol-theme": "^0.196.0",
-    "@kolkrabbi/kol-framework": "^0.61.0",
-    "@kolkrabbi/kol-icons": "^0.52.0"
+    "@kolkrabbi/kol-component": "^0.313.0",
+    "@kolkrabbi/kol-framework": "^0.62.4",
+    "@kolkrabbi/kol-icons": "^0.52.0",
+    "@kolkrabbi/kol-print": "^0.1.1",
+    "@kolkrabbi/kol-theme": "^0.196.0"
   },
   "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/TypeBlock.jsx

@@ -1,4 +1,4 @@
-import { familyFor } from './typographyCuts'
+import { familyFor } from './typographyCuts.js'
 
 /**
  * TypeBlock — typography specimen primitive.