@motion-proto/live-tokens 0.64.0 → 0.64.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.64.2 — A stack can gain a second font
+
+### Fixed
+
+- **A stack could not gain a second font.** "+ add fallback" only ever walked
+  the system-and-generic ladder, and the row `<select>` could only retarget a
+  row that already existed — so the one path to a font was to add a fallback
+  and then change it, and once every fallback was in use the button disabled
+  itself and the path closed. The add button now leads with any project font
+  the stack doesn't carry, names it (`+ add Domine`), and drops it in with the
+  other fonts above the fallbacks.
+
+- **Duplicate slots survived 0.64 and made a stack look frozen.** 0.64 kept a
+  stack persisted by the old add bug renderable, but left the repeats in place:
+  two identical rows are indistinguishable, so dragging one past the other
+  changed nothing on screen, and each repeat ate a rung of the add ladder.
+  Repeats are now dropped as the stack is read, and no row offers a value
+  another row in the same stack holds, so the state can't be re-entered.
+
+## 0.64.1 — The sketch entry point carries its last symbol
+
+### Added
+
+- **`hasPersistedSketchState` joins `@motion-proto/live-tokens/sketch`.** A site
+  moving its visitors off its own storage key has to guard that one-time carry
+  on whether the store has already recorded a decision, or it overwrites a pick
+  the visitor has since made in the Sketchstyle view with the stale one. It was
+  the only symbol that errand still needed and the only one 0.64.0 left inside,
+  so the bundler alias the entry point set out to retire survived for it alone.
+  Reading `lt.sketchTouched` directly was never the answer: the key is ours to
+  rename.
+
 ## 0.64.0 — A site picks the sketch through the front door
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.64.0",
+  "version": "0.64.2",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/core/sketch/index.ts

@@ -58,3 +58,13 @@ export function setSketch(id: string | null): void {
   selectSketchStyle(id);
   setSketchEnabled(true);
 }
+
+/**
+ * Whether the store has recorded a decision of its own in this browser.
+ *
+ * For a consumer carrying visitors over from its own storage key: a one-time
+ * carry has to be guarded on this, or it overwrites a pick the visitor has
+ * since made in the editor's Sketchstyle view with the stale one. Reading the
+ * key directly is not an option worth offering — it is ours to rename.
+ */
+export { hasPersistedSketchState } from './sketchStore';

package/src/editor/ui/FontStackEditor.svelte

@@ -64,11 +64,25 @@
     return slots;
   }
 
+  /** A repeated slot contributes nothing to the CSS list, and two identical
+   *  rows are indistinguishable — dragging one past the other looks like a
+   *  dead control. Stacks written by the pre-0.64 "+ add fallback" bug are
+   *  still in localStorage, so drop repeats on the way in. */
+  function dedupeSlots(slots: FontStackSlot[]): FontStackSlot[] {
+    const seen = new Set<string>();
+    return slots.filter((slot) => {
+      const key = slotKey(slot);
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  }
+
   function ensureAllStacksPresent(current: FontStack[]): FontStack[] {
     const byVar = new Map(current.map((s) => [s.variable, s]));
     return STACK_VARIABLES.map((v) => {
       const stack = byVar.get(v);
-      const slots = withTerminalFallback(v, stack?.slots ?? []);
+      const slots = withTerminalFallback(v, dedupeSlots(stack?.slots ?? []));
       return stack ? { ...stack, slots } : { variable: v, slots };
     });
   }
@@ -136,16 +150,19 @@
     });
   }
 
-  /** Fallbacks offered by "+ add fallback", best match for the variable first.
-   *  Every stack already ships with its preferred generic *and* its preferred
-   *  preset, so both leading candidates are usually taken; the ladder gives the
-   *  button something unused to reach for. */
+  /** What the add button reaches for, in order of preference: a project font
+   *  the stack doesn't carry yet, then the variable's preferred generic and
+   *  preset, then the rest of the system-and-generic ladder. Project fonts lead
+   *  because a stack that already holds every fallback otherwise had no way to
+   *  gain a second font — the row's own <select> could only retarget a row that
+   *  the button had to create first. */
   function addCandidates(variable: FontStackVariable): FontStackSlot[] {
     const generic: GenericFamily =
       variable === '--font-mono' ? 'monospace' : variable === '--font-serif' ? 'serif' : 'sans-serif';
     const preset: SystemCascadePreset =
       variable === '--font-mono' ? 'system-ui-mono' : variable === '--font-serif' ? 'system-ui-serif' : 'system-ui-sans';
     return [
+      ...allFamilies.map((f) => ({ kind: 'project' as const, familyId: f.id })),
       { kind: 'generic', value: generic },
       { kind: 'system', preset },
       ...SYSTEM_PRESETS.map((p) => ({ kind: 'system' as const, preset: p })),
@@ -153,6 +170,20 @@
     ];
   }
 
+  /** The terminal row offers its stack's matching preset and generic, minus
+   *  whatever a row above holds — plus its own current value whatever that is.
+   *  A <select> with no option matching its value renders the first option
+   *  instead, so the row would read as a slot the stack doesn't have. */
+  function terminalOptions(variable: FontStackVariable, slot: FontStackSlot, taken: Set<string>): FontStackSlot[] {
+    const current = slotKey(slot);
+    const pair: FontStackSlot[] = [
+      { kind: 'system', preset: TERMINAL_SYSTEM_BY_VAR[variable] },
+      { kind: 'generic', value: TERMINAL_FALLBACK_BY_VAR[variable] },
+    ];
+    const offered = pair.filter((c) => slotKey(c) === current || !taken.has(slotKey(c)));
+    return offered.some((c) => slotKey(c) === current) ? offered : [slot, ...offered];
+  }
+
   /** A slot duplicated within a stack collides with itself in the keyed each,
    *  so only one the stack doesn't already hold may be added. */
   function nextAddableSlot(variable: FontStackVariable): FontStackSlot | null {
@@ -161,14 +192,23 @@
     return addCandidates(variable).find((c) => !existing.has(slotKey(c))) ?? null;
   }
 
+  function addLabel(variable: FontStackVariable): string {
+    const next = nextAddableSlot(variable);
+    return next?.kind === 'project' ? `+ add ${slotDisplayName(next)}` : '+ add fallback';
+  }
+
+  /** A font joins the other fonts, above the fallbacks; a fallback lands just
+   *  above the terminal, which stays at the bottom. */
+  function insertIndexFor(slots: FontStackSlot[], slot: FontStackSlot): number {
+    if (slot.kind !== 'project') return Math.max(0, slots.length - 1);
+    return slots.reduce((acc, s, i) => (s.kind === 'project' ? i : acc), -1) + 1;
+  }
+
   function addSlot(variable: FontStackVariable) {
     const newSlot = nextAddableSlot(variable);
     if (!newSlot) return;
     updateStack(variable, (slots) => {
-      // Insert above the terminal fallback (always the last slot) so the
-      // terminal stays at the bottom.
-      const insertAt = Math.max(0, slots.length - 1);
-      slots.splice(insertAt, 0, newSlot);
+      slots.splice(insertIndexFor(slots, newSlot), 0, newSlot);
       return slots;
     });
   }
@@ -265,6 +305,9 @@
       <div class="font-stack-list">
         {#each keyedSlots(stack.slots) as { slot, key }, i (key)}
           {@const isTerminal = i === stack.slots.length - 1}
+          <!-- A value another row already holds is off this row's menu, so the
+               stack can't be edited back into the duplicate state. -->
+          {@const taken = new Set(stack.slots.filter((_, j) => j !== i).map(slotKey))}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
             class="slot-row"
@@ -296,28 +339,34 @@
                 onchange={(e) => onSelectChange(e, stack.variable, i)}
               >
                 {#if isTerminal}
-                  {@const sys = TERMINAL_SYSTEM_BY_VAR[stack.variable]}
-                  {@const gen = TERMINAL_FALLBACK_BY_VAR[stack.variable]}
-                  <option value={`system:${sys}`}>{sys === 'system-ui-sans' ? 'System UI (sans)' : sys === 'system-ui-serif' ? 'System UI (serif)' : 'System UI (mono)'}</option>
-                  <option value={`generic:${gen}`}>{gen}</option>
+                  {#each terminalOptions(stack.variable, slot, taken) as opt}
+                    <option value={slotKey(opt)}>{slotDisplayName(opt)}</option>
+                  {/each}
                 {:else}
-                  {#if allFamilies.length > 0}
+                  {@const families = allFamilies.filter((f) => !taken.has(`project:${f.id}`))}
+                  {@const presets = SYSTEM_PRESETS.filter((p) => !taken.has(`system:${p}`))}
+                  {@const generics = GENERIC_VALUES.filter((g) => !taken.has(`generic:${g}`))}
+                  {#if families.length > 0}
                     <optgroup label="Project fonts">
-                      {#each allFamilies as fam}
+                      {#each families as fam}
                         <option value={`project:${fam.id}`}>{fam.name}</option>
                       {/each}
                     </optgroup>
                   {/if}
-                  <optgroup label="System cascade">
-                    {#each SYSTEM_PRESETS as p}
-                      <option value={`system:${p}`}>{p === 'system-ui-sans' ? 'System UI (sans)' : p === 'system-ui-serif' ? 'System UI (serif)' : 'System UI (mono)'}</option>
-                    {/each}
-                  </optgroup>
-                  <optgroup label="Generic">
-                    {#each GENERIC_VALUES as g}
-                      <option value={`generic:${g}`}>{g}</option>
-                    {/each}
-                  </optgroup>
+                  {#if presets.length > 0}
+                    <optgroup label="System cascade">
+                      {#each presets as p}
+                        <option value={`system:${p}`}>{p === 'system-ui-sans' ? 'System UI (sans)' : p === 'system-ui-serif' ? 'System UI (serif)' : 'System UI (mono)'}</option>
+                      {/each}
+                    </optgroup>
+                  {/if}
+                  {#if generics.length > 0}
+                    <optgroup label="Generic">
+                      {#each generics as g}
+                        <option value={`generic:${g}`}>{g}</option>
+                      {/each}
+                    </optgroup>
+                  {/if}
                 {/if}
               </select>
               {#if isTerminal}
@@ -343,10 +392,10 @@
         type="button"
         class="add-fallback"
         disabled={nextAddableSlot(stack.variable) === null}
-        title={nextAddableSlot(stack.variable) === null ? 'Every system and generic fallback is already in this stack' : undefined}
+        title={nextAddableSlot(stack.variable) === null ? 'Every project font and fallback is already in this stack' : undefined}
         onclick={() => addSlot(stack.variable)}
       >
-        + add fallback
+        {addLabel(stack.variable)}
       </button>
     </div>
   {/each}