@adieyal/catalogue-cli 0.1.0

package/dist/init-CI0WzrG1.js

@@ -0,0 +1,2702 @@
+import pc from "picocolors";
+import { existsSync, readdirSync, statSync, readFileSync, mkdirSync, writeFileSync } from "node:fs";
+import { resolve, dirname, join, relative } from "node:path";
+import { z } from "zod";
+import "marked";
+import { createServer, build as build$1, preview as preview$1 } from "vite";
+import { spawn } from "node:child_process";
+import { pathToFileURL, fileURLToPath } from "node:url";
+const CategoryDefinitionSchema = z.object({
+  /** Unique category identifier (kebab-case) */
+  id: z.string().min(1).regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Category ID must be kebab-case starting with a letter"
+  }),
+  /** Human-readable label */
+  label: z.string().min(1),
+  /** Optional description */
+  description: z.string().optional()
+});
+const CategoriesConfigSchema = z.object({
+  /** Category definitions */
+  items: z.array(CategoryDefinitionSchema).default([]),
+  /** Label for uncategorised components */
+  uncategorisedLabel: z.string().optional().default("Other")
+});
+const CatalogueConfigSchema = z.object({
+  /** Title for the catalogue */
+  title: z.string().optional().default("Component Catalogue"),
+  /** Category configuration */
+  categories: CategoriesConfigSchema.optional().default({ items: [], uncategorisedLabel: "Other" }),
+  /** Path to the registry directory (relative to config) */
+  registryDir: z.string().optional().default("./registry"),
+  /** Output directory for builds (relative to config) */
+  outDir: z.string().optional().default("./dist/catalogue"),
+  /** Base path for deployment (e.g., '/docs/ui/') */
+  basePath: z.string().optional().default("/"),
+  /** Port for dev server */
+  port: z.number().optional().default(5173),
+  /** Component imports configuration */
+  components: z.object({
+    /** Path to component entry point (relative to config) */
+    entry: z.string().optional().default("./src/components/index.ts"),
+    /** Package name for imports */
+    package: z.string().optional()
+  }).optional().default({}),
+  /** Playwright test configuration */
+  playwright: z.object({
+    /** Breakpoints for visual regression tests */
+    breakpoints: z.array(z.object({
+      name: z.string(),
+      width: z.number(),
+      height: z.number()
+    })).optional(),
+    /** Themes to test */
+    themes: z.array(z.enum(["light", "dark"])).optional().default(["light", "dark"]),
+    /** Screenshot directory */
+    screenshotDir: z.string().optional().default("./screenshots")
+  }).optional().default({}),
+  /** Additional Vite configuration */
+  vite: z.record(z.unknown()).optional()
+});
+function validateConfig(data) {
+  const result = CatalogueConfigSchema.safeParse(data);
+  if (!result.success) {
+    return {
+      success: false,
+      errors: result.error.errors.map((e) => `${e.path.join(".")}: ${e.message}`)
+    };
+  }
+  return { success: true, data: result.data };
+}
+const CONFIG_FILES = [
+  "catalogue.config.ts",
+  "catalogue.config.js",
+  "catalogue.config.mjs"
+];
+async function loadConfig(options = {}) {
+  const cwd = options.cwd || process.cwd();
+  let configPath;
+  if (options.configFile) {
+    configPath = resolve(cwd, options.configFile);
+    if (!existsSync(configPath)) {
+      throw new Error(`Config file not found: ${configPath}`);
+    }
+  } else {
+    for (const filename of CONFIG_FILES) {
+      const candidate = resolve(cwd, filename);
+      if (existsSync(candidate)) {
+        configPath = candidate;
+        break;
+      }
+    }
+  }
+  if (!configPath) {
+    throw new Error(
+      `No catalogue config found in ${cwd}. Create one of: ${CONFIG_FILES.join(", ")}`
+    );
+  }
+  const configUrl = pathToFileURL(configPath).href;
+  let rawConfig;
+  try {
+    const module = await import(configUrl);
+    rawConfig = module.default;
+  } catch (error) {
+    throw new Error(
+      `Failed to load config from ${configPath}: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
+  const result = validateConfig(rawConfig);
+  if (!result.success) {
+    throw new Error(
+      `Invalid config in ${configPath}:
+${result.errors.map((e) => `  - ${e}`).join("\n")}`
+    );
+  }
+  const config = result.data;
+  const configDir = dirname(configPath);
+  return {
+    ...config,
+    configPath,
+    configDir,
+    registryPath: resolve(configDir, config.registryDir),
+    outPath: resolve(configDir, config.outDir)
+  };
+}
+function createDefaultConfig() {
+  return {
+    title: "Component Catalogue",
+    categories: {
+      items: [],
+      uncategorisedLabel: "Other"
+    },
+    registryDir: "./registry",
+    outDir: "./dist/catalogue",
+    basePath: "/",
+    port: 5173,
+    components: {
+      entry: "./src/components/index.ts"
+    },
+    playwright: {
+      themes: ["light", "dark"],
+      screenshotDir: "./screenshots"
+    }
+  };
+}
+function loadRegistryFiles(options) {
+  const { registryPath, basePath = registryPath } = options;
+  const components = [];
+  const scenarios = [];
+  const examples = [];
+  const componentsDir = join(registryPath, "components");
+  if (existsSync(componentsDir)) {
+    const componentDirs = readdirSync(componentsDir).filter((name) => {
+      const path = join(componentsDir, name);
+      return statSync(path).isDirectory();
+    });
+    for (const componentId of componentDirs) {
+      const componentDir = join(componentsDir, componentId);
+      const componentJsonPath = join(componentDir, "component.json");
+      if (existsSync(componentJsonPath)) {
+        try {
+          const data = JSON.parse(readFileSync(componentJsonPath, "utf-8"));
+          const filePath = relative(basePath, componentJsonPath);
+          let docs;
+          const docsPath = join(componentDir, "docs.md");
+          if (existsSync(docsPath)) {
+            docs = readFileSync(docsPath, "utf-8");
+          }
+          components.push({ filePath, data, docs });
+        } catch (error) {
+          const err = error instanceof Error ? error.message : "Unknown error";
+          console.error(`Error loading ${componentJsonPath}: ${err}`);
+        }
+      }
+      const scenariosDir = join(componentDir, "scenarios");
+      if (existsSync(scenariosDir)) {
+        const scenarioFiles = readdirSync(scenariosDir).filter(
+          (name) => name.endsWith(".json")
+        );
+        for (const scenarioFile of scenarioFiles) {
+          const scenarioPath = join(scenariosDir, scenarioFile);
+          try {
+            const data = JSON.parse(readFileSync(scenarioPath, "utf-8"));
+            const filePath = relative(basePath, scenarioPath);
+            scenarios.push({ filePath, data });
+          } catch (error) {
+            const err = error instanceof Error ? error.message : "Unknown error";
+            console.error(`Error loading ${scenarioPath}: ${err}`);
+          }
+        }
+      }
+    }
+  }
+  const examplesDir = join(registryPath, "examples");
+  if (existsSync(examplesDir)) {
+    const exampleFiles = readdirSync(examplesDir).filter(
+      (name) => name.endsWith(".json")
+    );
+    for (const exampleFile of exampleFiles) {
+      const examplePath = join(examplesDir, exampleFile);
+      try {
+        const data = JSON.parse(readFileSync(examplePath, "utf-8"));
+        const filePath = relative(basePath, examplePath);
+        examples.push({ filePath, data });
+      } catch (error) {
+        const err = error instanceof Error ? error.message : "Unknown error";
+        console.error(`Error loading ${examplePath}: ${err}`);
+      }
+    }
+  }
+  return { components, scenarios, examples };
+}
+function generateRegistryModule(registryPath) {
+  const data = loadRegistryFiles({ registryPath });
+  return `
+// Auto-generated registry data
+export const registryData = ${JSON.stringify(data, null, 2)};
+`;
+}
+function getRegistryWatchPaths(registryPath) {
+  const paths = [];
+  function walkDir(dir) {
+    if (!existsSync(dir)) return;
+    const entries = readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walkDir(fullPath);
+      } else if (entry.name.endsWith(".json") || entry.name.endsWith(".md")) {
+        paths.push(fullPath);
+      }
+    }
+  }
+  walkDir(registryPath);
+  return paths;
+}
+const VIRTUAL_REGISTRY_ID = "virtual:catalogue-registry";
+const RESOLVED_VIRTUAL_REGISTRY_ID = "\0" + VIRTUAL_REGISTRY_ID;
+function cataloguePlugin(options) {
+  const { config } = options;
+  let server;
+  return {
+    name: "catalogue",
+    configResolved(viteConfig) {
+    },
+    configureServer(_server) {
+      server = _server;
+      const watchPaths = getRegistryWatchPaths(config.registryPath);
+      for (const path of watchPaths) {
+        server.watcher.add(path);
+      }
+      server.watcher.on("change", (file) => {
+        if (file.startsWith(config.registryPath)) {
+          const module = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_REGISTRY_ID);
+          if (module) {
+            server.moduleGraph.invalidateModule(module);
+            server.ws.send({
+              type: "full-reload",
+              path: "*"
+            });
+          }
+        }
+      });
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_REGISTRY_ID) {
+        return RESOLVED_VIRTUAL_REGISTRY_ID;
+      }
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_REGISTRY_ID) {
+        const data = loadRegistryFiles({ registryPath: config.registryPath });
+        const registryData = {
+          ...data,
+          categories: config.categories
+        };
+        return `
+          export const registryData = ${JSON.stringify(registryData)};
+          export const config = ${JSON.stringify({
+          title: config.title,
+          basePath: config.basePath
+        })};
+        `;
+      }
+    }
+  };
+}
+function createHtmlTemplate(config) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${config.title}</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    :root {
+      --catalogue-bg: #ffffff;
+      --catalogue-text: #1a1a1a;
+      --catalogue-border: #e5e5e5;
+      --catalogue-primary: #3b82f6;
+      --catalogue-code-bg: #f5f5f5;
+    }
+
+    [data-theme="dark"] {
+      --catalogue-bg: #1a1a1a;
+      --catalogue-text: #f5f5f5;
+      --catalogue-border: #333333;
+      --catalogue-primary: #60a5fa;
+      --catalogue-code-bg: #2a2a2a;
+    }
+
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      line-height: 1.5;
+    }
+
+    .catalogue-harness-body {
+      padding: 0;
+      margin: 0;
+    }
+
+    #app {
+      min-height: 100vh;
+    }
+
+    /* Landing page styles */
+    .catalogue-landing {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    .catalogue-landing-header {
+      margin-bottom: 2rem;
+    }
+
+    .catalogue-landing-title {
+      margin: 0;
+      font-size: 2rem;
+    }
+
+    .catalogue-landing-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+
+    .catalogue-search-input {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      font-size: 1rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.5rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+    }
+
+    .catalogue-filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    .catalogue-filter-group {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .catalogue-filter-label {
+      font-weight: 500;
+      font-size: 0.875rem;
+    }
+
+    .catalogue-filter-option {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      cursor: pointer;
+      font-size: 0.875rem;
+    }
+
+    .catalogue-component-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .catalogue-component-list--flat {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    }
+
+    .catalogue-expand-toggle {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.375rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      cursor: pointer;
+      margin-left: auto;
+    }
+
+    .catalogue-expand-toggle:hover {
+      background: var(--catalogue-code-bg);
+    }
+
+    .catalogue-category-section {
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.5rem;
+      overflow: hidden;
+    }
+
+    .catalogue-category-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 1rem 1.25rem;
+      background: var(--catalogue-code-bg);
+      cursor: pointer;
+      list-style: none;
+    }
+
+    .catalogue-category-header::-webkit-details-marker {
+      display: none;
+    }
+
+    .catalogue-category-header::before {
+      content: '▶';
+      font-size: 0.75rem;
+      transition: transform 0.2s;
+    }
+
+    .catalogue-category-section[open] .catalogue-category-header::before {
+      transform: rotate(90deg);
+    }
+
+    .catalogue-category-label {
+      font-weight: 600;
+      font-size: 1rem;
+    }
+
+    .catalogue-category-count {
+      font-size: 0.875rem;
+      color: var(--catalogue-text);
+      opacity: 0.6;
+    }
+
+    .catalogue-category-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1.5rem;
+      padding: 1.5rem;
+    }
+
+    .catalogue-component-card {
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.5rem;
+      padding: 1.25rem;
+      background: var(--catalogue-bg);
+    }
+
+    .catalogue-component-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
+    }
+
+    .catalogue-component-card-title {
+      margin: 0;
+      font-size: 1.125rem;
+    }
+
+    .catalogue-component-card-title a {
+      color: var(--catalogue-primary);
+      text-decoration: none;
+    }
+
+    .catalogue-component-card-title a:hover {
+      text-decoration: underline;
+    }
+
+    .catalogue-status-badge {
+      font-size: 0.75rem;
+      padding: 0.125rem 0.5rem;
+      border-radius: 9999px;
+      text-transform: uppercase;
+      font-weight: 500;
+    }
+
+    .catalogue-status-badge[data-status="stable"] {
+      background: #dcfce7;
+      color: #166534;
+    }
+
+    .catalogue-status-badge[data-status="beta"] {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .catalogue-status-badge[data-status="deprecated"] {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    [data-theme="dark"] .catalogue-status-badge[data-status="stable"] {
+      background: #166534;
+      color: #dcfce7;
+    }
+
+    [data-theme="dark"] .catalogue-status-badge[data-status="beta"] {
+      background: #92400e;
+      color: #fef3c7;
+    }
+
+    [data-theme="dark"] .catalogue-status-badge[data-status="deprecated"] {
+      background: #991b1b;
+      color: #fee2e2;
+    }
+
+    .catalogue-component-card-description {
+      margin: 0.5rem 0;
+      color: var(--catalogue-text);
+      opacity: 0.8;
+      font-size: 0.875rem;
+    }
+
+    .catalogue-component-card-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      margin: 0.75rem 0;
+    }
+
+    .catalogue-tag {
+      font-size: 0.75rem;
+      padding: 0.125rem 0.5rem;
+      background: var(--catalogue-code-bg);
+      border-radius: 0.25rem;
+    }
+
+    .catalogue-component-card-meta {
+      font-size: 0.75rem;
+      color: var(--catalogue-text);
+      opacity: 0.6;
+    }
+
+    /* Breadcrumb */
+    .catalogue-breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      font-size: 0.875rem;
+    }
+
+    .catalogue-breadcrumb a {
+      color: var(--catalogue-primary);
+      text-decoration: none;
+    }
+
+    .catalogue-breadcrumb a:hover {
+      text-decoration: underline;
+    }
+
+    .catalogue-breadcrumb-separator {
+      color: var(--catalogue-text);
+      opacity: 0.5;
+    }
+
+    /* Component page */
+    .catalogue-component-page {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    .catalogue-component-header {
+      margin-bottom: 2rem;
+    }
+
+    .catalogue-component-title-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .catalogue-component-title {
+      margin: 0;
+      font-size: 1.75rem;
+    }
+
+    .catalogue-component-description {
+      margin: 0.5rem 0;
+      font-size: 1rem;
+      opacity: 0.8;
+    }
+
+    .catalogue-component-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin: 1rem 0;
+    }
+
+    .catalogue-component-actions {
+      margin-top: 1rem;
+    }
+
+    .catalogue-button {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      text-decoration: none;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+    }
+
+    .catalogue-button-primary {
+      background: var(--catalogue-primary);
+      color: white;
+    }
+
+    .catalogue-button-primary:hover {
+      opacity: 0.9;
+    }
+
+    /* Variants grid */
+    .catalogue-variants-section {
+      margin-top: 2rem;
+    }
+
+    .catalogue-variants-section h2 {
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+    }
+
+    .catalogue-variants-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1.5rem;
+    }
+
+    .catalogue-scenario-card {
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.5rem;
+      overflow: hidden;
+    }
+
+    .catalogue-scenario-card-primary {
+      border-color: var(--catalogue-primary);
+    }
+
+    .catalogue-scenario-preview {
+      padding: 1.5rem;
+      background: var(--catalogue-bg);
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .catalogue-scenario-info {
+      padding: 1rem;
+      border-top: 1px solid var(--catalogue-border);
+    }
+
+    .catalogue-scenario-title-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .catalogue-scenario-title {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .catalogue-primary-badge {
+      font-size: 0.625rem;
+      padding: 0.125rem 0.375rem;
+      background: var(--catalogue-primary);
+      color: white;
+      border-radius: 0.25rem;
+      text-transform: uppercase;
+    }
+
+    .catalogue-scenario-description {
+      margin: 0.5rem 0;
+      font-size: 0.75rem;
+      opacity: 0.7;
+    }
+
+    .catalogue-scenario-links {
+      margin-top: 0.5rem;
+    }
+
+    .catalogue-link {
+      font-size: 0.75rem;
+      color: var(--catalogue-primary);
+      text-decoration: none;
+    }
+
+    .catalogue-link:hover {
+      text-decoration: underline;
+    }
+
+    /* Docs section */
+    .catalogue-docs-section {
+      margin-top: 2rem;
+      padding-top: 2rem;
+      border-top: 1px solid var(--catalogue-border);
+    }
+
+    .catalogue-docs-section h2 {
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+    }
+
+    .catalogue-docs-content {
+      line-height: 1.7;
+    }
+
+    .catalogue-docs-content h1,
+    .catalogue-docs-content h2,
+    .catalogue-docs-content h3 {
+      margin-top: 1.5rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .catalogue-docs-content pre {
+      background: var(--catalogue-code-bg);
+      padding: 1rem;
+      border-radius: 0.375rem;
+      overflow-x: auto;
+    }
+
+    .catalogue-docs-content code {
+      font-family: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
+      font-size: 0.875em;
+    }
+
+    /* Playground */
+    .catalogue-playground {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .catalogue-playground-header {
+      padding: 1rem 2rem;
+      border-bottom: 1px solid var(--catalogue-border);
+    }
+
+    .catalogue-playground-title-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .catalogue-playground-title-row h1 {
+      font-size: 1.25rem;
+      margin: 0;
+    }
+
+    .catalogue-playground-main {
+      display: flex;
+      flex: 1;
+    }
+
+    .catalogue-playground-preview-section {
+      flex: 1;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .catalogue-scenario-selector {
+      margin-bottom: 1rem;
+    }
+
+    .catalogue-scenario-select {
+      padding: 0.375rem 0.75rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.25rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+    }
+
+    .catalogue-playground-sidebar {
+      width: 350px;
+      border-left: 1px solid var(--catalogue-border);
+      display: flex;
+      flex-direction: column;
+    }
+
+    .catalogue-playground-controls-section {
+      padding: 1rem;
+      border-bottom: 1px solid var(--catalogue-border);
+    }
+
+    .catalogue-playground-controls-section h2 {
+      font-size: 0.875rem;
+      margin: 0 0 1rem 0;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      opacity: 0.7;
+    }
+
+    .catalogue-playground-code-section {
+      flex: 1;
+      overflow: auto;
+    }
+
+    /* Controls */
+    .catalogue-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .catalogue-control {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .catalogue-control-label {
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    .catalogue-control-input,
+    .catalogue-control-select {
+      padding: 0.5rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.25rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      font-size: 0.875rem;
+    }
+
+    .catalogue-control-checkbox {
+      display: flex;
+      align-items: center;
+    }
+
+    .catalogue-control-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .catalogue-control-radio {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.875rem;
+      cursor: pointer;
+    }
+
+    .catalogue-control-range-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .catalogue-control-range {
+      flex: 1;
+    }
+
+    .catalogue-control-range-value {
+      font-size: 0.75rem;
+      min-width: 3ch;
+      text-align: right;
+    }
+
+    .catalogue-control-json {
+      width: 100%;
+      padding: 0.5rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.25rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      font-family: ui-monospace, monospace;
+      font-size: 0.75rem;
+      resize: vertical;
+    }
+
+    .catalogue-control-json.invalid {
+      border-color: #ef4444;
+    }
+
+    /* Resizer */
+    .catalogue-resizer-wrapper {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      padding: 1rem;
+    }
+
+    .catalogue-resizer {
+      position: relative;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.25rem;
+      background: var(--catalogue-bg);
+      overflow: hidden;
+    }
+
+    .catalogue-resizer-content {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 1rem;
+    }
+
+    .catalogue-resizer-handle {
+      position: absolute;
+      background: transparent;
+    }
+
+    .catalogue-resizer-handle-right {
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 8px;
+      cursor: ew-resize;
+    }
+
+    .catalogue-resizer-handle-bottom {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      cursor: ns-resize;
+    }
+
+    .catalogue-resizer-handle-corner {
+      right: 0;
+      bottom: 0;
+      width: 16px;
+      height: 16px;
+      cursor: nwse-resize;
+    }
+
+    .catalogue-resizer-dimensions {
+      position: absolute;
+      bottom: 4px;
+      right: 20px;
+      font-size: 0.625rem;
+      color: var(--catalogue-text);
+      opacity: 0.5;
+      font-family: ui-monospace, monospace;
+    }
+
+    .catalogue-breakpoint-presets {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .catalogue-breakpoint-button {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.75rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.25rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      cursor: pointer;
+    }
+
+    .catalogue-breakpoint-button:hover {
+      background: var(--catalogue-code-bg);
+    }
+
+    /* Code panel */
+    .catalogue-code-panel {
+      border-top: 1px solid var(--catalogue-border);
+    }
+
+    .catalogue-code-panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--catalogue-border);
+    }
+
+    .catalogue-code-panel-title {
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .catalogue-code-panel-copy {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.75rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.25rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      cursor: pointer;
+    }
+
+    .catalogue-code-panel-copy.copied {
+      background: #22c55e;
+      color: white;
+      border-color: #22c55e;
+    }
+
+    .catalogue-code-panel-content {
+      margin: 0;
+      padding: 1rem;
+      background: var(--catalogue-code-bg);
+      overflow-x: auto;
+      font-size: 0.75rem;
+      line-height: 1.5;
+    }
+
+    .catalogue-code-panel-content code {
+      font-family: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
+    }
+
+    .catalogue-code-panel[data-collapsed] .catalogue-code-panel-content {
+      display: none;
+    }
+
+    /* Theme toggle */
+    .catalogue-theme-toggle {
+      padding: 0.5rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.375rem;
+      background: var(--catalogue-bg);
+      color: var(--catalogue-text);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .catalogue-theme-toggle:hover {
+      background: var(--catalogue-code-bg);
+    }
+
+    /* Harness */
+    .catalogue-harness {
+      min-height: 100vh;
+    }
+
+    .catalogue-harness-container {
+      display: inline-block;
+    }
+
+    /* Global header */
+    .catalogue-global-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.75rem 2rem;
+      border-bottom: 1px solid var(--catalogue-border);
+      background: var(--catalogue-bg);
+    }
+
+    .catalogue-home-link {
+      font-weight: 600;
+      color: var(--catalogue-text);
+      text-decoration: none;
+    }
+
+    .catalogue-home-link:hover {
+      color: var(--catalogue-primary);
+    }
+
+    /* Not found */
+    .catalogue-not-found {
+      max-width: 600px;
+      margin: 4rem auto;
+      text-align: center;
+      padding: 2rem;
+    }
+
+    .catalogue-not-found h1 {
+      font-size: 1.5rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .catalogue-not-found a {
+      color: var(--catalogue-primary);
+    }
+
+    /* Empty state */
+    .catalogue-empty-state {
+      grid-column: 1 / -1;
+      text-align: center;
+      padding: 3rem;
+      color: var(--catalogue-text);
+      opacity: 0.6;
+    }
+
+    /* Subcomponents */
+    .catalogue-subcomponents-section {
+      margin-top: 2rem;
+    }
+
+    .catalogue-subcomponents-section h2 {
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+    }
+
+    .catalogue-subcomponents-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    .catalogue-subcomponent-card {
+      padding: 1rem;
+      border: 1px solid var(--catalogue-border);
+      border-radius: 0.375rem;
+    }
+
+    .catalogue-subcomponent-card a {
+      color: var(--catalogue-primary);
+      text-decoration: none;
+      font-weight: 500;
+    }
+
+    .catalogue-subcomponent-card p {
+      margin: 0.5rem 0 0;
+      font-size: 0.875rem;
+      opacity: 0.7;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/@catalogue/entry.ts"><\/script>
+</body>
+</html>`;
+}
+const entryTemplate = `
+import { loadRegistry, mountCatalogueApp } from '@adieyal/catalogue-core';
+import { registryData, config } from 'virtual:catalogue-registry';
+
+// Import consumer's components
+import '{{COMPONENTS_ENTRY}}';
+
+// Load and validate the registry
+const { registry, errors } = loadRegistry(registryData);
+
+if (errors.length > 0) {
+  console.error('Registry validation errors:', errors);
+}
+
+// Mount the app
+const app = mountCatalogueApp('#app', registry, {
+  basePath: config.basePath,
+});
+
+// Hot module replacement
+if (import.meta.hot) {
+  import.meta.hot.accept('virtual:catalogue-registry', (newModule) => {
+    if (newModule) {
+      window.location.reload();
+    }
+  });
+}
+`;
+const VIRTUAL_ENTRY_ID = "@catalogue/entry.ts";
+const RESOLVED_VIRTUAL_ENTRY_ID = "\0" + VIRTUAL_ENTRY_ID;
+const VIRTUAL_ENTRY_PATH = "/@catalogue/entry.ts";
+function createViteConfig(config, mode) {
+  const componentsEntry = config.components?.entry ? resolve(config.configDir, config.components.entry) : resolve(config.configDir, "./src/components/index.ts");
+  return {
+    root: config.configDir,
+    base: config.basePath,
+    mode,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(mode)
+    },
+    plugins: [
+      cataloguePlugin({ config }),
+      {
+        name: "catalogue-entry",
+        enforce: "pre",
+        resolveId(id) {
+          if (id === VIRTUAL_ENTRY_ID || id === VIRTUAL_ENTRY_PATH || id.endsWith("@catalogue/entry.ts")) {
+            return RESOLVED_VIRTUAL_ENTRY_ID;
+          }
+        },
+        load(id) {
+          if (id === RESOLVED_VIRTUAL_ENTRY_ID) {
+            return entryTemplate.replace("{{COMPONENTS_ENTRY}}", componentsEntry);
+          }
+        }
+      },
+      {
+        name: "catalogue-html",
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (req.url === "/" || req.url?.startsWith("/?")) {
+              res.setHeader("Content-Type", "text/html");
+              server.transformIndexHtml("/", createHtmlTemplate(config)).then((html) => {
+                res.end(html);
+              });
+              return;
+            }
+            next();
+          });
+        },
+        // Only transform HTML in dev mode - production uses the written index.html
+        transformIndexHtml: {
+          order: "pre",
+          handler(html, ctx) {
+            if (ctx.server) {
+              return createHtmlTemplate(config);
+            }
+            return html;
+          }
+        }
+      }
+    ],
+    server: {
+      port: config.port
+    },
+    build: {
+      outDir: config.outPath,
+      emptyOutDir: true
+    },
+    ...config.vite || {}
+  };
+}
+async function startDevServer(config) {
+  const viteConfig = createViteConfig(config, "development");
+  const server = await createServer(viteConfig);
+  await server.listen();
+  server.printUrls();
+}
+async function buildStatic(config) {
+  const viteConfig = createViteConfig(config, "production");
+  const { writeFileSync: writeFileSync2, mkdirSync: mkdirSync2, existsSync: existsSync2 } = await import("node:fs");
+  const { join: join2 } = await import("node:path");
+  if (!existsSync2(config.configDir)) {
+    mkdirSync2(config.configDir, { recursive: true });
+  }
+  const componentsEntry = config.components?.entry ? resolve(config.configDir, config.components.entry) : resolve(config.configDir, "./src/components/index.ts");
+  const entryPath = join2(config.configDir, ".catalogue-entry.ts");
+  writeFileSync2(entryPath, entryTemplate.replace("{{COMPONENTS_ENTRY}}", componentsEntry));
+  const indexPath = join2(config.configDir, "index.html");
+  writeFileSync2(indexPath, createHtmlTemplate(config).replace(
+    "/@catalogue/entry.ts",
+    "./.catalogue-entry.ts"
+  ));
+  try {
+    await build$1(viteConfig);
+  } finally {
+    const { unlinkSync } = await import("node:fs");
+    try {
+      unlinkSync(indexPath);
+      unlinkSync(entryPath);
+    } catch {
+    }
+  }
+}
+async function startPreviewServer(config) {
+  const viteConfig = createViteConfig(config, "production");
+  const server = await preview$1({
+    ...viteConfig,
+    preview: {
+      port: config.port
+    }
+  });
+  server.printUrls();
+}
+async function dev(options = {}) {
+  console.log(pc.cyan("Starting development server..."));
+  try {
+    const config = await loadConfig({
+      configFile: options.config
+    });
+    if (options.port) {
+      config.port = options.port;
+    }
+    await startDevServer(config);
+  } catch (error) {
+    console.error(pc.red("Error starting dev server:"));
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+async function build(options = {}) {
+  console.log(pc.cyan("Building catalogue..."));
+  try {
+    const config = await loadConfig({
+      configFile: options.config
+    });
+    if (options.outDir) {
+      config.outPath = options.outDir;
+    }
+    await buildStatic(config);
+    console.log(pc.green(`✓ Built to ${config.outPath}`));
+  } catch (error) {
+    console.error(pc.red("Error building catalogue:"));
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+async function preview(options = {}) {
+  console.log(pc.cyan("Starting preview server..."));
+  try {
+    const config = await loadConfig({
+      configFile: options.config
+    });
+    if (options.port) {
+      config.port = options.port;
+    }
+    await startPreviewServer(config);
+  } catch (error) {
+    console.error(pc.red("Error starting preview server:"));
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+const ue = z.object({
+  /** Element tag name (e.g., 'div', 'my-component') */
+  element: z.string().min(1),
+  /** DOM attributes (set via setAttribute) */
+  attrs: z.record(z.union([z.string(), z.number(), z.boolean(), z.null()])).optional(),
+  /** DOM properties (set directly on element, for objects/arrays) */
+  props: z.record(z.unknown()).optional(),
+  /** Text content (mutually exclusive with children) */
+  text: z.string().optional()
+}), R = ue.extend({
+  /** Named slots - content to render with slot attribute */
+  slots: z.record(z.union([
+    z.string(),
+    z.lazy(() => R),
+    z.array(z.lazy(() => R))
+  ])).optional(),
+  /** Child elements */
+  children: z.array(z.lazy(() => R)).optional()
+});
+const pe = z.object({
+  type: z.literal("text"),
+  label: z.string().optional(),
+  defaultValue: z.string().optional(),
+  placeholder: z.string().optional()
+}), me = z.object({
+  type: z.literal("number"),
+  label: z.string().optional(),
+  defaultValue: z.number().optional(),
+  min: z.number().optional(),
+  max: z.number().optional(),
+  step: z.number().optional()
+}), he = z.object({
+  type: z.literal("boolean"),
+  label: z.string().optional(),
+  defaultValue: z.boolean().optional()
+}), ge = z.object({
+  type: z.literal("select"),
+  label: z.string().optional(),
+  defaultValue: z.string().optional(),
+  options: z.array(z.union([
+    z.string(),
+    z.object({
+      label: z.string(),
+      value: z.string()
+    })
+  ]))
+}), fe = z.object({
+  type: z.literal("radio"),
+  label: z.string().optional(),
+  defaultValue: z.string().optional(),
+  options: z.array(z.union([
+    z.string(),
+    z.object({
+      label: z.string(),
+      value: z.string()
+    })
+  ]))
+}), Ce = z.object({
+  type: z.literal("color"),
+  label: z.string().optional(),
+  defaultValue: z.string().optional()
+}), be = z.object({
+  type: z.literal("range"),
+  label: z.string().optional(),
+  defaultValue: z.number().optional(),
+  min: z.number(),
+  max: z.number(),
+  step: z.number().optional()
+}), ve = z.object({
+  type: z.literal("json"),
+  label: z.string().optional(),
+  defaultValue: z.unknown().optional()
+}), Z = z.discriminatedUnion("type", [
+  pe,
+  me,
+  he,
+  ge,
+  fe,
+  Ce,
+  be,
+  ve
+]);
+const ye = z.enum(["stable", "beta", "deprecated"]), Ee = z.enum(["standalone", "subcomponent", "feature"]), xe = z.object({
+  /** Custom element tag name (must be kebab-case with at least one hyphen) */
+  customElement: z.string().regex(/^[a-z][a-z0-9]*-[a-z0-9-]+$/, {
+    message: 'Custom element name must be kebab-case with at least one hyphen (e.g., "my-button")'
+  }),
+  /** npm package name (optional, defaults to consumer's package) */
+  package: z.string().optional(),
+  /** Entry point path (optional, defaults to main entry) */
+  entry: z.string().optional()
+}), we = z.object({
+  /** ID of the primary scenario to use as default in playground */
+  primaryScenarioId: z.string().min(1),
+  /** Control definitions keyed by property name */
+  controls: z.record(Z)
+}), Ne = z.object({
+  /** Unique identifier for the component (kebab-case) */
+  id: z.string().min(1).regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Component ID must be kebab-case starting with a letter"
+  }),
+  /** Human-readable title */
+  title: z.string().min(1),
+  /** Component maturity status */
+  status: ye,
+  /** Component kind */
+  kind: Ee,
+  /** Optional description */
+  description: z.string().optional(),
+  /** Tags for search and filtering */
+  tags: z.array(z.string()).optional(),
+  /** Category ID (must match a category defined in config) */
+  category: z.string().regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Category must be kebab-case starting with a letter"
+  }).optional(),
+  /** Export configuration */
+  exports: xe,
+  /** Playground configuration */
+  playground: we,
+  /** Parent component ID (required when kind is 'subcomponent') */
+  parentId: z.string().optional(),
+  /** List of subcomponent IDs */
+  subcomponents: z.array(z.string()).optional()
+}).refine(
+  (t) => !(t.kind === "subcomponent" && !t.parentId),
+  {
+    message: "Subcomponents must have a parentId",
+    path: ["parentId"]
+  }
+);
+function $e(t) {
+  const e = Ne.safeParse(t);
+  return e.success ? { success: true, data: e.data } : {
+    success: false,
+    errors: e.error.errors.map((a) => ({
+      path: a.path.join(".") || "(root)",
+      message: a.message
+    }))
+  };
+}
+const ee = z.object({
+  /** Unique identifier for the scenario (kebab-case) */
+  id: z.string().min(1).regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Scenario ID must be kebab-case starting with a letter"
+  }),
+  /** Human-readable title */
+  title: z.string().min(1),
+  /** Optional description explaining the scenario */
+  description: z.string().optional(),
+  /** Component ID this scenario belongs to */
+  componentId: z.string().min(1),
+  /** Tags for search and filtering */
+  tags: z.array(z.string()).optional(),
+  /** The RenderNode tree that defines the DOM structure */
+  render: R,
+  /** Optional viewport configuration for screenshots */
+  viewport: z.object({
+    width: z.number().positive().optional(),
+    height: z.number().positive().optional()
+  }).optional(),
+  /** Optional background color override */
+  background: z.string().optional(),
+  /** Whether this is the primary scenario (shown first) */
+  primary: z.boolean().optional()
+});
+function te(t) {
+  const e = ee.safeParse(t);
+  return e.success ? { success: true, data: e.data } : {
+    success: false,
+    errors: e.error.errors.map((a) => ({
+      path: a.path.join(".") || "(root)",
+      message: a.message
+    }))
+  };
+}
+function Se(t) {
+  return te(t);
+}
+function ft(t) {
+  const e = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+  for (const { filePath: s, data: i, docs: c } of t.components) {
+    const d = $e(i);
+    if (d.success) {
+      if (d.data) {
+        const u = d.data;
+        a.set(u.id, {
+          ...u,
+          filePath: s,
+          docs: c,
+          scenarios: []
+        });
+      }
+    } else for (const u of d.errors || [])
+      e.push({
+        file: s,
+        path: u.path,
+        message: u.message
+      });
+  }
+  for (const { filePath: s, data: i } of t.scenarios) {
+    const c = te(i);
+    if (c.success) {
+      if (c.data) {
+        const d = c.data, u = {
+          ...d,
+          filePath: s
+        };
+        o.set(d.id, u);
+        const h = a.get(d.componentId);
+        h && h.scenarios.push(u);
+      }
+    } else for (const d of c.errors || [])
+      e.push({
+        file: s,
+        path: d.path,
+        message: d.message
+      });
+  }
+  for (const { filePath: s, data: i } of t.examples) {
+    const c = Se(i);
+    if (c.success) {
+      if (c.data) {
+        const d = c.data;
+        n.set(d.id, {
+          ...d,
+          filePath: s
+        });
+      }
+    } else for (const d of c.errors || [])
+      e.push({
+        file: s,
+        path: d.path,
+        message: d.message
+      });
+  }
+  const r = t.categories ?? {
+    items: [],
+    uncategorisedLabel: "Other"
+  };
+  return {
+    registry: { components: a, scenarios: o, examples: n, categories: r },
+    errors: e
+  };
+}
+function bt(t) {
+  const e = [], a = [], o = /* @__PURE__ */ new Map();
+  for (const [n, r] of t.components)
+    o.has(n) || o.set(n, []), o.get(n).push(r.filePath);
+  for (const [n, r] of t.scenarios)
+    o.has(n) || o.set(n, []), o.get(n).push(r.filePath);
+  for (const [n, r] of t.examples)
+    o.has(n) || o.set(n, []), o.get(n).push(r.filePath);
+  for (const [n, r] of o)
+    r.length > 1 && e.push({
+      file: r.join(", "),
+      path: "id",
+      message: `Duplicate ID "${n}" found in multiple files`
+    });
+  for (const [n, r] of t.components) {
+    const s = r.playground.primaryScenarioId;
+    if (r.scenarios.some((c) => c.id === s) || e.push({
+      file: r.filePath,
+      path: "playground.primaryScenarioId",
+      message: `Primary scenario "${s}" not found for component "${n}"`
+    }), r.parentId && (t.components.has(r.parentId) || e.push({
+      file: r.filePath,
+      path: "parentId",
+      message: `Parent component "${r.parentId}" not found for component "${n}"`
+    })), r.subcomponents)
+      for (const c of r.subcomponents)
+        if (!t.components.has(c))
+          e.push({
+            file: r.filePath,
+            path: "subcomponents",
+            message: `Subcomponent "${c}" not found for component "${n}"`
+          });
+        else {
+          const d = t.components.get(c);
+          d.parentId !== n && a.push({
+            file: r.filePath,
+            path: "subcomponents",
+            message: `Subcomponent "${c}" has different parentId "${d.parentId}" than expected "${n}"`
+          });
+        }
+    r.scenarios.length === 0 && e.push({
+      file: r.filePath,
+      path: "scenarios",
+      message: `Component "${n}" has no scenarios`
+    });
+  }
+  for (const [n, r] of t.scenarios)
+    t.components.has(r.componentId) || e.push({
+      file: r.filePath,
+      path: "componentId",
+      message: `Component "${r.componentId}" not found for scenario "${n}"`
+    });
+  for (const [n, r] of t.examples)
+    t.components.has(r.componentId) || e.push({
+      file: r.filePath,
+      path: "componentId",
+      message: `Component "${r.componentId}" not found for example "${n}"`
+    });
+  return {
+    valid: e.length === 0,
+    errors: e,
+    warnings: a
+  };
+}
+function vt(t) {
+  const e = [];
+  if (t.errors.length > 0) {
+    e.push("Errors:");
+    for (const a of t.errors)
+      e.push(`  ${a.file}: ${a.path}: ${a.message}`);
+  }
+  if (t.warnings.length > 0) {
+    e.push("Warnings:");
+    for (const a of t.warnings)
+      e.push(`  ${a.file}: ${a.path}: ${a.message}`);
+  }
+  return e.join(`
+`);
+}
+function _(t, e) {
+  const a = new URLSearchParams();
+  e != null && e.theme && a.set("theme", e.theme), (e == null ? void 0 : e.width) !== void 0 && a.set("w", String(e.width)), (e == null ? void 0 : e.height) !== void 0 && a.set("h", String(e.height)), e != null && e.background && a.set("bg", e.background);
+  const o = a.toString();
+  return `/harness/${t}${o ? `?${o}` : ""}`;
+}
+function St(t, e) {
+  const a = [], o = ["light", "dark"], n = e || [
+    { width: 375, height: 667 },
+    // Mobile
+    { width: 1024, height: 768 }
+    // Desktop
+  ];
+  for (const [r, s] of t.scenarios) {
+    for (const i of o)
+      a.push({
+        scenarioId: r,
+        componentId: s.componentId,
+        url: _(r, { theme: i }),
+        theme: i
+      });
+    for (const i of n)
+      for (const c of o)
+        a.push({
+          scenarioId: r,
+          componentId: s.componentId,
+          url: _(r, {
+            theme: c,
+            width: i.width,
+            height: i.height
+          }),
+          theme: c,
+          width: i.width,
+          height: i.height
+        });
+  }
+  return a;
+}
+async function validate(options = {}) {
+  console.log(pc.cyan("Validating registry..."));
+  try {
+    const config = await loadConfig({
+      configFile: options.config
+    });
+    const rawData = loadRegistryFiles({ registryPath: config.registryPath });
+    const { registry, errors: parseErrors } = ft(rawData);
+    if (parseErrors.length > 0) {
+      console.log(pc.red("\nSchema validation errors:"));
+      for (const error of parseErrors) {
+        console.log(pc.red(`  ${error.file}: ${error.path}: ${error.message}`));
+      }
+    }
+    const crossRefResult = bt(registry);
+    if (!crossRefResult.valid) {
+      console.log(pc.red("\nCross-reference validation errors:"));
+      console.log(vt(crossRefResult));
+    }
+    if (crossRefResult.warnings.length > 0) {
+      console.log(pc.yellow("\nWarnings:"));
+      for (const warning of crossRefResult.warnings) {
+        console.log(pc.yellow(`  ${warning.file}: ${warning.path}: ${warning.message}`));
+      }
+    }
+    const componentCount = registry.components.size;
+    const scenarioCount = registry.scenarios.size;
+    const exampleCount = registry.examples.size;
+    console.log("");
+    console.log(pc.dim(`Found ${componentCount} component(s), ${scenarioCount} scenario(s), ${exampleCount} example(s)`));
+    if (parseErrors.length > 0 || !crossRefResult.valid) {
+      console.log(pc.red("\n✗ Validation failed"));
+      process.exit(1);
+    }
+    console.log(pc.green("\n✓ Registry is valid"));
+  } catch (error) {
+    console.error(pc.red("Error validating registry:"));
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+async function test(options = {}) {
+  console.log(pc.cyan("Running visual tests..."));
+  try {
+    const config = await loadConfig({
+      configFile: options.config
+    });
+    console.log(pc.dim("Validating registry..."));
+    const rawData = loadRegistryFiles({ registryPath: config.registryPath });
+    const { registry, errors: parseErrors } = ft(rawData);
+    if (parseErrors.length > 0) {
+      console.log(pc.red("Registry validation failed:"));
+      for (const error of parseErrors) {
+        console.log(pc.red(`  ${error.file}: ${error.path}: ${error.message}`));
+      }
+      process.exit(1);
+    }
+    const crossRefResult = bt(registry);
+    if (!crossRefResult.valid) {
+      console.log(pc.red("Cross-reference validation failed"));
+      process.exit(1);
+    }
+    console.log(pc.dim("Building catalogue..."));
+    await buildStatic(config);
+    const breakpoints = config.playwright?.breakpoints || [
+      { name: "mobile", width: 375, height: 667 },
+      { name: "desktop", width: 1024, height: 768 }
+    ];
+    const harnessUrls = St(
+      registry,
+      breakpoints.map((bp) => ({ width: bp.width, height: bp.height }))
+    );
+    const testDir = join(config.configDir, ".catalogue-tests");
+    if (!existsSync(testDir)) {
+      mkdirSync(testDir, { recursive: true });
+    }
+    const testFile = generatePlaywrightTest(harnessUrls, config);
+    const testFilePath = join(testDir, "visual.spec.ts");
+    writeFileSync(testFilePath, testFile);
+    const playwrightConfig = generatePlaywrightConfig(config, testDir);
+    const configFilePath = join(testDir, "playwright.config.ts");
+    writeFileSync(configFilePath, playwrightConfig);
+    console.log(pc.dim("Running Playwright tests..."));
+    const args = ["playwright", "test", "-c", configFilePath];
+    if (options.update) {
+      args.push("--update-snapshots");
+    }
+    if (options.headed) {
+      args.push("--headed");
+    }
+    const playwrightProcess = spawn("npx", args, {
+      cwd: config.configDir,
+      stdio: "inherit",
+      shell: true
+    });
+    playwrightProcess.on("close", (code) => {
+      if (code === 0) {
+        console.log(pc.green("\n✓ All visual tests passed"));
+      } else {
+        console.log(pc.red(`
+✗ Tests failed with code ${code}`));
+        process.exit(code || 1);
+      }
+    });
+  } catch (error) {
+    console.error(pc.red("Error running tests:"));
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+function generatePlaywrightTest(harnessUrls, config) {
+  const baseUrl = `http://localhost:${config.port}`;
+  return `
+import { test, expect } from '@playwright/test';
+
+const scenarios = ${JSON.stringify(harnessUrls, null, 2)};
+
+for (const scenario of scenarios) {
+  const testName = [
+    scenario.componentId,
+    scenario.scenarioId,
+    scenario.theme,
+    scenario.width ? \`\${scenario.width}x\${scenario.height}\` : 'default',
+  ].join('-');
+
+  test(testName, async ({ page }) => {
+    const url = '${baseUrl}#' + scenario.url;
+    await page.goto(url);
+
+    // Wait for component to render
+    await page.waitForSelector('[data-catalogue-container]');
+
+    // Take screenshot
+    const container = page.locator('[data-catalogue-container]');
+    await expect(container).toHaveScreenshot(\`\${testName}.png\`);
+  });
+}
+`;
+}
+function generatePlaywrightConfig(config, testDir) {
+  const screenshotDir = config.playwright?.screenshotDir ? resolve(config.configDir, config.playwright.screenshotDir) : join(config.configDir, "screenshots");
+  return `
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: '${testDir}',
+  snapshotDir: '${screenshotDir}',
+  snapshotPathTemplate: '{snapshotDir}/{testName}/{arg}{ext}',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:${config.port}',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npx vite preview --port ${config.port}',
+    port: ${config.port},
+    reuseExistingServer: !process.env.CI,
+    cwd: '${config.configDir}',
+  },
+});
+`;
+}
+async function newComponent(componentId, options = {}) {
+  if (!componentId) {
+    console.error(pc.red("Error: Component ID is required"));
+    console.log("Usage: catalogue new <component-id>");
+    process.exit(1);
+  }
+  if (!/^[a-z][a-z0-9-]*$/.test(componentId)) {
+    console.error(pc.red("Error: Component ID must be kebab-case starting with a letter"));
+    console.log("Example: my-button, data-table, user-card");
+    process.exit(1);
+  }
+  try {
+    const config = await loadConfig({
+      configFile: options.config
+    });
+    const componentDir = join(config.registryPath, "components", componentId);
+    const scenariosDir = join(componentDir, "scenarios");
+    if (existsSync(componentDir)) {
+      console.error(pc.red(`Error: Component "${componentId}" already exists at ${componentDir}`));
+      process.exit(1);
+    }
+    mkdirSync(scenariosDir, { recursive: true });
+    const customElement = componentId.includes("-") ? componentId : `x-${componentId}`;
+    const title = options.title || componentId.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+    const status = options.status || "beta";
+    const kind = options.kind || "standalone";
+    const scenarioId = `${componentId}-default`;
+    const componentJson = {
+      id: componentId,
+      title,
+      status,
+      kind,
+      description: `TODO: Add description for ${title}`,
+      tags: [],
+      exports: {
+        customElement
+      },
+      playground: {
+        primaryScenarioId: scenarioId,
+        controls: {
+          // Example controls - customize as needed
+        }
+      }
+    };
+    writeFileSync(
+      join(componentDir, "component.json"),
+      JSON.stringify(componentJson, null, 2) + "\n"
+    );
+    const scenarioJson = {
+      id: scenarioId,
+      title: "Default",
+      description: `Default state of ${title}`,
+      componentId,
+      primary: true,
+      render: {
+        element: customElement,
+        attrs: {},
+        slots: {
+          default: `${title} content`
+        }
+      }
+    };
+    writeFileSync(
+      join(scenariosDir, "default.json"),
+      JSON.stringify(scenarioJson, null, 2) + "\n"
+    );
+    const docsMd = `# ${title}
+
+TODO: Add description for ${title}.
+
+## Usage
+
+\`\`\`html
+<${customElement}>Content</${customElement}>
+\`\`\`
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| | | | |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| default | Main content |
+
+## Examples
+
+### Basic
+
+\`\`\`html
+<${customElement}>
+  Hello World
+</${customElement}>
+\`\`\`
+`;
+    writeFileSync(join(componentDir, "docs.md"), docsMd);
+    const componentTs = `/**
+ * ${title} Web Component
+ */
+
+export class ${toPascalCase(componentId)} extends HTMLElement {
+  static get observedAttributes() {
+    return [];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  private render() {
+    this.shadowRoot!.innerHTML = \`
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <div class="${componentId}">
+        <slot></slot>
+      </div>
+    \`;
+  }
+}
+
+customElements.define('${customElement}', ${toPascalCase(componentId)});
+`;
+    const srcDir = join(config.configDir, "src", "components");
+    if (existsSync(srcDir)) {
+      const componentSrcPath = join(srcDir, `${componentId}.ts`);
+      if (!existsSync(componentSrcPath)) {
+        writeFileSync(componentSrcPath, componentTs);
+        console.log(pc.green(`✓ Created ${pc.bold(`src/components/${componentId}.ts`)}`));
+        console.log(pc.yellow(`  → Add to src/components/index.ts: export * from './${componentId}.js';`));
+      }
+    }
+    console.log(pc.green(`
+✓ Created component "${componentId}":`));
+    console.log(pc.dim(`  ${componentDir}/`));
+    console.log(`    ├── component.json`);
+    console.log(`    ├── docs.md`);
+    console.log(`    └── scenarios/`);
+    console.log(`        └── default.json`);
+    console.log(pc.cyan("\nNext steps:"));
+    console.log(`  1. Edit ${pc.bold("component.json")} to add controls`);
+    console.log(`  2. Edit ${pc.bold("docs.md")} to add documentation`);
+    console.log(`  3. Add more scenarios in ${pc.bold("scenarios/")}`);
+    console.log(`  4. Run ${pc.bold("catalogue validate")} to verify`);
+    console.log(`  5. Run ${pc.bold("catalogue dev")} to preview`);
+  } catch (error) {
+    console.error(pc.red("Error creating component:"));
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}
+function toPascalCase(str) {
+  return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+async function init(options = {}) {
+  const cwd = process.cwd();
+  const projectName = options.name || "my-component-catalogue";
+  console.log(pc.cyan(`
+Initializing component catalogue...
+`));
+  const configFiles = ["catalogue.config.ts", "catalogue.config.js", "catalogue.config.mjs"];
+  const existingConfig = configFiles.find((f) => existsSync(resolve(cwd, f)));
+  if (existingConfig && !options.force) {
+    console.log(pc.yellow(`Found existing ${existingConfig}. Use --force to overwrite.
+`));
+    return;
+  }
+  const dirs = [
+    "registry/components",
+    "registry/examples",
+    "src/components",
+    "screenshots"
+  ];
+  for (const dir of dirs) {
+    const dirPath = resolve(cwd, dir);
+    if (!existsSync(dirPath)) {
+      mkdirSync(dirPath, { recursive: true });
+      console.log(pc.green(`  Created ${dir}/`));
+    }
+  }
+  const configContent = `import type { CatalogueConfig } from '@adieyal/catalogue-cli';
+
+export default {
+  name: '${projectName}',
+  registryDir: './registry',
+  componentLoader: () => import('./src/components/index.js'),
+  playwright: {
+    breakpoints: [
+      { name: 'mobile', width: 375, height: 667 },
+      { name: 'tablet', width: 768, height: 1024 },
+      { name: 'desktop', width: 1280, height: 800 },
+    ],
+    themes: ['light', 'dark'],
+    screenshotDir: './screenshots',
+  },
+} satisfies CatalogueConfig;
+`;
+  writeFileSync(resolve(cwd, "catalogue.config.ts"), configContent);
+  console.log(pc.green(`  Created catalogue.config.ts`));
+  const componentsIndexContent = `// Export your web components here
+// Example:
+// export * from './button.js';
+// export * from './card.js';
+`;
+  writeFileSync(resolve(cwd, "src/components/index.ts"), componentsIndexContent);
+  console.log(pc.green(`  Created src/components/index.ts`));
+  const sampleComponentDir = resolve(cwd, "registry/components/sample-button");
+  mkdirSync(sampleComponentDir, { recursive: true });
+  mkdirSync(resolve(sampleComponentDir, "scenarios"), { recursive: true });
+  const componentJson = {
+    id: "sample-button",
+    title: "Sample Button",
+    status: "beta",
+    kind: "standalone",
+    description: "A sample button component to get you started.",
+    tags: ["form", "interactive"],
+    playground: {
+      primaryScenarioId: "sample-button-default"
+    }
+  };
+  writeFileSync(
+    resolve(sampleComponentDir, "component.json"),
+    JSON.stringify(componentJson, null, 2)
+  );
+  const docsContent = `# Sample Button
+
+This is a sample button component to help you get started.
+
+## Usage
+
+\`\`\`html
+<sample-button variant="primary">Click me</sample-button>
+\`\`\`
+
+## Features
+
+- Multiple variants (primary, secondary, outline)
+- Disabled state
+- Click handling
+
+Delete this component and create your own using \`catalogue new <component-id>\`.
+`;
+  writeFileSync(resolve(sampleComponentDir, "docs.md"), docsContent);
+  const scenarioJson = {
+    id: "sample-button-default",
+    componentId: "sample-button",
+    title: "Default",
+    description: "Default button appearance",
+    render: {
+      element: "sample-button",
+      attributes: {
+        variant: "primary"
+      },
+      slots: {
+        default: "Click me"
+      }
+    }
+  };
+  writeFileSync(
+    resolve(sampleComponentDir, "scenarios/default.json"),
+    JSON.stringify(scenarioJson, null, 2)
+  );
+  console.log(pc.green(`  Created sample-button component`));
+  const sampleButtonTs = `export class SampleButton extends HTMLElement {
+  static observedAttributes = ['variant', 'disabled'];
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'primary';
+  }
+
+  get disabled() {
+    return this.hasAttribute('disabled');
+  }
+
+  render() {
+    const styles = \`
+      :host {
+        display: inline-block;
+      }
+      button {
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: 2px solid transparent;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      button.primary {
+        background: #3b82f6;
+        color: white;
+      }
+      button.primary:hover:not(:disabled) {
+        background: #2563eb;
+      }
+      button.secondary {
+        background: #6b7280;
+        color: white;
+      }
+      button.secondary:hover:not(:disabled) {
+        background: #4b5563;
+      }
+      button.outline {
+        background: transparent;
+        border-color: #3b82f6;
+        color: #3b82f6;
+      }
+      button.outline:hover:not(:disabled) {
+        background: #3b82f6;
+        color: white;
+      }
+    \`;
+
+    this.shadowRoot!.innerHTML = \`
+      <style>\${styles}</style>
+      <button class="\${this.variant}" \${this.disabled ? 'disabled' : ''}>
+        <slot></slot>
+      </button>
+    \`;
+  }
+}
+
+customElements.define('sample-button', SampleButton);
+`;
+  writeFileSync(resolve(cwd, "src/components/sample-button.ts"), sampleButtonTs);
+  console.log(pc.green(`  Created src/components/sample-button.ts`));
+  writeFileSync(
+    resolve(cwd, "src/components/index.ts"),
+    `export * from './sample-button.js';
+`
+  );
+  const packageJsonPath = resolve(cwd, "package.json");
+  let packageJson = {};
+  if (existsSync(packageJsonPath)) {
+    packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+  }
+  packageJson.scripts = {
+    ...packageJson.scripts || {},
+    "catalogue": "catalogue dev",
+    "catalogue:build": "catalogue build",
+    "catalogue:preview": "catalogue preview",
+    "catalogue:validate": "catalogue validate",
+    "catalogue:test": "catalogue test"
+  };
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n");
+  console.log(pc.green(`  Updated package.json scripts`));
+  const tsconfigPath = resolve(cwd, "tsconfig.json");
+  if (!existsSync(tsconfigPath)) {
+    const tsconfig = {
+      compilerOptions: {
+        target: "ES2022",
+        module: "ESNext",
+        moduleResolution: "bundler",
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        declaration: true,
+        outDir: "./dist",
+        rootDir: "./src"
+      },
+      include: ["src/**/*", "catalogue.config.ts"],
+      exclude: ["node_modules", "dist"]
+    };
+    writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2) + "\n");
+    console.log(pc.green(`  Created tsconfig.json`));
+  }
+  const gitignorePath = resolve(cwd, ".gitignore");
+  const gitignoreAdditions = `
+# Catalogue
+.catalogue-tests/
+playwright-report/
+test-results/
+`;
+  if (existsSync(gitignorePath)) {
+    const existing = readFileSync(gitignorePath, "utf-8");
+    if (!existing.includes(".catalogue-tests")) {
+      writeFileSync(gitignorePath, existing + gitignoreAdditions);
+      console.log(pc.green(`  Updated .gitignore`));
+    }
+  } else {
+    writeFileSync(gitignorePath, `node_modules/
+dist/
+${gitignoreAdditions}`);
+    console.log(pc.green(`  Created .gitignore`));
+  }
+  if (options.withClaude) {
+    const claudeSkillsDir = resolve(cwd, ".claude/skills");
+    mkdirSync(claudeSkillsDir, { recursive: true });
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const packageSkillsDir = resolve(__dirname, "../../skills");
+    if (existsSync(packageSkillsDir)) {
+      const skillFiles = readdirSync(packageSkillsDir).filter((f) => f.endsWith(".md"));
+      for (const file of skillFiles) {
+        const content = readFileSync(resolve(packageSkillsDir, file), "utf-8");
+        writeFileSync(resolve(claudeSkillsDir, file), content);
+      }
+      console.log(pc.green(`  Created .claude/skills/ (${skillFiles.length} skills)`));
+    } else {
+      installEmbeddedSkills(claudeSkillsDir);
+      console.log(pc.green(`  Created .claude/skills/`));
+    }
+  }
+  console.log(pc.cyan(`
+✓ Component catalogue initialized!
+`));
+  console.log(`Next steps:
+`);
+  console.log(`  1. Install dependencies:`);
+  console.log(pc.gray(`     npm install @adieyal/catalogue-cli @adieyal/catalogue-core
+`));
+  console.log(`  2. Start the dev server:`);
+  console.log(pc.gray(`     npm run catalogue
+`));
+  console.log(`  3. Create your first component:`);
+  console.log(pc.gray(`     npx catalogue new my-component
+`));
+  if (options.withClaude) {
+    console.log(`  Claude Code skills installed. Available commands:`);
+    console.log(pc.gray(`     /new-component <id>       - Create a new component`));
+    console.log(pc.gray(`     /new-scenario <id> <name> - Add a scenario`));
+    console.log(pc.gray(`     /document-component <id>  - Generate docs`));
+    console.log(pc.gray(`     /migrate-library [path]   - Migrate existing library`));
+    console.log(pc.gray(`     /setup-tokens [path]      - Configure design tokens
+`));
+  }
+}
+function installEmbeddedSkills(skillsDir) {
+  const skills = {
+    "new-component.md": `# Create New Component
+
+Create a new component entry in the catalogue registry.
+
+## Arguments
+
+- \`$ARGUMENTS\` - Component ID (kebab-case, e.g., \`user-avatar\`)
+
+## Instructions
+
+1. Parse the component ID from \`$ARGUMENTS\`. If empty, ask the user for a component ID (must be kebab-case).
+
+2. Derive the component title by converting kebab-case to Title Case (e.g., \`user-avatar\` → \`User Avatar\`).
+
+3. Ask the user:
+   - What is the component's purpose/description?
+   - What status? (stable, beta, deprecated) - default: beta
+   - What kind? (standalone, subcomponent, feature) - default: standalone
+   - What tags apply? (e.g., form, layout, navigation, feedback)
+
+4. Create the directory structure:
+   - \`registry/components/<id>/\`
+   - \`registry/components/<id>/scenarios/\`
+
+5. Create \`registry/components/<id>/component.json\`:
+
+\`\`\`json
+{
+  "id": "<component-id>",
+  "title": "<Component Title>",
+  "status": "<status>",
+  "kind": "<kind>",
+  "description": "<description>",
+  "tags": [<tags>],
+  "playground": {
+    "primaryScenarioId": "<component-id>-default"
+  }
+}
+\`\`\`
+
+6. Create \`registry/components/<id>/docs.md\`:
+
+\`\`\`markdown
+# <Component Title>
+
+<description>
+
+## Usage
+
+\\<\\<component-id>>\\</\\<component-id>>
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| default | Main content |
+\`\`\`
+
+7. Create \`registry/components/<id>/scenarios/default.json\`:
+
+\`\`\`json
+{
+  "id": "<component-id>-default",
+  "componentId": "<component-id>",
+  "title": "Default",
+  "description": "Default appearance",
+  "render": {
+    "element": "<component-id>",
+    "slots": {
+      "default": "Content"
+    }
+  }
+}
+\`\`\`
+
+8. Create \`src/components/<id>.ts\` with a Web Component class:
+   - Class name: PascalCase version of the ID (e.g., \`user-avatar\` → \`UserAvatar\`)
+   - Use Shadow DOM with \`mode: 'open'\`
+   - Include basic styles and a slot
+
+9. Update \`src/components/index.ts\` to add:
+\`\`\`typescript
+export * from './<component-id>.js';
+\`\`\`
+
+10. Run \`npx catalogue validate\` to verify.
+
+11. Tell the user what was created and suggest:
+    - Adding properties to the component
+    - Creating more scenarios
+    - Updating the docs
+`,
+    "new-scenario.md": `# Create New Scenario
+
+Add a new scenario to an existing component.
+
+## Arguments
+
+- \`$ARGUMENTS\` - Format: \`<component-id> <scenario-name>\` (e.g., \`button disabled\`)
+
+## Instructions
+
+1. Parse arguments from \`$ARGUMENTS\`:
+   - First word: component ID
+   - Remaining words: scenario name
+   - If missing, ask the user for component ID and scenario name
+
+2. Verify the component exists at \`registry/components/<component-id>/component.json\`. If not, list available components and ask user to choose.
+
+3. Generate scenario ID: \`<component-id>-<scenario-name-kebab>\` (e.g., \`button-disabled\`)
+
+4. Ask the user:
+   - Brief description of this scenario
+   - What attributes/properties should be set?
+   - What slot content should be shown?
+   - Any custom viewport size? (optional)
+   - Any custom background color? (optional)
+
+5. Create \`registry/components/<component-id>/scenarios/<scenario-name-kebab>.json\`:
+
+\`\`\`json
+{
+  "id": "<scenario-id>",
+  "componentId": "<component-id>",
+  "title": "<Scenario Title>",
+  "description": "<description>",
+  "render": {
+    "element": "<component-id>",
+    "attributes": {
+      // based on user input
+    },
+    "slots": {
+      "default": "<slot content>"
+    }
+  }
+}
+\`\`\`
+
+Include optional fields only if provided:
+- \`"viewport": { "width": <w>, "height": <h> }\`
+- \`"background": "<color>"\`
+
+6. Run \`npx catalogue validate\` to verify.
+
+7. Tell the user:
+   - Scenario created at \`registry/components/<id>/scenarios/<name>.json\`
+   - View it at \`http://localhost:5173/#/harness/<scenario-id>\`
+   - Suggest running \`npm run catalogue\` to see it
+`,
+    "document-component.md": `# Document Component
+
+Generate or improve documentation for a component by analyzing its source code.
+
+## Arguments
+
+- \`$ARGUMENTS\` - Component ID (e.g., \`button\`)
+
+## Instructions
+
+1. Parse component ID from \`$ARGUMENTS\`. If empty, list components in \`registry/components/\` and ask user to choose.
+
+2. Read the component source file at \`src/components/<id>.ts\` (or \`.js\`).
+
+3. Analyze the source code to extract:
+   - \`static observedAttributes\` → Properties
+   - Getter/setter pairs → Properties with types
+   - \`<slot>\` elements → Available slots
+   - \`this.dispatchEvent()\` calls → Events
+   - Any JSDoc comments
+
+4. Read existing docs at \`registry/components/<id>/docs.md\`.
+
+5. Read \`registry/components/<id>/component.json\` for title and description.
+
+6. Generate improved documentation with sections for Usage, Properties, Slots, Events, Examples, and Accessibility.
+
+7. Show the user the generated docs and ask if they want to:
+   - Replace existing docs entirely
+   - Merge with existing docs
+   - Just see the output without saving
+
+8. If saving, write to \`registry/components/<id>/docs.md\`.
+
+9. Suggest creating scenarios for any documented states/variants not yet covered.
+`,
+    "migrate-library.md": `# Migrate Existing Component Library
+
+Guide migration of an existing component library to use the catalogue.
+
+## Arguments
+
+- \`$ARGUMENTS\` - Optional: path to components directory (e.g., \`src/components\`)
+
+## Instructions
+
+Follow this phased approach. Do NOT try to "port everything" at once.
+
+### Phase 1: Assess the Library
+
+1. If \`$ARGUMENTS\` provided, scan that directory. Otherwise, look for common patterns:
+   - \`src/components/\`
+   - \`lib/components/\`
+   - \`packages/*/src/\`
+
+2. List all components found (custom elements, web components, or framework components).
+
+3. Check how components are currently registered:
+   - Side-effect registration on import?
+   - Manual \`customElements.define()\` calls?
+
+4. Check for existing: design tokens, theme support, documentation, demo pages.
+
+5. Report findings to user before proceeding.
+
+### Phase 2: Create Registration Entrypoint
+
+Create \`src/register-all.ts\` that imports all components:
+
+\`\`\`typescript
+import './components/button/button';
+import './components/card/card';
+\`\`\`
+
+Update \`catalogue.config.ts\` to point to this entrypoint.
+
+### Phase 3: Generate Seed Registry
+
+For EACH component, create minimal registry files:
+- \`registry/components/<id>/component.json\`
+- \`registry/components/<id>/scenarios/default.json\`
+- \`registry/components/<id>/docs.md\`
+
+Rules: 1 scenario per component is enough initially. Use default props.
+
+### Phase 4: Add Critical Variants (2-5 per component)
+
+- Default/primary state
+- Disabled/loading (if applicable)
+- Dense case (long labels, overflow)
+- Responsive stress (narrow container)
+
+Do NOT create scenarios for every prop combination.
+
+### Phase 5: Establish Hierarchy
+
+- \`standalone\` - User-facing components
+- \`subcomponent\` - Internal pieces (add \`parentId\`)
+- \`feature\` - Complex composites
+
+### Phase 6: Validate
+
+Run \`npx catalogue validate\` and \`npx catalogue dev\`.
+
+### Migration Tips
+
+**Components requiring app context:** Create wrapper scenarios that provide context.
+
+**Components that fetch data:** Add prop to accept data directly. Scenarios must NOT make network calls.
+
+**Container queries:** Recommend \`@container\` for component internals, \`@media\` for page layout. The catalogue resizer tests container width, not viewport.
+
+### What "Done" Looks Like
+
+- Every component has a primary scenario
+- Key components have 3-5 variants
+- Playground works for top 20% of components
+- Old demo pages can be deleted
+`,
+    "setup-tokens.md": `# Setup Design Tokens
+
+Configure design tokens for the catalogue so components render with correct styling.
+
+## Arguments
+
+- \`$ARGUMENTS\` - Optional: path to tokens file (e.g., \`src/tokens/tokens.css\`)
+
+## Instructions
+
+### Step 1: Identify Token Source
+
+Search for: \`**/tokens.css\`, \`**/variables.css\`, \`**/theme.css\`, \`**/design-tokens.json\`
+
+Ask user to confirm the correct path.
+
+### Step 2: Identify Themes
+
+Check for:
+- Separate files: \`tokens-light.css\`, \`tokens-dark.css\`
+- Selectors: \`[data-theme="dark"]\`, \`.dark-theme\`
+
+### Step 3: Update Configuration
+
+**Single theme:**
+\`\`\`typescript
+export default {
+  themes: {
+    tokenCss: './src/tokens/tokens.css',
+  }
+}
+\`\`\`
+
+**Multiple themes:**
+\`\`\`typescript
+export default {
+  themes: {
+    default: 'light',
+    available: ['light', 'dark'],
+    tokenCss: {
+      light: './src/tokens/tokens-light.css',
+      dark: './src/tokens/tokens-dark.css',
+    }
+  }
+}
+\`\`\`
+
+### Step 4: Scope Decision
+
+**Model A - Global tokens (recommended):** Tokens apply to entire document.
+
+**Model B - Scoped tokens:** Tokens apply only inside preview frame. Better if tokens use generic names (\`--text\`, \`--bg\`).
+
+### Step 5: Container Query Setup
+
+Ensure preview frame has:
+\`\`\`css
+.preview-frame {
+  container-type: inline-size;
+}
+\`\`\`
+
+Tell user: "Components should use \`@container\` queries for internal responsiveness, not \`@media\` queries."
+
+### Step 6: Verify
+
+1. Run \`npx catalogue dev\`
+2. Check components render with correct colors, typography, spacing
+3. Toggle themes and verify switching works
+4. Resize preview frame and verify container queries respond
+`
+  };
+  for (const [filename, content] of Object.entries(skills)) {
+    writeFileSync(resolve(skillsDir, filename), content);
+  }
+}
+export {
+  CatalogueConfigSchema as C,
+  getRegistryWatchPaths as a,
+  createHtmlTemplate as b,
+  cataloguePlugin as c,
+  buildStatic as d,
+  startPreviewServer as e,
+  dev as f,
+  generateRegistryModule as g,
+  build as h,
+  init as i,
+  validateConfig as j,
+  loadConfig as k,
+  loadRegistryFiles as l,
+  createDefaultConfig as m,
+  newComponent as n,
+  preview as p,
+  startDevServer as s,
+  test as t,
+  validate as v
+};
+//# sourceMappingURL=init-CI0WzrG1.js.map