@kolkrabbi/kol-component 0.7.0 → 0.9.0

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
 }

package/src/molecules/PaletteHarmonyWheel.jsx

@@ -0,0 +1,192 @@
+import { useEffect, useRef } from 'react'
+import { HARMONIES, harmonyById, harmonyColors, normHue } from '../hooks/colorMath.js'
+
+/* taxonomy-ok: a pure-canvas hue + harmony picker in the SpectrumControls
+ * color-picker family. It nests no KOL component — its only import is the
+ * colorMath support module in hooks/ — but belongs beside its siblings
+ * SpectrumControls / SwatchControls, not down in atoms. */
+
+/*
+ * PaletteHarmonyWheel — a hue ring with a draggable base-hue handle and
+ * satellite markers at the active harmony's scheme hues. Dragging (or the
+ * arrow keys) rotates the base hue; every change emits the full set of
+ * harmony colors so the caller never re-derives them.
+ *
+ * The scheme table is DATA-INJECTED (`harmonies`, defaulting to the shared
+ * HARMONIES); saturation/lightness of the generated colors are injected too,
+ * so this stays a pure hue picker — the caller owns S/L.
+ *
+ * Controlled on `hue`; `onChange({ hue, colors })` fires on press, drag, and
+ * arrow keys. `colors` is one hex per role offset of the active harmony
+ * (see colorMath.harmonyColors), matching the satellite markers 1:1.
+ *
+ * The ring hues, marker outlines and handle halo are literal color math
+ * (hsl / #FFFFFF / rgba) on purpose — a spectrum is not themeable, and the
+ * markers sit on fully-saturated ring hues, not on the surface (same
+ * rationale as SpectrumControls). No token belongs here.
+ *
+ * @param {number}        size        px, square (default 248)
+ * @param {number}        hue         controlled base hue, 0–360
+ * @param {string|object} harmony     active harmony id or object (default 'analogous')
+ * @param {number}        saturation  base saturation for emitted colors, 0–100 (default 100)
+ * @param {number}        lightness   base lightness for emitted colors, 0–100 (default 50)
+ * @param {Array}         harmonies   injectable scheme table (default HARMONIES)
+ * @param {Function}      onChange    ({ hue, colors }) => void
+ */
+
+/* Marker outline — white for contrast against the fully-saturated ring hues
+ * (theme-independent: the wheel's colours, not the surface, sit behind it). */
+const MARKER_STROKE = '#FFFFFF'
+
+export default function PaletteHarmonyWheel({
+  size = 248,
+  hue,
+  harmony = 'analogous',
+  saturation = 100,
+  lightness = 50,
+  harmonies = HARMONIES,
+  onChange,
+}) {
+  const canvasRef   = useRef(null)
+  const draggingRef = useRef(false)
+  const emitRef     = useRef(null)
+
+  const active = harmonyById(
+    typeof harmony === 'string'
+      ? (harmonies.find((h) => h.id === harmony) ?? harmonies[0])
+      : harmony,
+  )
+
+  /* Emit next hue + its harmony colors. Held in a ref so the pointer/key
+   * handlers stay stable while always seeing the latest props. */
+  emitRef.current = (nextHue) => {
+    const h = normHue(nextHue)
+    onChange?.({ hue: h, colors: harmonyColors(h, active, { saturation, lightness }) })
+  }
+
+  const outerR = size / 2 - 8
+  const innerR = outerR - 22
+  const midR   = (outerR + innerR) / 2
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const dpr = window.devicePixelRatio || 1
+    canvas.width  = size * dpr
+    canvas.height = size * dpr
+    const ctx = canvas.getContext('2d')
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, size, size)
+    const cx = size / 2
+    const cy = size / 2
+
+    /* Angle mapping: hue 0 at 12 o'clock, clockwise. */
+    const angleFor = (h) => ((h - 90) * Math.PI) / 180
+
+    /* Hue ring — 360 thin annulus wedges (1.5° overlap hides seams). */
+    for (let a = 0; a < 360; a++) {
+      const a0 = angleFor(a)
+      const a1 = angleFor(a + 1.5)
+      ctx.beginPath()
+      ctx.arc(cx, cy, outerR, a0, a1)
+      ctx.arc(cx, cy, innerR, a1, a0, true)
+      ctx.closePath()
+      ctx.fillStyle = `hsl(${a}, 100%, 50%)`
+      ctx.fill()
+    }
+
+    const baseHue = normHue(hue)
+    const offsets = [...new Set((active?.roleOffsets ?? [0]).map(normHue))]
+
+    /* Spokes + satellite markers at the scheme hues. */
+    for (const off of offsets) {
+      const h = normHue(baseHue + off)
+      const a = angleFor(h)
+      ctx.beginPath()
+      ctx.moveTo(cx, cy)
+      ctx.lineTo(cx + Math.cos(a) * innerR, cy + Math.sin(a) * innerR)
+      ctx.strokeStyle = 'rgba(128, 128, 128, 0.4)'
+      ctx.lineWidth = 1
+      ctx.stroke()
+      if (off === 0) continue /* base hue gets the big handle below */
+      const x = cx + Math.cos(a) * midR
+      const y = cy + Math.sin(a) * midR
+      ctx.beginPath()
+      ctx.arc(x, y, 5, 0, Math.PI * 2)
+      ctx.fillStyle = `hsl(${h}, 100%, 50%)`
+      ctx.fill()
+      ctx.strokeStyle = MARKER_STROKE
+      ctx.lineWidth = 1.5
+      ctx.stroke()
+    }
+
+    /* Base-hue handle. */
+    const ba = angleFor(baseHue)
+    const bx = cx + Math.cos(ba) * midR
+    const by = cy + Math.sin(ba) * midR
+    ctx.beginPath()
+    ctx.arc(bx, by, 9, 0, Math.PI * 2)
+    ctx.fillStyle = `hsl(${baseHue}, 100%, 50%)`
+    ctx.fill()
+    ctx.strokeStyle = MARKER_STROKE
+    ctx.lineWidth = 2
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.arc(bx, by, 10.5, 0, Math.PI * 2)
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.35)'
+    ctx.lineWidth = 1
+    ctx.stroke()
+  }, [size, hue, active, outerR, innerR, midR])
+
+  const pointFromEvent = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect()
+    const dx = e.clientX - rect.left - rect.width / 2
+    const dy = e.clientY - rect.top - rect.height / 2
+    return { dist: Math.hypot(dx, dy), hue: normHue((Math.atan2(dy, dx) * 180) / Math.PI + 90) }
+  }
+
+  const onPointerDown = (e) => {
+    const { dist, hue: h } = pointFromEvent(e)
+    if (dist < innerR - 14 || dist > outerR + 10) return
+    draggingRef.current = true
+    e.currentTarget.setPointerCapture(e.pointerId)
+    emitRef.current?.(h)
+  }
+
+  const onPointerMove = (e) => {
+    if (!draggingRef.current) return
+    emitRef.current?.(pointFromEvent(e).hue)
+  }
+
+  const endDrag = () => { draggingRef.current = false }
+
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? 15 : 3
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      emitRef.current?.(normHue(hue + step))
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      emitRef.current?.(normHue(hue - step))
+    }
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      role="slider"
+      aria-label="Base hue"
+      aria-valuemin={0}
+      aria-valuemax={359}
+      aria-valuenow={Math.round(normHue(hue))}
+      tabIndex={0}
+      className="cursor-pointer touch-none"
+      style={{ width: size, height: size }}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onKeyDown={onKeyDown}
+    />
+  )
+}

package/src/molecules/Slider.jsx

@@ -2,28 +2,35 @@ import { useEffect, useMemo, useState } from 'react'
 import Input from '../atoms/Input.jsx'
 
 /**
- * Slider — range slider with label and an editable value readout.
+ * Slider — range slider with label and an editable value readout. The LINEAR
+ * VARIANT of RotaryDial (atoms/RotaryDial.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.
  *
  * One bare inline row: label · track · editable readout. (Bordered
  * `default` and chip `subtle` variants retired 2026-07-08 — minimal is
  * the only slider.)
  *
  * The value readout is an editable <Input> (type a value, commit on
- * blur / Enter, revert on Escape). Track color is exposed as the
- * `--kol-slider-track` CSS variable on `.slider-black`; override
- * per-instance via style={{ '--kol-slider-track': '...' }}.
+ * blur / Enter, revert on Escape) — a Slider-only extra; RotaryDial's
+ * readout is display-only (atoms nest no KOL component). Track color is
+ * exposed as the `--kol-slider-track` CSS variable on `.slider-black`;
+ * override per-instance via style={{ '--kol-slider-track': '...' }}.
  *
  * @param {Object} props
  * @param {string} props.label - Slider label text
- * @param {number} props.min - Minimum value
- * @param {number} props.max - Maximum value
- * @param {number} props.value - Current value
- * @param {Function} props.onChange - Change handler
+ * @param {number} props.min - Minimum value (default: 0)
+ * @param {number} props.max - Maximum value (default: 100)
+ * @param {number} props.value - Controlled value within min–max
+ * @param {Function} props.onChange - (next: number) => void change handler
+ * @param {number} props.step - Slider step increment (default: 1)
+ * @param {number} props.size - Track length in px (mirrors RotaryDial's dial px size); unset = fluid flex-1 track
+ * @param {boolean} props.disabled - Disables track + readout and dims the control (default: false)
+ * @param {Function} props.formatValue - Optional formatter for displayed value; RotaryDial's default readout is `${value}%`
  * @param {string} props.className - Additional wrapper classes
  * @param {number} props.displayWidth - Width of the value readout, in characters (default: 6)
  * @param {string} props.fontSize - Font size for label/value (e.g., '11px')
- * @param {number} props.step - Slider step increment (default: 1)
- * @param {Function} props.formatValue - Optional formatter for displayed value
  */
 const Slider = ({
   label,
@@ -31,11 +38,13 @@ const Slider = ({
   max = 100,
   value = 0,
   onChange,
+  step = 1,
+  size,
+  disabled = false,
+  formatValue,
   className = '',
   displayWidth = 6,
   fontSize,
-  step = 1,
-  formatValue
 }) => {
   const handleChange = (e) => {
     if (onChange) {
@@ -86,7 +95,10 @@ const Slider = ({
   return (
     <div className={`control-slider gap-3 shadow-none ${className}`}>
       {label && (
-        <label className="kol-helper-12 whitespace-nowrap shrink-0 w-fit" style={fontSize ? { fontSize } : undefined}>
+        <label
+          className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
+          style={fontSize ? { fontSize } : undefined}
+        >
           {label}
         </label>
       )}
@@ -97,7 +109,9 @@ const Slider = ({
         step={step}
         value={value}
         onChange={handleChange}
-        className="slider-black flex-1 w-full cursor-pointer"
+        disabled={disabled}
+        className={`slider-black cursor-pointer disabled:cursor-default disabled:opacity-50 ${size ? 'flex-none' : 'flex-1 w-full'}`}
+        style={size ? { width: size } : undefined}
       />
       <Input
         type="text"
@@ -106,6 +120,7 @@ const Slider = ({
         size="sm"
         chars={displayWidth}
         value={draft}
+        disabled={disabled}
         onFocus={(e) => { setEditing(true); e.target.select() }}
         onChange={(e) => setDraft(e.target.value)}
         onBlur={commit}