@kolkrabbi/kol-styleguide 0.1.0

package/README.md

@@ -0,0 +1,15 @@
+# @kolkrabbi/kol-styleguide
+
+The KOL **style-guide / brand-guide** component set — the visual specimens a brand manual is built from. Raided from the monorepo `apps/brand` styleguide and assembled here because a brand guide is a shared capability with its own cadence, distinct from the core UI atoms.
+
+Colour anatomy + the **combination lab** (60/30/10 palette × layout × logo, incl. applied-brand mockups), **logo** construction / clearspace / scaling, **mood tiles**, **type blocks**, and **asset spec tables** — plus the colour/type specimen primitives (`ColorRamp`, `ColorSwatch`, `SpectrumGrid`, `TypeSample`, `TypeSpecCard`, `ProsePreview`, `AssetGrid`, `FeatureSplit`) gathered from the core packages.
+
+```js
+import { ComboLab, MoodTile, LogoCard, TypeBlock } from '@kolkrabbi/kol-styleguide'
+```
+
+## Consumer requirements
+
+- **CSS** ships in `@kolkrabbi/kol-theme` (`kol-components-styleguide.css`, in the theme aggregate) — this package ships JS only.
+- Tailwind v4 `@source "…/node_modules/@kolkrabbi/kol-styleguide/src"` so utility classes used inside the components are generated (Tailwind skips `node_modules`, or they never generate).
+- Data is consumer-injected — palettes, type scales, logo assets are supplied as flat props.

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@kolkrabbi/kol-styleguide",
+  "version": "0.1.0",
+  "private": false,
+  "description": "KOL style-guide / brand-guide component set — the visual specimens a brand manual is built from: color anatomy + combination lab, logo construction / clearspace / scaling, mood tiles, type blocks, and asset spec tables. Raided from the apps/brand styleguide. Sits above @kolkrabbi/kol-{theme,icons,component}.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "dependencies": {
+    "@kolkrabbi/kol-component": "0.9.0",
+    "@kolkrabbi/kol-icons": "0.5.0",
+    "@kolkrabbi/kol-foundry": "0.4.0",
+    "@kolkrabbi/kol-theme": "0.7.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "kol",
+    "kolkrabbi",
+    "design-system",
+    "styleguide",
+    "brand-guide",
+    "specimen"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tor-Grimsson/kol-ds.git",
+    "directory": "packages/styleguide"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/AssetTable.jsx

@@ -0,0 +1,126 @@
+import { Table } from '@kolkrabbi/kol-component'
+import { Icon } from '@kolkrabbi/kol-icons'
+
+/**
+ * AssetTable — mark / asset spec table.
+ *
+ * A thin composition of the DS `Table` (@kolkrabbi/kol-component) that renders
+ * a download-oriented asset manifest: preview, name, format, dimensions, and a
+ * download control per row. Rows are consumer-injected; the standard column set
+ * is built here so a consumer only supplies data.
+ *
+ * Ported from the monorepo apps/brand styleguide AssetTable (2026-07). All
+ * app-specific wiring is dropped: the `import.meta.glob` SVG harvesting, the
+ * KolLogo / Graphic loaders, the ink-token toggle, the fullscreen overlay, and
+ * the `Blob` recolour-and-download. Download is now a plain per-row seam —
+ * pass `href` (a download link) OR `onDownload` (a callback). Preview is a
+ * consumer-supplied node.
+ *
+ * Columns adapt to the data: the Preview column appears only when a row carries
+ * a `preview` node, and the Download column only when a row carries `href` or
+ * `onDownload`. Name / format / dimensions always show, falling back to an
+ * em-dash (DS Table behaviour) when a field is absent.
+ *
+ * Row shape:
+ *   { id, name, preview?, format?, dimensions?, href?, filename?, onDownload? }
+ *     id          React key (falls back to array index)
+ *     name        asset name (string or node)
+ *     preview     specimen node rendered in the Preview cell
+ *     format      e.g. 'SVG' · 'PNG @2x'
+ *     dimensions  e.g. '48 × 48'
+ *     href        download URL → renders an <a download>
+ *     filename    download filename for the <a download> attribute
+ *     onDownload  click handler → renders a <button> (takes precedence over href)
+ *
+ * Props:
+ *   rows        Array<row>  (required)
+ *   caption     sr-only <caption> for the table (a11y)
+ *   variant     'default' | 'simple'  → forwarded to DS Table
+ *   className   extra classes on the table wrapper
+ *   emptyLabel  message shown when rows is empty (default 'No assets.')
+ */
+export default function AssetTable({
+  rows = [],
+  caption,
+  variant = 'default',
+  className = '',
+  emptyLabel = 'No assets.',
+}) {
+  if (!rows.length) {
+    return <p className="kol-mono-14 text-fg-48">{emptyLabel}</p>
+  }
+
+  const withId = rows.map((row, i) => ({ ...row, id: row.id ?? i }))
+  const hasPreview = withId.some((row) => row.preview != null)
+  const hasDownload = withId.some((row) => row.href || row.onDownload)
+
+  const columns = [
+    hasPreview && {
+      accessor: 'preview',
+      header: 'Preview',
+      className: 'kol-table-cell-text',
+      style: { minWidth: 160 },
+      render: (row) => row.preview ?? null,
+    },
+    {
+      accessor: 'name',
+      header: 'Name',
+      className: 'kol-table-cell-text',
+    },
+    {
+      accessor: 'format',
+      header: 'Format',
+      className: 'kol-table-cell-meta',
+    },
+    {
+      accessor: 'dimensions',
+      header: 'Dimensions',
+      className: 'kol-table-cell-meta',
+    },
+    hasDownload && {
+      accessor: 'download',
+      header: 'Download',
+      style: { width: 96 },
+      render: (row) => <DownloadControl row={row} />,
+    },
+  ].filter(Boolean)
+
+  return <Table caption={caption} columns={columns} rows={withId} variant={variant} className={className} />
+}
+
+/* Per-row download affordance. onDownload → button; href → anchor; else nothing.
+ * The DS `download` icon inherits currentColor; aria-label composes the asset
+ * name for screen readers (an a11y string, not rendered content). */
+function DownloadControl({ row }) {
+  const label = `Download ${typeof row.name === 'string' ? row.name : 'asset'}`
+
+  if (row.onDownload) {
+    return (
+      <button
+        type="button"
+        onClick={() => row.onDownload(row)}
+        className="inline-flex items-center text-fg-64"
+        aria-label={label}
+        title="Download"
+      >
+        <Icon name="download" size={16} />
+      </button>
+    )
+  }
+
+  if (row.href) {
+    return (
+      <a
+        href={row.href}
+        download={row.filename ?? true}
+        className="inline-flex items-center text-fg-64"
+        aria-label={label}
+        title="Download"
+      >
+        <Icon name="download" size={16} />
+      </a>
+    )
+  }
+
+  return null
+}

package/src/ClearspaceDiagram.jsx

@@ -0,0 +1,54 @@
+/**
+ * ClearspaceDiagram — layered logo construction overlay.
+ *
+ * Stacks up to three absolutely-positioned layers inside one box:
+ *   grid (construction modules) → keyline (x-height / clearspace guides) → logo.
+ *
+ * All three layers are CONSUMER-INJECTED rendered nodes. The DS bakes in no
+ * brand mark and no SVG registry — a generic grid can't align to an unknown
+ * mark, so the consumer (who owns the mark) also owns the construction geometry,
+ * authored to match that mark's viewBox. This is the asset-agnostic mirror of
+ * the monorepo original, which pulled `GRAPHIC_RAW.structure` (diagram-grid-*,
+ * diagram-x-*, diagram-logo-*) and injected the raw strings itself.
+ *
+ * `framework` toggles the two overlay layers; the logo always renders. Each
+ * layer fills the box and its descendant <svg> is stretched to fit
+ * (`[&_svg]:w-full [&_svg]:h-full`) — inject wrapped nodes (e.g. kol-brand
+ * <Asset>, which renders <span><svg/></span>) or pre-sized svg nodes.
+ *
+ *   import { ClearspaceDiagram } from '@kolkrabbi/kol-styleguide'
+ *   import { Asset } from '@kolkrabbi/kol-brand/svg'
+ *   <ClearspaceDiagram
+ *     framework
+ *     logo={<Asset name="kol-logomark" />}
+ *     grid={<Asset name="diagram-grid-logomark" />}
+ *     keyline={<Asset name="diagram-x-logomark" />}
+ *   />
+ */
+
+const LAYER = 'absolute inset-0 [&_svg]:w-full [&_svg]:h-full'
+
+/**
+ * True when both overlay layers are present — the injected-node equivalent of
+ * the monorepo `hasFramework(variant)` (which checked the grid + x diagrams
+ * existed for a variant). Consumers gate a clearspace toggle on this.
+ */
+export const hasFramework = ({ grid, keyline } = {}) => Boolean(grid && keyline)
+
+export default function ClearspaceDiagram({
+  logo,
+  grid = null,
+  keyline = null,
+  framework = false,
+  className = '',
+}) {
+  if (!logo) return null
+
+  return (
+    <div className={`kol-clearspace-diagram relative w-full h-full ${className}`.trim()}>
+      {framework && grid && <span className={LAYER}>{grid}</span>}
+      {framework && keyline && <span className={LAYER}>{keyline}</span>}
+      <span className={LAYER}>{logo}</span>
+    </div>
+  )
+}

package/src/ColorAnatomy.jsx

@@ -0,0 +1,33 @@
+/**
+ * ColorAnatomy — token-composition specimen.
+ *
+ * A figure that shows a color `sample`, the inline `<code>` token expression
+ * that produced it (e.g. `color-mix(in srgb, var(--kol-fg-16), transparent)`
+ * or a bare `--kol-fg-48`), and an italic figcaption describing it. Used in
+ * the brand/style-guide to document how a composed color is built from tokens.
+ *
+ * The surviving CSS owns the type/chrome for the two text descendants — it is
+ * fully token-based (var(--kol-fg-48), var(--kol-font-family-mono)) — so it is
+ * reused as-is rather than re-declared inline (chrome lives in
+ * @kolkrabbi/kol-theme → packages/framework/kol-framework.css):
+ *   .kol-anatomy-sample figcaption — 12px, italic, var(--kol-fg-48)
+ *   .kol-anatomy-sample code       — 11px mono chip, currentColor 18% tint, r3
+ *
+ * Props:
+ *   sample  — sample node rendered as-is (full control of size/shape). When
+ *             omitted, a DS <ColorSwatch> is rendered from `hex`.
+ *   hex     — color string for the fallback ColorSwatch (ignored if `sample`).
+ *   code    — token / color-mix expression string, shown in the inline <code>.
+ *   caption — italic figcaption description. Author its casing at the call site.
+ */
+import { ColorSwatch } from '@kolkrabbi/kol-component'
+
+export default function ColorAnatomy({ sample, hex, code, caption }) {
+  return (
+    <figure className="kol-anatomy-sample flex flex-col items-start gap-2">
+      {sample ?? <ColorSwatch hex={hex} size={96} radius="sm" />}
+      {code && <code>{code}</code>}
+      {caption && <figcaption>{caption}</figcaption>}
+    </figure>
+  )
+}

package/src/ComboLab.jsx

@@ -0,0 +1,194 @@
+import { useState } from 'react'
+import { ViewToggle } from '@kolkrabbi/kol-component'
+import { LAYOUT_COMPONENTS, COMBO_LAYOUTS } from './comboLayouts.jsx'
+import { generatePalette } from './comboMath.js'
+
+/**
+ * ComboLab — the 60 / 30 / 10 color-combination playground.
+ *
+ * A layout picker + logo toggle + randomize over a role-palette
+ * (primary / secondary / light / dark / accent), a live stage that renders the
+ * selected layout primitive, and a hex readout. The "Applied card" layout is
+ * the brand-application ("business card") mockup.
+ *
+ * Fully data-injected — nothing is read from an editor store:
+ *   - `palette`  — the initial role-palette (defaults to the Kolkrabbi comp).
+ *   - `palettes` — optional named set; when present a Palette toggle appears
+ *                  and Randomize picks among them.
+ *   - `pool`     — optional hex array; when present Randomize *generates* a new
+ *                  palette by sampling it (see comboMath). With neither
+ *                  `palettes` nor `pool`, Randomize derives a fresh palette from
+ *                  the current primary (seed mode).
+ *   - `logo`     — a React node dropped into the logo slots.
+ *
+ * Chrome (borders, type, state) is DS-owned via `.kol-combo-*` +
+ * `kol-helper-*` + `text-*` utilities; the only inline values are the palette's
+ * literal hex, which are content, not tokens.
+ *
+ * See the monorepo severance notes in lobby/ComboLab.md.
+ */
+
+/* Canonical Kolkrabbi composition. Literal hex (this is a plain module with no
+   CSS-var resolver) mirroring the DS brand tokens:
+   yellow-300 / red-200 / cream-100 / blue-400 / orange-300. */
+export const DEFAULT_PALETTE = {
+  id: 'kolkrabbi',
+  label: 'Kolkrabbi',
+  description: 'Yellow hero · rust secondary · navy ink on cream — the canonical composition',
+  primary:   '#FFCF33',
+  secondary: '#AD5038',
+  light:     '#FAF7F0',
+  dark:      '#222D3D',
+  accent:    '#DF760B',
+}
+
+const ROLE_LABELS = ['Primary', 'Secondary', 'Light', 'Dark', 'Accent']
+
+const toOptions = (items) => items.map((i) => ({ value: i.id, label: i.label }))
+const pickRandom = (arr) => arr[Math.floor(Math.random() * arr.length)]
+
+/* Pick a random item whose id differs from `currentId` where possible. */
+const pickDifferent = (arr, currentId) => {
+  const others = arr.filter((i) => i.id !== currentId)
+  return others.length ? pickRandom(others) : arr[0]
+}
+
+/* [primary, secondary, light, dark, accent, bg?] → role-palette object. */
+const toPalette = (colors) => ({
+  id: 'generated',
+  label: 'Generated',
+  description: 'Generated combination',
+  primary:   colors[0],
+  secondary: colors[1],
+  light:     colors[2],
+  dark:      colors[3],
+  accent:    colors[4],
+  bg:        colors[5],
+})
+
+const paletteToColors = (p) => [p.primary, p.secondary, p.light, p.dark, p.accent, p.bg ?? p.light]
+
+function Row({ label, children }) {
+  return (
+    <div className="kol-combo-row">
+      <span className="kol-combo-row-label kol-helper-10 text-meta">{label}</span>
+      <div className="kol-combo-row-controls">{children}</div>
+    </div>
+  )
+}
+
+function SwatchRow({ label, hex }) {
+  return (
+    <div className="kol-combo-swatch-row">
+      <span className="kol-combo-swatch-chip" style={{ background: hex }} />
+      <span className="kol-combo-swatch-label kol-helper-12 text-auto">{label}</span>
+      <span className="kol-combo-swatch-hex kol-helper-12 text-meta">{hex.toUpperCase()}</span>
+    </div>
+  )
+}
+
+export default function ComboLab({
+  palette,
+  palettes,
+  layout,
+  layouts = COMBO_LAYOUTS,
+  logo = null,
+  pool,
+  mode = 'random',
+  className = '',
+}) {
+  const initialPalette = palette ?? palettes?.[0] ?? DEFAULT_PALETTE
+
+  const [layoutId, setLayoutId] = useState(layout ?? layouts[0]?.id ?? COMBO_LAYOUTS[0].id)
+  const [active, setActive]     = useState(initialPalette)
+  const [logoOn, setLogoOn]     = useState(Boolean(logo))
+
+  const LayoutComponent = LAYOUT_COMPONENTS[layoutId] ?? LAYOUT_COMPONENTS[COMBO_LAYOUTS[0].id]
+  const activeLayout    = layouts.find((l) => l.id === layoutId) ?? layouts[0] ?? COMBO_LAYOUTS[0]
+  const colorsKey       = paletteToColors(active).join('')
+
+  const randomize = () => {
+    setLayoutId(pickDifferent(layouts, layoutId).id)
+
+    if (Array.isArray(palettes) && palettes.length) {
+      setActive(pickDifferent(palettes, active.id))
+      return
+    }
+
+    const noLocks = [false, false, false, false, false, false]
+    const current = paletteToColors(active)
+    const colors = Array.isArray(pool) && pool.length
+      ? generatePalette(pool, mode, current, noLocks)            // pool path
+      : generatePalette([], mode, current, noLocks, active.primary) // seed path
+    setActive(toPalette(colors))
+  }
+
+  return (
+    <div className={`kol-combo-lab ${className}`.trim()}>
+      <div className="kol-combo-controls">
+        <Row label="Layout">
+          <ViewToggle
+            viewMode={layoutId}
+            onViewChange={setLayoutId}
+            options={toOptions(layouts)}
+          />
+        </Row>
+
+        {Array.isArray(palettes) && palettes.length > 0 && (
+          <Row label="Palette">
+            <ViewToggle
+              viewMode={active.id}
+              onViewChange={(id) => setActive(palettes.find((p) => p.id === id) ?? active)}
+              options={toOptions(palettes)}
+            />
+          </Row>
+        )}
+
+        {logo && (
+          <Row label="Logo">
+            <ViewToggle
+              variant="single"
+              viewMode={logoOn ? 'on' : 'off'}
+              onViewChange={(v) => setLogoOn(v === 'on')}
+              options={[
+                { value: 'off', label: 'No logo' },
+                { value: 'on', label: 'Logo' },
+              ]}
+            />
+          </Row>
+        )}
+
+        <div className="kol-combo-footer">
+          <button type="button" className="kol-combo-randomize kol-helper-10" onClick={randomize}>
+            ↻ Randomize
+          </button>
+          {active.description && (
+            <span className="kol-combo-footer-desc kol-helper-10 text-meta">
+              {active.description}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="kol-combo-stage-wrap">
+        <div key={`${layoutId}-${colorsKey}`} className="kol-combo-stage-anim">
+          <LayoutComponent palette={active} logo={logoOn ? logo : null} />
+        </div>
+      </div>
+
+      <div className="kol-combo-readout">
+        {ROLE_LABELS.map((label) => (
+          <SwatchRow key={label} label={label} hex={active[label.toLowerCase()]} />
+        ))}
+      </div>
+
+      <p className="kol-combo-summary kol-helper-10 text-meta">
+        <span className="text-emphasis">{activeLayout.label}</span>
+        {' × '}
+        <span className="text-emphasis">{active.label}</span>
+        {' × '}
+        <span className="text-emphasis">{logoOn ? 'Logo' : 'No logo'}</span>
+      </p>
+    </div>
+  )
+}

package/src/LogoCard.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import ClearspaceDiagram, { hasFramework } from './ClearspaceDiagram.jsx'
+import { ToggleSwitch } from '@kolkrabbi/kol-component'
+
+/**
+ * LogoCard — framed logo specimen tile with a clearspace / grid toggle.
+ *
+ * A brand-manual logo plate: the mark centered in a padded frame, an optional
+ * caption, and — when construction overlays are supplied — a toggle that reveals
+ * the grid + x-height keyline over the mark.
+ *
+ * ASSET-AGNOSTIC: the mark and its construction overlays are CONSUMER-INJECTED
+ * rendered nodes (`logo`, `grid`, `keyline`). The monorepo original imported a
+ * specific `KolLogo` and resolved diagrams from `GRAPHIC_RAW.structure`; this
+ * DS version bakes in neither — layering is delegated to <ClearspaceDiagram>,
+ * which the consumer feeds with their own <Asset>/<Icon>/svg nodes.
+ *
+ *   import { LogoCard } from '@kolkrabbi/kol-styleguide'
+ *   import { Asset } from '@kolkrabbi/kol-brand/svg'
+ *   <LogoCard
+ *     caption="Logomark"
+ *     aspect="1 / 1"
+ *     logo={<Asset name="kol-logomark" />}
+ *     grid={<Asset name="diagram-grid-logomark" />}
+ *     keyline={<Asset name="diagram-x-logomark" />}
+ *   />
+ *
+ * Caption text is authored in the case it should render — the component applies
+ * no text-transform (KOL no-auto-casing rule).
+ */
+export default function LogoCard({
+  logo,
+  grid = null,
+  keyline = null,
+  caption,
+  backdrop,
+  aspect = '2 / 1',
+  frame = true,
+  toggleLabel = 'Clearspace',
+  defaultFramework = true,
+  className = '',
+}) {
+  const [showFramework, setShowFramework] = useState(defaultFramework)
+  const canFramework = hasFramework({ grid, keyline })
+
+  const figureStyle = aspect ? { aspectRatio: aspect } : undefined
+  const frameStyle = frame && backdrop ? { background: backdrop } : undefined
+  const frameChrome = frame
+    ? `rounded-[4px] overflow-hidden p-8 ${backdrop ? '' : 'bg-fg-02 border border-fg-04'}`
+    : ''
+  const figureSizing = aspect ? '' : 'h-full'
+
+  return (
+    <figure
+      className={`kol-logo-card flex flex-col ${figureSizing} ${className}`.trim()}
+      style={figureStyle}
+    >
+      <div
+        className={`kol-logo-card-frame flex-1 min-h-0 flex items-center justify-center ${frameChrome}`.trim()}
+        style={frameStyle}
+      >
+        <ClearspaceDiagram
+          logo={logo}
+          grid={grid}
+          keyline={keyline}
+          framework={showFramework && canFramework}
+        />
+      </div>
+      {(caption || canFramework) && (
+        <div className="flex items-center justify-between mt-2">
+          {caption ? (
+            <figcaption className="kol-helper-12 tracking-wider text-meta">
+              {caption}
+            </figcaption>
+          ) : (
+            <span />
+          )}
+          {canFramework && (
+            <ToggleSwitch
+              variant="bare"
+              label={toggleLabel}
+              checked={showFramework}
+              onToggle={setShowFramework}
+            />
+          )}
+        </div>
+      )}
+    </figure>
+  )
+}

package/src/LogoScaling.jsx

@@ -0,0 +1,95 @@
+import { Fragment, useEffect, useRef, useState } from 'react'
+
+/**
+ * LogoScaling — the responsive logo scale matrix.
+ *
+ * A specimen grid: columns = logo variants, rows = pixel steps (128 → 8px).
+ * Each cell renders the variant's mark sized to that step, so a brand manual
+ * can show at a glance where a lockup stops being legible. A fixed internal
+ * canvas is scaled to fit the container (ResizeObserver + transform), keeping
+ * every step at an exact px size regardless of viewport.
+ *
+ * ASSET-AGNOSTIC: variants (columns) are CONSUMER-INJECTED. Each variant supplies
+ * a rendered mark `node` that fills its cell (a width-constrained box), so the
+ * mark scales with the step. The monorepo original hardcoded four `KolLogo`
+ * variants; this DS version bakes in no mark — the consumer passes their own.
+ *
+ *   import { LogoScaling } from '@kolkrabbi/kol-styleguide'
+ *   import { Asset } from '@kolkrabbi/kol-brand/svg'
+ *   <LogoScaling
+ *     variants={[
+ *       { label: 'Logomark',          node: <Asset name="kol-logomark" />,    widthMul: 1 },
+ *       { label: 'Vertical lockup',   node: <Asset name="kol-lockup-vert" />, widthMul: 1 },
+ *       { label: 'Horizontal lockup', node: <Asset name="kol-lockup-hori" />, widthMul: 2.5 },
+ *       { label: 'Wordmark',          node: <Asset name="kol-wordmark" />,    widthMul: 2.5 },
+ *     ]}
+ *   />
+ *
+ * Column labels are authored in the case they should render — no text-transform
+ * is applied (KOL no-auto-casing rule).
+ */
+
+const DEFAULT_STEPS = [128, 96, 64, 48, 40, 32, 24, 16, 12, 8]
+
+export default function LogoScaling({
+  variants = [],
+  steps = DEFAULT_STEPS,
+  canvasWidth = 1600,
+  canvasHeight = 1000,
+  className = '',
+}) {
+  const outerRef = useRef(null)
+  const [scale, setScale] = useState(1)
+
+  useEffect(() => {
+    const el = outerRef.current
+    if (!el) return undefined
+    const ro = new ResizeObserver(([entry]) => {
+      setScale(entry.contentRect.width / canvasWidth)
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [canvasWidth])
+
+  return (
+    <div className={`kol-logo-scaling ${className}`.trim()}>
+      <div
+        ref={outerRef}
+        className="relative w-full overflow-hidden"
+        style={{ aspectRatio: `${canvasWidth} / ${canvasHeight}` }}
+      >
+        <div
+          className="absolute top-0 left-0 inline-grid gap-x-12 gap-y-8 items-center text-emphasis origin-top-left"
+          style={{
+            gridTemplateColumns: `auto repeat(${variants.length}, auto)`,
+            width: canvasWidth,
+            height: canvasHeight,
+            transform: `scale(${scale})`,
+          }}
+        >
+          <div />
+          {variants.map((v, i) => (
+            <div key={v.label ?? i} className="kol-helper-12 tracking-widest">
+              {v.label}
+            </div>
+          ))}
+
+          {steps.map((px) => (
+            <Fragment key={px}>
+              <div className="kol-helper-12 text-right">{px}</div>
+              {variants.map((v, i) => (
+                <div
+                  key={v.label ?? i}
+                  className="[&_svg]:w-full [&_svg]:h-auto"
+                  style={{ width: px * (v.widthMul ?? 1) }}
+                >
+                  {v.node}
+                </div>
+              ))}
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}