@kolkrabbi/kol-styleguide 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Brand guide components and the brand tool",
   "license": "MIT",
@@ -21,8 +21,8 @@
   },
   "devDependencies": {
     "@kolkrabbi/kol-framework": "^0.57.0",
-    "@kolkrabbi/kol-component": "^0.305.0",
     "@kolkrabbi/kol-icons": "^0.47.0",
+    "@kolkrabbi/kol-component": "^0.305.0",
     "@kolkrabbi/kol-theme": "^0.191.0"
   },
   "files": [

package/src/BrandAssets.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ContentCollection, FullscreenOverlay, Table } from '@kolkrabbi/kol-component'
+import { ContentCollection, FullscreenOverlay, Graphic, GRAPHIC_RAW, Table } from '@kolkrabbi/kol-component'
 import PageSection from '@kolkrabbi/kol-framework/src/PageSection.jsx'
 import AssetTable from './AssetTable.jsx'
 import AssetCard from './AssetCard.jsx'
@@ -20,6 +20,31 @@ const TokenName = ({ children }) => (
   <code className="kol-helper-12 text-emphasis">{children}</code>
 )
 
+/* a graphic from kol-component's set as an asset row — kol-website's graphicRows, its 80px preview */
+const graphicRows = (category, names = []) => names.map((name) => {
+  const raw = GRAPHIC_RAW[category]?.[name]
+  return {
+    id: `${category}/${name}`, name, preview: <Graphic category={category} name={name} />, previewWidth: 80,
+    path: `packages/component/src/graphics/svg/${category}/${name}.svg`, format: 'SVG', dimensions: svgDims(raw), raw,
+    onDownload: raw ? (row, ink) => downloadRecolored(row.raw, ink, `${name}.svg`) : undefined,
+  }
+})
+
+/* square preview tile with its category / name — kol-website's GraphicCard */
+function GraphicCard({ category, name, polarity = 'dark' }) {
+  const bg = polarity === 'dark' ? 'bg-surface-inverse' : 'bg-surface-primary'
+  return (
+    <figure>
+      <div className={`aspect-square flex items-center justify-center rounded-[4px] overflow-hidden ${bg}`}>
+        <Graphic category={category} name={name} />
+      </div>
+      <figcaption className="kol-helper-12 uppercase tracking-wider text-meta mt-2">
+        {category} / {name}
+      </figcaption>
+    </figure>
+  )
+}
+
 const brandedAssetCols = [
   { accessor: 'item',   header: 'Item',   render: (r) => <TokenName>{r.item}</TokenName> },
   { accessor: 'aspect', header: 'Aspect' },
@@ -30,7 +55,8 @@ const brandedAssetCols = [
 
 /**
  * BrandAssets — The brand book's assets page. the ASSETS page of the brand tool: what you download or reproduce. Logos (the
- * mark table, with the ink toggle, zoom and recoloured download), the branded-asset register,
+ * mark table, with the ink toggle, zoom and recoloured download), Graphics and Patterns (the manifest's `graphics`, names
+ * from kol-component's set by category, on the same table), the branded-asset register,
  * stationery, social post sizes and profile avatars.
  *
  * kol-olina's apps/brand `pages/assets/*`, carried class-for-class; the client's marks, contact
@@ -95,6 +121,19 @@ export default function BrandAssets({ brand, Logo, logoSources }) {
               </FullscreenOverlay>
             </PageSection>
           )
+          case 'graphics':
+          case 'patterns': return (
+            <PageSection key={s.key} {...head}>
+              <AssetTable caption={s.title} rows={graphicRows(s.category, brand.graphics[s.category])} inkTokens={INK_TOKENS} />
+            </PageSection>
+          )
+          case 'graphicsPatterns': return (
+            <PageSection key={s.key} {...head}>
+              <div className="kol-grid mt-8">
+                {brand.graphics[s.category].map((name) => <GraphicCard key={name} category={s.category} name={name} />)}
+              </div>
+            </PageSection>
+          )
           case 'branded': return (
             <PageSection key={s.key} {...head}>
               <Table caption="Branded assets" columns={brandedAssetCols} rows={BRANDED_ASSET_ROWS} className="mt-8" />

package/src/brandBook.js

@@ -28,6 +28,13 @@ export const BOOK_SECTIONS = [
 export const ASSET_SECTIONS = [
   { key: 'assetsOverview', id: 'assets-overview', label: 'Assets', title: 'Downloads and reproduction', lede: 'Everything you download or reproduce. Brand documents the identity; this holds the files and the specs for making them.' },
   { key: 'logos', id: 'logos', nav: 'Logos', label: '01 — logos', title: 'Logos' },
+  /* kol-website's Assets page (BrandAssetsGraphicsAndPatterns, 2026-10-27): the manifest's `graphics` — names from
+     kol-component's set by category, `{ abstract: [...], patterns: [...] }`. The Patterns page there carried a second
+     block, the cards (`graphics-patterns`); it rides under Patterns, off the rail, as it did. Ledes named repo paths,
+     so they are the manifest's to set, as Logos' is. */
+  { key: 'graphics', id: 'graphics', nav: 'Graphics', label: '02 — graphics', title: 'Graphics', category: 'abstract' },
+  { key: 'patterns', id: 'patterns', nav: 'Patterns', label: '03 — patterns', title: 'Patterns', category: 'patterns' },
+  { key: 'graphicsPatterns', id: 'graphics-patterns', label: '16 — graphics · patterns', title: 'Patterns', category: 'patterns' },
   { key: 'branded', id: 'branded-assets', nav: 'Branded', label: '04 — branded', title: 'Branded assets' },
   { key: 'stationery', id: 'assets-stationery', nav: 'Stationery', label: '08 — assets · stationery', title: 'Stationery', lede: 'Standard correspondence — business card, envelope, letterhead, email signature. Quiet typography, generous space, monochrome restraint.' },
   { key: 'labels', id: 'labels', nav: 'Labels', label: '09 — labels', title: 'Labels', copy: true },
@@ -53,6 +60,7 @@ function shows(s, brand) {
   if (s.copy) return hasCopy(s)
   if (s.key === 'color') return Boolean(brand?.ramps?.length) || hasCopy(s)
   if (s.key === 'logos') return Boolean(brand?.logos?.length)
+  if (s.category) return Boolean(brand?.graphics?.[s.category]?.length)
   /* the marks sections draw the manifest's logos — their default lede is not enough to show empty frames */
   if (s.key === 'logo' || s.key === 'lockups') return Boolean(brand?.logos?.length || s.blocks?.length || s.after?.length)
   if (s.key === 'social') return Boolean(brand?.social?.templates?.length)