@motion-proto/live-tokens 0.62.0 → 0.64.0

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,11 +13,11 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-OPYOK2CA.js";
+} from "../chunk-ZHPX7ZYQ.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
-} from "../chunk-Y5CNFSSV.js";
+} from "../chunk-RVE3MNKM.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.62.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/*"
@@ -137,13 +142,15 @@
     "check:token-contract": "node scripts/check-token-contract.mjs",
     "check:preset-themes": "node scripts/check-preset-themes.mjs",
     "check:skills": "node scripts/check-skills.mjs",
+    "check:skill-atlas": "node scripts/sync-skill-atlas.mjs",
     "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
     "sync:docs": "node scripts/sync-docs.mjs --write",
+    "sync:skill-atlas": "node scripts/sync-skill-atlas.mjs --write",
     "seed:preset-theme": "node scripts/seed-preset-theme.mjs",
     "collapse:theme": "node scripts/collapse-theme-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:smoke-install && npm run check:smoke-create"
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0",

package/src/app/site.css

@@ -205,6 +205,22 @@ blockquote {
   letter-spacing: var(--body-sm-letter-spacing);
 }
 
+.editorial-xl {
+  font-family: var(--editorial-xl-font-family);
+  font-size: var(--editorial-xl-font-size);
+  font-weight: var(--editorial-xl-font-weight);
+  line-height: var(--editorial-xl-line-height);
+  letter-spacing: var(--editorial-xl-letter-spacing);
+}
+
+.editorial-lg {
+  font-family: var(--editorial-lg-font-family);
+  font-size: var(--editorial-lg-font-size);
+  font-weight: var(--editorial-lg-font-weight);
+  line-height: var(--editorial-lg-line-height);
+  letter-spacing: var(--editorial-lg-letter-spacing);
+}
+
 .editorial-md {
   font-family: var(--editorial-md-font-family);
   font-size: var(--editorial-md-font-size);

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/preview/lookPreview.ts

@@ -6,6 +6,7 @@ import { batchCssVarChanges, setCssVar, removeCssVar } from '../cssVarSync';
 import { applyFontSources } from '../fonts/fontLoader';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
 import { loadTheme } from '../themes/themeService';
+import { previewSketchStyle, revertSketchStylePreview } from '../sketch/sketchStore';
 
 /**
  * Client-side rendering of a saved file, for browsing looks without committing
@@ -20,6 +21,11 @@ import { loadTheme } from '../themes/themeService';
  * of the same theme produces, and a revert re-derives from the live store
  * rather than replaying DOM values scraped before the preview.
  *
+ * A theme's sketchstyle rides along the same way: `previewTheme` paints it
+ * through `previewSketchStyle`, which reaches the page without touching the
+ * live sketch buffer, and a revert re-derives from that buffer exactly as the
+ * CSS vars do.
+ *
  * One preview is live at a time, whichever kind it is: painting reverts first,
  * so every look is a diff against the user's real state.
  */
@@ -76,6 +82,14 @@ export function liveLook(): RenderedLook {
 
 let livePreview: RenderedLook | null = null;
 let defaultsPromise: Promise<Theme> | null = null;
+// Whether the current preview session has a sketchstyle painted over the live
+// buffer, so a colors-only preview (which never previews sketch) and revert
+// know whether there is anything to hand back.
+let sketchPreviewActive = false;
+// Bumped whenever a preview session ends or is superseded. `previewTheme` awaits
+// the defaults theme, and a Cancel landing inside that await was overwritten when
+// it resolved, stranding a preview the picker believed it had already taken down.
+let generation = 0;
 
 function loadDefaults(): Promise<Theme> {
   // A rejected promise must not be memoized, or one failed fetch (a dev-server
@@ -109,30 +123,55 @@ function applyPreview(look: RenderedLook): void {
   livePreview = look;
 }
 
-/** Paint a whole look: the theme's colors and type and every component config
- *  it carries. */
+/** Paint a whole look: the theme's colors and type, every component config
+ *  it carries, and its sketchstyle — present or not, since a theme with none
+ *  paints crisp regardless of what is live (invariant 3). */
 export async function previewTheme(theme: Theme): Promise<void> {
-  applyPreview(themeLook(theme, await loadDefaults()));
+  const gen = generation;
+  const defaults = await loadDefaults();
+  if (gen !== generation) return;
+  applyPreview(themeLook(theme, defaults));
+  previewSketchStyle(theme.sketchStyle);
+  sketchPreviewActive = true;
 }
 
-/** Paint colors and type over the components as they stand. */
+/** Paint colors and type over the components as they stand. Not a whole
+ *  look, so the sketchstyle stays live too — reverting a sketch preview a
+ *  prior row left painted, if one is running. */
 export function previewColorsAndType(colorsAndType: ColorsAndType): void {
+  generation++;
   applyPreview(colorsAndTypeLook(colorsAndType));
+  if (sketchPreviewActive) {
+    revertSketchStylePreview();
+    sketchPreviewActive = false;
+  }
 }
 
 /** Restore the live editor state. No-op when no preview is running. */
 export function revertPreview(): void {
+  generation++;
   if (!livePreview) return;
   paint(liveLook(), livePreview);
   livePreview = null;
+  if (sketchPreviewActive) {
+    revertSketchStylePreview();
+    sketchPreviewActive = false;
+  }
 }
 
 /** Release the preview without repainting. The caller must immediately load
  * the exact look being previewed into the store. This is the Save handoff: the
  * selected theme is already on screen, so restoring the old live look before
- * applying it would add work and create a visible flash across the request. */
+ * applying it would add work and create a visible flash across the request.
+ * The sketchstyle stays painted for the same reason, though the handoff is not
+ * quite free: when the live state was crisp, `openThemeSketchStyle` writes the
+ * settings before the flag, so the sheet and the filter bank come down and go
+ * straight back up in between. That order is still the right one, since writing
+ * the flag first would paint the OLD dials for a frame. */
 export function commitPreview(): void {
+  generation++;
   livePreview = null;
+  sketchPreviewActive = false;
 }
 
 export function isPreviewing(): boolean {
@@ -141,6 +180,8 @@ export function isPreviewing(): boolean {
 
 /** Test-only: drop the live preview and the cached defaults theme. */
 export function __resetPreviewForTests(): void {
+  generation++;
   livePreview = null;
   defaultsPromise = null;
+  sketchPreviewActive = false;
 }

package/src/editor/core/productionPulse.ts

@@ -35,8 +35,12 @@ export function bumpComponentActiveRevision(): void {
  * component editor's Adopt has to clear it for the panel.
  *
  * Set by the client writes that move the live look (`writeWorkingColorsAndType`,
- * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`); cleared by
- * `adoptLook`. Module-level, so it survives the remounts a view switch causes.
+ * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`, and every
+ * sketch gesture that changes what the effect paints: `setSketchEnabled`,
+ * `updateSketchSettings`, `selectSketchStyle`, `selectSavedSketchStyle`);
+ * cleared by `adoptLook` and by `hydrateAppliedTheme`, on this document and on
+ * every peer an Apply broadcasts to. Module-level, so it survives the
+ * remounts a view switch causes.
  */
 export const liveMovedSinceBake = writable(false);
 

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/maskField.ts

@@ -19,7 +19,7 @@
  * Everything is integer maths on a Float32Array with no DOM, so what a test
  * asserts is what the browser paints.
  */
-import type { SketchSettings } from './sketchPresets';
+import type { SketchStyle } from './sketchStyles';
 
 /** What the tile spans in page px. Blobs are fitted a whole number to the
     tile, which is what lets the lattice wrap; the dial's px reading is the
@@ -111,7 +111,7 @@ function makePerlin(seed: number): (x: number, y: number, period: number) => num
  * wherever the octave crossed zero, which is the marbled look; plain sum is
  * cloud.
  */
-function rawField(s: SketchSettings, seed: number, raster: number, cells: number): Float32Array {
+function rawField(s: SketchStyle, seed: number, raster: number, cells: number): Float32Array {
   const noise = makePerlin(seed);
   const veined = s.maskGrain === 'turbulence';
   const octaves = Math.max(1, Math.round(s.maskOctaves));
@@ -256,7 +256,7 @@ function boxPass(f: Float32Array, n: number, radius: number): Float32Array {
     all four; the levels, the posterising and the blur are one pass each. */
 let rawCache: { key: string; field: Float32Array } | null = null;
 
-function cachedRaw(s: SketchSettings, seed: number): Float32Array {
+function cachedRaw(s: SketchStyle, seed: number): Float32Array {
   const key = [s.maskBlob, s.maskOctaves, s.maskGrain, seed].join('|');
   if (rawCache?.key !== key) {
     const cells = Math.max(1, Math.round(MASK_TILE / s.maskBlob));
@@ -274,7 +274,7 @@ function cachedRaw(s: SketchSettings, seed: number): Float32Array {
  * pass did.
  */
 export function buildMaskField(
-  s: SketchSettings, seed = 9, through?: MaskStage,
+  s: SketchStyle, seed = 9, through?: MaskStage,
 ): { field: Float32Array; raster: number } {
   const raw = cachedRaw(s, seed);
   if (through === 'noise') return { field: raw, raster: RASTER };
@@ -406,7 +406,7 @@ const CACHE_MAX = 6;
 const cache = new Map<string, string>();
 
 /** The field as a `url(...)` for `mask-image`. */
-export function buildMaskUri(s: SketchSettings, seed = 9, through?: MaskStage): string {
+export function buildMaskUri(s: SketchStyle, seed = 9, through?: MaskStage): string {
   const key = [...KEYS.map((k) => s[k]), seed, through ?? 'all'].join('|');
   const hit = cache.get(key);
   if (hit) return hit;

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

@@ -1,7 +1,7 @@
 /**
  * Sketch effect layer.
  *
- * Builds an SVG filter bank and a stylesheet from one SketchSettings and
+ * Builds an SVG filter bank and a stylesheet from one SketchStyle and
  * injects both into every document cssVarSync tracks, so the host page behind
  * the overlay iframe gets the same effect the editor's preview shows.
  *
@@ -16,7 +16,7 @@
  */
 import { getSyncedDocuments } from '../cssVarSync';
 import { buildMaskUri, MASK_TILE } from './maskField';
-import type { SketchSettings } from './sketchPresets';
+import type { SketchStyle } from './sketchStyles';
 
 const DEFS_ATTR = 'data-sketch-defs';
 const STYLE_ATTR = 'data-sketch-style';
@@ -325,7 +325,7 @@ const UNCLIPPED = PART_SPECS.filter((p) => !p.clips).map((p) => p.sel).join(', '
 const CLIPPED = PART_SPECS.filter((p) => p.clips).map((p) => p.sel).join(', ');
 const UNMASKED = PART_SPECS.filter((p) => p.unmasked).map((p) => p.sel).join(', ');
 
-export function buildDefsMarkup(s: SketchSettings): string {
+export function buildDefsMarkup(s: SketchStyle): string {
   /**
    * `warp` is the shape stage: one wave of noise whose wavelength spans a whole
    * component, so the four corners sample different parts of the field and the
@@ -584,7 +584,7 @@ const swing = (travel: number) => String(Number((travel * 2).toFixed(4)));
 /** Squares the displacement wave off around 0.5, its zero, so full amplitude is
     spent along the whole edge rather than only where the wave peaks. Both
     channels take it: the map reads x from R and y from G. */
-function squareOff(s: SketchSettings, from: string, to: string): string {
+function squareOff(s: SketchStyle, from: string, to: string): string {
   if (s.waveform <= 1) return '';
   const slope = s.waveform.toFixed(2);
   const intercept = ((1 - s.waveform) / 2).toFixed(3);
@@ -594,7 +594,7 @@ function squareOff(s: SketchSettings, from: string, to: string): string {
   `</feComponentTransfer>`;
 }
 
-const squaredResult = (s: SketchSettings, from: string, to: string) =>
+const squaredResult = (s: SketchStyle, from: string, to: string) =>
   (s.waveform > 1 ? to : from);
 
 /** Along-stroke pressure wavelength. Low, with a high floor in the transfer
@@ -650,7 +650,7 @@ const RETRACE_SEED = 53;
 const WARP_FREQUENCY = 0.08;
 
 
-export function buildStylesheet(s: SketchSettings): string {
+export function buildStylesheet(s: SketchStyle): string {
   const on = '[data-sketch]';
   const parts = `:is(${PARTS})`;
   const el = `${on} ${parts}`;
@@ -1083,7 +1083,7 @@ function defsNode(doc: Document): SVGSVGElement {
  * This only makes the effect *available*. An element opts in by carrying
  * data-sketch, which is what `setSketchScope` writes.
  */
-export function applySketchLayer(settings: SketchSettings): void {
+export function applySketchLayer(settings: SketchStyle): void {
   const defs = buildDefsMarkup(settings);
   const css = buildStylesheet(settings);
   for (const doc of getSyncedDocuments()) {
@@ -1101,6 +1101,17 @@ export function applySketchLayer(settings: SketchSettings): 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()) {
@@ -1115,7 +1126,7 @@ export function removeSketchLayer(): void {
  * The host page's root and the editor's own preview container are both scopes,
  * which is why this takes an element rather than assuming documentElement.
  */
-export function setSketchScope(el: HTMLElement | null, settings: SketchSettings | null): void {
+export function setSketchScope(el: HTMLElement | null, settings: SketchStyle | null): void {
   if (!el) return;
   if (!settings) {
     el.removeAttribute('data-sketch');