@motion-proto/live-tokens 0.76.0 → 0.77.0

package/src/testing-js/index.js

@@ -7,7 +7,7 @@ import {
   requiresInteraction,
   selectedContracts,
   shippedContracts
-} from "./chunk-LXR3MN6N.js";
+} from "./chunk-4JQX6WWL.js";
 import {
   createVitestConfig
 } from "./chunk-FAFOAWYL.js";
@@ -116,16 +116,6 @@ async function createPlaywrightConfig(options = {}) {
   const baseURL = `http://${HOST}:${port}`;
   process.env[COMPONENTS_PATH_ENV] = settings.componentsPath;
   if (settings.contractsModule) process.env[CONTRACTS_MODULE_ENV] = settings.contractsModule;
-  const requested = process.env[COMPONENT_ENV];
-  if (requested) {
-    const matches = await selectedContracts();
-    if (matches.length === 0) {
-      const all = await allContracts();
-      throw new Error(
-        `${COMPONENT_ENV}=${requested} names a component with no contract. Declared: ${all.map((contract) => contract.id).sort().join(", ")}`
-      );
-    }
-  }
   return defineConfig({
     testDir: options.testDir ?? CONTRACT_TEST_DIR,
     // The component suites carry their serial and parallel intent per file:

package/src/testing-js/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../testing/playwright.ts","../testing/isolation.ts","../testing/port.ts"],"sourcesContent":["import path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport {\n  defineConfig,\n  devices,\n  type PlaywrightTestConfig,\n  type PlaywrightTestProject,\n} from '@playwright/test';\nimport {\n  COMPONENT_ENV,\n  COMPONENTS_PATH_ENV,\n  devServerCommand,\n  resolveTestingConfig,\n  type LiveTokensTestingConfig,\n} from './config';\nimport { allContracts, CONTRACTS_MODULE_ENV, selectedContracts } from './contracts';\nimport { DATA_DIR_ENV, TEST_DATA_DIR_ENV, isolateDataDir } from './isolation';\nimport { resolvePort } from './port';\n\nconst HOST = '127.0.0.1';\n\n/** The shipped suites, wherever the package is installed. */\nconst CONTRACT_TEST_DIR = path.dirname(fileURLToPath(import.meta.url));\n\nexport interface PlaywrightConfigOptions extends LiveTokensTestingConfig {\n  /** Project root the settings resolve against. Default `process.cwd()`. */\n  root?: string;\n  /** Projects that run beside the contract project. */\n  extraProjects?: PlaywrightTestProject[];\n  /** Where projects that declare no `testDir` of their own look. */\n  testDir?: string;\n}\n\n/**\n * The contract project, its dev server, and the data isolation the two share.\n *\n * Isolation runs here rather than in a global setup because the config is the\n * first thing every process in the run evaluates: the environment it leaves\n * behind reaches the workers and the dev server, and nothing in the run can\n * observe the state before it.\n */\nexport async function createPlaywrightConfig(\n  options: PlaywrightConfigOptions = {},\n): Promise<PlaywrightTestConfig> {\n  const settings = resolveTestingConfig(options, options.root);\n  const { dataDir } = isolateDataDir(settings.dataDir);\n  const port = resolvePort(settings.port);\n  const baseURL = `http://${HOST}:${port}`;\n\n  process.env[COMPONENTS_PATH_ENV] = settings.componentsPath;\n  if (settings.contractsModule) process.env[CONTRACTS_MODULE_ENV] = settings.contractsModule;\n\n  const requested = process.env[COMPONENT_ENV];\n  if (requested) {\n    const matches = await selectedContracts();\n    if (matches.length === 0) {\n      const all = await allContracts();\n      throw new Error(\n        `${COMPONENT_ENV}=${requested} names a component with no contract. `\n        + `Declared: ${all.map((contract) => contract.id).sort().join(', ')}`,\n      );\n    }\n  }\n\n  return defineConfig({\n    testDir: options.testDir ?? CONTRACT_TEST_DIR,\n    // The component suites carry their serial and parallel intent per file:\n    // `component-editor.contract.ts` runs each component's save and reset\n    // cycles in order against one data tree. Turning this on would interleave\n    // them.\n    fullyParallel: false,\n    // One worker is the safe default: the specs share a dev server and a data\n    // directory. A run that can afford more passes a worker count on the\n    // command line.\n    workers: 1,\n    timeout: 30_000,\n    expect: { timeout: 5_000 },\n    // A shared-server suite times out under CI load in ways it never does\n    // locally, and without a retry budget one wobble aborts a tagged release.\n    retries: process.env.CI ? 2 : 0,\n    // Absolute and rooted at the consumer project, not the config file's own\n    // directory: `check-component --tests`'s generated config lives in a\n    // temporary directory that gets removed on completion, and a relative\n    // `outputDir` would put every trace and screenshot in there too.\n    outputDir: path.join(settings.root, 'test-results/playwright'),\n    reporter: process.env.CI ? [['line'], ['html', { open: 'never' }]] : 'list',\n    use: {\n      baseURL,\n      // Unset, both of these are unbounded: a locator that never resolves waits\n      // out the whole test timeout and reports nothing about where it stopped.\n      actionTimeout: 10_000,\n      navigationTimeout: 30_000,\n      trace: 'on-first-retry',\n      screenshot: 'only-on-failure',\n      // `retain-on-failure` still records every passing test and throws the\n      // file away, which costs ~28% CPU. Match the trace policy instead.\n      video: 'on-first-retry',\n    },\n    projects: [\n      ...(options.extraProjects ?? []),\n      {\n        name: 'contract',\n        testDir: CONTRACT_TEST_DIR,\n        // `.ts` in this repo, `.js` once tsup compiles the shipped build into\n        // `src/testing-js`; matching both here needs no build-time swap.\n        testMatch: '**/component-*.contract.{ts,js}',\n        // `.tabs-preview` now caps its sticky band at 50vh, which is enough for\n        // image, panel, card and sidenavigation to pass alone at 1280x720. A\n        // full parallel run still fails panel's gradient radio there, so the\n        // band can cover a control at some scroll positions. Until that is\n        // fixed the suite runs taller. See docs/contract-test-defects.md.\n        use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 900 } },\n      },\n    ],\n    webServer: {\n      command: devServerCommand(settings.devCommand, HOST, port),\n      // Otherwise defaults to the config file's own directory. A generated\n      // config that lives outside the consumer root (`check-component\n      // --tests`'s temporary config) would run `npm run dev` from wherever\n      // that happens to be instead.\n      cwd: settings.root,\n      url: baseURL,\n      // A server this run did not start carries none of these variables, so it\n      // would write the project's own data tree.\n      reuseExistingServer: false,\n      timeout: 120_000,\n      env: {\n        ...process.env,\n        [TEST_DATA_DIR_ENV]: dataDir,\n        [DATA_DIR_ENV]: dataDir,\n      },\n    },\n  });\n}\n","import fs from 'node:fs';\nimport os from 'node:os';\nimport path from 'node:path';\n\n/**\n * The plugin reads this name ahead of its own options and\n * `live-tokens.config.json`, so setting it redirects every server-side write —\n * the data tree, `tokens.generated.css`, and `fonts.css` — into the copy.\n */\nexport const TEST_DATA_DIR_ENV = 'LIVE_TOKENS_TEST_DATA_DIR';\n\n/** What the suites and the harness read component configs from in the runner's\n *  own process. It names the same directory and is a separate variable because\n *  it answers a different question: where a reader looks, not where the server\n *  is confined. */\nexport const DATA_DIR_ENV = 'LIVE_TOKENS_DATA_DIR';\n\n/**\n * A developer's current session rather than the document under test. Each one\n * is gitignored or dev-written, so leaving it in the copy would make the run\n * pass or fail on whichever theme the maintainer has open.\n *\n *   _working.json     an unsaved buffer, which reads as a dirty document and\n *                     can raise a destructive confirmation dialog\n *   _active.json      the theme the editor has open. One carrying a sketchstyle\n *                     boots the suite with the sketch layer on, which paints\n *                     every fill onto a pseudo-element and leaves the real\n *                     background transparent\n *   _production.json  the theme baked into tokens.generated.css\n *\n * A missing pointer resolves to \"default\" at runtime, so removing them is the\n * whole reset.\n */\nconst SESSION_FILES = new Set(['_working.json', '_active.json', '_production.json']);\n\nexport interface IsolatedData {\n  dataDir: string;\n  /** True when this process made the copy and owns removing it. */\n  created: boolean;\n}\n\nlet removed = false;\n\nfunction registerCleanup(dataDir: string): void {\n  const remove = () => {\n    if (removed) return;\n    removed = true;\n    fs.rmSync(dataDir, { recursive: true, force: true });\n  };\n  process.once('exit', remove);\n  // Playwright owns the exit path on a signal: it stops the workers and kills\n  // the dev server's process group, then exits, which reaches `exit` above.\n  // These two only make sure the copy is gone before that teardown starts.\n  process.once('SIGINT', remove);\n  process.once('SIGTERM', remove);\n}\n\n/**\n * Copy `sourceDataDir` into a unique temporary directory and point both the\n * server and the runner at it. Idempotent across processes: Playwright loads\n * the config again in every worker, and each inherits the parent's environment,\n * so only the first call copies anything.\n */\nexport function isolateDataDir(sourceDataDir: string): IsolatedData {\n  const existing = process.env[TEST_DATA_DIR_ENV];\n  if (existing) {\n    const dataDir = path.resolve(existing);\n    if (!fs.existsSync(dataDir)) {\n      throw new Error(`${TEST_DATA_DIR_ENV} names ${dataDir}, which does not exist`);\n    }\n    process.env[DATA_DIR_ENV] = dataDir;\n    return { dataDir, created: false };\n  }\n\n  const source = path.resolve(sourceDataDir);\n  if (!fs.existsSync(source)) {\n    throw new Error(\n      `No data directory at ${source}. Set \\`dataDir\\` in live-tokens.testing.ts `\n      + 'when the project keeps its live-tokens data somewhere else.',\n    );\n  }\n\n  // realpath: macOS resolves os.tmpdir() through a symlink, and the plugin\n  // compares resolved paths when it decides whether a write is in scope.\n  const dataDir = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), 'live-tokens-contract-')));\n  fs.cpSync(source, dataDir, { recursive: true });\n  for (const entry of fs.readdirSync(dataDir, { recursive: true }) as string[]) {\n    if (SESSION_FILES.has(path.basename(entry))) {\n      fs.rmSync(path.join(dataDir, entry), { force: true });\n    }\n  }\n\n  process.env[TEST_DATA_DIR_ENV] = dataDir;\n  process.env[DATA_DIR_ENV] = dataDir;\n  registerCleanup(dataDir);\n  return { dataDir, created: true };\n}\n","import { execFileSync } from 'node:child_process';\n\nexport const PORT_ENV = 'LIVE_TOKENS_TEST_PORT';\n\nconst PREFERRED_PORT = 4173;\n\n/** Bind the preferred port, fall back to whatever the OS hands out, print the\n *  answer. A Playwright config is evaluated synchronously, so the check runs in\n *  a child rather than on a listener callback. */\nconst PROBE = `\nconst net = require('net');\nconst listen = (port) => new Promise((resolve, reject) => {\n  const server = net.createServer();\n  server.once('error', reject);\n  server.listen(port, '127.0.0.1', () => {\n    const { port: bound } = server.address();\n    server.close(() => resolve(bound));\n  });\n});\n// process.stdout.write, not console.log: the parent's FORCE_COLOR makes\n// console.log wrap a number in ANSI escapes.\nlisten(Number(process.argv[1])).catch(() => listen(0)).then((port) => process.stdout.write(String(port)));\n`;\n\n/**\n * The port the dev server and `baseURL` share. Cached in the environment so\n * every Playwright worker, which loads the config again in its own process,\n * reads the port the main process settled on.\n */\nexport function resolvePort(preferred?: number): number {\n  const cached = process.env[PORT_ENV];\n  if (cached) return Number(cached);\n\n  const port = preferred\n    ?? Number(execFileSync(process.execPath, ['-e', PROBE, String(PREFERRED_PORT)], {\n      encoding: 'utf-8',\n    }).trim());\n  if (!Number.isInteger(port) || port <= 0) {\n    throw new Error(`Could not settle on a dev-server port (read ${port})`);\n  }\n  process.env[PORT_ENV] = String(port);\n  return port;\n}\n"],"mappings":"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","names":["path","dataDir","path"]}
+{"version":3,"sources":["../testing/playwright.ts","../testing/isolation.ts","../testing/port.ts"],"sourcesContent":["import path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport {\n  defineConfig,\n  devices,\n  type PlaywrightTestConfig,\n  type PlaywrightTestProject,\n} from '@playwright/test';\nimport {\n  COMPONENT_ENV,\n  COMPONENTS_PATH_ENV,\n  devServerCommand,\n  resolveTestingConfig,\n  type LiveTokensTestingConfig,\n} from './config';\nimport { CONTRACTS_MODULE_ENV } from './contracts';\nimport { DATA_DIR_ENV, TEST_DATA_DIR_ENV, isolateDataDir } from './isolation';\nimport { resolvePort } from './port';\n\nconst HOST = '127.0.0.1';\n\n/** The shipped suites, wherever the package is installed. */\nconst CONTRACT_TEST_DIR = path.dirname(fileURLToPath(import.meta.url));\n\nexport interface PlaywrightConfigOptions extends LiveTokensTestingConfig {\n  /** Project root the settings resolve against. Default `process.cwd()`. */\n  root?: string;\n  /** Projects that run beside the contract project. */\n  extraProjects?: PlaywrightTestProject[];\n  /** Where projects that declare no `testDir` of their own look. */\n  testDir?: string;\n}\n\n/**\n * The contract project, its dev server, and the data isolation the two share.\n *\n * Isolation runs here rather than in a global setup because the config is the\n * first thing every process in the run evaluates: the environment it leaves\n * behind reaches the workers and the dev server, and nothing in the run can\n * observe the state before it.\n */\nexport async function createPlaywrightConfig(\n  options: PlaywrightConfigOptions = {},\n): Promise<PlaywrightTestConfig> {\n  const settings = resolveTestingConfig(options, options.root);\n  const { dataDir } = isolateDataDir(settings.dataDir);\n  const port = resolvePort(settings.port);\n  const baseURL = `http://${HOST}:${port}`;\n\n  process.env[COMPONENTS_PATH_ENV] = settings.componentsPath;\n  if (settings.contractsModule) process.env[CONTRACTS_MODULE_ENV] = settings.contractsModule;\n\n  return defineConfig({\n    testDir: options.testDir ?? CONTRACT_TEST_DIR,\n    // The component suites carry their serial and parallel intent per file:\n    // `component-editor.contract.ts` runs each component's save and reset\n    // cycles in order against one data tree. Turning this on would interleave\n    // them.\n    fullyParallel: false,\n    // One worker is the safe default: the specs share a dev server and a data\n    // directory. A run that can afford more passes a worker count on the\n    // command line.\n    workers: 1,\n    timeout: 30_000,\n    expect: { timeout: 5_000 },\n    // A shared-server suite times out under CI load in ways it never does\n    // locally, and without a retry budget one wobble aborts a tagged release.\n    retries: process.env.CI ? 2 : 0,\n    // Absolute and rooted at the consumer project, not the config file's own\n    // directory: `check-component --tests`'s generated config lives in a\n    // temporary directory that gets removed on completion, and a relative\n    // `outputDir` would put every trace and screenshot in there too.\n    outputDir: path.join(settings.root, 'test-results/playwright'),\n    reporter: process.env.CI ? [['line'], ['html', { open: 'never' }]] : 'list',\n    use: {\n      baseURL,\n      // Unset, both of these are unbounded: a locator that never resolves waits\n      // out the whole test timeout and reports nothing about where it stopped.\n      actionTimeout: 10_000,\n      navigationTimeout: 30_000,\n      trace: 'on-first-retry',\n      screenshot: 'only-on-failure',\n      // `retain-on-failure` still records every passing test and throws the\n      // file away, which costs ~28% CPU. Match the trace policy instead.\n      video: 'on-first-retry',\n    },\n    projects: [\n      ...(options.extraProjects ?? []),\n      {\n        name: 'contract',\n        testDir: CONTRACT_TEST_DIR,\n        // `.ts` in this repo, `.js` once tsup compiles the shipped build into\n        // `src/testing-js`; matching both here needs no build-time swap.\n        testMatch: '**/component-*.contract.{ts,js}',\n        // `.tabs-preview` now caps its sticky band at 50vh, which is enough for\n        // image, panel, card and sidenavigation to pass alone at 1280x720. A\n        // full parallel run still fails panel's gradient radio there, so the\n        // band can cover a control at some scroll positions. Until that is\n        // fixed the suite runs taller. See docs/contract-test-defects.md.\n        use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 900 } },\n      },\n    ],\n    webServer: {\n      command: devServerCommand(settings.devCommand, HOST, port),\n      // Otherwise defaults to the config file's own directory. A generated\n      // config that lives outside the consumer root (`check-component\n      // --tests`'s temporary config) would run `npm run dev` from wherever\n      // that happens to be instead.\n      cwd: settings.root,\n      url: baseURL,\n      // A server this run did not start carries none of these variables, so it\n      // would write the project's own data tree.\n      reuseExistingServer: false,\n      timeout: 120_000,\n      env: {\n        ...process.env,\n        [TEST_DATA_DIR_ENV]: dataDir,\n        [DATA_DIR_ENV]: dataDir,\n      },\n    },\n  });\n}\n","import fs from 'node:fs';\nimport os from 'node:os';\nimport path from 'node:path';\n\n/**\n * The plugin reads this name ahead of its own options and\n * `live-tokens.config.json`, so setting it redirects every server-side write —\n * the data tree, `tokens.generated.css`, and `fonts.css` — into the copy.\n */\nexport const TEST_DATA_DIR_ENV = 'LIVE_TOKENS_TEST_DATA_DIR';\n\n/** What the suites and the harness read component configs from in the runner's\n *  own process. It names the same directory and is a separate variable because\n *  it answers a different question: where a reader looks, not where the server\n *  is confined. */\nexport const DATA_DIR_ENV = 'LIVE_TOKENS_DATA_DIR';\n\n/**\n * A developer's current session rather than the document under test. Each one\n * is gitignored or dev-written, so leaving it in the copy would make the run\n * pass or fail on whichever theme the maintainer has open.\n *\n *   _working.json     an unsaved buffer, which reads as a dirty document and\n *                     can raise a destructive confirmation dialog\n *   _active.json      the theme the editor has open. One carrying a sketchstyle\n *                     boots the suite with the sketch layer on, which paints\n *                     every fill onto a pseudo-element and leaves the real\n *                     background transparent\n *   _production.json  the theme baked into tokens.generated.css\n *\n * A missing pointer resolves to \"default\" at runtime, so removing them is the\n * whole reset.\n */\nconst SESSION_FILES = new Set(['_working.json', '_active.json', '_production.json']);\n\nexport interface IsolatedData {\n  dataDir: string;\n  /** True when this process made the copy and owns removing it. */\n  created: boolean;\n}\n\nlet removed = false;\n\nfunction registerCleanup(dataDir: string): void {\n  const remove = () => {\n    if (removed) return;\n    removed = true;\n    fs.rmSync(dataDir, { recursive: true, force: true });\n  };\n  process.once('exit', remove);\n  // Playwright owns the exit path on a signal: it stops the workers and kills\n  // the dev server's process group, then exits, which reaches `exit` above.\n  // These two only make sure the copy is gone before that teardown starts.\n  process.once('SIGINT', remove);\n  process.once('SIGTERM', remove);\n}\n\n/**\n * Copy `sourceDataDir` into a unique temporary directory and point both the\n * server and the runner at it. Idempotent across processes: Playwright loads\n * the config again in every worker, and each inherits the parent's environment,\n * so only the first call copies anything.\n */\nexport function isolateDataDir(sourceDataDir: string): IsolatedData {\n  const existing = process.env[TEST_DATA_DIR_ENV];\n  if (existing) {\n    const dataDir = path.resolve(existing);\n    if (!fs.existsSync(dataDir)) {\n      throw new Error(`${TEST_DATA_DIR_ENV} names ${dataDir}, which does not exist`);\n    }\n    process.env[DATA_DIR_ENV] = dataDir;\n    return { dataDir, created: false };\n  }\n\n  const source = path.resolve(sourceDataDir);\n  if (!fs.existsSync(source)) {\n    throw new Error(\n      `No data directory at ${source}. Set \\`dataDir\\` in live-tokens.testing.ts `\n      + 'when the project keeps its live-tokens data somewhere else.',\n    );\n  }\n\n  // realpath: macOS resolves os.tmpdir() through a symlink, and the plugin\n  // compares resolved paths when it decides whether a write is in scope.\n  const dataDir = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), 'live-tokens-contract-')));\n  fs.cpSync(source, dataDir, { recursive: true });\n  for (const entry of fs.readdirSync(dataDir, { recursive: true }) as string[]) {\n    if (SESSION_FILES.has(path.basename(entry))) {\n      fs.rmSync(path.join(dataDir, entry), { force: true });\n    }\n  }\n\n  process.env[TEST_DATA_DIR_ENV] = dataDir;\n  process.env[DATA_DIR_ENV] = dataDir;\n  registerCleanup(dataDir);\n  return { dataDir, created: true };\n}\n","import { execFileSync } from 'node:child_process';\n\nexport const PORT_ENV = 'LIVE_TOKENS_TEST_PORT';\n\nconst PREFERRED_PORT = 4173;\n\n/** Bind the preferred port, fall back to whatever the OS hands out, print the\n *  answer. A Playwright config is evaluated synchronously, so the check runs in\n *  a child rather than on a listener callback. */\nconst PROBE = `\nconst net = require('net');\nconst listen = (port) => new Promise((resolve, reject) => {\n  const server = net.createServer();\n  server.once('error', reject);\n  server.listen(port, '127.0.0.1', () => {\n    const { port: bound } = server.address();\n    server.close(() => resolve(bound));\n  });\n});\n// process.stdout.write, not console.log: the parent's FORCE_COLOR makes\n// console.log wrap a number in ANSI escapes.\nlisten(Number(process.argv[1])).catch(() => listen(0)).then((port) => process.stdout.write(String(port)));\n`;\n\n/**\n * The port the dev server and `baseURL` share. Cached in the environment so\n * every Playwright worker, which loads the config again in its own process,\n * reads the port the main process settled on.\n */\nexport function resolvePort(preferred?: number): number {\n  const cached = process.env[PORT_ENV];\n  if (cached) return Number(cached);\n\n  const port = preferred\n    ?? Number(execFileSync(process.execPath, ['-e', PROBE, String(PREFERRED_PORT)], {\n      encoding: 'utf-8',\n    }).trim());\n  if (!Number.isInteger(port) || port <= 0) {\n    throw new Error(`Could not settle on a dev-server port (read ${port})`);\n  }\n  process.env[PORT_ENV] = String(port);\n  return port;\n}\n"],"mappings":"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","names":["path","dataDir","path"]}

package/template/README.md

@@ -45,11 +45,16 @@ npx @motion-proto/live-tokens setup-claude
 
 `npm run test:design` runs `check-component --tests`: the static checks plus
 the registry contract and the component contract suites, in a browser, against
-this project. It needs three devDependencies the template does not install:
+this project. Playwright, Vitest, and happy-dom are installed; the browser is
+a one-time download:
 
 ```bash
-npm install -D @playwright/test vitest happy-dom
 npx playwright install chromium
 ```
 
+`live-tokens.testing.ts` names the two files the run reads: `src/registerComponents.ts`
+registers your components, and `tests/contracts.ts` holds one contract per
+component, which is what the browser suites drive. The create-component skill
+writes both.
+
 A failing run leaves its report under `test-results/`, gitignored.

package/template/live-tokens.testing.ts

@@ -0,0 +1,6 @@
+import { defineTestingConfig } from '@motion-proto/live-tokens/testing/vitest';
+
+export default defineTestingConfig({
+  registrySetup: 'src/registerComponents.ts',
+  contractsModule: 'tests/contracts.ts',
+});

package/template/package.json

@@ -16,12 +16,15 @@
     "@motion-proto/live-tokens": "__LT_VERSION__"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@types/node": "^25.9.1",
+    "happy-dom": "^20.9.0",
     "sass": "^1.98.0",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.8",
     "typescript": "~6.0.3",
-    "vite": "^8.0.14"
+    "vite": "^8.0.14",
+    "vitest": "^4.1.4"
   }
 }

package/template/src/main.ts

@@ -6,6 +6,7 @@ import '@motion-proto/live-tokens/app/fonts.css';
 
 import { bootLiveTokens, configureEditor } from '@motion-proto/live-tokens';
 import App from './App.svelte';
+import './registerComponents';
 
 configureEditor({ storagePrefix: 'app-' });
 

package/template/src/registerComponents.ts

@@ -0,0 +1,4 @@
+// Registration only. `src/main.ts` imports it for the app and
+// `live-tokens.testing.ts` names it for `check-component --tests`, so a
+// component registered here reaches both without mounting the app.
+export {};

package/template/tests/contracts.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from '@motion-proto/live-tokens/testing';
+
+export const contracts: ComponentContract[] = [];

package/template/tsconfig.json

@@ -13,5 +13,5 @@
     "verbatimModuleSyntax": true,
     "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.svelte"]
+  "include": ["src/**/*.ts", "src/**/*.svelte", "tests/**/*.ts", "live-tokens.testing.ts"]
 }