@kolkrabbi/kol-component 0.6.0 → 0.8.0

package/README.md

@@ -11,6 +11,14 @@ npm i @kolkrabbi/kol-component @kolkrabbi/kol-theme
 
 Requires a **Vite + Tailwind v4** app and the theme CSS imported (see the theme package).
 
+## Tailwind v4 consumers
+
+Tailwind skips `node_modules` when scanning, so point it at this package's source — otherwise the utility classes inside the components never generate and layouts collapse:
+
+```css
+@source "../node_modules/@kolkrabbi/kol-component/src";
+```
+
 ## Use
 
 ```jsx

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
   "exports": {
-    ".": "./src/index.js",
-    "./foundry": "./src/organisms/foundry/index.js"
+    ".": "./src/index.js"
   },
   "files": [
     "src",

package/src/atoms/RotaryDial.jsx

@@ -7,22 +7,29 @@ const snapTo = (v, min, max, step) => {
 }
 
 /**
- * RotaryDial — drag-to-set rotary knob numeric input. Vertical pointer drag
- * rotates the whole dial over a 270° sweep (−135° to +135°) mapped onto
- * min–max; a full sweep is ~200px of drag, movement measured absolute from
- * drag start. Controlled (`value`/`onChange`) with a local visual buffer so
- * rotation stays smooth while parent updates are RAF-throttled; the final
- * value fires on release. Focus + arrow keys step the value
- * (role="slider" with aria-valuemin/max/now). The label and `%` readout
- * rows render only when `label` is set; label text renders as authored.
+ * RotaryDial — drag-to-set rotary knob numeric input. The KNOB VARIANT of
+ * Slider (molecules/Slider.jsx): both implement the shared value-control
+ * contract — `value` / `min` / `max` / `step` / `onChange(next: number)` /
+ * `label` / `size` / `disabled` / `formatValue`. Controlled; onChange always
+ * fires with the plain number.
  *
- * @param {string}   label    text under the dial; also gates the label + readout rows
- * @param {number}   value    controlled value within min–max
- * @param {Function} onChange (next: number) => void — RAF-throttled while dragging, final on release
- * @param {number}   min      minimum value (default 0)
- * @param {number}   max      maximum value (default 100)
- * @param {number}   step     drag snap / arrow-key increment (default 1)
- * @param {number}   size     dial px size (default 80); derives ring + disc radii
+ * Vertical pointer drag rotates the whole dial over a 270° sweep (−135° to
+ * +135°) mapped onto min–max; a full sweep is ~200px of drag, movement
+ * measured absolute from drag start. A local visual buffer keeps rotation
+ * smooth while parent updates are RAF-throttled; the final value fires on
+ * release. Focus + arrow keys step the value (role="slider" with
+ * aria-valuemin/max/now). The label and readout rows render only when
+ * `label` is set; label text renders as authored.
+ *
+ * @param {string}   label       text under the dial; also gates the label + readout rows
+ * @param {number}   value       controlled value within min–max
+ * @param {Function} onChange    (next: number) => void — RAF-throttled while dragging, final on release
+ * @param {number}   min         minimum value (default 0)
+ * @param {number}   max         maximum value (default 100)
+ * @param {number}   step        drag snap / arrow-key increment (default 1)
+ * @param {number}   size        dial px size (default 80); derives ring + disc radii
+ * @param {boolean}  disabled    blocks drag + keyboard and dims the control (default false)
+ * @param {Function} formatValue optional readout formatter (value: number) => string; default `${value}%`
  */
 export default function RotaryDial({
   label,
@@ -32,6 +39,8 @@ export default function RotaryDial({
   max = 100,
   step = 1,
   size = 80,
+  disabled = false,
+  formatValue,
 }) {
   const [isDragging, setIsDragging] = useState(false)
   const [localValue, setLocalValue] = useState(value) // visual buffer — updates every move
@@ -99,23 +108,24 @@ export default function RotaryDial({
   const angle = -135 + ((localValue - min) / (max - min || 1)) * 270
 
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className={`flex flex-col items-center gap-2 ${disabled ? 'opacity-50' : ''}`}>
       <div
         role="slider"
-        tabIndex={0}
+        tabIndex={disabled ? -1 : 0}
         aria-label={label}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={localValue}
-        className="relative cursor-pointer select-none touch-none"
+        aria-disabled={disabled || undefined}
+        className={`relative select-none touch-none ${disabled ? 'cursor-default' : 'cursor-pointer'}`}
         style={{
           width: size,
           height: size,
           transform: `rotate(${angle}deg)`,
           willChange: isDragging ? 'transform' : 'auto',
         }}
-        onPointerDown={handlePointerDown}
-        onKeyDown={handleKeyDown}
+        onPointerDown={disabled ? undefined : handlePointerDown}
+        onKeyDown={disabled ? undefined : handleKeyDown}
       >
         <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: 'visible' }}>
           {/* outer dashed tick ring */}
@@ -144,7 +154,11 @@ export default function RotaryDial({
         </svg>
       </div>
       {label && <div className="kol-helper-12 text-fg-64">{label}</div>}
-      {label && <div className="kol-helper-12 text-fg-96">{value}%</div>}
+      {label && (
+        <div className="kol-helper-12 text-fg-96">
+          {formatValue ? String(formatValue(value)) : `${value}%`}
+        </div>
+      )}
     </div>
   )
 }

package/src/index.js

@@ -38,7 +38,6 @@ export { default as LabeledControl } from './atoms/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './atoms/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
-export { default as PriceDisplay } from './atoms/PriceDisplay.jsx'
 export { default as ProsePreview } from './atoms/ProsePreview.jsx'
 export { default as QuantityInput } from './atoms/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
@@ -52,22 +51,18 @@ export { default as Textarea } from './atoms/Textarea.jsx'
 export { default as ToggleBracket } from './atoms/ToggleBracket.jsx'
 export { default as ToggleCheckbox } from './atoms/ToggleCheckbox.jsx'
 export { default as ToggleSwitch } from './atoms/ToggleSwitch.jsx'
-export { default as TextPressure } from './atoms/TextPressure.jsx'
 export { default as TiltCard } from './atoms/TiltCard.jsx'
 export { default as TransparentX } from './atoms/TransparentX.jsx'
-export { default as TypeSample } from './atoms/TypeSample.jsx'
-export { default as TypeSpecCard } from './atoms/TypeSpecCard.jsx'
 export { default as ViewToggle } from './atoms/ViewToggle.jsx'
 
 // molecules
 export { Accordion, AccordionPanel } from './molecules/Accordion.jsx'
+export { default as ButtonGroup } from './molecules/ButtonGroup.jsx'
 /* monorepo sets (P6–P10) — molecule members */
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
-export { default as ArticleCard } from './molecules/ArticleCard.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
 export { default as SelectionOverlay } from './molecules/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
-export { default as WorkListItem } from './molecules/WorkListItem.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
 export { default as CodeBlock } from './molecules/CodeBlock.jsx'
 export { default as ColorInputRow } from './molecules/ColorInputRow.jsx'
@@ -88,28 +83,20 @@ export { default as ShellSearchOverlay } from './molecules/ShellSearchOverlay.js
 export { default as Slider } from './molecules/Slider.jsx'
 export { default as SpecList } from './molecules/SpecList.jsx'
 export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './molecules/SpectrumControls.jsx'
+export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
 
 // organisms
-/* monorepo sets (P6–P10) — organism members. Foundry members are isolated
-   under the './foundry' subpath (opentype-heavy) — not re-exported here. */
-export { default as ArticleHeader } from './organisms/ArticleHeader.jsx'
+/* monorepo sets (P6–P10) — organism members. Foundry members live in the
+   standalone @kolkrabbi/kol-foundry package (with the type-specimen kit +
+   live-font effects moved there 2026-07-09) — never re-exported here. */
 export { default as Canvas, CanvasFrame, PanViewport, CANVAS_VIRTUAL_W, DEFAULT_ASPECTS, CANVAS_DEFAULTS } from './organisms/Canvas.jsx'
-export { default as DiagonalMarqueeRiver } from './organisms/DiagonalMarqueeRiver.jsx'
 export { default as EditorShell } from './organisms/EditorShell.jsx'
 export { default as GalleryCarousel } from './organisms/GalleryCarousel.jsx'
-export { default as ParallaxShelf } from './organisms/ParallaxShelf.jsx'
-export { default as PortableTextRenderer, slugify } from './organisms/PortableTextRenderer.jsx'
-export { default as ProductDetailLayout } from './organisms/ProductDetailLayout.jsx'
-export { default as ScrollDriftGallery } from './organisms/ScrollDriftGallery.jsx'
-export { default as StackHero } from './organisms/StackHero.jsx'
-export { default as WorkCard } from './organisms/WorkCard.jsx'
-export { default as WorkViewToggle } from './organisms/WorkViewToggle.jsx'
 export { default as AsciiCursor } from './organisms/AsciiCursor.jsx'
 export { default as BentoCard } from './organisms/BentoCard.jsx'
 export { default as Carousel } from './organisms/Carousel.jsx'
-export { default as ColorLoader } from './organisms/ColorLoader.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
 export { default as ErrorBoundary } from './organisms/ErrorBoundary.jsx'
@@ -118,6 +105,7 @@ export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
 export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
+export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'

package/src/molecules/ButtonGroup.jsx

@@ -0,0 +1,45 @@
+/* taxonomy-ok: composes consumer-passed Buttons via children — nesting happens at the call site */
+
+/**
+ * ButtonGroup — responsive layout wrapper for a group of Buttons: stacked
+ * full-width on mobile, horizontal row from `sm` up, aligned left / center /
+ * right. Pure layout — children compose at the call site and render as-is
+ * (nothing is cloned, no props injected); all button behavior lives on each
+ * Button. `center` (default) hugs its content and self-centers; `left` /
+ * `right` stay full-width block. Alignment classes come from static lookup
+ * maps of complete literals — never interpolated — so Tailwind's scanner
+ * sees them.
+ *
+ * @param {'left'|'center'|'right'} align horizontal alignment + container layout mode (default 'center')
+ * @param {string}    title     optional heading rendered above the group, authored at the call site
+ * @param {string}    className extra container classes (appended)
+ * @param {ReactNode} children  the Buttons
+ */
+
+const CONTAINER = {
+  left: 'flex flex-col w-full',
+  center: 'flex sm:inline-flex flex-col w-full sm:w-auto sm:mx-auto',
+  right: 'flex flex-col w-full',
+}
+
+const JUSTIFY = {
+  left: 'sm:justify-start',
+  center: 'sm:justify-center',
+  right: 'sm:justify-end',
+}
+
+export default function ButtonGroup({ align = 'center', title, className = '', children }) {
+  return (
+    <div className={[CONTAINER[align] || CONTAINER.center, className].filter(Boolean).join(' ')}>
+      {title && <h3 className="kol-sans-heading-05 text-emphasis mb-6">{title}</h3>}
+      <div
+        className={[
+          'flex flex-col gap-4 sm:flex-row sm:items-center',
+          JUSTIFY[align] || JUSTIFY.center,
+        ].join(' ')}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/molecules/ColorInputRow.jsx

@@ -2,153 +2,172 @@ import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from './ColorSwatch'
 import Input from '../atoms/Input'
-import LabeledControl from '../atoms/LabeledControl'
 import { usePopover, PopoverPanel } from '../atoms/Popover'
 
-const HEX6 = /^[0-9A-F]{6}$/
-
-/** '#f0a' / 'F0A' / '#ff00aa' → 'FF00AA'; anything unparseable → null. */
-function normalizeDigits(raw) {
-  if (typeof raw !== 'string') return null
-  let d = raw.replace(/^#/, '').trim().toUpperCase()
-  if (/^[0-9A-F]{3}$/.test(d)) d = d.replace(/./g, (c) => c + c)
-  return HEX6.test(d) ? d : null
-}
-
 /**
  * ColorInputRow — swatch chip + `#` hex input row. The single merged form of
  * the brand editor's ColorField (layer color assignment: palette-ref popover
- * behind the swatch) and SwatchRow (palette-slot editing: trailing extras) —
- * one core, optional trailing affordances instead of two overlapping
- * molecules.
+ * behind the swatch) and SwatchRow (palette-slot editing: lock toggle +
+ * token-name column) — one core with additive slots instead of two
+ * overlapping molecules. Supersedes both lobby briefs (lobby/ColorField.md,
+ * lobby/SwatchRow.md).
  *
- * The input keeps a local draft while typing and commits on blur/Enter:
- * digits are filtered to hex as typed, shorthand `F0A` expands to `FF00AA`,
- * and only a valid 6-digit hex fires `onChange('#RRGGBB')` — invalid drafts
- * revert to the current value. Picking a palette-ref swatch fires the ref's
- * (pre-resolved) hex and closes the popover.
+ * Modes (additive on the core swatch + hex input):
+ *   refs          — the swatch becomes a popover trigger over a 6-column grid
+ *                   of palette entries. Entries arrive PRE-RESOLVED
+ *                   ({ value, label, hex }) — no `palette:` string convention,
+ *                   no resolver seam; the app keeps its own resolution logic.
+ *                   Picking a cell fires onChange(entry.value) and closes.
+ *   lock          — `onToggleLock` makes the swatch the lock toggle: a sibling
+ *                   absolute overlay span (NOT inside the swatch — its
+ *                   overflow-hidden would clip it) shows the lock/unlock glyph,
+ *                   pinned visible when locked, on hover otherwise. Ignored
+ *                   when `refs` is set — the swatch has one click affordance.
+ *   tokenName     — adds the resolved-token readout column and switches the
+ *                   row from a flex row to the fixed 4-column grid
+ *                   (24px / label / token / input).
  *
- * Composition only — no color math, no store coupling. Palette entries come
- * in pre-resolved via `paletteRefs`; the app-side `resolveColor`/PALETTE_REFS
- * and `tokenNameFor` seams stay in the consumer. SwatchRow's `edited` prop
- * was dead in the source render and is dropped ([dead-prop] handled);
- * `transparentTone` is an explicit prop, not inferred from the label string.
+ * The hex input is normalized per SwatchRow: value renders as bare UPPER
+ * digits behind the `#` prefix, and every keystroke emits
+ * onChange('#' + digits.toUpperCase()) — the `.toUpperCase()` is value
+ * normalization, not copy casing. SwatchRow's dead `edited` prop is dropped;
+ * `transparentTone` is an explicit prop, never inferred from the label.
+ * Composition only — no color math, no store coupling.
  *
- * @param {string|null} value           current color, '#RRGGBB' (3-digit accepted, normalized); null → transparent "None" swatch
- * @param {Function}    onChange        (hex: string) => void — normalized '#RRGGBB' on commit or palette pick
- * @param {string}      label           optional label; when set the row wraps in LabeledControl
- * @param {Array}       paletteRefs     [{ id, label, value }] pre-resolved entries → swatch becomes a popover trigger with a ref grid (omit for a plain preview chip)
- * @param {Function}    onRemove        () => void — renders a trailing remove (×) button
- * @param {ReactNode}   trailing        extra trailing affordances (lock toggle, token name, …)
- * @param {number}      swatchSize      chip size in px (default 24)
- * @param {string}      transparentTone TransparentX stroke tone for the null-value swatch: 'warning' (default) | 'error' | 'info' | 'success'
- * @param {string}      inputVariant    Input chrome: 'filled' (default) | 'ghost' | 'outline'
- * @param {boolean}     disabled        dims the row, blocks pointer, aria-disabled
+ * Props:
+ *   value           — current color: '#RRGGBB', a refs entry's `value`, or
+ *                     null (renders the transparent "None" swatch)
+ *   onChange        — (next: string) => void — '#'+UPPER hex on typing, or
+ *                     entry.value on a palette pick
+ *   label           — row label (kol-helper-12); also prefixes aria-labels
+ *   hideLabel       — suppress the visible label (aria keeps it)
+ *   refs            — [{ value, label, hex }] pre-resolved palette entries →
+ *                     popover mode
+ *   locked          — lock overlay pinned visible, aria-pressed on the swatch
+ *   onToggleLock    — () => void — swatch click toggles the lock
+ *   tokenName       — resolved token readout (kol-helper-10) → grid mode
+ *   disabled        — opacity-30 + pointer-events-none + aria-disabled
+ *   unused          — muted slot: transparent swatch, label/token drop to
+ *                     text-meta/text-subtle, input dims
+ *   transparentTone — TransparentX stroke tone for the null/unused swatch:
+ *                     'warning' (default) | 'error' | 'info' | 'success'
  */
 export default function ColorInputRow({
   value,
   onChange,
   label,
-  paletteRefs,
-  onRemove,
-  trailing,
-  swatchSize = 24,
-  transparentTone = 'warning',
-  inputVariant = 'filled',
+  hideLabel = false,
+  refs,
+  locked = false,
+  onToggleLock,
+  tokenName,
   disabled = false,
+  unused = false,
+  transparentTone = 'warning',
   className = '',
 }) {
-  const digits = normalizeDigits(value)
-  const hasRefs = Array.isArray(paletteRefs) && paletteRefs.length > 0
+  const hasRefs = Array.isArray(refs) && refs.length > 0
+  const isLockToggle = !hasRefs && typeof onToggleLock === 'function'
+  const isGrid = tokenName != null
+  const labelVisible = label != null && !hideLabel
 
-  /* Local typing draft, re-synced whenever the controlled value changes
-   * (render-time reset — no effect, no flicker). */
-  const [draft, setDraft] = useState(digits ?? '')
-  const [prevValue, setPrevValue] = useState(value)
-  if (value !== prevValue) {
-    setPrevValue(value)
-    setDraft(normalizeDigits(value) ?? '')
-  }
+  /* Display resolution: when the current value is a refs entry, the swatch and
+   * input show the entry's pre-resolved hex; otherwise value IS the hex. */
+  const activeRef = hasRefs ? refs.find((r) => r.value === value) : undefined
+  const displayHex = activeRef?.hex ?? value ?? null
+  const digits = (displayHex ?? '').replace(/^#/, '').toUpperCase()
+  const showTransparent = unused || displayHex == null
+  const subtitle = displayHex == null ? 'None' : (activeRef?.label ?? '#' + digits)
 
   const [open, setOpen] = useState(false)
   const popover = usePopover({ open, onOpenChange: setOpen, placement: 'bottom-start', offset: 4 })
 
-  const commit = () => {
-    const next = normalizeDigits(draft)
-    if (next == null) {
-      setDraft(digits ?? '') // invalid or empty → revert, never emit
-      return
-    }
-    setDraft(next)
-    if (next !== digits) onChange?.('#' + next)
-  }
-
-  const pick = (ref) => {
-    onChange?.('#' + (normalizeDigits(ref.value) ?? ''))
-    setOpen(false)
-  }
-
-  /* Swatch subtitle for the trigger's aria-label: the matching ref's label
-   * when the value is a palette color, else the hex, else 'None'. */
-  const refLabel = hasRefs
-    ? paletteRefs.find((r) => normalizeDigits(r.value) === digits)?.label
-    : undefined
-  const subtitle = digits == null ? 'None' : (refLabel ?? '#' + digits)
-
-  const swatch = (
+  const chip = (size) => (
     <ColorSwatch
-      hex={digits ? '#' + digits : null}
-      size={hasRefs ? 'stretch' : swatchSize}
-      showTransparent={digits == null}
+      hex={showTransparent ? null : displayHex}
+      size={size}
+      showTransparent={showTransparent}
       transparentTone={transparentTone}
       hoverable={false}
     />
   )
 
-  const row = (
-    <div
-      className={`flex items-center gap-2 ${disabled ? 'opacity-30 pointer-events-none' : ''} ${className}`}
-      aria-disabled={disabled || undefined}
+  /* Swatch cell — popover trigger (refs), lock toggle (onToggleLock), or a
+   * plain preview chip. The lock overlay is a SIBLING of the swatch: inside
+   * it, ColorSwatch's overflow-hidden radius clip would cut the glyph off. */
+  const swatchCell = hasRefs ? (
+    <button
+      type="button"
+      ref={popover.refs.setReference}
+      {...popover.getReferenceProps()}
+      aria-label={`${label ?? 'Color'}: ${subtitle}`}
+      className="inline-flex items-center shrink-0"
     >
-      {hasRefs ? (
-        <button
-          type="button"
-          ref={popover.refs.setReference}
-          {...popover.getReferenceProps()}
-          aria-label={`${label ?? 'Color'}: ${subtitle}`}
-          className="inline-flex items-center shrink-0"
-          style={{ width: swatchSize, height: swatchSize }}
+      {chip(24)}
+    </button>
+  ) : isLockToggle ? (
+    <button
+      type="button"
+      onClick={onToggleLock}
+      aria-pressed={locked}
+      title={locked ? 'Unlock' : 'Lock'}
+      className="group relative inline-flex h-6 w-6 shrink-0"
+    >
+      {chip('stretch')}
+      <span
+        aria-hidden="true"
+        className={`absolute inset-0 inline-flex items-center justify-center rounded-[2px] transition-opacity bg-fg-absolute-48 text-white pointer-events-none ${
+          locked ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+        }`}
+      >
+        <Icon name={locked ? 'lock' : 'unlock'} size={12} />
+      </span>
+    </button>
+  ) : (
+    chip(24)
+  )
+
+  const labelCls = `kol-helper-12 truncate ${unused ? 'text-meta' : 'text-emphasis'}`
+
+  const hexInput = (
+    <Input
+      variant="filled"
+      size="sm"
+      prefix="#"
+      chars={6}
+      maxLength={6}
+      uppercase
+      value={digits}
+      onChange={(e) => onChange?.('#' + e.target.value.replace(/^#/, '').toUpperCase())}
+      disabled={disabled}
+      aria-label={label ? `${label} hex` : 'Hex color'}
+      className={unused ? 'opacity-50' : ''}
+    />
+  )
+
+  const stateCls = `items-center gap-2 ${disabled ? 'opacity-30 pointer-events-none' : ''} ${className}`
+
+  return (
+    <>
+      {isGrid ? (
+        <div
+          className={`grid ${stateCls}`}
+          style={{ gridTemplateColumns: '24px 1fr 1fr 1fr' }}
+          aria-disabled={disabled || undefined}
         >
-          {swatch}
-        </button>
+          {swatchCell}
+          <span className={labelCls}>{labelVisible ? label : ''}</span>
+          <span className={`kol-helper-10 truncate ${unused ? 'text-subtle' : 'text-meta'}`}>
+            {tokenName}
+          </span>
+          {hexInput}
+        </div>
       ) : (
-        swatch
-      )}
-      <Input
-        variant={inputVariant}
-        size="sm"
-        prefix="#"
-        chars={6}
-        maxLength={6}
-        uppercase
-        value={draft}
-        onChange={(e) => setDraft(e.target.value.replace(/[^0-9a-fA-F]/g, '').toUpperCase().slice(0, 6))}
-        onBlur={commit}
-        onKeyDown={(e) => { if (e.key === 'Enter') commit() }}
-        disabled={disabled}
-        aria-label={label ? `${label} hex` : 'Hex color'}
-      />
-      {trailing}
-      {onRemove && (
-        <button
-          type="button"
-          onClick={onRemove}
-          aria-label="Remove"
-          title="Remove"
-          className="inline-flex items-center justify-center w-6 h-6 shrink-0 rounded text-meta hover:text-emphasis hover:bg-fg-08 transition-colors"
-        >
-          <Icon name="x" size={12} />
-        </button>
+        <div className={`flex ${stateCls}`} aria-disabled={disabled || undefined}>
+          {swatchCell}
+          {labelVisible && <span className={`${labelCls} flex-1 min-w-0`}>{label}</span>}
+          {hexInput}
+        </div>
       )}
       {hasRefs && (
         <PopoverPanel
@@ -159,21 +178,22 @@ export default function ColorInputRow({
           style={{ minWidth: 200 }}
         >
           <div className="grid grid-cols-6 gap-1">
-            {paletteRefs.map((ref) => (
+            {refs.map((entry) => (
               <ColorSwatch
-                key={ref.id}
-                hex={'#' + (normalizeDigits(ref.value) ?? '')}
+                key={entry.value}
+                hex={entry.hex}
                 size="fill"
-                selected={normalizeDigits(ref.value) === digits && digits != null}
-                title={ref.label}
-                onClick={() => pick(ref)}
+                selected={entry.value === value}
+                title={entry.label}
+                onClick={() => {
+                  onChange?.(entry.value)
+                  setOpen(false)
+                }}
               />
             ))}
           </div>
         </PopoverPanel>
       )}
-    </div>
+    </>
   )
-
-  return label ? <LabeledControl label={label}>{row}</LabeledControl> : row
 }