npm - @motion-proto/live-tokens - Versions diffs - 0.46.0 → 0.47.0 - Mend

@motion-proto/live-tokens 0.46.0 → 0.47.0

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 (13) hide show

package/CHANGELOG.md +62 -0
package/package.json +1 -1
package/src/editor/core/store/paletteFocus.ts +26 -0
package/src/editor/ui/BezierCurveEditor.svelte +9 -2
package/src/editor/ui/PaletteEditor.svelte +53 -1
package/src/editor/ui/UIMenuButton.svelte +22 -0
package/src/editor/ui/colors/ColorsTab.svelte +37 -8
package/src/editor/ui/colors/HarmonyAxesList.svelte +44 -9
package/src/editor/ui/colors/PaletteStepStrip.svelte +33 -15
package/src/editor/ui/colors/paletteBaseColor.ts +30 -10
package/src/editor/ui/palette/PaletteBase.svelte +20 -5
package/src/editor/ui/palette/PaletteJumpButton.svelte +49 -0
package/src/editor/ui/palette/ScaleCurveEditor.svelte +4 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,67 @@
 # Changelog
+## 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
+- **Colors view collapses by pane width, not viewport width.** `.pane` is now a
+  `container: pane / inline-size`, and the harmony columns (`44rem`) and wheel
+  rail (`26rem`) collapse against it. The pane is one column of a two-pane grid,
+  so a wide standalone window narrowed it just as the docked panel does while
+  the old `@media (max-width: 720px)` query never fired.
+- **Swatch rows and derived-scale strips rank instead of shrinking to slivers.**
+  Below `28rem` of their own container both switch from flex to
+  `repeat(auto-fill, minmax(...))` grids, keeping a readable chip width and
+  wrapping into ranks. `auto-fill` holds the tracks steady, so a short last rank
+  never stretches.
+- **`UIMenuButton` anchors correctly inside a container-type ancestor.** A
+  `container-type` (or transformed) ancestor re-parents a fixed element's
+  containing block off the viewport origin, so the menu landed offset from its
+  computed position. It now measures where it landed and re-anchors.
 ## 0.46.0 — Harmony axes are numbered, and you assign them with a picker
 ### Changed

package/package.json CHANGED Viewed

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

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

@@ -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() {
@@ -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/PaletteEditor.svelte CHANGED Viewed

@@ -28,6 +28,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 +99,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 +144,12 @@
     });
   }
+  let anchorUnlockPrompt = $state(false);
+  function confirmBaseAnchorUnlock() {
+    setAnchorToBase(false);
+    anchorUnlockPrompt = false;
+  }
   function startBaseEdit() {
     if (editing.kind === 'editingBase') { confirmEdit(); return; }
@@ -466,7 +483,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 +493,7 @@
     {anchorStepLabel}
     {isEditingBase}
     {panelOpen}
+    pinnedOpen={paletteEditorOpen}
     {editingColor}
     {editPanelTitle}
     {copiedKey}
@@ -552,6 +570,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 +588,7 @@
             defaults={DEFAULT_PALETTE_LIGHTNESS()}
             offset={curveOffset['lightness'] ?? 0}
             lockedAnchorIndex={lockedLightnessIdx}
+            onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
             onAnchorsChange={setLightnessCurve}
             onOffsetChange={handleOffset}
           />
@@ -571,6 +600,7 @@
             defaults={DEFAULT_PALETTE_SATURATION()}
             offset={curveOffset['saturation'] ?? 0}
             lockedAnchorIndex={lockedSaturationIdx}
+            onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
             onAnchorsChange={setSaturationCurve}
             onOffsetChange={handleOffset}
           />
@@ -843,6 +873,28 @@
     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));

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
@@ -120,6 +133,14 @@
     }
     menu.style.left = `${left}px`;
     menu.style.top = `${top}px`;
+    // A container-type (or transformed) ancestor re-parents the fixed
+    // containing block off the viewport origin; measure where the menu landed
+    // and re-anchor so the viewport math above still holds.
+    const placed = menu.getBoundingClientRect();
+    if (Math.abs(placed.left - left) > 0.5 || Math.abs(placed.top - top) > 0.5) {
+      menu.style.left = `${left - (placed.left - left)}px`;
+      menu.style.top = `${top - (placed.top - top)}px`;
+    }
     menu.style.visibility = 'visible';
   }
@@ -171,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/colors/ColorsTab.svelte CHANGED Viewed

@@ -3,6 +3,7 @@
   import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
   import { editorState, beginSliderGesture } from '../../core/store/editorStore';
+  import { selectedPalette } from '../../core/store/paletteFocus';
   import { applyHarmonyToAxes, axisStatuses, HARMONY_ELIGIBLE, type HarmonyMode } from '../../core/palettes/colorHarmony';
   import AxisNumeral from './AxisNumeral.svelte';
   import ColorEditPanel from '../ColorEditPanel.svelte';
@@ -11,6 +12,7 @@
   import ColorStory from './ColorStory.svelte';
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
+  import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
   import {
     setBaseColor,
     setAxisHues,
@@ -21,7 +23,9 @@
   import { HARMONY_DRAG_TYPE, startFamilyDrag } from './harmonyDrag';
   import { maxChroma } from './colorWheelMath';
-  let selected = $state('Brand');
+  // Shared with the Tokens view: its wheel link hands a family over by writing
+  // the store, and this view is already showing it when the switch lands.
+  let selected = $derived($selectedPalette);
   let activeMode = $state<HarmonyMode>('custom');
   // Local UI only — deliberately NOT stored in PaletteConfig (shape unchanged).
   let absoluteChroma = $state(false);
@@ -31,7 +35,7 @@
   let axesInfoWrap: HTMLElement | undefined = $state();
   function select(label: string) {
-    selected = label;
+    selectedPalette.set(label);
   }
   function toggleInfo() {
@@ -285,7 +289,7 @@
               {#if axesInfoOpen}
                 <div class="info-box" role="region" aria-label="Harmony axes">
                   <strong class="info-title">Harmony axes</strong>
-                  <p>Each axis owns a hue. Assign a color from the row menu, or drag one onto the axis. The axis moves to that color's hue and the color follows the axis from then on, so applying a harmony rotates every assigned color at once. To unassign, use the row menu, or drag the color off its axis and drop it anywhere else.</p>
+                  <p>Each axis owns a hue. Assign a color from the row menu, or drag one onto the axis. On assign picks which hue survives: Adopt swatch moves the axis to the color's hue, Adopt axis repaints the color to the hue the axis already holds, which keeps an applied harmony true. Either way the color follows the axis from then on, so applying a harmony rotates every assigned color at once. To unassign, use the row menu, or drag the color off its axis and drop it anywhere else.</p>
                 </div>
               {/if}
             </div>
@@ -305,8 +309,9 @@
     </section>
     <section id="colors-selected" class="block">
-      <header class="block-head">
+      <header class="block-head head-row">
         <h2 class="title">Palette <span class="mode-name">&middot; {selectedSpec.displayLabel ?? selected}</span></h2>
+        <PaletteJumpButton family={selected} displayLabel={selectedSpec.displayLabel} target="tokens" />
       </header>
       <div class="group">
@@ -339,7 +344,11 @@
     }
   }
+  /* The pane is one column of a two-pane grid, so it goes narrow on a wide
+     standalone window just as it does in the docked panel. Every collapse
+     below keys on the pane's own width, never the viewport's. */
   .pane {
+    container: pane / inline-size;
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-32);
@@ -376,6 +385,13 @@
     gap: var(--ui-space-2);
   }
+  .block-head.head-row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-12);
+  }
   /* Every labeled region on this page carries the same heading, section and
      group alike: the old xs tertiary eyebrows read as captions and got skipped. */
   .title {
@@ -434,9 +450,8 @@
     gap: var(--ui-space-6);
   }
-  /* The docked panel's iframe viewport is the panel itself, so this collapse
-     fires there long before the standalone page ever gets this narrow. */
-  @media (max-width: 720px) {
+  /* Below this the three columns squeeze the swatches into slivers. */
+  @container pane (max-width: 44rem) {
     .harmony-cols {
       grid-template-columns: minmax(0, 1fr);
     }
@@ -446,8 +461,10 @@
       justify-content: center;
       transform: rotate(90deg);
     }
+  }
-    /* Below the wheel's minimum the rail is taller than the disc it flanks. */
+  /* Below the wheel's minimum the rail is taller than the disc it flanks. */
+  @container pane (max-width: 26rem) {
     .wheel-row {
       flex-direction: column;
       align-items: stretch;
@@ -572,6 +589,7 @@
   }
   .swatch-rows {
+    container: swatches / inline-size;
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
@@ -593,6 +611,17 @@
     outline-color: var(--ui-text-primary);
   }
+  /* Too narrow for one swatch per family: wrap into ranks that keep a readable
+     swatch width rather than shrinking toward slivers. auto-fill keeps every
+     rank on the same tracks, so a short last rank never stretches. */
+  @container swatches (max-width: 28rem) {
+    .swatch-row {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
+      gap: var(--ui-space-8);
+    }
+  }
   /* Every swatch keeps one width: selection reads in the frame's height alone,
      so nothing in the row shifts sideways as the selection moves. */
   .swatch {

package/src/editor/ui/colors/HarmonyAxesList.svelte CHANGED Viewed

@@ -7,8 +7,9 @@
   import UIMenuButton from '../UIMenuButton.svelte';
   import UIOptionItem from '../UIOptionItem.svelte';
   import UIOptionList from '../UIOptionList.svelte';
+  import UISegmentedControl from '../UISegmentedControl.svelte';
   import { modeLabel } from './harmonyModeIcons';
-  import { bindFamilyToAxis, unbindFamily } from './paletteBaseColor';
+  import { bindFamilyToAxis, unbindFamily, type AdoptOnAssign } from './paletteBaseColor';
   import { HARMONY_DRAG_TYPE, startFamilyDrag } from './harmonyDrag';
   interface Props {
@@ -24,8 +25,23 @@
   let { activeMode, selected, oncustomize }: Props = $props();
+  const ADOPT_OPTIONS = [
+    {
+      value: 'axis',
+      label: 'Adopt axis',
+      title: 'The color moves to the hue its new axis holds, so an applied harmony stays true',
+    },
+    {
+      value: 'swatch',
+      label: 'Adopt swatch',
+      title: "The axis moves to the color's hue, which leaves the harmony custom",
+    },
+  ] as const satisfies ReadonlyArray<{ value: AdoptOnAssign; label: string; title: string }>;
+  let adopt = $state<AdoptOnAssign>('swatch');
   function assign(family: string, index: number) {
-    if (bindFamilyToAxis(family, index)) oncustomize();
+    if (bindFamilyToAxis(family, index, adopt)) oncustomize();
   }
   // Empty-row swatch shows the axis's own hue, at fixed preview L/C so only the
@@ -194,6 +210,15 @@
 {/snippet}
 <div class="axes-list" bind:this={listEl}>
+  <div class="adopt-row">
+    <span class="adopt-caption">On assign</span>
+    <UISegmentedControl
+      bind:value={adopt}
+      options={ADOPT_OPTIONS}
+      ariaLabel="Which hue survives an assignment"
+    />
+  </div>
+  <span class="anchor-caption">Anchor</span>
   {#each axes as axis, i (i)}
     {@const status = statuses[i]}
     {@const unused = status === 'unused'}
@@ -215,7 +240,6 @@
       ondragleave={() => onDragLeave(i)}
       ondrop={(e) => onDrop(e, i)}
     >
-      <span class="role">{i === 0 ? 'Anchor' : ''}</span>
       {#if axis.family !== null}
         {@const family = axis.family}
         <span class="swatch" style="--fill: {familyHex(family)}"></span>
@@ -317,13 +341,24 @@
     background: var(--ui-surface-low);
   }
-  /* Only axis 1 fills this column, but every row reserves it so the swatches,
-     chips and pickers start at one x. Sized to fit "Anchor". The axis number
-     itself lives only on the left swatches, which is where a color is read. */
-  .role {
-    flex: none;
-    width: 4rem;
+  .adopt-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    margin-bottom: var(--ui-space-4);
+  }
+  .adopt-caption {
     color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xs);
+  }
+  /* Names the first row alone. Sitting above the list rather than in a column
+     every row reserves, so no row carries dead space for a word only one has. */
+  .anchor-caption {
+    padding-inline-start: calc(var(--ui-space-8) + 1px);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xs);
   }
   /* Unused slot: nothing bound and no position dealt. The row states the reason

package/src/editor/ui/colors/PaletteStepStrip.svelte CHANGED Viewed

@@ -51,33 +51,51 @@
   }
 </script>
-<div class="strip" role="group" aria-label={`${spec.label} derived scale`}>
-  {#each steps as s, i (s.label)}
-    <div
-      class="spot"
-      class:anchored={anchoredStep === i}
-      class:background={backgroundStep === i}
-      style:flex-grow={dockGrow(i, anchoredStep)}
-      title={stepTitle(s, i)}
-    >
-      <span class="chip" style:background={s.hex}>
-        <span class="aa" class:fail={!s.aa} style:color={s.textHex}>Aa</span>
-      </span>
-      <span class="step-label">{s.label}</span>
-    </div>
-  {/each}
+<div class="strip-viewport">
+  <div class="strip" role="group" aria-label={`${spec.label} derived scale`}>
+    {#each steps as s, i (s.label)}
+      <div
+        class="spot"
+        class:anchored={anchoredStep === i}
+        class:background={backgroundStep === i}
+        style:flex-grow={dockGrow(i, anchoredStep)}
+        title={stepTitle(s, i)}
+      >
+        <span class="chip" style:background={s.hex}>
+          <span class="aa" class:fail={!s.aa} style:color={s.textHex}>Aa</span>
+        </span>
+        <span class="step-label">{s.label}</span>
+      </div>
+    {/each}
+  </div>
 </div>
 {#if isGradient}
   <p class="hint">The page background is currently a gradient; the base color takes over when gradient mode is off.</p>
 {/if}
 <style>
+  .strip-viewport {
+    container: strip / inline-size;
+    min-width: 0;
+  }
   .strip {
     display: flex;
     align-items: flex-end;
     gap: var(--ui-space-4);
   }
+  /* Eleven steps shrink to slivers before the pane is done narrowing: below
+     that, rank the chips on a grid that keeps a readable width. Grid ignores
+     the dock-magnify flex-grow, so the anchored step reads by height alone. */
+  @container strip (max-width: 28rem) {
+    .strip {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
+      gap: var(--ui-space-8) var(--ui-space-4);
+    }
+  }
   .spot {
     flex: 1 1 0;
     min-width: 0;

package/src/editor/ui/colors/paletteBaseColor.ts CHANGED Viewed

@@ -145,26 +145,31 @@ function applyAxisHue(s: EditorState, index: number, hue: number, chroma: number
   }
 }
-/** Bind a family to an axis; the axis moves to the family's hue. Trade-places
+/** Which side of an assignment keeps its hue: `swatch` moves the axis onto the
+ *  color, `axis` repaints the color onto the axis. */
+export type AdoptOnAssign = 'swatch' | 'axis';
+/** Bind a family to an axis; `adopt` decides which hue survives. Trade-places
  *  semantics: whatever occupied the destination takes the source's position
- *  (another axis, which likewise moves to it, or unassigned). One mutate.
+ *  (another axis, reconciled the same way, or unassigned). One mutate.
  *  Returns whether any axis hue moved, which is what makes an applied harmony
  *  mode untrue — the caller drops to Custom on that. */
-export function bindFamilyToAxis(family: string, index: number): boolean {
+export function bindFamilyToAxis(family: string, index: number, adopt: AdoptOnAssign): boolean {
   const srcIndex = get(editorState).harmonyAxes.findIndex((a) => a.family === family);
   if (srcIndex === index) return false;
+  const reconcile = adopt === 'swatch' ? takeSeedHue : giveAxisHue;
   let hueMoved = false;
   mutate(`colors: assign ${family}`, (s) => {
     const axes = s.harmonyAxes;
     const occupant = axes[index].family;
     axes[index].family = family;
-    hueMoved = takeSeedHue(s, index, family);
-    // Source was another axis: the occupant trades into it, keeping its color
-    // and taking that axis to its hue. Source was unassigned (-1): the occupant
-    // simply floats free, color kept.
+    hueMoved = reconcile(s, index, family);
+    // Source was another axis: the occupant trades into it and reconciles with
+    // it in turn. Source was unassigned (-1): the occupant floats free, and
+    // keeps whatever hue this assignment left it.
     if (srcIndex !== -1) {
       axes[srcIndex].family = occupant;
-      if (occupant !== null) hueMoved = takeSeedHue(s, srcIndex, occupant) || hueMoved;
+      if (occupant !== null) hueMoved = reconcile(s, srcIndex, occupant) || hueMoved;
     }
   });
   return hueMoved;
@@ -179,8 +184,8 @@ export function unbindFamily(family: string): void {
   });
 }
-/** Assignment must never repaint a seed the user chose, so the axis is what
- *  moves. Harmony modes and axis drags stay the steps that move colors. */
+/** The axis adopts the swatch: the seed the user chose is never repainted, so
+ *  the axis is what moves. */
 function takeSeedHue(s: EditorState, index: number, family: string): boolean {
   const hue = normHue(ensureConfig(s, family).baseColor.h);
   if (s.harmonyAxes[index].hue === hue) return false;
@@ -188,6 +193,21 @@ function takeSeedHue(s: EditorState, index: number, family: string): boolean {
   return true;
 }
+/** The swatch adopts the axis: the color lands on the hue its new slot holds,
+ *  which leaves the geometry untouched — hence never a hue move to report, so
+ *  an applied harmony mode survives assignment. */
+function giveAxisHue(s: EditorState, index: number, family: string): boolean {
+  // The axis hue is taken raw: the color must land exactly on it, and normHue
+  // is not identity in range — its round trip shifts the last bit.
+  const hue = s.harmonyAxes[index].hue;
+  const cfg = ensureConfig(s, family);
+  if (cfg.baseColor.h !== hue) {
+    cfg.baseColor = { l: cfg.baseColor.l, c: cfg.baseColor.c, h: hue };
+    syncBaseAnchor(cfg);
+  }
+  return false;
+}
 /** Set several seed colors in ONE undo entry (harmony apply, global rotate). */
 export function setBaseColors(patch: Record<string, Oklch>, historyLabel = 'colors: harmony'): void {
   transaction(historyLabel, (s) => {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import ColorEditPanel from '../ColorEditPanel.svelte';
   import Toggle from '../Toggle.svelte';
+  import PaletteJumpButton from './PaletteJumpButton.svelte';
   import { beginSliderGesture } from '../../core/store/editorStore';
   import { oklchToHexClamped, type Oklch } from '../../core/palettes/oklch';
@@ -32,6 +33,8 @@
     anchorStepLabel?: string | null;
     isEditingBase: boolean;
     panelOpen: boolean;
+    /** Keep the panel open in live-apply mode (no confirm/cancel session) while the curve editors are visible. */
+    pinnedOpen?: boolean;
     editingColor: Oklch | null;
     editPanelTitle: string | null;
     copiedKey: string | null;
@@ -52,6 +55,7 @@
     anchorStepLabel = null,
     isEditingBase,
     panelOpen,
+    pinnedOpen = false,
     editingColor,
     editPanelTitle,
     copiedKey,
@@ -73,7 +77,7 @@
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div
       class="header-swatch"
-      class:active={isEditingBase}
+      class:active={isEditingBase || pinnedOpen}
       style="background: {baseHex}"
       onclick={onStartEdit}
       role="button"
@@ -81,7 +85,10 @@
       onkeydown={(e) => e.key === 'Enter' && onStartEdit()}
     ></div>
     <div class="primary-info">
-      <span class="editor-label">{displayLabel ?? label}</span>
+      <div class="label-row">
+        <span class="editor-label">{displayLabel ?? label}</span>
+        <PaletteJumpButton family={label} {displayLabel} target="wheel" />
+      </div>
       <button
         class="base-hex clickable-hex"
         type="button"
@@ -91,10 +98,11 @@
   </div>
 </div>
-{#if isEditingBase && panelOpen && editingColor}
+{#if pinnedOpen || (isEditingBase && panelOpen && editingColor)}
   <ColorEditPanel
-    title={editPanelTitle}
+    title={isEditingBase ? editPanelTitle : 'Base Color'}
     showRemoveOverride={false}
+    hideActions={!isEditingBase}
     hue={baseOklch.h}
     chroma={baseOklch.c}
     lightness={baseOklch.l * 100}
@@ -127,7 +135,7 @@
   .editor-primary {
     display: flex;
     align-items: center;
-    gap: var(--ui-space-8);
+    gap: var(--ui-space-12);
     flex-shrink: 0;
   }
@@ -137,6 +145,13 @@
     gap: var(--ui-space-2);
   }
+  .label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-10);
+  }
   .header-swatch {
     width: 4rem;
     height: 4rem;

package/src/editor/ui/palette/PaletteJumpButton.svelte ADDED Viewed

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import UIPillButton from '../UIPillButton.svelte';
+  import { openPaletteInTokens, openPaletteInWheel } from '../../core/store/paletteFocus';
+  interface Props {
+    family: string;
+    displayLabel?: string | null;
+    /** Which view the button hands this family over to. */
+    target: 'wheel' | 'tokens';
+  }
+  let { family, displayLabel = null, target }: Props = $props();
+  let name = $derived(displayLabel ?? family);
+  let icon = $derived(target === 'wheel' ? 'fa-palette' : 'fa-sliders');
+  let label = $derived(target === 'wheel' ? 'Wheel' : 'Edit');
+  let title = $derived(
+    target === 'wheel'
+      ? `Open ${name} on the color wheel`
+      : `Edit the ${name} palette in Tokens`
+  );
+  function jump() {
+    if (target === 'wheel') openPaletteInWheel(family);
+    else openPaletteInTokens(family);
+  }
+</script>
+<span class="palette-jump">
+  <UIPillButton size="compact" variant="outline" {icon} {title} onclick={jump}>{label}</UIPillButton>
+</span>
+<style>
+  .palette-jump {
+    display: inline-flex;
+  }
+  /* fa-palette loses its bowl at the pill's default icon size. The compact
+     pill's line box is shorter than the glyph draws, so the padding grows with
+     it rather than letting it cross the border. */
+  .palette-jump :global(.ui-pill) {
+    padding-block: var(--ui-space-6);
+  }
+  .palette-jump :global(.ui-pill i) {
+    font-size: var(--ui-font-size-md);
+    line-height: 1.2;
+  }
+</style>

package/src/editor/ui/palette/ScaleCurveEditor.svelte CHANGED Viewed

@@ -26,6 +26,7 @@
     lockedAnchorIndex?: number | null;
     onAnchorsChange: (anchors: CurveAnchor[]) => void;
     onOffsetChange: (key: string, value: number) => void;
+    onLockedAnchorUnlock?: (() => void) | null;
   }
   let {
@@ -37,7 +38,8 @@
     offset = 0,
     lockedAnchorIndex = null,
     onAnchorsChange,
-    onOffsetChange
+    onOffsetChange,
+    onLockedAnchorUnlock = null
   }: Props = $props();
 </script>
@@ -48,6 +50,7 @@
   defaultAnchors={defaults}
   {offset}
   {lockedAnchorIndex}
+  {onLockedAnchorUnlock}
   {onAnchorsChange}
   onOffsetChange={(v) => onOffsetChange(curveKey, v)}
 />