@motion-proto/live-tokens 0.38.0 → 0.40.0

package/src/editor/ui/PaletteEditor.svelte

@@ -3,7 +3,7 @@
 
   const bubble = createBubbler();
   import { onMount, onDestroy, tick, untrack } from 'svelte';
-  import { hexToOklch } from '../core/palettes/oklch';
+  import { hexToOklch, oklchToHex, gamutClamp } from '../core/palettes/oklch';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig } from './curveEngine';
   import ColorEditPanel from './ColorEditPanel.svelte';
   import OverridesPanel from './palette/OverridesPanel.svelte';
@@ -13,15 +13,14 @@
   import PaletteBase from './palette/PaletteBase.svelte';
   import { type EditingState, idleState, BASE_KEY, isEditingBase as isBaseEdit } from './palette/paletteEditorState';
   import {
-    type Step, type Scale, type GrayStep, type CurveOffset, type ScaleCurves,
-    GRAY_FALLBACK, DEFAULT_TINT_CHROMA,
-    DEFAULT_PALETTE_LIGHTNESS, DEFAULT_PALETTE_SATURATION, DEFAULT_GRAY_LIGHTNESS, DEFAULT_GRAY_SATURATION,
-    defaultScaleCurves, defaultScaleCurvesObject,
-    paletteStepLightness, graySteps, scales,
-    paletteStepKey, grayStepKey, stepKey, scaleCurveKey as getScaleCurveKey,
+    type Step, type Scale,
+    GRAY_FALLBACK,
+    DEFAULT_PALETTE_LIGHTNESS, DEFAULT_PALETTE_SATURATION,
+    defaultScaleCurves, defaultScaleCurvesObject, defaultPaletteConfig,
+    paletteStepLightness, scales,
+    paletteStepKey, stepKey, scaleCurveKey as getScaleCurveKey,
     stepIndexToX,
     injectLockedAnchor, removeLockedAnchor,
-    computeGrayColor as computeGrayColorPure,
     computePaletteColor as computePaletteColorPure,
     computeDerivedColor as computeDerivedColorPure,
     snapScaleToPalette as snapScaleToPalettePure,
@@ -34,7 +33,7 @@
     label: string;
     displayLabel?: string | null;
     initialColor?: string;
-    mode?: 'chromatic' | 'gray';
+    neutral?: boolean;
     cssNamespace?: string | null;
     emptySelector?: boolean;
   }
@@ -43,39 +42,23 @@
     label,
     displayLabel = null,
     initialColor = GRAY_FALLBACK,
-    mode = 'chromatic',
+    neutral = false,
     cssNamespace = null,
     emptySelector = false
   }: Props = $props();
 
-
-  function defaultPaletteConfig(): PaletteConfig {
-    return {
-      baseColor: initialColor,
-      tintHue: 240,
-      tintChroma: DEFAULT_TINT_CHROMA,
-      lightnessCurve: DEFAULT_PALETTE_LIGHTNESS(),
-      saturationCurve: DEFAULT_PALETTE_SATURATION(),
-      grayLightnessCurve: DEFAULT_GRAY_LIGHTNESS(),
-      graySaturationCurve: DEFAULT_GRAY_SATURATION(),
-      scaleCurves: defaultScaleCurvesObject(),
-      curveOffset: { lightness: 0, saturation: 0 },
-      overrides: {},
-      snappedScales: [],
-      anchorToBase: true,
-    };
-  }
+  const seedConfig = () => defaultPaletteConfig({ baseColor: initialColor, neutral });
 
   function edit<K extends keyof PaletteConfig>(field: K, value: PaletteConfig[K]): void {
     mutate(`${label}: ${String(field)}`, (s) => {
-      if (!s.palettes[label]) s.palettes[label] = defaultPaletteConfig();
+      if (!s.palettes[label]) s.palettes[label] = seedConfig();
       (s.palettes[label] as any)[field] = value;
     });
   }
 
   function patchPalette(patch: Partial<PaletteConfig>, historyLabel: string): void {
     mutate(`${label}: ${historyLabel}`, (s) => {
-      if (!s.palettes[label]) s.palettes[label] = defaultPaletteConfig();
+      if (!s.palettes[label]) s.palettes[label] = seedConfig();
       Object.assign(s.palettes[label], patch);
     });
   }
@@ -110,14 +93,11 @@
     edit('emptyMode', (e.currentTarget as HTMLInputElement).checked ? 'gradient' : 'solid');
   }
 
-  let grayEditorOpen = $state(false);
   let showDerived = $state(false);
   let paletteEditorOpen = $state(false);
 
   function setLightnessCurve(a: CurveAnchor[]) { edit('lightnessCurve', a); }
   function setSaturationCurve(a: CurveAnchor[]) { edit('saturationCurve', a); }
-  function setGrayLightnessCurve(a: CurveAnchor[]) { edit('grayLightnessCurve', a); }
-  function setGraySaturationCurve(a: CurveAnchor[]) { edit('graySaturationCurve', a); }
 
   function handleOffset(key: string, value: number) {
     edit('curveOffset', { ...curveOffset, [key]: value });
@@ -128,10 +108,6 @@
   let injectedLightness = false;
   let injectedSaturation = false;
 
-  function computeGrayColor(index: number, hue: number, chroma: number = tintChroma): string {
-    return computeGrayColorPure(index, hue, chroma, grayLightnessCurve, graySaturationCurve, curveOffset);
-  }
-
   function computePaletteColor(index: number, base: string): string {
     return computePaletteColorPure(index, base, lightnessCurve, saturationCurve, curveOffset);
   }
@@ -180,9 +156,7 @@
 
   function startBaseEdit() {
     if (editing.kind === 'editingBase') { confirmEdit(); return; }
-    editing = mode === 'gray'
-      ? { kind: 'editingBase', snapshotHex: gray500Hex, snapshotTintHue: tintHue, snapshotTintChroma: tintChroma }
-      : { kind: 'editingBase', snapshotHex: baseColor, snapshotTintHue: null, snapshotTintChroma: null };
+    editing = { kind: 'editingBase' };
     openSession();
   }
 
@@ -210,19 +184,22 @@
   }
 
   function handleColorChange(hex: string) {
-    if (isEditingBase) {
-      // Gray mode's base is derived from tintHue/tintChroma; raw hex only applies to chromatic.
-      if (mode === 'chromatic') edit('baseColor', hex);
-      return;
-    }
     if (editing.kind === 'editingStep') {
       editing = { ...editing, draft: hex };
-      if (editing.stepKey in overrides) {
-        edit('overrides', { ...overrides, [editing.stepKey]: hex });
-      }
+      // Write every drag tick to the store (not just pre-existing overrides) so
+      // the live page and the derived-scale preview swatches update in realtime.
+      // The open session collapses these to one undo entry; cancel restores the
+      // snapshot, and confirmEdit drops the override if the draft equals the
+      // computed value, so a no-op edit leaves nothing behind.
+      edit('overrides', { ...overrides, [editing.stepKey]: hex });
     }
   }
 
+  function oklchHex(hue: number, chroma: number, lightness: number): string {
+    const c = gamutClamp(lightness / 100, chroma, hue);
+    return oklchToHex(c.l, c.c, c.h);
+  }
+
   function resetOverride(k: string) {
     if (!(k in overrides)) return;
     const { [k]: _, ...rest } = overrides;
@@ -234,18 +211,7 @@
       confirmEdit();
       return;
     }
-    const current = (k in overrides) ? overrides[k] : computeDerivedColor(step, gray500Hex, scaleTitle);
-    editing = { kind: 'editingStep', stepKey: k, snapshot: current, draft: current };
-    openSession();
-  }
-
-  function handleGrayClick(gStep: GrayStep, index: number) {
-    const k = grayStepKey(gStep.label);
-    if (editingKey === k) {
-      confirmEdit();
-      return;
-    }
-    const current = (k in overrides) ? overrides[k] : computeGrayColor(index, tintHue, tintChroma);
+    const current = (k in overrides) ? overrides[k] : computeDerivedColor(step, baseColor, scaleTitle);
     editing = { kind: 'editingStep', stepKey: k, snapshot: current, draft: current };
     openSession();
   }
@@ -282,7 +248,7 @@
 
   function cancelEdit() {
     editing = idleState;
-    // Restoring the session snapshot pulls baseColor/tintHue/overrides/… back to pre-open.
+    // Restoring the session snapshot pulls baseColor/overrides/… back to pre-open.
     if (paletteEditScope) { cancelScope(paletteEditScope); paletteEditScope = null; }
   }
 
@@ -298,12 +264,10 @@
       const idx = paletteStepLightness.indexOf(ps);
       return computePaletteColor(idx, baseColor);
     }
-    const gi = graySteps.findIndex(g => grayStepKey(g.label) === key);
-    if (gi >= 0) return computeGrayColor(gi, tintHue, tintChroma);
     for (const scale of scales) {
       for (const step of scale.steps) {
         if (stepKey(scale.title, step.name) === key) {
-          return computeDerivedColor(step, gray500Hex, scale.title);
+          return computeDerivedColor(step, baseColor, scale.title);
         }
       }
     }
@@ -312,7 +276,7 @@
 
   function effectiveColor(k: string, step: Step, scaleTitle: string, _version?: string): string {
     if (editingKey === k && editingDraft !== null) return editingDraft;
-    return (k in overrides) ? overrides[k] : computeDerivedColor(step, gray500Hex, scaleTitle);
+    return (k in overrides) ? overrides[k] : computeDerivedColor(step, baseColor, scaleTitle);
   }
 
   let copiedKey: string | null = $state(null);
@@ -356,11 +320,7 @@
 
   function clearPaletteOverrides() {
     const next = { ...overrides };
-    if (mode === 'gray') {
-      for (const step of graySteps) delete next[grayStepKey(step.label)];
-    } else {
-      for (const ps of paletteStepLightness) delete next[paletteStepKey(ps.label)];
-    }
+    for (const ps of paletteStepLightness) delete next[paletteStepKey(ps.label)];
     edit('overrides', next);
   }
 
@@ -427,12 +387,8 @@
   // every mutate-in-place store update (Svelte 5 uses `===` equality) and
   // short-circuit the downstream chain — swatches would freeze.
   let baseColor = $derived($editorState.palettes[label]?.baseColor ?? initialColor);
-  let tintHue = $derived($editorState.palettes[label]?.tintHue ?? 240);
-  let tintChroma = $derived($editorState.palettes[label]?.tintChroma ?? DEFAULT_TINT_CHROMA);
   let lightnessCurve = $derived($editorState.palettes[label]?.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS());
   let saturationCurve = $derived($editorState.palettes[label]?.saturationCurve ?? DEFAULT_PALETTE_SATURATION());
-  let grayLightnessCurve = $derived($editorState.palettes[label]?.grayLightnessCurve ?? DEFAULT_GRAY_LIGHTNESS());
-  let graySaturationCurve = $derived($editorState.palettes[label]?.graySaturationCurve ?? DEFAULT_GRAY_SATURATION());
   let scaleCurves = $derived($editorState.palettes[label]?.scaleCurves ?? defaultScaleCurvesObject());
   let curveOffset = $derived($editorState.palettes[label]?.curveOffset ?? { lightness: 0, saturation: 0 });
   let overrides = $derived($editorState.palettes[label]?.overrides ?? {});
@@ -450,27 +406,6 @@
   let gradientSize = $derived($editorState.palettes[label]?.gradientSize ?? 'page');
   let editingKey = $derived(editing.kind === 'idle' ? null : editing.kind === 'editingBase' ? BASE_KEY : editing.stepKey);
   let editingDraft = $derived(editing.kind === 'editingStep' ? editing.draft : null);
-  let grayComputed = $derived((() => {
-    const _gl = grayLightnessCurve, _gs = graySaturationCurve, _co = curveOffset, _tc = tintChroma, _th = tintHue;
-    return graySteps.map((step, index) => ({
-      step,
-      index,
-      key: grayStepKey(step.label),
-      hex: computeGrayColor(index, _th, _tc),
-    }));
-  })());
-  let grayEffective = $derived((() => {
-    const _ed = editingDraft, _ek = editingKey, _ov = overrides;
-    return grayComputed.map(g => ({
-      ...g,
-      effective: (_ek === g.key && _ed !== null) ? _ed : (g.key in _ov) ? _ov[g.key] : g.hex,
-    }));
-  })());
-  // Always use the computed (curve-derived) value so derived scales update in
-  // realtime when tint changes.
-  let gray500Hex = $derived(mode === 'gray'
-    ? (grayComputed.find(g => g.step.label === '500')?.hex ?? GRAY_FALLBACK)
-    : baseColor);
   // Keep the locked lightness anchor y in sync with baseColor. Idempotent.
   // `lightnessCurve` is read via `untrack` so writing it back via `edit` does
   // not retrigger this effect (Svelte 5 flags the read+write pattern as
@@ -509,24 +444,17 @@
     const stops = sorted.map(s => `${stopColor(s, pc)} ${s.position}%`).join(', ');
     return `linear-gradient(to right, ${stops})`;
   });
-  let grayScales = $derived(mode === 'gray' ? scales : []);
-  let curveVersion = $derived(JSON.stringify(scaleCurves) + JSON.stringify(curveOffset) + gray500Hex);
-  // Chromatic vs gray distinction is only for the `derivedHex` ("Ag" preview /
-  // border-color base); `effectiveColor` always uses `gray500Hex` for non-override derivation.
+  // `editingDraft` is folded in so the effective-hex closure passed to
+  // OverridesPanel re-derives on every drag tick (the per-step hex text would
+  // otherwise lag the live swatch during an override edit).
+  let curveVersion = $derived(JSON.stringify(scaleCurves) + JSON.stringify(curveOffset) + baseColor + (editingDraft ?? ''));
   let derivedHexForBase = $derived((step: Step, scaleTitle: string) => computeDerivedColor(step, baseColor, scaleTitle));
-  let derivedHexForGray = $derived((step: Step, scaleTitle: string) => computeDerivedColor(step, gray500Hex, scaleTitle));
   let effectiveHexAny = $derived((k: string, step: Step, scaleTitle: string) => effectiveColor(k, step, scaleTitle, curveVersion));
 
   let isEditingBase = $derived(isBaseEdit(editing));
-  let editingColor = $derived(isEditingBase
-    ? (mode === 'gray' ? gray500Hex : baseColor)
-    : editingDraft);
+  let editingColor = $derived(isEditingBase ? baseColor : editingDraft);
   let editingStepInfo = $derived((() => {
     if (!editingKey || isEditingBase) return null;
-    if (mode === 'gray') {
-      const gs = graySteps.find(s => grayStepKey(s.label) === editingKey);
-      if (gs) return { scale: 'Gray', step: gs.label };
-    }
     const ps = paletteStepLightness.find(p => paletteStepKey(p.label) === editingKey);
     if (ps) return { scale: 'Palette', step: ps.label };
     for (const scale of scales) {
@@ -556,15 +484,12 @@
   });
 </script>
 
-<div class="palette-editor" style="--editor-base: {mode === 'gray' ? gray500Hex : baseColor}">
+<div class="palette-editor" style="--editor-base: {baseColor}">
   <PaletteBase
     {label}
     {displayLabel}
-    {mode}
+    {neutral}
     {baseColor}
-    {gray500Hex}
-    {tintHue}
-    {tintChroma}
     {anchorToBase}
     {isEditingBase}
     {panelOpen}
@@ -574,13 +499,11 @@
     onStartEdit={startBaseEdit}
     onConfirm={confirmEdit}
     onCancel={cancelEdit}
-    onColorChange={handleColorChange}
-    onTintChange={(h, c) => patchPalette({ tintHue: h, tintChroma: c }, 'tint hue/chroma')}
+    onBaseChange={(h, c, l) => edit('baseColor', oklchHex(h, c, l))}
     onAnchorToBaseChange={setAnchorToBase}
     onCopyBaseHex={copyHex}
   />
 
-  {#if mode === 'chromatic'}
   <!-- Palette + Text row -->
   <div class="scales-row">
     <div class="scale-section">
@@ -700,87 +623,6 @@
 
   </div>
 
-  {:else}
-  <!-- Gray mode: palette + text row -->
-  <div class="scales-row">
-  <div class="scale-section">
-    <div class="scale-header">
-      <h4 class="scale-title">{displayLabel ?? label}</h4>
-      <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
-      <UIPillButton size="compact" variant="outline" onclick={() => grayEditorOpen = !grayEditorOpen}>
-        {grayEditorOpen ? 'Close' : 'Edit'}
-      </UIPillButton>
-    </div>
-    <div class="swatch-grid" style="--swatch-cols: {graySteps.length + 2}">
-      <div class="step-column">
-        <button class="step-label copyable-label" class:copied={copiedLabelKey === 'gray-white'} type="button" onclick={(e) => copyVarName('gray-white', `--color-${cssNamespace}-white`, e)}>
-          {copiedLabelKey === 'gray-white' ? 'copied!' : 'white'}
-        </button>
-        <div class="swatch gray-swatch bookend" style="background: #ffffff"></div>
-      </div>
-      {#each grayEffective as g}
-        <div class="step-column">
-          <button class="step-label copyable-label" class:copied={copiedLabelKey === g.key} type="button" onclick={(e) => copyVarName(g.key, `--color-${cssNamespace}-${g.step.label}`, e)}>
-            {copiedLabelKey === g.key ? 'copied!' : g.step.label}
-          </button>
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            class="swatch gray-swatch"
-            class:active={editingKey === g.key}
-            class:overridden={g.key in overrides}
-            style="background: {g.effective}"
-            onclick={() => handleGrayClick(g.step, g.index)}
-            role="button"
-            tabindex="0"
-            onkeydown={(e) => e.key === 'Enter' && handleGrayClick(g.step, g.index)}
-          >
-            {#if g.key in overrides}
-              <span class="override-dot" title="Palette override"></span>
-            {/if}
-          </div>
-          <button
-            class="step-hex"
-            class:copied={copiedKey === g.key}
-            type="button"
-            onclick={(e) => copyHex(g.key, g.effective, e)}
-          >{copiedKey === g.key ? 'copied!' : g.effective}</button>
-        </div>
-      {/each}
-      <div class="step-column">
-        <button class="step-label copyable-label" class:copied={copiedLabelKey === 'gray-black'} type="button" onclick={(e) => copyVarName('gray-black', `--color-${cssNamespace}-black`, e)}>
-          {copiedLabelKey === 'gray-black' ? 'copied!' : 'black'}
-        </button>
-        <div class="swatch gray-swatch bookend" style="background: #000000"></div>
-      </div>
-    {#if grayEditorOpen}
-      <div class="curve-grid-span" style="grid-column: 2 / {graySteps.length + 2}">
-        <ScaleCurveEditor
-          curveKey="gray-lightness"
-          anchors={grayLightnessCurve}
-          cfg={lightnessCurveConfig}
-          stepCount={graySteps.length}
-          defaults={DEFAULT_GRAY_LIGHTNESS()}
-          offset={curveOffset['gray-lightness'] ?? 0}
-          onAnchorsChange={setGrayLightnessCurve}
-          onOffsetChange={handleOffset}
-        />
-        <ScaleCurveEditor
-          curveKey="gray-saturation"
-          anchors={graySaturationCurve}
-          cfg={saturationCurveConfig}
-          stepCount={graySteps.length}
-          defaults={DEFAULT_GRAY_SATURATION()}
-          offset={curveOffset['gray-saturation'] ?? 0}
-          onAnchorsChange={setGraySaturationCurve}
-          onOffsetChange={handleOffset}
-        />
-      </div>
-    {/if}
-    </div>
-  </div>
-  </div>
-  {/if}
-
   {#snippet overridesPanel(scale: Scale, canSnap: boolean, derivedHexFor: (step: Step, scaleTitle: string) => string)}
     <OverridesPanel
       {scale}
@@ -821,31 +663,28 @@
   </button>
 
   {#if showDerived}
-    {@const activeScales = mode === 'gray' ? grayScales : scales}
-    {@const derivedHexFor = mode === 'gray' ? derivedHexForGray : derivedHexForBase}
     <div class="scales-row">
-      {#each activeScales.filter(s => s.isText) as scale}
-        {@render overridesPanel(scale, true, derivedHexFor)}
+      {#each scales.filter(s => s.isText) as scale}
+        {@render overridesPanel(scale, true, derivedHexForBase)}
       {/each}
     </div>
     <div class="scales-row">
-      {#each activeScales.filter(s => !s.isText) as scale}
-        {@render overridesPanel(scale, mode !== 'gray', derivedHexFor)}
+      {#each scales.filter(s => !s.isText) as scale}
+        {@render overridesPanel(scale, true, derivedHexForBase)}
       {/each}
     </div>
   {/if}
 
   <!-- Color Edit Panel (non-base edits) -->
   {#if !isEditingBase && panelOpen && editingColor}
+    {@const oc = hexToOklch(editingColor)}
     <ColorEditPanel
-      color={editingColor}
       title={editPanelTitle}
       showRemoveOverride={!!editingKey}
-      mode={'hsl'}
-      hue={tintHue}
-      chroma={tintChroma}
-      onHueChromaChange={(h, c) => patchPalette({ tintHue: h, tintChroma: c }, 'tint hue/chroma')}
-      onColorChange={handleColorChange}
+      hue={oc.h}
+      chroma={oc.c}
+      lightness={oc.l * 100}
+      onHueChromaChange={(h, c, l) => handleColorChange(oklchHex(h, c, l))}
       onConfirm={confirmEdit}
       onCancel={cancelEdit}
       onRemoveOverride={() => editingKey && removeOverride(editingKey)}

package/src/editor/ui/VariablesTab.svelte

@@ -52,8 +52,8 @@
       <PaletteEditor label="Brand" initialColor="#c93636" cssNamespace="brand" />
       <PaletteEditor label="Accent" initialColor="#f49e0b" cssNamespace="accent" />
       <PaletteEditor label="Background" initialColor="#1a1a2e" cssNamespace="canvas" emptySelector />
-      <PaletteEditor mode="gray" label="Neutral" cssNamespace="neutral"/>
-      <PaletteEditor mode="gray" label="Alternate" displayLabel="Alternate (neutral)" cssNamespace="alternate" />
+      <PaletteEditor neutral label="Neutral" initialColor="#70787e" cssNamespace="neutral"/>
+      <PaletteEditor neutral label="Alternate" displayLabel="Alternate (neutral)" initialColor="#817b78" cssNamespace="alternate" />
       <PaletteEditor label="Special" initialColor="#8b5cf6" cssNamespace="special" />
       <PaletteEditor label="Info" initialColor="#3077e8" cssNamespace="info" />
       <PaletteEditor label="Success" initialColor="#21c45d" cssNamespace="success" />

package/src/editor/ui/palette/PaletteBase.svelte

@@ -2,28 +2,31 @@
   import ColorEditPanel from '../ColorEditPanel.svelte';
   import Toggle from '../Toggle.svelte';
   import { beginSliderGesture } from '../../core/store/editorStore';
+  import { hexToOklch } from '../../core/palettes/oklch';
+
+  // Full sRGB chroma range (gamutClamp trims per hue/lightness). Neutrals default
+  // low but are not capped; their calm character comes from defaults, not a ceiling.
+  const CHROMA_MAX = 0.4;
+  // Where a typical neutral's chroma sits, marked on the slider as a soft nudge.
+  const NEUTRAL_CALM_CHROMA = 0.05;
 
   
 
 
   interface Props {
     /**
-   * The header swatch + label + base-hex + (when active) the ColorEditPanel
-   * for editing the palette's base colour. In chromatic mode the user picks
-   * an arbitrary hex; in gray mode the user picks tint hue + chroma and the
-   * hex is derived.
+   * The header swatch + label + base-hex + (when active) the OKLCH ColorEditPanel
+   * for editing the palette's base colour. The picker edits hue/chroma/lightness
+   * and maps them straight to the base hex. `neutral` only nudges the picker
+   * (a calm-chroma hint on the slider); it does not change behaviour.
    *
    * State (`editing`, scope handle) is owned by the parent — this component
-   * fires callbacks (`onStartEdit`, `onConfirm`, `onCancel`, etc.). The
-   * parent decides whether to apply the chromatic-vs-gray snapshot dance.
+   * fires callbacks (`onStartEdit`, `onConfirm`, `onCancel`, etc.).
    */
     label: string;
     displayLabel?: string | null;
-    mode: 'chromatic' | 'gray';
+    neutral?: boolean;
     baseColor: string;
-    gray500Hex: string;
-    tintHue: number;
-    tintChroma: number;
     anchorToBase: boolean;
     isEditingBase: boolean;
     panelOpen: boolean;
@@ -33,8 +36,7 @@
     onStartEdit: () => void;
     onConfirm: () => void;
     onCancel: () => void;
-    onColorChange: (hex: string) => void;
-    onTintChange: (hue: number, chroma: number) => void;
+    onBaseChange: (hue: number, chroma: number, lightness: number) => void;
     onAnchorToBaseChange: (next: boolean) => void;
     onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
   }
@@ -42,11 +44,8 @@
   let {
     label,
     displayLabel = null,
-    mode,
+    neutral = false,
     baseColor,
-    gray500Hex,
-    tintHue,
-    tintChroma,
     anchorToBase,
     isEditingBase,
     panelOpen,
@@ -56,14 +55,13 @@
     onStartEdit,
     onConfirm,
     onCancel,
-    onColorChange,
-    onTintChange,
+    onBaseChange,
     onAnchorToBaseChange,
     onCopyBaseHex
   }: Props = $props();
 
-  let displayHex = $derived(mode === 'gray' ? gray500Hex : baseColor);
-  let copyKey = $derived(mode === 'gray' ? 'gray-500' : '__base__');
+  let baseOklch = $derived(hexToOklch(baseColor));
+  let pickerChromaHint = $derived(neutral ? NEUTRAL_CALM_CHROMA : undefined);
 </script>
 
 <div class="editor-top">
@@ -72,7 +70,7 @@
     <div
       class="header-swatch"
       class:active={isEditingBase}
-      style="background: {displayHex}"
+      style="background: {baseColor}"
       onclick={onStartEdit}
       role="button"
       tabindex="0"
@@ -83,32 +81,30 @@
       <button
         class="base-hex clickable-hex"
         type="button"
-        onclick={(e) => onCopyBaseHex(copyKey, displayHex, e)}
-      >{copiedKey === copyKey ? 'copied!' : displayHex}</button>
+        onclick={(e) => onCopyBaseHex('__base__', baseColor, e)}
+      >{copiedKey === '__base__' ? 'copied!' : baseColor}</button>
     </div>
   </div>
 </div>
 
 {#if isEditingBase && panelOpen && editingColor}
   <ColorEditPanel
-    color={editingColor}
     title={editPanelTitle}
     showRemoveOverride={false}
-    mode={mode === 'gray' ? 'hue-chroma' : 'hsl'}
-    hue={tintHue}
-    chroma={tintChroma}
-    onHueChromaChange={onTintChange}
-    onColorChange={onColorChange}
+    hue={baseOklch.h}
+    chroma={baseOklch.c}
+    lightness={baseOklch.l * 100}
+    chromaMax={CHROMA_MAX}
+    chromaHint={pickerChromaHint}
+    onHueChromaChange={onBaseChange}
     onConfirm={onConfirm}
     onCancel={onCancel}
     onRemoveOverride={() => {}}
     onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
   >
     {#snippet actions()}
-        <span  class:hidden={mode !== 'chromatic'}>
-        <Toggle checked={anchorToBase} onchange={(v) => onAnchorToBaseChange(v ?? !anchorToBase)} label="Lock base color to position 500" />
-      </span>
-      {/snippet}
+      <Toggle checked={anchorToBase} onchange={(v) => onAnchorToBaseChange(v ?? !anchorToBase)} label="Lock base color to position 500" />
+    {/snippet}
   </ColorEditPanel>
 {/if}
 
@@ -183,10 +179,6 @@
     color: var(--ui-text-primary);
   }
 
-  .hidden {
-    display: none;
-  }
-
   @media (max-width: 1280px) {
     .header-swatch {
       width: 3rem;

package/src/editor/ui/palette/paletteEditorState.ts

@@ -1,33 +1,25 @@
 /**
  * Editing-state machine for the PaletteEditor.
  *
- * Replaces five independent `let` decls (`editingKey`, `editingSnapshot`,
- * `editingDraft`, `snapshotTintHue`, `snapshotTintChroma`) with a single
- * discriminated union. The type-checker now enforces field validity per
- * mode — e.g. `snapshotTintHue` only exists when `kind === 'editingBase'`,
- * making it impossible to leak the gray-mode tint snapshot into a
- * step-edit cancel path.
+ * A single discriminated union replaces several independent `let` decls so
+ * the type-checker enforces field validity per mode.
  *
  * Modes:
  * - `idle` — no edit panel open.
- * - `editingBase` — header swatch is active; the user is dragging the
- *   base hex (chromatic) or tint hue/chroma (gray). Snapshot is the
- *   original hex used to render the swatch; the tint snapshots are only
- *   relevant in gray mode and are nullable.
- * - `editingStep` — a non-base swatch is active (palette / gray-step /
- *   derived-scale step / override slot). `stepKey` is the dot-keyed
- *   identifier; `snapshot` is the value at panel-open; `draft` is the
- *   live working colour (drives the swatch preview before commit).
+ * - `editingBase` — header swatch is active; the user is dragging the base
+ *   hex. No payload: the swatch renders from `baseColor` and cancel restores
+ *   via the session scope.
+ * - `editingStep` — a non-base swatch is active (palette step / derived-scale
+ *   step / override slot). `stepKey` is the dot-keyed identifier; `snapshot`
+ *   is the value at panel-open; `draft` is the live working colour (drives
+ *   the swatch preview before commit).
  *
  * Locked-anchor state (`lockedLightnessIdx`, `lockedSaturationIdx`) and
  * the per-toggle injected flags (`injectedLightness`, `injectedSaturation`)
  * remain separate `let` decls in the parent because they are anchor-
  * management state, not edit-session state — they persist across
  * idle/edit transitions and have their own lifecycle tied to
- * `setAnchorToBase()`. Folding them into this union (per the audit's
- * `editingScale` sketch) would conflate two orthogonal axes; the audit's
- * "scale" mode does not correspond to a user-visible state since curve
- * edits don't open a panel.
+ * `setAnchorToBase()`.
  */
 
 import type { Scope } from '../../core/store/editorStore';
@@ -37,12 +29,7 @@ export const BASE_KEY = '__base__';
 
 export type EditingState =
   | { kind: 'idle' }
-  | {
-      kind: 'editingBase';
-      snapshotHex: string;
-      snapshotTintHue: number | null;
-      snapshotTintChroma: number | null;
-    }
+  | { kind: 'editingBase' }
   | {
       kind: 'editingStep';
       stepKey: string;
@@ -75,7 +62,7 @@ export function activeKey(s: EditingState): string | null {
   return s.stepKey;
 }
 
-/** The current draft hex (for editingStep) or null. Editingbase draws from baseColor/gray500Hex directly. */
+/** The current draft hex (for editingStep) or null. editingBase draws from baseColor directly. */
 export function activeDraft(s: EditingState): string | null {
   return s.kind === 'editingStep' ? s.draft : null;
 }