npm - @motion-proto/live-tokens - Versions diffs - 0.46.1 → 0.47.1 - Mend

@motion-proto/live-tokens 0.46.1 → 0.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/CHANGELOG.md +63 -0
package/dist-plugin/index.cjs +52 -2
package/dist-plugin/index.js +52 -2
package/package.json +1 -1
package/src/editor/core/palettes/paletteDerivation.ts +45 -3
package/src/editor/core/store/paletteFocus.ts +26 -0
package/src/editor/ui/BezierCurveEditor.svelte +11 -4
package/src/editor/ui/ColorEditPanel.svelte +1 -1
package/src/editor/ui/PaletteEditor.svelte +79 -13
package/src/editor/ui/UIMenuButton.svelte +14 -0
package/src/editor/ui/UIPillButton.svelte +7 -2
package/src/editor/ui/colors/ColorWheel.svelte +34 -1
package/src/editor/ui/colors/ColorsTab.svelte +16 -4
package/src/editor/ui/colors/HarmonyAxesList.svelte +44 -9
package/src/editor/ui/colors/paletteBaseColor.ts +30 -10
package/src/editor/ui/curveEngine.ts +48 -0
package/src/editor/ui/palette/PaletteBase.svelte +81 -42
package/src/editor/ui/palette/PaletteJumpButton.svelte +44 -0
package/src/editor/ui/palette/ScaleCurveEditor.svelte +4 -1
package/src/live-tokens/data/themes/default.json +571 -461
package/src/live-tokens/data/tokens.generated.css +118 -118

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,68 @@
 # Changelog
+## 0.47.1 — Straightened curves
+### Fixed
+- **`setCurveAnchor` could insert a handle that overran its neighbour.**
+  A fresh anchor's tangent handles were sized from the gap alone, so an
+  interior anchor placed past roughly the curve's midpoint could leave the
+  new segment non-monotone in x — the one thing `sampleCurve`'s binary
+  search cannot survive. Insertion now scales the neighbours' facing
+  handles by the share of the gap each keeps, the same rule de Casteljau
+  uses, and gives the new anchor only the room left over; `liftCurveAnchor`
+  reverses it on removal.
+- **The default theme's curves are regenerated to their endpoints.** The
+  shipped `default.json` carried curves hand-dragged in the editor: two
+  palette-lightness curves had handles overrunning an interior anchor
+  (the bug above, already on disk), and a text-saturation curve overshot
+  its own endpoint. All 80 curves are now straight interpolations between
+  their designed endpoint values, with the one base-color placement per
+  family per curve kept and pinned to its historical step. Full audit in
+  `docs/plans/default-theme-curve-audit.md`.
+## 0.47.0 — Colors and Tokens hand palettes to each other
+### Added
+- **Jump buttons link the two palette surfaces.** `PaletteJumpButton` sits in
+  the Colors view's Palette header (`Edit`, into Tokens) and on every Tokens
+  palette label (`Wheel`, into Colors). The new `paletteFocus` store carries the
+  family across: `selectedPalette` is now the Colors view's selection, so the
+  wheel is already showing the handed-over family when the switch lands, and the
+  one-shot `pendingPaletteFocus` opens the matching Tokens editor and scrolls it
+  into view. From the standalone Colors page the jump also navigates, since that
+  page has no Tokens surface to flip to.
+- **`On assign` picks which hue survives an axis assignment.** A segmented
+  control above the axes list chooses between `Adopt swatch`, which moves the
+  axis to the color's hue and leaves the harmony custom, and `Adopt axis`, which
+  repaints the color onto the hue the axis already holds. Adopting the axis
+  moves no axis geometry, so an applied harmony mode survives the assignment.
+  `bindFamilyToAxis` takes the mode as a third argument and reconciles a traded
+  occupant the same way.
+- **The base color anchor unlocks from the curve.** Double-clicking the locked
+  anchor in the lightness or saturation curve raises a confirm notice, and
+  accepting clears `anchorToBase`. The anchor carries a `<title>` saying so.
+### Changed
+- **The Tokens base color panel stays open with the curve editors.** Opening a
+  palette's controls pins `ColorEditPanel` in live-apply mode (no confirm or
+  cancel session) and marks the header swatch active, so base edits and curve
+  edits are visible at once.
+- **`UIMenuButton` portals its menu to the enclosing `.editor-page`.** A dimmed
+  ancestor's opacity faded the popup and showed the page through it, which fixed
+  positioning alone cannot escape. The `--ui-*` tokens are scoped to
+  `.editor-page`, so the menu reparents there rather than to `<body>`.
+- **The axes list drops its per-row role column.** `Anchor` names the first row
+  from a caption above the list, so no row reserves 4rem of dead space for a
+  word only one of them carries.
 ## 0.46.1 — The Colors view collapses on its own width
 ### Fixed

package/dist-plugin/index.cjs CHANGED Viewed

@@ -164,6 +164,25 @@ function gamutClamp(l, c, h) {
 function makeAnchor(x, y, tangentLen = 15) {
   return { x, y, inDx: -tangentLen, inDy: 0, outDx: tangentLen, outDy: 0 };
 }
+var HANDLE_SPAN = 1 / 3;
+function tangentSlope(prev, x, y, next) {
+  const hPrev = prev ? x - prev.x : 0;
+  const hNext = next ? next.x - x : 0;
+  const dPrev = hPrev > 0 ? (y - prev.y) / hPrev : null;
+  const dNext = hNext > 0 ? (next.y - y) / hNext : null;
+  if (dPrev === null) return dNext ?? 0;
+  if (dNext === null) return dPrev;
+  if (dPrev * dNext <= 0) return 0;
+  const wPrev = 2 * hNext + hPrev;
+  const wNext = hNext + 2 * hPrev;
+  return (wPrev + wNext) / (wPrev / dPrev + wNext / dNext);
+}
+function tangentAnchor(x, y, prev, next) {
+  const m = tangentSlope(prev, x, y, next);
+  const inDx = prev ? -(x - prev.x) * HANDLE_SPAN : 0;
+  const outDx = next ? (next.x - x) * HANDLE_SPAN : 0;
+  return { x, y, inDx, inDy: m * inDx, outDx, outDy: m * outDx };
+}
 function evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, t) {
   const u = 1 - t, u2 = u * u, u3 = u2 * u;
   const t2 = t * t, t3 = t2 * t;
@@ -338,14 +357,45 @@ function setCurveAnchor(curve, x, y) {
   }
   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)] };
+  const prev = curve[insertAt - 1] ?? null;
+  const next = curve[insertAt] ?? null;
+  const out = [...curve];
+  if (prev && next) {
+    const span = next.x - prev.x;
+    out[insertAt - 1] = scaleOutHandle(prev, (x - prev.x) / span);
+    out[insertAt] = scaleInHandle(next, (next.x - x) / span);
+  }
+  out.splice(insertAt, 0, fitBetween(tangentAnchor(x, y, prev, next), out[insertAt - 1] ?? null, out[insertAt] ?? null));
+  return { curve: out };
+}
+var scaleOutHandle = (a, k) => ({ ...a, outDx: a.outDx * k, outDy: a.outDy * k });
+var scaleInHandle = (a, k) => ({ ...a, inDx: a.inDx * k, inDy: a.inDy * k });
+function fitBetween(a, prev, next) {
+  let out = a;
+  if (prev) {
+    const room = a.x - (prev.x + prev.outDx);
+    if (room < -out.inDx) out = scaleInHandle(out, room <= 0 ? 0 : room / -out.inDx);
+  }
+  if (next) {
+    const room = next.x + next.inDx - a.x;
+    if (room < out.outDx) out = scaleOutHandle(out, room <= 0 ? 0 : room / out.outDx);
+  }
+  return out;
 }
 function liftCurveAnchor(curve, x, displacedY) {
   const idx = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
   if (idx < 0) return curve;
   if (displacedY !== void 0) 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);
+  const out = curve.filter((_, i) => i !== idx);
+  const prev = curve[idx - 1];
+  const next = curve[idx + 1];
+  if (prev && next) {
+    const span = next.x - prev.x;
+    out[idx - 1] = scaleOutHandle(prev, span / (curve[idx].x - prev.x));
+    out[idx] = scaleInHandle(next, span / (next.x - curve[idx].x));
+  }
+  return out;
 }
 function syncBaseAnchor(cfg) {
   if (cfg.anchorToBase === false) return;

package/dist-plugin/index.js CHANGED Viewed

@@ -123,6 +123,25 @@ function gamutClamp(l, c, h) {
 function makeAnchor(x, y, tangentLen = 15) {
   return { x, y, inDx: -tangentLen, inDy: 0, outDx: tangentLen, outDy: 0 };
 }
+var HANDLE_SPAN = 1 / 3;
+function tangentSlope(prev, x, y, next) {
+  const hPrev = prev ? x - prev.x : 0;
+  const hNext = next ? next.x - x : 0;
+  const dPrev = hPrev > 0 ? (y - prev.y) / hPrev : null;
+  const dNext = hNext > 0 ? (next.y - y) / hNext : null;
+  if (dPrev === null) return dNext ?? 0;
+  if (dNext === null) return dPrev;
+  if (dPrev * dNext <= 0) return 0;
+  const wPrev = 2 * hNext + hPrev;
+  const wNext = hNext + 2 * hPrev;
+  return (wPrev + wNext) / (wPrev / dPrev + wNext / dNext);
+}
+function tangentAnchor(x, y, prev, next) {
+  const m = tangentSlope(prev, x, y, next);
+  const inDx = prev ? -(x - prev.x) * HANDLE_SPAN : 0;
+  const outDx = next ? (next.x - x) * HANDLE_SPAN : 0;
+  return { x, y, inDx, inDy: m * inDx, outDx, outDy: m * outDx };
+}
 function evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, t) {
   const u = 1 - t, u2 = u * u, u3 = u2 * u;
   const t2 = t * t, t3 = t2 * t;
@@ -297,14 +316,45 @@ function setCurveAnchor(curve, x, y) {
   }
   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)] };
+  const prev = curve[insertAt - 1] ?? null;
+  const next = curve[insertAt] ?? null;
+  const out = [...curve];
+  if (prev && next) {
+    const span = next.x - prev.x;
+    out[insertAt - 1] = scaleOutHandle(prev, (x - prev.x) / span);
+    out[insertAt] = scaleInHandle(next, (next.x - x) / span);
+  }
+  out.splice(insertAt, 0, fitBetween(tangentAnchor(x, y, prev, next), out[insertAt - 1] ?? null, out[insertAt] ?? null));
+  return { curve: out };
+}
+var scaleOutHandle = (a, k) => ({ ...a, outDx: a.outDx * k, outDy: a.outDy * k });
+var scaleInHandle = (a, k) => ({ ...a, inDx: a.inDx * k, inDy: a.inDy * k });
+function fitBetween(a, prev, next) {
+  let out = a;
+  if (prev) {
+    const room = a.x - (prev.x + prev.outDx);
+    if (room < -out.inDx) out = scaleInHandle(out, room <= 0 ? 0 : room / -out.inDx);
+  }
+  if (next) {
+    const room = next.x + next.inDx - a.x;
+    if (room < out.outDx) out = scaleOutHandle(out, room <= 0 ? 0 : room / out.outDx);
+  }
+  return out;
 }
 function liftCurveAnchor(curve, x, displacedY) {
   const idx = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
   if (idx < 0) return curve;
   if (displacedY !== void 0) 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);
+  const out = curve.filter((_, i) => i !== idx);
+  const prev = curve[idx - 1];
+  const next = curve[idx + 1];
+  if (prev && next) {
+    const span = next.x - prev.x;
+    out[idx - 1] = scaleOutHandle(prev, span / (curve[idx].x - prev.x));
+    out[idx] = scaleInHandle(next, span / (next.x - curve[idx].x));
+  }
+  return out;
 }
 function syncBaseAnchor(cfg) {
   if (cfg.anchorToBase === false) return;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.46.1",
+  "version": "0.47.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

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

@@ -14,7 +14,7 @@
  */
 import { hexToOklch, oklchToHexClamped, gamutClamp, type Oklch } from './oklch';
-import { type CurveAnchor, sampleCurve, makeAnchor } from '../../ui/curveEngine';
+import { type CurveAnchor, sampleCurve, makeAnchor, tangentAnchor } from '../../ui/curveEngine';
 import type { PaletteConfig } from '../themes/themeTypes';
 export interface PaletteSpec {
@@ -235,7 +235,41 @@ export function setCurveAnchor(curve: CurveAnchor[], x: number, y: number): { cu
   }
   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)] };
+  const prev = curve[insertAt - 1] ?? null;
+  const next = curve[insertAt] ?? null;
+  const out = [...curve];
+  // The neighbours aimed their handles across a gap this insert has just split,
+  // so a handle that was in bounds can now reach clean past the new anchor and
+  // leave the segment non-monotone in x, which is the one thing sampleCurve
+  // cannot survive. Scale them by the share of the gap each one keeps: the same
+  // rule de Casteljau uses, so the curve holds its shape, and exactly invertible
+  // by liftCurveAnchor when the placement moves off again.
+  if (prev && next) {
+    const span = next.x - prev.x;
+    out[insertAt - 1] = scaleOutHandle(prev, (x - prev.x) / span);
+    out[insertAt] = scaleInHandle(next, (next.x - x) / span);
+  }
+  out.splice(insertAt, 0, fitBetween(tangentAnchor(x, y, prev, next), out[insertAt - 1] ?? null, out[insertAt] ?? null));
+  return { curve: out };
+}
+const scaleOutHandle = (a: CurveAnchor, k: number): CurveAnchor => ({ ...a, outDx: a.outDx * k, outDy: a.outDy * k });
+const scaleInHandle = (a: CurveAnchor, k: number): CurveAnchor => ({ ...a, inDx: a.inDx * k, inDy: a.inDy * k });
+/** Shorten a freshly derived anchor's handles to whatever room its neighbours
+ *  leave. Only the new anchor gives ground: its handles carry no intent yet,
+ *  and a stored handle is someone's edit. */
+function fitBetween(a: CurveAnchor, prev: CurveAnchor | null, next: CurveAnchor | null): CurveAnchor {
+  let out = a;
+  if (prev) {
+    const room = a.x - (prev.x + prev.outDx);
+    if (room < -out.inDx) out = scaleInHandle(out, room <= 0 ? 0 : room / -out.inDx);
+  }
+  if (next) {
+    const room = next.x + next.inDx - a.x;
+    if (room < out.outDx) out = scaleOutHandle(out, room <= 0 ? 0 : room / out.outDx);
+  }
+  return out;
 }
 /** Undo a placement at x: restore the displaced y when one was recorded,
@@ -246,7 +280,15 @@ export function liftCurveAnchor(curve: CurveAnchor[], x: number, displacedY?: nu
   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);
+  const out = curve.filter((_, i) => i !== idx);
+  const prev = curve[idx - 1];
+  const next = curve[idx + 1];
+  if (prev && next) {
+    const span = next.x - prev.x;
+    out[idx - 1] = scaleOutHandle(prev, span / (curve[idx].x - prev.x));
+    out[idx] = scaleInHandle(next, span / (next.x - curve[idx].x));
+  }
+  return out;
 }
 /**

package/src/editor/core/store/paletteFocus.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { get, writable } from 'svelte/store';
+import { setEditorView } from './editorViewStore';
+import { navigate, route } from '../routing/router';
+import { DEFAULT_COLORS_PATH, DEFAULT_EDITOR_PATH } from '../routing/ownedRoutes';
+/** The palette family the Colors view has selected. Shared so the Tokens view
+ *  can hand a family over to the wheel. */
+export const selectedPalette = writable<string>('Brand');
+/** One-shot: the family whose Tokens-view editor should open and scroll into
+ *  view. The `PaletteEditor` that matches clears it. */
+export const pendingPaletteFocus = writable<string | null>(null);
+export function openPaletteInWheel(label: string) {
+  selectedPalette.set(label);
+  setEditorView('colors');
+}
+export function openPaletteInTokens(label: string) {
+  selectedPalette.set(label);
+  pendingPaletteFocus.set(label);
+  setEditorView('tokens');
+  // The standalone Colors page has no Tokens surface to switch to, so the view
+  // flip alone would go nowhere.
+  if (get(route) === DEFAULT_COLORS_PATH) navigate(DEFAULT_EDITOR_PATH);
+}

package/src/editor/ui/BezierCurveEditor.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
   import {
     type CurveAnchor, type CurveConfig,
     CURVE_H, CURVE_PAD_Y, CURVE_Y_PAD,
-    isCornerAnchor, curveXToSvg, curveYToSvg, svgToX, svgToY,
+    isCornerAnchor, tangentAnchor, curveXToSvg, curveYToSvg, svgToX, svgToY,
     evalBezier, buildCurvePath, curveTemplates,
     serializeCurve, deserializeCurve,
   } from './curveEngine';
@@ -20,6 +20,7 @@
     lockedAnchorIndex?: number | null;
     onAnchorsChange?: (anchors: CurveAnchor[]) => void;
     onOffsetChange?: (offset: number) => void;
+    onLockedAnchorUnlock?: (() => void) | null;
   }
   let {
@@ -31,7 +32,8 @@
     defaultAnchors = null,
     lockedAnchorIndex = null,
     onAnchorsChange = () => {},
-    onOffsetChange = () => {}
+    onOffsetChange = () => {},
+    onLockedAnchorUnlock = null
   }: Props = $props();
   function resetToDefault() {
@@ -189,7 +191,7 @@
     const a = anchors[index];
     const updated = [...anchors];
     if (isCornerAnchor(a)) {
-      updated[index] = { ...a, inDx: -15, inDy: 0, outDx: 15, outDy: 0 };
+      updated[index] = tangentAnchor(a.x, a.y, anchors[index - 1] ?? null, anchors[index + 1] ?? null);
     } else {
       updated[index] = { ...a, inDx: 0, inDy: 0, outDx: 0, outDy: 0 };
     }
@@ -380,7 +382,12 @@
               <path
                 d="M{curveXToSvg(pt.x, w, padX)},{curveYToSvg(pt.y, cfg) - 6} l5,6 l-5,6 l-5,-6 Z"
                 class="curve-handle locked"
-              />
+                ondblclick={onLockedAnchorUnlock ? stopPropagation(onLockedAnchorUnlock) : undefined}
+              >
+                {#if onLockedAnchorUnlock}
+                  <title>Base color anchor. Double-click to unlock.</title>
+                {/if}
+              </path>
             {:else if isCornerAnchor(pt)}
               <rect
                 x={curveXToSvg(pt.x, w, padX) - 4} y={curveYToSvg(pt.y, cfg) - 4}

package/src/editor/ui/ColorEditPanel.svelte CHANGED Viewed

@@ -340,7 +340,7 @@
      regardless of row content; the row wrappers dissolve into the grid. */
   .hsl-sliders {
     display: grid;
-    grid-template-columns: 2.5rem minmax(6rem, 1fr) 3.5rem 0.75rem;
+    grid-template-columns: 1.25rem minmax(6rem, 1fr) 3.5rem 0.75rem;
     gap: var(--ui-space-6) var(--ui-space-8);
     align-items: center;
   }

package/src/editor/ui/PaletteEditor.svelte CHANGED Viewed

@@ -8,6 +8,7 @@
   import GradientStopEditor from './palette/GradientStopEditor.svelte';
   import ScaleCurveEditor from './palette/ScaleCurveEditor.svelte';
   import PaletteBase from './palette/PaletteBase.svelte';
+  import PaletteJumpButton from './palette/PaletteJumpButton.svelte';
   import { type EditingState, idleState, BASE_KEY, isEditingBase as isBaseEdit } from './palette/paletteEditorState';
   import { dockTrackTemplate } from './palette/dockMagnify';
   import {
@@ -28,6 +29,7 @@
   // 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 { pendingPaletteFocus } from '../core/store/paletteFocus';
   import { showCopyPopover } from './copyPopover';
   interface Props {
@@ -98,6 +100,16 @@
   let showDerived = $state(false);
   let paletteEditorOpen = $state(false);
+  let rootEl: HTMLElement | undefined = $state();
+  // Arriving from the Colors view's Edit button: open this family's controls and
+  // bring it into view, since the Tokens view stacks every family.
+  $effect(() => {
+    if ($pendingPaletteFocus !== label) return;
+    pendingPaletteFocus.set(null);
+    paletteEditorOpen = true;
+    tick().then(() => rootEl?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+  });
   function setLightnessCurve(a: CurveAnchor[]) { edit('lightnessCurve', a); }
   function setSaturationCurve(a: CurveAnchor[]) { edit('saturationCurve', a); }
@@ -133,6 +145,12 @@
     });
   }
+  let anchorUnlockPrompt = $state(false);
+  function confirmBaseAnchorUnlock() {
+    setAnchorToBase(false);
+    anchorUnlockPrompt = false;
+  }
   function startBaseEdit() {
     if (editing.kind === 'editingBase') { confirmEdit(); return; }
@@ -466,7 +484,7 @@
   });
 </script>
-<div class="palette-editor" style="--editor-base: {toHex(baseColor)}">
+<div class="palette-editor" bind:this={rootEl} style="--editor-base: {toHex(baseColor)}">
   <PaletteBase
     {label}
     {displayLabel}
@@ -476,6 +494,7 @@
     {anchorStepLabel}
     {isEditingBase}
     {panelOpen}
+    pinnedOpen={paletteEditorOpen}
     {editingColor}
     {editPanelTitle}
     {copiedKey}
@@ -502,6 +521,7 @@
             <span>Gradient</span>
           </label>
         {/if}
+        <PaletteJumpButton family={label} {displayLabel} target="wheel" />
         <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
         <UIPillButton size="compact" variant="outline" onclick={() => paletteEditorOpen = !paletteEditorOpen}>
           {paletteEditorOpen ? 'Close' : 'Edit'}
@@ -533,7 +553,9 @@
               onkeydown={(e) => e.key === 'Enter' && handlePaletteClick({ label: ps.label, lightness: ps.lightness, index: ps.index })}
             >
               {#if ps.key in overrides}
-                <span class="override-dot" title="Palette override"></span>
+                <span class="override-lock" title="Palette override: this step is set by hand, not derived from the curve">
+                  <i class="fas fa-lock" aria-hidden="true"></i>
+                </span>
               {/if}
             </div>
             <button
@@ -552,6 +574,16 @@
         </div>
       {#if paletteEditorOpen}
         <div class="curve-grid-span" style="grid-column: 2 / {paletteStepLightness.length + 2}">
+          {#if anchorUnlockPrompt && anchorToBase}
+            <div class="anchor-unlock-notice" role="alert">
+              <i class="fas fa-triangle-exclamation" aria-hidden="true"></i>
+              <span>Unlock the base color anchor? The palette will no longer pass through the base color.</span>
+              <div class="anchor-unlock-actions">
+                <UIPillButton size="compact" onclick={confirmBaseAnchorUnlock}>Unlock</UIPillButton>
+                <UIPillButton size="compact" variant="outline" onclick={() => anchorUnlockPrompt = false}>Cancel</UIPillButton>
+              </div>
+            </div>
+          {/if}
           <ScaleCurveEditor
             curveKey="lightness"
             anchors={lightnessCurve}
@@ -560,6 +592,7 @@
             defaults={DEFAULT_PALETTE_LIGHTNESS()}
             offset={curveOffset['lightness'] ?? 0}
             lockedAnchorIndex={lockedLightnessIdx}
+            onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
             onAnchorsChange={setLightnessCurve}
             onOffsetChange={handleOffset}
           />
@@ -571,6 +604,7 @@
             defaults={DEFAULT_PALETTE_SATURATION()}
             offset={curveOffset['saturation'] ?? 0}
             lockedAnchorIndex={lockedSaturationIdx}
+            onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
             onAnchorsChange={setSaturationCurve}
             onOffsetChange={handleOffset}
           />
@@ -834,7 +868,7 @@
     align-items: start;
     justify-content: start;
     min-width: 0;
-    max-width: calc(var(--swatch-cols) * 4rem + (var(--swatch-cols) - 1) * var(--swatch-gap, var(--ui-space-4)));
+    max-width: calc(var(--swatch-cols) * 4.5rem + (var(--swatch-cols) - 1) * var(--swatch-gap, var(--ui-space-4)));
   }
   .curve-grid-span {
@@ -843,9 +877,31 @@
     gap: var(--ui-space-8);
   }
+  .anchor-unlock-notice {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-6) var(--ui-space-12);
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+  }
+  .anchor-unlock-notice i {
+    color: var(--ui-text-tertiary);
+  }
+  .anchor-unlock-actions {
+    display: flex;
+    gap: var(--ui-space-4);
+    margin-left: auto;
+  }
   .swatch.gray-swatch {
     width: 100%;
-    height: calc(4rem + var(--ui-space-2));
+    height: calc(4.75rem + 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
@@ -876,19 +932,29 @@
      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));
+    height: calc(5.75rem + var(--ui-space-2));
     margin-bottom: 0;
   }
-  .override-dot {
+  /* An overridden step is held by hand and no longer follows the curve, which a
+     lock says and a dot could not. The badge carries its own dark disc: the
+     ramp runs from near-white to near-black, so no single glyph colour reads
+     against every swatch it can land on. */
+  .override-lock {
     position: absolute;
-    top: 3px;
-    right: 3px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--ui-text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.6);
+    top: var(--ui-space-4);
+    right: var(--ui-space-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: var(--ui-radius-full);
+    background: rgba(0, 0, 0, 0.55);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
+    color: #fff;
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
   }
   .empty-mode-toggle {

package/src/editor/ui/UIMenuButton.svelte CHANGED Viewed

@@ -97,6 +97,19 @@
     document.removeEventListener('mousedown', onDocumentMousedown, true);
   });
+  /* Reparented out of the row: a trigger's surroundings can carry opacity
+     (dimmed rows do), which fades every descendant and would show the page
+     through the popup. Fixed positioning alone cannot escape that.
+     The host is the enclosing .editor-page, not <body>: every --ui-* token is
+     scoped to it, so a popup parked outside renders with no background at all.
+     Reparenting takes the node out of the range the component tears down, so
+     removal is the action's to do: a menu open when its trigger disappears
+     (selecting a family swaps the row's trigger) would otherwise be stranded. */
+  function portal(node: HTMLElement) {
+    (node.closest('.editor-page') ?? document.body).appendChild(node);
+    return { destroy: () => node.remove() };
+  }
   /* Fixed positioning escapes any parent overflow/stacking context. Anchored
      below the trigger, right edges aligned; flips above near the viewport
      bottom. Inline visibility rather than a state flag so the item focus that
@@ -179,6 +192,7 @@
     style="min-width: {menuMinWidth};"
     bind:this={menuEl}
     onkeydown={onMenuKeydown}
+    use:portal
   >
     <div class="menu-header" role="presentation">{header}</div>
     {@render children({ close })}

package/src/editor/ui/UIPillButton.svelte CHANGED Viewed

@@ -60,6 +60,7 @@
 <style>
   .ui-pill {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-6, 6px);
@@ -175,9 +176,13 @@
     border-color: rgba(255, 255, 255, 0.18);
   }
-  /* Size: compact — for header bars / chrome rails */
+  /* Size: compact — for header bars / chrome rails. The min-height, not the
+     padding, sets the height: a pill carrying an icon has a taller line box than
+     one with only a label, and equal padding would leave them different heights
+     in the same row. The slack also clears glyphs that draw past their em box. */
   .ui-pill-compact {
     font-size: var(--ui-font-size-sm, 14px);
-    padding: var(--ui-space-2, 2px) var(--ui-space-12, 12px);
+    padding: var(--ui-space-4, 4px) var(--ui-space-12, 12px);
+    min-height: 1.75rem;
   }
 </style>