@motion-proto/live-tokens 0.46.1 → 0.47.1

package/src/editor/ui/colors/ColorWheel.svelte

@@ -62,6 +62,8 @@
   const EXT_OFFSET = 20;  // external handle radius beyond the disc rim (room for the dotted tether)
   const NUM_OFFSET = 24;  // numeral radius beyond the external handles
   const FREE_NUM_OFFSET = 15; // free-dot numeral, diagonal clearance past the enlarged dot
+  const NUM_PERP = 20;    // sideways clearance for a numeral moved beside its own marker
+  const NUM_STACK = 20;   // radial gap between the numerals of co-hued unbound axes
   const MIN_SIZE = 240;
   const MAX_SIZE = 560;
 
@@ -128,6 +130,7 @@
       return {
         ...t,
         hue,
+        dotR,
         selected: t.bound && selected === t.family,
         dot: { x: center + dotR * Math.cos(rad(hue)), y: center - dotR * Math.sin(rad(hue)) },
         ext: { x: center + extRadius * Math.cos(rad(hue)), y: center - extRadius * Math.sin(rad(hue)) },
@@ -141,7 +144,37 @@
     }),
   );
 
-  let visibleRender = $derived(axisRender.filter(isVisible));
+  // Monochromatic stacks every axis on one hue (custom does too, once the hues
+  // are dragged together), so the outer numeral slot is the same point for all
+  // of them. Each numeral then moves beside the marker it names — its own dot,
+  // or the external handle when the axis carries no color — which is the only
+  // thing that still tells the axes apart on a shared rail.
+  let visibleRender = $derived.by(() => {
+    const vis = axisRender.filter(isVisible);
+    const hueKey = (hue: number) => Math.round(normDeg(hue)) % 360;
+    const byHue = new Map<number, typeof vis>();
+    for (const t of vis) {
+      const group = byHue.get(hueKey(t.hue));
+      if (group) group.push(t);
+      else byHue.set(hueKey(t.hue), [t]);
+    }
+    return vis.map((t) => {
+      const group = byHue.get(hueKey(t.hue))!;
+      if (group.length < 2) return t;
+      // Bound axes separate by chroma radius on their own; unbound ones share the
+      // handle track, so they step outward past it instead.
+      const unboundBefore = group.slice(0, group.indexOf(t)).filter((g) => !g.bound).length;
+      const r = t.bound ? t.dotR : extRadius + unboundBefore * NUM_STACK;
+      const a = rad(t.hue);
+      return {
+        ...t,
+        num: {
+          x: center + r * Math.cos(a) - NUM_PERP * Math.sin(a),
+          y: center - r * Math.sin(a) - NUM_PERP * Math.cos(a),
+        },
+      };
+    });
+  });
 
   // Free dot for a selected family on no ACTIVE axis (Neutral, Alternate, …,
   // plus families whose axis the applied geometry deals no distinct slot): a 2D

package/src/editor/ui/colors/ColorsTab.svelte

@@ -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">
@@ -380,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 {

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

@@ -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/paletteBaseColor.ts

@@ -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/curveEngine.ts

@@ -97,6 +97,54 @@ export function makeAnchor(x: number, y: number, tangentLen = 15): CurveAnchor {
   return { x, y, inDx: -tangentLen, inDy: 0, outDx: tangentLen, outDy: 0 };
 }
 
+/** Share of a segment's x-span a tangent handle reaches across. At a third the
+ *  cubic is the exact Hermite form of the slope, so the handle length carries no
+ *  shape of its own, and the two facing handles can never cross. */
+const HANDLE_SPAN = 1 / 3;
+
+/**
+ * Slope to carry through (x, y), given whichever neighbours it has.
+ *
+ * The weighted harmonic mean of the two secants (Fritsch–Carlson): it always
+ * lands between them, so the segment cannot overshoot its own endpoints. The
+ * plain average (Catmull-Rom) can overshoot when the gaps differ, and on a
+ * lightness ramp an overshoot puts a step out of order with its neighbours,
+ * which is the one thing a ramp must not do.
+ */
+function tangentSlope(
+  prev: CurveAnchor | null,
+  x: number,
+  y: number,
+  next: CurveAnchor | null,
+): number {
+  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;
+  // Secants disagreeing in sign make this a turning point, where flat is the
+  // true slope rather than a failure to find one.
+  if (dPrev * dNext <= 0) return 0;
+  const wPrev = 2 * hNext + hPrev;
+  const wNext = hNext + 2 * hPrev;
+  return (wPrev + wNext) / (wPrev / dPrev + wNext / dNext);
+}
+
+/** An anchor at (x, y) whose handles lie along the local slope, so dropping it
+ *  onto a run bends the line rather than flattening it. */
+export function tangentAnchor(
+  x: number,
+  y: number,
+  prev: CurveAnchor | null,
+  next: CurveAnchor | null,
+): CurveAnchor {
+  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 };
+}
+
 export function isCornerAnchor(a: CurveAnchor): boolean {
   return a.inDx === 0 && a.inDy === 0 && a.outDx === 0 && a.outDy === 0;
 }

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

@@ -32,6 +32,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 +54,7 @@
     anchorStepLabel = null,
     isEditingBase,
     panelOpen,
+    pinnedOpen = false,
     editingColor,
     editPanelTitle,
     copiedKey,
@@ -73,7 +76,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"
@@ -83,40 +86,56 @@
     <div class="primary-info">
       <span class="editor-label">{displayLabel ?? label}</span>
       <button
-        class="base-hex clickable-hex"
+        class="base-hex"
+        class:copied={copiedKey === '__base__'}
         type="button"
+        title="Copy {baseHex}"
         onclick={(e) => onCopyBaseHex('__base__', baseHex, e)}
-      >{copiedKey === '__base__' ? 'copied!' : baseHex}</button>
+      >
+        <span class="hex-value">{baseHex}</span>
+        <i
+          class="fas"
+          class:fa-copy={copiedKey !== '__base__'}
+          class:fa-check={copiedKey === '__base__'}
+          aria-hidden="true"
+        ></i>
+      </button>
     </div>
   </div>
-</div>
 
-{#if isEditingBase && panelOpen && editingColor}
-  <ColorEditPanel
-    title={editPanelTitle}
-    showRemoveOverride={false}
-    hue={baseOklch.h}
-    chroma={baseOklch.c}
-    lightness={baseOklch.l * 100}
-    chromaMax={CHROMA_MAX}
-    chromaHint={pickerChromaHint}
-    onHueChromaChange={onBaseChange}
-    onConfirm={onConfirm}
-    onCancel={onCancel}
-    onRemoveOverride={() => {}}
-    onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
-  >
-    {#snippet actions()}
-      <Toggle
-        checked={anchorToBase}
-        onchange={(v) => onAnchorToBaseChange(v ?? !anchorToBase)}
-        label={anchorStepLabel ? `Base color placed at ${anchorStepLabel}` : 'Place base color in palette'}
-      />
-    {/snippet}
-  </ColorEditPanel>
-{/if}
+  {#if pinnedOpen || (isEditingBase && panelOpen && editingColor)}
+    <div class="editor-controls">
+      <ColorEditPanel
+        title={isEditingBase ? editPanelTitle : 'Base Color'}
+        showRemoveOverride={false}
+        hideActions={!isEditingBase}
+        hidePreview
+        hue={baseOklch.h}
+        chroma={baseOklch.c}
+        lightness={baseOklch.l * 100}
+        chromaMax={CHROMA_MAX}
+        chromaHint={pickerChromaHint}
+        onHueChromaChange={onBaseChange}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        onRemoveOverride={() => {}}
+        onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
+      >
+        {#snippet actions()}
+          <Toggle
+            checked={anchorToBase}
+            onchange={(v) => onAnchorToBaseChange(v ?? !anchorToBase)}
+            label={anchorStepLabel ? `Base color placed at ${anchorStepLabel}` : 'Place base color in palette'}
+          />
+        {/snippet}
+      </ColorEditPanel>
+    </div>
+  {/if}
+</div>
 
 <style>
+  /* Identity and controls read as one band: the sliders sit beside the swatch
+     rather than under it, which is what leaves the palette below its height. */
   .editor-top {
     display: flex;
     align-items: flex-start;
@@ -126,20 +145,28 @@
 
   .editor-primary {
     display: flex;
-    align-items: center;
-    gap: var(--ui-space-8);
+    align-items: stretch;
+    gap: var(--ui-space-12);
     flex-shrink: 0;
   }
 
   .primary-info {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: var(--ui-space-2);
   }
 
+  /* Basis, not width: the panel takes the rest of the row and drops below only
+     when it can't hold that much. */
+  .editor-controls {
+    flex: 1 1 26rem;
+    min-width: 0;
+  }
+
   .header-swatch {
-    width: 4rem;
-    height: 4rem;
+    width: 4.5rem;
+    min-height: 4.5rem;
     border-radius: var(--ui-radius-md);
     border: 2px solid var(--ui-border);
     flex-shrink: 0;
@@ -163,13 +190,9 @@
   }
 
   .base-hex {
-    font-size: var(--ui-font-size-md);
-    color: var(--ui-text-secondary);
-    font-family: var(--ui-font-mono);
-  }
-
-  .clickable-hex {
-    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
     background: none;
     border: none;
     cursor: pointer;
@@ -182,15 +205,31 @@
     text-align: left;
   }
 
-  .clickable-hex:hover {
+  /* The glyph only announces itself on approach; the hex is the content. */
+  .base-hex i {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+    transition: color var(--ui-transition-fast);
+  }
+
+  .base-hex:hover {
     background: var(--ui-surface-highest);
     color: var(--ui-text-primary);
   }
 
+  .base-hex:hover i {
+    color: var(--ui-text-secondary);
+  }
+
+  .base-hex.copied,
+  .base-hex.copied i {
+    color: var(--ui-text-accent);
+  }
+
   @media (max-width: 1280px) {
     .header-swatch {
-      width: 3rem;
-      height: 3rem;
+      width: 3.5rem;
+      min-height: 3.5rem;
     }
   }
 </style>

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

@@ -0,0 +1,44 @@
+<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 min-height carries the taller glyph without changing the pill's
+     height, so it still lines up with the plain pills beside it. */
+  .palette-jump :global(.ui-pill i) {
+    font-size: var(--ui-font-size-md);
+  }
+</style>

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

@@ -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)}
 />