@motion-proto/live-tokens 0.94.2 → 0.95.0

package/src/editor/skill-atlas/wireLayout.ts

@@ -41,6 +41,8 @@ const CORNER = 12;
  *  inside the next when two share a stretch of gutter. */
 const LANE_INSET = 40;
 const LANE_STEP = 16;
+/** A comb rides inside the loop lanes, which start at LANE_INSET. */
+const COMB_INSET = 20;
 
 /** Cards laid out in one row share a top to within a pixel; cards pushed onto
  *  a second wrapped line do not, and a single bus cannot serve both. */
@@ -133,6 +135,52 @@ function fanIn(out: Drawing, parents: Box[], b: Box, edges: Edge[], lit: (i: num
   });
 }
 
+/** A branch row wrapped to one card per line, as on a phone: the cards share
+ *  a column and stand one under the next. */
+function stacked(group: Box[]): boolean {
+  return group.length > 1 && !aligned(group.map((g) => g.top)) && group.every((g) => group.every((h) => g.left < h.right && h.left < g.right));
+}
+
+/** `fanOut` for a stacked row: one comb down the right of the stack and a
+ *  tick into each card, instead of a lane per card nesting off the canvas. */
+function combOut(out: Drawing, a: Box, kids: Box[], edges: Edge[], lit: (i: number) => boolean) {
+  const lane = Math.max(a.right, ...kids.map((k) => k.right)) + COMB_INSET;
+  const last = kids[kids.length - 1];
+  const r = Math.max(0, Math.min(CORNER, (lane - a.right - STANDOFF) / 2, (last.midY - a.midY) / 2));
+  out.wires.push({
+    back: false,
+    arrow: false,
+    lit: kids.some((_, i) => lit(i)),
+    d:
+      `M ${a.right + STANDOFF} ${a.midY} L ${lane - r} ${a.midY}` +
+      ` Q ${lane} ${a.midY}, ${lane} ${a.midY + r} L ${lane} ${last.midY}`,
+  });
+  kids.forEach((k, i) => {
+    out.wires.push({ back: false, arrow: true, lit: lit(i), d: `M ${lane} ${k.midY} L ${k.right + STANDOFF} ${k.midY}` });
+    label(out, edges[i].label, lane, ((i === 0 ? a.midY : kids[i - 1].midY) + k.midY) / 2, lit(i), true);
+  });
+}
+
+/** `fanIn` for a stacked row: each card ties into one comb down the left of
+ *  the stack, which turns into the child. */
+function combIn(out: Drawing, parents: Box[], b: Box, edges: Edge[], lit: (i: number) => boolean) {
+  const lane = Math.min(b.left, ...parents.map((p) => p.left)) - COMB_INSET;
+  const first = parents[0];
+  const r = Math.max(0, Math.min(CORNER, (b.left - STANDOFF - lane) / 2, (b.midY - first.midY) / 2));
+  parents.forEach((p, i) => {
+    out.wires.push({ back: false, arrow: false, lit: lit(i), d: `M ${p.left - STANDOFF} ${p.midY} L ${lane} ${p.midY}` });
+    label(out, edges[i].label, lane, (p.midY + (parents[i + 1]?.midY ?? b.midY)) / 2, lit(i), true);
+  });
+  out.wires.push({
+    back: false,
+    arrow: true,
+    lit: parents.some((_, i) => lit(i)),
+    d:
+      `M ${lane} ${first.midY} L ${lane} ${b.midY - r}` +
+      ` Q ${lane} ${b.midY}, ${lane + r} ${b.midY} L ${b.left - STANDOFF} ${b.midY}`,
+  });
+}
+
 /** A plain parent-to-child curve, and the fallback wherever a bus would have
  *  to cross a card: children wrapped onto a second line, or parents staggered
  *  across rows. */
@@ -227,6 +275,13 @@ export function routeWires(boxes: Map<string, Box>, edges: Edge[], lit: (edge: E
     const kids = kidEdges.map((e) => boxes.get(e.to));
     if (!a || kidEdges.length < 2 || kids.some((k) => !k)) continue;
     const kept = kids as Box[];
+    if (stacked(kept)) {
+      const order = kept.map((_, i) => i).sort((i, j) => kept[i].top - kept[j].top);
+      const sortedEdges = order.map((i) => kidEdges[i]);
+      sortedEdges.forEach((e) => claimed.add(e));
+      combOut(out, a, order.map((i) => kept[i]), sortedEdges, (i) => lit(sortedEdges[i]));
+      continue;
+    }
     if (!aligned(kept.map((k) => k.top))) continue;
     kidEdges.forEach((e) => claimed.add(e));
     fanOut(out, a, kept, kidEdges, (i) => lit(kidEdges[i]));
@@ -238,6 +293,13 @@ export function routeWires(boxes: Map<string, Box>, edges: Edge[], lit: (edge: E
     const ups = open.map((e) => boxes.get(e.from));
     if (!b || open.length < 2 || ups.some((u) => !u)) continue;
     const kept = ups as Box[];
+    if (stacked(kept)) {
+      const order = kept.map((_, i) => i).sort((i, j) => kept[i].top - kept[j].top);
+      const sortedEdges = order.map((i) => open[i]);
+      sortedEdges.forEach((e) => claimed.add(e));
+      combIn(out, order.map((i) => kept[i]), b, sortedEdges, (i) => lit(sortedEdges[i]));
+      continue;
+    }
     if (!aligned(kept.map((u) => u.bottom))) continue;
     open.forEach((e) => claimed.add(e));
     fanIn(out, kept, b, open, (i) => lit(open[i]));

package/src/editor/ui/BezierCurveEditor.svelte

@@ -567,6 +567,8 @@
     transform: translateY(0);
   }
 
+  /* Chrome reads touch-action from the outer svg, never from the circles and
+     paths inside it, so the anchors' own rule alone leaves a drag scrolling. */
   .curve-svg {
     width: 100%;
     height: 100%;
@@ -575,6 +577,7 @@
     border-radius: var(--ui-radius-sm);
     cursor: crosshair;
     display: block;
+    touch-action: none;
   }
 
   .curve-out-of-range {

package/src/editor/ui/FontStackEditor.svelte

@@ -409,7 +409,7 @@
 
   @media (max-width: 720px) {
     .font-stacks-columns {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
     }
   }
 
@@ -471,7 +471,7 @@
 
   .slot-controls {
     display: grid;
-    grid-template-columns: auto auto 1fr auto;
+    grid-template-columns: auto auto minmax(0, 1fr) auto;
     align-items: center;
     gap: var(--ui-space-8);
   }

package/src/editor/ui/PaletteEditor.svelte

@@ -704,14 +704,14 @@
         {/if}
       </div>
       <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
-        <div class="step-column">
+        <div class="step-column" style="--stacked-order: 0">
           <button class="step-label copyable-label" class:copied={copiedLabelKey === 'palette-white'} type="button" onclick={(e) => copyVarName('palette-white', `--color-${cssNamespace}-white`, e)}>
             {copiedLabelKey === 'palette-white' ? 'copied!' : 'white'}
           </button>
           <div class="swatch gray-swatch bookend" style="background: #ffffff"></div>
         </div>
-        {#each paletteComputed as ps}
-          <div class="step-column">
+        {#each paletteComputed as ps, i}
+          <div class="step-column" style="--stacked-order: {2 * (i + 1)}">
             <button class="step-label copyable-label" class:copied={copiedLabelKey === ps.key} class:selected={editingKey === ps.key || (isEditingBase && ps.anchored)} type="button" onclick={(e) => copyVarName(ps.key, `--color-${cssNamespace}-${ps.label}`, e)}>
               {copiedLabelKey === ps.key ? 'copied!' : ps.label}
             </button>
@@ -743,14 +743,14 @@
             >{copiedKey === ps.key ? 'copied!' : ps.effective}</button>
           </div>
         {/each}
-        <div class="step-column">
+        <div class="step-column" style="--stacked-order: {2 * (paletteComputed.length + 1)}">
           <button class="step-label copyable-label" class:copied={copiedLabelKey === 'palette-black'} type="button" onclick={(e) => copyVarName('palette-black', `--color-${cssNamespace}-black`, e)}>
             {copiedLabelKey === 'palette-black' ? 'copied!' : 'black'}
           </button>
           <div class="swatch gray-swatch bookend" style="background: #000000"></div>
         </div>
 
-        <UIReveal open={editingPaletteIndex !== null} style="grid-column: 2 / {paletteStepLightness.length + 2}">
+        <UIReveal open={editingPaletteIndex !== null} style="grid-column: 2 / {paletteStepLightness.length + 2}; --stacked-order: {2 * ((dock?.paletteIndex ?? 0) + 1) + 1}">
           <!-- The reveal has to own the grid slot, so the dock rebuilds the
                ramp's tracks inside it: the caret is then placed on the step's
                own column and points at it at any width, no arithmetic. -->
@@ -760,7 +760,7 @@
           </div>
         </UIReveal>
 
-      <UIReveal open={paletteEditorOpen} style="grid-column: 2 / {paletteStepLightness.length + 2}">
+      <UIReveal open={paletteEditorOpen} style="grid-column: 2 / {paletteStepLightness.length + 2}; --stacked-order: {2 * (paletteComputed.length + 1) + 1}">
         <div class="curve-grid-span">
           {#if anchorUnlockPrompt && anchorToBase}
             <div class="anchor-unlock-notice" role="alert">
@@ -773,6 +773,7 @@
             </div>
           {/if}
           <ScaleCurveEditor
+            subject={displayLabel ?? label}
             curveKey="hue"
             anchors={hueCurve ?? DEFAULT_PALETTE_HUE()}
             cfg={hueCurveConfig}
@@ -789,6 +790,7 @@
             onAutoSmoothChange={handleAutoSmooth}
           />
           <ScaleCurveEditor
+            subject={displayLabel ?? label}
             curveKey="saturation"
             anchors={saturationCurve}
             cfg={saturationCurveConfig}
@@ -805,6 +807,7 @@
             onAutoSmoothChange={handleAutoSmooth}
           />
           <ScaleCurveEditor
+            subject={displayLabel ?? label}
             curveKey="lightness"
             anchors={lightnessCurve}
             cfg={lightnessCurveConfig}
@@ -1231,6 +1234,61 @@
     line-height: 1;
   }
 
+  /* A phone-width editor stacks the ramp, one step per row, so each swatch is
+     wide enough to read and tap. --stacked-order puts the step editor under the
+     row it edits and the curves after black. */
+  @media (max-width: 600px) {
+    .scale-section {
+      width: 100%;
+    }
+
+    .swatch-grid {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .swatch-grid > :global(*) {
+      order: var(--stacked-order, 0);
+    }
+
+    .step-column {
+      display: grid;
+      grid-template-columns: 3rem minmax(0, 1fr) 5rem;
+      align-items: center;
+      column-gap: var(--ui-space-8);
+    }
+
+    .step-label,
+    .step-label.copyable-label {
+      height: auto;
+      justify-content: flex-start;
+    }
+
+    .step-hex {
+      margin-top: 0;
+      text-align: left;
+    }
+
+    .swatch.gray-swatch {
+      height: 2.25rem;
+      margin-bottom: 0;
+    }
+
+    .swatch.gray-swatch.anchored {
+      height: 3rem;
+    }
+
+    .dock {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .edit-caret {
+      display: none;
+    }
+  }
+
   .empty-mode-toggle {
     display: flex;
     align-items: center;

package/src/editor/ui/UIPaletteSelector.svelte

@@ -1146,6 +1146,7 @@
   .palette-detail-row {
     grid-column: 2 / -1;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-space-8);
     padding-top: var(--ui-space-4);
@@ -1192,6 +1193,7 @@
 
   .orientation-body {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-space-8);
     flex: 1;

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

@@ -2,7 +2,7 @@
   import { cubicOut } from 'svelte/easing';
   import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
-  import { editorState, beginSliderGesture } from '../../core/store/editorStore';
+  import { editorState, beginSliderGesture, undo, canUndo } 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';
@@ -13,6 +13,7 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
+  import UIPillButton from '../UIPillButton.svelte';
   import { isSwatchCopy, swatchPasteColor, copySwatchColor, showSwatchColor } from '../swatchClipboard';
   import {
     setBaseColor,
@@ -151,7 +152,7 @@
     onSwatchDragEnd();
   }
 
-  const swatchEls: Record<string, HTMLButtonElement> = {};
+  const swatchEls: Record<string, HTMLButtonElement> = $state({});
 
   // Copy and paste act on the selected swatch, never the focused one: Safari
   // and macOS Firefox do not focus a button on click.
@@ -270,6 +271,8 @@
         >
           {#snippet actions()}
             <div class="wheel-opts">
+              <!-- The editor keeps one history, so this steps back the last edit on any view, as Cmd+Z does. -->
+              <UIPillButton size="compact" variant="outline" icon="fa-rotate-left" title="Undo the last edit" disabled={!$canUndo} onclick={() => undo()}>Undo</UIPillButton>
               <label class="opt">
                 <input type="checkbox" bind:checked={absoluteChroma} />
                 <span>Absolute Chroma</span>

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

@@ -262,6 +262,7 @@
       <div class="curve-grid-span">
         {#each curveDescriptors as curve (curve.key)}
           <ScaleCurveEditor
+            subject={scale.title}
             curveKey={curve.key}
             anchors={curve.anchors}
             cfg={curve.cfg}

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { MediaQuery } from 'svelte/reactivity';
   import BezierCurveEditor from '../BezierCurveEditor.svelte';
   import UIReveal from '../UIReveal.svelte';
+  import { portal } from '../../../system/internal/portal';
   import { isAutoSmoothCurve, type CurveAnchor, type CurveConfig } from '../curveEngine';
   import { curveSummary } from './curveSummary';
 
@@ -30,6 +32,8 @@
      *  switching on is self-evident from the shape it produces. */
     autoSmooth?: boolean;
     lockedAnchorIndex?: number | null;
+    /** The scale the curve shapes, named in the full-screen header. */
+    subject?: string;
     open: boolean;
     onToggleOpen: () => void;
     onAnchorsChange: (anchors: CurveAnchor[]) => void;
@@ -47,6 +51,7 @@
     offset = 0,
     autoSmooth = undefined,
     lockedAnchorIndex = null,
+    subject = undefined,
     open,
     onToggleOpen,
     onAnchorsChange,
@@ -57,37 +62,78 @@
 
   let summary = $derived(curveSummary(anchors, defaults, offset, cfg.unit ?? ''));
   let autoSmoothResolved = $derived(autoSmooth ?? isAutoSmoothCurve(anchors));
+
+  // A phone-width editor has no room to drag handles inline, so a curve opens
+  // over the whole screen. The layer opens only on a tap: the parent's open
+  // flag is the desktop disclosure, and Lightness starts open there.
+  const fullScreen = new MediaQuery('max-width: 600px');
+  let layerOpen = $state(false);
+
+  function focusOnMount(node: HTMLElement) {
+    node.focus();
+  }
 </script>
 
+<svelte:window onkeydown={(e) => { if (layerOpen && e.key === 'Escape') layerOpen = false; }} />
+
+{#snippet editor()}
+  <BezierCurveEditor
+    {anchors}
+    {cfg}
+    {stepCount}
+    defaultAnchors={defaults}
+    {offset}
+    autoSmooth={autoSmoothResolved}
+    {lockedAnchorIndex}
+    {onLockedAnchorUnlock}
+    {onAnchorsChange}
+    onOffsetChange={(v) => onOffsetChange(curveKey, v)}
+    onAutoSmoothChange={(v) => onAutoSmoothChange(curveKey, v)}
+  />
+{/snippet}
+
 <div class="curve-section">
   <button
     class="curve-section-toggle"
     type="button"
-    aria-expanded={open}
-    onclick={onToggleOpen}
+    aria-expanded={fullScreen.current ? layerOpen : open}
+    onclick={() => (fullScreen.current ? (layerOpen = true) : onToggleOpen())}
   >
-    <i class="fas" class:fa-chevron-right={!open} class:fa-chevron-down={open} aria-hidden="true"></i>
+    {#if fullScreen.current}
+      <i class="fas fa-up-right-and-down-left-from-center" aria-hidden="true"></i>
+    {:else}
+      <i class="fas" class:fa-chevron-right={!open} class:fa-chevron-down={open} aria-hidden="true"></i>
+    {/if}
     <span class="curve-section-label">{cfg.label}</span>
     <span class="curve-section-summary">
       {#if summary !== 'default'}<span class="curve-section-dot" aria-hidden="true"></span>{/if}
       {summary}
     </span>
   </button>
-  <UIReveal {open}>
-    <BezierCurveEditor
-      {anchors}
-      {cfg}
-      {stepCount}
-      defaultAnchors={defaults}
-      {offset}
-      autoSmooth={autoSmoothResolved}
-      {lockedAnchorIndex}
-      {onLockedAnchorUnlock}
-      {onAnchorsChange}
-      onOffsetChange={(v) => onOffsetChange(curveKey, v)}
-      onAutoSmoothChange={(v) => onAutoSmoothChange(curveKey, v)}
-    />
-  </UIReveal>
+  {#if fullScreen.current}
+    {#if layerOpen}
+      <!-- editor-page carries the --ui-* tokens to the layer's new place in body. -->
+      <div class="curve-full-screen editor-page" role="dialog" aria-modal="true" aria-label="{subject ? `${subject} ` : ''}{cfg.label} curve" use:portal>
+        <header class="curve-full-screen-bar">
+          <span class="curve-full-screen-title">
+            {#if subject}<span class="curve-full-screen-subject">{subject}</span>{/if}
+            <span class="curve-section-label">{cfg.label}</span>
+          </span>
+          <span class="curve-section-summary">{summary}</span>
+          <button type="button" class="curve-full-screen-close" aria-label="Close the {cfg.label} curve" onclick={() => (layerOpen = false)} use:focusOnMount>
+            <i class="fas fa-xmark" aria-hidden="true"></i>
+          </button>
+        </header>
+        <div class="curve-full-screen-body">
+          {@render editor()}
+        </div>
+      </div>
+    {/if}
+  {:else}
+    <UIReveal {open}>
+      {@render editor()}
+    </UIReveal>
+  {/if}
 </div>
 
 <style>
@@ -136,6 +182,69 @@
     color: var(--ui-text-muted);
   }
 
+  .curve-full-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    background: black;
+    color: var(--ui-text-primary);
+  }
+
+  .curve-full-screen-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-8) var(--ui-space-12);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  .curve-full-screen-title {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-8);
+    min-width: 0;
+  }
+
+  .curve-full-screen-subject {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+  }
+
+  .curve-full-screen-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 40px;
+    height: 40px;
+    background: none;
+    border: none;
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-lg);
+    cursor: pointer;
+  }
+
+  .curve-full-screen-close:hover {
+    background: var(--ui-hover);
+  }
+
+  .curve-full-screen-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--ui-space-12);
+    container-type: inline-size;
+  }
+
+  /* The handles scale with the plot's height, so a plot stretched to a tall
+     screen balloons them. Square, up to 60% of the screen. */
+  .curve-full-screen-body :global(.curve-container) {
+    height: min(100cqw, 60vh);
+  }
+
   .curve-section-dot {
     width: 0.375rem;
     height: 0.375rem;