@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{lib → editor/core/themes}/slices/gradients.ts

@@ -4,8 +4,8 @@
  * (`--color-brand-500`); the renderer wraps them in `var(...)` so palette
  * edits flow through.
  */
-import type { EditorState, GradientToken, GradientTokenStop, GradientType } from '../editorTypes';
-import { mutate } from '../editorCore';
+import type { EditorState, GradientToken, GradientTokenStop, GradientType, GradientAliasValue } from '../../store/editorTypes';
+import { mutate } from '../../store/editorCore';
 
 export function makeDefaultGradients(): GradientToken[] {
   return [
@@ -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/{lib → editor/core/themes}/slices/overlays.ts

@@ -4,7 +4,7 @@
  * and diverge from tokens.css by design: the editor starts with a neutral
  * palette and tokens.css continues to win until first edit.
  */
-import type { EditorState, OverlayToken } from '../editorTypes';
+import type { EditorState, OverlayToken } from '../../store/editorTypes';
 
 export function makeDefaultOverlayTokens(): OverlayToken[] {
   return [

package/src/{lib → editor/core/themes}/slices/palettes.ts

@@ -5,7 +5,7 @@
  * (palette derivation involves OKLCH + bezier curves) at render time.
  */
 import type { PaletteConfig } from '../themeTypes';
-import { store, mutate, persist } from '../editorCore';
+import { store, mutate, persist } from '../../store/editorCore';
 
 export function setPaletteConfig(label: string, config: PaletteConfig): void {
   mutate(`update palette ${label}`, (s) => {

package/src/{lib → editor/core/themes}/slices/shadows.ts

@@ -8,8 +8,8 @@
  * x/y/blur/spread/hsla fields.
  */
 import { get } from 'svelte/store';
-import type { EditorState, ShadowToken } from '../editorTypes';
-import { store, persist } from '../editorCore';
+import type { EditorState, ShadowToken } from '../../store/editorTypes';
+import { store, persist } from '../../store/editorCore';
 
 export const SHADOW_VAR_NAMES = [
   '--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl', '--shadow-2xl',
@@ -38,7 +38,7 @@ export function shadowTokenCss(t: ShadowToken): string {
   return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
 }
 
-export function defaultShadowOverride(): import('../editorTypes').ShadowOverrideFlags {
+export function defaultShadowOverride(): import('../../store/editorTypes').ShadowOverrideFlags {
   return { angle: false, opacity: false, color: false, distance: false, blur: false, size: false };
 }
 

package/src/{lib → editor/core/themes}/themeInit.ts

@@ -1,10 +1,10 @@
-import type { Theme } from './themeTypes';
-import { activeFileName } from './editorConfigStore';
-import { migrateThemeFonts } from './fontMigration';
-import { applyFontSources, applyFontStacks } from './fontLoader';
-import { loadFromFile, seedComponentsFromApi } from './editorStore';
-import { getActiveComponentConfig } from './componentConfigService';
-import { safeFetch } from './storage';
+import type { AliasDiskValue, Theme } from './themeTypes';
+import { activeFileName } from '../store/editorConfigStore';
+import { migrateThemeFonts } from '../fonts/fontMigration';
+import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
+import { loadFromFile, seedComponentsFromApi } from '../store/editorStore';
+import { getActiveComponentConfig } from '../components/componentConfigService';
+import { safeFetch } from '../storage/storage';
 
 interface ComponentSummaryDto {
   name: string;
@@ -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/{lib → editor/core/themes}/themeService.ts

@@ -1,14 +1,14 @@
 import { tick } from 'svelte';
 import type { Theme, ThemeMeta } from './themeTypes';
-import type { EditorState } from './editorTypes';
+import type { EditorState } from '../store/editorTypes';
 import {
   versionedFileResource,
   sanitizeFileName as sanitizeFileNameImpl,
-} from './files/versionedFileResource';
-import { loadFromFile as loadEditorState, toTheme, markSaved } from './editorStore';
-import { activeFileName } from './editorConfigStore';
-import { applyFontSources, applyFontStacks } from './fontLoader';
-import { migrateThemeFonts } from './fontMigration';
+} from '../storage/files/versionedFileResourceClient';
+import { loadFromFile as loadEditorState, toTheme, markSaved } from '../store/editorStore';
+import { activeFileName } from '../store/editorConfigStore';
+import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
+import { migrateThemeFonts } from '../fonts/fontMigration';
 
 // ── API helpers ──────────────────────────────────────────────
 //

package/src/{lib → editor/core/themes}/themeTypes.ts

@@ -1,4 +1,4 @@
-import type { CurveAnchor } from '../ui/curveEngine';
+import type { CurveAnchor } from '../../ui/curveEngine';
 
 export type GradientStyle = 'linear' | 'radial' | 'conic';
 
@@ -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
@@ -120,16 +141,17 @@ export interface ComponentConfigMeta {
 
 /**
  * Manifest that captures an entire site state — the active theme plus the
- * active config for every component. Loading a preset flips the relevant
+ * active config for every component. Loading a manifest flips the relevant
  * `_active.json` pointers; the underlying theme + component-config files stay
- * the source of truth, so editing them flows through any preset that
- * references them.
+ * the source of truth, so editing them flows through any manifest that
+ * references them. The currently-active manifest is the live snapshot: theme
+ * and component Adopts auto-patch its refs on the server.
  */
-export interface Preset {
+export interface Manifest {
   name: string;
   createdAt: string;
   updatedAt: string;
-  /** File basename (no `.json`) of the theme this preset pins. */
+  /** File basename (no `.json`) of the theme this manifest pins. */
   theme: string;
   /** Map of componentId → config file basename. Components omitted here fall
    *  back to "default" at apply time. */
@@ -138,9 +160,46 @@ export interface Preset {
   _fileName?: string;
 }
 
-export interface PresetMeta {
+/**
+ * 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;
   updatedAt: string;
   isActive: boolean;
+  /** `true` only for `default` — the protected baseline. Cannot be written
+   *  to or deleted, and theme/component Adopts cannot patch into it. */
+  isProtected: boolean;
 }

package/src/editor/index.ts

@@ -0,0 +1,69 @@
+export { default as LiveEditorOverlay } from './overlay/LiveEditorOverlay.svelte';
+export type { NavLink } from './core/routing/navLinkTypes';
+export { default as ColumnsOverlay } from './overlay/ColumnsOverlay.svelte';
+
+export { columnsVisible, toggleColumns, init as initColumnsOverlay } from './overlay/columnsOverlay';
+export { configureEditor, storageKey } from './core/store/editorConfig';
+export { activeFileName } from './core/store/editorConfigStore';
+export { init as initRouter, route, navigate } from './core/routing/router';
+export { init as initCssVarSync } from './core/cssVarSync';
+export { init as initEditorStore } from './core/store/editorStore';
+
+export { setCssVar, removeCssVar } from './core/cssVarSync';
+
+export {
+  listThemes,
+  loadTheme,
+  saveTheme,
+  deleteTheme,
+  getActiveTheme,
+  setActiveFile,
+  getProductionInfo,
+  setProductionFile,
+  sanitizeFileName,
+} from './core/themes/themeService';
+export type { ProductionInfo } from './core/themes/themeService';
+
+export type {
+  PaletteConfig,
+  Theme,
+  ThemeMeta,
+  GradientStyle,
+  GradientStop,
+  FontSource,
+  FontSourceKind,
+  FontFamily,
+  FontStack,
+  FontStackSlot,
+  FontStackVariable,
+  SystemCascadePreset,
+  GenericFamily,
+  Manifest,
+  ManifestMeta,
+} from './core/themes/themeTypes';
+
+export {
+  listManifests,
+  loadManifest,
+  saveManifest,
+  deleteManifest,
+  getActiveManifest,
+  setActiveManifest,
+  applyManifest,
+  saveAsManifest,
+  saveActiveManifest,
+} from './core/manifests/manifestService';
+export type { ApplyManifestResult } from './core/manifests/manifestService';
+
+export {
+  applyFontSources,
+  applyFontStacks,
+  resolveFontStackValues,
+  SYSTEM_CASCADES,
+} from './core/fonts/fontLoader';
+export { migrateThemeFonts, defaultFontSources, defaultFontStacks } from './core/fonts/fontMigration';
+
+export { hexToOklch, oklchToHex, gamutClamp } from './core/palettes/oklch';
+export type { Oklch } from './core/palettes/oklch';
+
+export { initializeTheme } from './core/themes/themeInit';

package/src/{lib → 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;
   }