@motion-proto/live-tokens 0.40.1 → 0.41.0

package/src/editor/core/palettes/paletteDerivation.ts

@@ -13,7 +13,7 @@
  * derives the same CSS vars from the persisted config.
  */
 
-import { hexToOklch, oklchToHex, gamutClamp } from './oklch';
+import { hexToOklch, oklchToHexClamped, gamutClamp, type Oklch } from './oklch';
 import { type CurveAnchor, sampleCurve, makeAnchor } from '../../ui/curveEngine';
 import type { PaletteConfig } from '../themes/themeTypes';
 
@@ -21,40 +21,54 @@ export interface PaletteSpec {
   label: string;
   cssNamespace: string;
   emptySelector?: boolean;
-  initialColor: string;
+  /** Seed OKLCH intent used only when a config carries no `baseColor` (never
+   *  for a loaded theme). Numeric so it composes with the OKLCH basis. */
+  initialColor: Oklch;
   /** Seed-default role only: neutrals start with a calm low-chroma base and
    *  the neutral lightness ramp. The derivation path is identical for all. */
   neutral?: boolean;
+  /** Editor-only heading override (Alternate reads "Alternate (neutral)"). */
+  displayLabel?: string | null;
 }
 
 /**
  * Single source of truth for which palettes exist and how their CSS namespaces
  * map. Was previously hardcoded inside `VariablesTab.svelte`; centralising it
- * here lets the store seed boot-time vars without depending on the UI tree.
+ * here lets the store seed boot-time vars without depending on the UI tree, and
+ * drives the editor's palette-editor order + (Waves 4/5) the Colors swatch row.
  */
 export const PALETTE_SPECS: readonly PaletteSpec[] = [
-  { label: 'Neutral',    cssNamespace: 'neutral',   neutral: true, initialColor: '#70787e' },
-  { label: 'Alternate',  cssNamespace: 'alternate', neutral: true, initialColor: '#817b78' },
-  { label: 'Background', cssNamespace: 'canvas',    emptySelector: true, initialColor: '#1a1a2e' },
-  { label: 'Brand',      cssNamespace: 'brand',     initialColor: '#c93636' },
-  { label: 'Accent',     cssNamespace: 'accent',    initialColor: '#f49e0b' },
-  { label: 'Special',    cssNamespace: 'special',   initialColor: '#8b5cf6' },
-  { label: 'Info',       cssNamespace: 'info',      initialColor: '#3077e8' },
-  { label: 'Success',    cssNamespace: 'success',   initialColor: '#21c45d' },
-  { label: 'Warning',    cssNamespace: 'warning',   initialColor: '#e66e1a' },
-  { label: 'Danger',     cssNamespace: 'danger',    initialColor: '#e8304f' },
+  { label: 'Brand',      cssNamespace: 'brand',     initialColor: { l: 0.5573, c: 0.1841, h: 25.49 } },
+  { label: 'Accent',     cssNamespace: 'accent',    initialColor: { l: 0.7674, c: 0.164, h: 70.44 } },
+  { label: 'Background', cssNamespace: 'canvas',    emptySelector: true, initialColor: { l: 0.2284, c: 0.0384, h: 282.93 } },
+  { label: 'Neutral',    cssNamespace: 'neutral',   neutral: true, initialColor: { l: 0.5679, c: 0.0134, h: 240.07 } },
+  { label: 'Alternate',  cssNamespace: 'alternate', neutral: true, displayLabel: 'Alternate (neutral)', initialColor: { l: 0.5873, c: 0.0087, h: 48.57 } },
+  { label: 'Special',    cssNamespace: 'special',   initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
+  { label: 'Info',       cssNamespace: 'info',      initialColor: { l: 0.5871, c: 0.1855, h: 259.56 } },
+  { label: 'Success',    cssNamespace: 'success',   initialColor: { l: 0.7198, c: 0.1918, h: 149.52 } },
+  { label: 'Warning',    cssNamespace: 'warning',   initialColor: { l: 0.6704, c: 0.1716, h: 48.75 } },
+  { label: 'Danger',     cssNamespace: 'danger',    initialColor: { l: 0.6103, c: 0.2165, h: 18.1 } },
 ] as const;
 
-const PALETTE_STEPS = [
+export const PALETTE_STEPS = [
   { label: '100' }, { label: '200' }, { label: '300' }, { label: '400' },
   { label: '500' }, { label: '600' }, { label: '700' }, { label: '800' },
   { label: '850' }, { label: '900' }, { label: '950' },
 ];
 
-interface ScaleStep { name: string; position: number; }
-interface Scale { title: string; isText: boolean; steps: ScaleStep[]; }
+export interface Step {
+  name: string;
+  position: number;
+  lightness?: number;
+  saturation?: number;
+}
+export interface Scale {
+  title: string;
+  isText: boolean;
+  steps: Step[];
+}
 
-const SCALES: readonly Scale[] = [
+export const SCALES: readonly Scale[] = [
   {
     title: 'Surfaces', isText: false,
     steps: [
@@ -89,63 +103,208 @@ const SCALES: readonly Scale[] = [
   },
 ];
 
+/** Guard band for derived near-black/near-white text: values stay between
+ *  ≈ #111 and ≈ #e8e8e8 unless pure black/white is opted into. The AA floor
+ *  beats the guard (see `recommendText.ts`). */
+export const BW_GUARD_MIN_L = 0.17;
+export const BW_GUARD_MAX_L = 0.93;
+
 export const DEFAULT_PALETTE_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
 export const DEFAULT_PALETTE_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
 
-export const defaultScaleCurves = {
-  Surfaces: {
-    lightness:  () => [makeAnchor(0, 15, 5),   makeAnchor(100, 47, 5)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
-  },
-  Borders: {
-    lightness:  () => [makeAnchor(0, 25, 5),   makeAnchor(100, 80, 5)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
-  },
-  Text: {
-    lightness:  () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
-    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)],
-  },
-} as const;
+export type SchemeDirection = 'light' | 'dark';
+
+export type ScaleCurveDefaults = Record<
+  string,
+  { lightness: () => CurveAnchor[]; saturation: () => CurveAnchor[] }
+>;
+
+/**
+ * Scheme-parameterized seed anchors for the Surfaces/Borders/Text scales.
+ * `'dark'` is the historical default (dark surfaces, light text); `'light'`
+ * inverts the lightness bands (light surfaces, dark text). Saturation curves
+ * are scheme-independent. Derivation math is untouched — only these seed
+ * defaults differ, so saved themes (which carry explicit `scaleCurves`) render
+ * identically regardless of scheme.
+ *
+ * Light-scheme anchors are proposed values, tunable during QA. The dark anchors
+ * are frozen: existing themes depend on them via the `defaultScaleCurves` alias.
+ */
+export function scaleCurveDefaults(scheme: SchemeDirection = 'dark'): ScaleCurveDefaults {
+  if (scheme === 'light') {
+    return {
+      Surfaces: {
+        lightness:  () => [makeAnchor(0, 98, 5),   makeAnchor(100, 82, 5)],
+        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
+      },
+      Borders: {
+        lightness:  () => [makeAnchor(0, 92, 5),   makeAnchor(100, 45, 5)],
+        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
+      },
+      Text: {
+        lightness:  () => [makeAnchor(0, 30, 30),  makeAnchor(100, 120, 30)],
+        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)],
+      },
+    };
+  }
+  return {
+    Surfaces: {
+      lightness:  () => [makeAnchor(0, 15, 5),   makeAnchor(100, 47, 5)],
+      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
+    },
+    Borders: {
+      lightness:  () => [makeAnchor(0, 25, 5),   makeAnchor(100, 80, 5)],
+      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)],
+    },
+    Text: {
+      lightness:  () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
+      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)],
+    },
+  };
+}
+
+export const defaultScaleCurves: ScaleCurveDefaults = scaleCurveDefaults('dark');
 
-function paletteStepKey(label: string): string { return `Palette-${label}`; }
-function stepKey(scaleTitle: string, stepName: string): string { return `${scaleTitle}-${stepName}`; }
+export function paletteStepKey(label: string): string { return `Palette-${label}`; }
+export function stepKey(scaleTitle: string, stepName: string): string { return `${scaleTitle}-${stepName}`; }
 
-function stepIndexToX(index: number, total: number): number {
-  return total > 1 ? (index / (total - 1)) * 100 : 50;
+export function stepIndexToX(index: number): number {
+  return (index / (PALETTE_STEPS.length - 1)) * 100;
 }
 
-function computePaletteColor(
+export function scaleStepToX(step: Step, scale: Scale): number {
+  const idx = scale.steps.indexOf(step);
+  return scale.steps.length > 1 ? (idx / (scale.steps.length - 1)) * 100 : 50;
+}
+
+/**
+ * Typed intermediate representation for a derived CSS-variable value. The
+ * derived-vars map is heterogeneous — colors, but also gradient strings
+ * (`--page-bg`) and keywords (`--page-bg-attachment`) — so derivation and
+ * serialization are split: derivation yields this IR (`palettesToValues`),
+ * `serializeDerivedValue` renders it to a CSS string. `color` carries numeric
+ * OKLCH intent (gamut-clamped at derivation, the projection-only clamp point);
+ * `raw` carries a verbatim CSS string.
+ */
+export type DerivedValue =
+  | { kind: 'color'; l: number; c: number; h: number }
+  | { kind: 'raw'; css: string };
+
+/** The single color → CSS-string projection, and the single clamp point for
+ *  derived color: unclamped stored intent is chroma-reduced into sRGB gamut,
+ *  then serialized (hex this wave; `oklch()` after Part B). Idempotent on the
+ *  already-in-gamut per-step derivation output. `raw` passes through untouched. */
+export function serializeDerivedValue(value: DerivedValue): string {
+  return value.kind === 'raw' ? value.css : oklchToHexClamped(value.l, value.c, value.h);
+}
+
+export function computePaletteOklch(
   index: number,
-  base: string,
+  base: Oklch,
   lightnessCurve: CurveAnchor[],
   saturationCurve: CurveAnchor[],
   curveOffset: Record<string, number>,
-): string {
-  const { c: baseC, h } = hexToOklch(base);
-  const xPos = stepIndexToX(index, PALETTE_STEPS.length);
+): Oklch {
+  const { c: baseC, h } = base;
+  const xPos = stepIndexToX(index);
   const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + (curveOffset.lightness ?? 0))) / 100;
   const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + (curveOffset.saturation ?? 0)) / 100));
   const targetC = baseC * satMul;
-  const clamped = gamutClamp(targetL, targetC, h);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
+  return gamutClamp(targetL, targetC, h);
+}
+
+/** The palette step whose curve lightness is nearest the picked color's L
+ *  (both in curve space, 0–100; `curveOffset` shifts anchor and steps alike,
+ *  so it cancels out of the comparison). */
+export function nearestPaletteStep(lightnessCurve: CurveAnchor[], baseL: number): number {
+  let best = 0;
+  let bestD = Infinity;
+  for (let i = 0; i < PALETTE_STEPS.length; i++) {
+    const d = Math.abs(sampleCurve(lightnessCurve, stepIndexToX(i)) - baseL * 100);
+    if (d < bestD) { bestD = d; best = i; }
+  }
+  return best;
+}
+
+/** Insert an anchor at x, or overwrite one already there (endpoints included).
+ *  Returns the y it displaced so the caller can restore it later. */
+export function setCurveAnchor(curve: CurveAnchor[], x: number, y: number): { curve: CurveAnchor[]; displacedY?: number } {
+  const existing = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
+  if (existing >= 0) {
+    const displacedY = curve[existing].y;
+    return { curve: curve.map((a, i) => (i === existing ? { ...a, x, y } : a)), displacedY };
+  }
+  let insertAt = curve.findIndex((a) => a.x > x);
+  if (insertAt < 0) insertAt = curve.length;
+  return { curve: [...curve.slice(0, insertAt), makeAnchor(x, y, 15), ...curve.slice(insertAt)] };
 }
 
-function computeDerivedColor(
-  step: ScaleStep,
-  base: string,
+/** Undo a placement at x: restore the displaced y when one was recorded,
+ *  remove the anchor when the placement created it. Endpoints are never
+ *  removed — a curve needs its boundaries. */
+export function liftCurveAnchor(curve: CurveAnchor[], x: number, displacedY?: number): CurveAnchor[] {
+  const idx = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
+  if (idx < 0) return curve;
+  if (displacedY !== undefined) return curve.map((a, i) => (i === idx ? { ...a, y: displacedY } : a));
+  if (idx === 0 || idx === curve.length - 1) return curve;
+  return curve.filter((_, i) => i !== idx);
+}
+
+/**
+ * Place the base color in the ramp: pin a lightness anchor (base L) and a
+ * saturation anchor (multiplier 100) at the step whose lightness is nearest
+ * the base L, so the picked color renders verbatim at that step. Placement
+ * is measured against the curve with the previous placement lifted out —
+ * the pinned anchor equals base L at its own x by construction, so measuring
+ * against it would be circular and the anchor could never move. Runs inside
+ * the same store mutation as the base-color write; mutates `cfg` in place.
+ */
+export function syncBaseAnchor(cfg: PaletteConfig): void {
+  if (cfg.anchorToBase === false) return;
+  const prev = cfg.anchorPlacement;
+  let lCurve = cfg.lightnessCurve;
+  let sCurve = cfg.saturationCurve;
+  if (prev) {
+    const prevX = stepIndexToX(prev.step);
+    lCurve = liftCurveAnchor(lCurve, prevX, prev.displacedL);
+    sCurve = liftCurveAnchor(sCurve, prevX, prev.displacedS);
+  }
+  const step = nearestPaletteStep(lCurve, cfg.baseColor.l);
+  const x = stepIndexToX(step);
+  const l = setCurveAnchor(lCurve, x, cfg.baseColor.l * 100);
+  const s = setCurveAnchor(sCurve, x, 100);
+  cfg.lightnessCurve = l.curve;
+  cfg.saturationCurve = s.curve;
+  cfg.anchorPlacement = { step, displacedL: l.displacedY, displacedS: s.displacedY };
+}
+
+/** Toggle-off: lift the placement out of both curves and drop the flag. */
+export function clearBaseAnchor(cfg: PaletteConfig): void {
+  const prev = cfg.anchorPlacement;
+  if (prev) {
+    const x = stepIndexToX(prev.step);
+    cfg.lightnessCurve = liftCurveAnchor(cfg.lightnessCurve, x, prev.displacedL);
+    cfg.saturationCurve = liftCurveAnchor(cfg.saturationCurve, x, prev.displacedS);
+    cfg.anchorPlacement = undefined;
+  }
+  cfg.anchorToBase = false;
+}
+
+export function computeDerivedOklch(
+  step: Step,
+  base: Oklch,
   scaleTitle: string,
   scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>,
   curveOffset: Record<string, number>,
-): string {
+): Oklch {
   const scale = SCALES.find((s) => s.title === scaleTitle)!;
-  const idx = scale.steps.indexOf(step);
-  const xPos = stepIndexToX(idx, scale.steps.length);
-  const defs = defaultScaleCurves[scaleTitle as keyof typeof defaultScaleCurves];
+  const xPos = scaleStepToX(step, scale);
+  const defs = defaultScaleCurves[scaleTitle];
   const lCurve = scaleCurves[scaleTitle]?.lightness ?? defs.lightness();
   const sCurve = scaleCurves[scaleTitle]?.saturation ?? defs.saturation();
   const lOff = curveOffset[`${scaleTitle}-lightness`] ?? 0;
   const sOff = curveOffset[`${scaleTitle}-saturation`] ?? 0;
-  const { l: baseL, c: baseC, h: baseH } = hexToOklch(base);
+  const { l: baseL, c: baseC, h: baseH } = base;
   let targetL: number;
   if (scale.isText) {
     const lMul = Math.max(0, Math.min(2, (sampleCurve(lCurve, xPos) + lOff) / 100));
@@ -155,8 +314,7 @@ function computeDerivedColor(
   }
   const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
   const targetC = baseC * satMul;
-  const clamped = gamutClamp(targetL, targetC, baseH);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
+  return gamutClamp(targetL, targetC, baseH);
 }
 
 export function scaleToCssVar(scaleTitle: string, stepName: string, cssNamespace: string | null): string | null {
@@ -176,8 +334,8 @@ export function scaleToCssVar(scaleTitle: string, stepName: string, cssNamespace
   return null;
 }
 
-export function derivePaletteVars(spec: PaletteSpec, config: PaletteConfig | undefined): Record<string, string> {
-  const out: Record<string, string> = {};
+export function derivePaletteValues(spec: PaletteSpec, config: PaletteConfig | undefined): Record<string, DerivedValue> {
+  const out: Record<string, DerivedValue> = {};
   if (!config) return out;
 
   const baseColor = config.baseColor ?? spec.initialColor;
@@ -189,25 +347,36 @@ export function derivePaletteVars(spec: PaletteSpec, config: PaletteConfig | und
 
   PALETTE_STEPS.forEach((ps, index) => {
     const k = paletteStepKey(ps.label);
-    const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
-    const effective = (k in overrides) ? overrides[k] : hex;
-    out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
+    // Overrides are numeric OKLCH intent; pass straight through as color-kind.
+    const value: DerivedValue = (k in overrides)
+      ? { kind: 'color', ...overrides[k] }
+      : { kind: 'color', ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset) };
+    out[`--color-${spec.cssNamespace}-${ps.label}`] = value;
   });
 
   for (const scale of SCALES) {
     for (const step of scale.steps) {
       const k = stepKey(scale.title, step.name);
-      const hex = (k in overrides)
-        ? overrides[k]
-        : computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
+      const value: DerivedValue = (k in overrides)
+        ? { kind: 'color', ...overrides[k] }
+        : { kind: 'color', ...computeDerivedOklch(step, baseColor, scale.title, scaleCurves, curveOffset) };
       const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
-      if (varName) out[varName] = hex;
+      if (varName) out[varName] = value;
     }
   }
 
+  // `--text-inverted` is the derived flip of primary — mirrored L, same
+  // hue/chroma — pulled inside the guard band so a near-white primary yields
+  // ≈ #111 rather than pure black. Only Neutral emits `--text-primary`, so
+  // its presence gates this to the Neutral palette.
+  const textPrimary = out['--text-primary'];
+  if (textPrimary?.kind === 'color') {
+    const mirroredL = Math.max(BW_GUARD_MIN_L, Math.min(BW_GUARD_MAX_L, 1 - textPrimary.l));
+    out['--text-inverted'] = { kind: 'color', ...gamutClamp(mirroredL, textPrimary.c, textPrimary.h) };
+  }
+
   if (spec.emptySelector) {
     const emptyMode = config.emptyMode ?? 'solid';
-    const emptyStep = config.emptyStep ?? '850';
     const gradientStyle = config.gradientStyle ?? 'linear';
     const gradientAngle = config.gradientAngle ?? 180;
     const gradientReverse = config.gradientReverse ?? false;
@@ -218,15 +387,23 @@ export function derivePaletteVars(spec: PaletteSpec, config: PaletteConfig | und
     ];
 
     if (emptyMode === 'solid') {
-      const stepHex = out[`--color-${spec.cssNamespace}-${emptyStep}`];
-      if (stepHex) out['--page-bg'] = stepHex;
-      out['--page-bg-attachment'] = 'scroll';
+      // The solid page background is the base color itself, not a selected
+      // step: the base anchor already renders it verbatim in the ramp, so a
+      // separate spot selection could only disagree with it.
+      out['--page-bg'] = { kind: 'color', ...baseColor };
+      out['--page-bg-attachment'] = { kind: 'raw', css: 'scroll' };
     } else {
+      // `--page-bg` is a raw kind composed from the already-serialized step
+      // colors — the gradient string is a projection, not a basis value.
       const sortedStops = [...gradientStops].sort((a, b) =>
         gradientReverse ? b.position - a.position : a.position - b.position,
       );
       const stopsCss = sortedStops
-        .map((s) => `${out[`--color-${spec.cssNamespace}-${s.paletteLabel}`] ?? '#000000'} ${s.position}%`)
+        .map((s) => {
+          const stopValue = out[`--color-${spec.cssNamespace}-${s.paletteLabel}`];
+          const hex = stopValue ? serializeDerivedValue(stopValue) : '#000000';
+          return `${hex} ${s.position}%`;
+        })
         .join(', ');
       let gradient: string;
       switch (gradientStyle) {
@@ -234,18 +411,34 @@ export function derivePaletteVars(spec: PaletteSpec, config: PaletteConfig | und
         case 'conic':  gradient = `conic-gradient(from ${gradientAngle}deg, ${stopsCss})`; break;
         default:       gradient = `linear-gradient(${gradientAngle}deg, ${stopsCss})`;
       }
-      out['--page-bg'] = gradient;
-      out['--page-bg-attachment'] = gradientSize === 'window' ? 'fixed' : 'scroll';
+      out['--page-bg'] = { kind: 'raw', css: gradient };
+      out['--page-bg-attachment'] = { kind: 'raw', css: gradientSize === 'window' ? 'fixed' : 'scroll' };
     }
   }
 
   return out;
 }
 
-export function palettesToVars(palettes: Record<string, PaletteConfig>): Record<string, string> {
+export function derivePaletteVars(spec: PaletteSpec, config: PaletteConfig | undefined): Record<string, string> {
   const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(derivePaletteValues(spec, config))) {
+    out[k] = serializeDerivedValue(v);
+  }
+  return out;
+}
+
+export function palettesToValues(palettes: Record<string, PaletteConfig>): Record<string, DerivedValue> {
+  const out: Record<string, DerivedValue> = {};
   for (const spec of PALETTE_SPECS) {
-    Object.assign(out, derivePaletteVars(spec, palettes[spec.label]));
+    Object.assign(out, derivePaletteValues(spec, palettes[spec.label]));
+  }
+  return out;
+}
+
+export function palettesToVars(palettes: Record<string, PaletteConfig>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(palettesToValues(palettes))) {
+    out[k] = serializeDerivedValue(v);
   }
   return out;
 }
@@ -294,8 +487,10 @@ export function reconcilePalettesFromCssVars(
     if (current._imported === true) {
       const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
       if (anchorHex && HEX_RE.test(anchorHex.trim())) {
-        const hex = anchorHex.trim();
-        next[spec.label] = { ...current, baseColor: hex, _imported: false };
+        // Input boundary: the imported cssVariables anchor is a hex string;
+        // parse it to the OKLCH basis exactly once, here.
+        next[spec.label] = { ...current, baseColor: hexToOklch(anchorHex.trim()), _imported: false };
+        syncBaseAnchor(next[spec.label]);
         snapped.add(spec.label);
       } else {
         // No anchor in cssVariables to snap to — flag has nothing to do; clear