@kolkrabbi/kol-styleguide 0.9.0 → 0.11.0

package/package.json

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

package/src/BrandAssets.jsx

@@ -1,67 +1,18 @@
-import { useState } from 'react'
-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'
-import { BrandAvatar } from './SocialMocks.jsx'
-import { BusinessCardBack, BusinessCardFront, EmailSignature, Envelope, Letterhead } from './StationeryMocks.jsx'
-import BrandMark from './BrandMark.jsx'
-import { Prose, SectionIndex } from './BrandBook.jsx'
-import {
-  brandSections, brandInfo, STATIONERY_MARKS, BRANDED_ASSET_ROWS, svgDims, downloadRecolored,
-} from './brandBook.js'
+import { GuideChapters } from './BrandGuide.jsx'
+import { ASSET_SECTIONS } from './brandBook.js'
 
-/* taxonomy-ok: organism — the brand book's assets page: PageSection chapters over AssetTable, Table, AssetCard and the stationery / social mocks */
-
-/* The pair the Logos table's Color column swings between. */
-const INK_TOKENS = { ink: '--kol-surface-on-primary', surface: '--kol-surface-primary' }
-
-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' },
-  { accessor: 'surface', header: 'Surface' },
-  { accessor: 'status', header: 'Status', render: (r) => <span className="kol-helper-12 text-meta uppercase tracking-widest">{r.status}</span> },
-  { accessor: 'note',   header: 'Note' },
-]
+/* taxonomy-ok: organism — the brand book's assets page: the guide's chapters over ASSET_SECTIONS */
 
 /**
  * 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), 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.
+ * mark table, with the ink toggle, zoom and recoloured download), Graphics and Patterns (the manifest's `graphics`),
+ * the branded-asset register, stationery (and `stationery.letterheadB`), social post sizes (photos or the drawn mocks)
+ * and profile avatars.
  *
- * kol-olina's apps/brand `pages/assets/*`, carried class-for-class; the client's marks, contact
- * details, templates and avatar grounds come from the manifest (`logos`, `meta`, `stationery.marks`,
- * `social`). Sections with nothing to show are left out — see `brandSections`.
+ * `BrandGuide`'s chapters over `ASSET_SECTIONS` (0.11.0 — one renderer; the page's own, carried from kol-olina's
+ * apps/brand `pages/assets/*`, is in `_tmp/2026-10-28-brand-book-one-renderer/`). The client's marks, contact details,
+ * templates and avatar grounds come from the manifest (`logos`, `meta`, `stationery`, `social`, `graphics`); sections
+ * with nothing to show are left out.
  *
  * @param {Object}   brand     a brand manifest (`@kolkrabbi/kol-brand-template` schema)
  * @param {Function} Logo      optional mark component, `<Logo variant="wordmark" />`
@@ -69,123 +20,5 @@ const brandedAssetCols = [
  *                             the marks themselves when no `Logo` is given
  */
 export default function BrandAssets({ brand, Logo, logoSources }) {
-  const sections = brandSections(brand, 'assets')
-  const mark = (id, props) => <BrandMark id={id} Logo={Logo} sources={logoSources} {...props} />
-  const index = sections.filter((s) => s.nav)
-  const marks = { ...STATIONERY_MARKS, ...(brand?.stationery?.marks ?? {}) }
-  const info = brandInfo(brand)
-  const [zoom, setZoom] = useState(null)
-
-  const logoRows = (brand?.logos ?? []).map((logo) => {
-    const raw = logoSources?.[logo.id]
-    return {
-      id:           logo.id,
-      name:         logo.id.replace(/-/g, ' / '),
-      preview:      mark(logo.id),
-      previewWidth: logo.previewWidth ?? 48,
-      path:         logo.file?.replace(/^\.\//, ''),
-      format:       'SVG',
-      dimensions:   svgDims(raw),
-      raw,
-      onDownload:   raw ? (row, ink) => downloadRecolored(row.raw, ink, `${logo.id}.svg`) : undefined,
-    }
-  })
-
-  return (
-    <>
-      {sections.map((s) => {
-        const head = { id: s.id, label: s.label, title: s.title, body: s.lede }
-        switch (s.key) {
-          case 'assetsOverview': return (
-            <PageSection key={s.key} {...head}>
-              <SectionIndex sections={index} />
-            </PageSection>
-          )
-          case 'logos': return (
-            <PageSection key={s.key} {...head}>
-              <AssetTable
-                caption="Logos"
-                rows={logoRows}
-                inkTokens={INK_TOKENS}
-                onPreviewZoom={(row, ink) => setZoom({ row, ink })}
-              />
-              <FullscreenOverlay open={!!zoom} onClose={() => setZoom(null)}>
-                {zoom && (
-                  <span
-                    className="inline-flex items-center p-12"
-                    style={{ color: zoom.ink, width: 'min(60vw, 480px)' }}
-                  >
-                    {zoom.row.preview}
-                  </span>
-                )}
-              </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" />
-            </PageSection>
-          )
-          case 'stationery': return (
-            <PageSection key={s.key} {...head}>
-              <div className="kol-grid mt-8">
-                <div className="col-span-2"><AssetCard><BusinessCardFront mark={mark(marks.card, { className: 'max-h-[70%]' })} /></AssetCard></div>
-                <div className="col-span-2"><AssetCard><Envelope mark={mark(marks.envelope)} info={info} /></AssetCard></div>
-                <div className="col-span-2 flex flex-col gap-3">
-                  <AssetCard><BusinessCardBack info={info} /></AssetCard>
-                  <AssetCard><EmailSignature mark={mark(marks.signature)} info={info} /></AssetCard>
-                </div>
-                <div className="col-span-2"><AssetCard><Letterhead mark={mark(marks.letter, { style: { height: '100%', width: 'auto' } })} info={info} /></AssetCard></div>
-              </div>
-            </PageSection>
-          )
-          case 'social': return (
-            <PageSection key={s.key} {...head}>
-              <ContentCollection cols={3} className="mt-8 items-start">
-                {brand.social.templates.map(({ caption, ratio, src }) => (
-                  <AssetCard key={caption ?? src} caption={caption}>
-                    <div className="relative overflow-hidden" style={{ aspectRatio: ratio }}>
-                      <img src={src} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
-                      <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/60 to-transparent" aria-hidden="true" />
-                      <div className="absolute bottom-[6%] left-[6%] w-[42%] text-fg-inverse">
-                        {mark(brand.social.mark ?? 'wordmark', { title: brand?.meta?.name })}
-                      </div>
-                    </div>
-                  </AssetCard>
-                ))}
-              </ContentCollection>
-            </PageSection>
-          )
-          case 'profile': return (
-            <PageSection key={s.key} {...head}>
-              <div className="kol-grid mt-8 items-start">
-                {brand.social.avatars.map(({ bg, polarity }, i) => (
-                  <AssetCard key={i}><BrandAvatar mark={mark(marks.avatar, { className: 'w-1/2' })} bg={bg} polarity={polarity} /></AssetCard>
-                ))}
-              </div>
-            </PageSection>
-          )
-          default: return (
-            <PageSection key={s.key} {...head}>
-              <Prose blocks={s.blocks} />
-              <Prose blocks={s.after} />
-            </PageSection>
-          )
-        }
-      })}
-    </>
-  )
+  return <GuideChapters brand={brand} sections={ASSET_SECTIONS} Logo={Logo} logoSources={logoSources} />
 }

package/src/BrandBook.jsx

@@ -1,255 +1,20 @@
-import { ContentCollection } from '@kolkrabbi/kol-component'
-import { Icon } from '@kolkrabbi/kol-icons'
-import PageHero from '@kolkrabbi/kol-framework/src/PageHero.jsx'
-import PageSection from '@kolkrabbi/kol-framework/src/PageSection.jsx'
-import LogoCard from './LogoCard.jsx'
-import Swatch from './Swatch.jsx'
-import BrandMark from './BrandMark.jsx'
-import { brandSections, scrollToAnchor } from './brandBook.js'
-import { typeSections } from './typeSpecimen.js'
+import { GuideChapters } from './BrandGuide.jsx'
+import { BOOK_SECTIONS } from './brandBook.js'
 
-/* taxonomy-ok: organism — the brand book's identity page: PageHero + PageSection chapters over LogoCard, Swatch and the type specimens */
+/* taxonomy-ok: organism — the brand book's identity page: the guide's chapters over BOOK_SECTIONS */
 
 /**
  * BrandBook — The brand book's identity page. the BRAND page of the brand tool: the identity, one scrolling page of chapters
  * (About · Tone · Look · Logo · Lockups · Color · Typography) under a hero and a chapter index.
  *
- * kol-olina's apps/brand `pages/brand/*`, carried class-for-class; what was that client's copy now
- * comes from the manifest (`brand.book`, `brand.ramps`, `brand.type`, `brand.logos`). Sections with
- * nothing to show for the manifest are left out — see `brandSections`.
+ * `BrandGuide`'s chapters over `BOOK_SECTIONS` (0.11.0 — one renderer; the book's own, carried from kol-olina's
+ * apps/brand `pages/brand/*`, is in `_tmp/2026-10-28-brand-book-one-renderer/`). The copy comes from the manifest
+ * (`brand.book`, `brand.ramps`, `brand.type`, `brand.logos`); sections with nothing to show are left out.
  *
  * @param {Object}   brand     a brand manifest (`@kolkrabbi/kol-brand-template` schema)
  * @param {Function} Logo      optional mark component, `<Logo variant="wordmark" />`
  * @param {Object}   logoSources  `{ [logoId]: rawSvg }` — drawn when no `Logo` is given
  */
 export default function BrandBook({ brand, Logo, logoSources }) {
-  const sections = brandSections(brand, 'brand')
-  const mark = (id, props) => <BrandMark id={id} Logo={Logo} sources={logoSources} {...props} />
-  const index = sections.filter((s) => s.nav)
-
-  return (
-    <>
-      {sections.map((s) => {
-        switch (s.key) {
-          case 'hero': return <PageHero key={s.key} id={s.id} label={s.label} title={s.title} lede={s.lede} />
-          case 'overview': return (
-            <PageSection key={s.key} id={s.id} label={s.label} title={s.title} body={s.lede}>
-              <SectionIndex sections={index} />
-            </PageSection>
-          )
-          case 'logo': return (
-            <PageSection key={s.key} id={s.id} label={s.label} title={s.title} body={s.lede}>
-              <Prose blocks={s.blocks} />
-              <div className="kol-grid mt-12">
-                {s.marks.map((id) => <LogoCard key={id} logo={mark(id)} frame={false} />)}
-              </div>
-              <Prose blocks={s.after} />
-            </PageSection>
-          )
-          case 'lockups': return (
-            <PageSection key={s.key} id={s.id} label={s.label} title={s.title} body={s.lede}>
-              <Prose blocks={s.blocks} />
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
-                {s.marks.map((id) => (
-                  <LogoCard
-                    key={id}
-                    logo={mark(id)}
-                    caption={brand?.logos?.find((l) => l.id === id)?.name ?? id}
-                    className="[&_figcaption]:uppercase"
-                  />
-                ))}
-              </div>
-              <Prose blocks={s.after} />
-            </PageSection>
-          )
-          case 'color': return <ColorSection key={s.key} s={s} ramps={brand?.ramps ?? []} />
-          case 'typography': return <TypographySection key={s.key} s={s} brand={brand} />
-          default: return (
-            <PageSection key={s.key} id={s.id} label={s.label} title={s.title} body={s.lede}>
-              <Prose blocks={s.blocks} />
-              <Prose blocks={s.after} />
-            </PageSection>
-          )
-        }
-      })}
-    </>
-  )
-}
-
-/** Book copy → `.kol-prose`: a string is a paragraph, `{ h }` a sub-heading, `{ lead, text }` a
- *  paragraph opening on a bold lead. `head` renders inside the same block, after the copy. */
-export function Prose({ blocks, head, className = 'mt-12' }) {
-  if (!blocks?.length && !head) return null
-  return (
-    <div className={`kol-prose ${className}`}>
-      {(blocks ?? []).map((b, i) => {
-        if (typeof b === 'string') return <p key={i}>{b}</p>
-        if (b.h) return <h3 key={i}>{b.h}</h3>
-        return <p key={i}><strong>{b.lead}</strong> {b.text}</p>
-      })}
-      {head}
-    </div>
-  )
-}
-
-/** The page's chapters as cards — olina's CategoryIndex, read from the sections instead of a nav
- *  tree. The links are the sections' anchors; the click scrolls instead of setting the hash. */
-export function SectionIndex({ sections }) {
-  if (!sections.length) return null
-  return (
-    <ul className="mt-12 grid gap-2 grid-cols-1 md:grid-cols-2 max-w-panel">
-      {sections.map((s) => (
-        <li key={s.id}>
-          <a
-            href={`#${s.id}`}
-            onClick={scrollToAnchor}
-            className="kol-card kol-card-interactive flex items-center justify-between gap-4 px-4 py-3 no-underline group"
-          >
-            <span className="kol-mono-14 text-emphasis">{s.nav}</span>
-            <Icon name="arrow-right" size={16} className="text-oq-48 group-hover:text-emphasis transition-colors" />
-          </a>
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-/* Color — the copy, then one swatch row per ramp under its label and note. The first ramp's
- * heading sits in the copy's own prose block (olina's Concept + Greyscale were one block); each
- * further ramp opens its own, as kol-website's hue ramps did. */
-function ColorSection({ s, ramps }) {
-  const heading = (r) => <><h3>{r.label}</h3>{r.note && <p>{r.note}</p>}</>
-  const swatches = (r) => (
-    <ContentCollection cols={{ sm: 2, md: 5 }} gap={16} className="mt-8">
-      {(r.stops ?? []).map((st) => (
-        <Swatch key={st.stop} hex={st.value} name={`${r.id}-${st.stop}`} anchor={st.stop === r.anchor} />
-      ))}
-    </ContentCollection>
-  )
-  return (
-    <PageSection id={s.id} label={s.label} title={s.title} body={s.lede}>
-      {ramps.map((r, i) => (
-        <div key={r.id ?? i}>
-          {i === 0
-            ? <Prose blocks={s.blocks} head={heading(r)} />
-            : <div className="kol-prose mt-12">{heading(r)}</div>}
-          {swatches(r)}
-        </div>
-      ))}
-      {!ramps.length && <Prose blocks={s.blocks} />}
-      <Prose blocks={s.after} />
-    </PageSection>
-  )
-}
-
-function TypographySection({ s, brand }) {
-  return (
-    <PageSection id={s.id} label={s.label} title={s.title} body={s.lede}>
-      <Prose blocks={s.blocks} />
-      {/* Sans italic at display size — real italic cuts, fired by plain font-style: italic. */}
-      <div className="mt-12 flex flex-col gap-2 py-3 border-b border-fg-08">
-        <span className="kol-mono-12 text-meta uppercase tracking-wider">
-          .kol-prose-display-md · sans narrow · roman + italic
-        </span>
-        <p className="kol-prose-display-md m-0">
-          The quick <span className="italic">brown</span> fox jumps over the lazy dog
-        </p>
-      </div>
-
-      {typeSections(brand).map((section) => (
-        <div key={section.id} className="mt-12">
-          <div className="kol-prose max-w-measure">
-            <h3>{section.title}</h3>
-            <p>{section.intro}</p>
-            {section.reasoning && (
-              <p className="text-meta italic">{section.reasoning}</p>
-            )}
-          </div>
-          <div className="mt-8 flex flex-col gap-6">
-            {section.rows.map((row, i) => (
-              <TypeShowcase key={`${section.id}-${i}`} sectionId={section.id} row={row} />
-            ))}
-          </div>
-        </div>
-      ))}
-      <Prose blocks={s.after} />
-    </PageSection>
-  )
-}
-
-/* One specimen row, adapted to its section (olina's brand-bits `TypeShowcase`, verbatim). */
-function TypeShowcase({ sectionId, row }) {
-  if (sectionId === 'sans-families') {
-    return (
-      <div className="flex flex-col gap-2 py-3 border-b border-fg-08">
-        <span className="kol-helper-12 text-meta uppercase tracking-wider">{row.token}</span>
-        <span className="text-emphasis" style={{ fontFamily: `var(${row.token})`, fontSize: 28 }}>
-          {row.cut}
-        </span>
-        <span className="kol-helper-10 text-subtle">{row.role}</span>
-      </div>
-    )
-  }
-
-  if (sectionId === 'sans-atomic') {
-    const cls = row.cls.replace(/^\./, '')
-    return (
-      <div className="flex flex-col gap-2 py-3 border-b border-fg-08">
-        <span className="kol-helper-12 text-meta uppercase tracking-wider">
-          {row.cls} · {row.family} · {row.weight}
-        </span>
-        <div className={cls}>The quick brown fox jumps over the lazy dog</div>
-      </div>
-    )
-  }
-
-  if (sectionId === 'prose') {
-    const tag = (row.class.match(/h[1-6]|p|code|pre/) || [])[0]
-    const word = row.role
-    let sample
-    if (tag === 'h1') sample = <h1>{word}</h1>
-    else if (tag === 'h2') sample = <h2>{word}</h2>
-    else if (tag === 'h3') sample = <h3>{word}</h3>
-    else if (tag === 'h4') sample = <h4>{word}</h4>
-    else if (tag === 'h5') sample = <h5>{word}</h5>
-    else if (tag === 'h6') sample = <h6>{word}</h6>
-    else if (tag === 'code') sample = <p>Inline <code>code</code> in body copy.</p>
-    else if (tag === 'pre') sample = <pre>{`code block\nlines preserved`}</pre>
-    else sample = <span className={row.class.replace(/^\./, '').replace(/^kol-prose /, '')}>{word}</span>
-    return (
-      <div className="flex flex-col gap-2 py-3 border-b border-fg-08">
-        <span className="kol-helper-12 text-meta uppercase tracking-wider">
-          {row.class} · {row.family} · {row.weight}
-        </span>
-        <div className="kol-prose">{sample}</div>
-      </div>
-    )
-  }
-
-  if (sectionId === 'mono') {
-    const cls = row.cls.replace(/^\./, '')
-    return (
-      <div className="flex flex-col gap-2 py-3 border-b border-fg-08">
-        <span className="kol-helper-10 text-meta uppercase tracking-wider">
-          {row.cls} · weight {row.weight} · LH {typeof row.lh === 'number' ? `${row.lh}px` : row.lh} · LS {row.ls}
-        </span>
-        <span className={cls}>The quick brown fox jumps over the lazy dog</span>
-      </div>
-    )
-  }
-
-  if (sectionId === 'opacity' && row.name && row.pct !== undefined) {
-    return (
-      <div className="flex flex-col gap-2 py-3 border-b border-fg-08">
-        <span className="kol-helper-12 text-meta uppercase tracking-wider">
-          .text-{row.name} · {row.pct}% · {row.role}
-        </span>
-        <span className={`text-${row.name}`} style={{ fontSize: 18 }}>
-          The quick brown fox jumps over the lazy dog
-        </span>
-      </div>
-    )
-  }
-
-  return null
+  return <GuideChapters brand={brand} sections={BOOK_SECTIONS} Logo={Logo} logoSources={logoSources} />
 }

package/src/BrandGuide.jsx

@@ -1,9 +1,11 @@
-/* BrandGuide — kol-branding's guide renderer (src/template/book/BrandBook.jsx + Brand.jsx, 2026-10-24), carried
- * class-for-class for the brand guide outline (BrandGuideOutlineTwoVersions, kol-hq 2026-10-27). Two changes, both
- * because a package cannot carry them: the research line under each chapter (`Source`, kol-branding's own citations)
- * stays there, and the Contents card is an in-page anchor only (no router in this package). */
+/* THE ONE BRAND RENDERER. kol-branding's guide renderer (src/template/book/BrandBook.jsx + Brand.jsx, 2026-10-24),
+ * carried class-for-class for the brand guide outline (BrandGuideOutlineTwoVersions, kol-hq 2026-10-27) — and since
+ * 0.11.0 what `BrandBook` and `BrandAssets` draw through too (user 2026-10-28, two contents pages for one thing: "if
+ * you can't maintain it, it's too complicated"). The old book's own renderer, with its Swatch palette and KOL-type
+ * chapters, is in `_tmp/2026-10-28-brand-book-one-renderer/`. Two things stay in kol-branding because a package cannot
+ * carry them: the research line under each chapter (its own citations) and the router on the Contents card. */
 import { useState } from 'react'
-import { ColorRamp, ContentCollection, DocsToc, FullscreenOverlay, Table } from '@kolkrabbi/kol-component'
+import { ColorRamp, ContentCollection, DocsToc, FullscreenOverlay, Graphic, GRAPHIC_RAW, Table } from '@kolkrabbi/kol-component'
 import { Icon } from '@kolkrabbi/kol-icons'
 import PageHero from '@kolkrabbi/kol-framework/src/PageHero.jsx'
 import PageSection from '@kolkrabbi/kol-framework/src/PageSection.jsx'
@@ -11,8 +13,8 @@ import LogoCard from './LogoCard.jsx'
 import AssetTable from './AssetTable.jsx'
 import AssetCard from './AssetCard.jsx'
 import BrandMark from './BrandMark.jsx'
-import { BrandAvatar } from './SocialMocks.jsx'
-import { BusinessCardBack, BusinessCardFront, EmailSignature, Envelope, Letterhead } from './StationeryMocks.jsx'
+import { BrandAvatar, PostEditorial, PostPhoto, StoryPhoto } from './SocialMocks.jsx'
+import { BusinessCardBack, BusinessCardFront, EmailSignature, Envelope, Letterhead, LetterheadB } from './StationeryMocks.jsx'
 import { brandInfo, STATIONERY_MARKS, BRANDED_ASSET_ROWS, scrollToAnchor, svgDims, downloadRecolored } from './brandBook.js'
 import { guideSections, guideToc, stopHex, contrast } from './guideBook.js'
 
@@ -32,21 +34,27 @@ import { guideSections, guideToc, stopHex, contrast } from './guideBook.js'
  * @param {string}   className    classes on the root
  */
 export default function BrandGuide({ brand, sections, Logo, logoSources, structure, className = '' }) {
-  const list = guideSections(brand, sections)
-  const mark = (id, props) => <BrandMark id={id} Logo={Logo} sources={logoSources} {...props} />
-  const index = list.filter((s) => s.nav)
   return (
     /* `xl:pr-32` — the rail is `position: fixed` on the right edge from xl up, and the pages' grids
        run to the frame's edge; the padding keeps the last column out from under it */
     <div className={`xl:pr-32 ${className}`.trim()}>
-      {list.map((s) => (s.kind === 'hero'
-        ? <PageHero key={s.key} id={s.id} label={s.label} title={s.title} lede={s.lede} />
-        : <Chapter key={s.key} s={s} brand={brand} mark={mark} index={index} logoSources={logoSources} structure={structure} />))}
+      <GuideChapters brand={brand} sections={sections} Logo={Logo} logoSources={logoSources} structure={structure} />
       <DocsToc variant="rail" toc={guideToc(brand, sections)} onNavigate={scrollToAnchor} className="hidden xl:flex" />
     </div>
   )
 }
 
+/** GuideChapters — the chapters alone, no rail: the hero, then one Chapter per row that shows for this manifest.
+ *  `BrandBook` and `BrandAssets` are this over `BOOK_SECTIONS` and `ASSET_SECTIONS`; `Brand` puts the rail beside them. */
+export function GuideChapters({ brand, sections, Logo, logoSources, structure }) {
+  const list = guideSections(brand, sections)
+  const mark = (id, props) => <BrandMark id={id} Logo={Logo} sources={logoSources} {...props} />
+  const index = list.filter((s) => s.nav)
+  return list.map((s) => (s.kind === 'hero'
+    ? <PageHero key={s.key} id={s.id} label={s.label} title={s.title} lede={s.lede} />
+    : <Chapter key={s.key} s={s} brand={brand} mark={mark} index={index} logoSources={logoSources} structure={structure} />))
+}
+
 function Chapter({ s, brand, mark, index, logoSources, structure }) {
   const Specimen = SPECIMENS[s.kind ?? 'prose']
   return (
@@ -263,17 +271,37 @@ function Stationery({ brand, mark }) {
         <AssetCard caption="Email signature"><EmailSignature mark={mark(marks.signature)} info={info} /></AssetCard>
       </div>
       <div className="col-span-2"><AssetCard caption="Letterhead"><div className="aspect-[210/297]"><Letterhead mark={mark(marks.letter, { style: { height: '100%', width: 'auto' } })} info={info} /></div></AssetCard></div>
+      {/* the second letterhead, its own row (kol-website's Stationery page): `stationery.letterheadB: true` */}
+      {brand?.stationery?.letterheadB && (
+        <div className="col-span-2">
+          <AssetCard caption="Letterhead, A4 [B]"><LetterheadB mark={mark(marks.letter, { style: { display: 'inline-block', height: 48, width: 'auto' } })} info={info} /></AssetCard>
+        </div>
+      )}
     </div>
   )
 }
 
-/* Social — one frame per template at its ratio; the image when the manifest has one, the mark on a plain ground when not. */
+/* the drawn social mocks a template may name instead of a photo (kol-website's Social page, 2026-10-14) */
+const SOCIAL_MOCKS = { PostPhoto, PostEditorial, StoryPhoto }
+
+/* Social — one frame per template at its ratio: a drawn mock when the row names one (`mock` — a SOCIAL_MOCKS name or a
+ * node; it carries the brand's logomark itself, so no overlay; `ratio` boxes one that does not size itself), the image
+ * when it has `src`, the mark on a plain ground when it has neither. */
 function Social({ brand, mark }) {
   const templates = brand?.social?.templates ?? []
+  const marks = { ...STATIONERY_MARKS, ...(brand?.stationery?.marks ?? {}) }
   if (!templates.length) return null
   return (
     <ContentCollection cols={3} className="mt-8 items-start">
-      {templates.map(({ caption, ratio, src }) => (
+      {templates.map(({ caption, ratio, src, mock }) => mock ? (
+        <AssetCard key={caption ?? String(mock)} caption={caption}>
+          {(() => {
+            const Mock = typeof mock === 'string' ? SOCIAL_MOCKS[mock] : null
+            const node = Mock ? <Mock mark={mark(marks.avatar)} /> : mock
+            return ratio ? <div className="overflow-hidden rounded-sm" style={{ aspectRatio: ratio }}>{node}</div> : node
+          })()}
+        </AssetCard>
+      ) : (
         <AssetCard key={caption ?? src} caption={caption}>
           <div className={`relative overflow-hidden ${src ? '' : 'bg-fg-08'}`} style={{ aspectRatio: ratio }}>
             {src && <img src={src} alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover" />}
@@ -299,8 +327,41 @@ function Profile({ brand, mark }) {
   )
 }
 
+/* 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,
+  }
+})
+
+/* Graphics · Patterns — the manifest's `graphics[category]` names on the asset table, ink toggle and recoloured download */
+function Graphics({ s, brand }) {
+  return <AssetTable caption={s.title} rows={graphicRows(s.category, brand?.graphics?.[s.category])} inkTokens={INK_TOKENS} className="mt-8" />
+}
+
+/* the same names as square tiles with their category / name — kol-website's GraphicCard grid */
+function GraphicCards({ s, brand }) {
+  return (
+    <div className="kol-grid mt-8">
+      {(brand?.graphics?.[s.category] ?? []).map((name) => (
+        <figure key={name}>
+          <div className="aspect-square flex items-center justify-center rounded-[4px] overflow-hidden bg-surface-inverse">
+            <Graphic category={s.category} name={name} />
+          </div>
+          <figcaption className="kol-helper-12 uppercase tracking-wider text-meta mt-2">{s.category} / {name}</figcaption>
+        </figure>
+      ))}
+    </div>
+  )
+}
+
 const SPECIMENS = {
   contents: Contents,
+  graphics: Graphics,
+  'graphics-cards': GraphicCards,
   logo: Marks,
   lockups: Lockups,
   color: Color,

package/src/brandBook.js

@@ -8,42 +8,49 @@
  * left for its manifest to set; anything that was the CLIENT's copy (About, Tone, Look, the logo concept,
  * the color concept) is not here — it comes from the manifest's `book` field, section by section
  * (`@kolkrabbi/kol-brand-template` schema). A manifest key overrides the default of the same name.
+ *
+ * Since 0.11.0 the two pages render through `BrandGuide`'s chapters (user 2026-10-28: one renderer) — this file is the
+ * two lists and the manifest helpers; the model is ./guideBook.js.
  */
+import { guideSections, guideToc } from './guideBook.js'
+
+/* `nav` is the sidebar / rail label; a section without one (the hero, the overviews) is not indexed. `kind` names the
+ * specimen BrandGuide draws (its SPECIMENS table); a row without one is prose and shows only with copy in the manifest.
+ * `part` groups the overview's cards — Brand's three, the groups the site rail already uses (apps/site-hub, 2026-10-24). */
+const OVERVIEW = 'Brand overview', LOGOS = 'Logos', FOUNDATIONS = 'Foundations'
 
-/* `nav` is the sidebar / rail label; a section without one (the hero, the overviews) is not indexed.
- * `copy` marks a section that is ONLY its copy — with none in the manifest it is not rendered. */
 export const BOOK_SECTIONS = [
-  { key: 'hero', id: 'hero', label: 'brand guidelines', lede: 'Client-facing identity guidelines — chapter-structured for handoff. Mirrors the shape of the deliverable PDF.' },
-  { key: 'overview', id: 'brand-overview', label: 'Overview', title: 'Chapters', lede: 'Each chapter is its own page. They read in order, but every one stands alone for handoff.' },
-  { key: 'about', id: 'about', nav: 'About', label: '01 — about', copy: true },
-  { key: 'messages', id: 'key-messages', nav: 'Key messages', label: '01 — about · key messages', title: 'Key messages', copy: true },
-  { key: 'tone', id: 'voice', nav: 'Tone', label: '02 — tone', title: 'Tone', copy: true },
-  { key: 'look', id: 'look', nav: 'Look', label: '03 — look', title: 'Look', copy: true },
-  { key: 'logo', id: 'logos-concept', nav: 'Logo', label: '04 — logos · concept', title: 'The mark', marks: ['wordmark', 'logomark'] },
-  { key: 'lockups', id: 'logos-types', nav: 'Lockups', label: '05 — logos · types', title: 'Marks and lockups', lede: 'Logomark, wordmark, and two primary lockups.', marks: ['logomark', 'wordmark', 'lockup-hori', 'lockup-vert'] },
-  { key: 'color', id: 'color', nav: 'Color', label: '06 — color', title: 'Palette' },
-  { key: 'typography', id: 'typography', nav: 'Typography', label: '07 — typography', title: 'Type' },
+  { key: 'hero', id: 'hero', kind: 'hero', label: 'brand guidelines', lede: 'Client-facing identity guidelines — chapter-structured for handoff. Mirrors the shape of the deliverable PDF.' },
+  { key: 'overview', id: 'brand-overview', kind: 'contents', label: 'Overview', title: 'Chapters', lede: 'Each chapter is its own page. They read in order, but every one stands alone for handoff.' },
+  { key: 'about', id: 'about', part: OVERVIEW, nav: 'About', label: '01 — about' },
+  { key: 'messages', id: 'key-messages', part: OVERVIEW, nav: 'Key messages', label: '01 — about · key messages', title: 'Key messages' },
+  { key: 'tone', id: 'voice', part: OVERVIEW, nav: 'Tone', label: '02 — tone', title: 'Tone' },
+  { key: 'look', id: 'look', part: OVERVIEW, nav: 'Look', label: '03 — look', title: 'Look' },
+  { key: 'logo', id: 'logos-concept', part: LOGOS, kind: 'logo', nav: 'Logo', label: '04 — logos · concept', title: 'The mark', marks: ['wordmark', 'logomark'] },
+  { key: 'lockups', id: 'logos-types', part: LOGOS, kind: 'lockups', nav: 'Lockups', label: '05 — logos · types', title: 'Marks and lockups', lede: 'Logomark, wordmark, and two primary lockups.', marks: ['logomark', 'wordmark', 'lockup-hori', 'lockup-vert'] },
+  { key: 'color', id: 'color', part: FOUNDATIONS, kind: 'color', nav: 'Color', label: '06 — color', title: 'Palette' },
+  { key: 'typography', id: 'typography', part: FOUNDATIONS, kind: 'typography', nav: 'Typography', label: '07 — typography', title: 'Type' },
 ]
 
 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' },
+  { key: 'assetsOverview', id: 'assets-overview', kind: 'contents', 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', kind: 'logos-table', 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 },
-  { key: 'packaging', id: 'packaging', nav: 'Packaging', label: '10 — packaging', title: 'Packaging', copy: true },
-  { key: 'mockups', id: 'mockups', nav: 'Mockups', label: '11 — mockups', title: 'Mockups', copy: true },
-  { key: 'social', id: 'social-sizes', nav: 'Social', label: '12 — social · sizes', title: 'Post sizes', lede: 'One template at each of the three Instagram aspect ratios — square feed (1:1), portrait feed (4:5), and story / reel (9:16). Editorial photography, restrained typography, a deliberate cadence.' },
-  { key: 'profile', id: 'social-profile', nav: 'Profile', label: '13 — social · profile', title: 'Profile', lede: 'Avatar treatment for profile pictures across platforms — round-cropped on burgundy, signature centered.' },
-  { key: 'generators', id: 'generators', nav: 'Generators', label: '14 — generators', title: 'Generators', copy: true },
-  { key: 'deck', id: 'slide-deck', nav: 'Slide deck', label: '15 — slide deck', title: 'Slide deck', copy: true },
+  { key: 'graphics', id: 'graphics', kind: 'graphics', category: 'abstract', nav: 'Graphics', label: '02 — graphics', title: 'Graphics' },
+  { key: 'patterns', id: 'patterns', kind: 'graphics', category: 'patterns', nav: 'Patterns', label: '03 — patterns', title: 'Patterns' },
+  { key: 'graphicsPatterns', id: 'graphics-patterns', kind: 'graphics-cards', category: 'patterns', label: '16 — graphics · patterns', title: 'Patterns' },
+  { key: 'branded', id: 'branded-assets', kind: 'branded', nav: 'Branded', label: '04 — branded', title: 'Branded assets' },
+  { key: 'stationery', id: 'assets-stationery', kind: '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' },
+  { key: 'packaging', id: 'packaging', nav: 'Packaging', label: '10 — packaging', title: 'Packaging' },
+  { key: 'mockups', id: 'mockups', nav: 'Mockups', label: '11 — mockups', title: 'Mockups' },
+  { key: 'social', id: 'social-sizes', kind: 'social', nav: 'Social', label: '12 — social · sizes', title: 'Post sizes', lede: 'One template at each of the three Instagram aspect ratios — square feed (1:1), portrait feed (4:5), and story / reel (9:16). Editorial photography, restrained typography, a deliberate cadence.' },
+  { key: 'profile', id: 'social-profile', kind: 'profile', nav: 'Profile', label: '13 — social · profile', title: 'Profile', lede: 'Avatar treatment for profile pictures across platforms — round-cropped on burgundy, signature centered.' },
+  { key: 'generators', id: 'generators', nav: 'Generators', label: '14 — generators', title: 'Generators' },
+  { key: 'deck', id: 'slide-deck', nav: 'Slide deck', label: '15 — slide deck', title: 'Slide deck' },
 ]
 
 /* the two pages, for a view switch */
@@ -52,40 +59,11 @@ export const BRAND_VIEWS = [
   { value: 'assets', label: 'Assets' },
 ]
 
-const hasCopy = (s) => Boolean(s.lede || s.blocks?.length || s.after?.length)
-
-/* Whether a section has anything to show for this manifest. Copy-only sections need copy; the
- * specimen sections need the data they render. */
-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)
-  if (s.key === 'profile') return Boolean(brand?.social?.avatars?.length)
-  return true
-}
-
-/** One page's sections for a manifest — defaults merged with `brand.book`, the empty ones dropped.
- *  `[{ key, id, nav?, label, title, lede, blocks, after, marks }]` */
-export function brandSections(brand, page = 'brand') {
-  const defaults = page === 'assets' ? ASSET_SECTIONS : BOOK_SECTIONS
-  const name = brand?.meta?.name
-  return defaults
-    .map((d) => {
-      const s = { ...d, ...(brand?.book?.[d.key] ?? {}) }
-      if (d.key === 'hero' && !s.title) s.title = name
-      if (d.key === 'about' && !s.title && name) s.title = `About ${name}`
-      return s
-    })
-    .filter((s) => shows(s, brand))
-}
+/** One page's sections for a manifest — the page's list on the guide's one model (guideBook.js), the empty ones dropped. */
+export const brandSections = (brand, page = 'brand') => guideSections(brand, page === 'assets' ? ASSET_SECTIONS : BOOK_SECTIONS)
 
 /** A page's rail / index entries — `[{ id, label }]`. */
-export const brandToc = (brand, page) =>
-  brandSections(brand, page).filter((s) => s.nav).map((s) => ({ id: s.id, label: s.nav }))
+export const brandToc = (brand, page) => guideToc(brand, page === 'assets' ? ASSET_SECTIONS : BOOK_SECTIONS)
 
 /** The manifest's `meta` in the shape the stationery mocks read (`DEFAULT_BRAND_INFO`). A field the
  *  manifest does not carry is an EMPTY STRING, so the mocks render it blank rather than falling back

package/src/guideBook.js

@@ -1,21 +1,26 @@
-/* The brand guide's chapter model — kol-branding's src/template/book/brandBook.js (2026-10-24), carried for `BrandGuide`
- * (BrandGuideOutlineTwoVersions, 2026-10-27). The book owns no chapter list: it renders the one it is handed —
- * `@kolkrabbi/kol-brand-template`'s `GUIDE_SECTIONS`, or a client's own. The helpers the identity book already
- * exports (brandInfo, the stationery marks, the anchor scroll, the svg helpers) stay in ./brandBook.js. */
+/* The chapter model behind every brand page — kol-branding's src/template/book/brandBook.js (2026-10-24), carried for
+ * `BrandGuide` (2026-10-27) and, since 0.11.0, the one model `BrandBook` and `BrandAssets` read too (the book had its own
+ * `shows` and renderer beside this one; user 2026-10-28: two looks for one thing). A page is a chapter list — `BOOK_SECTIONS`,
+ * `ASSET_SECTIONS`, kol-brand-template's `GUIDE_SECTIONS`, a client's own — merged with the manifest's `book`. The manifest
+ * helpers (brandInfo, the stationery marks, the anchor scroll, the svg helpers) stay in ./brandBook.js. */
 
-const hasCopy = (s) => Boolean(s.lede || s.blocks?.length || s.after?.length || s.rules?.length || s.spec || s.dos?.length || s.donts?.length || s.words || s.pairs?.length)
+/* copy beyond the lede — what makes a specimen chapter worth drawing without its data (the brand book's rule, olina:
+ * "their default lede is not enough to show empty frames") */
+const hasBody = (s) => Boolean(s.blocks?.length || s.after?.length || s.rules?.length || s.spec || s.dos?.length || s.donts?.length || s.words || s.pairs?.length)
+const hasCopy = (s) => Boolean(s.lede) || hasBody(s)
 
-/* Whether a chapter has anything to show for this manifest. The specimen kinds need the data they draw;
- * everything else shows when it has copy. */
+/* Whether a chapter has anything to show for this manifest. The specimen kinds need the data they draw or body copy;
+ * a prose row shows with any copy, the lede included. */
 export function shows(s, brand) {
+  if (s.category) return Boolean(brand?.graphics?.[s.category]?.length)
   const kind = s.kind ?? 'prose'
   if (kind === 'hero' || kind === 'contents' || kind === 'branded' || kind === 'stationery') return true
   if (kind === 'logos-table') return Boolean(brand?.logos?.length)
-  if (kind === 'logo' || kind === 'lockups') return Boolean(brand?.logos?.length) || hasCopy(s)
-  if (kind === 'color') return Boolean(brand?.ramps?.length) || hasCopy(s)
-  if (kind === 'typography') return Boolean(brand?.type?.families?.length) || hasCopy(s)
-  if (kind === 'social') return Boolean(brand?.social?.templates?.length) || hasCopy(s)
-  if (kind === 'profile') return Boolean(brand?.social?.avatars?.length) || hasCopy(s)
+  if (kind === 'logo' || kind === 'lockups') return Boolean(brand?.logos?.length) || hasBody(s)
+  if (kind === 'color') return Boolean(brand?.ramps?.length) || hasBody(s)
+  if (kind === 'typography') return Boolean(brand?.type?.families?.length) || hasBody(s)
+  if (kind === 'social') return Boolean(brand?.social?.templates?.length) || hasBody(s)
+  if (kind === 'profile') return Boolean(brand?.social?.avatars?.length) || hasBody(s)
   return hasCopy(s)
 }
 

package/src/typeSpecimen.js

@@ -1,166 +0,0 @@
-/**
- * typeSpecimen — the brand book's Typography chapter as data.
- *
- * kol-olina's apps/brand `data/typography.js`, verbatim, minus its two brand-specific tables: the
- * FAMILIES come from the manifest (`type.families`, `type.note`), and the cuts table was never
- * rendered by the chapter. Everything else describes the KOL type system — classes, prose, the mono
- * split, the reading hierarchy — which every brand on the system shares, because its type rides the
- * family tokens.
- */
-
-const sansDisplayRows = [
-  { cls: '.kol-sans-display-01', tokenName: '--kol-text-display-01', family: 'sans-narrow', weight: 600 },
-  { cls: '.kol-sans-display-02', tokenName: '--kol-text-display-02', family: 'sans-narrow', weight: 600 },
-]
-
-const sansHeadingRows = [
-  { cls: '.kol-sans-heading-01', tokenName: '--kol-text-heading-01', family: 'sans-narrow',  weight: 500 },
-  { cls: '.kol-sans-heading-02', tokenName: '--kol-text-heading-02', family: 'sans-compact', weight: 500 },
-  { cls: '.kol-sans-heading-03', tokenName: '--kol-text-heading-03', family: 'sans-compact', weight: 500 },
-  { cls: '.kol-sans-heading-04', tokenName: '--kol-text-heading-04', family: 'sans-compact', weight: 500 },
-  { cls: '.kol-sans-heading-05', tokenName: '--kol-text-heading-05', family: 'sans-compact', weight: 500 },
-]
-
-const sansBodyRows = [
-  { cls: '.kol-sans-body-01', tokenName: '--kol-text-body-01', family: 'sans (base)', weight: 400 },
-  { cls: '.kol-sans-body-02', tokenName: '--kol-text-body-02', family: 'sans (base)', weight: 400 },
-  { cls: '.kol-sans-body-03', tokenName: '--kol-text-body-03', family: 'sans (base)', weight: 400 },
-]
-
-const proseRows = [
-  { role: 'Display',     class: '.kol-prose-display',        family: 'sans-narrow',  weight: 500 },
-  { role: 'Display (md)',class: '.kol-prose-display-md',     family: 'sans-narrow',  weight: 500 },
-  { role: 'Title',       class: '.kol-prose-title',          family: 'sans-narrow',  weight: 500 },
-  { role: 'H1',          class: '.kol-prose h1',             family: 'sans-narrow',  weight: 500, tokenName: '--kol-text-heading-01' },
-  { role: 'H2',          class: '.kol-prose h2',             family: 'sans-compact', weight: 400, tokenName: '--kol-text-heading-03' },
-  { role: 'H3',          class: '.kol-prose h3',             family: 'sans-compact', weight: 400, tokenName: '--kol-text-heading-04' },
-  { role: 'H4',          class: '.kol-prose h4',             family: 'sans-compact', weight: 400, tokenName: '--kol-text-heading-05' },
-  { role: 'H5',          class: '.kol-prose h5',             family: 'sans-compact', weight: 500, tokenName: '--kol-text-heading-06' },
-  { role: 'H6',          class: '.kol-prose h6',             family: 'sans-compact', weight: 500, tokenName: '--kol-text-heading-06' },
-  { role: 'Lede',        class: '.kol-prose-lede',           family: 'sans-compact', weight: 400 },
-  { role: 'Tagline',     class: '.kol-prose-tagline',        family: 'sans-narrow',  weight: 500 },
-  { role: 'Body',        class: '.kol-prose p',              family: 'sans (base)',  weight: 300 },
-  { role: 'Quote',       class: '.kol-prose blockquote p',   family: 'sans (base)',  weight: 600 },
-  { role: 'Cite',        class: '.kol-prose blockquote cite',family: 'sans (base)',  weight: 500 },
-  { role: 'Label',       class: '.kol-prose-label',          family: 'mono',         weight: 500 },
-  { role: 'Code (inline)',class: '.kol-prose code',          family: 'mono',         weight: 400 },
-  { role: 'Code (block)', class: '.kol-prose pre',           family: 'mono',         weight: 400 },
-]
-
-const monoRows = [
-  { cls: '.kol-mono-20', size: 20, lh: 26, weight: 400, ls: 'normal' },
-  { cls: '.kol-mono-16', size: 16, lh: 22, weight: 400, ls: 'normal' },
-  { cls: '.kol-mono-14', size: 14, lh: 18, weight: 400, ls: 'normal' },
-  { cls: '.kol-mono-12', size: 12, lh: 16, weight: 400, ls: 'normal' },
-  { cls: '.kol-mono-10', size: 10, lh: 14, weight: 400, ls: 'normal' },
-  { cls: '.kol-mono-8',  size:  8, lh: 12, weight: 400, ls: 'normal' },
-]
-
-const helperRows = [
-  { cls: '.kol-helper-20', size: 20, lh: '1', weight: 500, ls: '0.06em' },
-  { cls: '.kol-helper-16', size: 16, lh: '1', weight: 500, ls: '0.06em' },
-  { cls: '.kol-helper-14', size: 14, lh: '1', weight: 500, ls: '0.06em' },
-  { cls: '.kol-helper-12', size: 12, lh: '1', weight: 500, ls: '0.06em' },
-  { cls: '.kol-helper-10', size: 10, lh: '1', weight: 500, ls: '0.10em' },
-  { cls: '.kol-helper-8',  size:  8, lh: '1', weight: 500, ls: '0.10em' },
-]
-
-const opacityDescriptorRows = [
-  { name: 'subtle',   pct: 24,  token: '--kol-fg-subtle',   role: 'Dividers, disabled hints, faintest visible' },
-  { name: 'meta',     pct: 48,  token: '--kol-fg-meta',     role: 'Labels, eyebrows, captions' },
-  { name: 'body',     pct: 64,  token: '--kol-fg-body',     role: 'Running copy, links' },
-  { name: 'strong',   pct: 80,  token: '--kol-fg-strong',   role: 'Emphasized body, <strong>' },
-  { name: 'emphasis', pct: 100, token: '--kol-fg-emphasis', role: 'Headings, max ink' },
-]
-
-const SYSTEM_SECTIONS = [
-  {
-    id: 'sans-atomic',
-    title: 'Sans atomic classes',
-    intro:
-      "Display, heading, body — explicit per-element classes for chrome / " +
-      "page sections. Distinct from .kol-prose, which cascades into HTML " +
-      "elements for rich-text containers.",
-    reasoning:
-      "Numbered tokens (01–06), not t-shirt sizes. Numbers describe a fixed " +
-      "position in the scale (01 = anchor, ascending = smaller); t-shirt names " +
-      "carry no ordering, you have to remember which is bigger. 01 = largest " +
-      "follows HTML's H1 = biggest convention. Class prefix is family-first " +
-      "(.kol-sans-) to mirror mono naming and read naturally — \"the sans " +
-      "system, display role, stop 01\". H1 uses Narrow (condensed for impact); " +
-      "H2–H5 use Compact (slightly wider, mid-tier); body uses base. Atomic body " +
-      "weight is 400 (regular) for chrome; prose body is 300 (light) for " +
-      "editorial reading copy — different defaults per context.",
-    rows: [...sansDisplayRows, ...sansHeadingRows, ...sansBodyRows],
-  },
-  {
-    id: 'prose',
-    title: 'Prose container',
-    intro:
-      ".kol-prose is a rich-text container that cascades to native HTML " +
-      "elements (h1–h6, p, ul, blockquote, code, pre). Wrap CMS / blog / " +
-      "markdown output in it; the container styles every element via " +
-      "descendant selectors.",
-    reasoning:
-      "H2 intentionally skips heading-02 (40px) and uses heading-03 (32px). " +
-      "48 → 40 reads as \"same family\"; 48 → 32 reads as \"structural break\" " +
-      "— better visual rhythm at H1 → H2. H6 ships uppercase with tracking " +
-      "by default since H6 is rare and benefits from a label-like rendering. " +
-      "Code (inline + block) consumes the mono token so a future swap cascades " +
-      "into prose code automatically.",
-    rows: proseRows,
-  },
-  {
-    id: 'mono',
-    title: 'Mono',
-    intro:
-      "JetBrains Mono. Two scales at the same px stops, distinguished by " +
-      "intent + visual weight. .kol-mono-N for multi-line body / values " +
-      "(weight 400, with leading). .kol-helper-N for single-line labels " +
-      "(weight 500, line-height 1, letter-spaced).",
-    reasoning:
-      "Same px size, different weight = visible hierarchy without size-jumps. " +
-      "Common pattern: a label sits above a control or value at the same stop " +
-      "— label is helper (medium), control text is mono (regular). Both 12px, " +
-      "but the label \"reads first\" by weight. Tight UI grids stay compact " +
-      "without further compressing sizes. Px-literal suffixes (10/12/14/16/20) " +
-      "instead of numbered indices because mono is utility chrome where exact " +
-      "px matters — the number IS the value, no decoder ring. Wider letter-" +
-      "spacing (0.10em) on the smallest two stops is a typographic principle: " +
-      "sub-12px mono needs more tracking to stay legible.",
-    rows: [...monoRows, ...helperRows],
-  },
-  {
-    id: 'opacity',
-    title: 'Reading hierarchy (descriptors)',
-    intro:
-      "Five-stop ink hierarchy: subtle / meta / body / strong / emphasis. " +
-      "Aliases over the numeric --kol-fg-NN ramp (UI Colors / Opacity " +
-      "primitives). Pick descriptors when intent matters; pick numeric stops " +
-      "when exact percentage matters. Text-only — bg / border / ring " +
-      "descriptor families retired 2026-04-30 (consumers used numeric stops).",
-    reasoning:
-      "Five stops anchor the typography reading hierarchy. The retired " +
-      "`mute` (32%) sat awkwardly between subtle (24%, dividers) and meta " +
-      "(48%, labels) and had zero component consumers. Descriptors are now " +
-      "text-only — for surface tints, borders, and rings, reach for the " +
-      "numeric --kol-fg-NN family (bg-fg-08, border-fg-12, etc.).",
-    rows: opacityDescriptorRows,
-  },
-]
-
-/** The chapter's sections for a manifest: its families first (when it declares any), then the
- *  system's. `[{ id, title, intro, reasoning?, rows }]` */
-export function typeSections(brand) {
-  const families = brand?.type?.families ?? []
-  const head = families.length ? [{
-    id: 'sans-families',
-    title: 'Family tokens',
-    intro:
-      "Three sans cuts and one mono. Edit a family token to swap any cut " +
-      "without touching consumers.",
-    reasoning: brand?.type?.note,
-    rows: families.map(({ token, role, cut }) => ({ token, role, cut })),
-  }] : []
-  return [...head, ...SYSTEM_SECTIONS]
-}