@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/lib/tokenInit.ts

@@ -1,29 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,100 +0,0 @@
-<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

@@ -1,144 +0,0 @@
-<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';
-  .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>