@motion-proto/live-tokens 0.67.0 → 0.68.1

package/dist-plugin/index.d.cts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.cjs';
-import './dataPaths-DZUzVv8H.cjs';
+import './dataPaths-bJTCEO4H.cjs';
 
 interface ThemeFileApiOptions {
     tokensCssPath: string;

package/dist-plugin/index.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.js';
-import './dataPaths-DZUzVv8H.js';
+import './dataPaths-bJTCEO4H.js';
 
 interface ThemeFileApiOptions {
     tokensCssPath: string;

package/dist-plugin/index.js

@@ -13,7 +13,7 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-T4PMCFJN.js";
+} from "./chunk-2UX6EVVA.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
 } from "./chunk-NE6N66EE.js";
@@ -620,7 +620,7 @@ ${lines.join("\n")}
   }
   function warnOnLegacyLayout(evidence, warn) {
     warn(
-      `[live-tokens] This project still uses the data layout from 0.47 and earlier: ${evidence}. Since 0.48 the whole-look theme files live in \`themes/\` and the colors and type live in \`colors-and-type/\`. Nothing in the data directory was written, the editor cannot save, and ${path.basename(GENERATED_CSS_PATH)} is left exactly as it is. Run \`npx live-tokens migrate\` to move the directories and heal the tree, then restart the dev server.`
+      `[live-tokens] This project still uses the data layout from 0.47 and earlier: ${evidence}. Since 0.48 the whole-theme theme files live in \`themes/\` and the colors and type live in \`colors-and-type/\`. Nothing in the data directory was written, the editor cannot save, and ${path.basename(GENERATED_CSS_PATH)} is left exactly as it is. Run \`npx live-tokens migrate\` to move the directories and heal the tree, then restart the dev server.`
     );
   }
   function warnOnUnmigratedSketchStyles(warn) {
@@ -1377,7 +1377,7 @@ ${lines.join("\n")}
       filled
     });
   }
-  async function handleAdoptLook({ res }) {
+  async function handleAdoptTheme({ res }) {
     const activeName = themesResource.getActiveName();
     if (activeName === "default") {
       jsonResponse(res, 409, {
@@ -1542,7 +1542,7 @@ ${lines.join("\n")}
     { method: "GET", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
-    // Production — the whole-look adopt door
+    // Production — the whole-theme adopt door
     { method: "GET", pattern: SKETCH_STYLES_ROUTE, handler: handleListSketchStyles },
     { method: "PUT", pattern: SKETCH_STYLES_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: SKETCH_STYLES_ROUTE, handler: methodNotAllowed },
@@ -1551,7 +1551,7 @@ ${lines.join("\n")}
     { method: "PUT", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
     { method: "DELETE", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
     { method: "POST", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: methodNotAllowed },
-    { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptLook },
+    { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptTheme },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "DELETE", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed }

package/dist-plugin/migrateData/index.cjs

@@ -1037,7 +1037,7 @@ function synthesizeSectionDividerGradients(stringPart, objectPart) {
 }
 
 // src/editor/core/themes/themeTypes.ts
-var THEME_SCHEMA_VERSION = 4;
+var THEME_SCHEMA_VERSION = 5;
 
 // src/editor/core/components/componentConfigKeys.ts
 var KNOWN_COMPONENT_CONFIG_KEYS = /* @__PURE__ */ new Set([
@@ -1058,7 +1058,7 @@ var pencil_default = {
   name: "Pencil",
   settings: {
     label: "Pencil",
-    blurb: "Two graphite passes on their own seeds, so the outline disagrees with itself the way a hand coming back round does. Tight grain, little else.",
+    blurb: "Two graphite passes on their own seeds, so the outline disagrees with itself the way a hand coming back round does. The grain is drawn long and on the diagonal, the way a pencil shades.",
     fillTravel: 0.75,
     strokeTravel: 1.25,
     wobble: 30,
@@ -1223,15 +1223,15 @@ var hatched_default = {
     pressureMod: 0.45,
     pooling: 0.8,
     strokeInk: 1,
-    maskOn: false,
-    maskBlobX: 100,
-    maskBlobY: 100,
-    maskBlobLinked: true,
-    maskAngle: 0,
-    maskOutputMin: 0.45,
+    maskOn: true,
+    maskBlobX: 10,
+    maskBlobY: 600,
+    maskBlobLinked: false,
+    maskAngle: 150,
+    maskOutputMin: 0.35,
     maskOutputMax: 1,
     maskOctaves: 2,
-    maskGrain: "fractal",
+    maskGrain: "turbulence",
     maskPosterize: 1,
     maskSoftness: 1.5,
     jitterX: 1.5,
@@ -1245,7 +1245,7 @@ var hatched_default = {
     iconMaskOn: false,
     iconMaskScale: 1
   },
-  updatedAt: "2026-08-28T15:47:36.934Z",
+  updatedAt: "2026-08-28T21:17:18.232Z",
   createdAt: "2026-08-28T15:47:36.934Z"
 };
 
@@ -1326,16 +1326,16 @@ var napkin_default = {
     maskBlobY: 150,
     maskBlobLinked: true,
     maskAngle: 0,
-    maskOutputMin: 0.43,
-    maskOutputMax: 0.95,
+    maskOutputMin: 0.62,
+    maskOutputMax: 1,
     maskOctaves: 2,
     maskGrain: "fractal",
     maskPosterize: 2,
-    maskSoftness: 10,
+    maskSoftness: 5,
     jitterX: 6,
     jitterY: 6,
     jitterRot: 1.8,
-    jitterScale: 0.1,
+    jitterScale: 0.075,
     cornerSpread: 20,
     cornerTravel: 17,
     iconTravel: 2.25,
@@ -1371,11 +1371,11 @@ var dry_default = {
     pooling: 1.5,
     strokeInk: 0.4,
     maskOn: true,
-    maskBlobX: 150,
-    maskBlobY: 150,
+    maskBlobX: 170,
+    maskBlobY: 170,
     maskBlobLinked: true,
     maskAngle: 0,
-    maskOutputMin: 0.24,
+    maskOutputMin: 0.57,
     maskOutputMax: 0.91,
     maskOctaves: 2,
     maskGrain: "fractal",
@@ -1392,18 +1392,18 @@ var dry_default = {
     iconMaskOn: true,
     iconMaskScale: 3.8
   },
-  updatedAt: "2026-08-28T15:47:36.934Z",
+  updatedAt: "2026-08-28T21:19:51.383Z",
   createdAt: "2026-08-28T15:47:36.934Z"
 };
 
 // src/editor/core/sketch/sketchStyles.ts
 var SHIPPED_FILES = { pencil: pencil_default, marker: marker_default, whiteboard: whiteboard_default, hatched: hatched_default, dashed: dashed_default, napkin: napkin_default, dry: dry_default };
-var SKETCH_STYLES = Object.fromEntries(
+var SHIPPED_SKETCH_SETTINGS = Object.fromEntries(
   Object.entries(SHIPPED_FILES).map(([id, file]) => [id, file.settings])
 );
 var DEFAULT_SKETCH_STYLE = "marker";
-function hydrateSketchStyle(raw) {
-  const base = SKETCH_STYLES[DEFAULT_SKETCH_STYLE];
+function hydrateSketchSettings(raw) {
+  const base = SHIPPED_SKETCH_SETTINGS[DEFAULT_SKETCH_STYLE];
   const stored = raw ?? {};
   const out = { ...base };
   for (const key of Object.keys(base)) {
@@ -1567,10 +1567,10 @@ function normalizeTheme(raw, resolvers) {
   }
   const componentConfigs = {};
   for (const [comp, value] of Object.entries(asObject(src.componentConfigs) ?? {})) {
-    const embedded = asObject(value);
+    const embedded2 = asObject(value);
     let resolvedConfig;
-    if (embedded) {
-      resolvedConfig = stripFileMarker(embedded);
+    if (embedded2) {
+      resolvedConfig = stripFileMarker(embedded2);
     } else {
       const configName = asString(value, "default");
       const resolved = asObject(resolvers.readComponentConfig(comp, configName));
@@ -1605,8 +1605,8 @@ function normalizeTheme(raw, resolvers) {
       if (!(key in baseAliases)) filled.orphans++;
     }
   }
-  const embeddedSketchStyle = asObject(src.sketchStyle);
-  const sketchStyle = embeddedSketchStyle ? hydrateSketchStyle(embeddedSketchStyle) : void 0;
+  const embedded = asObject(src.sketchSettings) ?? asObject(src.sketchStyle);
+  const sketchSettings = embedded ? hydrateSketchSettings(embedded) : void 0;
   return {
     theme: {
       name: asString(src.name, "Untitled"),
@@ -1616,7 +1616,7 @@ function normalizeTheme(raw, resolvers) {
       colorsAndType,
       componentConfigs,
       componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
-      ...sketchStyle ? { sketchStyle } : {}
+      ...sketchSettings ? { sketchSettings } : {}
     },
     dropped,
     migrated,
@@ -1671,7 +1671,7 @@ function detectLegacyLayout(input) {
   const manifestsDir = input.configuredManifestsDir ?? import_path2.default.join(input.dataDir, "manifests");
   const themesHoldAThemeFile = holdsATheme(input.themesDir);
   if (isDirectory(manifestsDir) && !themesHoldAThemeFile) {
-    return { manifestsDir, evidence: `${manifestsDir} is the pre-0.48 whole-look directory` };
+    return { manifestsDir, evidence: `${manifestsDir} is the pre-0.48 whole-theme directory` };
   }
   if (jsonFiles(input.colorsAndTypeDir).length > 0) return null;
   for (const file of jsonFiles(input.themesDir)) {
@@ -1694,12 +1694,12 @@ function planLegacyRenames(layout, input) {
   const defaultThemes = import_path2.default.join(input.dataDir, "themes");
   if (input.configuredManifestsDir && import_path2.default.resolve(input.configuredManifestsDir) !== import_path2.default.join(input.dataDir, "manifests")) {
     throw new Error(
-      `This project uses the pre-0.48 data layout (${layout.evidence}), and live-tokens.config.json sets the retired "manifestsDir" key to ${input.configuredManifestsDir}. That directory holds the whole looks, which now belong in ${input.themesDir}. Move it there by hand, drop the "manifestsDir" key, then run the migration again.`
+      `This project uses the pre-0.48 data layout (${layout.evidence}), and live-tokens.config.json sets the retired "manifestsDir" key to ${input.configuredManifestsDir}. That directory holds the whole themes, which now belong in ${input.themesDir}. Move it there by hand, drop the "manifestsDir" key, then run the migration again.`
     );
   }
   if (import_path2.default.resolve(input.colorsAndTypeDir) !== import_path2.default.resolve(defaultColorsAndType) || import_path2.default.resolve(input.themesDir) !== import_path2.default.resolve(defaultThemes)) {
     throw new Error(
-      `This project uses the pre-0.48 data layout (${layout.evidence}), and its data directories are configured to custom paths (colorsAndTypeDir=${input.colorsAndTypeDir}, themesDir=${input.themesDir}). The migration cannot tell which directory holds what. Move the old colors-and-type directory to ${input.colorsAndTypeDir} and the old whole-look directory to ${input.themesDir} by hand, then run the migration again.`
+      `This project uses the pre-0.48 data layout (${layout.evidence}), and its data directories are configured to custom paths (colorsAndTypeDir=${input.colorsAndTypeDir}, themesDir=${input.themesDir}). The migration cannot tell which directory holds what. Move the old colors-and-type directory to ${input.colorsAndTypeDir} and the old whole-theme directory to ${input.themesDir} by hand, then run the migration again.`
     );
   }
   const renames = [];

package/dist-plugin/migrateData/index.d.cts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DZUzVv8H.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.cjs';
 
 interface LegacyRename {
     from: string;

package/dist-plugin/migrateData/index.d.ts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DZUzVv8H.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.js';
 
 interface LegacyRename {
     from: string;

package/dist-plugin/migrateData/index.js

@@ -7,7 +7,7 @@ import {
   normalizeTheme,
   planLegacyRenames,
   versionedFileResourceServer
-} from "../chunk-T4PMCFJN.js";
+} from "../chunk-2UX6EVVA.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
 } from "../chunk-NE6N66EE.js";

package/dist-plugin/tokensCssMigrations/index.d.cts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-DZUzVv8H.cjs';
+export { r as readLiveTokensConfig } from '../dataPaths-bJTCEO4H.cjs';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/dist-plugin/tokensCssMigrations/index.d.ts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-DZUzVv8H.js';
+export { r as readLiveTokensConfig } from '../dataPaths-bJTCEO4H.js';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.67.0",
+  "version": "0.68.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -123,9 +123,9 @@
     "./app/fonts.css": "./src/system/styles/fonts.css"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
+    "dev": "VITE_CONFIG_NATIVE_IGNORE_WARNING=true vite",
+    "build": "VITE_CONFIG_NATIVE_IGNORE_WARNING=true vite build",
+    "preview": "VITE_CONFIG_NATIVE_IGNORE_WARNING=true vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/editor/bootstrap.ts

@@ -22,16 +22,16 @@ import * as editorStore from './core/store/editorStore';
 import * as themeDocumentSync from './core/themes/themeDocumentSync';
 import { initializeTheme } from './core/themes/themeInit';
 import { registerComponent, type RegisterComponentEntry } from './component-editor/registry';
-import { registerSketchLook, type RegisterSketchLookInput } from './core/sketch/sketchRegistry';
+import { registerSketchStyle, type RegisterSketchStyleInput } from './core/sketch/sketchRegistry';
 
 export interface BootLiveTokensOptions {
   /** Consumer-authored components to register with the editor before mount. Dev-only. */
   components?: RegisterComponentEntry[];
-  /** Sketchstyles this project ships, joining the shipped looks in every
+  /** Sketchstyles this project ships, joining the shipped sketchstyles in every
       picker. Registered in a build as well as in dev: carrying a customized
       sketchstyle to a published site is the whole point, so these must not sit
       behind the DEV guard `components` sits behind. */
-  sketchLooks?: RegisterSketchLookInput[];
+  sketchStyles?: RegisterSketchStyleInput[];
 }
 
 export async function bootLiveTokens(
@@ -44,10 +44,10 @@ export async function bootLiveTokens(
   columnsOverlay.init();
   editorStore.init();
 
-  // Before the DEV block: `initializeTheme` recovers the open theme's look by
+  // Before the DEV block: `initializeTheme` recovers the open theme's style by
   // name against the pool, so the pool has to be whole by the time it runs.
-  if (opts.sketchLooks) {
-    for (const look of opts.sketchLooks) registerSketchLook(look);
+  if (opts.sketchStyles) {
+    for (const style of opts.sketchStyles) registerSketchStyle(style);
   }
 
   if (import.meta.env.DEV) {

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -4,7 +4,7 @@
   export const component = 'imagelightbox';
 
   // Three parts: tile (closed inline + animated modal surface), overlay (scrim),
-  // chrome (shared toolbar + close-button look). Chrome carries a hover state
+  // chrome (shared toolbar + close-button styling). Chrome carries a hover state
   // for the interactive controls. No second variant.
   const states: Record<string, Token[]> = {
     tile: [

package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte

@@ -29,7 +29,7 @@
     productionTheme,
   } from '../../core/productionPulse';
   import {
-    adoptLook,
+    adoptTheme,
     getActiveTheme,
     getProductionTheme,
     listThemes,
@@ -239,7 +239,7 @@
   }
 
   /**
-   * Adopt ships the whole look, because production is one saved theme: flush
+   * Adopt ships the whole theme, because production is one saved theme: flush
    * this component, save the open theme, publish it. The protected Default
    * theme cannot record what shipped, so it prompts for a theme name first and
    * retries.
@@ -261,7 +261,7 @@
     try {
       if (wasDirty) await persist();
       await saveActiveTheme();
-      await adoptLook();
+      await adoptTheme();
       await refreshProduction();
       bumpProductionRevision();
       adoptFeedback = wasDirty
@@ -401,7 +401,7 @@
         </UISquareButton>
         <UIInfoPopover title="Component Configuration" ariaLabel="About Save and Adopt">
           <p>
-            <strong>Save</strong> keeps your edits in the theme you have open. The theme carries a copy of every component you changed, so the look travels as one file.
+            <strong>Save</strong> keeps your edits in the theme you have open. The theme carries a copy of every component you changed, so the theme travels as one file.
           </p>
           <p>
             <strong>Save As</strong> writes the component's settings to a file of their own, ready to load into any theme.

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

@@ -131,10 +131,10 @@ export function resolveFontStackValues(
  * in an iframe) via the same pipeline used for color variables.
  *
  * Returns the variables it set, so a caller tracking what it has applied — to
- * tear those vars down when switching looks — can record them without keeping
+ * tear those vars down when switching themes — can record them without keeping
  * its own copy of the stack list. A hand-maintained copy silently falls behind
  * whenever a stack is added here, leaving the missed variable stuck at the
- * outgoing look's value; `--font-editorial` did exactly that.
+ * outgoing theme's value; `--font-editorial` did exactly that.
  */
 export function applyFontStacks(
   stacks: FontStack[],

package/src/editor/core/preview/{lookPreview.ts → themePreview.ts}

@@ -9,11 +9,11 @@ import { loadTheme } from '../themes/themeService';
 import { previewSketchStyle, revertSketchStylePreview } from '../sketch/sketchStore';
 
 /**
- * Client-side rendering of a saved file, for browsing looks without committing
- * one. A theme previews as a whole look; a colors-and-type file previews as
+ * Client-side rendering of a saved file, for browsing themes without committing
+ * one. A theme previews as a whole next; a colors-and-type file previews as
  * colors and type over the components the user has right now. Nothing here writes to the server,
  * mutates the editor store, or marks anything dirty: a preview is paint only.
- * Save-As stays honest because `captureLook` reads the server's active files,
+ * Save-As stays honest because `captureThemeContent` reads the server's active files,
  * which a preview never touches.
  *
  * Both painting and reverting run the same derivation the renderer runs on
@@ -27,23 +27,23 @@ import { previewSketchStyle, revertSketchStylePreview } from '../sketch/sketchSt
  * 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.
+ * so every next is a diff against the user's real state.
  */
 
-/** Everything a look puts on the page: the full var set (colors and type,
+/** Everything a next puts on the page: the full var set (colors and type,
  *  components and the composed `--font-*` stacks) plus the sources its faces
  *  come from. */
-export interface RenderedLook {
+export interface RenderedTheme {
   vars: Record<string, string>;
   fontSources: FontSource[];
 }
 
 /**
  * The full var set a theme paints. Components the theme carries no config
- * for render `defaults`' config, matching Apply's complete-look semantics;
+ * for render `defaults`' config, matching Apply's complete-next semantics;
  * configs for components this install lacks are skipped, as Apply skips them.
  */
-export function themeLook(theme: Theme, defaults: Theme): RenderedLook {
+export function renderTheme(theme: Theme, defaults: Theme): RenderedTheme {
   const colorsAndType = structuredClone(theme.colorsAndType);
   migrateColorsAndTypeFonts(colorsAndType);
   const state = colorsAndTypeToState(colorsAndType);
@@ -60,27 +60,27 @@ export function themeLook(theme: Theme, defaults: Theme): RenderedLook {
 }
 
 /**
- * The full var set colors and type paint on their own. They are not a whole look,
+ * The full var set colors and type paint on their own. They are not a whole next,
  * so the components stay as the user has them: `colorsAndTypeToState` carries the live
  * component slice forward (`loadComponentsFromVars`) and strips component-owned
  * vars out of their own bag, which is exactly the composition a preview
  * wants. No defaults fetch, no component reset.
  */
-export function colorsAndTypeLook(colorsAndType: ColorsAndType): RenderedLook {
+export function renderColorsAndType(colorsAndType: ColorsAndType): RenderedTheme {
   const next = structuredClone(colorsAndType);
   migrateColorsAndTypeFonts(next);
   const vars = deriveCssVars(colorsAndTypeToState(next));
   return { vars, fontSources: next.fontSources ?? [] };
 }
 
-/** The look the editor store currently describes — the state a revert returns to. */
-export function liveLook(): RenderedLook {
+/** The next the editor store currently describes — the state a revert returns to. */
+export function liveTheme(): RenderedTheme {
   const state = get(editorState);
   const vars = deriveCssVars(state);
   return { vars, fontSources: state.fonts.sources };
 }
 
-let livePreview: RenderedLook | null = null;
+let livePreview: RenderedTheme | 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
@@ -101,7 +101,7 @@ function loadDefaults(): Promise<Theme> {
   return defaultsPromise;
 }
 
-function paint(next: RenderedLook, from: RenderedLook): void {
+function paint(next: RenderedTheme, from: RenderedTheme): void {
   batchCssVarChanges(() => {
     for (const [name, value] of Object.entries(next.vars)) {
       if (from.vars[name] !== value) setCssVar(name, value);
@@ -114,33 +114,33 @@ function paint(next: RenderedLook, from: RenderedLook): void {
 }
 
 /**
- * Show `look` on the page. Re-entrant previews diff directly from the look
+ * Show `next` on the page. Re-entrant previews diff directly from the next
  * already painted; only Cancel restores the live store projection. This avoids
  * repainting the live theme as an invisible intermediate on every picker row.
  */
-function applyPreview(look: RenderedLook): void {
-  paint(look, livePreview ?? liveLook());
-  livePreview = look;
+function applyPreview(next: RenderedTheme): void {
+  paint(next, livePreview ?? liveTheme());
+  livePreview = next;
 }
 
-/** Paint a whole look: the theme's colors and type, every component config
+/** Paint a whole next: 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> {
   const gen = generation;
   const defaults = await loadDefaults();
   if (gen !== generation) return;
-  applyPreview(themeLook(theme, defaults));
-  previewSketchStyle(theme.sketchStyle);
+  applyPreview(renderTheme(theme, defaults));
+  previewSketchStyle(theme.sketchSettings);
   sketchPreviewActive = true;
 }
 
 /** 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
+ *  next, 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));
+  applyPreview(renderColorsAndType(colorsAndType));
   if (sketchPreviewActive) {
     revertSketchStylePreview();
     sketchPreviewActive = false;
@@ -151,7 +151,7 @@ export function previewColorsAndType(colorsAndType: ColorsAndType): void {
 export function revertPreview(): void {
   generation++;
   if (!livePreview) return;
-  paint(liveLook(), livePreview);
+  paint(liveTheme(), livePreview);
   livePreview = null;
   if (sketchPreviewActive) {
     revertSketchStylePreview();
@@ -160,11 +160,11 @@ export function revertPreview(): void {
 }
 
 /** 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
+ * the exact next being previewed into the store. This is the Save handoff: the
+ * selected theme is already on screen, so restoring the old live next before
  * 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
+ * quite free: when the live state was crisp, `openThemeSketchSettings` 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. */

package/src/editor/core/productionPulse.ts

@@ -28,17 +28,17 @@ export function bumpComponentActiveRevision(): void {
 }
 
 /**
- * The live look has moved past the last bake. Only Adopt bakes the CSS, so a
+ * The live theme has moved past the last bake. Only Adopt bakes the CSS, so a
  * buffer write or a theme save after one leaves production a version behind,
  * and no pointer file records when the bake happened. Every surface reads the
  * one signal: a component save has to reach the theme panel's Adopt, and a
  * component editor's Adopt has to clear it for the panel.
  *
- * Set by the client writes that move the live look (`writeWorkingColorsAndType`,
+ * Set by the client writes that move the live theme (`writeWorkingColorsAndType`,
  * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`, and every
  * sketch gesture that changes what the effect paints: `setSketchEnabled`,
  * `updateSketchSettings`, `selectSketchStyle`);
- * cleared by `adoptLook` and by `hydrateAppliedTheme`, on this document and on
+ * cleared by `adoptTheme` 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.
  */