@motion-proto/live-tokens 0.47.0 → 0.48.0

package/src/editor/core/themes/migrations/2026-08-15-line-height-scale-rename.ts

@@ -0,0 +1,57 @@
+import type { Migration } from './index';
+
+/**
+ * The data half of the tokens.css migration `2026-07-20-line-height-rename`,
+ * which reshaped the line-height scale from size vocabulary to leading
+ * vocabulary. That pass renames the definitions in `tokens.css`; a saved file
+ * still references the old names, and a reference to a token that no longer
+ * exists renders as nothing. Both layers reference the scale, so both migrate:
+ * colors-and-type through its `cssVariables`, a component config through its
+ * alias values.
+ *
+ * `xl` (2) has no slot in the leading scale, so it lands on `relaxed` (1.75),
+ * the nearest surviving step. That is a visible change to a line that used it,
+ * and the only alternative is a dangling reference.
+ *
+ * Values alone, never keys: a key is a definition (or, in a component config,
+ * the component's own token), and remapping `--line-height-xl` onto
+ * `--line-height-relaxed` would redefine a surviving step at 2 for everything
+ * that references it.
+ */
+const RENAMED: Record<string, string> = {
+  '--line-height-xs': '--line-height-none',
+  '--line-height-sm': '--line-height-tighter',
+  '--line-height-md': '--line-height-normal',
+  '--line-height-lg': '--line-height-relaxed',
+  '--line-height-xl': '--line-height-relaxed',
+};
+
+// Bare (`--line-height-md`) and wrapped (`var(--line-height-md)`) references
+// both occur; the lookahead keeps `--line-height-md` from matching inside a
+// longer name.
+const REFERENCE = /--line-height-(?:xs|sm|md|lg|xl)(?![\w-])/g;
+
+function renameValues(rawVars: Record<string, string>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(rawVars)) {
+    out[key] =
+      typeof value === 'string' ? value.replace(REFERENCE, (name) => RENAMED[name]) : value;
+  }
+  return out;
+}
+
+export const colorsAndTypeMigration_2026_08_15_lineHeightScaleRename: Migration = {
+  id: '2026-08-15-line-height-scale-rename-colors-and-type',
+  fromVersion: 4,
+  toVersion: 5,
+  appliesTo: 'colors-and-type',
+  apply: renameValues,
+};
+
+export const componentMigration_2026_08_15_lineHeightScaleRename: Migration = {
+  id: '2026-08-15-line-height-scale-rename-component',
+  fromVersion: 20,
+  toVersion: 21,
+  appliesTo: 'component-config',
+  apply: renameValues,
+};

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

@@ -8,7 +8,7 @@
  * is past a given version, that migration's bookkeeping is dead code and
  * the file can be deleted.
  *
- * Theme and component-config have INDEPENDENT version sequences. Every
+ * ColorsAndType and component-config have INDEPENDENT version sequences. Every
  * theme migration steps the theme version; every component-config migration
  * steps the component-config version. There is no shared 'both' kind.
  */
@@ -25,19 +25,19 @@ export interface Migration {
   /** Post-condition version — files past this no longer need this migration. */
   toVersion: number;
   /** Which storage flavor this applies to. */
-  appliesTo: 'theme' | 'component-config';
+  appliesTo: 'colors-and-type' | 'component-config';
   /** Pure transform on the raw vars map. May add, remove, or rename keys. */
   apply(rawVars: Record<string, string>, meta: MigrationMeta): Record<string, string>;
 }
 
-import { themeMigration_2026_04_24_legacyKeysAndBgToCanvas } from './2026-04-24-legacy-keys-and-bg-to-canvas';
+import { colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas } from './2026-04-24-legacy-keys-and-bg-to-canvas';
 import { componentMigration_2026_04_24_prefixAndSuffixRenames } from './2026-04-24-component-prefix-and-suffix-renames';
 import { componentMigration_2026_04_27_segmentedcontrolDisabledFlatten } from './2026-04-27-segmentedcontrol-disabled-flatten';
 import { componentMigration_2026_05_08_collapsiblesectionVariantNamespace } from './2026-05-08-collapsiblesection-variant-namespace';
 import { componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup } from './2026-05-08-collapsiblesection-frame-and-cleanup';
 import { componentMigration_2026_05_10_sectiondividerGradientStops } from './2026-05-10-sectiondivider-gradient-stops';
 import {
-  themeMigration_2026_05_13_primaryToBrand,
+  colorsAndTypeMigration_2026_05_13_primaryToBrand,
   componentMigration_2026_05_13_primaryToBrand,
 } from './2026-05-13-primary-to-brand';
 import { componentMigration_2026_05_19_collapsiblesectionDropFrameSurface } from './2026-05-19-collapsiblesection-drop-frame-surface';
@@ -51,20 +51,25 @@ import { componentMigration_2026_05_24_progressbarCollapseVariants } from './202
 import { componentMigration_2026_05_24_collapsiblesectionDropActiveState } from './2026-05-24-collapsiblesection-drop-active-state';
 import { componentMigration_2026_05_25_cornerbadgeFlattenVariants } from './2026-05-25-cornerbadge-flatten-variants';
 import {
-  themeMigration_2026_05_26_dropOverlayExtraStops,
+  colorsAndTypeMigration_2026_05_26_dropOverlayExtraStops,
   componentMigration_2026_05_26_dropOverlayExtraStops,
 } from './2026-05-26-drop-overlay-extra-stops';
 import { componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth } from './2026-05-29-tabbar-indicator-thickness-to-per-state-width';
 import { componentMigration_2026_05_29_segmentedcontrolSmallDividerRename } from './2026-05-29-segmentedcontrol-small-divider-rename';
 import { componentMigration_2026_05_29_toggleDeriveTrackFromThumb } from './2026-05-29-toggle-derive-track-from-thumb';
+import { colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys } from './2026-08-13-drop-legacy-shape-space-keys';
+import {
+  colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
+  componentMigration_2026_08_15_lineHeightScaleRename,
+} from './2026-08-15-line-height-scale-rename';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
  * filters by `appliesTo` and sorts by `toVersion` before applying.
  */
 export const MIGRATIONS: Migration[] = [
-  themeMigration_2026_04_24_legacyKeysAndBgToCanvas,
-  themeMigration_2026_05_13_primaryToBrand,
+  colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
+  colorsAndTypeMigration_2026_05_13_primaryToBrand,
   componentMigration_2026_04_24_prefixAndSuffixRenames,
   componentMigration_2026_04_27_segmentedcontrolDisabledFlatten,
   componentMigration_2026_05_08_collapsiblesectionVariantNamespace,
@@ -81,14 +86,17 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_24_progressbarCollapseVariants,
   componentMigration_2026_05_24_collapsiblesectionDropActiveState,
   componentMigration_2026_05_25_cornerbadgeFlattenVariants,
-  themeMigration_2026_05_26_dropOverlayExtraStops,
+  colorsAndTypeMigration_2026_05_26_dropOverlayExtraStops,
   componentMigration_2026_05_26_dropOverlayExtraStops,
   componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth,
   componentMigration_2026_05_29_segmentedcontrolSmallDividerRename,
   componentMigration_2026_05_29_toggleDeriveTrackFromThumb,
+  colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys,
+  colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
+  componentMigration_2026_08_15_lineHeightScaleRename,
 ];
 
-function countFor(kind: 'theme' | 'component-config'): number {
+function countFor(kind: 'colors-and-type' | 'component-config'): number {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
 }
 
@@ -97,7 +105,7 @@ function countFor(kind: 'theme' | 'component-config'): number {
  * adding a new dated migration file (and importing it above) auto-bumps the
  * relevant constant.
  */
-export const CURRENT_THEME_SCHEMA_VERSION = countFor('theme');
+export const CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION = countFor('colors-and-type');
 export const CURRENT_COMPONENT_SCHEMA_VERSION = countFor('component-config');
 
 /**
@@ -109,7 +117,7 @@ export const CURRENT_COMPONENT_SCHEMA_VERSION = countFor('component-config');
  * fromVersion=N can be deleted without affecting any load path.
  */
 export function runMigrations(
-  kind: 'theme' | 'component-config',
+  kind: 'colors-and-type' | 'component-config',
   fileVersion: number,
   rawVars: Record<string, string>,
   meta: MigrationMeta = {},

package/src/editor/core/themes/slices/components.ts

@@ -1,5 +1,5 @@
 /**
- * Components slice — per-component `{ activeFile, aliases, config, unlinked? }`.
+ * Components slice — per-component `{ aliases, config, unlinked? }`.
  *
  * `aliases` are the typed component-token → semantic-token map (each entry is
  * a `CssVarRef` discriminated union: `{ kind: 'token', name }` or
@@ -106,7 +106,7 @@ export function setComponentAlias(component: string, varName: string, ref: CssVa
     if (existing) {
       existing.aliases[varName] = ref;
     } else {
-      s.components[component] = { activeFile: 'default', aliases: { [varName]: ref }, config: {} };
+      s.components[component] = { aliases: { [varName]: ref }, config: {} };
     }
   });
 }
@@ -125,7 +125,7 @@ export function setComponentConfig(component: string, key: string, value: unknow
     if (existing) {
       existing.config[key] = value;
     } else {
-      s.components[component] = { activeFile: 'default', aliases: {}, config: { [key]: value } };
+      s.components[component] = { aliases: {}, config: { [key]: value } };
     }
   });
 }
@@ -272,7 +272,7 @@ export function setComponentAliasLinked(component: string, varName: string, ref:
     return;
   }
   mutate(`link ${component}/${groupKey}`, (s) => {
-    const slice = s.components[component] ?? (s.components[component] = { activeFile: 'default', aliases: {}, config: {} });
+    const slice = s.components[component] ?? (s.components[component] = { aliases: {}, config: {} });
     const unlinked = (slice.unlinked ?? []).filter((p) => p !== varName);
     slice.aliases[varName] = ref;
     for (const v of siblings) {

package/src/editor/core/themes/slices/fonts.ts

@@ -20,7 +20,7 @@ export function setFontStacks(stacks: FontStack[]): void {
  * Populate fonts from the server's active theme at boot. Does not push
  * a history entry — the boot load is a starting point, not an edit.
  */
-export function seedFontsFromTheme(sources: FontSource[], stacks: FontStack[]): void {
+export function seedFontsFromColorsAndType(sources: FontSource[], stacks: FontStack[]): void {
   store.update((s) => {
     s.fonts.sources = structuredClone(sources);
     s.fonts.stacks = structuredClone(stacks);

package/src/editor/core/themes/slices/gradients.ts

@@ -5,6 +5,7 @@
  * edits flow through.
  */
 import type { EditorState, GradientToken, GradientTokenStop, GradientType, GradientAliasValue } from '../../store/editorTypes';
+import type { GradientDiskToken } from '../themeTypes';
 import { mutate } from '../../store/editorCore';
 
 export function makeDefaultGradients(): GradientToken[] {
@@ -48,6 +49,27 @@ export function makeDefaultGradients(): GradientToken[] {
   ];
 }
 
+/**
+ * Loader: restore the gradient library from a file's structured `gradients`
+ * field and scrub the rendered `--gradient-N` strings from the vars bag — they
+ * are a projection kept for production CSS, never a basis. Files without the
+ * field (saved before gradients round-tripped) keep the seeded defaults, which
+ * match what those files rendered. A file whose slots don't match the fixed
+ * four is stale-shaped and also keeps defaults, mirroring the persistence
+ * layer's `migrateGradients` guard.
+ */
+export function loadGradientsFromFile(
+  next: EditorState,
+  gradients: GradientDiskToken[] | undefined,
+  rawVars: Record<string, string>,
+): void {
+  const expected = makeDefaultGradients().map((g) => g.variable).sort();
+  for (const name of expected) delete rawVars[name];
+  const have = (gradients ?? []).map((g) => g.variable).sort();
+  const matches = have.length === expected.length && expected.every((v, i) => v === have[i]);
+  if (matches) next.gradients.tokens = structuredClone(gradients) as GradientToken[];
+}
+
 function formatGradientStop(s: GradientTokenStop): string {
   return `${formatGradientStopColor(s)} ${s.position}%`;
 }

package/src/editor/core/themes/slices/palettes.ts

@@ -15,9 +15,9 @@ export function setPaletteConfig(label: string, config: PaletteConfig): void {
 
 /**
  * Server-boot path: populate all palettes at once without a history entry.
- * Mirrors `seedFontsFromTheme`.
+ * Mirrors `seedFontsFromColorsAndType`.
  */
-export function seedPalettesFromTheme(palettes: Record<string, PaletteConfig>): void {
+export function seedPalettesFromColorsAndType(palettes: Record<string, PaletteConfig>): void {
   store.update((s) => {
     s.palettes = structuredClone(palettes);
     return s;

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

@@ -1,31 +1,25 @@
-import type { AliasDiskValue, Theme } from './themeTypes';
-import { activeFileName } from '../store/editorConfigStore';
-import { migrateThemeFonts } from '../fonts/fontMigration';
+import type { AliasDiskValue, ColorsAndType } from './themeTypes';
+import { openThemeSlug } from '../store/editorConfigStore';
+import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
 import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
 import { loadFromFile, seedComponentsFromApi } from '../store/editorStore';
-import { getActiveComponentConfig } from '../components/componentConfigService';
+import { getActiveComponentConfig, type ComponentSummary } from '../components/componentConfigService';
 import { safeFetch } from '../storage/storage';
 import { API_BASE } from '../storage/apiBase';
 
-interface ComponentSummaryDto {
-  name: string;
-  activeFile: string;
-  productionFile: string;
-}
-
 interface ListComponentsDto {
-  components: ComponentSummaryDto[];
+  components: ComponentSummary[];
 }
 
 /**
- * Fetch the active theme from the server and apply its CSS variables
- * to :root before the app mounts. Seeds the editor store so PaletteEditors
- * initialize from the theme instead of stale localStorage.
+ * Fetch the live colors and type from the server and apply their CSS
+ * variables to :root before the app mounts. Seeds the editor store so
+ * PaletteEditors initialize from the server state instead of stale localStorage.
  *
- * Routes the theme through `loadFromFile` so palette-derived vars in
+ * Routes the payload through `loadFromFile` so palette-derived vars in
  * `deriveCssVars` correctly overwrite any stale hexes baked into
- * `theme.cssVariables` by `handleSave`'s scrape. Writing
- * `theme.cssVariables` directly to inline :root (the previous approach)
+ * `cssVariables` by `handleSave`'s scrape. Writing
+ * `cssVariables` directly to inline :root (the previous approach)
  * bypassed the store and left the subscriber's `lastApplied` diff cache
  * out of sync, so palette-derived values stayed stale until a
  * `PaletteEditor` mounted and re-emitted them.
@@ -35,32 +29,30 @@ interface ListComponentsDto {
  * `safeFetch` (instead of empty try/catch) to make the silence intentional.
  */
 export async function initializeTheme(): Promise<void> {
-  const theme = await safeFetch<Theme>(`${API_BASE}/themes/active`);
-  if (theme) {
-    migrateThemeFonts(theme);
-    loadFromFile(theme);
-    if (theme.fontSources && theme.fontSources.length > 0) {
-      applyFontSources(theme.fontSources);
+  const colorsAndType = await safeFetch<ColorsAndType>(`${API_BASE}/colors-and-type/active`);
+  if (colorsAndType) {
+    migrateColorsAndTypeFonts(colorsAndType);
+    loadFromFile(colorsAndType);
+    if (colorsAndType.fontSources && colorsAndType.fontSources.length > 0) {
+      applyFontSources(colorsAndType.fontSources);
     }
-    if (theme.fontStacks && theme.fontStacks.length > 0) {
-      applyFontStacks(theme.fontStacks, theme.fontSources ?? []);
+    if (colorsAndType.fontStacks && colorsAndType.fontStacks.length > 0) {
+      applyFontStacks(colorsAndType.fontStacks, colorsAndType.fontSources ?? []);
     }
-    const fileName = theme._fileName || 'default';
-    activeFileName.set(fileName);
+    openThemeSlug.set(colorsAndType._fileName || 'default');
   }
 
   const list = await safeFetch<ListComponentsDto>(`${API_BASE}/component-configs`);
   if (list && Array.isArray(list.components)) {
     const configs: Record<
       string,
-      { activeFile: string; aliases: Record<string, AliasDiskValue>; config?: Record<string, unknown>; schemaVersion?: number }
+      { aliases: Record<string, AliasDiskValue>; config?: Record<string, unknown>; schemaVersion?: number }
     > = {};
     await Promise.all(
       list.components.map(async (c) => {
         const cfg = await getActiveComponentConfig(c.name);
         if (cfg) {
           configs[c.name] = {
-            activeFile: c.activeFile,
             aliases: cfg.aliases,
             config: cfg.config,
             schemaVersion: cfg.schemaVersion,