@kolkrabbi/kol-styleguide 0.18.2 → 0.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-styleguide",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "private": false,
   "description": "Brand guide components and the brand tool",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-print": "^0.1.1",
-    "@kolkrabbi/kol-theme": "^0.200.2",
+    "@kolkrabbi/kol-component": "^0.317.4",
     "@kolkrabbi/kol-framework": "^0.65.0",
-    "@kolkrabbi/kol-component": "^0.317.2",
-    "@kolkrabbi/kol-icons": "^0.53.2"
+    "@kolkrabbi/kol-print": "^0.1.1",
+    "@kolkrabbi/kol-icons": "^0.53.5",
+    "@kolkrabbi/kol-theme": "^0.200.4"
   },
   "files": [
     "src",

package/src/ColorLab.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Button, ColorPickerPopover, Dropdown, Icon, IconFrame, PaletteHarmonyWheel, Slider, Tooltip, hexToHsl, hslToHex } from '@kolkrabbi/kol-component'
+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'
 
@@ -260,7 +260,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
   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?"*) */
-    <>
+    <div className="flex flex-col gap-3">
       {/* THE EYEBROW IS THE RAIL'S LABEL (review 8 — *"IT WAS PERFECT!!! I was saying why is it only used here"*): the
         * settings rail's section label, now on every label in the rail */}
       <p className="kol-eyebrow text-fg-80">Harmony: {harmonyLabel(c.relation)}</p>
@@ -276,7 +276,7 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
           </Tooltip>
         ))}
       </div>
-    </>
+    </div>
   )
   const sources = [
     { id: 'base', label: 'Base', icon: 'eyedrop', content: (
@@ -300,10 +300,12 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
           {image
             ? <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
             : (
-              <span className="relative flex flex-col items-center gap-2">
+              <span className="relative flex flex-col items-center gap-6">
                 <Button size="md" tone="inverted" 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="whitespace-nowrap kol-sans-body-03 text-meta">File must be JPEG, JPG, PNG or WebP and up to 40MB</span>
+                <span className="flex flex-col items-center gap-1">
+                  <span className="kol-mono-12 text-emphasis">Or drag and drop here</span>
+                  <span className="whitespace-nowrap uppercase kol-mono-10 text-subtle">Files: JPG, PNG or WebP | Size: 40MB</span>
+                </span>
               </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 = '' }} />
@@ -313,8 +315,8 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
            * 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-sans-body-02 text-meta hover:text-emphasis">{library.label}<Icon name="external-link" size={12} className="text-oq-48 group-hover:text-oq-96" /></a>}
+              <span className="min-w-0 truncate kol-mono-12 text-emphasis">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)} />)}
@@ -323,12 +325,13 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
         )}
       </div>
     ) },
-    { id: 'wheel', label: 'Wheel', icon: 'clr-mono', content: (
-      <>
+    { id: 'wheel', label: 'Wheel', icon: 'color-wheel', content: (
+      /* the Wheel tab's own air (the user, 2026-10-30: "MORE GAP between tabs, wheel and group"): 24 under the tabs on top of the rail's 16, 40 between the wheel and the harmony group */
+      <div className="flex flex-col gap-10 pt-6">
         <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}
-      </>
+      </div>
     ) },
   ]
   /* THE PALETTE SMALL (Adobe's) under every view's stage, Randomise at its right on the palette view (review 5 — *"under
@@ -338,9 +341,10 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
       <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>}
+      {/* RANDOMISE (review 6, Adobe's shuffle; review 8 — *"WRONG FUCKING BUTTON TONE"*): an explicit tone, so no wrapper's
+        * ground repaints it — the inverted button this window already wears on Upload your image. Copy CSS is in the header,
+        * where every lab keeps it. His review decides the rung. */}
+      {view === 'palette' && <Button tone="inverted" size="sm" iconLeft="shuffle" className="ml-auto" onClick={roll}>Randomise</Button>}
     </div>
   )
   const paletteStage = (
@@ -407,92 +411,53 @@ export default function ColorLab({ value: valueProp, onChange, samples = [], lib
     }
     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-eyebrow text-fg-80">{label}</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-eyebrow text-fg-80">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', 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', 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-eyebrow text-fg-80"><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-02 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-eyebrow text-fg-80">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>
-  )
+  /* THE CONTRAST RAIL ON SETTINGSSECTIONS ROWS (2026-10-30, the user: *"if you need to scroll in this siderail then you
+   * are doing something wrong"*, *"we always have used mono sections and labels"*): the same rows the other labs use —
+   * label left, control right, the rail's rhythm and its mono — and nothing taller than the rail. The eleven-step ladder
+   * is three rows, each grade with the stops it holds. */
+  const pairSection = { label: 'Pair', rows: [
+    { id: 'ratio', label: 'Contrast ratio', value: `${ratioText(ratio)} : 1  ${contrastGrade(ratio)}` },
+    { id: 'fg', label: 'Foreground', type: 'choice', value: String(fgI), onChange: (v) => setPair({ fg: Number(v), bg: bgI }), options: colourOptions },
+    { id: 'fgL', label: 'Lightness', type: 'slider', min: 0, max: 100, step: 1, value: lightness(fgI), onChange: (L) => setLightness(fgI, L) },
+    { id: 'bg', label: 'Background', type: 'choice', value: String(bgI), onChange: (v) => setPair({ fg: fgI, bg: Number(v) }), options: colourOptions },
+    { id: 'bgL', label: 'Lightness', type: 'slider', min: 0, max: 100, step: 1, value: lightness(bgI), onChange: (L) => setLightness(bgI, L) },
+    { id: 'swap', label: 'Swap', render: () => <Button variant="nav" size="sm" iconOnly="swap" aria-label="Swap foreground and background" onClick={() => setPair({ fg: bgI, bg: fgI })} /> },
+  ] }
+  const verdict = (ok) => (ok === null ? 'n/a' : ok ? 'pass' : 'fail')
+  const wcagSection = { label: 'WCAG', rows: SUMMARY.map((r) => ({ id: r.id, label: r.label, value: `AA ${verdict(r.aa)}, AAA ${verdict(r.aaa)}` })) }
+  /* KOL's text levels: the foreground at every ink stop over the background, grouped by the grade each stop earns */
+  const levels = c.text.reduce((acc, x) => { const g = contrastGrade(contrastRatio(over(fg, bg, x.stop / 100), bg)); (acc[g] ??= []).push(x.stop); return acc }, {})
+  const levelsSection = { label: 'Text levels', rows: ['AAA', 'AA', 'AA large', 'fail'].filter((g) => levels[g]).map((g) => ({ id: g, label: g === 'fail' ? 'Fail' : g, value: levels[g].length > 1 ? `${levels[g][0]} to ${levels[g][levels[g].length - 1]}` : String(levels[g][0]) })) }
   const contrastRail = [
-    { id: 'summary', label: 'Summary', content: <>{pairHead}{summaryTable}{ladder}</> },
+    { id: 'summary', label: 'Summary', content: <SettingsSections divided sections={[pairSection, wcagSection, levelsSection]} /> },
     { id: 'suggest', label: 'Suggestions', content: (
-      <>
-        {pairHead}
-        <div className="flex flex-col">
-          <span className="border-b border-oq-16 pb-2 kol-eyebrow text-fg-80">Foreground colors that pass AA</span>
-          {suggestions.length === 0 && <span className="py-3 kol-sans-body-02 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>
-      </>
+      <SettingsSections divided sections={[pairSection, { label: 'Foreground colors that pass AA', note: suggestions.length === 0 ? 'None at this hue. Move the background’s lightness.' : undefined, rows: suggestions.length === 0 ? [] : [
+        { id: 'pick', label: 'Use', type: 'choice', value: '', onChange: (hex) => editAt(fgI, hex), options: suggestions.map((x) => ({ value: x.hex, label: `${x.hex}  ${ratioText(x.r)} : 1 ${contrastGrade(x.r)}` })) },
+      ] }]} />
     ) },
     { id: 'ratio', label: 'Set a ratio', content: (
-      <>
-        {pairHead}
-        <div className="flex flex-col gap-2">
-          <span className="kol-eyebrow text-fg-80">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-02 text-meta">The foreground’s lightness moves until the pair reaches it.</span>
-        </div>
-      </>
+      <SettingsSections divided sections={[pairSection, { label: 'Target', note: 'The foreground’s lightness moves until the pair reaches it.', rows: [
+        { id: 'target', label: 'Ratio', type: 'slider', min: 1, max: 21, step: 0.5, value: target ?? Math.round(ratio * 2) / 2, displayWidth: 4, onChange: (t) => { setTarget(t); editAt(fgI, solveFor(t)) } },
+      ] }]} />
     ) },
   ]
   /* THE PREVIEW IN THE PALETTE'S OWN FORMS (review 8 — *"how is this using ANYTHING but the colors?? … show some
    * forms that use the pallette"*): the page in bg and fg, the other colours as forms beside the text; the DS Button */
-  const FORMS = ['left-[8%] top-[10%] w-[52%] aspect-square rounded-full', 'right-[8%] bottom-[8%] w-[38%] aspect-square rounded-[12%]', 'left-[6%] bottom-[12%] h-[14%] w-[48%] rounded-full', 'right-[10%] top-[8%] h-[9%] w-[32%] rounded']
+  /* KOL's own vector forms (public/kol-vector, the brand's art) in the palette's colours — each a single-fill SVG worn as a
+   * CSS mask, so any colour fills it (the user, 2026-10-30: *"find a better SVG image to use, something that actually makes sense"*) */
+  const FORMS = [
+    { src: '/kol-vector/form-09.svg', box: { left: '6%', top: '8%', width: '50%', aspectRatio: '163 / 192' } },
+    { src: '/kol-vector/form-05.svg', box: { right: '8%', top: '10%', width: '30%', aspectRatio: '187 / 233' } },
+    { src: '/kol-vector/form-02.svg', box: { right: '12%', bottom: '8%', width: '34%', aspectRatio: '1 / 1' } },
+    { src: '/kol-vector/form-13.svg', box: { left: '8%', bottom: '6%', width: '36%', aspectRatio: '267 / 107' } },
+  ]
+  const masked = (src) => ({ WebkitMaskImage: `url(${src})`, maskImage: `url(${src})`, WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat', WebkitMaskSize: 'contain', maskSize: 'contain', WebkitMaskPosition: 'center', maskPosition: 'center' })
   const forms = c.colors.filter((_, i) => i !== fgI && i !== bgI)
   const contrastStage = (
     <div className="flex h-full min-h-[240px] flex-col gap-3">
       <div className="grid min-h-0 flex-1 grid-cols-2 grid-rows-[minmax(0,1fr)] overflow-hidden rounded" style={{ background: bg, color: fg }}>
         <div className="relative min-h-0 overflow-hidden">
-          {(forms.length ? forms : [fg]).slice(0, 4).map((hex, i) => <span key={`${hex}${i}`} className={`absolute ${FORMS[i]}`} style={{ background: hex }} />)}
+          {(forms.length ? forms : [fg]).slice(0, 4).map((hex, i) => <span key={`${hex}${i}`} className="absolute" style={{ ...FORMS[i].box, background: hex, ...masked(FORMS[i].src) }} />)}
         </div>
         <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>

package/src/ComboLab.jsx

@@ -38,13 +38,13 @@ export default function ComboLab({ color, value: valueProp, onChange, logo, clas
   const [tab, setTab] = useState('layout')
   const Layout = LAYOUT_COMPONENTS[combo.layout] ?? LAYOUT_COMPONENTS[COMBO_LAYOUTS[0].id]
   const css = comboLabCss(value, c)
-  const colourOptions = c.swatches.map((s) => ({ value: String(s.index), label: `${s.index + 1} ${s.roleLabel} ${s.hex}` }))
+  const colourOptions = c.swatches.map((s) => ({ value: String(s.index), label: s.roleLabel }))
 
   /* THE SETTINGS RAIL'S ROWS (review 4) */
   const tabs = [
     { id: 'layout', label: 'Layout', content: (
-      <SettingsSections divided sections={[{ label: 'Layout', rows: [
-        { id: 'layout', label: 'Layout', type: 'choice', value: combo.layout, onChange: (v) => set({ layout: v }), options: COMBO_LAYOUTS.map((l) => ({ value: l.id, label: l.label })) },
+      <SettingsSections divided sections={[{ rows: [
+        { id: 'layout', label: 'Preset', type: 'choice', value: combo.layout, onChange: (v) => set({ layout: v }), options: COMBO_LAYOUTS.map((l) => ({ value: l.id, label: l.label })) },
         { id: 'mark', label: logo ? 'Brand mark' : 'Mark slot', type: 'switch', on: !!combo.logo, onChange: (on) => set({ logo: on }) },
       ] }]} />
     ) },
@@ -77,7 +77,7 @@ export default function ComboLab({ color, value: valueProp, onChange, logo, clas
       }}
     >
       <div className="flex h-full items-center justify-center">
-        <div className="w-full max-w-[720px]">
+        <div className="w-full max-w-[1200px]">
           <Layout palette={combo.palette} logo={combo.logo ? (logo ?? PLAIN_MARK) : null} />
         </div>
       </div>

package/src/LockupLab.jsx

@@ -120,18 +120,24 @@ export default function LockupLab({ value: valueProp, onChange, mark, font, pres
     ) },
     { id: 'ratio', label: 'Ratio', content: (
       <SettingsSections divided sections={[
+        /* EVERY TEXT PART GETS THE SAME THREE (the user, 2026-10-30: *"why do you get UPPERCASE toggle for one thing and not another"*):
+         * size to the product (the product is the base), weight, case — company, product, sub-category, optional alike */
         { label: 'Size to product', rows: [
           { id: 'pr', label: 'Company %', type: 'slider', labelWidth: 112, min: 10, max: 100, step: 2, value: Math.round(l.parentRatio * 100), onChange: (v) => set({ parentRatio: v / 100 }) },
           { id: 'sr', label: 'Sub-category %', type: 'slider', labelWidth: 112, min: 10, max: 100, step: 2, value: Math.round(l.subRatio * 100), onChange: (v) => set({ subRatio: v / 100 }) },
+          { id: 'or', label: 'Optional %', type: 'slider', labelWidth: 112, min: 10, max: 100, step: 2, value: Math.round(l.optionalRatio * 100), onChange: (v) => set({ optionalRatio: v / 100 }) },
         ] },
         { label: 'Weight', rows: [
           { id: 'pw', label: 'Company', type: 'slider', labelWidth: 112, min: 100, max: 900, step: 100, value: l.parentWeight, onChange: (v) => set({ parentWeight: v }) },
           { id: 'w', label: 'Product', type: 'slider', labelWidth: 112, min: 100, max: 900, step: 100, value: l.productWeight, onChange: (v) => set({ productWeight: v }) },
           { id: 'sw', label: 'Sub-category', type: 'slider', labelWidth: 112, min: 100, max: 900, step: 100, value: l.subWeight, onChange: (v) => set({ subWeight: v }) },
+          { id: 'ow', label: 'Optional', type: 'slider', labelWidth: 112, min: 100, max: 900, step: 100, value: l.optionalWeight, onChange: (v) => set({ optionalWeight: v }) },
         ] },
         { label: 'Case', rows: [
           { id: 'pc', label: 'Company', type: 'choice', value: l.parentCase, onChange: (v) => set({ parentCase: v }), options: dd(LOCKUP_CASES) },
           { id: 'c', label: 'Product', type: 'choice', value: l.productCase, onChange: (v) => set({ productCase: v }), options: dd(LOCKUP_CASES) },
+          { id: 'sc', label: 'Sub-category', type: 'choice', value: l.subCase, onChange: (v) => set({ subCase: v }), options: dd(LOCKUP_CASES) },
+          { id: 'oc', label: 'Optional', type: 'choice', value: l.optionalCase, onChange: (v) => set({ optionalCase: v }), options: dd(LOCKUP_CASES) },
         ] },
       ]} />
     ) },
@@ -168,9 +174,35 @@ export default function LockupLab({ value: valueProp, onChange, mark, font, pres
         ),
       }}
     >
-      <div className="flex h-full min-h-[200px] items-center justify-center overflow-hidden text-emphasis">
+      {/* THE LOCKUP FILLS THE STAGE (the user, 2026-10-30: *"WHY IS THE LOGO TINY"*): drawn at 64 and scaled to 80 % of the stage's width or 60 % of its height, whichever binds */}
+      <FitStage>
         <BrandLockup value={value} size={64} mark={mark} font={font} />
-      </div>
+      </FitStage>
     </LabWindow>
   )
 }
+
+/* FitStage — scales its one child to the stage: 80 % of the width, 60 % of the height, whichever binds; remeasured on resize */
+function FitStage({ children }) {
+  const outer = useRef(null), inner = useRef(null)
+  const [k, setK] = useState(1)
+  useLayoutEffect(() => {
+    const fit = () => {
+      const o = outer.current, i = inner.current
+      if (!o || !i) return
+      const w = i.offsetWidth, h = i.offsetHeight
+      if (!w || !h) return
+      setK(Math.max(0.25, Math.min((o.clientWidth * 0.8) / w, (o.clientHeight * 0.6) / h)))
+    }
+    fit()
+    const ro = new ResizeObserver(fit)
+    ro.observe(outer.current)
+    ro.observe(inner.current)
+    return () => ro.disconnect()
+  }, [children])
+  return (
+    <div ref={outer} className="flex h-full min-h-[200px] items-center justify-center overflow-hidden text-emphasis">
+      <div ref={inner} className="inline-flex" style={{ transform: `scale(${k})`, transformOrigin: 'center' }}>{children}</div>
+    </div>
+  )
+}

package/src/lab/LabWindow.jsx

@@ -65,7 +65,7 @@ export default function LabWindow({ title, actions, tabs = [], tab: tabProp, onT
             <div {...grabProps} className="kol-rail-grab kol-rail-grab--left hidden md:block" />
             {/* THE TABSROW AT THE TOP OF EVERY WINDOW (review 6 — *"why dont we make it a rule at top of each window?"*):
               * one section or many, the rail opens on its tabs */}
-            {tabs.length > 0 && <TabsRow size="md" tabs={tabs.map(({ id, label, icon }) => ({ id, label, icon }))} value={open?.id} onChange={setTab} ariaLabel={`${title} sections`} />}
+            {tabs.length > 0 && <TabsRow type="mono-light" tabs={tabs.map(({ id, label, icon }) => ({ id, label, icon }))} value={open?.id} onChange={setTab} ariaLabel={`${title} sections`} />}
             <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto">{open?.content}</div>
             {foot && <div className="flex flex-wrap items-center gap-1">{foot}</div>}
           </aside>

package/src/lockupLab.js

@@ -22,9 +22,9 @@ export const LOCKUP_PARTS = [
 
 /* the five lockup types on bh-logo-system-0.svg, in the sheet's order */
 export const LOCKUP_TYPES = [
-  { id: 'full', label: 'Logo, company, product, sub-category', parts: ['mark', 'parent', 'product', 'sub', 'optional'] },
-  { id: 'mark-product-sub', label: 'Logo, product, sub-category', parts: ['mark', 'product', 'sub', 'optional'] },
-  { id: 'product-sub', label: 'Product, sub-category', parts: ['product', 'sub', 'optional'] },
+  { id: 'full', label: 'Full', parts: ['mark', 'parent', 'product', 'sub', 'optional'] },
+  { id: 'mark-product-sub', label: 'Logo, product, sub', parts: ['mark', 'product', 'sub', 'optional'] },
+  { id: 'product-sub', label: 'Product, sub', parts: ['product', 'sub', 'optional'] },
   { id: 'mark-product', label: 'Logo, product', parts: ['mark', 'product'] },
   { id: 'product', label: 'Product', parts: ['product'] },
 ]
@@ -48,9 +48,9 @@ export const LOCKUP_SUB_PRESETS = ['Solutions', 'Services', 'Courts', 'Archives'
 export const DEFAULT_LOCKUP_LAB = {
   type: 'full', shape: 'rounded',
   parent: 'Brand', product: 'Product', sub: 'Solutions', optional: '',
-  parentRatio: 0.36, subRatio: 0.62,
-  parentWeight: 700, productWeight: 700, subWeight: 400,
-  parentCase: 'upper', productCase: 'none',
+  parentRatio: 0.36, subRatio: 0.62, optionalRatio: 0.62,
+  parentWeight: 700, productWeight: 700, subWeight: 400, optionalWeight: 400,
+  parentCase: 'upper', productCase: 'none', subCase: 'none', optionalCase: 'none',
   clip: true, grid: false,
 }
 
@@ -59,9 +59,9 @@ export function lockupLab(value, size = 64) {
   const v = { ...DEFAULT_LOCKUP_LAB, ...value }
   const type = LOCKUP_TYPES.find((t) => t.id === v.type) ?? LOCKUP_TYPES[0]
   const text = { parent: v.parent, product: v.product, sub: v.sub, optional: v.optional }
-  const px = { parent: Math.round(size * v.parentRatio), product: size, sub: Math.round(size * v.subRatio), optional: Math.round(size * v.subRatio) }
-  const weight = { parent: v.parentWeight, product: v.productWeight, sub: v.subWeight, optional: v.subWeight }
-  const kase = { parent: v.parentCase, product: v.productCase, sub: 'none', optional: 'none' }
+  const px = { parent: Math.round(size * v.parentRatio), product: size, sub: Math.round(size * v.subRatio), optional: Math.round(size * v.optionalRatio) }
+  const weight = { parent: v.parentWeight, product: v.productWeight, sub: v.subWeight, optional: v.optionalWeight }
+  const kase = { parent: v.parentCase, product: v.productCase, sub: v.subCase, optional: v.optionalCase }
   /* the mark spans the text it stands beside: the company and product lines when both show, else the product's cap */
   const markSize = Math.round(type.parts.includes('parent') ? size * (0.78 + v.parentRatio) : size * 0.82)
   const parts = type.parts