@motion-proto/live-tokens 0.3.6 → 0.3.9

package/README.md

@@ -1,6 +1,6 @@
 # Live Tokens
 
-A foundational design system for quickly styling and building Svelte 4 + Vite microsites. **Edit your tokens and components in real time** — colors, typography, spacing, per-component aliases — and see the site update as you drag the slider. Save the result as a portable configuration you can carry from project to project.
+A foundational design system for quickly styling and building Svelte + Vite microsites. **Edit your tokens and components in real time** — colors, typography, spacing, per-component aliases — and see the site update as you drag the slider. Save the result as a portable configuration you can carry from project to project.
 
 `npm install @motion-proto/live-tokens` into your app — install once, style fast. The editor is dev-only; production builds get plain CSS variables and your chosen components, nothing else.
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.3.6",
+  "version": "0.3.9",
   "type": "module",
-  "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
+  "description": "Design token editor with live CSS variable editing. Svelte 4/5 + Vite 5/6/7.",
   "keywords": [
     "svelte",
     "vite",
@@ -35,7 +35,10 @@
     "src/styles/tokens.css",
     "src/data",
     "src/assets",
-    "dist-plugin"
+    "dist-plugin",
+    "!**/*.test.ts",
+    "!**/*.spec.ts",
+    "!**/__tests__/**"
   ],
   "exports": {
     ".": {
@@ -90,9 +93,9 @@
   },
   "peerDependencies": {
     "sass": "^1.0",
-    "svelte": "^4.2",
+    "svelte": "^4.2 || ^5",
     "svelte-preprocess": "^6.0",
-    "vite": "^5.0"
+    "vite": "^5 || ^6 || ^7"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",

package/src/lib/LiveEditorOverlay.svelte

@@ -4,8 +4,11 @@
   // this component's type-check passes in consumer projects that haven't added
   // the ambient global to their tsconfig.
   declare const __PROJECT_ROOT__: string | undefined;
+  declare const __APP_VERSION__: string | undefined;
   const INJECTED_PROJECT_ROOT: string =
     typeof __PROJECT_ROOT__ !== 'undefined' ? (__PROJECT_ROOT__ ?? '') : '';
+  const APP_VERSION: string =
+    typeof __APP_VERSION__ !== 'undefined' ? (__APP_VERSION__ ?? '') : '';
 </script>
 
 <script lang="ts">
@@ -294,6 +297,10 @@
       </button>
     {/if}
 
+    {#if APP_VERSION}
+      <span class="version" title="live-tokens version">v{APP_VERSION}</span>
+    {/if}
+
     {#if open}
       <div class="spacer" transition:fade={BTN_FADE}></div>
     {/if}
@@ -454,6 +461,15 @@
 
   .spacer { flex: 1; }
 
+  .version {
+    font-size: 10px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.4);
+    letter-spacing: 0.02em;
+    margin-left: 2px;
+    user-select: none;
+  }
+
   .hdr-btn {
     display: inline-flex;
     align-items: center;

package/src/component-editor/editorTokens.test.ts

@@ -1,93 +0,0 @@
-// @vitest-environment node
-import { describe, it, expect } from 'vitest';
-import { readFileSync, readdirSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { buildTokenRegistry, extractGlobalRootBody } from '../lib/tokenRegistry';
-import { componentRegistryEntries } from './registry';
-
-const TEST_DIR = dirname(fileURLToPath(import.meta.url));
-const TOKENS_CSS = join(TEST_DIR, '..', 'styles', 'tokens.css');
-const COMPONENTS_DIR = join(TEST_DIR, '..', 'components');
-
-// Vitest's CSS plugin swallows `?raw` imports for .css files, so we build the
-// registry from an fs-loaded snapshot rather than going through the default
-// module export. Layer-2 tokens now live in each component's <style> block
-// under `:global(:root)`; merge those bodies with tokens.css to match the
-// runtime registry.
-const tokensSource = readFileSync(TOKENS_CSS, 'utf8');
-const componentTokenCss = readdirSync(COMPONENTS_DIR)
-  .filter((f) => f.endsWith('.svelte'))
-  .map((f) => extractGlobalRootBody(readFileSync(join(COMPONENTS_DIR, f), 'utf8')))
-  .join('\n');
-const registry = buildTokenRegistry(tokensSource + '\n' + componentTokenCss);
-
-/** Test whether a variable name fits a layer-1 design-token naming pattern. */
-function isLayer1TokenName(name: string): boolean {
-  // Color ramps: --color-<palette>-<step>  OR semantic color primitives: --color-<name>
-  if (/^--color-[a-z]+(-\d{3})?$/.test(name)) return true;
-  if (/^--surface-[a-z]+(-[a-z]+)?$/.test(name)) return true;
-  if (/^--border-[a-z]+(-[a-z]+)?$/.test(name)) return true;
-  if (/^--text-[a-z]+(-[a-z]+)?$/.test(name)) return true;
-  if (/^--(radius|space|font|line-height|shadow|ring|transition|overlay|hover|page-bg|border-width|gradient|icon-size|blur|dot-size)(-[a-z0-9]+)*$/.test(name)) return true;
-  return false;
-}
-
-// Drives both describe blocks: one entry per (component, variable) pair pulled
-// from each editor's exported `allTokens`. This is the authoritative surface —
-// includes template-literal-built tokens (Button, SegmentedControl, etc.) and
-// typography colorVariables that the previous source-regex approach silently
-// missed. See registry.ts for how each editor exports its full token list via
-// `<script context="module">`.
-const editorTokenCases: Array<{ editor: string; variable: string }> = [];
-for (const entry of componentRegistryEntries) {
-  for (const t of entry.schema) {
-    // `hidden: true` tokens are optional override slots (e.g. split-padding's
-    // per-side overrides used as `var(--x, fallback)` by the themed-padding
-    // mixin) — they don't need a default declaration in tokens.css.
-    if ((t as { hidden?: boolean }).hidden) continue;
-    editorTokenCases.push({ editor: entry.id, variable: t.variable });
-  }
-}
-
-describe('design-token architecture', () => {
-  it('has editor schemas to inspect', () => {
-    expect(editorTokenCases.length).toBeGreaterThan(0);
-  });
-
-  describe('every editor-exposed variable resolves to a design token', () => {
-    for (const { editor, variable } of editorTokenCases) {
-      it(`${editor}: ${variable} resolves via alias chain to a layer-1 token`, () => {
-        const chain = registry.resolveAliasChain(variable);
-        const terminal = chain[chain.length - 1];
-        expect(
-          isLayer1TokenName(terminal),
-          `${variable} → [${chain.join(' → ')}]; terminal "${terminal}" is not a design-token name. ` +
-            `Either rename the target or add a var() alias declaration in tokens.css.`,
-        ).toBe(true);
-      });
-    }
-  });
-
-  // Every variable an editor binds must be declared in tokens.css (or a
-  // component <style> :global(:root) block) as a var() alias — not a literal,
-  // not a raw primitive. Component properties bind to component-scoped Layer-2
-  // aliases so editing one component never rebinds a shared primitive used
-  // elsewhere.
-  describe('every editor follows the component-token pattern', () => {
-    for (const { editor, variable } of editorTokenCases) {
-      it(`${editor}: ${variable} is a layer-2 component token (declared as var() alias)`, () => {
-        const declared = registry.getDeclaredValue(variable);
-        expect(
-          declared,
-          `${variable} is referenced by ${editor} but not declared in tokens.css`,
-        ).not.toBeNull();
-        expect(
-          declared!.startsWith('var('),
-          `${variable} should be a component-scoped alias declared as var(--primitive); got "${declared}". ` +
-            `Component properties must not rebind shared primitives directly.`,
-        ).toBe(true);
-      });
-    }
-  });
-});

package/src/component-editor/groupKeySlots.test.ts

@@ -1,67 +0,0 @@
-// @vitest-environment node
-//
-// Slot-collision invariant for editor schemas.
-//
-// A groupKey declares a sibling set: tokens that share a groupKey are linked
-// peers (`getComponentPropertySiblings`, `isComponentPropertyLinked`,
-// `setComponentAliasLinked`). The codebase convention (src/styles/CONVENTIONS.md)
-// requires shared groupKeys to cross only a VARIANT axis — never a slot/part
-// axis. Crossing slots produces "phantom siblings": the schema reports header
-// and cell as linked peers, but the linked block can't surface them because
-// the editor's `linkableContexts` (correctly) treats them as independent.
-//
-// `registerComponentSchema` already warns at runtime when a typography
-// groupKey covers multiple slots (e.g. one groupKey holding both
-// `--card-...-title-font-family` and `--card-...-body-font-family`). This
-// test asserts the invariant instead of relying on a console warning that
-// nothing fails on.
-//
-// Caught the TableEditor regression where `header` and `cell` typography
-// shared `family`/`size`/`weight`/`height` groupKeys (and `surface`/`padding`
-// shared groupKeys across header/stripe and header/cell respectively). See
-// the commit that introduced this test for context.
-
-import { describe, it, expect } from 'vitest';
-import { componentRegistryEntries } from './registry';
-
-const TYPOGRAPHY_PROP_SUFFIXES = ['font-family', 'font-size', 'font-weight', 'line-height'] as const;
-
-/** Mirror of `typographySlotOf` in `lib/slices/components.ts`. */
-function typographySlotOf(varName: string): string | null {
-  for (const suffix of TYPOGRAPHY_PROP_SUFFIXES) {
-    if (!varName.endsWith('-' + suffix)) continue;
-    const head = varName.slice(0, -(suffix.length + 1));
-    const lastDash = head.lastIndexOf('-');
-    if (lastDash < 0) return null;
-    return head.slice(lastDash + 1);
-  }
-  return null;
-}
-
-describe('editor groupKey slot invariant', () => {
-  for (const entry of componentRegistryEntries) {
-    it(`${entry.id}: no typography groupKey straddles multiple slots`, () => {
-      const byKey = new Map<string, string[]>();
-      for (const t of entry.schema as Array<{ variable: string; groupKey?: string }>) {
-        if (!t.groupKey) continue;
-        const list = byKey.get(t.groupKey) ?? [];
-        list.push(t.variable);
-        byKey.set(t.groupKey, list);
-      }
-      const violations: string[] = [];
-      for (const [gk, vars] of byKey) {
-        const slots = new Set<string>();
-        for (const v of vars) {
-          const slot = typographySlotOf(v);
-          if (slot) slots.add(slot);
-        }
-        if (slots.size > 1) {
-          violations.push(
-            `groupKey "${gk}" spans typography slots {${[...slots].join(', ')}}: ${vars.join(', ')}`,
-          );
-        }
-      }
-      expect(violations, violations.join('\n')).toEqual([]);
-    });
-  }
-});

package/src/component-editor/groupKeySnapshot.test.ts

@@ -1,52 +0,0 @@
-/**
- * Locks the per-component sibling-group topology in place during the migration
- * away from `getGroupKey`'s last-dash fallback.
- *
- * Workflow:
- *   1. Snapshot current behavior: `UPDATE_SNAPSHOT=1 pnpm test groupKeySnapshot`
- *      writes `temp/groupkey-snapshot.json` (groupKey → variables, per component).
- *   2. Migrate: add explicit `groupKey` to every token that previously relied on
- *      the legacy fallback; delete the fallback branch in `getGroupKey`.
- *   3. Re-run this test (no env var) — must produce the same JSON.
- *
- * Once the migration is complete and verified, delete this file.
- */
-import { describe, it, expect } from 'vitest';
-import fs from 'node:fs';
-import path from 'node:path';
-import { componentRegistryEntries } from './registry';
-
-const SNAPSHOT_PATH = path.resolve(__dirname, '../../temp/groupkey-snapshot.json');
-
-/** Mirrors the *post-migration* getGroupKey logic — schema only, no fallback. */
-function effectiveGroupKey(_component: string, _variable: string, explicit: string | undefined): string | null {
-  return explicit ?? null;
-}
-
-function computeSnapshot(): Record<string, Record<string, string[]>> {
-  const out: Record<string, Record<string, string[]>> = {};
-  for (const entry of componentRegistryEntries) {
-    const groups: Record<string, string[]> = {};
-    for (const t of entry.schema as Array<{ variable: string; groupKey?: string }>) {
-      const gk = effectiveGroupKey(entry.id, t.variable, t.groupKey);
-      if (!gk) continue;
-      (groups[gk] ||= []).push(t.variable);
-    }
-    for (const k of Object.keys(groups)) groups[k].sort();
-    out[entry.id] = Object.fromEntries(Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)));
-  }
-  return out;
-}
-
-describe('groupKey topology snapshot', () => {
-  it('matches the committed snapshot', () => {
-    const computed = computeSnapshot();
-    if (process.env.UPDATE_SNAPSHOT === '1') {
-      fs.mkdirSync(path.dirname(SNAPSHOT_PATH), { recursive: true });
-      fs.writeFileSync(SNAPSHOT_PATH, JSON.stringify(computed, null, 2) + '\n');
-      return;
-    }
-    const expected = JSON.parse(fs.readFileSync(SNAPSHOT_PATH, 'utf-8'));
-    expect(computed).toEqual(expected);
-  });
-});

package/src/lib/componentConfig.test.ts

@@ -1,204 +0,0 @@
-// @vitest-environment happy-dom
-import { beforeEach, describe, expect, it } from 'vitest';
-import { get } from 'svelte/store';
-import {
-  editorState,
-  componentDirty,
-  setComponentAlias,
-  clearComponentAlias,
-  setComponentConfig,
-  clearComponentConfig,
-  loadComponentActive,
-  markComponentSaved,
-  seedComponentsFromApi,
-  undo,
-  redo,
-  __resetForTests,
-} from './editorStore';
-
-const tokenRef = (name: string) => ({ kind: 'token' as const, name });
-
-beforeEach(() => {
-  __resetForTests();
-});
-
-describe('component aliases — editor-state round trip', () => {
-  it('setComponentAlias → undo restores previous state; redo reapplies', () => {
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-success-high'));
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-error-high'));
-
-    undo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-
-    redo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-error-high'));
-  });
-
-  it('clearComponentAlias removes the entry and is undoable', () => {
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-success-high'));
-    clearComponentAlias('button', '--button-primary-surface');
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toBeUndefined();
-
-    undo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-  });
-
-  it('setComponentAlias implicitly registers the slice with activeFile "default"', () => {
-    setComponentAlias('card', '--card-radius', tokenRef('--radius-lg'));
-    expect(get(editorState).components.card.activeFile).toBe('default');
-    expect(get(editorState).components.card.aliases['--card-radius']).toEqual(tokenRef('--radius-lg'));
-    expect(get(editorState).components.card.config).toEqual({});
-  });
-});
-
-describe('component config — literal-valued knobs', () => {
-  it('setComponentConfig stores the value and is undoable', () => {
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'danger');
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('danger');
-
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'warning');
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('warning');
-
-    undo();
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('danger');
-  });
-
-  it('clearComponentConfig removes the entry', () => {
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'danger');
-    clearComponentConfig('dialog', '--dialog-confirm-variant');
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBeUndefined();
-  });
-
-  it('setComponentConfig implicitly registers the slice with empty aliases', () => {
-    setComponentConfig('dialog', '--dialog-cancel-variant', 'outline');
-    expect(get(editorState).components.dialog.activeFile).toBe('default');
-    expect(get(editorState).components.dialog.aliases).toEqual({});
-    expect(get(editorState).components.dialog.config['--dialog-cancel-variant']).toBe('outline');
-  });
-});
-
-describe('componentDirty — per-component scoping', () => {
-  it('marks a component dirty only after its aliases diverge from the saved baseline', () => {
-    loadComponentActive('button', 'default', { '--button-primary-surface': '--surface-success-high' });
-    expect(get(componentDirty).button).toBe(false);
-
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    expect(get(componentDirty).button).toBe(true);
-
-    markComponentSaved('button');
-    expect(get(componentDirty).button).toBe(false);
-  });
-
-  it('marks a component dirty when config diverges from the saved baseline', () => {
-    loadComponentActive('dialog', 'default', {}, { '--dialog-confirm-variant': 'primary' });
-    expect(get(componentDirty).dialog).toBe(false);
-
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'danger');
-    expect(get(componentDirty).dialog).toBe(true);
-
-    markComponentSaved('dialog');
-    expect(get(componentDirty).dialog).toBe(false);
-  });
-
-  it('editing one component does not dirty another', () => {
-    loadComponentActive('button', 'default', { '--button-primary-surface': '--surface-success-high' });
-    loadComponentActive('card', 'default', { '--card-radius': '--radius-md' });
-    expect(get(componentDirty).button).toBe(false);
-    expect(get(componentDirty).card).toBe(false);
-
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    expect(get(componentDirty).button).toBe(true);
-    expect(get(componentDirty).card).toBe(false);
-  });
-
-  it('undo after a saved state marks dirty again', () => {
-    loadComponentActive('button', 'default', { '--button-primary-surface': '--surface-success-high' });
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    markComponentSaved('button');
-    expect(get(componentDirty).button).toBe(false);
-
-    undo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-    expect(get(componentDirty).button).toBe(true);
-  });
-});
-
-describe('loadComponentActive — split-on-load migration', () => {
-  it('routes legacy config keys from single-bucket aliases into the config bucket', () => {
-    loadComponentActive('dialog', 'default', {
-      '--dialog-surface': '--surface-neutral-low',
-      '--dialog-confirm-variant': 'danger',
-    });
-    const slice = get(editorState).components.dialog;
-    expect(slice.aliases['--dialog-surface']).toEqual(tokenRef('--surface-neutral-low'));
-    expect(slice.aliases['--dialog-confirm-variant']).toBeUndefined();
-    expect(slice.config['--dialog-confirm-variant']).toBe('danger');
-  });
-
-  it('keeps CSS-var-valued aliases (e.g. --button-shimmer → --shimmer-on) in the aliases bucket', () => {
-    loadComponentActive('button', 'default', {
-      '--button-primary-surface': '--surface-success-high',
-      '--button-shimmer': '--shimmer-on',
-    });
-    const slice = get(editorState).components.button;
-    expect(slice.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-    expect(slice.aliases['--button-shimmer']).toEqual(tokenRef('--shimmer-on'));
-    expect(slice.config['--button-shimmer']).toBeUndefined();
-  });
-
-  it('classifies literal alias values as kind "literal"', () => {
-    loadComponentActive('myComp', 'default', {
-      '--my-comp-token': '--some-token',
-      '--my-comp-color': 'rebeccapurple',
-    });
-    const slice = get(editorState).components.myComp;
-    expect(slice.aliases['--my-comp-token']).toEqual(tokenRef('--some-token'));
-    expect(slice.aliases['--my-comp-color']).toEqual({ kind: 'literal', value: 'rebeccapurple' });
-  });
-
-  it('explicit config field wins over legacy alias-bucketed value', () => {
-    loadComponentActive(
-      'dialog',
-      'default',
-      { '--dialog-confirm-variant': 'primary' },
-      { '--dialog-confirm-variant': 'danger' },
-    );
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('danger');
-  });
-});
-
-describe('seedComponentsFromApi — boot-time hydration', () => {
-  it('populates state and establishes the clean baseline', () => {
-    seedComponentsFromApi({
-      button: { activeFile: 'myConfig', aliases: { '--button-primary-surface': '--surface-success-high' } },
-    });
-    expect(get(editorState).components.button.activeFile).toBe('myConfig');
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-    expect(get(componentDirty).button).toBe(false);
-  });
-
-  it('routes config keys when seeding from legacy single-bucket API payload', () => {
-    seedComponentsFromApi({
-      dialog: {
-        activeFile: 'default',
-        aliases: { '--dialog-confirm-variant': 'danger', '--dialog-shadow': '--shadow-2xl' },
-      },
-    });
-    const slice = get(editorState).components.dialog;
-    expect(slice.aliases['--dialog-shadow']).toEqual(tokenRef('--shadow-2xl'));
-    expect(slice.aliases['--dialog-confirm-variant']).toBeUndefined();
-    expect(slice.config['--dialog-confirm-variant']).toBe('danger');
-  });
-
-  it('replaces the full components slice', () => {
-    setComponentAlias('card', '--card-radius', tokenRef('--radius-md'));
-    seedComponentsFromApi({
-      button: { activeFile: 'default', aliases: {} },
-    });
-    expect(get(editorState).components.card).toBeUndefined();
-    expect(get(editorState).components.button).toBeDefined();
-  });
-});