@motion-proto/live-tokens 0.63.0 → 0.64.2

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # 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
+
+- **A public entry point for the sketch layer, `@motion-proto/live-tokens/sketch`.**
+  A site that wants to offer its visitors a sketchstyle picker had nothing to
+  build one from: nothing sketch-related was exported, so the only route to the
+  looks was a bundler alias aimed at `src/editor/core/sketch/`. The new entry
+  carries `SKETCH_LOOKS` (the shipped looks, with the label and blurb a picker
+  shows), `setSketch(id | null)`, and the `sketchPick` store. All of it routes
+  through `sketchStore`, which stays the one owner of the live look, so a pick
+  made on the page and a dial moved in the Sketchstyle view are the same state.
+  `setSketch` throws on an id it does not know rather than returning quietly.
+
+  `sketchPick` reports three states, not two. The effect can be on under a look
+  no shipped sketchstyle names — one saved to a file, or one a theme carried —
+  and a picker that folds that into "off" tells the visitor the page is crisp
+  while it is visibly drawn. A dial moved off a shipped look still names it,
+  which is `selectSketchStyle`'s own rule: the pick says where the look came
+  from and `sketchDirty` says it has since drifted.
+
+### Fixed
+
+- **"+ add fallback" took the Variables tab down.** The button offered a stack
+  its preferred generic, and substituted the matching System UI preset when that
+  generic was already present — but never checked whether the preset was there
+  too. Every shipped stack carries both, so the click appended a slot the stack
+  already held. Slot rows are keyed by their own content, so the duplicate threw
+  `each_key_duplicate` and killed the tab; the mutation had already been
+  debounce-written to localStorage by then, so a reload crashed on the same key
+  rather than recovering, and font editing was over until storage was cleared by
+  hand. The button now walks the whole system-and-generic ladder for a fallback
+  the stack lacks, and disables itself once every one is in use. Rows are also
+  keyed to survive a repeat, so a stack already persisted in the broken state
+  renders and the extra row can be removed with its own X.
+
+- **A family Google Fonts rejected reported nothing useful.** Google omits
+  `Access-Control-Allow-Origin` from its error responses, so in a browser a 400
+  rejects the fetch rather than arriving as `ok: false` — which left the
+  `not on Google Fonts` branch unreachable and put a bare CORS failure in its
+  place. Both shapes now read as "no CSS came back". The retry that follows is
+  why it matters: the CSS2 API matches family names case-sensitively, and
+  `domine` 400s where `Domine` resolves, so a lower-cased typing is tried again
+  in Google's own casing before the family is called missing.
+
+- **The by-name field accepted a pasted embed.** The whole `<link>` snippet went
+  to Google as a family name, and the 400 it earned came back as the same opaque
+  CORS failure. The field now recognises an embed or an `@font-face` block and
+  points at the Paste tab, which has parsed both all along.
+
+- **The Sketchstyle view's dials went dead against a layer the store did not
+  install.** `installed` was a module-local flag, so a layer painted by anything
+  but `render` left the store believing the page was crisp: the on/off switch
+  had nothing to take down, and every dial wrote settings that reached no
+  document — silently, since the page was drawn the whole time. It is now read
+  from the DOM, for the reason `applySketchLayer` already compares against it:
+  with the overlay open two instances of the module render into one page, and
+  the document is the only ground they share.
+
 ## 0.63.0 — A theme carries its sketchstyle
 
 ### Added

package/dist-plugin/fontPairing/index.cjs

@@ -260,15 +260,39 @@ function censusFrom(css, requested) {
     italics: family.italics === true
   };
 }
+async function probeFor(fetcher, url2) {
+  try {
+    const res = await fetcher(url2);
+    return res.ok ? { res } : { status: res.status };
+  } catch {
+    return {};
+  }
+}
+function titleCase(name) {
+  return name.replace(/\S+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());
+}
 async function resolveGoogleFont(name, fetcher) {
-  const probeUrl = discoveryUrl(name);
-  const probe = await fetcher(probeUrl);
-  if (!probe.ok) {
+  const requested = name.trim();
+  const spellings = [.../* @__PURE__ */ new Set([requested, titleCase(requested)])];
+  let probe;
+  let probeUrl = discoveryUrl(requested);
+  let status;
+  for (const spelling of spellings) {
+    const candidateUrl = discoveryUrl(spelling);
+    const attempt = await probeFor(fetcher, candidateUrl);
+    if (attempt.res) {
+      probe = attempt.res;
+      probeUrl = candidateUrl;
+      break;
+    }
+    status ??= attempt.status;
+  }
+  if (!probe) {
     throw new Error(
-      `"${name}" is not on Google Fonts (the API answered ${probe.status}). Check the spelling against fonts.google.com.`
+      `"${requested}" is not on Google Fonts` + (status === void 0 ? "" : ` (the API answered ${status})`) + `. Check the spelling against fonts.google.com.`
     );
   }
-  const census = censusFrom(await probe.text(), name);
+  const census = censusFrom(await probe.text(), requested);
   const candidates = [persistUrlFor(census.name, census.weights, census.italics)];
   const enumerated = census.weights.length > 0 ? url(
     census.name,
@@ -278,8 +302,8 @@ async function resolveGoogleFont(name, fetcher) {
   const bare = url(census.name);
   if (!candidates.includes(bare)) candidates.push(bare);
   for (const candidate of candidates) {
-    const res = await fetcher(candidate);
-    if (!res.ok) continue;
+    const { res } = await probeFor(fetcher, candidate);
+    if (!res) continue;
     const served = censusFrom(await res.text(), census.name);
     return {
       name: census.name,

package/dist-plugin/fontPairing/index.js

@@ -218,15 +218,39 @@ function censusFrom(css, requested) {
     italics: family.italics === true
   };
 }
+async function probeFor(fetcher, url2) {
+  try {
+    const res = await fetcher(url2);
+    return res.ok ? { res } : { status: res.status };
+  } catch {
+    return {};
+  }
+}
+function titleCase(name) {
+  return name.replace(/\S+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());
+}
 async function resolveGoogleFont(name, fetcher) {
-  const probeUrl = discoveryUrl(name);
-  const probe = await fetcher(probeUrl);
-  if (!probe.ok) {
+  const requested = name.trim();
+  const spellings = [.../* @__PURE__ */ new Set([requested, titleCase(requested)])];
+  let probe;
+  let probeUrl = discoveryUrl(requested);
+  let status;
+  for (const spelling of spellings) {
+    const candidateUrl = discoveryUrl(spelling);
+    const attempt = await probeFor(fetcher, candidateUrl);
+    if (attempt.res) {
+      probe = attempt.res;
+      probeUrl = candidateUrl;
+      break;
+    }
+    status ??= attempt.status;
+  }
+  if (!probe) {
     throw new Error(
-      `"${name}" is not on Google Fonts (the API answered ${probe.status}). Check the spelling against fonts.google.com.`
+      `"${requested}" is not on Google Fonts` + (status === void 0 ? "" : ` (the API answered ${status})`) + `. Check the spelling against fonts.google.com.`
     );
   }
-  const census = censusFrom(await probe.text(), name);
+  const census = censusFrom(await probe.text(), requested);
   const candidates = [persistUrlFor(census.name, census.weights, census.italics)];
   const enumerated = census.weights.length > 0 ? url(
     census.name,
@@ -236,8 +260,8 @@ async function resolveGoogleFont(name, fetcher) {
   const bare = url(census.name);
   if (!candidates.includes(bare)) candidates.push(bare);
   for (const candidate of candidates) {
-    const res = await fetcher(candidate);
-    if (!res.ok) continue;
+    const { res } = await probeFor(fetcher, candidate);
+    if (!res) continue;
     const served = censusFrom(await res.text(), census.name);
     return {
       name: census.name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.63.0",
+  "version": "0.64.2",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -95,6 +95,11 @@
       "types": "./src/system/backdrop/index.ts",
       "default": "./src/system/backdrop/index.ts"
     },
+    "./sketch": {
+      "svelte": "./src/editor/core/sketch/index.ts",
+      "types": "./src/editor/core/sketch/index.ts",
+      "default": "./src/editor/core/sketch/index.ts"
+    },
     "./components/*": {
       "svelte": "./src/system/components/*",
       "default": "./src/system/components/*"

package/src/editor/core/fonts/googleFontsUrl.ts

@@ -77,6 +77,28 @@ function censusFrom(css: string, requested: string): { name: string; weights: nu
   };
 }
 
+/**
+ * Google omits `Access-Control-Allow-Origin` from its *error* responses, so in
+ * a browser a 400 rejects the promise instead of arriving as `ok: false`. Both
+ * shapes mean the same thing here — no CSS came back — so collapse them, and
+ * keep the status when there was one to report.
+ */
+async function probeFor(fetcher: CssFetcher, url: string): Promise<{ res?: CssResponse; status?: number }> {
+  try {
+    const res = await fetcher(url);
+    return res.ok ? { res } : { status: res.status };
+  } catch {
+    return {};
+  }
+}
+
+/** `family=domine` answers 400 where `family=Domine` resolves — the CSS2 API
+ *  matches family names case-sensitively. Retry a lower-cased typing in the
+ *  casing Google actually uses rather than reporting the font as missing. */
+function titleCase(name: string): string {
+  return name.replace(/\S+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());
+}
+
 /**
  * Verify a family exists on Google Fonts and settle on the URL to persist.
  * Two requests in the common case: one to take the census, one to confirm the
@@ -84,15 +106,29 @@ function censusFrom(css: string, requested: string): { name: string; weights: nu
  * answers 400, so the enumerated form is the fallback rather than the guess.
  */
 export async function resolveGoogleFont(name: string, fetcher: CssFetcher): Promise<ResolvedGoogleFont> {
-  const probeUrl = discoveryUrl(name);
-  const probe = await fetcher(probeUrl);
-  if (!probe.ok) {
+  const requested = name.trim();
+  const spellings = [...new Set([requested, titleCase(requested)])];
+  let probe: CssResponse | undefined;
+  let probeUrl = discoveryUrl(requested);
+  let status: number | undefined;
+  for (const spelling of spellings) {
+    const candidateUrl = discoveryUrl(spelling);
+    const attempt = await probeFor(fetcher, candidateUrl);
+    if (attempt.res) {
+      probe = attempt.res;
+      probeUrl = candidateUrl;
+      break;
+    }
+    status ??= attempt.status;
+  }
+  if (!probe) {
     throw new Error(
-      `"${name}" is not on Google Fonts (the API answered ${probe.status}). ` +
-        `Check the spelling against fonts.google.com.`,
+      `"${requested}" is not on Google Fonts` +
+        (status === undefined ? '' : ` (the API answered ${status})`) +
+        `. Check the spelling against fonts.google.com.`,
     );
   }
-  const census = censusFrom(await probe.text(), name);
+  const census = censusFrom(await probe.text(), requested);
 
   const candidates = [persistUrlFor(census.name, census.weights, census.italics)];
   const enumerated = census.weights.length > 0
@@ -108,8 +144,8 @@ export async function resolveGoogleFont(name: string, fetcher: CssFetcher): Prom
   if (!candidates.includes(bare)) candidates.push(bare);
 
   for (const candidate of candidates) {
-    const res = await fetcher(candidate);
-    if (!res.ok) continue;
+    const { res } = await probeFor(fetcher, candidate);
+    if (!res) continue;
     const served = censusFrom(await res.text(), census.name);
     return {
       name: census.name,

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

@@ -0,0 +1,70 @@
+import { derived, type Readable } from 'svelte/store';
+import { SKETCH_STYLES } from './sketchStyles';
+import { selectSketchStyle, setSketchEnabled, sketchEnabled, sketchStyleName } from './sketchStore';
+
+export interface SketchLook {
+  /** What `setSketch` takes. */
+  id: string;
+  label: string;
+  blurb: string;
+}
+
+/** The shipped sketchstyles. A picker adds its own "None" row: off is a state
+    of the effect, not one of the looks. */
+export const SKETCH_LOOKS: readonly SketchLook[] = Object.entries(SKETCH_STYLES).map(
+  ([id, style]) => ({ id, label: style.label, blurb: style.blurb }),
+);
+
+/**
+ * What the page is drawing with. Three states, not two: the effect can be on
+ * under a look no shipped sketchstyle names — one saved to a file, or one a
+ * theme carried — and a picker that collapses that into `off` tells the
+ * visitor the page is crisp while it is visibly drawn.
+ *
+ * A dial moved off a shipped look keeps naming it, which is `selectSketchStyle`'s
+ * own rule: the pick says where the look came from, and `sketchDirty` says it
+ * has since drifted.
+ */
+export type SketchPick =
+  | { state: 'off' }
+  | { state: 'look'; look: SketchLook }
+  | { state: 'adjusted' };
+
+export const sketchPick: Readable<SketchPick> = derived(
+  [sketchEnabled, sketchStyleName],
+  ([on, name]): SketchPick => {
+    if (!on) return { state: 'off' };
+    const look = SKETCH_LOOKS.find((l) => l.id === name);
+    return look ? { state: 'look', look } : { state: 'adjusted' };
+  },
+);
+
+/**
+ * Draw the page with one of the shipped looks, or `null` for none.
+ *
+ * The only supported way for a consumer to drive the effect. Reaching for
+ * `applySketchLayer` instead paints a stylesheet the store does not know it
+ * owns, and every dial in the Sketchstyle view then writes state that reaches
+ * nothing — silently, since the page is already drawn.
+ */
+export function setSketch(id: string | null): void {
+  if (id === null) {
+    setSketchEnabled(false);
+    return;
+  }
+  if (!(id in SKETCH_STYLES)) {
+    throw new Error(`Unknown sketchstyle "${id}". Ids come from SKETCH_LOOKS.`);
+  }
+  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/core/sketch/sketchLayer.ts

@@ -1101,6 +1101,17 @@ export function applySketchLayer(settings: SketchStyle): void {
   }
 }
 
+/**
+ * Whether the effect's nodes are in place. Read from the DOM for the reason
+ * `applySketchLayer` compares against it: two instances of this module render
+ * into one page while the overlay is open, so a flag held in either one cannot
+ * see what the other installed.
+ */
+export function sketchLayerInstalled(): boolean {
+  if (typeof document === 'undefined') return false;
+  return getSyncedDocuments().some((doc) => doc.head.querySelector(`style[${STYLE_ATTR}]`) !== null);
+}
+
 /** Remove the injected nodes and every scope attribute from all synced documents. */
 export function removeSketchLayer(): void {
   for (const doc of getSyncedDocuments()) {

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

@@ -5,7 +5,13 @@ import {
   hydrateSketchStyle,
   type SketchStyle,
 } from './sketchStyles';
-import { applySketchLayer, hostRoot, removeSketchLayer, setSketchScope } from './sketchLayer';
+import {
+  applySketchLayer,
+  hostRoot,
+  removeSketchLayer,
+  setSketchScope,
+  sketchLayerInstalled,
+} from './sketchLayer';
 import { liveMovedSinceBake } from '../productionPulse';
 import {
   deleteSketchStyle,
@@ -276,17 +282,13 @@ function persist(key: string, value: string): void {
     itself between import and first render. */
 let pageRoot: HTMLElement | null = null;
 
-let installed = false;
-
 function render(enabled: boolean, settings: SketchStyle): void {
   if (typeof document === 'undefined') return;
   if (!enabled) {
-    if (installed) removeSketchLayer();
-    installed = false;
+    if (sketchLayerInstalled()) removeSketchLayer();
     return;
   }
   applySketchLayer(settings);
-  installed = true;
   // The editor's own chrome must never pick the effect up. Two roots qualify:
   // the host page behind the overlay iframe, and this document while it is
   // showing a page. The preview container scopes itself.
@@ -303,10 +305,7 @@ function render(enabled: boolean, settings: SketchStyle): void {
     Sketchstyle view's own stage crisp for good, Cancel included. */
 function paintPreviewRoots(style: SketchStyle | undefined): void {
   if (typeof document === 'undefined') return;
-  if (style) {
-    applySketchLayer(style);
-    installed = true;
-  }
+  if (style) applySketchLayer(style);
   setSketchScope(hostRoot(), style ?? null);
   setSketchScope(pageRoot, style ?? null);
 }

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,26 +150,83 @@
     });
   }
 
-  function addSlot(variable: FontStackVariable) {
-    const stack = stacks.find((s) => s.variable === variable);
+  /** 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 })),
+      ...GENERIC_VALUES.map((g) => ({ kind: 'generic' as const, value: g })),
+    ];
+  }
+
+  /** 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 {
+    const stack = stacks.find((s) => s.variable === variable);
     const existing = new Set((stack?.slots ?? []).map(slotKey));
-    let newSlot: FontStackSlot = { kind: 'generic', value: generic };
-    if (existing.has(slotKey(newSlot))) {
-      const preset: SystemCascadePreset =
-        variable === '--font-mono' ? 'system-ui-mono' : variable === '--font-serif' ? 'system-ui-serif' : 'system-ui-sans';
-      newSlot = { kind: 'system', preset };
-    }
+    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;
     });
   }
 
+  /** Two identical slots in one stack would collide in the keyed each and throw
+   *  `each_key_duplicate`, taking the whole tab down — and the bad stack is
+   *  already persisted by then, so the crash repeats on every reload. Suffix
+   *  repeats so such a stack renders and can be edited back into shape. */
+  function keyedSlots(slots: FontStackSlot[]): { slot: FontStackSlot; key: string }[] {
+    const seen = new Map<string, number>();
+    return slots.map((slot) => {
+      const base = slotKey(slot);
+      const n = seen.get(base) ?? 0;
+      seen.set(base, n + 1);
+      return { slot, key: n === 0 ? base : `${base}#${n}` };
+    });
+  }
+
   /* Drag UX: the source row lifts (opacity, shadow); a white insertion bar
      sits in the gap between rows at the projected drop position. The array
      is only mutated on drop. animate:flip then slides every row to its new
@@ -232,8 +303,11 @@
         <span class="stack-variable">{variableLabel(stack.variable)}</span>
       </div>
       <div class="font-stack-list">
-        {#each stack.slots as slot, i (slotKey(slot))}
+        {#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"
@@ -265,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}
@@ -308,8 +388,14 @@
           </div>
         {/each}
       </div>
-      <button type="button" class="add-fallback" onclick={() => addSlot(stack.variable)}>
-        + add fallback
+      <button
+        type="button"
+        class="add-fallback"
+        disabled={nextAddableSlot(stack.variable) === null}
+        title={nextAddableSlot(stack.variable) === null ? 'Every project font and fallback is already in this stack' : undefined}
+        onclick={() => addSlot(stack.variable)}
+      >
+        {addLabel(stack.variable)}
       </button>
     </div>
   {/each}
@@ -493,8 +579,9 @@
     border-radius: var(--ui-radius-sm);
     cursor: pointer;
   }
-  .add-fallback:hover {
+  .add-fallback:hover:not(:disabled) {
     color: var(--ui-text-primary);
     border-color: var(--ui-border);
   }
+  .add-fallback:disabled { opacity: 0.35; cursor: not-allowed; }
 </style>

package/src/editor/ui/ProjectFontsSection.svelte

@@ -118,6 +118,12 @@
       nameError = 'Enter a family name';
       return;
     }
+    // Pasting the whole embed snippet here would otherwise be sent to Google as
+    // a family name, and the 400 comes back as an opaque CORS failure.
+    if (extractFontsUrl(nameInput) || /@font-face/i.test(nameInput)) {
+      nameError = 'That looks like an embed — use Paste instead of a family name';
+      return;
+    }
     nameDiscovering = true;
     try {
       nameResolved = await resolveGoogleFont(nameInput, (url) => fetch(url));