@motion-proto/live-tokens 0.47.0 → 0.48.0

package/src/editor/ui/UIDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run, self } from 'svelte/legacy';
+  import { self } from 'svelte/legacy';
 
   import { tick } from 'svelte';
 
@@ -31,14 +31,16 @@
   let cancelButtonRef: HTMLButtonElement | undefined = $state();
   let confirmButtonRef: HTMLButtonElement | undefined = $state();
 
-  run(() => {
-    if (show) {
-      tick().then(() => {
-        if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
-        else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
-        else if (closeButtonRef) closeButtonRef.focus();
-      });
-    }
+  // Depends on `show` alone: the footer can gain or lose its confirm button
+  // while the dialog is open (theme preview), and pulling focus out of the
+  // body each time that happens would fight whatever the user is doing.
+  $effect(() => {
+    if (!show) return;
+    tick().then(() => {
+      if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
+      else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
+      else if (closeButtonRef) closeButtonRef.focus();
+    });
   });
 
   function handleClose() {

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

package/src/editor/ui/index.ts

@@ -26,5 +26,7 @@ export { default as BezierCurveEditor } from './BezierCurveEditor.svelte';
 export { default as FontStackEditor } from './FontStackEditor.svelte';
 export { default as ProjectFontsSection } from './ProjectFontsSection.svelte';
 
-// Theme persistence UI
-export { default as ThemeFileManager } from './ThemeFileManager.svelte';
+// Theme persistence UI. `ThemeFileManager` was the layer manager; the panel is
+// what carries that role now, and the alias keeps the public import working.
+export { default as ThemePanel } from './ThemePanel.svelte';
+export { default as ThemeFileManager } from './ThemePanel.svelte';

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

@@ -1,7 +1,6 @@
 <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';
 
@@ -85,46 +84,58 @@
       onkeydown={(e) => e.key === 'Enter' && onStartEdit()}
     ></div>
     <div class="primary-info">
-      <div class="label-row">
-        <span class="editor-label">{displayLabel ?? label}</span>
-        <PaletteJumpButton family={label} {displayLabel} target="wheel" />
-      </div>
+      <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 pinnedOpen || (isEditingBase && panelOpen && editingColor)}
-  <ColorEditPanel
-    title={isEditingBase ? editPanelTitle : 'Base Color'}
-    showRemoveOverride={false}
-    hideActions={!isEditingBase}
-    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;
@@ -134,7 +145,7 @@
 
   .editor-primary {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     gap: var(--ui-space-12);
     flex-shrink: 0;
   }
@@ -142,19 +153,20 @@
   .primary-info {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: var(--ui-space-2);
   }
 
-  .label-row {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-10);
+  /* 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;
@@ -178,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;
@@ -197,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

@@ -35,15 +35,10 @@
     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);
-  }
-
+  /* 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);
-    line-height: 1.2;
   }
 </style>