@motion-proto/live-tokens 0.1.0

package/src/showcase/VisualsTab.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import VariablesTab from './VariablesTab.svelte';
+  import TokenFileManager from './TokenFileManager.svelte';
+  import type { TokenFile } from '../lib/tokenTypes';
+  import {
+    saveTokenFile,
+    loadTokenFile,
+    setActiveFile,
+    scrapeCssVariables,
+    clearAllCssVarOverrides,
+    applyCssVariables,
+  } from '../lib/tokenService';
+  import { editorConfigs, activeFileName, configsLoadedFromFile } from '../lib/editorConfigStore';
+  import { get } from 'svelte/store';
+
+  const tokenNavItems = [
+    { id: 'palette-editor', label: 'Palette Editor' },
+    { id: 'spacing', label: 'Spacing' },
+    { id: 'columns', label: 'Columns' },
+    { id: 'border-radius', label: 'Border Radius' },
+    { id: 'typography', label: 'Typography' },
+    { id: 'shadows', label: 'Shadows' },
+    { id: 'overlays', label: 'Overlays' },
+    { id: 'gradients', label: 'Gradients' },
+    { id: 'utility-tokens', label: 'Utility Tokens' }
+  ];
+
+  let selectedTokenSection: string | null = null;
+
+  function scrollToSection(sectionId: string) {
+    selectedTokenSection = sectionId;
+    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  let saveSignal = 0;
+  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
+
+  async function handleSave(e: CustomEvent<{ fileName: string; displayName: string }>) {
+    const { fileName, displayName } = e.detail;
+    if (!get(configsLoadedFromFile)) {
+      saveStatus = 'error';
+      console.warn('Save blocked: editor configs were not loaded from a token file.');
+      setTimeout(() => { saveStatus = 'idle'; }, 3000);
+      return;
+    }
+    saveStatus = 'saving';
+    try {
+      // Flush pending Svelte reactive updates so inline CSS vars are current
+      await tick();
+      const cssVariables = scrapeCssVariables();
+      const configs = get(editorConfigs);
+      const now = new Date().toISOString();
+      const tokenFile: TokenFile = {
+        name: displayName,
+        createdAt: now,
+        updatedAt: now,
+        editorConfigs: configs,
+        cssVariables,
+      };
+      await saveTokenFile(fileName, tokenFile);
+      await setActiveFile(fileName);
+      $activeFileName = fileName;
+      // Also trigger localStorage save in all PaletteEditors
+      saveSignal++;
+      saveStatus = 'saved';
+      setTimeout(() => { saveStatus = 'idle'; }, 2000);
+    } catch {
+      saveStatus = 'error';
+      setTimeout(() => { saveStatus = 'idle'; }, 3000);
+    }
+  }
+
+  let variablesTab: VariablesTab;
+
+  async function handleLoad(e: CustomEvent<{ fileName: string }>) {
+    const { fileName } = e.detail;
+    try {
+      const tokenFile = await loadTokenFile(fileName);
+      // Clear current inline CSS vars so stale values don't linger
+      clearAllCssVarOverrides();
+      // Immediately apply the file's pre-computed CSS variables so the site
+      // updates in one shot (shadows, overlays, and all palette vars).
+      if (tokenFile.cssVariables && Object.keys(tokenFile.cssVariables).length > 0) {
+        applyCssVariables(tokenFile.cssVariables);
+      }
+      // Directly push configs to each PaletteEditor via method call
+      if (tokenFile.editorConfigs && Object.keys(tokenFile.editorConfigs).length > 0) {
+        variablesTab.loadAllConfigs(tokenFile.editorConfigs);
+        configsLoadedFromFile.set(true);
+      }
+    } catch {
+      // silent — the UI still shows current state
+    }
+  }
+</script>
+
+<div class="layout">
+  <nav class="sidebar">
+    <div class="sidebar-header">Variables &amp; Tokens</div>
+
+    <div class="nav-items">
+      {#each tokenNavItems as item}
+        <button
+          class="nav-item"
+          class:active={selectedTokenSection === item.id}
+          on:click={() => scrollToSection(item.id)}
+        >
+          <span>{item.label}</span>
+        </button>
+      {/each}
+    </div>
+
+    <div class="sidebar-footer">
+      <TokenFileManager {saveStatus} on:save={handleSave} on:load={handleLoad} />
+    </div>
+  </nav>
+
+  <main class="content">
+    <VariablesTab bind:this={variablesTab} {saveSignal} />
+  </main>
+</div>
+
+<style>
+  @import '../styles/variables.css';
+
+  .layout {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    min-height: 100vh;
+    width: 100%;
+    max-width: 1920px;
+    box-sizing: border-box;
+  }
+
+  .sidebar {
+    position: sticky;
+    top: 0;
+    height: calc(100vh - 52px);
+    overflow: hidden;
+    background: black;
+    border-right: 1px solid var(--ui-border-faint);
+    display: flex;
+    z-index: 1;
+    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);
+    flex-shrink: 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-24);
+    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);
+  }
+
+  .content {
+    padding: var(--space-24) var(--space-32);
+    overflow-y: auto;
+    background: black;
+    min-width: 0;
+    isolation: isolate;
+  }
+
+  /* Narrow desktop: side-by-side windows, ~1280px and below */
+  @media (max-width: 1280px) {
+    .layout {
+      grid-template-columns: 200px minmax(0, 1fr);
+    }
+    .content {
+      padding: var(--space-20) var(--space-20);
+    }
+    .nav-item {
+      padding: var(--space-6) var(--space-8) var(--space-6) var(--space-16);
+    }
+    .sidebar-header {
+      padding: var(--space-12) var(--space-12) var(--space-8);
+    }
+  }
+
+  /* Tight desktop: very narrow, ~1024px and below */
+  @media (max-width: 1024px) {
+    .layout {
+      grid-template-columns: 180px minmax(0, 1fr);
+    }
+    .content {
+      padding: var(--space-16) var(--space-12);
+    }
+    .nav-item span {
+      font-size: var(--font-sm);
+    }
+  }
+
+  .sidebar-footer {
+    flex-shrink: 0;
+    margin-top: auto;
+    padding: var(--space-12) var(--space-8) var(--space-16);
+    border-top: 1px solid var(--ui-border-faint);
+  }
+</style>

package/src/showcase/curveEngine.ts

@@ -0,0 +1,190 @@
+export interface CurveAnchor {
+  x: number;
+  y: number;
+  inDx: number;
+  inDy: number;
+  outDx: number;
+  outDy: number;
+}
+
+export interface CurveConfig {
+  yMin: number;
+  yMax: number;
+  label: string;
+  gridLines: number[];
+  dashedLines: number[];
+}
+
+export interface CurveTemplate {
+  name: string;
+  icon: string;
+  anchors: (cfg: CurveConfig) => CurveAnchor[];
+}
+
+export const CURVE_H = 200;
+export const CURVE_PAD_Y = 2;
+export const CURVE_Y_PAD = 0.2;
+
+export const lightnessCurveConfig: CurveConfig = {
+  yMin: 0, yMax: 100,
+  label: 'Lightness',
+  gridLines: [50],
+  dashedLines: [25, 75],
+};
+
+export const saturationCurveConfig: CurveConfig = {
+  yMin: 0, yMax: 200,
+  label: 'Saturation',
+  gridLines: [100],
+  dashedLines: [50, 150],
+};
+
+export const textLightnessCurveConfig: CurveConfig = {
+  yMin: 0, yMax: 200,
+  label: 'Lightness',
+  gridLines: [100],
+  dashedLines: [50, 150],
+};
+
+export const curveTemplates: CurveTemplate[] = [
+  {
+    name: 'Flat',
+    icon: 'M2,6 L18,6',
+    anchors: (cfg) => {
+      const mid = (cfg.yMin + cfg.yMax) / 2;
+      return [
+        { x: 0, y: mid, inDx: 0, inDy: 0, outDx: 30, outDy: 0 },
+        { x: 100, y: mid, inDx: -30, inDy: 0, outDx: 0, outDy: 0 },
+      ];
+    },
+  },
+  {
+    name: 'Peak',
+    icon: 'M2,10 L10,2 L18,10',
+    anchors: (cfg) => [
+      { x: 0, y: cfg.yMin, inDx: 0, inDy: 0, outDx: 15, outDy: 0 },
+      { x: 50, y: cfg.yMax / 2, inDx: -15, inDy: 0, outDx: 15, outDy: 0 },
+      { x: 100, y: cfg.yMin, inDx: -15, inDy: 0, outDx: 0, outDy: 0 },
+    ],
+  },
+  {
+    name: 'Ramp up',
+    icon: 'M2,10 L18,2',
+    anchors: (cfg) => {
+      const lo = cfg.yMax * 0.1;
+      const hi = cfg.yMax * 0.9;
+      return [
+        { x: 0, y: lo, inDx: 0, inDy: 0, outDx: 30, outDy: 0 },
+        { x: 100, y: hi, inDx: -30, inDy: 0, outDx: 0, outDy: 0 },
+      ];
+    },
+  },
+  {
+    name: 'Ramp down',
+    icon: 'M2,2 L18,10',
+    anchors: (cfg) => {
+      const lo = cfg.yMax * 0.1;
+      const hi = cfg.yMax * 0.9;
+      return [
+        { x: 0, y: hi, inDx: 0, inDy: 0, outDx: 30, outDy: 0 },
+        { x: 100, y: lo, inDx: -30, inDy: 0, outDx: 0, outDy: 0 },
+      ];
+    },
+  },
+];
+
+export function makeAnchor(x: number, y: number, tangentLen = 15): CurveAnchor {
+  return { x, y, inDx: -tangentLen, inDy: 0, outDx: tangentLen, outDy: 0 };
+}
+
+export function isCornerAnchor(a: CurveAnchor): boolean {
+  return a.inDx === 0 && a.inDy === 0 && a.outDx === 0 && a.outDy === 0;
+}
+
+export function curveXToSvg(v: number, w: number, padX: number = 0): number {
+  return padX + (v / 100) * (w - 2 * padX);
+}
+
+export function curveYToSvg(v: number, cfg: CurveConfig): number {
+  const range = cfg.yMax - cfg.yMin;
+  const dMin = cfg.yMin - CURVE_Y_PAD * range;
+  const dMax = cfg.yMax + CURVE_Y_PAD * range;
+  return CURVE_H - CURVE_PAD_Y - ((v - dMin) / (dMax - dMin)) * (CURVE_H - 2 * CURVE_PAD_Y);
+}
+
+export function svgToX(px: number, w: number, padX: number = 0): number {
+  return Math.max(0, Math.min(100, ((px - padX) / (w - 2 * padX)) * 100));
+}
+
+export function svgToY(py: number, cfg: CurveConfig): number {
+  const range = cfg.yMax - cfg.yMin;
+  const dMin = cfg.yMin - CURVE_Y_PAD * range;
+  const dMax = cfg.yMax + CURVE_Y_PAD * range;
+  const raw = dMin + ((CURVE_H - CURVE_PAD_Y - py) / (CURVE_H - 2 * CURVE_PAD_Y)) * (dMax - dMin);
+  return Math.max(cfg.yMin, Math.min(cfg.yMax, raw));
+}
+
+export function evalBezier(
+  p0x: number, p0y: number, c0x: number, c0y: number,
+  c1x: number, c1y: number, p1x: number, p1y: number, t: number,
+): { x: number; y: number } {
+  const u = 1 - t, u2 = u * u, u3 = u2 * u;
+  const t2 = t * t, t3 = t2 * t;
+  return {
+    x: u3 * p0x + 3 * u2 * t * c0x + 3 * u * t2 * c1x + t3 * p1x,
+    y: u3 * p0y + 3 * u2 * t * c0y + 3 * u * t2 * c1y + t3 * p1y,
+  };
+}
+
+export function sampleCurve(anchors: CurveAnchor[], xPos: number): number {
+  if (anchors.length === 0) return 0;
+  if (anchors.length === 1) return anchors[0].y;
+  if (xPos <= anchors[0].x) return anchors[0].y;
+  if (xPos >= anchors[anchors.length - 1].x) return anchors[anchors.length - 1].y;
+
+  let seg = 0;
+  while (seg < anchors.length - 2 && anchors[seg + 1].x < xPos) seg++;
+
+  const a0 = anchors[seg], a1 = anchors[seg + 1];
+  const p0x = a0.x, p0y = a0.y;
+  const c0x = a0.x + a0.outDx, c0y = a0.y + a0.outDy;
+  const c1x = a1.x + a1.inDx, c1y = a1.y + a1.inDy;
+  const p1x = a1.x, p1y = a1.y;
+
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    const pt = evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, mid);
+    if (pt.x < xPos) lo = mid; else hi = mid;
+  }
+  return evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, (lo + hi) / 2).y;
+}
+
+// --- Clipboard serialization ---
+
+const CLIPBOARD_PREFIX = 'mp-curve:';
+
+export function serializeCurve(anchors: CurveAnchor[], offset: number): string {
+  return CLIPBOARD_PREFIX + JSON.stringify({ anchors, offset });
+}
+
+export function deserializeCurve(text: string): { anchors: CurveAnchor[]; offset: number } | null {
+  if (!text.startsWith(CLIPBOARD_PREFIX)) return null;
+  try {
+    const data = JSON.parse(text.slice(CLIPBOARD_PREFIX.length));
+    if (!Array.isArray(data.anchors) || typeof data.offset !== 'number') return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+export function buildCurvePath(anchors: CurveAnchor[], cfg: CurveConfig, w: number, padX: number = 0): string {
+  if (anchors.length < 2) return '';
+  let d = `M${curveXToSvg(anchors[0].x, w, padX)},${curveYToSvg(anchors[0].y, cfg)}`;
+  for (let i = 0; i < anchors.length - 1; i++) {
+    const a0 = anchors[i], a1 = anchors[i + 1];
+    d += ` C${curveXToSvg(a0.x + a0.outDx, w, padX)},${curveYToSvg(a0.y + a0.outDy, cfg)} ${curveXToSvg(a1.x + a1.inDx, w, padX)},${curveYToSvg(a1.y + a1.inDy, cfg)} ${curveXToSvg(a1.x, w, padX)},${curveYToSvg(a1.y, cfg)}`;
+  }
+  return d;
+}

package/src/showcase/demos/BadgeDemo.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import Badge from '../../components/Badge.svelte';
+  import TokenMap from '../TokenMap.svelte';
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Badge Component</h2>
+  <p class="demo-description">
+    Pill-shaped badges with variant support. Import from <code>components/Badge.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <div class="trait-demo-row">
+      <Badge variant="trait">arcane</Badge>
+      <Badge variant="trait">divine</Badge>
+      <Badge variant="trait">primal</Badge>
+      <Badge variant="accent">scenes</Badge>
+      <Badge icon="fa-solid fa-dice-d20">System Agnostic</Badge>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <div class="token-sections">
+      <TokenMap title="info" tokens={[
+        { label: 'BG', variable: '--surface-neutral-higher' },
+        { label: 'Border', variable: '--border-neutral-default' },
+        { label: 'Text', variable: '--text-primary' },
+      ]} />
+      <TokenMap title="accent" tokens={[
+        { label: 'BG', variable: '--surface-neutral-higher' },
+        { label: 'Border', variable: '--border-accent' },
+        { label: 'Text', variable: '--color-accent-300' },
+      ]} />
+      <TokenMap title="trait" tokens={[
+        { label: 'BG', variable: '--surface-primary-high' },
+        { label: 'Border', variable: '--border-primary-strong' },
+        { label: 'Text', variable: '--text-primary' },
+      ]} />
+    </div>
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .trait-demo-row {
+    display: flex;
+    gap: var(--space-8);
+    flex-wrap: wrap;
+  }
+
+  .token-sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+</style>

package/src/showcase/demos/CardDemo.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Card from '../../components/Card.svelte';
+  import TokenMap from '../TokenMap.svelte';
+</script>
+
+<div class="demo-block">
+  <h2 class="component-title">Card Component</h2>
+  <p class="demo-description">
+    Generic card with icon, title, and slotted body. Import from <code>components/Card.svelte</code>
+  </p>
+
+  <div class="demo-section">
+    <div class="card-demo-grid">
+      <Card icon="fas fa-star" iconColor="var(--text-accent)" title="Featured">
+        <p style="margin: 0;">A highlighted card with amber accent.</p>
+      </Card>
+
+      <Card icon="fas fa-shield-alt" iconColor="var(--text-info)" title="Security">
+        <p style="margin: 0;">Card with blue icon color on hover border.</p>
+      </Card>
+
+      <Card icon="fas fa-leaf" iconColor="var(--text-success)" title="Compact" size="compact">
+        <p style="margin: 0;">A compact-sized card variant.</p>
+      </Card>
+
+      <Card title="No Icon">
+        <p style="margin: 0;">Cards work without icons too.</p>
+      </Card>
+    </div>
+  </div>
+
+  <div class="demo-section">
+    <h3 class="demo-subtitle">Tokens</h3>
+    <TokenMap tokens={[
+      { label: 'Background', variable: '--surface-neutral-high' },
+      { label: 'Border', variable: '--border-neutral-default' },
+      { label: 'Hover Border', variable: '--border-neutral-strong' },
+      { label: 'Title', variable: '--text-primary' },
+      { label: 'Body', variable: '--text-secondary' },
+    ]} />
+  </div>
+</div>
+
+<style>
+  @import '../../styles/variables.css';
+
+  .card-demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: var(--space-16);
+  }
+</style>