@motion-proto/live-tokens 0.74.0 → 0.76.0

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

@@ -407,24 +407,26 @@
           </div>
         {/if}
       </div>
-      {#if unboxedPreview}
-        <div class="sketch-scope" bind:this={sketchStage}>
-          {@render children?.({ activeState: activeTab })}
-        </div>
-      {:else}
-        <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding={backdropPadding}>
-          {#snippet controls()}
-            <div class="canvas-toolbar">
-              <span class="canvas-toolbar-eyebrow">Background</span>
-              <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} modes={backdropModes ?? ['default', 'image', 'color']} />
-              {@render canvasToolbarExtras?.()}
-            </div>
-          {/snippet}
+      <div class="preview-stage">
+        {#if unboxedPreview}
           <div class="sketch-scope" bind:this={sketchStage}>
-          {@render children?.({ activeState: activeTab })}
-        </div>
-        </ShadowBackdrop>
-      {/if}
+            {@render children?.({ activeState: activeTab })}
+          </div>
+        {:else}
+          <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding={backdropPadding}>
+            {#snippet controls()}
+              <div class="canvas-toolbar">
+                <span class="canvas-toolbar-eyebrow">Background</span>
+                <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} modes={backdropModes ?? ['default', 'image', 'color']} />
+                {@render canvasToolbarExtras?.()}
+              </div>
+            {/snippet}
+            <div class="sketch-scope" bind:this={sketchStage}>
+              {@render children?.({ activeState: activeTab })}
+            </div>
+          </ShadowBackdrop>
+        {/if}
+      </div>
 
       {#if tabsStripVisible}
         <div class="tabs-states-block">
@@ -556,9 +558,13 @@
   /* Pin the preview + state-tab strip to the top of the page scroll so
      property edits stay visually connected to the preview without scrolling.
      The card background extends through the sticky band so the property grid
-     scrolls cleanly behind it. The element-grouped property layout (see
-     StateBlock) fans out horizontally, which keeps the property section
-     short enough that the sticky preview rarely steals usable space. */
+     scrolls cleanly behind it.
+
+     The cap is load-bearing: a sticky band taller than the viewport covers the
+     property controls at every scroll position, which the tallest previews
+     (SideNavigation, Image, Card) reach on a 13-inch laptop. Capping the band
+     and scrolling the stage inside it keeps the header and the state strip
+     pinned and always leaves the controls a viewport to live in. */
   .tabs-preview {
     position: sticky;
     top: 0;
@@ -566,6 +572,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-20);
+    max-height: 50vh;
     background: var(--ui-surface-low);
     /* Bleed the background up through the card's top padding so content
        scrolling behind doesn't peek between the viewport edge and the
@@ -577,6 +584,20 @@
     border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
   }
 
+  .preview-stage {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-20);
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .preview-header,
+  .tabs-states-block {
+    flex: none;
+  }
+
   /* Soft fade at the bottom of the sticky band so property rows scrolling
      up don't sharply cut against the pinned preview. Greyscale (no accent).
      Sits below the preview body, above scrolling content. */

package/src/editor/core/components/adjustAliases.ts

@@ -1,7 +1,7 @@
 import { matchesKind, stripSide } from './aliasKinds';
 import type { AliasDiskValue, ComponentConfig } from '../themes/themeTypes';
 
-export type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';
+export type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width' | 'divider-width' | 'accent-width';
 
 export interface AdjustOp {
   /** Component id; omitted applies the op to every config. */
@@ -9,11 +9,11 @@ export interface AdjustOp {
   kind: AdjustKind;
   set?: string;
   shift?: number;
-  /** Radius shifts only: admits `--radius-full` as the ladder's top rung. */
+  /** Radius shifts only: admits `--radius-full` as the top step of the scale. */
   full?: boolean;
 }
 
-export type SkipReason = 'raw-value' | 'off-ladder' | 'clamped' | 'pill-preserved';
+export type SkipReason = 'raw-value' | 'off-scale' | 'clamped' | 'pill-preserved' | 'none-preserved';
 
 export interface AliasChange {
   variable: string;
@@ -44,7 +44,7 @@ export interface AdjustResult {
 
 const RADIUS_FULL = '--radius-full';
 
-const RADIUS_RUNGS = [
+const RADIUS_STEPS = [
   '--radius-none', '--radius-sm', '--radius-md', '--radius-lg', '--radius-xl',
   '--radius-2xl', '--radius-3xl', '--radius-4xl',
 ];
@@ -57,43 +57,56 @@ const SPACE_SETTABLE = [
   '--space-12', '--space-16', '--space-20', '--space-24', '--space-32', '--space-48',
 ];
 
-const SPACE_RUNGS = SPACE_SETTABLE;
+const SPACE_STEPS = SPACE_SETTABLE;
 
 /** Content insets stop at `--space-4`. Below it the text sits against its own
     edge, which is a deliberate choice rather than somewhere a relative
     "tighter" should deposit you. Outer space is exempt: a 2px gap between an
     icon and its label, or a 2px margin under a bar, is ordinary design. Both
-    rungs stay pickable by hand and settable by name. */
-const INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf('--space-4'));
+    steps stay pickable by hand and settable by name. */
+const INSET_STEPS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf('--space-4'));
 
-/** Padding that wraps a line of type stops a rung higher. Those components
+/** Padding that wraps a line of type stops a step higher. Those components
     double it horizontally (`themed-padding($h: 2)`), so `--space-4` is 4px
     over an 18px line and 8px inside a pill's own corner: squeezed rather than
     compact. No shipped default puts text below `--space-6`. */
-const TEXT_INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf('--space-6'));
+const TEXT_INSET_STEPS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf('--space-6'));
 
 const SPACE_FAMILY = [...SPACE_SETTABLE, '--space-40', '--space-64', '--space-96', '--space-128'];
 
-const BORDER_WIDTH_RUNGS = [
-  '--border-width-0', '--border-width-1', '--border-width-2', '--border-width-3',
+const BORDER_WIDTH_NONE = '--border-width-0';
+
+const BORDER_WIDTH_SETTABLE = [
+  BORDER_WIDTH_NONE, '--border-width-1', '--border-width-2', '--border-width-3',
   '--border-width-4', '--border-width-5', '--border-width-6', '--border-width-8',
   '--border-width-10', '--border-width-12', '--border-width-16', '--border-width-20',
   '--border-width-24',
 ];
 
-const LADDERS: Record<AdjustKind, { rungs: string[]; settable: string[]; family: string[] }> = {
+/** A line that is not drawn is a decision, so a shift never draws one and
+    never erases one. Zero is reached by `set` alone, like `--radius-full`. */
+const STROKE_STEPS = BORDER_WIDTH_SETTABLE.slice(1);
+
+/** Three stroke roles ride the one `--border-width-*` scale. A border
+    encloses, a divider separates, an accent emphasises, and an intent
+    such as "hairline rules" names one role without the others. */
+const STROKE_SCALE = {
+  steps: STROKE_STEPS,
+  settable: BORDER_WIDTH_SETTABLE,
+  family: BORDER_WIDTH_SETTABLE,
+};
+
+const SCALES: Record<AdjustKind, { steps: string[]; settable: string[]; family: string[] }> = {
   radius: {
-    rungs: RADIUS_RUNGS,
-    settable: [...RADIUS_RUNGS, RADIUS_FULL],
-    family: [...RADIUS_RUNGS, RADIUS_FULL],
-  },
-  padding: { rungs: SPACE_RUNGS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
-  gap: { rungs: SPACE_RUNGS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
-  'border-width': {
-    rungs: BORDER_WIDTH_RUNGS,
-    settable: BORDER_WIDTH_RUNGS,
-    family: BORDER_WIDTH_RUNGS,
+    steps: RADIUS_STEPS,
+    settable: [...RADIUS_STEPS, RADIUS_FULL],
+    family: [...RADIUS_STEPS, RADIUS_FULL],
   },
+  padding: { steps: SPACE_STEPS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
+  gap: { steps: SPACE_STEPS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
+  'border-width': STROKE_SCALE,
+  'divider-width': STROKE_SCALE,
+  'accent-width': STROKE_SCALE,
 };
 
 const TOKEN_NAME = /^--[a-z0-9-]+$/;
@@ -104,28 +117,28 @@ type Outcome = { from: string; to: string } | { skip: SkipReason };
     rather than the kind. Which floor depends on what the padding surrounds,
     and the config says so itself: a variant that also declares a
     `-text-font-size` is holding type. */
-function rungsFor(op: AdjustOp, variable: string, aliases: ComponentConfig['aliases']): string[] {
-  if (op.kind === 'radius') return op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : RADIUS_RUNGS;
-  if (op.kind !== 'padding') return LADDERS[op.kind].rungs;
+function stepsFor(op: AdjustOp, variable: string, aliases: ComponentConfig['aliases']): string[] {
+  if (op.kind === 'radius') return op.full ? [...RADIUS_STEPS, RADIUS_FULL] : RADIUS_STEPS;
+  if (op.kind !== 'padding') return SCALES[op.kind].steps;
   const base = stripSide(variable);
-  if (!base.endsWith('-padding')) return LADDERS.padding.rungs;
+  if (!base.endsWith('-padding')) return SCALES.padding.steps;
   const variant = base.slice(0, -'-padding'.length);
-  return `${variant}-text-font-size` in aliases ? TEXT_INSET_RUNGS : INSET_RUNGS;
+  return `${variant}-text-font-size` in aliases ? TEXT_INSET_STEPS : INSET_STEPS;
 }
 
 function spaceStep(token: string): number {
   return Number(token.slice('--space-'.length));
 }
 
-/** An off-rung value has no step to count from, so landing on the first rung
+/** An off-scale value has no step to count from, so landing on the first step
     the shift points at is itself that shift's opening step. Snapping to the
-    nearest rung instead would spend two visible steps on a one-step request.
-    Returns -1 when the ladder holds nothing in that direction. */
-function snapRung(token: string, rungs: string[], direction: number): number {
+    nearest step instead would spend two visible steps on a one-step request.
+    Returns -1 when the scale holds nothing in that direction. */
+function snapStep(token: string, steps: string[], direction: number): number {
   const step = spaceStep(token);
-  if (direction > 0) return rungs.findIndex((rung) => spaceStep(rung) > step);
-  for (let index = rungs.length - 1; index >= 0; index--) {
-    if (spaceStep(rungs[index]) < step) return index;
+  if (direction > 0) return steps.findIndex((candidate) => spaceStep(candidate) > step);
+  for (let index = steps.length - 1; index >= 0; index--) {
+    if (spaceStep(steps[index]) < step) return index;
   }
   return -1;
 }
@@ -137,28 +150,29 @@ function resolve(
   aliases: ComponentConfig['aliases'],
 ): Outcome {
   if (typeof value !== 'string' || !TOKEN_NAME.test(value)) return { skip: 'raw-value' };
-  if (!LADDERS[op.kind].family.includes(value)) return { skip: 'off-ladder' };
+  if (!SCALES[op.kind].family.includes(value)) return { skip: 'off-scale' };
   if (op.set !== undefined) return { from: value, to: op.set };
 
-  const rungs = rungsFor(op, variable, aliases);
-  let index = rungs.indexOf(value);
+  const steps = stepsFor(op, variable, aliases);
+  let index = steps.indexOf(value);
   let shift = op.shift!;
   if (index < 0) {
     if (value === RADIUS_FULL) return { skip: 'pill-preserved' };
-    index = snapRung(value, rungs, shift);
+    if (value === BORDER_WIDTH_NONE) return { skip: 'none-preserved' };
+    index = snapStep(value, steps, shift);
     if (index < 0) return { skip: 'clamped' };
     shift -= Math.sign(shift);
   }
 
   const wanted = index + shift;
-  const landed = Math.min(Math.max(wanted, 0), rungs.length - 1);
-  if (landed !== wanted && rungs[landed] === value) return { skip: 'clamped' };
-  return { from: value, to: rungs[landed] };
+  const landed = Math.min(Math.max(wanted, 0), steps.length - 1);
+  if (landed !== wanted && steps[landed] === value) return { skip: 'clamped' };
+  return { from: value, to: steps[landed] };
 }
 
 function validateOp(op: AdjustOp, configs: Record<string, ComponentConfig>): void {
-  const ladder = LADDERS[op.kind];
-  if (!ladder) throw new Error(`Unknown kind "${op.kind}" (expected ${Object.keys(LADDERS).join(', ')})`);
+  const scale = SCALES[op.kind];
+  if (!scale) throw new Error(`Unknown kind "${op.kind}" (expected ${Object.keys(SCALES).join(', ')})`);
   if (op.target !== undefined && !(op.target in configs)) {
     throw new Error(`Unknown target component "${op.target}"`);
   }
@@ -166,9 +180,9 @@ function validateOp(op: AdjustOp, configs: Record<string, ComponentConfig>): voi
   const hasSet = op.set !== undefined;
   const hasShift = op.shift !== undefined;
   if (hasSet === hasShift) throw new Error(`A ${op.kind} op needs exactly one of "set" or "shift"`);
-  const settable = ladder.settable;
+  const settable = scale.settable;
   if (hasSet && !settable.includes(op.set!)) {
-    throw new Error(`"${op.set}" is not on the ${op.kind} ladder`);
+    throw new Error(`"${op.set}" is not on the ${op.kind} scale`);
   }
   if (hasShift && !Number.isInteger(op.shift)) {
     throw new Error(`"shift" must be a whole number of steps, got ${op.shift}`);

package/src/editor/core/components/aliasKinds.ts

@@ -2,8 +2,9 @@ export type TokenKind =
   | 'surface'
   | 'border'
   | 'border-width'
-  | 'radius'
   | 'divider-width'
+  | 'accent-width'
+  | 'radius'
   | 'divider-height'
   | 'divider-inset'
   | 'dot-size'
@@ -28,7 +29,7 @@ export type TokenKind =
     `suffix:` arrays out of this file, which is why they are plain literals.
 
     Order matters: `-text` must run before `-border`/`-surface`, and
-    `-accent-width` before `-accent`, because the first match wins. A variable
+    `-accent-width` before `-accent` and `-width`, because the first match wins. A variable
     matching nothing falls through to `text-color` (a palette picker), but that
     fall-through is a smell — `check-component` rejects an unrecognised suffix,
     so add the name here rather than letting it drift. */
@@ -47,7 +48,10 @@ export const KIND_RULES: ReadonlyArray<{
                                      '-description', '-hint', '-error', '-placeholder', '-value'],
                             prefix: ['--text-'] },
   { kind: 'radius',         suffix: ['-radius'], prefix: ['--radius-'] },
-  { kind: 'divider-width',  suffix: ['-divider-width', '-divider-thickness'] },
+  // Three stroke roles share the `--border-width-*` scale: a border encloses,
+  // a divider separates, an accent emphasises. `set-geometry` moves each role
+  // on its own, so a suffix has to say which line it names.
+  { kind: 'divider-width',  suffix: ['-divider-width', '-divider-thickness', '-hairline-thickness', '-thickness'] },
   { kind: 'divider-height', suffix: ['-divider-height', '-track-height'] },
   { kind: 'divider-inset',  suffix: ['-divider-inset', '-inset'] },
   { kind: 'dot-size',       suffix: ['-dot-size'] },
@@ -58,8 +62,8 @@ export const KIND_RULES: ReadonlyArray<{
   { kind: 'gap',            suffix: ['-gap'] },
   { kind: 'duration',       suffix: ['-duration'], prefix: ['--duration-'] },
   { kind: 'easing',         suffix: ['-easing'], prefix: ['--ease-'] },
-  { kind: 'border-width',   suffix: ['-border-width', '-accent-width', '-hairline-thickness', '-thickness'],
-                            prefix: ['--border-width-'] },
+  { kind: 'accent-width',   suffix: ['-accent-width', '-indicator-width'] },
+  { kind: 'border-width',   suffix: ['-border-width'], prefix: ['--border-width-'] },
   { kind: 'border',         suffix: ['-border'], prefix: ['--border-'] },
   // A dimension with no more specific name behind it — a panel's width, an
   // avatar's size. Last of the geometry rules, so every `-border-width`,

package/src/editor/core/preview/themePreview.ts

@@ -48,12 +48,19 @@ export function renderTheme(theme: Theme, defaults: Theme): RenderedTheme {
   migrateColorsAndTypeFonts(colorsAndType);
   const state = colorsAndTypeToState(colorsAndType);
   state.components = {};
+  // The stamp is the theme's, never the entry's: `normalizeTheme` strips a
+  // per-entry `schemaVersion` on every read, so reading one back yields
+  // undefined and replays every migration over already-current data.
   for (const [comp, config] of Object.entries(defaults.componentConfigs)) {
-    state.components[comp] = toComponentSlice(comp, config.aliases, config.config, config.schemaVersion);
+    state.components[comp] = toComponentSlice(
+      comp, config.aliases, config.config, defaults.componentSchemaVersion,
+    );
   }
   for (const [comp, config] of Object.entries(theme.componentConfigs)) {
     if (!(comp in state.components)) continue;
-    state.components[comp] = toComponentSlice(comp, config.aliases, config.config, config.schemaVersion);
+    state.components[comp] = toComponentSlice(
+      comp, config.aliases, config.config, theme.componentSchemaVersion,
+    );
   }
   const vars = deriveCssVars(state);
   return { vars, fontSources: colorsAndType.fontSources ?? [] };

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

@@ -119,6 +119,15 @@ const PART_SPECS: readonly PartSpec[] = [
     sel: '.icon-button.outline', fill: 'transparent', stroke: 'var(--iconbutton-outline-border)',
     radius: 'var(--iconbutton-outline-radius, 0px)',
   },
+  // The dot names its colours `-fill` and `-border-color`, so it supplies
+  // both explicitly rather than through a `-surface`/`-border` stem.
+  {
+    sel: '.radio-dot',
+    fill: 'var(--radiobutton-default-dot-fill)',
+    stroke: 'var(--radiobutton-default-dot-border-color)',
+  },
+  { sel: '.save-btn', stem: 'inlineeditactions-save-default' },
+  { sel: '.cancel-btn', stem: 'inlineeditactions-cancel-default' },
 
   // Chips
   ...BADGE_VARIANTS.map((v) => ({ sel: `.badge-${v}`, stem: `badge-${v}` })),
@@ -172,6 +181,17 @@ const PART_SPECS: readonly PartSpec[] = [
   },
   // The arrow is the tooltip's own ::after, so the box takes the fill only.
   { sel: '.tooltip', stem: 'tooltip', positioned: true, strokeless: true, unmasked: true },
+  // Absolutely positioned inside its own wrapper, and clips the picture to the
+  // frame the same way `.image` does.
+  { sel: '.image-lightbox-thumb', stem: 'imagelightbox-tile', positioned: true, clips: true },
+  // A fixed full-viewport scrim behind the open modal; no border of its own.
+  {
+    sel: '.image-lightbox-overlay', fill: 'var(--imagelightbox-overlay-surface)',
+    stroke: 'transparent', positioned: true, unmasked: true,
+  },
+  // Close and the two nav chevrons all carry this class; each is fixed and
+  // floats over the photo rather than a scrim of its own.
+  { sel: '.image-lightbox-chrome', stem: 'imagelightbox-chrome', positioned: true, unmasked: true },
 
   // Status blocks
   ...STATUS_VARIANTS.map((v) => ({ sel: `.callout-${v}`, stem: `callout-${v}` })),
@@ -300,6 +320,8 @@ const STATE_COLOURS: readonly StateSpec[] = [
   hoverPair('.button.outline', 'button-outline'),
   ...FILLED_BUTTON_VARIANTS.map((v) => hoverPair(`.icon-button.${v}`, `iconbutton-${v}`)),
   hoverPair('.icon-button.outline', 'iconbutton-outline'),
+  hoverPair('.save-btn', 'inlineeditactions-save'),
+  hoverPair('.cancel-btn', 'inlineeditactions-cancel'),
   hoverPair('.tab', 'tabbar'),
   // A menu's hover belongs to the item under the pointer. The item is not a
   // drawn part, so it keeps its own background and lights up on its own.

package/src/editor/core/store/editorStore.ts

@@ -327,15 +327,24 @@ export function seedComponentsFromApi(
  * separately, causing two complete renderer passes and briefly exposing a
  * mixed old-components/new-tokens state. Build the final state first and emit
  * it once instead.
+ *
+ * A payload mixes sources: a working buffer and a shipped default each carry
+ * their own stamp, while a config resolved from the open theme has had its
+ * stamp stripped by `normalizeTheme` and is covered by the theme-level
+ * `componentSchemaVersion`. Defaulting a stripped entry to 0 replays every
+ * migration over already-current data.
  */
 export function loadThemeFromApi(
   colorsAndType: ColorsAndType,
   configs: Record<string, ComponentSeed>,
+  themeComponentSchemaVersion: number,
 ): void {
   const next = colorsAndTypeToState(colorsAndType);
   next.components = {};
   for (const [comp, cfg] of Object.entries(configs)) {
-    const split = toComponentSlice(comp, cfg.aliases, cfg.config, cfg.schemaVersion ?? 0);
+    const split = toComponentSlice(
+      comp, cfg.aliases, cfg.config, cfg.schemaVersion ?? themeComponentSchemaVersion,
+    );
     next.components[comp] = { aliases: { ...split.aliases }, config: { ...split.config } };
     setSavedComponentBaseline(comp, componentBaseline(split));
   }

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

@@ -307,7 +307,7 @@ function runContrastGate(
       const hint = scheme === 'dark'
         ? `raise the ${label} base color lightness (derived text tops out at 2× its L)`
         : `raise the ${label} base color lightness or reduce its chroma`;
-      return `${c.textVar} reaches ${c.ratio.toFixed(2)}:1 vs ${c.against} (floor ${c.floor}:1) — ${hint}`;
+      return `${c.textVar} reaches ${c.ratio.toFixed(2)}:1 vs ${c.against} (floor ${c.floor}:1): ${hint}`;
     });
 
   return { scheme, checks, failures };
@@ -371,7 +371,7 @@ function applyCanvasGradient(canvas: PaletteConfig, scheme: SchemeDirection): st
     ? Math.min(anchor + 2, labels.length - 1)
     : Math.max(anchor - 2, 0);
   if (sky === anchor) {
-    return `skipped — the Canvas base color anchors at the ramp edge (${labels[anchor]}), leaving no room for a sky; commit the canvas further from ${scheme === 'dark' ? 'black' : 'white'}`;
+    return `skipped: the Canvas base color anchors at the ramp edge (${labels[anchor]}), leaving no room for a sky; commit the canvas further from ${scheme === 'dark' ? 'black' : 'white'}`;
   }
   canvas.emptyMode = 'gradient';
   canvas.gradientStyle = 'linear';
@@ -382,7 +382,7 @@ function applyCanvasGradient(canvas: PaletteConfig, scheme: SchemeDirection): st
     { position: 100, paletteLabel: labels[anchor] },
   ];
   canvas.gradientSize = 'window';
-  return `on, ${labels[sky]} → ${labels[anchor]}`;
+  return `on, ${labels[sky]} to ${labels[anchor]}`;
 }
 
 /** The tokens.css scale, the starting point when a theme carries no shadows.

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

@@ -0,0 +1,26 @@
+import { API_BASE } from '../storage/apiBase';
+import { hydrateAppliedTheme } from './themeDocumentSync';
+import type { LiveState } from './themeService';
+
+export const LIVE_STATE_EVENT = 'live-state';
+
+let source: EventSource | null = null;
+
+/**
+ * Follow the dev server's live state. A buffer or the active pointer written
+ * from outside the page (a CLI verb, a branch switch) arrives as one frame,
+ * and this document hydrates from it the way it does from an Apply.
+ */
+export function init(): void {
+  if (source || typeof EventSource === 'undefined') return;
+  source = new EventSource(`${API_BASE}/events`);
+  source.addEventListener(LIVE_STATE_EVENT, (event) => {
+    const state = JSON.parse((event as MessageEvent<string>).data) as LiveState;
+    hydrateAppliedTheme(state.fileName, state);
+  });
+}
+
+export function __resetForTests(): void {
+  source?.close();
+  source = null;
+}

package/src/editor/core/themes/migrations/2026-09-07-stroke-role-renames.ts

@@ -0,0 +1,52 @@
+import type { Migration } from './index';
+
+/**
+ * Stroke role renames (2026-09-07).
+ *
+ * Three stroke roles share the `--border-width-*` scale: a border encloses, a
+ * divider separates, an accent emphasises. `set-geometry` moves each role on
+ * its own, and `aliasKinds` reads the role off the suffix, so a divider that
+ * was still named `-border` moved with the borders. These four components
+ * renamed their dividers and accents to say which line they are. Values are
+ * unchanged, so this is a pure key rename.
+ */
+const RENAMES: Record<string, Record<string, string>> = {
+  tabbar: Object.fromEntries(
+    ['default', 'hover', 'active', 'disabled'].map((s) => [
+      `--tabbar-${s}-indicator-border-width`,
+      `--tabbar-${s}-indicator-width`,
+    ]),
+  ),
+  collapsiblesection: Object.fromEntries(
+    ['default', 'hover'].flatMap((s) => [
+      [`--collapsiblesection-divider-${s}-border`, `--collapsiblesection-divider-${s}-hairline-color`],
+      [`--collapsiblesection-divider-${s}-border-width`, `--collapsiblesection-divider-${s}-hairline-thickness`],
+    ]),
+  ),
+  dialog: Object.fromEntries(
+    ['header', 'footer'].flatMap((part) => [
+      [`--dialog-${part}-border`, `--dialog-${part}-divider`],
+      [`--dialog-${part}-border-width`, `--dialog-${part}-divider-width`],
+    ]),
+  ),
+  table: {
+    '--table-default-header-border': '--table-default-header-divider',
+    '--table-default-header-border-width': '--table-default-header-divider-width',
+  },
+};
+
+export const componentMigration_2026_09_07_strokeRoleRenames: Migration = {
+  id: '2026-09-07-stroke-role-renames',
+  fromVersion: 26,
+  toVersion: 27,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -74,6 +74,7 @@ import { componentMigration_2026_09_01_tabbarActiveTint } from './2026-09-01-tab
 import { componentMigration_2026_09_01_gateSuffixEnabled } from './2026-09-01-gate-suffix-enabled';
 import { componentMigration_2026_09_02_sectiondividerDropTitleOutline } from './2026-09-02-sectiondivider-drop-title-outline';
 import { colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys } from './2026-09-03-drop-legacy-component-keys';
+import { componentMigration_2026_09_07_strokeRoleRenames } from './2026-09-07-stroke-role-renames';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -114,6 +115,7 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_09_01_gateSuffixEnabled,
   componentMigration_2026_09_02_sectiondividerDropTitleOutline,
   colorsAndTypeMigration_2026_09_03_dropLegacyComponentKeys,
+  componentMigration_2026_09_07_strokeRoleRenames,
 ];
 
 function countFor(kind: 'colors-and-type' | 'component-config'): number {

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

@@ -3,20 +3,20 @@ import { openThemeSlug } from '../store/editorConfigStore';
 import { loadThemeFromApi } from '../store/editorStore';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
 import { openThemeSketchSettings } from '../sketch/sketchStore';
-import type { ApplyThemeResult } from './themeService';
+import type { LiveState } from './themeService';
 
 const CHANNEL_NAME = 'live-tokens:active-theme:v1';
 export const THEME_APPLIED_EVENT = 'live-tokens:theme-applied';
 
 export interface AppliedThemeDetail {
   fileName: string;
-  result: ApplyThemeResult;
+  result: LiveState;
 }
 
 interface AppliedThemeMessage {
   type: 'theme-applied';
   fileName: string;
-  result: ApplyThemeResult;
+  result: LiveState;
 }
 
 let channel: BroadcastChannel | null = null;
@@ -32,19 +32,30 @@ function isAppliedThemeMessage(value: unknown): value is AppliedThemeMessage {
     && typeof message.result.componentConfigs === 'object';
 }
 
+/** A layer answered from a buffer: the live state is past the open theme. */
+function hasUnsavedLayer(state: LiveState): boolean {
+  return state.colorsAndType._source === 'working'
+    || Object.values(state.componentConfigs).some((cfg) => cfg._source === 'working');
+}
+
 /**
- * Replace this document's editor state with the complete state returned by
- * the theme apply endpoint. Each same-origin document owns its own Svelte
- * store, so writing CSS into another document is not enough: the receiving
- * editor must hydrate the typed palette and component layers as well.
+ * Replace this document's editor state with the complete live state the
+ * server resolved, after an Apply or an outside write. Each same-origin
+ * document owns its own Svelte store, so writing CSS into another document is
+ * not enough: the receiving editor must hydrate the typed palette and
+ * component layers as well.
  */
-export function hydrateAppliedTheme(fileName: string, result: ApplyThemeResult): void {
+export function hydrateAppliedTheme(fileName: string, result: LiveState): void {
   const colorsAndType = structuredClone(result.colorsAndType);
   migrateColorsAndTypeFonts(colorsAndType);
-  loadThemeFromApi(colorsAndType, structuredClone(result.componentConfigs));
+  loadThemeFromApi(
+    colorsAndType,
+    structuredClone(result.componentConfigs),
+    result.theme.componentSchemaVersion,
+  );
   openThemeSlug.set(fileName);
   openThemeSketchSettings(result.theme.sketchSettings);
-  liveMovedSinceBake.set(false);
+  liveMovedSinceBake.set(hasUnsavedLayer(result));
   if (typeof document !== 'undefined') {
     document.dispatchEvent(new CustomEvent<AppliedThemeDetail>(THEME_APPLIED_EVENT, {
       detail: { fileName, result },
@@ -63,6 +74,6 @@ export function init(): void {
 }
 
 /** Notify every already-open editor/host document after the server switches. */
-export function broadcastAppliedTheme(fileName: string, result: ApplyThemeResult): void {
+export function broadcastAppliedTheme(fileName: string, result: LiveState): void {
   channel?.postMessage({ type: 'theme-applied', fileName, result } satisfies AppliedThemeMessage);
 }

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

@@ -59,11 +59,18 @@ export function freshName(base: string, taken: Set<string>): string {
   return `${base}_${Date.now()}`;
 }
 
-export interface ApplyThemeResult {
-  ok: boolean;
+/** The whole live state as the server resolves it: the open theme and every
+ *  layer read through the live doors. An Apply answers with it, and the event
+ *  stream sends it after an outside write. */
+export interface LiveState {
+  fileName: string;
   theme: Theme;
   colorsAndType: ColorsAndType;
   componentConfigs: Record<string, ComponentConfig>;
+}
+
+export interface ApplyThemeResult extends LiveState {
+  ok: boolean;
   /** Components the theme carries data for that this install doesn't have. */
   skippedComponents: string[];
   /** What the completeness fill (`normalizeTheme`) had to add to reach this