@motion-proto/live-tokens 0.1.0

package/src/lib/oklch.ts

@@ -0,0 +1,129 @@
+// OKLCH color space conversions — hand-rolled, no dependencies
+// Pipeline: sRGB hex → linear RGB → OKLab (via M1×M2 + cube root) → OKLCH (polar)
+
+export interface Oklch {
+  l: number; // 0..1
+  c: number; // 0..~0.4
+  h: number; // 0..360
+}
+
+// --- sRGB gamma ---
+
+function srgbToLinear(c: number): number {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function linearToSrgb(c: number): number {
+  return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+// --- Hex ↔ linear RGB ---
+
+function hexToLinearRgb(hex: string): [number, number, number] {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  return [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
+}
+
+function linearRgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number) => {
+    const v = Math.round(Math.max(0, Math.min(1, linearToSrgb(c))) * 255);
+    return v.toString(16).padStart(2, '0');
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// --- Linear RGB ↔ OKLab ---
+// Uses the two-matrix approach from Björn Ottosson's blog
+
+function linearRgbToOklab(r: number, g: number, b: number): [number, number, number] {
+  const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+
+  const l = Math.cbrt(l_);
+  const m = Math.cbrt(m_);
+  const s = Math.cbrt(s_);
+
+  return [
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+  ];
+}
+
+function oklabToLinearRgb(L: number, a: number, b: number): [number, number, number] {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  return [
+    +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
+  ];
+}
+
+// --- OKLab ↔ OKLCH ---
+
+function oklabToOklch(L: number, a: number, b: number): Oklch {
+  const c = Math.sqrt(a * a + b * b);
+  let h = (Math.atan2(b, a) * 180) / Math.PI;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+
+function oklchToOklab(l: number, c: number, h: number): [number, number, number] {
+  const hRad = (h * Math.PI) / 180;
+  return [l, c * Math.cos(hRad), c * Math.sin(hRad)];
+}
+
+// --- Public API ---
+
+export function hexToOklch(hex: string): Oklch {
+  const [r, g, b] = hexToLinearRgb(hex);
+  const [L, a, bVal] = linearRgbToOklab(r, g, b);
+  return oklabToOklch(L, a, bVal);
+}
+
+export function oklchToHex(l: number, c: number, h: number): string {
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+  return linearRgbToHex(r, g, bVal);
+}
+
+function isInGamut(r: number, g: number, b: number): boolean {
+  const eps = 0.0001;
+  return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
+}
+
+export function gamutClamp(l: number, c: number, h: number): Oklch {
+  // Clamp lightness
+  if (l <= 0) return { l: 0, c: 0, h };
+  if (l >= 1) return { l: 1, c: 0, h };
+
+  // Binary search: reduce chroma until in sRGB gamut
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+
+  if (isInGamut(r, g, bVal)) return { l, c, h };
+
+  let lo = 0;
+  let hi = c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    const [La, aa, ba] = oklchToOklab(l, mid, h);
+    const [rr, gg, bb] = oklabToLinearRgb(La, aa, ba);
+    if (isInGamut(rr, gg, bb)) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+  return { l, c: lo, h };
+}

package/src/lib/pageSource.ts

@@ -0,0 +1,6 @@
+export function resolvePageSource(route: string): string | undefined {
+  if (route === '/') return 'src/pages/Landing.svelte';
+  if (route === '/components') return 'src/pages/ShowcasePage.svelte';
+  if (route === '/admin') return 'src/pages/Admin.svelte';
+  return undefined;
+}

package/src/lib/tokenInit.ts

@@ -0,0 +1,29 @@
+import { getActiveTokens, applyCssVariables } from './tokenService';
+import { activeFileName, loadedConfigs, configsLoadedFromFile } from './editorConfigStore';
+
+/**
+ * Fetch the active token file from the server and apply its CSS variables
+ * to :root before the app mounts. Also populates the loadedConfigs store
+ * so PaletteEditors initialize from the token file instead of stale localStorage.
+ */
+export async function initializeTokens(): Promise<void> {
+  try {
+    const tokens = await getActiveTokens();
+    if (tokens) {
+      if (tokens.cssVariables && Object.keys(tokens.cssVariables).length > 0) {
+        applyCssVariables(tokens.cssVariables);
+      }
+      const fileName = (tokens as any)._fileName || 'default';
+      activeFileName.set(fileName);
+      // Push editor configs so PaletteEditors load from the token file on mount.
+      // The store is left populated; PaletteEditors read on mount then
+      // VisualsTab (or the mount lifecycle) clears it after tick().
+      if (tokens.editorConfigs && Object.keys(tokens.editorConfigs).length > 0) {
+        loadedConfigs.set(tokens.editorConfigs);
+        configsLoadedFromFile.set(true);
+      }
+    }
+  } catch {
+    // Silent fallback — variables.css provides defaults
+  }
+}

package/src/lib/tokenService.ts

@@ -0,0 +1,144 @@
+import type { TokenFile, TokenFileMeta } from './tokenTypes';
+import {
+  applyCssVariables as applyCssVariablesSync,
+  clearAllCssVarOverrides as clearAllCssVarOverridesSync,
+  scrapeCssVariables as scrapeCssVariablesSync,
+} from './cssVarSync';
+
+// ── API helpers ──────────────────────────────────────────────
+
+export async function listTokenFiles(): Promise<TokenFileMeta[]> {
+  const res = await fetch('/api/tokens');
+  const data = await res.json();
+  return data.files;
+}
+
+export async function loadTokenFile(fileName: string): Promise<TokenFile> {
+  const res = await fetch(`/api/tokens/${encodeURIComponent(fileName)}`);
+  if (!res.ok) throw new Error(`Failed to load token file: ${fileName}`);
+  return res.json();
+}
+
+export async function saveTokenFile(fileName: string, data: TokenFile): Promise<void> {
+  const res = await fetch(`/api/tokens/${encodeURIComponent(fileName)}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Unknown error' }));
+    throw new Error(err.error || 'Save failed');
+  }
+}
+
+export async function deleteTokenFile(fileName: string): Promise<void> {
+  const res = await fetch(`/api/tokens/${encodeURIComponent(fileName)}`, {
+    method: 'DELETE',
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Unknown error' }));
+    throw new Error(err.error || 'Delete failed');
+  }
+}
+
+export async function getActiveTokens(): Promise<TokenFile | null> {
+  try {
+    const res = await fetch('/api/tokens/active');
+    if (!res.ok) return null;
+    return res.json();
+  } catch {
+    return null;
+  }
+}
+
+export async function setActiveFile(fileName: string): Promise<void> {
+  await fetch('/api/tokens/active', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: fileName }),
+  });
+}
+
+// ── Production API helpers ─────────────────────────────────
+
+export interface ProductionInfo {
+  fileName: string;
+  name: string;
+  updatedAt: string;
+  cssVariables: Record<string, string>;
+}
+
+export async function getProductionInfo(): Promise<ProductionInfo> {
+  const res = await fetch('/api/tokens/production');
+  return res.json();
+}
+
+export async function setProductionFile(fileName: string): Promise<{ ok: boolean; fileName: string; name: string }> {
+  const res = await fetch('/api/tokens/production', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: fileName }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Unknown error' }));
+    throw new Error(err.error || 'Update failed');
+  }
+  return res.json();
+}
+
+// ── Backup API helpers ──────────────────────────────────────
+
+export interface BackupEntry {
+  type: 'tokens' | 'css';
+  file: string;
+  name: string;
+  timestamp: string;
+  size: number;
+}
+
+export async function listBackups(): Promise<BackupEntry[]> {
+  const res = await fetch('/api/backups');
+  const data = await res.json();
+  return data.backups;
+}
+
+export async function getBackupContent(type: string, file: string): Promise<string> {
+  const res = await fetch(`/api/backups/${type}/${encodeURIComponent(file)}`);
+  if (!res.ok) throw new Error('Failed to load backup');
+  const data = await res.json();
+  return data.content;
+}
+
+export async function restoreBackup(type: string, file: string): Promise<void> {
+  const res = await fetch(`/api/backups/${type}/${encodeURIComponent(file)}/restore`, {
+    method: 'POST',
+  });
+  if (!res.ok) throw new Error('Restore failed');
+}
+
+export async function getCurrentCss(): Promise<string> {
+  const res = await fetch('/api/current-css');
+  const data = await res.json();
+  return data.content;
+}
+
+// ── CSS variable utilities ───────────────────────────────────
+// Implementations live in cssVarSync.ts so writes can fan out to the
+// parent document when running inside the live-preview overlay iframe.
+// Re-exported here to preserve existing call sites.
+
+export const clearAllCssVarOverrides = clearAllCssVarOverridesSync;
+export const applyCssVariables = applyCssVariablesSync;
+export const scrapeCssVariables = scrapeCssVariablesSync;
+
+/** Sanitize a display name to a safe file name */
+export function sanitizeFileName(name: string): string {
+  return name
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9\-_]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    || 'unnamed';
+}

package/src/lib/tokenTypes.ts

@@ -0,0 +1,45 @@
+import type { CurveAnchor } from '../showcase/curveEngine';
+
+export type GradientStyle = 'linear' | 'radial' | 'conic';
+
+export interface GradientStop {
+  position: number;
+  paletteLabel: string;
+}
+
+export interface PaletteConfig {
+  baseColor: string;
+  tintHue: number;
+  tintChroma?: number;
+  lightnessCurve: CurveAnchor[];
+  saturationCurve: CurveAnchor[];
+  grayLightnessCurve: CurveAnchor[];
+  graySaturationCurve: CurveAnchor[];
+  scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
+  curveOffset: Record<string, number>;
+  overrides: Record<string, string>;
+  snappedScales: string[];
+  emptyMode?: 'solid' | 'gradient';
+  emptyStep?: string;
+  gradientStyle?: GradientStyle;
+  gradientAngle?: number;
+  gradientReverse?: boolean;
+  gradientStops?: GradientStop[];
+  gradientSize?: 'page' | 'window';
+  anchorToBase?: boolean;
+}
+
+export interface TokenFile {
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  editorConfigs: Record<string, PaletteConfig>;
+  cssVariables: Record<string, string>;
+}
+
+export interface TokenFileMeta {
+  name: string;
+  fileName: string;
+  updatedAt: string;
+  isActive: boolean;
+}

package/src/pages/Admin.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import VisualsTab from '../showcase/VisualsTab.svelte';
+
+  const inOverlay = typeof window !== 'undefined' && window.parent !== window;
+
+  function closeOverlay() {
+    try {
+      window.parent.postMessage({ type: 'lt-overlay-close' }, window.location.origin);
+    } catch {
+      // cross-origin parent — shouldn't happen, but fall back to a noop
+    }
+  }
+</script>
+
+<div class="admin-page">
+  <div class="admin-bar">
+    <div class="bar-left">
+      {#if inOverlay}
+        <button class="back-link as-button" on:click={closeOverlay}>
+          <i class="fas fa-times"></i>
+          <span>Close</span>
+        </button>
+      {:else}
+        <a href="/" class="back-link">
+          <i class="fas fa-arrow-left"></i>
+          <span>Back to site</span>
+        </a>
+      {/if}
+      <span class="admin-label">Design System</span>
+    </div>
+
+    <div class="bar-right"></div>
+  </div>
+
+  <VisualsTab />
+</div>
+
+<style>
+  @import '../showcase/editor.css';
+
+  .admin-page {
+    min-height: 100vh;
+    background: black;
+  }
+
+  .admin-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-16);
+    padding: var(--space-10) var(--space-16);
+    background: black;
+    border-bottom: 1px solid var(--ui-border-faint);
+    min-height: 52px;
+  }
+
+  .bar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-16);
+    min-width: 0;
+  }
+
+  .bar-right {
+    /* Reserved for future right-aligned controls; keeps grid balanced. */
+  }
+
+  .back-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    color: var(--ui-text-tertiary);
+    text-decoration: none;
+    font-size: var(--font-md);
+    transition: color var(--transition-fast);
+  }
+
+  .back-link:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .back-link.as-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  .admin-label {
+    font-size: var(--font-md);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  @media (max-width: 1100px) {
+    .admin-label {
+      display: none;
+    }
+  }
+</style>

package/src/pages/ShowcasePage.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import ComponentsTab from '../showcase/ComponentsTab.svelte';
+
+  let selectedComponent = 'standardButtons';
+
+  const componentNavItems = [
+    { id: 'choiceButtons', label: 'Choice Sets', icon: 'fas fa-hand-pointer' },
+    { id: 'standardButtons', label: 'Button', icon: 'fas fa-square' },
+    { id: 'notifications', label: 'Notification', icon: 'fas fa-bell' },
+    { id: 'dialog', label: 'Dialog', icon: 'fas fa-window-restore' },
+    { id: 'radioButtons', label: 'Radio Button', icon: 'fas fa-dot-circle' },
+    { id: 'cards', label: 'Card', icon: 'fas fa-id-card' },
+    { id: 'traitBadges', label: 'Trait Badge', icon: 'fas fa-tag' },
+    { id: 'inlineEdit', label: 'Inline Edit Actions', icon: 'fas fa-pen' },
+    { id: 'sectionDivider', label: 'Section Divider', icon: 'fas fa-minus' },
+    { id: 'collapsible', label: 'Collapsible Section', icon: 'fas fa-chevron-down' },
+    { id: 'tabBar', label: 'Tab Bar', icon: 'fas fa-columns' },
+    { id: 'tooltip', label: 'Tooltip', icon: 'fas fa-comment-dots' },
+    { id: 'progressBar', label: 'Progress Bar', icon: 'fas fa-tasks' }
+  ];
+</script>
+
+<!--
+  Site-level Components showcase page. Wrapped in .admin-page so the
+  ComponentsTab demo chrome (labels, section wrappers) can resolve its
+  --ui-* custom properties from editor.css. The actual components inside
+  still read the user's design tokens, so live edits in the overlay
+  editor flow straight through to this page.
+-->
+<div class="admin-page components-shell">
+  <nav class="sidebar">
+    <div class="sidebar-header">Components</div>
+    <div class="nav-items">
+      {#each componentNavItems as item}
+        {#if item.id.startsWith('divider-')}
+          <div class="nav-divider-label"><span>{item.label}</span></div>
+        {:else}
+          <button
+            class="nav-item"
+            class:active={selectedComponent === item.id}
+            on:click={() => selectedComponent = item.id}
+          >
+            <i class={item.icon}></i>
+            <span>{item.label}</span>
+          </button>
+        {/if}
+      {/each}
+    </div>
+  </nav>
+
+  <main class="content">
+    <ComponentsTab {selectedComponent} />
+  </main>
+</div>
+
+<style>
+  @import '../showcase/editor.css';
+  @import '../styles/variables.css';
+
+  .components-shell {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    min-height: 100vh;
+    width: 100%;
+    background: black;
+  }
+
+  .sidebar {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow: hidden;
+    background: black;
+    border-right: 1px solid var(--ui-border-faint);
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .sidebar-header {
+    padding: var(--space-16) var(--space-16) var(--space-12);
+    font-size: var(--font-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--ui-text-primary);
+  }
+
+  .nav-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: 0 var(--space-8) var(--space-16);
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-8);
+    width: 100%;
+    padding: var(--space-6) var(--space-12) var(--space-6) var(--space-16);
+    background: none;
+    border: none;
+    border-radius: var(--radius-md);
+    color: var(--ui-text-tertiary);
+    font-size: var(--font-md);
+    cursor: pointer;
+    text-align: left;
+    transition: all var(--transition-fast);
+  }
+
+  .nav-item:hover {
+    color: var(--ui-text-secondary);
+    background: var(--ui-hover);
+  }
+
+  .nav-item.active {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+  }
+
+  .nav-item i {
+    width: 1.25rem;
+    text-align: center;
+    font-size: var(--font-md);
+    opacity: 0.7;
+  }
+
+  .nav-divider-label {
+    padding: var(--space-12) var(--space-12) var(--space-4);
+    font-size: var(--font-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .content {
+    padding: var(--space-24) var(--space-32);
+    overflow-y: auto;
+    background: black;
+    min-width: 0;
+    max-width: 1280px;
+  }
+</style>