@motion-proto/live-tokens 0.62.0 → 0.63.0

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

@@ -1,24 +1,71 @@
 import { derived, get, writable } from 'svelte/store';
 import {
-  SKETCH_PRESETS,
-  DEFAULT_SKETCH_PRESET,
-  hydrateSketchSettings,
-  type SketchSettings,
-} from './sketchPresets';
+  SKETCH_STYLES,
+  DEFAULT_SKETCH_STYLE,
+  hydrateSketchStyle,
+  type SketchStyle,
+} from './sketchStyles';
 import { applySketchLayer, hostRoot, removeSketchLayer, setSketchScope } from './sketchLayer';
+import { liveMovedSinceBake } from '../productionPulse';
 import {
-  deleteSketchPreset,
-  listSketchPresets,
-  loadSketchPreset,
-  saveSketchPreset,
-  slugifySketchPreset,
-  type SketchPresetMeta,
-} from './sketchPresetService';
+  deleteSketchStyle,
+  listSketchStyles,
+  loadSketchStyle,
+  saveSketchStyle,
+  slugifySketchStyle,
+  type SketchStyleMeta,
+} from './sketchStyleService';
 
 const ENABLED_KEY = 'lt.sketchEnabled';
 const SETTINGS_KEY = 'lt.sketchSettings';
-const PRESET_KEY = 'lt.sketchPreset';
+const STYLE_NAME_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
+    on every boot regardless of whether a dial was ever moved, so deriving
+    "touched" from their presence would answer "yes" from the second load
+    onward — this key is the thing that actually distinguishes the two. */
+const TOUCHED_KEY = 'lt.sketchTouched';
+
+/** True once this browser has recorded a genuine sketch decision, so boot
+    (`themeInit.ts`) can tell "never touched" from "explicitly off" and only
+    seed the live buffer from the theme in the first case. Mutated in place
+    by `markSketchTouched`; the first read migrates a browser that already
+    held real dial state before this key existed (RJC 7) so it starts
+    touched, not one this module is about to seed for the first time. */
+let sketchTouched = (() => {
+  try {
+    const recorded = localStorage.getItem(TOUCHED_KEY);
+    if (recorded !== null) return recorded === 'true';
+    const priorUse = localStorage.getItem(ENABLED_KEY) !== null || localStorage.getItem(SETTINGS_KEY) !== null;
+    localStorage.setItem(TOUCHED_KEY, String(priorUse));
+    return priorUse;
+  } catch {
+    return false;
+  }
+})();
+
+/** Reads `TOUCHED_KEY` fresh rather than the cached `sketchTouched`, because a
+    peer document's write lands in localStorage between this module's import
+    and a caller's await (`themeInit.ts`'s boot reconcile is exactly that
+    gap): the cache would still answer as it did at import time. */
+export function hasPersistedSketchState(): boolean {
+  try {
+    return localStorage.getItem(TOUCHED_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/** 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`
+    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 {
+  if (sketchTouched) return;
+  sketchTouched = true;
+  persist(TOUCHED_KEY, 'true');
+}
 
 function readEnabled(): boolean {
   try {
@@ -28,61 +75,61 @@ function readEnabled(): boolean {
   }
 }
 
-function readSettings(): SketchSettings {
+function readSettings(): SketchStyle {
   try {
     const raw = localStorage.getItem(SETTINGS_KEY);
-    if (raw) return hydrateSketchSettings(JSON.parse(raw));
+    if (raw) return hydrateSketchStyle(JSON.parse(raw));
   } catch {
-    // fall through to the default preset
+    // fall through to the default sketchstyle
   }
-  return { ...SKETCH_PRESETS[DEFAULT_SKETCH_PRESET] };
+  return { ...SKETCH_STYLES[DEFAULT_SKETCH_STYLE] };
 }
 
-function readBaseline(): SketchSettings | null {
+function readBaseline(): SketchStyle | null {
   try {
     const raw = localStorage.getItem(BASELINE_KEY);
-    if (raw) return hydrateSketchSettings(JSON.parse(raw));
+    if (raw) return hydrateSketchStyle(JSON.parse(raw));
   } catch {
     // fall through
   }
   return null;
 }
 
-/** Marks a saved preset in `sketchPreset`, so a user file named `pencil` and
-    the shipped `pencil` stay distinguishable in one string. */
-export const USER_PRESET_PREFIX = 'user:';
+/** Marks a saved sketchstyle in `sketchStyleName`, so a user file named `pencil`
+    and the shipped `pencil` stay distinguishable in one string. */
+export const USER_STYLE_PREFIX = 'user:';
 
-function readPresetName(): string {
+function readStyleName(): string {
   try {
-    const name = localStorage.getItem(PRESET_KEY);
-    if (name === '' || (name && (name in SKETCH_PRESETS || name.startsWith(USER_PRESET_PREFIX)))) {
+    const name = localStorage.getItem(STYLE_NAME_KEY);
+    if (name === '' || (name && (name in SKETCH_STYLES || name.startsWith(USER_STYLE_PREFIX)))) {
       return name;
     }
   } catch {
     // fall through
   }
-  return DEFAULT_SKETCH_PRESET;
+  return DEFAULT_SKETCH_STYLE;
 }
 
-/** Off by default: the effect is a draft look, never something a project
-    inherits without asking for it. */
+/** 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<SketchSettings>(readSettings());
-/** The preset the dials started from. It survives dial moves, so the grid keeps
-    showing what the current look is closest to; empty only when nothing was
-    picked, or the picked file was deleted. */
-export const sketchPreset = writable<string>(readPresetName());
+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; empty only when nothing
+    was picked, or the picked file was deleted. */
+export const sketchStyleName = writable<string>(readStyleName());
 
-/** The settings as the selected preset defined them. Kept beside the live
+/** 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<SketchSettings | null>(readBaseline());
+export const sketchBaseline = writable<SketchStyle | null>(readBaseline());
 
-/** Dial-set fields only. `label` and `blurb` name the preset rather than
+/** Dial-set fields only. `label` and `blurb` name the sketchstyle rather than
     describe the look, and no dial writes them. */
-function sameLook(a: SketchSettings, b: SketchSettings): boolean {
-  return (Object.keys(a) as (keyof SketchSettings)[])
+function sameLook(a: SketchStyle, b: SketchStyle): boolean {
+  return (Object.keys(a) as (keyof SketchStyle)[])
     .filter((k) => k !== 'label' && k !== 'blurb')
     .every((k) => a[k] === b[k]);
 }
@@ -94,60 +141,122 @@ export const sketchDirty = derived(
 
 export const sketchBlurb = derived(sketchSettings, (s) => s.blurb);
 
-export function selectSketchPreset(name: string): void {
-  const preset = SKETCH_PRESETS[name];
-  if (!preset) return;
-  sketchPreset.set(name);
-  sketchBaseline.set({ ...preset });
-  sketchSettings.set({ ...preset });
+/** The live look 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 {
+  return get(sketchEnabled) ? { ...get(sketchSettings) } : undefined;
+}
+
+/** The Sketchstyle view's on/off switch goes through here rather than a bare
+    `sketchEnabled.set`, so flipping it by hand marks this browser as having
+    made a sketch decision the same as any other control does. */
+export function setSketchEnabled(enabled: boolean): void {
+  markSketchTouched();
+  if (enabled !== get(sketchEnabled)) liveMovedSinceBake.set(true);
+  sketchEnabled.set(enabled);
+}
+
+/** 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);
+
+/** 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). Never writes a
+    `user:` name here: a saved sketchstyle is a file this look may not have come
+    from, and the only thing that can name one is picking it. */
+export function openThemeSketchStyle(sketchStyle: SketchStyle | undefined): void {
+  themeSketchStyle.set(sketchStyle);
+  if (!sketchStyle) {
+    sketchEnabled.set(false);
+    sketchBaseline.set(null);
+    sketchStyleName.set('');
+    return;
+  }
+  const matched = (Object.keys(SKETCH_STYLES) as string[]).find((name) => sameLook(SKETCH_STYLES[name], sketchStyle));
+  sketchSettings.set({ ...sketchStyle });
+  sketchBaseline.set({ ...sketchStyle });
+  sketchStyleName.set(matched ?? '');
+  sketchEnabled.set(true);
 }
 
-/** Saved presets, listed from the data tree. Empty until `refreshUserPresets`
-    runs, so importing this module never reaches for the network. */
-export const userSketchPresets = writable<SketchPresetMeta[]>([]);
+/** 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],
+  ([enabled, settings, saved]) => {
+    const live = enabled ? settings : undefined;
+    if (!live && !saved) return false;
+    if (!live || !saved) return true;
+    return !sameLook(live, saved);
+  },
+);
 
-export async function refreshUserPresets(): Promise<void> {
-  userSketchPresets.set(await listSketchPresets());
+export function selectSketchStyle(name: string): void {
+  const style = SKETCH_STYLES[name];
+  if (!style) return;
+  markSketchTouched();
+  if (get(sketchEnabled)) liveMovedSinceBake.set(true);
+  sketchStyleName.set(name);
+  sketchBaseline.set({ ...style });
+  sketchSettings.set({ ...style });
 }
 
-export async function selectUserSketchPreset(fileName: string): Promise<void> {
-  const file = await loadSketchPreset(fileName);
-  sketchPreset.set(USER_PRESET_PREFIX + fileName);
+/** Saved sketchstyles, listed from the data tree. Empty until
+    `refreshSavedSketchStyles` runs, so importing this module never reaches for
+    the network. */
+export const savedSketchStyles = writable<SketchStyleMeta[]>([]);
+
+export async function refreshSavedSketchStyles(): Promise<void> {
+  savedSketchStyles.set(await listSketchStyles());
+}
+
+export async function selectSavedSketchStyle(fileName: string): Promise<void> {
+  const file = await loadSketchStyle(fileName);
+  markSketchTouched();
+  if (get(sketchEnabled)) liveMovedSinceBake.set(true);
+  sketchStyleName.set(USER_STYLE_PREFIX + fileName);
   sketchBaseline.set({ ...file.settings });
   sketchSettings.set(file.settings);
 }
 
 /** Writes whatever the dials currently say to a named file and selects it, so
     saving leaves the tab pointing at the thing that was just saved rather than
-    back on "Adjusted from a preset". Returns the file name it allocated. */
-export async function saveCurrentAsSketchPreset(name: string): Promise<string> {
+    back on "Adjusted from a sketchstyle". Returns the file name it allocated. */
+export async function saveCurrentSketchStyle(name: string): Promise<string> {
   const trimmed = name.trim();
-  if (!trimmed) throw new Error('A preset needs a name');
-  const fileName = slugifySketchPreset(trimmed);
+  if (!trimmed) throw new Error('A sketchstyle needs a name');
+  const fileName = slugifySketchStyle(trimmed);
   if (!fileName) throw new Error('That name has no letters or digits to make a file name from');
+  markSketchTouched();
   const settings = { ...get(sketchSettings), label: trimmed };
-  await saveSketchPreset(fileName, trimmed, settings);
-  await refreshUserPresets();
+  await saveSketchStyle(fileName, trimmed, settings);
+  await refreshSavedSketchStyles();
   sketchSettings.set(settings);
   sketchBaseline.set({ ...settings });
-  sketchPreset.set(USER_PRESET_PREFIX + fileName);
+  sketchStyleName.set(USER_STYLE_PREFIX + fileName);
   return fileName;
 }
 
-export async function deleteUserSketchPreset(fileName: string): Promise<void> {
-  await deleteSketchPreset(fileName);
-  await refreshUserPresets();
-  // The dials keep their values; only the label stops naming a file that exists.
-  if (get(sketchPreset) === USER_PRESET_PREFIX + fileName) {
-    sketchPreset.set('');
+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) === USER_STYLE_PREFIX + fileName) {
+    sketchStyleName.set('');
     sketchBaseline.set(null);
   }
 }
 
 /** Every dial goes through here. The selection deliberately survives: the grid
-    keeps naming the preset this look came from, and `sketchDirty` reports the
-    drift. Save writes a new preset rather than overwriting the base. */
-export function updateSketchSettings(patch: Partial<SketchSettings>): void {
+    keeps naming the sketchstyle this look came from, and `sketchDirty` reports
+    the drift. Save writes a new sketchstyle rather than overwriting the base. */
+export function updateSketchSettings(patch: Partial<SketchStyle>): void {
+  markSketchTouched();
+  if (get(sketchEnabled)) liveMovedSinceBake.set(true);
   sketchSettings.update((s) => ({ ...s, ...patch }));
 }
 
@@ -155,7 +264,7 @@ function persist(key: string, value: string): void {
   try {
     localStorage.setItem(key, value);
   } catch {
-    // Private-mode storage denial is not worth surfacing for a draft look.
+    // Private-mode storage denial is not worth surfacing for one browser's dials.
   }
 }
 
@@ -169,7 +278,7 @@ let pageRoot: HTMLElement | null = null;
 
 let installed = false;
 
-function render(enabled: boolean, settings: SketchSettings): void {
+function render(enabled: boolean, settings: SketchStyle): void {
   if (typeof document === 'undefined') return;
   if (!enabled) {
     if (installed) removeSketchLayer();
@@ -185,6 +294,50 @@ function render(enabled: boolean, settings: SketchSettings): void {
   setSketchScope(pageRoot, settings);
 }
 
+/** Paint one look 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 {
+  if (typeof document === 'undefined') return;
+  if (style) {
+    applySketchLayer(style);
+    installed = true;
+  }
+  setSketchScope(hostRoot(), style ?? null);
+  setSketchScope(pageRoot, style ?? null);
+}
+
+/** Paint a sketchstyle for the Theme Picker preview, bypassing the live
+    buffer entirely: going through `sketchSettings`/`sketchEnabled` would
+    `share()` the previewed dials into localStorage and overwrite whatever
+    the user had live, which is right for Apply (RJC 6) but would destroy
+    unsaved work the moment the picker opened a row. The paint reaches the
+    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 {
+  paintPreviewRoots(style);
+}
+
+/** Undo a sketchstyle preview by repainting the live buffer, which the
+    preview never touched. Re-deriving from the current stores rather than a
+    scraped snapshot means it can't drift from what they actually hold by the
+    time the picker closes. */
+export function revertSketchStylePreview(): void {
+  if (get(sketchEnabled)) {
+    paintPreviewRoots(get(sketchSettings));
+    return;
+  }
+  // The one case with nodes to take down: a sketched preview over a crisp live
+  // state injected the sheet. `render`'s sweep is safe here because every
+  // component scope answers to `sketchEnabled`, which is false.
+  render(false, get(sketchSettings));
+}
+
 export function setSketchPageRoot(el: HTMLElement | null): void {
   if (el === pageRoot) return;
   setSketchScope(pageRoot, null);
@@ -226,13 +379,14 @@ if (typeof document !== 'undefined') {
     render(get(sketchEnabled), settings);
   });
 
-  sketchPreset.subscribe((name) => share(PRESET_KEY, name));
+  sketchStyleName.subscribe((name) => share(STYLE_NAME_KEY, name));
   sketchBaseline.subscribe((b) => share(BASELINE_KEY, b ? JSON.stringify(b) : ''));
 
-  /* The overlay editor runs in an iframe, so the Sketch tab and a control on
-     the page are separate instances of this module. localStorage is the ground
-     they share: each adopts a value only when it differs from what it holds,
-     and records what it adopted so it never sends that value back. */
+  /* The overlay editor runs in an iframe, so the Sketchstyle view and a
+     control on the page are separate instances of this module. localStorage
+     is the ground they share: each adopts a value only when it differs from
+     what it holds, and records what it adopted so it never sends that value
+     back. */
   window.addEventListener('storage', (event) => {
     if (event.storageArea !== localStorage) return;
     if (event.key === ENABLED_KEY) {
@@ -245,10 +399,10 @@ if (typeof document !== 'undefined') {
         adopt(SETTINGS_KEY, JSON.stringify(next));
         sketchSettings.set(next);
       }
-    } else if (event.key === PRESET_KEY) {
-      const next = readPresetName();
-      adopt(PRESET_KEY, next);
-      if (next !== get(sketchPreset)) sketchPreset.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 === BASELINE_KEY) {
       const current = get(sketchBaseline);
       if ((event.newValue || '') !== (current ? JSON.stringify(current) : '')) {

package/src/editor/core/sketch/{sketchPresetService.ts → sketchStyleService.ts}

@@ -1,24 +1,24 @@
 import { API_BASE } from '../storage/apiBase';
-import { hydrateSketchSettings, type SketchSettings } from './sketchPresets';
+import { hydrateSketchStyle, type SketchStyle } from './sketchStyles';
 
-export interface SketchPresetFile {
+export interface SketchStyleFile {
   name: string;
   createdAt?: string;
   updatedAt?: string;
-  settings: SketchSettings;
+  settings: SketchStyle;
 }
 
-export interface SketchPresetMeta {
+export interface SketchStyleMeta {
   name: string;
   fileName: string;
   updatedAt: string;
 }
 
-const BASE = `${API_BASE}/sketch-presets`;
+const BASE = `${API_BASE}/sketch-styles`;
 
 /** Slug for the file name. The display name is stored inside the file, so this
     only has to be stable, unique-ish and inside the route's charset. */
-export function slugifySketchPreset(name: string): string {
+export function slugifySketchStyle(name: string): string {
   return name
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, '-')
@@ -26,24 +26,24 @@ export function slugifySketchPreset(name: string): string {
     .slice(0, 60);
 }
 
-export async function listSketchPresets(): Promise<SketchPresetMeta[]> {
+export async function listSketchStyles(): Promise<SketchStyleMeta[]> {
   const res = await fetch(BASE);
-  if (!res.ok) throw new Error('Failed to list sketch presets');
+  if (!res.ok) throw new Error('Failed to list sketchstyles');
   const body = await res.json();
   return body.files ?? [];
 }
 
-export async function loadSketchPreset(fileName: string): Promise<SketchPresetFile> {
+export async function loadSketchStyle(fileName: string): Promise<SketchStyleFile> {
   const res = await fetch(`${BASE}/${encodeURIComponent(fileName)}`);
-  if (!res.ok) throw new Error(`Failed to load sketch preset: ${fileName}`);
+  if (!res.ok) throw new Error(`Failed to load sketchstyle: ${fileName}`);
   const body = await res.json();
-  return { ...body, settings: hydrateSketchSettings(body.settings) };
+  return { ...body, settings: hydrateSketchStyle(body.settings) };
 }
 
-export async function saveSketchPreset(
+export async function saveSketchStyle(
   fileName: string,
   name: string,
-  settings: SketchSettings,
+  settings: SketchStyle,
 ): Promise<void> {
   const res = await fetch(`${BASE}/${encodeURIComponent(fileName)}`, {
     method: 'PUT',
@@ -56,7 +56,7 @@ export async function saveSketchPreset(
   }
 }
 
-export async function deleteSketchPreset(fileName: string): Promise<void> {
+export async function deleteSketchStyle(fileName: string): Promise<void> {
   const res = await fetch(`${BASE}/${encodeURIComponent(fileName)}`, { method: 'DELETE' });
   if (!res.ok) {
     const err = await res.json().catch(() => ({ error: 'Delete failed' }));

package/src/editor/core/sketch/{sketchPresets.ts → sketchStyles.ts}

@@ -1,4 +1,4 @@
-export interface SketchSettings {
+export interface SketchStyle {
   label: string;
   blurb: string;
   /** How far the fill's edge travels at its furthest, in px. Every dial that
@@ -119,7 +119,7 @@ export interface SketchSettings {
   iconMaskScale: number;
 }
 
-const base: SketchSettings = {
+const base: SketchStyle = {
   label: '', blurb: '',
   fillTravel: 1.5, strokeTravel: 1.5, wobble: 45, roughness: 3,
   borderWavelength: 1, waveform: 1,
@@ -133,7 +133,7 @@ const base: SketchSettings = {
   iconTravel: 1.25, iconWavelength: 0.625, iconMaskOn: true, iconMaskScale: 1,
 };
 
-export const SKETCH_PRESETS: Record<string, SketchSettings> = {
+export const SKETCH_STYLES: Record<string, SketchStyle> = {
   pencil: {
     ...base, 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.',
@@ -214,17 +214,17 @@ export const SKETCH_PRESETS: Record<string, SketchSettings> = {
   },
 };
 
-export const DEFAULT_SKETCH_PRESET = 'marker';
+export const DEFAULT_SKETCH_STYLE = 'marker';
 
-/** Reconciled against a full preset in both directions: a value stored before a
+/** 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 hydrateSketchSettings(raw: unknown): SketchSettings {
-  const base = SKETCH_PRESETS[DEFAULT_SKETCH_PRESET];
-  const stored = (raw ?? {}) as Partial<SketchSettings>;
+export function hydrateSketchStyle(raw: unknown): SketchStyle {
+  const base = SKETCH_STYLES[DEFAULT_SKETCH_STYLE];
+  const stored = (raw ?? {}) as Partial<SketchStyle>;
   const out = { ...base };
-  for (const key of Object.keys(base) as (keyof SketchSettings)[]) {
+  for (const key of Object.keys(base) as (keyof SketchStyle)[]) {
     if (stored[key] !== undefined) (out[key] as unknown) = stored[key];
   }
   // A retired option: the fill's presence belongs to the theme, not the effect.
@@ -241,8 +241,8 @@ export function hydrateSketchSettings(raw: unknown): SketchSettings {
 
 /** 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
-    distance rather than at whatever the fallback preset happens to carry. */
-function restoreDerivedRetrace(stored: Record<string, unknown>, out: SketchSettings): void {
+    distance rather than at whatever the fallback sketchstyle happens to carry. */
+function restoreDerivedRetrace(stored: Record<string, unknown>, out: SketchStyle): void {
   if (stored.retraceOffset === undefined) {
     out.retraceOffset = Number(Math.max(1.2, out.strokeWidth * 0.55).toFixed(2));
   }
@@ -262,7 +262,7 @@ 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: SketchSettings): void {
+function convertCyclesToWavelength(stored: Record<string, unknown>, out: SketchStyle): 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
@@ -285,13 +285,13 @@ function convertCyclesToWavelength(stored: Record<string, unknown>, out: SketchS
     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: SketchSettings): void {
+function convertIconTileToScale(stored: Record<string, unknown>, out: SketchStyle): 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: SketchSettings): void {
+function halveSwingDials(stored: Record<string, unknown>, out: SketchStyle): void {
   for (const [legacy, key] of Object.entries(SWING_DIALS)) {
     const value = stored[legacy];
     if (typeof value === 'number') out[key as 'fillTravel'] = value / 2;
@@ -301,7 +301,7 @@ function halveSwingDials(stored: Record<string, unknown>, out: SketchSettings):
 /** 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: SketchSettings): void {
+function convertTiledMask(stored: Record<string, unknown>, out: SketchStyle): void {
   const scale = stored.maskScale;
   if (typeof scale !== 'number') return;
   const freq = stored.maskFrequency;
@@ -316,7 +316,7 @@ function convertTiledMask(stored: Record<string, unknown>, out: SketchSettings):
  * 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: SketchSettings): void {
+function convertCutToLevels(stored: Record<string, unknown>, out: SketchStyle): void {
   const contrast = stored.maskContrast;
   const coverage = stored.maskCoverage;
   if (typeof contrast !== 'number' || typeof coverage !== 'number') return;
@@ -332,7 +332,7 @@ function convertCutToLevels(stored: Record<string, unknown>, out: SketchSettings
     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,
     which keeps its spread and loses only the hole. */
-function carryLevelsToOutput(stored: Record<string, unknown>, out: SketchSettings): void {
+function carryLevelsToOutput(stored: Record<string, unknown>, out: SketchStyle): void {
   if (typeof stored.maskLevelMin === 'number') out.maskOutputMin = stored.maskLevelMin;
   if (typeof stored.maskLevelMax === 'number') out.maskOutputMax = stored.maskLevelMax;
 }

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

@@ -2,6 +2,7 @@ import { liveMovedSinceBake } from '../productionPulse';
 import { openThemeSlug } from '../store/editorConfigStore';
 import { loadThemeFromApi } from '../store/editorStore';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
+import { openThemeSketchStyle } from '../sketch/sketchStore';
 import type { ApplyThemeResult } from './themeService';
 
 const CHANNEL_NAME = 'live-tokens:active-theme:v1';
@@ -42,6 +43,7 @@ export function hydrateAppliedTheme(fileName: string, result: ApplyThemeResult):
   migrateColorsAndTypeFonts(colorsAndType);
   loadThemeFromApi(colorsAndType, structuredClone(result.componentConfigs));
   openThemeSlug.set(fileName);
+  openThemeSketchStyle(result.theme.sketchStyle);
   liveMovedSinceBake.set(false);
   if (typeof document !== 'undefined') {
     document.dispatchEvent(new CustomEvent<AppliedThemeDetail>(THEME_APPLIED_EVENT, {

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

@@ -1,10 +1,11 @@
-import type { AliasDiskValue, ColorsAndType } from './themeTypes';
+import type { AliasDiskValue, ColorsAndType, Theme } from './themeTypes';
 import { openThemeSlug } from '../store/editorConfigStore';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
 import { loadFromFile, seedComponentsFromApi } from '../store/editorStore';
 import { getActiveComponentConfig, type ComponentSummary } from '../components/componentConfigService';
 import { safeFetch } from '../storage/storage';
 import { API_BASE } from '../storage/apiBase';
+import { hasPersistedSketchState, openThemeSketchStyle, themeSketchStyle } from '../sketch/sketchStore';
 
 interface ListComponentsDto {
   components: ComponentSummary[];
@@ -61,4 +62,21 @@ export async function initializeTheme(): Promise<void> {
     // and CSS defaults because one request happened to fail during boot.
     if (!componentReadFailed) seedComponentsFromApi(configs);
   }
+
+  const active = await safeFetch<Theme>(`${API_BASE}/themes/active`);
+  // A failed fetch is not "the theme carries no sketchstyle": treating null as
+  // absent would tell the panel the look is off the theme, or hand a fresh
+  // browser a blank buffer, over a fetch that will likely succeed next time.
+  if (active) {
+    if (hasPersistedSketchState()) {
+      // The buffer already painted on the first frame; boot only learns what
+      // the theme holds so unsaved dial work reads as unsaved rather than
+      // getting silently overwritten (that overwrite is what Apply is for).
+      themeSketchStyle.set(active.sketchStyle);
+    } else {
+      // Nothing was ever recorded in this browser: the theme's value becomes
+      // the live value, the same reconciliation opening a theme performs.
+      openThemeSketchStyle(active.sketchStyle);
+    }
+  }
 }