@kolkrabbi/kol-styleguide 0.16.0 → 0.18.0

package/src/ColorLab.jsx

@@ -1,144 +1,576 @@
-import { useState } from 'react'
-import { ColorPickerPopover, Dropdown, HARMONIES, PaletteHarmonyWheel, ToggleSwitch, hslToHex } from '@kolkrabbi/kol-component'
-import { COLOR_MIX, COLOR_ROLES, COLOR_SLOTS, DEFAULT_COLOR_LAB, deriveColorLab, rgbText } from './colorLab.js'
-import { fgOn } from './comboMath.js'
+import { useEffect, useRef, useState } from 'react'
+import { Button, ColorPickerPopover, Dropdown, Icon, IconFrame, PaletteHarmonyWheel, SettingsSections, Slider, Tooltip, hexToHsl, hslToHex } from '@kolkrabbi/kol-component'
+import { COLOR_RELATIONS, CVD_TYPES, DEFAULT_COLOR_LAB, colorLab, colorLabCss, contrastGrade, contrastRatio, hexToOklch, inkOn, midColor, oklchToHex, paletteFromPixels, rollColorLab, simulateCvd, tintLadder } from './colorLab.js'
+import LabWindow, { CopyAction, LabHistory, useLabValue } from './lab/LabWindow.jsx'
 
-/* taxonomy-ok: organism — the color builder: harmony wheel, roles, slots, palette, ramps and the 60/30/10 strip over one value */
+/* taxonomy-ok: organism — the colour generator in the lab window: sources and harmonies in the rail, the colours on the stage, the two accessibility views */
 
 /**
- * ColorLab — an interactive palette builder from one base color.
+ * ColorLab — A brand's colour, generated from one base colour. kol-fxr's engine (`colorLab.js`): colour 1 is the base,
+ * every colour given its job by how it looks — the darkest the Background, the lightest the Ink, the most saturated the
+ * Accent.
  *
- * Carried from kol-atlas's Color page (2026-10-20). Six sections over ONE value: Harmony (base +
- * rule on KOL's wheel), Roles (the harmony's five), Brand slots (four, two dark two light), Palette
- * (ten hues 36° apart + blue-grey and grey ramps), Ramps (five blend steps per hue) and Composition
- * (60/30/10). Select a slot or a composition share, then click any swatch to fill it.
+ * Adobe Color's anatomy, the user's reference (BrandLabToolWindow reviews 1–3, plan-2026-10-29-lab-window-review-1):
+ *   header   three views — Create palette · Contrast checker · Color blindness simulator — then undo · redo
+ *   palette  rail: Base (the picker, its modes HEX · RGB · HSB · Lab, the base's lock) · Image (Adobe's drop zone, then
+ *            `samples` — images from the bucket, each with its palette — and the `library` link) · Wheel (the wheel, the
+ *            harmony tiles under it — the DS's `clr-*` glyphs, the mode named; review 6: on the Wheel tab only). Stage:
+ *            the colours as columns — lock · edit tint (seven steps) · drag · delete, the hex opening Edit color, copy, a +
+ *            on every seam — then the palette small, Generate random and Copy CSS. 2 to 8 colours, added and removed on
+ *            the swatches; a hand edit makes the harmony Custom.
+ *   contrast the same window (review 6 — *"why is it totally different from color lab?"*): the rail's tabs Summary ·
+ *            Suggestions · Set a ratio (Adobe's three, short enough for the rail) over the pair (foreground and background from the palette, each
+ *            with its lightness, swap between them, the ratio above); the stage Adobe's preview — the image beside the pair
+ *            as a page — and the palette small under it
+ *   vision   the rail names the conflicts and plots the palette on the wheel; the stage the palette, then a row per colour
+ *            vision, a warning where two colours become too close to tell apart; the palette small under it
+ *   output   the palette as a table and CSS. Color Lab owns the palette; Combo Lab combines it.
  *
- * The math is `colorLab.js` (`deriveColorLab`, `colorLabCss`), so a consumer can save the value into
- * a brand and emit it as CSS without rendering the lab.
- *
- * @param {Object}   value     `{ base, harmony, blueBase, greyBase, blueLinked, slots, picks }` — controlled; omit for internal
+ * @param {Object}   value     `{ base, relation, count, seed, colors, locked }` — controlled; omit for internal
  * @param {Function} onChange  `(next) => void`
+ * @param {Array}    [samples] `[{ src, label }]` — images to try (the Image tab's "Try one of ours"); `src` must be
+ *                             same-origin or CORS-clean, since the pixels are read (kol-media-client's `proxied(url)`)
+ * @param {Object}   [library] `{ label, href }` — where the samples live, linked beside them ("Media: R2B2")
  * @param {string}   className classes on the root
  */
-const LABEL = 'kol-helper-10 tracking-widest text-meta uppercase'
-const BARE_SWITCH = '[&>.toggle-switch-label]:hidden'
-const PICKER = '[&>*]:!size-3'
-/* ten columns capped so the 5-row ramp fits the window — a swatch is the same size in every section */
-const ROW_MAX = 'calc((100vh - 200px) * 2)'
-const isHex = (hex) => /^#[0-9a-f]{6}/i.test(hex)
-
-function Swatch({ hex, name, selected, onClick, info }) {
-  return (
-    <button type="button" onClick={onClick} title={`${name} ${hex}`} className={`group relative aspect-square cursor-pointer overflow-hidden rounded ${selected ? 'ring-2 ring-[var(--kol-accent-primary)]' : ''}`} style={{ background: hex }}>
-      <span className={`absolute inset-x-0 bottom-0 flex flex-col gap-0.5 bg-surface-primary px-1.5 py-1 text-left kol-mono-10 leading-tight transition-opacity ${info ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
-        <span className="truncate text-emphasis">{name}</span>
-        <span className="truncate text-meta">{hex}</span>
-        <span className="truncate text-meta">{rgbText(hex)}</span>
-      </span>
-    </button>
-  )
-}
+const hexToOklchL = (hex) => hexToOklch(hex)[0]
+const isHex = (hex) => /^#[0-9a-f]{6}$/i.test(hex)
+const ratioText = (r) => (Math.floor(r * 100) / 100).toFixed(2)
+const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(' ')
 
-const Row = ({ children }) => <div className="grid grid-cols-10 gap-2" style={{ maxWidth: ROW_MAX }}>{children}</div>
+/* THE HARMONIES AS THE DS DRAWS THEM (review 3 — *"I know we have some icons for this in DS"*): kol-icons' signal set,
+ * `color` group. `clr-split`, `clr-tet` and `clr-rnd` were drawn 2026-10-29 in the same style, for his review */
+const HARMONY_ICON = { analogous: 'clr-anl', monochromatic: 'clr-mono', complementary: 'clr-comp', split: 'clr-split', triadic: 'clr-tri', tetradic: 'clr-tet', compound: 'clr-cmpd', shades: 'clr-shd', custom: 'clr-rnd' }
+/* Adobe's order (review 5): custom first, then by how far the hues reach */
+const HARMONY_TILES = ['custom', 'analogous', 'monochromatic', 'shades', 'complementary', 'split', 'triadic', 'tetradic', 'compound']
+/* the relations the wheel can draw (kol-component HARMONIES) */
+const WHEEL_HARMONIES = ['analogous', 'complementary', 'split', 'triadic', 'tetradic']
+const harmonyLabel = (id) => (id === 'custom' ? 'Custom' : COLOR_RELATIONS.find((r) => r.id === id)?.label ?? id)
 
-const Switch = ({ label, checked, onChange }) => (
-  <span className="flex items-center gap-2"><span className={LABEL}>{label}</span><ToggleSwitch size="sm" className={BARE_SWITCH} checked={checked} onChange={onChange} /></span>
+/* a glyph on a column, in the column's ink: kol-component's IconFrame — a click, no button chrome (ref 1) */
+const Glyph = ({ icon, label, ink, ...props }) => (
+  <Tooltip label={label}><IconFrame name={icon} variant="ghost" size="sm" aria-label={label} style={{ color: ink, background: 'transparent' }} {...props} /></Tooltip>
 )
 
-function Section({ title, info, onInfo, extra, children }) {
+/* the + on a seam: a hover zone on the column's edge, the round control centred on the seam */
+const AddSeam = ({ side, label, onClick }) => (
+  <span className="group/seam absolute inset-y-0 z-[1] flex w-6 items-center justify-center" style={{ [side]: -13 }}>
+    <span className="opacity-0 transition-opacity group-hover/seam:opacity-100 focus-within:opacity-100">
+      <Tooltip label={label}><IconFrame name="plus" variant="secondary" radius="full" size="sm" aria-label={label} onClick={onClick} /></Tooltip>
+    </span>
+  </span>
+)
+
+/* the palette's outer corners take the system's 4px (review 3 — *"4px rounding is missing"*) */
+const corners = (i, n) => ({ ...(i === 0 ? { borderTopLeftRadius: 4, borderBottomLeftRadius: 4 } : null), ...(i === n - 1 ? { borderTopRightRadius: 4, borderBottomRightRadius: 4 } : null) })
+
+/* ONE COLUMN, ADOBE'S (review 1): the colour edge to edge; top right lock · edit tint · drag · delete; bottom left the hex,
+ * which is the "Edit color" button, and copy at the bottom right */
+function Column({ s, n, inks, tint, onTint, onLock, onEdit, onCopy, onDelete, canDelete, drag, add }) {
+  const ink = inkOn(s.hex, inks).ink
+  if (tint) {
+    /* EDIT TINT (review 2 — *"tints are 7, and overlay shows info"*): seven steps, the colour 4th and outlined */
+    return (
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden" style={corners(s.index, n)}>
+        {tintLadder(s.hex).map((hex, i) => (
+          <Tooltip key={`${hex}${i}`} label={`${s.roleLabel}, ${i + 1} of 7, ${hex}`}>
+            <button type="button" aria-label={`${s.roleLabel}, ${i + 1} of 7, ${hex}`} onClick={() => onTint(hex)} className="flex-1 cursor-pointer border-0"
+              style={{ background: hex, boxShadow: i === 3 ? `inset 0 0 0 2px ${inkOn(hex, inks).ink}, inset 0 0 0 4px ${hex}` : undefined }} />
+          </Tooltip>
+        ))}
+      </div>
+    )
+  }
   return (
-    <section className="flex flex-col gap-3">
-      <div className="flex items-center gap-6">
-        <h3 className="m-0 kol-eyebrow text-fg-80">{title}</h3>
-        {onInfo && <Switch label="Info" checked={info} onChange={onInfo} />}
-        {extra}
+    /* DRAG SHOWS ITSELF (review 2): the dragged column dims; the one under the pointer shows a bar on the side the colour
+     * lands; the dropped column is ringed for a moment */
+    <div {...drag.target} className={`group relative flex min-w-0 flex-1 flex-col justify-end p-3 transition-opacity ${drag.source ? 'opacity-40' : ''}`}
+      style={{ background: s.hex, color: ink, boxShadow: drag.landed ? `inset 0 0 0 2px ${ink}` : undefined, ...corners(s.index, n) }}>
+      {drag.side && <span aria-hidden="true" className="absolute inset-y-0 w-0.5" style={{ [drag.side]: -2, background: 'var(--kol-fg-96)' }} />}
+      {add.left && <AddSeam side="left" label="Add color left" onClick={add.left} />}
+      {add.right && <AddSeam side="right" label="Add color right" onClick={add.right} />}
+      <div className={`absolute right-2 top-2 flex flex-col gap-1 transition-opacity ${s.locked ? '' : 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'}`}>
+        <Glyph ink={ink} icon={s.locked ? 'lock' : 'unlock'} label={s.locked ? 'Unlock color' : 'Lock color'} onClick={onLock} />
+        <span className={s.locked ? 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 flex flex-col gap-1' : 'flex flex-col gap-1'}>
+          <Glyph ink={ink} icon="drop" label="Edit tint" onClick={() => onTint(null)} />
+          <Glyph ink={ink} icon="drag-handle" label="Drag to reorder" {...drag.handle} />
+          {canDelete && <Glyph ink={ink} icon="trash" label="Delete" onClick={onDelete} />}
+        </span>
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <Tooltip label="Edit color">
+          <ColorPickerPopover color={s.hex} label="Edit color" title="Edit color" modes placement="top-start" alpha={false}
+            className="kol-lab-hex"
+            trigger={<span className="kol-mono-12 px-2 py-1">{s.hex}</span>}
+            onChange={(hex) => isHex(hex.slice(0, 7)) && onEdit(hex.slice(0, 7).toUpperCase())} />
+        </Tooltip>
+        <Glyph ink={ink} icon="copy" label="Copy hex" onClick={onCopy} />
       </div>
-      {children}
-    </section>
+    </div>
   )
 }
 
-export default function ColorLab({ value: valueProp, onChange, className = '' }) {
-  const [own, setOwn] = useState(DEFAULT_COLOR_LAB)
-  const value = valueProp ?? own
-  const set = (patch) => { const next = { ...value, ...patch }; if (valueProp === undefined) setOwn(next); onChange?.(next) }
-  const [slot, setSlot] = useState(null)
-  const [info, setInfo] = useState({ roles: false, brand: false, palette: false, ramps: false, mix: false })
-  const infoFor = (k) => ({ info: info[k], onInfo: (v) => setInfo((x) => ({ ...x, [k]: v })) })
-  const c = deriveColorLab(value)
-
-  /* a swatch click fills the selected slot (0–3) or composition share (4–6) */
-  const assign = (hex) => {
-    if (slot === null) return
-    if (slot >= 4) set({ picks: [0, 1, 2].map((i) => (i === slot - 4 ? hex : value.picks?.[i] ?? null)) })
-    else set({ slots: c.slots.map((v, i) => (i === slot ? hex : v)) })
-    setSlot(null)
+/* the wheel takes the rail's width and follows it as the rail is dragged (review 2) */
+function WheelFill({ children }) {
+  const ref = useRef(null)
+  const [w, setW] = useState(248)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return undefined
+    const ro = new ResizeObserver(([e]) => setW(Math.max(160, Math.floor(e.contentRect.width))))
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+  return <div ref={ref} className="w-full">{children(w)}</div>
+}
+
+/* an image's palette, read off a canvas at 200px (k-means in OKLab, `paletteFromPixels`) — a sample tile's strip, or the
+ * palette itself when an image is chosen */
+const extractPalette = (src, k) => new Promise((resolve) => {
+  const img = new Image()
+  img.onload = () => {
+    const f = Math.min(1, 200 / Math.max(img.width, img.height))
+    const cv = document.createElement('canvas')
+    cv.width = Math.max(1, Math.round(img.width * f)); cv.height = Math.max(1, Math.round(img.height * f))
+    const ctx = cv.getContext('2d')
+    ctx.drawImage(img, 0, 0, cv.width, cv.height)
+    try { resolve(paletteFromPixels(ctx.getImageData(0, 0, cv.width, cv.height).data, k)) } catch { resolve([]) }
   }
-  const toggleSlot = (i) => setSlot(slot === i ? null : i)
-  const picked = (hex) => c.slots.includes(hex)
+  img.onerror = () => resolve([])
+  img.src = src
+})
+
+/* ADOBE'S SAMPLE TILE (review 6, ref 54): the image, its palette as a strip under it; a click makes it the image */
+function SampleTile({ src, label, onPick }) {
+  const [strip, setStrip] = useState([])
+  useEffect(() => { let on = true; extractPalette(src, 4).then((cs) => { if (on) setStrip(cs) }); return () => { on = false } }, [src])
+  return (
+    <Tooltip label={label}>
+      <button type="button" onClick={onPick} aria-label={`Try ${label}`} className="flex w-full cursor-pointer flex-col overflow-hidden rounded">
+        <img src={src} alt="" className="aspect-square w-full object-cover" />
+        <span className="flex h-3 w-full">{strip.map((hex, i) => <span key={i} className="flex-1" style={{ background: hex }} />)}</span>
+      </button>
+    </Tooltip>
+  )
+}
 
+/* THE PALETTE ON THE WHEEL (review 6, Adobe's ref 59): each colour a dot at its hue (clockwise from the top) and
+ * saturation (the radius) on the hue disc — a plot, not a picker */
+function PaletteDots({ colors }) {
   return (
-    <div className={`flex flex-col gap-10 ${className}`.trim()}>
-      <Section title="Harmony">
-        <div className="flex flex-wrap items-start gap-x-8 gap-y-4">
-          <div className="flex flex-col gap-2"><span className={LABEL}>Base</span><span className="flex h-8 items-center gap-2"><ColorPickerPopover size="sm" className={PICKER} color={c.base} onChange={(hex) => isHex(hex) && set({ base: hex.slice(0, 7).toUpperCase() })} label="Base color" /><span className="kol-mono-10 text-meta">{c.base}</span></span></div>
-          <div className="flex flex-col gap-2"><span className={LABEL}>Harmony</span><Dropdown size="sm" value={c.harmony} onChange={(v) => set({ harmony: v })} options={HARMONIES.map((x) => ({ value: x.id, label: x.label }))} /></div>
-          <div className="flex flex-col gap-2"><span className={LABEL}>Info</span><span className="flex h-8 items-center"><ToggleSwitch size="sm" className={BARE_SWITCH} checked={Object.values(info).every(Boolean)} onChange={(v) => setInfo({ roles: v, brand: v, palette: v, ramps: v, mix: v })} /></span></div>
+    <div aria-hidden="true" className="relative mx-auto aspect-square w-full max-w-[280px] rounded-full"
+      style={{ background: 'radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)' }}>
+      {colors.map((hex, i) => {
+        const { h: hue, s: sat } = hexToHsl(hex)
+        const r = (sat / 100) * 46, a = (hue * Math.PI) / 180
+        return <span key={i} className="absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ left: `${50 + r * Math.sin(a)}%`, top: `${50 - r * Math.cos(a)}%`, background: hex, boxShadow: '0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.35)' }} />
+      })}
+    </div>
+  )
+}
+
+/* a pass or a fail, as a grade the Summary reads */
+const Verdict = ({ ok, na }) => (na
+  ? <span className="kol-mono-12 text-meta">N/A</span>
+  : <span className={`inline-flex items-center gap-1 kol-mono-12 ${ok ? 'text-emphasis' : 'text-meta'}`}><Icon name={ok ? 'check' : 'x'} size={12} className={ok ? 'text-oq-96' : 'text-oq-48'} />{ok ? 'Pass' : 'Fail'}</span>)
+
+/* two simulated colours too close to tell apart: OKLab distance under the threshold (≈ a just-noticeable step, doubled) */
+const CONFLICT = 0.06
+const oklab = (hex) => { const [L, C, h] = hexToOklch(hex); return [L, C * Math.cos((h * Math.PI) / 180), C * Math.sin((h * Math.PI) / 180)] }
+const close = (a, b) => { const p = oklab(a), q = oklab(b); return Math.hypot(p[0] - q[0], p[1] - q[1], p[2] - q[2]) < CONFLICT }
+
+/* the foreground over the background at an opacity, so the ladder measures what the eye sees */
+const over = (fg, bg, a) => {
+  const p = [1, 3, 5].map((i) => parseInt(fg.slice(i, i + 2), 16)), q = [1, 3, 5].map((i) => parseInt(bg.slice(i, i + 2), 16))
+  return '#' + p.map((v, i) => Math.round(v * a + q[i] * (1 - a)).toString(16).padStart(2, '0')).join('')
+}
+
+export default function ColorLab({ value: valueProp, onChange, samples = [], library, className = '' }) {
+  const h = useLabValue(valueProp, onChange, DEFAULT_COLOR_LAB)
+  const { value, set } = h
+  const c = colorLab(value)
+  const [tinting, setTinting] = useState(null)
+  const inks = { dark: c.roles.bg, light: c.roles.fg }
+  const css = colorLabCss(value)
+  const [view, setView] = useState('palette')
+  const [tab, setTab] = useState('base')
+
+  /* a change to the inputs regenerates the unlocked colours from the same seed; locked ones keep their place */
+  const regenerate = (patch) => set((v) => rollColorLab({ ...v, ...patch, colors: c.colors }, v.seed))
+  /* A HAND EDIT MAKES THE HARMONY CUSTOM (review 3, Adobe's "Color harmonies: Custom") */
+  const setColors = (colors, locked = value.locked) => set({ colors, count: colors.length, locked, relation: 'custom' })
+  const editAt = (i, hex) => { const colors = c.colors.map((x, j) => (j === i ? hex : x)); set({ colors, count: colors.length, relation: 'custom', ...(i === 0 ? { base: hex } : {}) }) }
+  /* insert at `at` the colour between its neighbours (at an end, between the end colour and white or black) */
+  const insert = (at) => {
+    if (c.colors.length >= 8) return
+    const prev = c.colors[at - 1], next = c.colors[at]
+    const hex = midColor(prev ?? (next && hexToOklchL(next) < 0.5 ? '#FFFFFF' : '#000000'), next ?? (hexToOklchL(prev) < 0.5 ? '#FFFFFF' : '#000000'))
+    setColors([...c.colors.slice(0, at), hex, ...c.colors.slice(at)], value.locked.map((j) => (j >= at ? j + 1 : j)))
+  }
+  const remove = (i) => setColors(c.colors.filter((_, j) => j !== i), value.locked.filter((j) => j !== i).map((j) => (j > i ? j - 1 : j)))
+  const toggleLock = (i) => set({ colors: c.colors, locked: value.locked.includes(i) ? value.locked.filter((j) => j !== i) : [...value.locked, i] })
+  /* Generate random rolls the chosen harmony; a Custom palette rolls freely and stays Custom */
+  const roll = () => set((v) => ({ ...rollColorLab({ ...v, colors: c.colors, relation: v.relation === 'custom' ? 'random' : v.relation }), relation: v.relation }))
+  const base = hexToHsl(c.colors[0])
+
+  /* REORDER (the ⋮⋮): the first column is colour 1, the base, wherever the colours land; the locks travel with them */
+  const [dragFrom, setDragFrom] = useState(null)
+  const [dragOver, setDragOver] = useState(null)
+  const [landed, setLanded] = useState(null)
+  useEffect(() => { if (landed === null) return undefined; const t = setTimeout(() => setLanded(null), 900); return () => clearTimeout(t) }, [landed])
+  const move = (from, to) => {
+    if (to < 0 || to >= c.colors.length || to === from) return
+    const order = c.colors.map((_, i) => i)
+    order.splice(to, 0, order.splice(from, 1)[0])
+    const colors = order.map((i) => c.colors[i])
+    set({ colors, base: colors[0], relation: 'custom', locked: order.map((i, j) => (value.locked.includes(i) ? j : -1)).filter((j) => j >= 0) })
+    setLanded(to)
+  }
+  const dragFor = (i) => ({
+    source: dragFrom === i,
+    side: dragOver === i && dragFrom !== null && dragFrom !== i ? (dragFrom > i ? 'left' : 'right') : null,
+    landed: landed === i,
+    target: {
+      onDragOver: (e) => { if (dragFrom === null) return; e.preventDefault(); if (dragOver !== i) setDragOver(i) },
+      onDrop: (e) => { e.preventDefault(); if (dragFrom !== null) move(dragFrom, i); setDragFrom(null); setDragOver(null) },
+    },
+    handle: {
+      role: 'button', tabIndex: 0, draggable: true, className: 'cursor-grab active:cursor-grabbing',
+      onDragStart: (e) => { e.dataTransfer.effectAllowed = 'move'; setDragFrom(i) },
+      onDragEnd: () => { setDragFrom(null); setDragOver(null) },
+      onKeyDown: (e) => { if (e.key === 'ArrowLeft') { e.preventDefault(); move(i, i - 1) } if (e.key === 'ArrowRight') { e.preventDefault(); move(i, i + 1) } },
+    },
+  })
+
+  /* THE IMAGE SOURCE: an upload, a drop or a sample; its palette read off a canvas to the current number of colours */
+  const [image, setImage] = useState(null)
+  const fileInput = useRef(null)
+  const [dropping, setDropping] = useState(false)
+  const takeImage = async (src) => {
+    const colors = await extractPalette(src, c.colors.length)
+    if (colors.length >= 2) set({ colors, count: colors.length, base: colors[0], locked: [], relation: 'custom' })
+    setImage(src)
+  }
+  const fromFile = (file) => {
+    if (!file || !/^image\/(jpeg|png|webp)$/.test(file.type) || file.size > 40 * 1024 * 1024) return
+    takeImage(URL.createObjectURL(file))
+  }
+
+  /* ── the palette view ── */
+  const harmony = (
+    /* HARMONIES (review 3): the DS's glyphs, each named on hover, the mode named in the label — on the Wheel tab only
+     * (review 6 — *"you know there is a tab for wheel. why do you put it on every page?"*) */
+    <SettingsSections divided sections={[{ label: `Harmony: ${harmonyLabel(c.relation)}`, rows: [{ id: 'tiles', align: 'fill', render: () => (
+      /* review 5 — *"use bigger icons, and dont use background color"*, the row across the rail's width: no chip, the
+       * glyph in OPAQUE ink (oq, never fg — a translucent stroke shows where the ring crosses a dot), full when chosen */
+      <div className="grid w-full grid-cols-9">
+        {HARMONY_TILES.map((id) => (
+          <Tooltip key={id} label={harmonyLabel(id)}>
+            <button type="button" aria-label={harmonyLabel(id)} aria-pressed={c.relation === id}
+              className={`flex aspect-square w-full cursor-pointer items-center justify-center ${c.relation === id ? 'text-oq-96' : 'text-oq-40 hover:text-oq-72'}`}
+              onClick={() => { if (id !== 'custom') regenerate({ relation: id }) }}>
+              <Icon name={HARMONY_ICON[id]} size={28} />
+            </button>
+          </Tooltip>
+        ))}
+      </div>
+    ) }] }]} />
+  )
+  const sources = [
+    { id: 'base', label: 'Base', icon: 'eyedrop', content: (
+      <ColorPickerPopover inline modes title="Base" color={c.colors[0]} label="Base" alpha={false}
+        hexEnd={<Glyph ink="currentColor" icon={value.locked.includes(0) ? 'lock' : 'unlock'} label={value.locked.includes(0) ? 'Unlock base' : 'Lock base'} onClick={() => toggleLock(0)} />}
+        onChange={(hex) => isHex(hex.slice(0, 7)) && regenerate({ base: hex.slice(0, 7).toUpperCase() })} />
+    ) },
+    { id: 'image', label: 'Image', icon: 'image', content: (
+      <div className="flex min-h-0 flex-1 flex-col gap-6">
+        {/* THE DROP ZONE, ADOBE'S (review 6, refs 54 · 56 · 57): the dashed outline of the reference, the upload button
+          * centred with its two lines, the whole zone a target; under the pointer or a drag it shows the checker */}
+        <div
+          role="button" tabIndex={0} aria-label={image ? 'Upload another image' : 'Upload your image'}
+          className={`kol-lab-drop relative flex min-h-[280px] flex-1 cursor-pointer flex-col items-center justify-center gap-2 overflow-hidden rounded border border-dashed border-oq-16 p-6 text-center ${dropping ? 'is-dropping' : ''}`}
+          onClick={() => fileInput.current?.click()}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.current?.click() } }}
+          onDragOver={(e) => { e.preventDefault(); setDropping(true) }}
+          onDragLeave={() => setDropping(false)}
+          onDrop={(e) => { e.preventDefault(); setDropping(false); fromFile(e.dataTransfer.files?.[0]) }}
+        >
+          {image
+            ? <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
+            : (
+              <>
+                <Button size="md" iconLeft="upload" onClick={(e) => { e.stopPropagation(); fileInput.current?.click() }}>Upload your image</Button>
+                <span className="kol-sans-body-02 text-emphasis">Or drag and drop here</span>
+                <span className="kol-sans-body-03 text-meta">File must be JPEG, JPG, PNG or WebP and up to 40MB</span>
+              </>
+            )}
+          <input ref={fileInput} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(e) => { fromFile(e.target.files?.[0]); e.target.value = '' }} />
         </div>
-        <PaletteHarmonyWheel size={220} hue={c.h} harmony={c.harmony} saturation={c.s} lightness={c.l} onHueChange={(hh) => set({ base: hslToHex(hh, c.s, c.l).toUpperCase() })} />
-      </Section>
-
-      <Section title="Roles" {...infoFor('roles')}>
-        <Row>{c.roles.map((hex, i) => <Swatch key={i} info={info.roles} hex={hex} name={COLOR_ROLES[i]} onClick={() => assign(hex)} />)}</Row>
-      </Section>
-
-      <Section title="Brand slots" {...infoFor('brand')}>
-        <Row>{c.slots.map((hex, i) => <Swatch key={i} info={info.brand} hex={hex} name={COLOR_SLOTS[i]} selected={slot === i} onClick={() => toggleSlot(i)} />)}</Row>
-      </Section>
-
-      <Section title="Palette" {...infoFor('palette')} extra={<Switch label="Link blue" checked={c.blueLinked} onChange={(v) => set({ blueLinked: v })} />}>
-        <Row>{c.hues.map((x) => <Swatch key={x.name + x.hex} info={info.palette} hex={x.hex} name={x.name} selected={picked(x.hex)} onClick={() => assign(x.hex)} />)}</Row>
-        {[['Blue-grey', c.blueGrey, c.blueBase, 'blueBase', true], ['Grey', c.grey, c.greyBase, 'greyBase', false]].map(([row, ramp, rb, key, linkable]) => (
-          <div key={row} className="mt-4 flex flex-col gap-2">
-            <span className="flex h-4 items-center gap-3"><span className={`${LABEL} w-[120px]`}>{row} base</span>
-              {!(linkable && c.blueLinked) && <><ColorPickerPopover size="sm" className={PICKER} color={rb} onChange={(hex) => isHex(hex) && set({ [key]: hex.slice(0, 7).toUpperCase() })} label={`${row} base`} /><span className="kol-mono-10 text-meta">{rb}</span></>}</span>
-            <Row>{ramp.map((hex, i) => <Swatch key={row + i} info={info.palette} hex={hex} name={`${row} ${(i + 1) * 100}`} selected={picked(hex)} onClick={() => assign(hex)} />)}</Row>
+        {samples.length > 0 && (
+          /* "TRY ONE OF OURS" (ref 54): the samples with their palettes; the user's idea — they come from the bucket, named
+           * and linked beside them */
+          <div className="flex flex-col gap-3">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="kol-sans-body-02 text-emphasis">Don’t have an image? Try one of ours:</span>
+              {library && <a href={library.href} target="_blank" rel="noreferrer" className="group inline-flex shrink-0 items-center gap-1 kol-mono-12 text-meta hover:text-emphasis">{library.label}<Icon name="external-link" size={12} className="text-oq-48 group-hover:text-oq-96" /></a>}
+            </div>
+            <div className="grid grid-cols-4 gap-2">
+              {samples.slice(0, 4).map((x) => <SampleTile key={x.src} src={x.src} label={x.label ?? x.src} onPick={() => takeImage(x.src)} />)}
+            </div>
           </div>
+        )}
+      </div>
+    ) },
+    { id: 'wheel', label: 'Wheel', icon: 'clr-mono', content: (
+      <>
+        <WheelFill>{(size) => <PaletteHarmonyWheel size={size} hue={base.h} saturation={base.s} lightness={base.l} harmony={WHEEL_HARMONIES.includes(c.relation) ? c.relation : 'analogous'}
+          onHueChange={(hue) => regenerate({ base: hslToHex(hue, base.s, base.l).toUpperCase() })} />}</WheelFill>
+        {harmony}
+      </>
+    ) },
+  ]
+  /* THE PALETTE SMALL (Adobe's) under every view's stage, Randomise at its right on the palette view (review 5 — *"under
+   * the color, not siderail"*; review 6 — the views share the window) */
+  const paletteFoot = (
+    <div className="flex shrink-0 items-center gap-3">
+      <div className="flex h-8 w-60 overflow-hidden rounded" aria-label="Palette">
+        {c.swatches.map((s) => <span key={s.index} className="flex-1" style={{ background: s.hex }} title={s.hex} />)}
+      </div>
+      {/* RANDOMISE (review 6, Adobe's shuffle): the nav rung, like the header's controls; Copy CSS is in the header, where
+        * every lab keeps it */}
+      {view === 'palette' && <Button variant="nav" size="sm" iconLeft="shuffle" className="ml-auto" onClick={roll}>Randomise</Button>}
+    </div>
+  )
+  const paletteStage = (
+    <div className="flex h-full min-h-[240px] flex-col gap-3">
+      <div className="flex min-h-0 flex-1 gap-0.5">
+        {c.swatches.map((s) => (
+          <Column
+            key={s.index}
+            s={s}
+            n={c.colors.length}
+            inks={inks}
+            tint={tinting === s.index}
+            onTint={(hex) => { if (hex) editAt(s.index, hex); setTinting(tinting === s.index || hex ? null : s.index) }}
+            onLock={() => toggleLock(s.index)}
+            onEdit={(hex) => editAt(s.index, hex)}
+            onCopy={() => navigator.clipboard?.writeText(s.hex)}
+            onDelete={() => remove(s.index)}
+            canDelete={c.colors.length > 2}
+            drag={dragFor(s.index)}
+            add={{ left: c.colors.length < 8 ? () => insert(s.index) : null, right: c.colors.length < 8 && s.index === c.colors.length - 1 ? () => insert(s.index + 1) : null }}
+          />
         ))}
-      </Section>
-
-      <Section title="Ramps" {...infoFor('ramps')}>
-        <Row>
-          {[0, 1, 2, 3, 4].flatMap((step) => c.ramps.map((hue) => {
-            const hex = hue.steps[step]
-            return <Swatch key={hue.hex + step} info={info.ramps} hex={hex} name={`${hue.name} ${(step + 1) * 100}`} selected={picked(hex)} onClick={() => assign(hex)} />
-          }))}
-        </Row>
-      </Section>
-
-      <Section title="Composition" {...infoFor('mix')}>
-        <div style={{ maxWidth: ROW_MAX }}>
-          <div className="flex h-40 overflow-hidden rounded">
-            {COLOR_MIX.map(([share, label], i) => (
-              <button key={label} type="button" onClick={() => toggleSlot(4 + i)} title={`${label} ${c.mix[i]}`} className={`flex min-w-0 cursor-pointer flex-col justify-between p-3 text-left transition-colors ${slot === 4 + i ? 'ring-2 ring-inset ring-[var(--kol-accent-primary)]' : ''}`} style={{ flex: share, background: c.mix[i], color: fgOn(c.mix[i]) }}>
-                <span className="kol-sans-heading-03 leading-none">{share * 10}</span>
-                <span className={`truncate kol-mono-10 leading-tight transition-opacity ${info.mix ? 'opacity-100' : 'opacity-0'}`}>{c.mix[i]}</span>
-              </button>
-            ))}
-          </div>
-          <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
-            {COLOR_MIX.map(([, label, note], i) => (
-              <div key={label}>
-                <div className="mb-1.5 flex items-center gap-2.5">
-                  <span className="size-4 rounded-[3px] border border-fg-16" style={{ background: c.mix[i] }} />
-                  <span className="kol-sans-body-02 text-emphasis">{label}</span>
-                </div>
-                <p className="m-0 kol-sans-body-03 text-meta">{note}</p>
-              </div>
-            ))}
-          </div>
+      </div>
+      {paletteFoot}
+    </div>
+  )
+
+  /* ── the contrast checker (Adobe's ref 58, review 6) ── */
+  const [pair, setPair] = useState(null)
+  const [ctab, setCtab] = useState('summary')
+  const fgI = pair?.fg ?? c.roleIdx.fg
+  const bgI = pair?.bg ?? c.roleIdx.bg
+  const fg = c.colors[fgI] ?? c.roles.fg, bg = c.colors[bgI] ?? c.roles.bg
+  const ratio = contrastRatio(fg, bg)
+  const colourOptions = c.swatches.map((s) => ({ value: String(s.index), label: `${s.index + 1}  ${s.hex}` }))
+  /* a colour's lightness, OKLCH L as 0–100 — moving it edits that palette colour */
+  const lightness = (i) => Math.round(hexToOklch(c.colors[i])[0] * 100)
+  const setLightness = (i, L) => { const [, C, hh] = hexToOklch(c.colors[i]); editAt(i, oklchToHex(L / 100, C, hh)) }
+  const SUMMARY = [
+    { id: 'large', label: 'Large text', aa: ratio >= 3, aaa: ratio >= 4.5 },
+    { id: 'small', label: 'Small text', aa: ratio >= 4.5, aaa: ratio >= 7 },
+    { id: 'ui', label: 'Graphics and UI', aa: ratio >= 3, aaa: null },
+  ]
+  /* CONTRAST SUGGESTIONS: the foreground's hue and chroma at other lightnesses that pass AA for small text, nearest first */
+  const fgL = hexToOklch(fg)[0]
+  const suggestions = (() => {
+    const [, C, hh] = hexToOklch(fg)
+    const out = []
+    for (let L = 0.05; L <= 0.98; L += 0.05) { const hex = oklchToHex(L, C, hh); const r = contrastRatio(hex, bg); if (r >= 4.5 && hex !== fg) out.push({ hex, r, L }) }
+    return out.sort((a, b) => Math.abs(a.L - fgL) - Math.abs(b.L - fgL)).slice(0, 6)
+  })()
+  /* SET A CONTRAST RATIO: the foreground's lightness moved away from the background until the pair reaches the target */
+  const [target, setTarget] = useState(null)
+  const solveFor = (t) => {
+    const [, C, hh] = hexToOklch(fg)
+    const Lb = hexToOklch(bg)[0]
+    const far = Lb < 0.5
+    let lo = 0, hi = 1, best = fg
+    for (let k = 0; k < 24; k++) {
+      const mid = (lo + hi) / 2
+      const hex = oklchToHex(far ? Lb + mid * (1 - Lb) : Lb * (1 - mid), C, hh)
+      best = hex
+      if (contrastRatio(hex, bg) < t) lo = mid; else hi = mid
+    }
+    return best
+  }
+  /* the pair, Adobe's: Foreground and Background side by side, swap between them, each colour's lightness under it */
+  const pairCol = (label, i, key) => (
+    <div className="flex min-w-0 flex-col gap-2">
+      <span className="kol-helper-10 tracking-widest text-meta">{label.toUpperCase()}</span>
+      <div className="flex items-center gap-2">
+        <span className="size-4 shrink-0 rounded-full" style={{ background: c.colors[i] }} />
+        <Dropdown size="sm" value={String(i)} onChange={(v) => setPair({ fg: fgI, bg: bgI, [key]: Number(v) })} options={colourOptions} className="min-w-0 flex-1" ariaLabel={`${label} colour`} />
+      </div>
+      <Slider className="w-full" min={0} max={100} step={1} value={lightness(i)} onChange={(L) => setLightness(i, L)} readout="input" displayWidth={3} readoutPreset="rail" aria-label={`${label} lightness`} />
+    </div>
+  )
+  const pairHead = (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between gap-3">
+        <span className="kol-sans-body-02 text-emphasis">Contrast ratio</span>
+        <span className={`inline-flex items-center gap-1 rounded px-2 py-0.5 kol-mono-12 ${ratio >= 4.5 ? 'bg-oq-08 text-emphasis' : 'bg-oq-04 text-meta'}`}><Icon name={ratio >= 4.5 ? 'check' : 'alert-triangle'} size={12} className={ratio >= 4.5 ? 'text-oq-96' : 'text-oq-48'} />{ratioText(ratio)} : 1</span>
+      </div>
+      <div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-start gap-2">
+        {pairCol('Foreground color', fgI, 'fg')}
+        <Button variant="nav" size="sm" iconOnly="swap" aria-label="Swap foreground and background" className="mt-6" onClick={() => setPair({ fg: bgI, bg: fgI })} />
+        {pairCol('Background color', bgI, 'bg')}
+      </div>
+    </div>
+  )
+  const summaryTable = (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-[minmax(0,1fr)_64px_64px] border-b border-oq-16 pb-2 kol-helper-12 text-meta"><span>Category</span><span>AA</span><span>AAA</span></div>
+      {SUMMARY.map((r) => (
+        <div key={r.id} className="grid grid-cols-[minmax(0,1fr)_64px_64px] items-center border-b border-oq-08 py-3 kol-sans-body-03 text-emphasis"><span>{r.label}</span><Verdict ok={r.aa} /><Verdict ok={r.aaa} na={r.aaa === null} /></div>
+      ))}
+    </div>
+  )
+  /* KOL's text levels: the foreground at every ink stop over the background, each measured */
+  const ladder = (
+    <div className="flex flex-col gap-2">
+      <span className="kol-helper-12 text-meta">Text levels</span>
+      <div className="flex w-full flex-col rounded p-3" style={{ background: bg }}>
+        {c.text.map((x) => {
+          const r = contrastRatio(over(fg, bg, x.stop / 100), bg)
+          return (
+            <span key={x.stop} className="grid grid-cols-[32px_minmax(0,1fr)_auto] items-baseline gap-3 py-0.5" style={{ color: over(fg, bg, x.stop / 100) }}>
+              <span className="kol-mono-12">{x.stop}</span>
+              <span className="truncate kol-sans-body-03">{x.name ? x.name[0].toUpperCase() + x.name.slice(1) : 'Text'}</span>
+              <span className="kol-mono-12">{ratioText(r)} {contrastGrade(r)}</span>
+            </span>
+          )
+        })}
+      </div>
+    </div>
+  )
+  const contrastRail = [
+    { id: 'summary', label: 'Summary', content: <>{pairHead}{summaryTable}{ladder}</> },
+    { id: 'suggest', label: 'Suggestions', content: (
+      <>
+        {pairHead}
+        <div className="flex flex-col">
+          <span className="border-b border-oq-16 pb-2 kol-helper-12 text-meta">Foreground colors that pass AA</span>
+          {suggestions.length === 0 && <span className="py-3 kol-sans-body-03 text-meta">None at this hue. Move the background’s lightness.</span>}
+          {suggestions.map((x) => (
+            <button key={x.hex} type="button" onClick={() => editAt(fgI, x.hex)} className="grid cursor-pointer grid-cols-[16px_minmax(0,1fr)_auto] items-center gap-3 border-b border-oq-08 py-2 text-left kol-mono-12 text-emphasis hover:bg-oq-04">
+              <span className="size-4 rounded-full" style={{ background: x.hex }} /><span>{x.hex}</span><span className="text-meta">{ratioText(x.r)} : 1 {contrastGrade(x.r)}</span>
+            </button>
+          ))}
+        </div>
+      </>
+    ) },
+    { id: 'ratio', label: 'Set a ratio', content: (
+      <>
+        {pairHead}
+        <div className="flex flex-col gap-2">
+          <span className="kol-helper-12 text-meta">Target ratio</span>
+          <Slider className="w-full" min={1} max={21} step={0.5} value={target ?? Math.round(ratio * 2) / 2} onChange={(t) => { setTarget(t); editAt(fgI, solveFor(t)) }} readout="input" displayWidth={4} readoutPreset="rail" aria-label="Target contrast ratio" />
+          <span className="kol-sans-body-03 text-meta">The foreground’s lightness moves until the pair reaches it.</span>
         </div>
-      </Section>
+      </>
+    ) },
+  ]
+  const previewImage = image ?? samples[0]?.src
+  const contrastStage = (
+    /* ADOBE'S PREVIEW: the image beside the pair as a page would use it — a headline, body text and a button */
+    <div className="flex h-full min-h-[240px] flex-col gap-3">
+      <div className={`grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] overflow-hidden rounded ${previewImage ? 'grid-cols-2' : ''}`} style={{ background: bg, color: fg }}>
+        {previewImage && <img src={previewImage} alt="" className="h-full min-h-0 w-full object-cover" />}
+        <div className="flex min-h-0 flex-col justify-center gap-6 p-10">
+          <span className="kol-sans-heading-01 leading-none">The quick brown fox</span>
+          <span className="max-w-[48ch] kol-sans-body-02">Body text in the foreground on the background, the size most of a page is read at. If this line is hard to read, so is the page.</span>
+          <span className="inline-flex self-start rounded px-6 py-3 kol-mono-12" style={{ background: fg, color: bg }}>Button</span>
+        </div>
+      </div>
+      {paletteFoot}
     </div>
   )
+
+  /* ── the colour blindness simulator (Adobe's ref 59, review 6) ── */
+  const VISIONS = CVD_TYPES.filter((t) => t.id !== 'normal')
+  const rows = VISIONS.map((t) => {
+    const seen = c.colors.map((hex) => simulateCvd(hex, t.id))
+    return { ...t, seen, conflict: seen.map((x, i) => seen.some((y, j) => j !== i && close(x, y))) }
+  })
+  const conflicts = rows.some((r) => r.conflict.some(Boolean))
+  const visionRail = [{ id: 'conflicts', label: 'Conflicts', content: (
+    <>
+      <div className="flex items-center justify-between gap-3 rounded bg-oq-04 p-3">
+        <span className="kol-sans-body-02 text-emphasis">Potential color blind conflicts</span>
+        <span className={`inline-flex shrink-0 items-center gap-1 rounded px-2 py-0.5 kol-mono-12 ${conflicts ? 'bg-oq-08 text-emphasis' : 'text-meta'}`}>{conflicts && <Icon name="alert-triangle" size={12} className="text-oq-96" />}{conflicts ? 'Conflicts found' : 'None'}</span>
+      </div>
+      <PaletteDots colors={c.colors} />
+    </>
+  ) }]
+  const n = c.colors.length
+  const visionStage = (
+    <div className="flex h-full min-h-[240px] flex-col gap-3">
+      <div className="grid min-h-0 flex-1 gap-0.5" style={{ gridTemplateColumns: `112px repeat(${n}, minmax(0, 1fr))`, gridTemplateRows: `2fr repeat(${rows.length}, minmax(0, 1fr))` }}>
+        <span />
+        {c.swatches.map((s) => (
+          <span key={s.index} className="flex items-end p-3 kol-mono-12" style={{ background: s.hex, color: inkOn(s.hex, inks).ink, ...(s.index === 0 ? { borderTopLeftRadius: 4 } : null), ...(s.index === n - 1 ? { borderTopRightRadius: 4 } : null) }}>{s.hex}</span>
+        ))}
+        {rows.flatMap((r, ri) => [
+          <span key={`${r.id}-label`} className="flex items-center kol-helper-12 text-meta">{r.label}</span>,
+          ...r.seen.map((hex, i) => (
+            <span key={`${r.id}-${i}`} className="flex items-center justify-center" title={r.conflict[i] ? `${r.label}: too close to another colour` : hex}
+              style={{ background: hex, color: inkOn(hex, inks).ink, ...(ri === rows.length - 1 && i === 0 ? { borderBottomLeftRadius: 4 } : null), ...(ri === rows.length - 1 && i === n - 1 ? { borderBottomRightRadius: 4 } : null) }}>
+              {r.conflict[i] && <Icon name="alert-triangle" size={16} />}
+            </span>
+          )),
+        ])}
+      </div>
+      {paletteFoot}
+    </div>
+  )
+
+  const VIEWS = [
+    { id: 'palette', icon: 'gen-color', label: 'Create palette' },
+    { id: 'contrast', icon: 'brightness', label: 'Contrast checker' },
+    { id: 'vision', icon: 'eye-on', label: 'Color blindness simulator' },
+  ]
+  return (
+    <LabWindow
+      className={className}
+      title={view === 'palette' ? 'Color Lab' : VIEWS.find((v) => v.id === view).label}
+      tabs={view === 'contrast' ? contrastRail : view === 'vision' ? visionRail : sources}
+      tab={view === 'palette' ? tab : view === 'contrast' ? ctab : 'conflicts'}
+      onTabChange={view === 'palette' ? setTab : view === 'contrast' ? setCtab : undefined}
+      actions={(
+        <>
+          {/* THE THREE VIEWS (review 3 — *"the accessibility buttons should be its own thing window"*) */}
+          {VIEWS.map((v) => (
+            <Tooltip key={v.id} label={v.label}><Button variant="tab" size="sm" iconOnly={v.icon} aria-label={v.label} pressed={view === v.id} onClick={() => setView(v.id)} /></Tooltip>
+          ))}
+          <LabHistory h={h} />
+          <CopyAction text={css} />
+        </>
+      )}
+      output={{
+        columns: [
+          { header: 'Colour', accessor: 'name', render: (r) => <span className="flex items-center gap-3"><span className="size-4 shrink-0 rounded-[3px] border border-oq-12" style={{ background: r.swatch }} />{r.name}</span> },
+          { header: 'Hex', accessor: 'hex' },
+          { header: 'RGB', accessor: 'rgb' },
+          { header: 'OKLCH', accessor: 'oklch' },
+        ],
+        rows: c.swatches.map((s) => ({ id: `c${s.index}`, swatch: s.hex, name: `${s.index + 1} ${s.roleLabel}`, hex: s.hex, rgb: rgb(s.hex), oklch: `${s.oklch[0].toFixed(2)} ${s.oklch[1].toFixed(3)} ${Math.round(s.oklch[2])}` })),
+        css,
+        filename: 'brand-color.css',
+      }}
+    >
+      {view === 'contrast' ? contrastStage : view === 'vision' ? visionStage : paletteStage}
+    </LabWindow>
+  )
 }