@motion-proto/live-tokens 0.67.0 → 0.68.1

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

@@ -1,12 +1,12 @@
 import { derived, get, writable } from 'svelte/store';
 import {
-  SKETCH_STYLES,
+  SHIPPED_SKETCH_SETTINGS,
   DEFAULT_SKETCH_STYLE,
   THEME_SKETCH_ID,
-  hydrateSketchStyle,
-  type SketchStyle,
+  hydrateSketchSettings,
+  type SketchStyleSettings,
 } from './sketchStyles';
-import { lookById, replaceRegisteredLooks, sketchLooks } from './sketchRegistry';
+import { sketchStyleById, replaceRegisteredSketchStyles, sketchStyles } from './sketchRegistry';
 import {
   applySketchLayer,
   hostRoot,
@@ -26,7 +26,9 @@ import {
 
 const ENABLED_KEY = 'lt.sketchEnabled';
 const SETTINGS_KEY = 'lt.sketchSettings';
-const STYLE_NAME_KEY = 'lt.sketchStyleName';
+/** The stored key keeps its old spelling. It is a browser's saved selection,
+    so renaming the string would drop every visitor's pick on upgrade. */
+const SELECTED_ID_KEY = 'lt.sketchStyleName';
 const BASELINE_KEY = 'lt.sketchBaseline';
 /** Set only by a genuine user decision (`markSketchTouched`), never by the
     `subscribe` write-back below. That write-back plants the four keys above
@@ -66,7 +68,7 @@ export function hasPersistedSketchState(): boolean {
 }
 
 /** Called from every control a user can act on: a dial, a sketchstyle pick, the
-    on/off switch. Never from `openThemeSketchStyle` or the storage-sync `adopt`
+    on/off switch. Never from `openThemeSketchSettings` or the storage-sync `adopt`
     path, both of which write the same four keys as a side effect of state
     this browser did not decide on its own. */
 function markSketchTouched(): void {
@@ -83,20 +85,20 @@ function readEnabled(): boolean {
   }
 }
 
-function readSettings(): SketchStyle {
+function readSettings(): SketchStyleSettings {
   try {
     const raw = localStorage.getItem(SETTINGS_KEY);
-    if (raw) return hydrateSketchStyle(JSON.parse(raw));
+    if (raw) return hydrateSketchSettings(JSON.parse(raw));
   } catch {
     // fall through to the default sketchstyle
   }
-  return { ...SKETCH_STYLES[DEFAULT_SKETCH_STYLE] };
+  return { ...SHIPPED_SKETCH_SETTINGS[DEFAULT_SKETCH_STYLE] };
 }
 
-function readBaseline(): SketchStyle | null {
+function readBaseline(): SketchStyleSettings | null {
   try {
     const raw = localStorage.getItem(BASELINE_KEY);
-    if (raw) return hydrateSketchStyle(JSON.parse(raw));
+    if (raw) return hydrateSketchSettings(JSON.parse(raw));
   } catch {
     // fall through
   }
@@ -108,14 +110,14 @@ function readBaseline(): SketchStyle | null {
     it. Stripped on read below; delete a release after that ships. */
 const RETIRED_USER_PREFIX = 'user:';
 
-/** Deliberately unvalidated. Looks are registered after this module is
+/** Deliberately unvalidated. Sketchstyles are registered after this module is
     imported, so an id it has never heard of is the normal case rather than a
     fault: `selectSketchStyle` no-ops on one, and `sketchPick` already reports
-    a look nothing names as `adjusted`. Only a browser that has stored nothing
+    a style nothing names as `adjusted`. Only a browser that has stored nothing
     falls back. */
-function readStyleName(): string {
+function readSelectedId(): string {
   try {
-    const name = localStorage.getItem(STYLE_NAME_KEY);
+    const name = localStorage.getItem(SELECTED_ID_KEY);
     if (name !== null) {
       return name.startsWith(RETIRED_USER_PREFIX) ? name.slice(RETIRED_USER_PREFIX.length) : name;
     }
@@ -128,39 +130,39 @@ function readStyleName(): string {
 /** Off by default: the effect paints nothing until the open theme's own
     sketchstyle, or a decision this browser already recorded, says otherwise. */
 export const sketchEnabled = writable<boolean>(readEnabled());
-export const sketchSettings = writable<SketchStyle>(readSettings());
-/** The sketchstyle the dials started from. It survives dial moves, so the grid
-    keeps showing what the current look is closest to. Any id in the pool, or
-    `THEME_SKETCH_ID` for the look the open theme carries; empty only when
-    nothing was picked, or the picked file was deleted. */
-export const sketchStyleName = writable<string>(readStyleName());
+export const sketchSettings = writable<SketchStyleSettings>(readSettings());
+/** Id of the sketchstyle the dials started from. It survives dial moves, so the
+    grid keeps showing what the current settings are closest to. Any id in the
+    pool, or `THEME_SKETCH_ID` for settings the open theme carries that no file
+    holds; empty only when nothing was picked, or the picked file was deleted. */
+export const selectedSketchStyleId = writable<string>(readSelectedId());
 
 /** The settings as the selected sketchstyle defined them. Kept beside the live
     settings so "modified" is derived by comparison rather than tracked as a
     flag: dial a value back to where it started and the tab stops claiming a
     change, with no bookkeeping to get wrong. */
-export const sketchBaseline = writable<SketchStyle | null>(readBaseline());
+export const sketchBaseline = writable<SketchStyleSettings | null>(readBaseline());
 
 /** Dial-set fields only. `label` and `blurb` name the sketchstyle rather than
-    describe the look, and no dial writes them. */
-export function sameLook(a: SketchStyle, b: SketchStyle): boolean {
-  return (Object.keys(a) as (keyof SketchStyle)[])
+    describe the style, and no dial writes them. */
+export function sameSketchStyle(a: SketchStyleSettings, b: SketchStyleSettings): boolean {
+  return (Object.keys(a) as (keyof SketchStyleSettings)[])
     .filter((k) => k !== 'label' && k !== 'blurb')
     .every((k) => a[k] === b[k]);
 }
 
 export const sketchDirty = derived(
   [sketchSettings, sketchBaseline],
-  ([settings, baseline]) => baseline !== null && !sameLook(settings, baseline),
+  ([settings, baseline]) => baseline !== null && !sameSketchStyle(settings, baseline),
 );
 
 export const sketchBlurb = derived(sketchSettings, (s) => s.blurb);
 
-/** The live look as a theme would carry it: the dials when the effect is
+/** The live style as a theme would carry it: the dials when the effect is
     on, nothing when it is off (RJC 1). A copy, not the store's own object,
     so a caller holding onto the result can never observe a later dial move
     through it. */
-export function liveSketchStyle(): SketchStyle | undefined {
+export function liveSketchSettings(): SketchStyleSettings | undefined {
   return get(sketchEnabled) ? { ...get(sketchSettings) } : undefined;
 }
 
@@ -175,25 +177,25 @@ export function setSketchEnabled(enabled: boolean): void {
 
 /** What the open theme holds, so "unsaved" is a comparison rather than a
     flag (RJC 5). Set by every path that opens or saves a theme. */
-export const themeSketchStyle = writable<SketchStyle | undefined>(undefined);
+export const themeSketchSettings = writable<SketchStyleSettings | undefined>(undefined);
 
 /** Open a theme's sketchstyle: the dials, the on/off state, and the name
     recovered by comparison (RJC 3). Overwrites the live buffer, which
     is what opening a theme means everywhere else (RJC 6). The name is recovered
-    over the whole pool, so a theme carrying a look a saved file also holds is
+    over the whole pool, so a theme carrying a style a saved file also holds is
     named by that file rather than falling back to `THEME_SKETCH_ID`. */
-export function openThemeSketchStyle(sketchStyle: SketchStyle | undefined): void {
-  themeSketchStyle.set(sketchStyle);
-  if (!sketchStyle) {
+export function openThemeSketchSettings(settings: SketchStyleSettings | undefined): void {
+  themeSketchSettings.set(settings);
+  if (!settings) {
     sketchEnabled.set(false);
     sketchBaseline.set(null);
-    sketchStyleName.set('');
+    selectedSketchStyleId.set('');
     return;
   }
-  const matched = get(sketchLooks).find((look) => sameLook(look.settings, sketchStyle))?.id;
-  sketchSettings.set({ ...sketchStyle });
-  sketchBaseline.set({ ...sketchStyle });
-  sketchStyleName.set(matched ?? THEME_SKETCH_ID);
+  const matched = get(sketchStyles).find((style) => sameSketchStyle(style.settings, settings))?.id;
+  sketchSettings.set({ ...settings });
+  sketchBaseline.set({ ...settings });
+  selectedSketchStyleId.set(matched ?? THEME_SKETCH_ID);
   sketchEnabled.set(true);
 }
 
@@ -202,40 +204,40 @@ export function openThemeSketchStyle(sketchStyle: SketchStyle | undefined): void
  * browser has already decided for itself.
  *
  * The rule boot has always followed in dev, and the only one a built site has:
- * a visitor who picked a look, or picked None, keeps it, and `themeSketchStyle`
+ * a visitor who picked a style, or picked None, keeps it, and `themeSketchSettings`
  * still learns what the theme holds so the panel can call the difference
- * unsaved. Both branches set it, so a picker can offer the theme's look as a
+ * unsaved. Both branches set it, so a picker can offer the theme's style as a
  * row either way.
  *
- * Takes the raw field rather than a `SketchStyle`, and hydrates it here: a
+ * Takes the raw field rather than a `SketchStyleSettings`, and hydrates it here: a
  * built site reads its theme JSON straight off disk with no dev server to run
- * `normalizeTheme` over it first, so this is the only place a look stored under
+ * `normalizeTheme` over it first, so this is the only place a style stored under
  * a retired dial name gets carried forward. Anything that is not an object is
  * the absent case, which is off (invariant 3).
  */
-export function seedSketchFromTheme(sketchStyle: unknown): void {
+export function seedSketchFromTheme(raw: unknown): void {
   const style =
-    typeof sketchStyle === 'object' && sketchStyle !== null && !Array.isArray(sketchStyle)
-      ? hydrateSketchStyle(sketchStyle)
+    typeof raw === 'object' && raw !== null && !Array.isArray(raw)
+      ? hydrateSketchSettings(raw)
       : undefined;
   if (hasPersistedSketchState()) {
-    themeSketchStyle.set(style);
+    themeSketchSettings.set(style);
     return;
   }
-  openThemeSketchStyle(style);
+  openThemeSketchSettings(style);
 }
 
-/** Go back to the look the theme carries, after picking something else. The
-    theme's is the one look a picker can offer that this module did not ship, so
+/** Go back to the style the theme carries, after picking something else. The
+    theme's is the one style a picker can offer that this module did not ship, so
     it needs a door of its own beside `selectSketchStyle`; `setSketch` gives the
     two the same face. Silent when the theme carries none, the way
     `selectSketchStyle` is for a name it does not know. */
-export function selectThemeSketchStyle(): void {
-  const style = get(themeSketchStyle);
+export function selectUnsavedSketchStyle(): void {
+  const style = get(themeSketchSettings);
   if (!style) return;
   markSketchTouched();
   if (get(sketchEnabled)) liveMovedSinceBake.set(true);
-  sketchStyleName.set(THEME_SKETCH_ID);
+  selectedSketchStyleId.set(THEME_SKETCH_ID);
   sketchBaseline.set({ ...style });
   sketchSettings.set({ ...style });
 }
@@ -243,13 +245,13 @@ export function selectThemeSketchStyle(): void {
 /** The live sketch differs from what the open theme carries. Presence is
     half the comparison: on with dials the theme does not hold, or off while
     the theme holds a layer, are both off the theme. */
-export const sketchOffLook = derived(
-  [sketchEnabled, sketchSettings, themeSketchStyle],
+export const sketchOffTheme = derived(
+  [sketchEnabled, sketchSettings, themeSketchSettings],
   ([enabled, settings, saved]) => {
     const live = enabled ? settings : undefined;
     if (!live && !saved) return false;
     if (!live || !saved) return true;
-    return !sameLook(live, saved);
+    return !sameSketchStyle(live, saved);
   },
 );
 
@@ -257,13 +259,13 @@ export const sketchOffLook = derived(
     Silent for an id nothing knows, the way it has always been for an unknown
     shipped name. */
 export function selectSketchStyle(id: string): void {
-  const look = lookById(id);
-  if (!look) return;
+  const style = sketchStyleById(id);
+  if (!style) return;
   markSketchTouched();
   if (get(sketchEnabled)) liveMovedSinceBake.set(true);
-  sketchStyleName.set(id);
-  sketchBaseline.set({ ...look.settings });
-  sketchSettings.set({ ...look.settings });
+  selectedSketchStyleId.set(id);
+  sketchBaseline.set({ ...style.settings });
+  sketchSettings.set({ ...style.settings });
 }
 
 /** Saved sketchstyles, listed from the data tree. Empty until
@@ -279,7 +281,7 @@ export async function refreshSavedSketchStyles(): Promise<void> {
   const files = await listSketchStyles();
   const loaded = await Promise.all(files.map((f) => loadSketchStyle(f.fileName)));
   savedSketchStyles.set(files);
-  replaceRegisteredLooks(
+  replaceRegisteredSketchStyles(
     files.map((file, i) => ({
       id: file.fileName,
       label: file.name || file.fileName,
@@ -303,23 +305,36 @@ export async function saveCurrentSketchStyle(name: string): Promise<string> {
   await refreshSavedSketchStyles();
   sketchSettings.set(settings);
   sketchBaseline.set({ ...settings });
-  sketchStyleName.set(fileName);
+  selectedSketchStyleId.set(fileName);
   return fileName;
 }
 
-/** Overwrite the selected saved sketchstyle. The file name comes from the
-    selection rather than from re-slugifying the label, because the two can
-    disagree: a file hand-edited to a new display name would otherwise be saved
-    beside itself under a fresh slug instead of over itself. The label comes
-    from the look for the same reason, so the name the grid shows survives.
+/** Overwrite the selected sketchstyle, so a style can be put down and picked up
+    again across sessions.
+
+    The file name comes from the selection rather than from re-slugifying the
+    label, because the two can disagree: `dry` is labelled "Dry marker", which
+    re-slugified writes `dry-marker.json` and leaves the selected file untouched.
+    The label comes from the style for the same reason, so the name the grid shows
+    survives.
+
+    A shipped style saves the same way. Its file lives in the package, so the
+    write lands in this project under the same id and shadows it, which is how a
+    project comes to own its Pencil; deleting that file uncovers the packaged one
+    again. A registered style owns no file at all, so it has none to write over.
 
     No `markSketchTouched`: the button only lights once a dial has moved, and
     every dial goes through `updateSketchSettings`, which marks it. */
 export async function saveSelectedSketchStyle(): Promise<void> {
-  const look = lookById(get(sketchStyleName));
-  if (look?.source !== 'file') throw new Error('No saved sketchstyle is selected');
+  const style = sketchStyleById(get(selectedSketchStyleId));
+  if (!style) throw new Error('No sketchstyle is selected');
+  if (style.source === 'registered') {
+    throw new Error(
+      `${style.label} was registered in code rather than saved as a file. Use Save As to keep these dials.`,
+    );
+  }
   const settings = { ...get(sketchSettings) };
-  await saveSketchStyle(look.id, look.label, settings);
+  await saveSketchStyle(style.id, style.label, settings);
   await refreshSavedSketchStyles();
   // Re-baselining is what disables the button again and returns the readout
   // from "Modified from X" to the saved blurb.
@@ -330,16 +345,16 @@ export async function deleteSavedSketchStyle(fileName: string): Promise<void> {
   await deleteSketchStyle(fileName);
   await refreshSavedSketchStyles();
   // The dials keep their values; only the name stops naming a file that exists.
-  if (get(sketchStyleName) === fileName) {
-    sketchStyleName.set('');
+  if (get(selectedSketchStyleId) === fileName) {
+    selectedSketchStyleId.set('');
     sketchBaseline.set(null);
   }
 }
 
 /** Every dial goes through here. The selection deliberately survives: the grid
-    keeps naming the sketchstyle this look came from, and `sketchDirty` reports
+    keeps naming the sketchstyle this style came from, and `sketchDirty` reports
     the drift. Save writes a new sketchstyle rather than overwriting the base. */
-export function updateSketchSettings(patch: Partial<SketchStyle>): void {
+export function updateSketchSettings(patch: Partial<SketchStyleSettings>): void {
   markSketchTouched();
   if (get(sketchEnabled)) liveMovedSinceBake.set(true);
   sketchSettings.update((s) => ({ ...s, ...patch }));
@@ -361,7 +376,7 @@ function persist(key: string, value: string): void {
     itself between import and first render. */
 let pageRoot: HTMLElement | null = null;
 
-function render(enabled: boolean, settings: SketchStyle): void {
+function render(enabled: boolean, settings: SketchStyleSettings): void {
   if (typeof document === 'undefined') return;
   if (!enabled) {
     if (sketchLayerInstalled()) removeSketchLayer();
@@ -375,14 +390,14 @@ function render(enabled: boolean, settings: SketchStyle): void {
   setSketchScope(pageRoot, settings);
 }
 
-/** Paint one look on the two roots `render` owns, and on nothing else.
+/** Paint one style on the two roots `render` owns, and on nothing else.
 
     `render(false, ...)` reaches further: it clears every `[data-sketch]` in
     the document. The scopes it takes with it belong to `$effect`s that paint
     from the live stores, which a preview deliberately never ticks, so those
     never come back. Previewing a theme carrying no sketchstyle left the
     Sketchstyle view's own stage crisp for good, Cancel included. */
-function paintPreviewRoots(style: SketchStyle | undefined): void {
+function paintPreviewRoots(style: SketchStyleSettings | undefined): void {
   if (typeof document === 'undefined') return;
   if (style) applySketchLayer(style);
   setSketchScope(hostRoot(), style ?? null);
@@ -397,7 +412,7 @@ function paintPreviewRoots(style: SketchStyle | undefined): void {
     host page across the iframe boundary the same way Apply's does; only the
     store write and the persistence are skipped. Pass `undefined` for a theme
     that carries no sketchstyle. */
-export function previewSketchStyle(style: SketchStyle | undefined): void {
+export function previewSketchStyle(style: SketchStyleSettings | undefined): void {
   paintPreviewRoots(style);
 }
 
@@ -457,7 +472,7 @@ if (typeof document !== 'undefined') {
     render(get(sketchEnabled), settings);
   });
 
-  sketchStyleName.subscribe((name) => share(STYLE_NAME_KEY, name));
+  selectedSketchStyleId.subscribe((name) => share(SELECTED_ID_KEY, name));
   sketchBaseline.subscribe((b) => share(BASELINE_KEY, b ? JSON.stringify(b) : ''));
 
   /* The overlay editor runs in an iframe, so the Sketchstyle view and a
@@ -477,10 +492,10 @@ if (typeof document !== 'undefined') {
         adopt(SETTINGS_KEY, JSON.stringify(next));
         sketchSettings.set(next);
       }
-    } else if (event.key === STYLE_NAME_KEY) {
-      const next = readStyleName();
-      adopt(STYLE_NAME_KEY, next);
-      if (next !== get(sketchStyleName)) sketchStyleName.set(next);
+    } else if (event.key === SELECTED_ID_KEY) {
+      const next = readSelectedId();
+      adopt(SELECTED_ID_KEY, next);
+      if (next !== get(selectedSketchStyleId)) selectedSketchStyleId.set(next);
     } else if (event.key === BASELINE_KEY) {
       const current = get(sketchBaseline);
       if ((event.newValue || '') !== (current ? JSON.stringify(current) : '')) {

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

@@ -1,11 +1,11 @@
 import { API_BASE } from '../storage/apiBase';
-import { hydrateSketchStyle, type SketchStyle } from './sketchStyles';
+import { hydrateSketchSettings, type SketchStyleSettings } from './sketchStyles';
 
 export interface SketchStyleFile {
   name: string;
   createdAt?: string;
   updatedAt?: string;
-  settings: SketchStyle;
+  settings: SketchStyleSettings;
 }
 
 export interface SketchStyleMeta {
@@ -40,13 +40,13 @@ export async function loadSketchStyle(fileName: string): Promise<SketchStyleFile
   const res = await fetch(`${BASE}/${encodeURIComponent(fileName)}`);
   if (!res.ok) throw new Error(`Failed to load sketchstyle: ${fileName}`);
   const body = await res.json();
-  return { ...body, settings: hydrateSketchStyle(body.settings) };
+  return { ...body, settings: hydrateSketchSettings(body.settings) };
 }
 
 export async function saveSketchStyle(
   fileName: string,
   name: string,
-  settings: SketchStyle,
+  settings: SketchStyleSettings,
 ): Promise<void> {
   const res = await fetch(`${BASE}/${encodeURIComponent(fileName)}`, {
     method: 'PUT',

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

@@ -6,7 +6,7 @@ import dashed from '../../../live-tokens/data/sketch-styles/dashed.json';
 import napkin from '../../../live-tokens/data/sketch-styles/napkin.json';
 import dry from '../../../live-tokens/data/sketch-styles/dry.json';
 
-export interface SketchStyle {
+export interface SketchStyleSettings {
   label: string;
   blurb: string;
   /** How far the fill's edge travels at its furthest, in px. Every dial that
@@ -80,7 +80,7 @@ export interface SketchStyle {
   /** Whether the two move together. Unlinked they part, and the field comes out
       stretched: blobs wider than they are tall read as a wash dragged sideways,
       the way ink pulled across a page does. Stored rather than inferred from
-      the pair matching, so a look that stretches to exactly square keeps its
+      the pair matching, so a sketchstyle that stretches to exactly square keeps its
       dials apart. */
   maskBlobLinked: boolean;
   /** Output levels on the coverage field, 0 to 1: the palest the fill gets and
@@ -144,40 +144,40 @@ export interface SketchStyle {
 /**
  * The shipped sketchstyles, read from the files the package distributes. The
  * files are the source: a project shadows one by saving a sketchstyle under the
- * same id, the editor restores a shipped look by deleting that file, and
+ * same id, the editor restores a shipped sketchstyle by deleting that file, and
  * `themeFileApi` serves these as the read-only fallback behind the project's own
- * directory. Editing a look here means editing its JSON, which is what the
+ * directory. Editing a sketchstyle here means editing its JSON, which is what the
  * Sketchstyle view already writes.
  *
  * Each file carries every dial, so there is nothing to merge a default into.
  * `sketchStyles.test.ts` pins that: the seven key sets have to match, and a dial
- * added to `SketchStyle` has to reach all seven before the suite goes green.
+ * added to `SketchStyleSettings` has to reach all seven before the suite goes green.
  *
  * Order is picker order.
  */
 const SHIPPED_FILES = { pencil, marker, whiteboard, hatched, dashed, napkin, dry };
 
-export const SKETCH_STYLES: Record<string, SketchStyle> = Object.fromEntries(
-  Object.entries(SHIPPED_FILES).map(([id, file]) => [id, file.settings as unknown as SketchStyle]),
+export const SHIPPED_SKETCH_SETTINGS: Record<string, SketchStyleSettings> = Object.fromEntries(
+  Object.entries(SHIPPED_FILES).map(([id, file]) => [id, file.settings as unknown as SketchStyleSettings]),
 );
 
 export const DEFAULT_SKETCH_STYLE = 'marker';
 
-/** The id of the look a theme carries, in the same id namespace as the shipped
+/** The id for sketch settings a theme carries, in the same id namespace as the shipped
     sketchstyles so one picker row and one `setSketch` call cover both. Never a
-    key of `SKETCH_STYLES`: a shipped style claiming it would shadow the theme's
-    own look in every picker. `index.test.ts` pins that. */
+    key of `SHIPPED_SKETCH_SETTINGS`: a shipped style claiming it would shadow the theme's
+    own sketchstyle in every picker. `index.test.ts` pins that. */
 export const THEME_SKETCH_ID = 'theme';
 
 /** Reconciled against a full sketchstyle in both directions: a value stored before a
     control existed picks up the default, and a value stored for a control since
     retired is dropped. Without the drop, a stale key survives every spread and
     makes the settings compare unequal to any baseline forever. */
-export function hydrateSketchStyle(raw: unknown): SketchStyle {
-  const base = SKETCH_STYLES[DEFAULT_SKETCH_STYLE];
-  const stored = (raw ?? {}) as Partial<SketchStyle>;
+export function hydrateSketchSettings(raw: unknown): SketchStyleSettings {
+  const base = SHIPPED_SKETCH_SETTINGS[DEFAULT_SKETCH_STYLE];
+  const stored = (raw ?? {}) as Partial<SketchStyleSettings>;
   const out = { ...base };
-  for (const key of Object.keys(base) as (keyof SketchStyle)[]) {
+  for (const key of Object.keys(base) as (keyof SketchStyleSettings)[]) {
     if (stored[key] !== undefined) (out[key] as unknown) = stored[key];
   }
   // A retired option: the fill's presence belongs to the theme, not the effect.
@@ -194,9 +194,9 @@ export function hydrateSketchStyle(raw: unknown): SketchStyle {
 }
 
 /** The second pass used to sit at a distance derived from the stroke width,
-    with no dial of its own. A look stored before the dial comes back at that
+    with no dial of its own. A sketchstyle stored before the dial comes back at that
     distance rather than at whatever the fallback sketchstyle happens to carry. */
-function restoreDerivedRetrace(stored: Record<string, unknown>, out: SketchStyle): void {
+function restoreDerivedRetrace(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   if (stored.retraceOffset === undefined) {
     out.retraceOffset = Number(Math.max(1.2, out.strokeWidth * 0.55).toFixed(2));
   }
@@ -204,7 +204,7 @@ function restoreDerivedRetrace(stored: Record<string, unknown>, out: SketchStyle
 
 /** The four displacement dials used to be stated as the map's own `scale`,
     which is the full swing: the number on the dial was twice the furthest
-    anything actually moved. They are peak travel in px now, so a look stored
+    anything actually moved. They are peak travel in px now, so a sketchstyle stored
     under the old names comes back halved and renders identically. */
 const SWING_DIALS = {
   fillScale: 'fillTravel',
@@ -216,11 +216,11 @@ const SWING_DIALS = {
 /** The pen wobble used to be stated as `frequency`, in cycles per px, which is
     the number the filter wants and not one anybody can picture. It is a
     wavelength in px now, the way the mask states its blobs. */
-function convertCyclesToWavelength(stored: Record<string, unknown>, out: SketchStyle): void {
+function convertCyclesToWavelength(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   const cycles = stored.frequency;
   if (typeof cycles === 'number' && cycles > 0) out.wobble = Math.round(1 / cycles);
   // The layer count was `octaves`, and its dial ran to 5. The top two moved
-  // nothing, so a look stored there comes back at the roughest that reads.
+  // nothing, so a sketchstyle stored there comes back at the roughest that reads.
   // Both were multipliers on the frequency, so they ran the other way.
   for (const [legacy, key] of [
     ['borderFrequency', 'borderWavelength'], ['iconFrequency', 'iconWavelength'],
@@ -234,9 +234,9 @@ function convertCyclesToWavelength(stored: Record<string, unknown>, out: SketchS
   if (typeof layers === 'number') out.roughness = Math.min(3, Math.max(1, layers));
 }
 
-/** The blob size was one number for both axes. A look stored before the split
-    comes back square, with the two dials linked, which is the look it had. */
-function splitBlobAxes(stored: Record<string, unknown>, out: SketchStyle): void {
+/** The blob size was one number for both axes. A sketchstyle stored before the split
+    comes back square, with the two dials linked, which is the shape it had. */
+function splitBlobAxes(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   const blob = stored.maskBlob;
   if (typeof blob !== 'number') return;
   out.maskBlobX = blob;
@@ -249,13 +249,13 @@ function splitBlobAxes(stored: Record<string, unknown>, out: SketchStyle): void
     of the field, so it came out either untouched or gone. It is a share of the
     glyph now, and the old default reads as one period across the glyph, which
     is what that size was aiming at. */
-function convertIconTileToScale(stored: Record<string, unknown>, out: SketchStyle): void {
+function convertIconTileToScale(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   const tile = stored.iconMaskTile;
   if (typeof tile !== 'number') return;
   out.iconMaskScale = Math.min(5, Math.max(0.5, Number((tile / 90).toFixed(2))));
 }
 
-function halveSwingDials(stored: Record<string, unknown>, out: SketchStyle): void {
+function halveSwingDials(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   for (const [legacy, key] of Object.entries(SWING_DIALS)) {
     const value = stored[legacy];
     if (typeof value === 'number') out[key as 'fillTravel'] = value / 2;
@@ -265,7 +265,7 @@ function halveSwingDials(stored: Record<string, unknown>, out: SketchStyle): voi
 /** The mask used to be a 600-unit tile painted at `maskScale` px, with the
     coverage point buried in the hardness slope. Recover page-px blobs and
     softness, and the levels the old slope and floor put the edge at. */
-function convertTiledMask(stored: Record<string, unknown>, out: SketchStyle): void {
+function convertTiledMask(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   const scale = stored.maskScale;
   if (typeof scale !== 'number') return;
   const freq = stored.maskFrequency;
@@ -283,7 +283,7 @@ function convertTiledMask(stored: Record<string, unknown>, out: SketchStyle): vo
  * levels the pair put the edge between, and rescale them onto the field as it
  * is now: stretched onto its full range before the levels see it.
  */
-function convertCutToLevels(stored: Record<string, unknown>, out: SketchStyle): void {
+function convertCutToLevels(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   const contrast = stored.maskContrast;
   const coverage = stored.maskCoverage;
   if (typeof contrast !== 'number' || typeof coverage !== 'number') return;
@@ -297,9 +297,9 @@ function convertCutToLevels(stored: Record<string, unknown>, out: SketchStyle):
 
 /** The pair were input levels, a cut through the field, and are output levels
     now, the palest and densest the fill gets. The same two numbers carry over:
-    a look cut between 20% and 50% comes back as a wash between 20% and 50% ink,
+    a sketchstyle cut between 20% and 50% comes back as a wash between 20% and 50% ink,
     which keeps its spread and loses only the hole. */
-function carryLevelsToOutput(stored: Record<string, unknown>, out: SketchStyle): void {
+function carryLevelsToOutput(stored: Record<string, unknown>, out: SketchStyleSettings): void {
   if (typeof stored.maskLevelMin === 'number') out.maskOutputMin = stored.maskLevelMin;
   if (typeof stored.maskLevelMax === 'number') out.maskOutputMax = stored.maskLevelMax;
 }

package/src/editor/core/themes/colorsAndTypeService.ts

@@ -65,7 +65,7 @@ export const sanitizeFileName = sanitizeFileNameImpl;
 
 /** Flush the editor state to the buffer under `displayName`, the name of the
  *  theme the buffer belongs to, and clear the dirty flag. A capture reads the
- *  buffer back, so this is what makes Save and Adopt mean the look on screen. */
+ *  buffer back, so this is what makes Save and Adopt mean the theme on screen. */
 export async function persistColorsAndType(
   state: EditorState,
   displayName: string,

package/src/editor/core/themes/loadRows.ts

@@ -1,7 +1,7 @@
 import type { ThemeMeta, ColorsAndTypeMeta } from './themeTypes';
 
 /**
- * The one Load list. A theme is the whole look; a colors and type file is a
+ * The one Load list. A theme is the whole theme; a colors and type file is a
  * preset holding that half of one. Both belong in the same window, told apart
  * by a badge rather than by living in separate managers.
  *
@@ -10,7 +10,7 @@ import type { ThemeMeta, ColorsAndTypeMeta } from './themeTypes';
  * that copy is exactly the file the list must keep reachable.
  */
 
-export type LoadRowKind = 'look' | 'layer';
+export type LoadRowKind = 'theme' | 'layer';
 
 export interface LoadRow {
   /** `<kind>:<slug>`. The two kinds are separate resources with separate name
@@ -25,12 +25,12 @@ export interface LoadRow {
 
 export const loadRowId = (kind: LoadRowKind, slug: string): string => `${kind}:${slug}`;
 
-export function buildLoadRows(looks: ThemeMeta[], layers: ColorsAndTypeMeta[]): LoadRow[] {
-  const lookRows: LoadRow[] = looks
+export function buildLoadRows(themes: ThemeMeta[], layers: ColorsAndTypeMeta[]): LoadRow[] {
+  const themeRows: LoadRow[] = themes
     .map((f): LoadRow => ({
-      fileName: loadRowId('look', f.fileName),
+      fileName: loadRowId('theme', f.fileName),
       slug: f.fileName,
-      kind: 'look',
+      kind: 'theme',
       name: f.name,
       updatedAt: f.updatedAt,
       isProtected: f.isProtected,
@@ -46,12 +46,12 @@ export function buildLoadRows(looks: ThemeMeta[], layers: ColorsAndTypeMeta[]):
       updatedAt: f.updatedAt,
       isProtected: false,
     }));
-  return [...lookRows, ...layerRows];
+  return [...themeRows, ...layerRows];
 }
 
 /**
  * Whether picking this row loads colors and type alone. A layer file holds
- * nothing else, so it ignores the toggle; a look honors it.
+ * nothing else, so it ignores the toggle; a theme honors it.
  */
 export function isColorsOnly(row: LoadRow | null, colorsOnly: boolean): boolean {
   if (row?.kind === 'layer') return true;