@motion-proto/live-tokens 0.63.0 → 0.64.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # Changelog
 
+## 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.0",
   "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,60 @@
+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);
+}

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

@@ -136,17 +136,34 @@
     });
   }
 
-  function addSlot(variable: FontStackVariable) {
-    const stack = stacks.find((s) => s.variable === variable);
+  /** 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. */
+  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 [
+      { 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 })),
+    ];
+  }
+
+  /** 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 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.
@@ -156,6 +173,20 @@
     });
   }
 
+  /** 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,7 +263,7 @@
         <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}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
@@ -308,7 +339,13 @@
           </div>
         {/each}
       </div>
-      <button type="button" class="add-fallback" onclick={() => addSlot(stack.variable)}>
+      <button
+        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}
+        onclick={() => addSlot(stack.variable)}
+      >
         + add fallback
       </button>
     </div>
@@ -493,8 +530,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));