@motion-proto/live-tokens 0.40.1 → 0.41.0

package/src/editor/ui/PaletteEditor.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-  import { stopPropagation, createBubbler } from 'svelte/legacy';
-
-  const bubble = createBubbler();
-  import { onMount, onDestroy, tick, untrack } from 'svelte';
-  import { hexToOklch, oklchToHex, gamutClamp } from '../core/palettes/oklch';
+  import { onMount, onDestroy, tick } from 'svelte';
+  import { oklchToHexClamped, type Oklch } from '../core/palettes/oklch';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig } from './curveEngine';
   import ColorEditPanel from './ColorEditPanel.svelte';
   import OverridesPanel from './palette/OverridesPanel.svelte';
@@ -12,6 +9,7 @@
   import ScaleCurveEditor from './palette/ScaleCurveEditor.svelte';
   import PaletteBase from './palette/PaletteBase.svelte';
   import { type EditingState, idleState, BASE_KEY, isEditingBase as isBaseEdit } from './palette/paletteEditorState';
+  import { dockTrackTemplate } from './palette/dockMagnify';
   import {
     type Step, type Scale,
     GRAY_FALLBACK,
@@ -20,19 +18,22 @@
     paletteStepLightness, scales,
     paletteStepKey, stepKey, scaleCurveKey as getScaleCurveKey,
     stepIndexToX,
-    injectLockedAnchor, removeLockedAnchor,
-    computePaletteColor as computePaletteColorPure,
-    computeDerivedColor as computeDerivedColorPure,
+    syncBaseAnchor, clearBaseAnchor,
+    computePaletteOklch as computePaletteOklchPure,
+    computeDerivedOklch as computeDerivedOklchPure,
     snapScaleToPalette as snapScaleToPalettePure,
   } from './palette/paletteMath';
   import type { PaletteConfig, GradientStop } from '../core/themes/themeTypes';
   import { editorState, mutate, setPaletteConfig, beginSliderGesture, beginScope, commitScope, cancelScope, type Scope } from '../core/store/editorStore';
+  // Base-color edits route through the shared setter so a bound harmony axis
+  // follows the hue (invariant 1); the local `edit` would silently detach it.
+  import { setBaseColor } from './colors/paletteBaseColor';
   import { showCopyPopover } from './copyPopover';
 
   interface Props {
     label: string;
     displayLabel?: string | null;
-    initialColor?: string;
+    initialColor?: Oklch;
     neutral?: boolean;
     cssNamespace?: string | null;
     emptySelector?: boolean;
@@ -47,6 +48,8 @@
     emptySelector = false
   }: Props = $props();
 
+  const toHex = (o: Oklch): string => oklchToHexClamped(o.l, o.c, o.h);
+
   const seedConfig = () => defaultPaletteConfig({ baseColor: initialColor, neutral });
 
   function edit<K extends keyof PaletteConfig>(field: K, value: PaletteConfig[K]): void {
@@ -64,15 +67,15 @@
   }
 
   let lockedLightnessIdx: number | null = $derived.by(() => {
-    if (!anchorToBase) return null;
-    const x500 = stepIndexToX(4);
-    const idx = lightnessCurve.findIndex(a => Math.abs(a.x - x500) < 0.5);
+    if (!anchorToBase || anchorPlacement === undefined) return null;
+    const x = stepIndexToX(anchorPlacement.step);
+    const idx = lightnessCurve.findIndex(a => Math.abs(a.x - x) < 0.5);
     return idx >= 0 ? idx : null;
   });
   let lockedSaturationIdx: number | null = $derived.by(() => {
-    if (!anchorToBase) return null;
-    const x500 = stepIndexToX(4);
-    const idx = saturationCurve.findIndex(a => Math.abs(a.x - x500) < 0.5);
+    if (!anchorToBase || anchorPlacement === undefined) return null;
+    const x = stepIndexToX(anchorPlacement.step);
+    const idx = saturationCurve.findIndex(a => Math.abs(a.x - x) < 0.5);
     return idx >= 0 ? idx : null;
   });
 
@@ -105,55 +108,32 @@
 
   let editing: EditingState = $state(idleState);
 
-  let injectedLightness = false;
-  let injectedSaturation = false;
-
-  function computePaletteColor(index: number, base: string): string {
-    return computePaletteColorPure(index, base, lightnessCurve, saturationCurve, curveOffset);
+  function computePaletteOklch(index: number, base: Oklch): Oklch {
+    return computePaletteOklchPure(index, base, lightnessCurve, saturationCurve, curveOffset);
   }
 
-  function computeDerivedColor(step: Step, base: string, scaleTitle: string): string {
-    return computeDerivedColorPure(step, base, scaleTitle, scaleCurves, curveOffset);
+  function computeDerivedOklch(step: Step, base: Oklch, scaleTitle: string): Oklch {
+    return computeDerivedOklchPure(step, base, scaleTitle, scaleCurves, curveOffset);
   }
 
-  /**
-   * Toggle anchorToBase: inject (or remove) the locked 500 anchor in both
-   * curves atomically with the flag flip, so one undo reverses the whole
-   * thing. Transient `injectedLightness` / `injectedSaturation` remember
-   * whether we created the anchor (vs it already existed) so toggle-off
-   * doesn't destroy a user-authored anchor. Not persisted — acceptable drift
-   * on reload is that a pre-existing anchor would be preserved on toggle-off.
-   */
+  // Toggle placement atomically with the flag flip so one undo reverses the
+  // whole thing. The anchor's lifecycle (placement, displaced-y restore)
+  // lives in syncBaseAnchor/clearBaseAnchor, shared with the store setters.
   function setAnchorToBase(next: boolean) {
     if (next === anchorToBase) return;
-    if (next) {
-      const x500 = stepIndexToX(4);
-      const lResult = injectLockedAnchor(lightnessCurve, x500, hexToOklch(baseColor).l * 100);
-      const sResult = injectLockedAnchor(saturationCurve, x500, 100);
-      injectedLightness = lResult.injected;
-      injectedSaturation = sResult.injected;
-      patchPalette({
-        anchorToBase: true,
-        lightnessCurve: lResult.curve,
-        saturationCurve: sResult.curve,
-      }, 'anchor on');
-    } else {
-      const lCurr = lightnessCurve;
-      const sCurr = saturationCurve;
-      const nextL = injectedLightness ? removeLockedAnchor(lCurr, lockedLightnessIdx) : lCurr;
-      const nextS = injectedSaturation ? removeLockedAnchor(sCurr, lockedSaturationIdx) : sCurr;
-      injectedLightness = false;
-      injectedSaturation = false;
-      patchPalette({
-        anchorToBase: false,
-        lightnessCurve: nextL,
-        saturationCurve: nextS,
-      }, 'anchor off');
-    }
+    mutate(`${label}: ${next ? 'anchor on' : 'anchor off'}`, (s) => {
+      if (!s.palettes[label]) s.palettes[label] = seedConfig();
+      const cfg = s.palettes[label];
+      if (next) {
+        cfg.anchorToBase = true;
+        syncBaseAnchor(cfg);
+      } else {
+        clearBaseAnchor(cfg);
+      }
+    });
   }
 
 
-
   function startBaseEdit() {
     if (editing.kind === 'editingBase') { confirmEdit(); return; }
     editing = { kind: 'editingBase' };
@@ -166,7 +146,7 @@
       confirmEdit();
       return;
     }
-    const current = (k in overrides) ? overrides[k] : computePaletteColor(ps.index, baseColor);
+    const current = (k in overrides) ? overrides[k] : computePaletteOklch(ps.index, baseColor);
     editing = { kind: 'editingStep', stepKey: k, snapshot: current, draft: current };
     openSession();
   }
@@ -183,23 +163,18 @@
     edit('scaleCurves', { ...scaleCurves, [title]: { ...cur, [channel]: a } });
   }
 
-  function handleColorChange(hex: string) {
+  function handleColorChange(color: Oklch) {
     if (editing.kind === 'editingStep') {
-      editing = { ...editing, draft: hex };
+      editing = { ...editing, draft: color };
       // 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 });
+      edit('overrides', { ...overrides, [editing.stepKey]: color });
     }
   }
 
-  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;
@@ -211,7 +186,7 @@
       confirmEdit();
       return;
     }
-    const current = (k in overrides) ? overrides[k] : computeDerivedColor(step, baseColor, scaleTitle);
+    const current = (k in overrides) ? overrides[k] : computeDerivedOklch(step, baseColor, scaleTitle);
     editing = { kind: 'editingStep', stepKey: k, snapshot: current, draft: current };
     openSession();
   }
@@ -223,9 +198,13 @@
       let nextOverrides = { ...overrides };
       if (editingDraft !== null) {
         const computed = computedValueForKey(editingKey);
-        if (computed !== null && editingDraft !== computed) {
+        // Compare via the sRGB projection: an override that renders identically
+        // to the computed default is dropped (same rule as the pre-Wave-2 hex
+        // compare); the stored value stays the lossless numeric draft.
+        const draftHex = toHex(editingDraft);
+        if (computed !== null && draftHex !== toHex(computed)) {
           nextOverrides[editingKey] = editingDraft;
-        } else if (computed !== null && editingKey in nextOverrides && editingDraft === computed) {
+        } else if (computed !== null && editingKey in nextOverrides && draftHex === toHex(computed)) {
           delete nextOverrides[editingKey];
         }
       }
@@ -258,16 +237,16 @@
     if (editingKey === k) { editing = idleState; }
   }
 
-  function computedValueForKey(key: string): string | null {
+  function computedValueForKey(key: string): Oklch | null {
     const ps = paletteStepLightness.find(p => paletteStepKey(p.label) === key);
     if (ps) {
       const idx = paletteStepLightness.indexOf(ps);
-      return computePaletteColor(idx, baseColor);
+      return computePaletteOklch(idx, baseColor);
     }
     for (const scale of scales) {
       for (const step of scale.steps) {
         if (stepKey(scale.title, step.name) === key) {
-          return computeDerivedColor(step, baseColor, scale.title);
+          return computeDerivedOklch(step, baseColor, scale.title);
         }
       }
     }
@@ -275,8 +254,8 @@
   }
 
   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, baseColor, scaleTitle);
+    if (editingKey === k && editingDraft !== null) return toHex(editingDraft);
+    return (k in overrides) ? toHex(overrides[k]) : toHex(computeDerivedOklch(step, baseColor, scaleTitle));
   }
 
   let copiedKey: string | null = $state(null);
@@ -295,7 +274,7 @@
     setTimeout(() => { copiedLabelKey = null; }, 1500);
   }
 
-  function snapScaleToPalette(scale: Scale): Record<string, string> {
+  function snapScaleToPalette(scale: Scale): Record<string, Oklch> {
     return snapScaleToPalettePure(scale, baseColor, scaleCurves, curveOffset, paletteComputed);
   }
 
@@ -348,8 +327,8 @@
   onMount(() => document.addEventListener('click', handleDocClick, true));
   onDestroy(() => document.removeEventListener('click', handleDocClick, true));
 
-  function selectSnapValue(k: string, paletteHex: string, _scaleTitle: string) {
-    edit('overrides', { ...overrides, [k]: paletteHex });
+  function selectSnapValue(k: string, value: Oklch, _scaleTitle: string) {
+    edit('overrides', { ...overrides, [k]: value });
     snapPickerKey = null;
   }
 
@@ -368,9 +347,12 @@
     for (const scale of scales.filter(s => !s.isText)) {
       if (!snappedScales.has(scale.title)) continue;
       const assigned = snapScaleToPalette(scale);
-      for (const [k, hex] of Object.entries(assigned)) {
-        if (next[k] !== hex) {
-          next[k] = hex;
+      for (const [k, color] of Object.entries(assigned)) {
+        // Value compare, not reference: the recompute yields fresh objects, so a
+        // reference test would always fire and loop the resnap effect.
+        const prev = next[k];
+        if (!prev || prev.l !== color.l || prev.c !== color.c || prev.h !== color.h) {
+          next[k] = color;
           changed = true;
         }
       }
@@ -394,8 +376,18 @@
   let overrides = $derived($editorState.palettes[label]?.overrides ?? {});
   let snappedScales = $derived(new Set($editorState.palettes[label]?.snappedScales ?? []));
   let anchorToBase = $derived($editorState.palettes[label]?.anchorToBase ?? true);
+  let anchorPlacement = $derived($editorState.palettes[label]?.anchorPlacement);
+  let anchorStepLabel = $derived(anchorToBase && anchorPlacement !== undefined
+    ? paletteStepLightness[anchorPlacement.step]?.label ?? null
+    : null);
+  // Dock magnification: the grid transitions between track lists, so dialing
+  // lightness reads as swatches opening/closing while the anchor walks the
+  // ramp. Column 0 is the white bookend, so step i is column i+1.
+  let swatchTemplate = $derived(dockTrackTemplate(
+    paletteStepLightness.length + 2,
+    anchorToBase && anchorPlacement !== undefined ? anchorPlacement.step + 1 : null,
+  ));
   let emptyMode = $derived($editorState.palettes[label]?.emptyMode ?? 'solid');
-  let emptyStep = $derived($editorState.palettes[label]?.emptyStep ?? '850');
   let gradientStyle = $derived($editorState.palettes[label]?.gradientStyle ?? 'linear');
   let gradientAngle = $derived($editorState.palettes[label]?.gradientAngle ?? 180);
   let gradientReverse = $derived($editorState.palettes[label]?.gradientReverse ?? false);
@@ -406,35 +398,23 @@
   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);
-  // 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
-  // recursive).
-  $effect(() => {
-    if (!anchorToBase || lockedLightnessIdx === null || !baseColor) return;
-    const targetY = hexToOklch(baseColor).l * 100;
-    untrack(() => {
-      const idx = lockedLightnessIdx;
-      if (idx === null) return;
-      const curve = lightnessCurve;
-      if (curve[idx] && Math.abs(curve[idx].y - targetY) > 0.01) {
-        edit('lightnessCurve', curve.map((a, i) => i === idx ? { ...a, y: targetY } : a));
-      }
-    });
-  });
   let paletteComputed = $derived((() => {
-    const _bc = baseColor, _lc = lightnessCurve, _sc = saturationCurve, _co = curveOffset, _ed = editingDraft, _ek = editingKey, _ov = overrides, _ab = anchorToBase;
+    const _bc = baseColor, _lc = lightnessCurve, _sc = saturationCurve, _co = curveOffset, _ed = editingDraft, _ek = editingKey, _ov = overrides, _ab = anchorToBase, _ap = anchorPlacement;
     return paletteStepLightness.map((ps, index) => {
       const k = paletteStepKey(ps.label);
-      const hex = computePaletteColor(index, baseColor);
-      const effective = (_ek === k && _ed !== null) ? _ed : (k in _ov) ? _ov[k] : hex;
+      const oklch = computePaletteOklch(index, baseColor);
+      const effOklch = (_ek === k && _ed !== null) ? _ed : (k in _ov) ? _ov[k] : oklch;
       return {
         label: ps.label,
         lightness: ps.lightness,
         index,
         key: k,
-        hex,
-        effective,
+        anchored: _ab && _ap?.step === index,
+        // `oklch` is the numeric step (feeds snap); `hex`/`effective` are the
+        // sRGB projections that paint swatches and copy to the clipboard.
+        oklch,
+        hex: toHex(oklch),
+        effective: toHex(effOklch),
       };
     });
   })());
@@ -447,9 +427,11 @@
   // `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 curveVersion = $derived(JSON.stringify(scaleCurves) + JSON.stringify(curveOffset) + JSON.stringify(baseColor) + JSON.stringify(editingDraft));
+  let derivedHexForBase = $derived((step: Step, scaleTitle: string) => toHex(computeDerivedOklch(step, baseColor, scaleTitle)));
   let effectiveHexAny = $derived((k: string, step: Step, scaleTitle: string) => effectiveColor(k, step, scaleTitle, curveVersion));
+  // Projected hex view of the numeric overrides for the display-only panels.
+  let overridesHex = $derived(Object.fromEntries(Object.entries(overrides).map(([k, v]) => [k, toHex(v)])));
 
   let isEditingBase = $derived(isBaseEdit(editing));
   let editingColor = $derived(isEditingBase ? baseColor : editingDraft);
@@ -484,13 +466,14 @@
   });
 </script>
 
-<div class="palette-editor" style="--editor-base: {baseColor}">
+<div class="palette-editor" style="--editor-base: {toHex(baseColor)}">
   <PaletteBase
     {label}
     {displayLabel}
     {neutral}
     {baseColor}
     {anchorToBase}
+    {anchorStepLabel}
     {isEditingBase}
     {panelOpen}
     {editingColor}
@@ -499,7 +482,7 @@
     onStartEdit={startBaseEdit}
     onConfirm={confirmEdit}
     onCancel={cancelEdit}
-    onBaseChange={(h, c, l) => edit('baseColor', oklchHex(h, c, l))}
+    onBaseChange={(h, c, l) => setBaseColor(label, { l: l / 100, c, h })}
     onAnchorToBaseChange={setAnchorToBase}
     onCopyBaseHex={copyHex}
   />
@@ -524,7 +507,7 @@
           {paletteEditorOpen ? 'Close' : 'Edit'}
         </UIPillButton>
       </div>
-      <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
+      <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}; grid-template-columns: {swatchTemplate}">
         <div class="step-column">
           <button class="step-label copyable-label" class:copied={copiedLabelKey === 'palette-white'} type="button" onclick={(e) => copyVarName('palette-white', `--color-${cssNamespace}-white`, e)}>
             {copiedLabelKey === 'palette-white' ? 'copied!' : 'white'}
@@ -541,6 +524,8 @@
               class="swatch gray-swatch"
               class:active={editingKey === ps.key}
               class:overridden={ps.key in overrides}
+              class:anchored={ps.anchored}
+              title={ps.anchored ? 'Base color' : undefined}
               style="background: {ps.effective}"
               onclick={() => handlePaletteClick({ label: ps.label, lightness: ps.lightness, index: ps.index })}
               role="button"
@@ -550,16 +535,6 @@
               {#if ps.key in overrides}
                 <span class="override-dot" title="Palette override"></span>
               {/if}
-              {#if emptySelector && emptyMode === 'solid'}
-                <input
-                  type="checkbox"
-                  class="empty-check"
-                  checked={emptyStep === ps.label}
-                  onclick={stopPropagation(() => edit('emptyStep', ps.label))}
-                  onkeydown={stopPropagation(bubble('keydown'))}
-                  title="Page background"
-                />
-              {/if}
             </div>
             <button
               class="step-hex"
@@ -633,7 +608,7 @@
       {scaleCurves}
       {curveOffset}
       {defaultScaleCurves}
-      {overrides}
+      overrides={overridesHex}
       {editingKey}
       {snapPickerKey}
       {copiedKey}
@@ -677,14 +652,13 @@
 
   <!-- Color Edit Panel (non-base edits) -->
   {#if !isEditingBase && panelOpen && editingColor}
-    {@const oc = hexToOklch(editingColor)}
     <ColorEditPanel
       title={editPanelTitle}
       showRemoveOverride={!!editingKey}
-      hue={oc.h}
-      chroma={oc.c}
-      lightness={oc.l * 100}
-      onHueChromaChange={(h, c, l) => handleColorChange(oklchHex(h, c, l))}
+      hue={editingColor.h}
+      chroma={editingColor.c}
+      lightness={editingColor.l * 100}
+      onHueChromaChange={(h, c, l) => handleColorChange({ l: l / 100, c, h })}
       onConfirm={confirmEdit}
       onCancel={cancelEdit}
       onRemoveOverride={() => editingKey && removeOverride(editingKey)}
@@ -855,6 +829,7 @@
   .swatch-grid {
     display: grid;
     grid-template-columns: repeat(var(--swatch-cols), minmax(0, 1fr));
+    transition: grid-template-columns var(--ui-transition-fast);
     gap: var(--ui-space-4) var(--swatch-gap, var(--ui-space-4));
     align-items: start;
     justify-content: start;
@@ -871,11 +846,22 @@
   .swatch.gray-swatch {
     width: 100%;
     height: calc(4rem + var(--ui-space-2));
+    /* Compensating margin: height + margin-bottom is constant every frame of
+       the magnification, so the grid's row height never dips mid-transition
+       (the dip bounced everything below the palette). Also keeps the hex row
+       aligned across anchored and plain columns. */
+    margin-bottom: 1rem;
+    transition: height var(--ui-transition-fast), margin-bottom var(--ui-transition-fast);
     cursor: pointer;
     position: relative;
   }
 
-  .swatch.gray-swatch:hover {
+  /* Bookends (white/black endpoints) are display-only, not clickable. */
+  .swatch.gray-swatch.bookend {
+    cursor: default;
+  }
+
+  .swatch.gray-swatch:not(.bookend):hover {
     border-color: var(--ui-border-high);
   }
 
@@ -885,6 +871,15 @@
     outline-offset: 1px;
   }
 
+  /* The step the base color is placed at: dock-magnified (its grid column is
+     also widened via the track template) with an emphasized border. No fill
+     change — the swatch itself already IS the picked color. */
+  .swatch.gray-swatch.anchored {
+    border-color: var(--ui-border-higher);
+    height: calc(5rem + var(--ui-space-2));
+    margin-bottom: 0;
+  }
+
   .override-dot {
     position: absolute;
     top: 3px;
@@ -911,39 +906,6 @@
     cursor: pointer;
   }
 
-  .empty-check {
-    -webkit-appearance: none;
-    appearance: none;
-    position: absolute;
-    bottom: 3px;
-    right: 3px;
-    margin: 0;
-    cursor: pointer;
-    width: 14px;
-    height: 14px;
-    background: white;
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 2px;
-    opacity: 0.5;
-  }
-
-  .empty-check:checked {
-    opacity: 1;
-  }
-
-  .empty-check:checked::after {
-    content: '\2713';
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    font-size: var(--ui-font-size-md);
-    font-weight: bold;
-    color: black;
-    line-height: 1;
-  }
-
   /* Narrow desktop: tighten palette editor spacing */
   @media (max-width: 1280px) {
     .palette-editor {

package/src/editor/ui/ProjectFontsSection.svelte

@@ -481,9 +481,6 @@
     background: var(--ui-surface-subtle, rgba(255,255,255,0.02));
     min-height: 36px;
   }
-  .pf-family:hover {
-    background: var(--ui-surface-hover, rgba(255,255,255,0.04));
-  }
 
   .pf-family-remove {
     display: inline-flex;