@motion-proto/live-tokens 0.5.0 → 0.6.1

package/src/lib/presetService.ts

@@ -1,7 +1,7 @@
 import type { Preset, PresetMeta, Theme, ComponentConfig } from './themeTypes';
 import { versionedFileResource } from './files/versionedFileResource';
 import { listComponents } from './componentConfigService';
-import { getActiveTheme } from './themeService';
+import { getActiveTheme, getProductionInfo } from './themeService';
 
 /**
  * REST client for preset (bundle) manifest files. Each preset file references
@@ -92,3 +92,123 @@ export async function captureCurrentAsPreset(
   await savePreset(fileName, manifest);
   await setActivePreset(fileName);
 }
+
+// ── Production preset ──────────────────────────────────────────────────────
+//
+// The production preset is the manifest whose references describe what
+// tokens.css + the component overrides block currently encode. A separate
+// pointer (`presets/_production.json`) from the active preset lets the editor
+// run experiments without disturbing what end users see. Applying a preset to
+// production flips every per-artifact `_production.json` pointer to match the
+// manifest and re-bakes css.
+
+export interface PresetProductionInfo {
+  fileName: string;
+  name: string;
+  theme: string;
+  componentConfigs: Record<string, string>;
+  updatedAt: string;
+}
+
+export async function getProductionPreset(): Promise<PresetProductionInfo | null> {
+  try {
+    const res = await fetch('/api/presets/production');
+    if (!res.ok) return null;
+    return res.json();
+  } catch {
+    return null;
+  }
+}
+
+export async function applyPresetToProduction(fileName: string): Promise<PresetProductionInfo> {
+  const res = await fetch('/api/presets/production', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: fileName }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Apply to production failed' }));
+    throw new Error(err.error || 'Apply to production failed');
+  }
+  return res.json();
+}
+
+/**
+ * Snapshot whatever each artifact's `_production.json` currently points at
+ * into a new preset manifest. Recovery path when individual component Adopts
+ * have drifted production away from the production preset and the user wants
+ * to preserve that state under a name rather than re-converge to a preset.
+ *
+ * Does NOT flip `presets/_production.json` — the new preset's references
+ * already match production by construction, but tagging it as the production
+ * preset is a separate UX decision left to the caller.
+ */
+export async function captureProductionAsPreset(
+  fileName: string,
+  displayName: string,
+): Promise<void> {
+  const themeInfo = await getProductionInfo();
+  const components = await listComponents();
+  const componentConfigs: Record<string, string> = {};
+  for (const c of components) {
+    componentConfigs[c.name] = c.productionFile || 'default';
+  }
+  const now = new Date().toISOString();
+  const manifest: Preset = {
+    name: displayName,
+    createdAt: now,
+    updatedAt: now,
+    theme: themeInfo.fileName,
+    componentConfigs,
+  };
+  await savePreset(fileName, manifest);
+}
+
+/**
+ * Three states comparing the active preset against current production:
+ *   - 'in-production' — active preset IS the production preset AND every
+ *      manifest reference matches the per-artifact production pointer.
+ *   - 'editor-only'   — the production preset is a different preset; applying
+ *      this one would flip pointers.
+ *   - 'diverged'      — this IS the production preset, but per-artifact
+ *      production has drifted (individual component Adopt clicks since the
+ *      last apply). Two recovery paths: re-apply to converge, or capture
+ *      production as a new preset to name the divergence.
+ */
+export type ProductionPresetStatus = 'in-production' | 'editor-only' | 'diverged';
+
+export interface ProductionComparison {
+  status: ProductionPresetStatus;
+  productionPreset: PresetProductionInfo | null;
+  themeDrift: boolean;
+  driftedComponents: string[];
+}
+
+export async function compareActiveToProduction(
+  activePreset: Preset,
+): Promise<ProductionComparison> {
+  const [productionPreset, themeInfo, components] = await Promise.all([
+    getProductionPreset(),
+    getProductionInfo(),
+    listComponents(),
+  ]);
+  const componentProdMap = new Map(components.map((c) => [c.name, c.productionFile]));
+  const themeDrift = themeInfo.fileName !== activePreset.theme;
+  const driftedComponents: string[] = [];
+  for (const [comp, file] of Object.entries(activePreset.componentConfigs)) {
+    const prod = componentProdMap.get(comp);
+    if (prod !== file) driftedComponents.push(comp);
+  }
+  const manifestMatches = !themeDrift && driftedComponents.length === 0;
+  const activeFile = activePreset._fileName;
+  const isActiveProductionPreset =
+    !!activeFile && !!productionPreset && productionPreset.fileName === activeFile;
+
+  let status: ProductionPresetStatus;
+  if (!isActiveProductionPreset) {
+    status = 'editor-only';
+  } else {
+    status = manifestMatches ? 'in-production' : 'diverged';
+  }
+  return { status, productionPreset, themeDrift, driftedComponents };
+}

package/src/lib/productionPulse.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+import type { ProductionInfo } from './themeService';
+import type { ProductionComparison } from './presetService';
+
+/**
+ * Monotonic counter that ticks every time a production pointer flips —
+ * theme production, a component's production, or a preset applied to
+ * production. UI surfaces that compare against current production state
+ * (notably `PresetFileManager`) subscribe to this so an Adopt click in a
+ * sibling manager refreshes their derived status without per-pair wiring.
+ *
+ * Bumpers: `ThemeFileManager.handleApplyToProduction`,
+ * `ComponentFileManager.handleUpdateProduction`,
+ * `presetService.applyPresetToProduction` (called from `PresetFileManager`).
+ * Anyone setting `_production.json` should bump.
+ */
+export const productionRevision = writable(0);
+
+export function bumpProductionRevision(): void {
+  productionRevision.update((n) => n + 1);
+}
+
+/**
+ * Cached production-state stores. The Theme and Preset file managers live in
+ * the sidebar footer, swapping in/out of the DOM as the user toggles between
+ * the tokens and components views. Keeping the last-known production state in
+ * module-level Svelte stores means a remount renders the correct Adopt-button
+ * state on the first frame instead of flashing through "not in sync" while a
+ * fresh fetch resolves.
+ */
+export const themeProductionInfo = writable<ProductionInfo | null>(null);
+export const presetProductionComparison = writable<ProductionComparison | null>(null);

package/src/pages/ComponentEditorPage.svelte

@@ -8,6 +8,15 @@
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
   import { selectedComponent } from '../lib/editorViewStore';
+  import { componentDirty } from '../lib/editorStore';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
 
   let drawerOpen = $state(true);
 
@@ -141,12 +150,16 @@
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
+          class:dirty={$componentDirty[item.id]}
           onmouseenter={(e) => showHint(item.label, e.currentTarget)}
           onmouseleave={hideHint}
           onclick={() => selectComponent(item.id)}
         >
           <i class={item.icon}></i>
           <span class="rail-label">{item.label}</span>
+          {#if $componentDirty[item.id]}
+            <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+          {/if}
         </button>
       {/each}
     </div>
@@ -167,7 +180,6 @@
 </div>
 
 <style>
-  @import '../styles/ui-editor.css';
   .components-shell {
     --rail-w: 48px;
     display: grid;
@@ -327,6 +339,7 @@
   }
 
   .nav-item {
+    position: relative;
     display: grid;
     grid-template-columns: 48px 1fr;
     align-items: center;
@@ -362,6 +375,25 @@
     opacity: 0.85;
   }
 
+  /* Amber dot indicating unsaved changes. Anchored to the top-right of the
+     icon column so it stays visible whether the rail is collapsed (icon-only)
+     or expanded (icon + label). */
+  .dirty-dot {
+    position: absolute;
+    top: 8px;
+    left: 30px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--ui-highlight);
+    box-shadow: 0 0 0 2px black;
+    pointer-events: none;
+  }
+
+  .nav-item.dirty {
+    color: var(--ui-text-secondary);
+  }
+
   .content {
     padding: 0 var(--ui-space-32);
     background: black;

package/src/pages/Editor.svelte

@@ -5,6 +5,14 @@
   import { installEditorKeybindings } from '../lib/editorKeybindings';
   import { initializeEditorStore } from '../lib/editorStore';
   import { storageKey } from '../lib/editorConfig';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
 
   const inOverlay = typeof window !== 'undefined' && window.parent !== window;
 
@@ -46,8 +54,6 @@
 </div>
 
 <style>
-  @import '../styles/ui-editor.css';
-
   .editor-page {
     min-height: 100vh;
     background: black;

package/src/pages/EditorShell.svelte

@@ -12,6 +12,7 @@
   import { scrollSectionIntoView } from '../lib/scrollSection';
   import { editorState } from '../lib/editorStore';
   import { editorView, sidebarCondensed, selectedComponent } from '../lib/editorViewStore';
+  import { componentDirty } from '../lib/editorStore';
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
 
@@ -170,12 +171,16 @@
           <button
             class="nav-item"
             class:active={$selectedComponent === item.id}
+            class:dirty={$componentDirty[item.id]}
             onmouseenter={(e) => showHint(item.label, e.currentTarget)}
             onmouseleave={hideHint}
             onclick={() => selectComponent(item.id)}
           >
             <i class={item.icon}></i>
             <span class="nav-label">{item.label}</span>
+            {#if $componentDirty[item.id]}
+              <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+            {/if}
           </button>
         {/each}
       </div>
@@ -262,6 +267,7 @@
   }
 
   .nav-item {
+    position: relative;
     display: grid;
     grid-template-columns: 48px 1fr;
     align-items: center;
@@ -286,6 +292,25 @@
     opacity: 0.85;
   }
 
+  /* Amber dot indicating unsaved changes. Anchored to the top-right of the
+     icon column so it stays visible whether the sidebar is condensed
+     (icon-only) or expanded (icon + label). */
+  .dirty-dot {
+    position: absolute;
+    top: 8px;
+    left: 30px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--ui-highlight);
+    box-shadow: 0 0 0 2px black;
+    pointer-events: none;
+  }
+
+  .nav-item.dirty {
+    color: var(--ui-text-secondary);
+  }
+
   .nav-label {
     white-space: nowrap;
     overflow: hidden;

package/src/styles/site.css

@@ -0,0 +1,138 @@
+/*
+ * Site Styles — global typography for the themed pages
+ *
+ * Unscoped element selectors (h1, h2, p, a, ul li, …) consume the design
+ * tokens in tokens.css and recolor with the user's theme. Loaded globally
+ * from main.ts.
+ *
+ * Pair with: ui-editor.css (--ui-* chrome, opposite scope — neutral and
+ * theme-immune; only loaded on editor pages).
+ */
+
+h1 {
+  font-family: var(--font-display);
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-12);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+h2 {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  letter-spacing: 0.01em;
+  margin: var(--space-32) 0 var(--space-12);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+h3 {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-primary);
+  margin: var(--space-24) 0 var(--space-8);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    line-height: 1.1;
+    margin-bottom: var(--space-8);
+  }
+
+  h2 {
+    line-height: 1.15;
+    margin-top: var(--space-24);
+  }
+
+  h3 {
+    line-height: 1.2;
+    margin-top: var(--space-20);
+  }
+}
+
+p {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: var(--line-height-md);
+  margin: 0 0 14px;
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+a {
+  color: var(--text-brand);
+  text-decoration: none;
+  transition: color var(--duration-150);
+}
+
+a:hover {
+  color: var(--color-brand-300);
+  text-decoration: underline;
+}
+
+strong {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+ul {
+  padding-left: var(--space-24);
+  margin: var(--space-12) 0;
+}
+
+ul li {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: 1.75;
+  margin-bottom: var(--space-4);
+}
+
+ul li::marker {
+  color: var(--text-tertiary);
+}
+
+ol {
+  padding-left: var(--space-24);
+  margin: var(--space-12) 0;
+}
+
+ol li {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-4);
+}
+
+ol li::marker {
+  color: var(--text-tertiary);
+  font-weight: var(--font-weight-semibold);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-neutral-faint);
+  margin: var(--space-32) 0;
+}
+
+blockquote {
+  margin: var(--space-16) 0;
+  padding: var(--space-12) var(--space-20);
+  border: 1px solid var(--color-brand-500);
+  border-left: 4px solid var(--color-brand-500);
+  background: var(--surface-neutral-high);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}

package/src/styles/tokens.css

@@ -1298,3 +1298,27 @@
   --sectiondivider-special-description-font-weight: var(--font-weight-normal);
   --sectiondivider-special-description-line-height: var(--line-height-md);
 }
+
+/* component-aliases:start */
+:root:root {
+  /* button (default_01) */
+  --button-primary-radius: var(--radius-full);
+  --button-primary-hover-radius: var(--radius-full);
+  --button-primary-disabled-radius: var(--radius-full);
+  --button-secondary-radius: var(--radius-full);
+  --button-secondary-hover-radius: var(--radius-full);
+  --button-secondary-disabled-radius: var(--radius-full);
+  --button-outline-radius: var(--radius-full);
+  --button-outline-hover-radius: var(--radius-full);
+  --button-outline-disabled-radius: var(--radius-full);
+  --button-success-radius: var(--radius-full);
+  --button-success-hover-radius: var(--radius-full);
+  --button-success-disabled-radius: var(--radius-full);
+  --button-danger-radius: var(--radius-full);
+  --button-danger-hover-radius: var(--radius-full);
+  --button-danger-disabled-radius: var(--radius-full);
+  --button-warning-radius: var(--radius-full);
+  --button-warning-hover-radius: var(--radius-full);
+  --button-warning-disabled-radius: var(--radius-full);
+}
+/* component-aliases:end */

package/src/styles/ui-form-controls.css

@@ -0,0 +1,186 @@
+/* Editor form controls — `--ui-*` tokens only. Theme-immune; see CONVENTIONS.md. */
+
+/* ========================================
+   Form Field Layouts
+   ======================================== */
+
+/* Vertical Layout - Label Above Input/Select */
+/* Usage: Add .ui-form-field-vertical to container div wrapping label + input/select */
+.ui-form-field-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--ui-space-4);
+}
+
+.ui-form-label {
+  margin-bottom: 0;
+  font-size: var(--ui-font-size-md);
+  color: var(--ui-text-primary);
+  font-weight: var(--ui-font-weight-normal);
+}
+
+/* Horizontal Layout - Label Beside Input/Select */
+/* Usage: Add .ui-form-field-horizontal to container div wrapping label + input/select */
+.ui-form-field-horizontal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ui-space-8);
+}
+
+.ui-form-field-horizontal .ui-form-label {
+  white-space: nowrap;
+}
+
+/* Inline Layout - Label and Input/Select Close Together */
+/* Usage: Add .ui-form-field-inline to container div wrapping label + input/select */
+.ui-form-field-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-12);
+}
+
+.ui-form-field-inline .ui-form-label {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ui-form-field-inline .ui-form-select,
+.ui-form-field-inline .ui-form-input {
+  flex-shrink: 0;
+}
+
+/* ========================================
+   Form Control Styling
+   ======================================== */
+
+/* Select/Dropdown Styling */
+.ui-form-select {
+  /* No vertical padding - let min-height and line-height center text naturally */
+  padding: 0 var(--ui-space-16);
+  min-height: 2.375rem;  /* ~38px to match button height */
+  background: var(--ui-surface-lowest) !important;
+  border: 1px solid var(--ui-border-default) !important;
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary) !important;
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-weight-normal);
+  line-height: var(--ui-line-height-normal);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all var(--ui-transition-fast);
+  /* Prevent clipping */
+  overflow: visible !important;
+  box-sizing: border-box !important;
+  /* Reset browser defaults */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  /* Custom dropdown arrow */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right var(--ui-space-12) center !important;
+  padding-right: var(--ui-space-32) !important;
+}
+
+.ui-form-select:hover:not(:disabled) {
+  background-color: var(--ui-surface-low) !important;
+  border-color: var(--ui-border-medium) !important;
+}
+
+.ui-form-select:focus {
+  outline: none;
+  border-color: var(--ui-border-strong) !important;
+  box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
+}
+
+.ui-form-select:focus-visible {
+  outline: 2px solid var(--ui-highlight);
+  outline-offset: 2px;
+}
+
+.ui-form-select:active:not(:disabled) {
+  background-color: var(--ui-surface) !important;
+}
+
+.ui-form-select:disabled {
+  background-color: var(--ui-surface-lowest) !important;
+  border-color: var(--ui-border-faint) !important;
+  color: var(--ui-text-disabled) !important;
+  cursor: not-allowed;
+}
+
+/* Option Styling - Critical for Legibility */
+/* Note: Most option styling is controlled by browser/OS and cannot be fully overridden */
+/* These styles apply where browsers allow (limited support in Chrome/Firefox) */
+.ui-form-select option {
+  background-color: var(--ui-surface-lowest) !important;
+  color: var(--ui-text-primary) !important;
+  padding: var(--ui-space-8) var(--ui-space-12);
+  min-height: 2rem;
+  font-size: var(--ui-font-size-md);
+  font-family: var(--ui-font-sans);
+  line-height: var(--ui-line-height-normal);
+}
+
+/* Disabled options */
+.ui-form-select option:disabled {
+  color: var(--ui-text-disabled) !important;
+}
+
+/* Input Field Styling */
+.ui-form-input {
+  padding: var(--ui-space-8);
+  background: var(--ui-surface-lowest);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  transition: border-color var(--ui-transition-fast);
+}
+
+.ui-form-input:hover:not(:disabled) {
+  border-color: var(--ui-border-strong);
+  background: var(--ui-surface-low);
+}
+
+.ui-form-input:focus {
+  outline: none;
+  border-color: var(--ui-border-strong);
+  box-shadow: 0 0 0 3px hsla(240, 5%, 38%, 0.2);
+}
+
+.ui-form-input:disabled {
+  background: var(--ui-surface-lowest);
+  border-color: var(--ui-border-faint);
+  color: var(--ui-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Placeholder text styling */
+.ui-form-input::placeholder {
+  color: var(--ui-text-muted);
+}
+
+/* Number input spinner buttons */
+.ui-form-input[type="number"]::-webkit-inner-spin-button,
+.ui-form-input[type="number"]::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+/* Checkbox and Radio Styling */
+.ui-form-checkbox,
+.ui-form-radio {
+  cursor: pointer;
+  width: var(--ui-space-16);
+  height: var(--ui-space-16);
+  accent-color: var(--ui-gray-600);
+}
+
+.ui-form-checkbox:disabled,
+.ui-form-radio:disabled {
+  cursor: not-allowed;
+}

package/src/ui/FontStackEditor.svelte

@@ -189,7 +189,7 @@
                 style="font-family: {slotCssValue(slot)};{stack.variable === '--font-display' ? ' font-size: var(--ui-font-size-2xl);' : ''}"
               >The quick brown fox jumps over the lazy dog</span>
               <select
-                class="form-select slot-select"
+                class="ui-form-select slot-select"
                 value={slotKey(slot)}
                 onchange={(e) => onSelectChange(e, stack.variable, i)}
               >