@motion-proto/live-tokens 0.67.1 → 0.68.1

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

@@ -1,97 +1,97 @@
 import { derived, get, writable, type Readable } from 'svelte/store';
-import { SKETCH_STYLES, hydrateSketchStyle, type SketchStyle } from './sketchStyles';
+import { SHIPPED_SKETCH_SETTINGS, hydrateSketchSettings, type SketchStyleSettings } from './sketchStyles';
 
-/** Where a look came from, which is what decides the affordances on offer.
+/** Where a style came from, which is what decides the affordances on offer.
     `shipped` is served by the package: it has a file, but not one in this
     project, so there is nothing here to save over or delete until the editor
     writes a copy. `file` lives in this project's data tree, so the editor can
     save over it and delete it. `registered` was handed to `bootLiveTokens`, so
     it is real on a built site but owns no file the editor could touch. */
-export type SketchLookSource = 'shipped' | 'file' | 'registered';
+export type SketchStyleSource = 'shipped' | 'file' | 'registered';
 
-export interface SketchLook {
+export interface SketchStyle {
   /** What `setSketch` takes. A saved sketchstyle's file slug is its id, so a
-      look picked in dev keeps working once the site is built. */
+      style picked in dev keeps working once the site is built. */
   id: string;
   label: string;
   blurb: string;
-  settings: SketchStyle;
-  source: SketchLookSource;
+  settings: SketchStyleSettings;
+  source: SketchStyleSource;
 }
 
-export interface RegisterSketchLookInput {
+export interface RegisterSketchStyleInput {
   id: string;
   label: string;
   blurb?: string;
   settings: unknown;
-  /** Only `replaceRegisteredLooks` sets this. A listing carries the package's
+  /** Only `replaceRegisteredSketchStyles` sets this. A listing carries the package's
       own sketchstyles as well as the project's, and the two differ in what the
       editor may do to them, so the row's origin has to survive the trip. */
-  source?: SketchLookSource;
+  source?: SketchStyleSource;
 }
 
-const SHIPPED: ReadonlyMap<string, SketchLook> = new Map(
-  Object.entries(SKETCH_STYLES).map(([id, style]) => [
+const SHIPPED: ReadonlyMap<string, SketchStyle> = new Map(
+  Object.entries(SHIPPED_SKETCH_SETTINGS).map(([id, settings]) => [
     id,
-    { id, label: style.label, blurb: style.blurb, settings: style, source: 'shipped' as const },
+    { id, label: settings.label, blurb: settings.blurb, settings, source: 'shipped' as const },
   ]),
 );
 
-/** Seeded with the shipped looks, then written by `registerSketchLook`. A Map
+/** Seeded with the shipped styles, then written by `registerSketchStyle`. A Map
     because re-setting an existing key keeps its position, so a project's own
     `pencil` lands where the shipped Pencil sat rather than at the end of the
     grid. */
-const looks = writable(new Map(SHIPPED));
+const styles = writable(new Map(SHIPPED));
 
 /**
- * Every sketchstyle on offer: the shipped looks, plus whatever this project
+ * Every sketchstyle on offer: the shipped styles, plus whatever this project
  * registered over and beside them. A store rather than a constant, because
  * registration happens after this module is imported.
  *
  * A picker adds its own "None" row, since off is a state of the effect rather
- * than one of the looks. A theme's own look is not here either; `themeSketchLook`
+ * than one of the styles. A theme's own style is not here either; `unsavedSketchStyle`
  * carries that one row.
  */
-export const sketchLooks: Readable<SketchLook[]> = derived(looks, (m) => [...m.values()]);
+export const sketchStyles: Readable<SketchStyle[]> = derived(styles, (m) => [...m.values()]);
 
-export function lookById(id: string): SketchLook | undefined {
-  return get(looks).get(id);
+export function sketchStyleById(id: string): SketchStyle | undefined {
+  return get(styles).get(id);
 }
 
-function put(m: Map<string, SketchLook>, look: RegisterSketchLookInput, source: SketchLookSource) {
+function put(m: Map<string, SketchStyle>, style: RegisterSketchStyleInput, source: SketchStyleSource) {
   // Hydrated on the way in: a consumer hands over raw JSON it imported, so this
-  // is the only place a look stored under a retired dial name gets carried
+  // is the only place a style stored under a retired dial name gets carried
   // forward, the same job `seedSketchFromTheme` does for a theme.
-  const settings = hydrateSketchStyle(look.settings);
-  return m.set(look.id, {
-    id: look.id,
-    label: look.label,
-    blurb: look.blurb ?? settings.blurb ?? '',
+  const settings = hydrateSketchSettings(style.settings);
+  return m.set(style.id, {
+    id: style.id,
+    label: style.label,
+    blurb: style.blurb ?? settings.blurb ?? '',
     settings,
     source,
   });
 }
 
-export function registerSketchLook(look: RegisterSketchLookInput): void {
-  looks.update((m) => put(new Map(m), look, 'registered'));
+export function registerSketchStyle(style: RegisterSketchStyleInput): void {
+  styles.update((m) => put(new Map(m), style, 'registered'));
 }
 
 /** Ids the last file listing claimed. The sweep below removes these and nothing
-    else, so a look handed to `bootLiveTokens` survives the editor opening. */
+    else, so a style handed to `bootLiveTokens` survives the editor opening. */
 let fromFiles: string[] = [];
 
 /** The editor re-lists its files after every save and delete, so a file removed
-    on disk has to leave the pool too. A file that had shadowed a shipped look
+    on disk has to leave the pool too. A file that had shadowed a shipped style
     hands the id back on its way out. */
-export function replaceRegisteredLooks(next: RegisterSketchLookInput[]): void {
-  looks.update((m) => {
+export function replaceRegisteredSketchStyles(next: RegisterSketchStyleInput[]): void {
+  styles.update((m) => {
     const out = new Map(m);
     for (const id of fromFiles) {
       const shipped = SHIPPED.get(id);
       if (shipped) out.set(id, shipped);
       else out.delete(id);
     }
-    for (const look of next) put(out, look, look.source ?? 'file');
+    for (const style of next) put(out, style, style.source ?? 'file');
     return out;
   });
   fromFiles = next.map((l) => l.id);

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',