@motion-proto/live-tokens 0.7.1 → 0.8.0

package/src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts

@@ -0,0 +1,35 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-19, sectiondivider only):
+ * the per-variant gradient was 7 flat tokens (angle + 3× (color + position)).
+ * It now lives as a single structured alias at `--sectiondivider-{v}-gradient`,
+ * carrying `{type, angle, stops[]}` inline on the component slice.
+ *
+ * The structured value is synthesized *before* this migration runs — see
+ * `synthesizeSectionDividerGradients` in `editorStore.ts`. The synthesizer
+ * walks the legacy 7-token shape and emits a `kind: 'gradient'` alias into
+ * the load path's object subset, where it survives this stripping pass and
+ * lands in the in-memory slice.
+ *
+ * This migration's only job is to delete the now-redundant flat tokens
+ * from the disk-shape string subset so a subsequent save round-trips to
+ * the new format.
+ */
+const FLAT_RE = /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-gradient-(angle|stop-[123]-(color|position))$/;
+
+export const componentMigration_2026_05_19_sectiondividerRichGradient: Migration = {
+  id: '2026-05-19-sectiondivider-rich-gradient',
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (FLAT_RE.test(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts

@@ -0,0 +1,82 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-20, sectiondivider only):
+ * the variant axis was reshaped from six color families →
+ * three size presets (lg/md/sm). Each new variant owns its full token set
+ * (typography, geometry, AND colors / background) so the editor can author
+ * full visual presets per-variant without a separate color axis.
+ *
+ * Migration strategy: take **canvas** as the canonical family from the v8
+ * file and seed all three new variants from its values. Customisations on
+ * other v8 families (neutral, accent, primary, etc.) are dropped — the user
+ * customises each new variant from the shared canvas baseline.
+ *
+ * Two inline suffix renames also land here:
+ *   `*-title-border-width` → `*-title-outline-width`
+ *   `*-title-stroke-color` → `*-title-outline-color`
+ *   `*-padding`            → `*-spacing`
+ *
+ * The structured background payload moves through a companion rename in
+ * `migrateComponentAliases` (editorStore.ts), since the runner only sees
+ * string keys.
+ */
+const FAMILIES = ['canvas', 'neutral', 'alternate', 'primary', 'accent', 'special'] as const;
+type Family = typeof FAMILIES[number];
+const VARIANTS = ['lg', 'md', 'sm'] as const;
+
+const SUFFIX_RENAMES: Array<[RegExp, string]> = [
+  [/-title-border-width$/, '-title-outline-width'],
+  [/-title-stroke-color$/, '-title-outline-color'],
+  [/-padding$/, '-spacing'],
+];
+
+function renameKeySuffix(key: string): string {
+  for (const [re, repl] of SUFFIX_RENAMES) {
+    if (re.test(key)) return key.replace(re, repl);
+  }
+  return key;
+}
+
+function splitFamilyKey(key: string): { family: Family; suffix: string } | null {
+  const m = key.match(/^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-(.+)$/);
+  if (!m) return null;
+  return { family: m[1] as Family, suffix: m[2] };
+}
+
+export const componentMigration_2026_05_20_sectiondividerSlimVariants: Migration = {
+  id: '2026-05-20-sectiondivider-slim-variants',
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const out: Record<string, string> = {};
+
+    // Collect canvas's suffix → value mapping first; everything else gets
+    // pruned. (Canvas wins; other families' customisations are discarded
+    // because the new variants are size/preset-shaped, not color-shaped.)
+    const canvasValues: Record<string, string> = {};
+
+    for (const [rawKey, value] of Object.entries(rawVars)) {
+      const key = renameKeySuffix(rawKey);
+      const parts = splitFamilyKey(key);
+      if (!parts) {
+        // Non-family-prefixed key — pass through verbatim.
+        out[key] = value;
+        continue;
+      }
+      if (parts.family !== 'canvas') continue; // Drop non-canvas tokens
+      canvasValues[parts.suffix] = value;
+    }
+
+    // Seed all three size variants from canvas's values.
+    for (const suffix of Object.keys(canvasValues)) {
+      for (const v of VARIANTS) {
+        out[`--sectiondivider-${v}-${suffix}`] = canvasValues[suffix];
+      }
+    }
+
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts

@@ -0,0 +1,24 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-21, sectiondivider only):
+ * the container `*-spacing` token is renamed back to `*-padding` so it can
+ * use the editor's splittable padding selector (per-side control). The new
+ * editor also adds per-element padding tokens (title / description / eyebrow),
+ * but those have no v9 predecessor — they simply start unset.
+ */
+export const componentMigration_2026_05_21_sectiondividerSpacingToPadding: Migration = {
+  id: '2026-05-21-sectiondivider-spacing-to-padding',
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const renamed = key.replace(/-spacing$/, '-padding');
+      out[renamed] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts

@@ -0,0 +1,81 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-22, sectiondivider only):
+ * the per-variant *intrinsics* (align, hairline visibility + position, eyebrow
+ * visibility + uppercase, description visibility) move from the `config`
+ * bucket — where the editor preview consumed them as runtime props — into
+ * the `aliases` bucket as cascading CSS variables. Live consumers can then
+ * read them off `:root` via `var(...)`, closing the editor-to-consumer sync
+ * gap the old config-bucket encoding had.
+ *
+ * Mapping per variant `v in (lg, md, sm)`:
+ *   --sectiondivider-{v}-show-eyebrow          ('1' | '')              →  --sectiondivider-{v}-eyebrow-display          ('block' | 'none')
+ *   --sectiondivider-{v}-show-description      ('1' | '')              →  --sectiondivider-{v}-description-display      ('flex'  | 'none')
+ *   --sectiondivider-{v}-show-hairline + -hairline  (toggle + pos)     →  --sectiondivider-{v}-hairline                 ('none' | <position>)
+ *   --sectiondivider-{v}-eyebrow-uppercase     ('1' | '')              →  --sectiondivider-{v}-eyebrow-text-transform   ('uppercase' | 'none')
+ *   --sectiondivider-{v}-align                                         →  unchanged (value space is already CSS-keyword: 'start' | 'center')
+ *   --sectiondivider-{v}-color-family                                  →  unchanged (still a config-bucket entry; drives editor's family swap)
+ *
+ * The hairline merge collapses two old keys (a boolean toggle + a position
+ * enum) into one. Rules (matching the legacy `getShowHairline` reader):
+ *   - `show-hairline` explicitly ''      → 'none'
+ *   - `show-hairline` explicitly '1'     → existing position, or 'above-label' fallback
+ *   - both undefined                     → emit nothing (default 'none' applies via CSS)
+ *   - `show-hairline` unset but a real position exists → preserve the position
+ *
+ * The migration touches the unified bag produced by `migrateComponentAliases`
+ * (which now pre-merges string-valued config entries). The post-migration
+ * `splitAliasesAndConfig` step routes the new keys to `aliases` (since
+ * `KNOWN_COMPONENT_CONFIG_KEYS` no longer contains them) while keeping
+ * `--sectiondivider-{v}-color-family` in `config`.
+ */
+export const componentMigration_2026_05_22_sectiondividerIntrinsicsToCss: Migration = {
+  id: '2026-05-22-sectiondivider-intrinsics-to-css',
+  fromVersion: 10,
+  toVersion: 11,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const VARIANTS = ['lg', 'md', 'sm'] as const;
+    const prefix = '--sectiondivider-';
+    const dropped = new Set<string>();
+    for (const v of VARIANTS) {
+      dropped.add(`${prefix}${v}-show-eyebrow`);
+      dropped.add(`${prefix}${v}-show-description`);
+      dropped.add(`${prefix}${v}-show-hairline`);
+      dropped.add(`${prefix}${v}-hairline`);
+      dropped.add(`${prefix}${v}-eyebrow-uppercase`);
+    }
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (dropped.has(key)) continue;
+      out[key] = value;
+    }
+    for (const v of VARIANTS) {
+      const showEyebrow = rawVars[`${prefix}${v}-show-eyebrow`];
+      if (showEyebrow !== undefined) {
+        out[`${prefix}${v}-eyebrow-display`] = showEyebrow === '1' ? 'block' : 'none';
+      }
+      const showDesc = rawVars[`${prefix}${v}-show-description`];
+      if (showDesc !== undefined) {
+        out[`${prefix}${v}-description-display`] = showDesc === '1' ? 'flex' : 'none';
+      }
+      const showHair = rawVars[`${prefix}${v}-show-hairline`];
+      const oldHair = rawVars[`${prefix}${v}-hairline`];
+      const oldHairIsPos = typeof oldHair === 'string' && oldHair !== '' && oldHair !== 'off';
+      let newHair: string | undefined;
+      if (showHair === '') newHair = 'none';
+      else if (showHair === '1') newHair = oldHairIsPos ? oldHair : 'above-label';
+      else if (oldHair !== undefined) newHair = oldHairIsPos ? oldHair : 'none';
+      if (newHair !== undefined) {
+        out[`${prefix}${v}-hairline`] = newHair;
+      }
+      const upper = rawVars[`${prefix}${v}-eyebrow-uppercase`];
+      if (upper !== undefined) {
+        out[`${prefix}${v}-eyebrow-text-transform`] = upper === '1' ? 'uppercase' : 'none';
+      }
+    }
+    return out;
+  },
+};

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

@@ -40,6 +40,11 @@ import {
   themeMigration_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';
+import { componentMigration_2026_05_19_sectiondividerRichGradient } from './2026-05-19-sectiondivider-rich-gradient';
+import { componentMigration_2026_05_20_sectiondividerSlimVariants } from './2026-05-20-sectiondivider-slim-variants';
+import { componentMigration_2026_05_21_sectiondividerSpacingToPadding } from './2026-05-21-sectiondivider-spacing-to-padding';
+import { componentMigration_2026_05_22_sectiondividerIntrinsicsToCss } from './2026-05-22-sectiondivider-intrinsics-to-css';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -54,6 +59,11 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup,
   componentMigration_2026_05_10_sectiondividerGradientStops,
   componentMigration_2026_05_13_primaryToBrand,
+  componentMigration_2026_05_19_collapsiblesectionDropFrameSurface,
+  componentMigration_2026_05_19_sectiondividerRichGradient,
+  componentMigration_2026_05_20_sectiondividerSlimVariants,
+  componentMigration_2026_05_21_sectiondividerSpacingToPadding,
+  componentMigration_2026_05_22_sectiondividerIntrinsicsToCss,
 ];
 
 function countFor(kind: 'theme' | 'component-config'): number {

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

@@ -32,6 +32,7 @@
 import { writable, derived, get, type Readable } from 'svelte/store';
 import type { CssVarRef, EditorState } from '../../store/editorTypes';
 import { store, mutate } from '../../store/editorCore';
+import { formatGradientValue } from './gradients';
 
 const EMPTY_COMPONENT_BASELINE = JSON.stringify({ aliases: {}, config: {} });
 
@@ -43,7 +44,9 @@ export function componentsToVars(components: EditorState['components']): Record<
   const out: Record<string, string> = {};
   for (const slice of Object.values(components)) {
     for (const [varName, ref] of Object.entries(slice.aliases)) {
-      out[varName] = ref.kind === 'token' ? `var(${ref.name})` : ref.value;
+      if (ref.kind === 'token') out[varName] = `var(${ref.name})`;
+      else if (ref.kind === 'literal') out[varName] = ref.value;
+      else out[varName] = formatGradientValue(ref.value);
     }
   }
   return out;
@@ -239,9 +242,20 @@ export function getComponentPropertySiblings(component: string, varName: string)
 function cssVarRefEqual(a: CssVarRef | undefined, b: CssVarRef | undefined): boolean {
   if (!a || !b) return a === b;
   if (a.kind !== b.kind) return false;
-  return a.kind === 'token'
-    ? a.name === (b as { kind: 'token'; name: string }).name
-    : a.value === (b as { kind: 'literal'; value: string }).value;
+  if (a.kind === 'token') return a.name === (b as { kind: 'token'; name: string }).name;
+  if (a.kind === 'literal') return a.value === (b as { kind: 'literal'; value: string }).value;
+  // gradient: structural compare on type, angle, aspect axes, and stops.
+  const av = a.value;
+  const bv = (b as { kind: 'gradient'; value: typeof a.value }).value;
+  if (av.type !== bv.type || av.angle !== bv.angle || av.stops.length !== bv.stops.length) return false;
+  if ((av.aspectX ?? 1) !== (bv.aspectX ?? 1)) return false;
+  if ((av.aspectY ?? 1) !== (bv.aspectY ?? 1)) return false;
+  for (let i = 0; i < av.stops.length; i++) {
+    const sa = av.stops[i];
+    const sb = bv.stops[i];
+    if (sa.position !== sb.position || sa.color !== sb.color || (sa.opacity ?? 100) !== (sb.opacity ?? 100)) return false;
+  }
+  return true;
 }
 
 /** True iff `varName` is not individually opted out, has ≥2 declared siblings,

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

@@ -4,7 +4,7 @@
  * (`--color-brand-500`); the renderer wraps them in `var(...)` so palette
  * edits flow through.
  */
-import type { EditorState, GradientToken, GradientTokenStop, GradientType } from '../../store/editorTypes';
+import type { EditorState, GradientToken, GradientTokenStop, GradientType, GradientAliasValue } from '../../store/editorTypes';
 import { mutate } from '../../store/editorCore';
 
 export function makeDefaultGradients(): GradientToken[] {
@@ -49,12 +49,7 @@ export function makeDefaultGradients(): GradientToken[] {
 }
 
 function formatGradientStop(s: GradientTokenStop): string {
-  const base = s.color.startsWith('--') ? `var(${s.color})` : s.color;
-  const opacity = s.opacity ?? 100;
-  const color = opacity >= 100
-    ? base
-    : `color-mix(in srgb, ${base} ${opacity}%, transparent)`;
-  return `${color} ${s.position}%`;
+  return `${formatGradientStopColor(s)} ${s.position}%`;
 }
 
 /** Stops portion only — used by the palette selector to materialize a
@@ -64,10 +59,67 @@ export function formatGradientStops(t: GradientToken): string {
   return t.stops.map(formatGradientStop).join(', ');
 }
 
+/** Serialize a structured gradient value (theme token or component-owned)
+ *  into a CSS background declaration.
+ *  - `none`   → `transparent` (no background paint).
+ *  - `solid`  → the first stop's color (no gradient function).
+ *  - `linear` → `linear-gradient(<angle>, <stops>)`.
+ *  - `radial` → `radial-gradient(<shape> at <centerX>% 50%, <stops>)`.
+ *               centerX defaults to 50. Shape is `circle [radius]` when the
+ *               aspect ratio is 1 (or absent); for aspect ≠ 1 we emit
+ *               `ellipse rx ry` anchored to `radius || 100px`, area-preserved
+ *               so the R=1 boundary is continuous with the legacy circle. */
+export function formatGradientValue(v: GradientAliasValue): string {
+  if (v.type === 'none') return 'transparent';
+  if (v.type === 'solid') {
+    const first = v.stops[0];
+    if (!first) return 'transparent';
+    return formatGradientStopColor(first);
+  }
+  const stops = v.stops.map(formatGradientStop).join(', ');
+  if (v.type === 'linear') return `linear-gradient(${v.angle}deg, ${stops})`;
+  const cx = v.centerX ?? 50;
+  return `radial-gradient(${formatRadialShape(v)} at ${cx}% 50%, ${stops})`;
+}
+
+/** Default base radius (px) when the gradient has no explicit `radius` but
+ *  needs concrete dimensions to express its aspect ratio. Chosen as a
+ *  pleasant-looking mid-size that reads as a "soft glow" inside typical
+ *  component containers; the user can dial `radius` to override. */
+const DEFAULT_RADIAL_BASE_PX = 100;
+
+function formatRadialShape(v: GradientAliasValue): string {
+  const ax = v.aspectX ?? 1;
+  const ay = v.aspectY ?? 1;
+  if (ax === 1 && ay === 1) {
+    return v.radius && v.radius > 0 ? `circle ${v.radius}px` : 'circle';
+  }
+  const base = v.radius && v.radius > 0 ? v.radius : DEFAULT_RADIAL_BASE_PX;
+  const rx = base * ax;
+  const ry = base * ay;
+  return `ellipse ${rx.toFixed(2)}px ${ry.toFixed(2)}px`;
+}
+
+/** Resolve a stop's color + opacity into a CSS color value without the
+ *  trailing `${position}%`. Shared by the gradient-stop formatter (which
+ *  appends the position) and the solid path (which doesn't). */
+function formatGradientStopColor(s: GradientTokenStop): string {
+  const base = s.color.startsWith('--') ? `var(${s.color})` : s.color;
+  const opacity = s.opacity ?? 100;
+  return opacity >= 100
+    ? base
+    : `color-mix(in srgb, ${base} ${opacity}%, transparent)`;
+}
+
 function formatGradient(t: GradientToken): string {
-  const stops = formatGradientStops(t);
-  if (t.type === 'linear') return `linear-gradient(${t.angle}deg, ${stops})`;
-  return `radial-gradient(${stops})`;
+  return formatGradientValue({
+    type: t.type,
+    angle: t.angle,
+    centerX: t.centerX,
+    aspectX: t.aspectX,
+    aspectY: t.aspectY,
+    stops: t.stops,
+  });
 }
 
 export function gradientsToVars(g: EditorState['gradients']): Record<string, string> {
@@ -80,17 +132,20 @@ function findGradient(s: EditorState, variable: string): GradientToken | undefin
   return s.gradients.tokens.find((t) => t.variable === variable);
 }
 
-/** Replace a gradient's type, angle, and stops in one shot. Used by the editor
- *  to restore a pre-edit snapshot on Cancel. */
+/** Replace a gradient's type, angle, centerX, aspect, and stops in one shot.
+ *  Used by the editor to restore a pre-edit snapshot on Cancel. */
 export function setGradient(
   variable: string,
-  next: { type: GradientType; angle: number; stops: GradientTokenStop[] },
+  next: { type: GradientType; angle: number; centerX?: number; aspectX?: number; aspectY?: number; stops: GradientTokenStop[] },
 ): void {
   mutate(`replace gradient ${variable}`, (s) => {
     const t = findGradient(s, variable);
     if (!t) return;
     t.type = next.type;
     t.angle = next.angle;
+    t.centerX = next.centerX;
+    t.aspectX = next.aspectX;
+    t.aspectY = next.aspectY;
     t.stops = next.stops.map((st) => ({ ...st }));
   });
 }
@@ -109,6 +164,26 @@ export function setGradientAngle(variable: string, angle: number): void {
   });
 }
 
+export function setGradientCenterX(variable: string, centerX: number): void {
+  mutate(`set gradient center ${variable}`, (s) => {
+    const t = findGradient(s, variable);
+    if (t) t.centerX = centerX;
+  });
+}
+
+export function setGradientAspect(variable: string, aspect: { x: number; y: number }): void {
+  mutate(`set gradient aspect ${variable}`, (s) => {
+    const t = findGradient(s, variable);
+    if (!t) return;
+    // Drop axes that equal 1 (the legacy circle baseline) so the persisted
+    // shape stays minimal and old data round-trips unchanged.
+    if (aspect.x === 1) delete t.aspectX;
+    else t.aspectX = aspect.x;
+    if (aspect.y === 1) delete t.aspectY;
+    else t.aspectY = aspect.y;
+  });
+}
+
 export function setGradientStop(variable: string, index: number, stop: Partial<GradientTokenStop>): void {
   mutate(`set gradient stop ${variable}[${index}]`, (s) => {
     const t = findGradient(s, variable);

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

@@ -1,4 +1,4 @@
-import type { Theme } from './themeTypes';
+import type { AliasDiskValue, Theme } from './themeTypes';
 import { activeFileName } from '../store/editorConfigStore';
 import { migrateThemeFonts } from '../fonts/fontMigration';
 import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
@@ -52,7 +52,7 @@ export async function initializeTheme(): Promise<void> {
   if (list && Array.isArray(list.components)) {
     const configs: Record<
       string,
-      { activeFile: string; aliases: Record<string, string>; config?: Record<string, unknown>; schemaVersion?: number }
+      { activeFile: string; aliases: Record<string, AliasDiskValue>; config?: Record<string, unknown>; schemaVersion?: number }
     > = {};
     await Promise.all(
       list.components.map(async (c) => {

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

@@ -27,6 +27,19 @@ export interface PaletteConfig {
   gradientStops?: GradientStop[];
   gradientSize?: 'page' | 'window';
   anchorToBase?: boolean;
+  /**
+   * Set to true by importers when they overlay `cssVariables[--color-{ns}-*]`
+   * without owning the typed-state curves. The storage-layer reconciler uses
+   * it as an opt-in switch: snap `baseColor` (or `tintHue`+`tintChroma` for
+   * gray palettes) to the imported `--color-{ns}-500` anchor and clear the
+   * flag. Editor-authored themes never set this, so the reconciler is a
+   * strict no-op for them.
+   *
+   * Persists on disk for first-load reconciliation. After reconcile strips
+   * the palette-derived keys from `cssVariables`, subsequent reconciles find
+   * no anchor and become idempotent no-ops regardless of the flag's value.
+   */
+  _imported?: boolean;
 }
 
 export type FontSourceKind = 'google' | 'typekit' | 'css-url' | 'font-face';
@@ -92,12 +105,20 @@ export interface ThemeMeta {
   isActive: boolean;
 }
 
+/** On-disk shape of a single alias entry. Plain strings carry the bulk of
+ *  aliases (token refs like `--surface-canvas-low` or literal CSS like `4px`);
+ *  the gradient object shape is the structured payload for component-owned
+ *  gradients that can't compress to a single string. */
+export type AliasDiskValue =
+  | string
+  | { kind: 'gradient'; value: { type: 'linear' | 'radial' | 'solid' | 'none'; angle: number; radius?: number; centerX?: number; aspectX?: number; aspectY?: number; stops: { position: number; color: string; opacity?: number }[] } };
+
 export interface ComponentConfig {
   name: string;
   component: string;
   createdAt: string;
   updatedAt: string;
-  aliases: Record<string, string>;
+  aliases: Record<string, AliasDiskValue>;
   config?: Record<string, unknown>;
   /**
    * Server-attached file-name marker. Same role as `Theme._fileName`. Set by
@@ -139,6 +160,40 @@ export interface Manifest {
   _fileName?: string;
 }
 
+/**
+ * Transport artifact for sharing a manifest with someone else. Self-contained:
+ * the bundle inlines the referenced theme and every non-default component
+ * config so the receiver doesn't need anything else on disk to apply it.
+ *
+ * Bundles are *not* stored under `manifests/` — they're transient downloads /
+ * uploads. Local manifests stay lightweight pointer files; bundles are the
+ * import/export envelope. See temp/manifest-robustness-plan.md §11.
+ *
+ * `componentConfigs` is keyed by `${component}/${configName}` so a single map
+ * carries multiple components. Entries whose manifest value is `"default"`
+ * are deliberately omitted — the receiver's local `default.json` is the
+ * live-tokens package's canonical default, and shipping the sender's default
+ * would risk version-divergence with no clean conflict story.
+ */
+export interface ManifestBundle {
+  /** Discriminator for safe identification of bundle JSON files. */
+  kind: 'manifest-bundle';
+  /** Bumps when the bundle envelope shape changes. Start at 1. */
+  schemaVersion: 1;
+  /** Sender's `@motion-proto/live-tokens` package version. Receiver can
+   *  compare to its own to warn about compatibility drift. */
+  liveTokensVersion: string;
+  /** ISO timestamp of when the bundle was exported. */
+  exportedAt: string;
+  /** Full pointer-form manifest (same shape as on-disk manifest files). */
+  manifest: Manifest;
+  /** Full content of the theme that `manifest.theme` references. */
+  theme: Theme;
+  /** Full content of each non-default component config referenced by
+   *  `manifest.componentConfigs`, keyed by `${component}/${configName}`. */
+  componentConfigs: Record<string, ComponentConfig>;
+}
+
 export interface ManifestMeta {
   name: string;
   fileName: string;

package/src/editor/overlay/ColumnsOverlay.svelte

@@ -118,7 +118,6 @@
     font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
     font-size: 10px;
     color: rgba(255, 255, 255, 0.75);
-    letter-spacing: 0.02em;
     white-space: nowrap;
   }
 

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -422,7 +422,7 @@
 
   .lt-overlay.no-transition,
   .lt-overlay.no-transition .frame-wrap {
-    transition: none !important;
+    transition: none;
   }
 
   .header {
@@ -451,7 +451,6 @@
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-semibold, 600);
     color: rgba(255, 255, 255, 0.85);
-    letter-spacing: 0.02em;
   }
 
   .spacer { flex: 1; }
@@ -460,7 +459,6 @@
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-medium, 500);
     color: rgba(255, 255, 255, 0.4);
-    letter-spacing: 0.02em;
     margin-left: var(--ui-space-2, 2px);
     user-select: none;
   }
@@ -523,7 +521,6 @@
   .seg-label {
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-semibold, 600);
-    letter-spacing: 0.02em;
     color: var(--ui-text-primary, #fff);
   }
 

package/src/editor/styles/ui-editor.css

@@ -96,6 +96,7 @@
   --ui-font-size-3xl: 1.75rem;    /* 28px */
   --ui-font-size-4xl: 2.25rem;    /* 36px */
 
+  --ui-font-weight-light:     200;
   --ui-font-weight-normal:    400;
   --ui-font-weight-medium:    500;
   --ui-font-weight-semibold:  600;