@motion-proto/live-tokens 0.47.0 → 0.47.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # 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

package/dist-plugin/index.cjs

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.47.0",
+  "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

@@ -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/ui/BezierCurveEditor.svelte

@@ -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';
@@ -191,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 };
     }

package/src/editor/ui/ColorEditPanel.svelte

@@ -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

@@ -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 {
@@ -520,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'}
@@ -551,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
@@ -864,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 {
@@ -897,7 +901,7 @@
 
   .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
@@ -928,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/UIPillButton.svelte

@@ -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>

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/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;
 }