@motion-proto/live-tokens 0.49.1 → 0.52.1

package/src/editor/ui/BezierCurveEditor.svelte

@@ -4,22 +4,25 @@
   import {
     type CurveAnchor, type CurveConfig,
     CURVE_H, CURVE_PAD_Y, CURVE_Y_PAD,
-    isCornerAnchor, tangentAnchor, curveXToSvg, curveYToSvg, svgToX, svgToY,
+    isCornerAnchor, isAutoSmoothCurve, tangentAnchor, resmoothAnchor, resmoothAutoCurve,
+    curveXToSvg, curveYToSvg, svgToX, svgToY,
     evalBezier, buildCurvePath, curveTemplates,
-    serializeCurve, deserializeCurve,
+    serializeCurve, deserializeCurve, clampAnchorsToRange,
   } from './curveEngine';
   import UIPillButton from './UIPillButton.svelte';
+  import Toggle from './Toggle.svelte';
 
   interface Props {
     anchors: CurveAnchor[];
     cfg: CurveConfig;
     stepCount: number;
-    padX?: number;
     offset?: number;
     defaultAnchors?: CurveAnchor[] | null;
     lockedAnchorIndex?: number | null;
+    autoSmooth?: boolean;
     onAnchorsChange?: (anchors: CurveAnchor[]) => void;
     onOffsetChange?: (offset: number) => void;
+    onAutoSmoothChange?: (autoSmooth: boolean) => void;
     onLockedAnchorUnlock?: (() => void) | null;
   }
 
@@ -27,19 +30,36 @@
     anchors,
     cfg,
     stepCount,
-    padX = 0,
     offset = 0,
     defaultAnchors = null,
     lockedAnchorIndex = null,
+    autoSmooth = true,
     onAnchorsChange = () => {},
     onOffsetChange = () => {},
+    onAutoSmoothChange = () => {},
     onLockedAnchorUnlock = null
   }: Props = $props();
 
+  /** Every mutation the editor makes to anchor positions runs through here, so
+   *  while auto smoothing is on the stored handles always equal the derived
+   *  ones. That is what makes switching it off leave the shape untouched. */
+  function commit(updated: CurveAnchor[]) {
+    onAnchorsChange(autoSmooth ? resmoothAutoCurve(updated) : updated);
+  }
+
+  function setAutoSmooth(on: boolean) {
+    onAutoSmoothChange(on);
+    // Switching off is a no-op on the shape; switching on discards hand-dragged handles.
+    if (on) onAnchorsChange(resmoothAutoCurve(anchors));
+  }
+
   function resetToDefault() {
     if (!defaultAnchors) return;
+    // The default is a shape in its own right, so it lands verbatim rather than
+    // through `commit`, and auto smoothing follows whatever that shape already is.
     onAnchorsChange(defaultAnchors.map(a => ({ ...a })));
     onOffsetChange(0);
+    onAutoSmoothChange(isAutoSmoothCurve(defaultAnchors));
   }
 
   const CURVE_W_DEFAULT = 720;
@@ -50,6 +70,9 @@
   const clipId = `curve-clip-${Math.random().toString(36).slice(2, 8)}`;
 
   let w = $derived(dims);
+  // Half a step column. The graph spans the swatch row edge to edge, so without this
+  // inset the curve's ends sit on the outer edges of the end swatches, not over them.
+  let padX = $derived(stepCount > 1 ? w / (2 * stepCount) : 0);
   let offsetPx = $derived(-(offset / ((cfg.yMax - cfg.yMin) * (1 + 2 * CURVE_Y_PAD))) * (CURVE_H - 2 * CURVE_PAD_Y));
 
   function stepToX(index: number): number {
@@ -114,7 +137,7 @@
     const { x, y } = svgCoords(e);
     const newX = svgToX(x, w, padX);
     const newY = Math.round(svgToY(y, cfg));
-    const updated = [...anchors];
+    let updated = [...anchors];
 
     if (kind === 'anchor') {
       if (idx === lockedAnchorIndex) return; // locked: no x/y dragging
@@ -123,20 +146,28 @@
       else if (idx === updated.length - 1) ax = 100;
       else ax = Math.max(updated[idx - 1].x + 1, Math.min(updated[idx + 1].x - 1, ax));
       updated[idx] = { ...updated[idx], x: ax, y: newY };
+      // The locked anchor took its tangent from the curve's shape at pin time and
+      // cannot be dragged, so nothing else refreshes it. Left stale it holds a flat
+      // shelf through the middle of a ramp the user has since moved under it.
+      if (lockedAnchorIndex != null && lockedAnchorIndex !== idx) {
+        updated = resmoothAnchor(updated, lockedAnchorIndex);
+      }
     } else if (kind === 'handleOut') {
+      if (autoSmooth) onAutoSmoothChange(false);
       const a = updated[idx];
       const dx = newX - a.x, dy = newY - a.y;
       updated[idx] = breakHandle
         ? { ...a, outDx: dx, outDy: dy }
         : { ...a, outDx: dx, outDy: dy, inDx: -dx, inDy: -dy };
     } else {
+      if (autoSmooth) onAutoSmoothChange(false);
       const a = updated[idx];
       const dx = newX - a.x, dy = newY - a.y;
       updated[idx] = breakHandle
         ? { ...a, inDx: dx, inDy: dy }
         : { ...a, inDx: dx, inDy: dy, outDx: -dx, outDy: -dy };
     }
-    onAnchorsChange(updated);
+    if (kind === 'anchor') commit(updated); else onAnchorsChange(updated);
   }
 
   function handlePointerUp() {
@@ -184,7 +215,7 @@
       x: Math.round(mx), y: Math.round(my),
       inDx: r0x - mx, inDy: r0y - my, outDx: r1x - mx, outDy: r1y - my,
     });
-    onAnchorsChange(updated);
+    commit(updated);
   }
 
   function toggleAnchorSmooth(index: number) {
@@ -195,16 +226,16 @@
     } else {
       updated[index] = { ...a, inDx: 0, inDy: 0, outDx: 0, outDy: 0 };
     }
-    onAnchorsChange(updated);
+    commit(updated);
   }
 
   function removePoint(index: number) {
     if (anchors.length <= 2) return;
-    onAnchorsChange(anchors.filter((_, i) => i !== index));
+    commit(anchors.filter((_, i) => i !== index));
   }
 
   function applyTemplate(tpl: typeof curveTemplates[0]) {
-    onAnchorsChange(tpl.anchors(cfg));
+    commit(tpl.anchors(cfg));
   }
 
   // --- Shift (vertical offset) drag ---
@@ -238,7 +269,7 @@
 
   async function copyToClipboard() {
     try {
-      await navigator.clipboard.writeText(serializeCurve(anchors, offset));
+      await navigator.clipboard.writeText(serializeCurve(anchors, offset, autoSmooth));
     } catch {
       // clipboard write failed silently
     }
@@ -249,8 +280,12 @@
       const text = await navigator.clipboard.readText();
       const data = deserializeCurve(text);
       if (!data) return;
-      onAnchorsChange(data.anchors.map(a => ({ ...a })));
+      // Clamping can move an anchor off its own derived tangent, so the pasted
+      // flag only survives a paste the axis left alone.
+      const pasted = clampAnchorsToRange(data.anchors.map(a => ({ ...a })), cfg);
+      onAnchorsChange(pasted);
       onOffsetChange(data.offset);
+      onAutoSmoothChange(data.autoSmooth && isAutoSmoothCurve(pasted));
     } catch {
       // clipboard read failed or permission denied
     }
@@ -258,19 +293,6 @@
 </script>
 
 <div class="curve-panel">
-  <div class="curve-panel-header">
-    <span class="curve-panel-label">{cfg.label}</span>
-    <div class="curve-help">
-      <button class="curve-help-badge" type="button" aria-label="Curve editor help">
-        <i class="fas fa-circle-info" aria-hidden="true"></i>
-      </button>
-      <div class="curve-help-popover" role="tooltip">
-        <div><strong>Click</strong> path to add a point</div>
-        <div><strong>&#x2325; Click</strong> a point to remove</div>
-        <div><strong>Double-click</strong> a point to toggle smooth/corner</div>
-      </div>
-    </div>
-  </div>
   <div class="curve-container">
     <div class="curve-chart-overlay">
       <UIPillButton
@@ -282,8 +304,19 @@
         <svg viewBox="0 0 12 20" class="curve-tool-icon">
           <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
         </svg>
-        <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
+        <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}${cfg.unit ?? ''}` : ''}</span>
       </UIPillButton>
+      <div class="curve-help">
+        <button class="curve-help-badge" type="button" aria-label="Curve editor help">
+          <i class="fas fa-circle-info" aria-hidden="true"></i>
+        </button>
+        <div class="curve-help-popover" role="tooltip">
+          <div><strong>Click</strong> path to add a point</div>
+          <div><strong>&#x2325; Click</strong> a point to remove</div>
+          <div><strong>Double-click</strong> a point to toggle smooth/corner</div>
+          <div><strong>Drag a handle</strong> to leave auto smooth</div>
+        </div>
+      </div>
     </div>
     <svg
       bind:this={svgEl}
@@ -314,10 +347,7 @@
 
       <!-- Horizontal grid lines -->
       {#each cfg.gridLines as gl}
-        <line x1={padX} y1={curveYToSvg(gl, cfg)} x2={w - padX} y2={curveYToSvg(gl, cfg)} class="curve-grid" />
-      {/each}
-      {#each cfg.dashedLines as dl}
-        <line x1={padX} y1={curveYToSvg(dl, cfg)} x2={w - padX} y2={curveYToSvg(dl, cfg)} class="curve-grid dashed" />
+        <line x1={0} y1={curveYToSvg(gl, cfg)} x2={w} y2={curveYToSvg(gl, cfg)} class="curve-grid" />
       {/each}
 
       <!-- Curve content group — offset vertically, clipped -->
@@ -418,19 +448,22 @@
       <UIPillButton size="compact" variant="outline" title="Copy curve" onclick={copyToClipboard}>Copy</UIPillButton>
       <UIPillButton size="compact" variant="outline" title="Paste curve" onclick={pasteFromClipboard}>Paste</UIPillButton>
     </div>
-    <div class="curve-templates">
-      {#each curveTemplates as tpl}
-        <button
-          class="curve-template-btn"
-          type="button"
-          title={tpl.name}
-          onclick={() => applyTemplate(tpl)}
-        >
-          <svg viewBox="0 0 20 12" class="curve-template-icon">
-            <path d={tpl.icon} />
-          </svg>
-        </button>
-      {/each}
+    <div class="curve-presets">
+      <Toggle checked={autoSmooth} label="Auto smooth" onchange={setAutoSmooth} />
+      <div class="curve-templates">
+        {#each curveTemplates as tpl}
+          <button
+            class="curve-template-btn"
+            type="button"
+            title={tpl.name}
+            onclick={() => applyTemplate(tpl)}
+          >
+            <svg viewBox="0 0 20 12" class="curve-template-icon">
+              <path d={tpl.icon} />
+            </svg>
+          </button>
+        {/each}
+      </div>
     </div>
     <div class="curve-toolbar-group">
       {#if defaultAnchors}
@@ -449,18 +482,6 @@
     gap: var(--ui-space-4);
   }
 
-  .curve-panel-header {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-  }
-
-  .curve-panel-label {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
-  }
-
   .curve-container {
     position: relative;
     width: 100%;
@@ -483,6 +504,7 @@
   .curve-help {
     position: relative;
     margin-left: auto;
+    align-self: flex-start;
   }
 
   .curve-help-badge {
@@ -549,7 +571,7 @@
     width: 100%;
     height: 100%;
     background: transparent;
-    border: 1px solid var(--ui-border-low);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-sm);
     cursor: crosshair;
     display: block;
@@ -562,20 +584,15 @@
   }
 
   .curve-grid {
-    stroke: var(--ui-border-low);
-    stroke-width: 0.5;
+    stroke: var(--ui-border-high);
+    stroke-width: 1;
     vector-effect: non-scaling-stroke;
   }
 
-  .curve-grid.dashed {
-    stroke-dasharray: 3 3;
-  }
-
   .curve-step-line {
     stroke: var(--ui-border-low);
-    stroke-width: 0.5;
+    stroke-width: 1;
     vector-effect: non-scaling-stroke;
-
   }
 
   .shift-overlay {
@@ -680,6 +697,12 @@
     fill: currentColor;
   }
 
+  .curve-presets {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-12);
+  }
+
   .curve-templates {
     display: flex;
     gap: var(--ui-space-2);
@@ -689,8 +712,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1.5rem;
-    height: 1rem;
+    width: 2.625rem;
+    height: 1.75rem;
     padding: 0;
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
@@ -711,7 +734,7 @@
   .curve-template-icon path {
     fill: none;
     stroke: var(--ui-text-tertiary);
-    stroke-width: 1.5;
+    stroke-width: 1;
     stroke-linecap: round;
     stroke-linejoin: round;
   }

package/src/editor/ui/FileLoadList.svelte

@@ -167,6 +167,7 @@
       {@const protectedRow = isProtected(file)}
       <div
         class="load-item"
+        data-file-name={file.fileName}
         class:active={file.fileName === activeFileName}
         class:selected={file.fileName === selectedFileName}
         class:protected={protectedRow}

package/src/editor/ui/FontStackEditor.svelte

@@ -11,7 +11,7 @@
     SystemCascadePreset,
   } from '../core/themes/themeTypes';
   import { editorState, setFontStacks } from '../core/store/editorStore';
-  import { applyFontStacks, SYSTEM_CASCADES } from '../core/fonts/fontLoader';
+  import { SYSTEM_CASCADES } from '../core/fonts/fontLoader';
 
   const SYSTEM_PRESETS: SystemCascadePreset[] = ['system-ui-sans', 'system-ui-serif', 'system-ui-mono'];
   // `cursive` and `fantasy` are CSS-spec generics whose rendering varies wildly
@@ -110,7 +110,6 @@
   function updateStack(variable: FontStackVariable, updater: (slots: FontStackSlot[]) => FontStackSlot[]) {
     const next = stacks.map((s) => (s.variable === variable ? { ...s, slots: updater([...s.slots]) } : s));
     setFontStacks(next);
-    applyFontStacks(next, fontSourcesList);
   }
 
   function handleSelectChange(variable: FontStackVariable, index: number, value: string) {

package/src/editor/ui/GradientEditor.svelte

@@ -274,7 +274,11 @@
 </script>
 
 {#if gradient}
-  <div class="gradient-editor" class:has-pad={hasAside}>
+  <div
+    class="gradient-editor"
+    class:has-pad={hasAside}
+    data-token-variable={gradientSource.targetVariable}
+  >
     {#if sectionLabel || hasAside}
       <div class="editor-header editor-section-left">
         <span class="editor-section-label">{sectionLabel ?? ''}</span>