@motion-proto/live-tokens 0.62.0 → 0.63.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.63.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -137,13 +137,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/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/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()) {
@@ -1115,7 +1115,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');