@proto.ui/cli 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Proto UI Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @proto.ui/cli
+
+Local CLI package for generating Proto UI Tailwind assets.
+
+## Commands
+
+- `proto-ui tokens --input <dir> --out <file>`
+- `proto-ui tailwindcss --out <file> [--theme-import <path>] [--tokens-import <path>]`
+- `proto-ui theme shadcn --out <file>`

package/bin/proto-ui.mjs

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import { run } from '../src/cli.mjs';
+
+run(process.argv.slice(2)).catch((error) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error(`[proto-ui] ${message}`);
+  process.exit(1);
+});

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,290 @@
+#!/usr/bin/env node
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs } from 'node:util';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+async function readPackageVersion() {
+    const pkgPath = join(__dirname, '..', 'package.json');
+    const raw = await readFile(pkgPath, 'utf8');
+    const pkg = JSON.parse(raw);
+    return pkg.version ?? '0.0.0';
+}
+function printHelp(version) {
+    console.log(`@proto-ui/cli v${version}
+
+用法:
+  npx @proto-ui/cli <command> [options]
+
+命令:
+  init              在当前目录创建 proto-ui/ 目录结构
+  add <adapter> <prototype>
+                    登记要添加的组件（完整生成流程后续版本提供）
+  help, --help, -h  显示本说明
+  version, --version, -v
+                    打印版本号
+
+示例:
+  npx @proto-ui/cli init
+  npx @proto-ui/cli add react shadcn-button
+`);
+}
+async function cmdInit(cwd) {
+    const root = join(cwd, 'proto-ui');
+    if (existsSync(root)) {
+        console.error('proto-ui/ 已存在，跳过创建。如需重建请先手动删除该目录。');
+        process.exitCode = 1;
+        return;
+    }
+    const subdirs = ['adapters', 'prototypes', 'components'];
+    for (const d of subdirs) {
+        await mkdir(join(root, d), { recursive: true });
+    }
+    // Make proto-ui/ a local file dependency so users can import `proto-ui/components`
+    const localPkgJson = {
+        name: 'proto-ui',
+        version: '0.0.0',
+        private: true,
+        type: 'module',
+        exports: {
+            './components': {
+                types: './components/index.d.ts',
+                default: './components/index.js',
+            },
+        },
+    };
+    await writeFile(join(root, 'package.json'), JSON.stringify(localPkgJson, null, 2) + '\n', 'utf8');
+    const componentsIndexJs = `export * from './generated.js';\n`;
+    const componentsGeneratedJs = `// generated by @proto-ui/cli\nexport {};\n`;
+    await writeFile(join(root, 'components', 'index.js'), componentsIndexJs, 'utf8');
+    await writeFile(join(root, 'components', 'generated.js'), componentsGeneratedJs, 'utf8');
+    const componentsIndexDts = `export * from './generated';\n`;
+    const componentsGeneratedDts = `// generated by @proto-ui/cli\nexport {};\n`;
+    await writeFile(join(root, 'components', 'index.d.ts'), componentsIndexDts, 'utf8');
+    await writeFile(join(root, 'components', 'generated.d.ts'), componentsGeneratedDts, 'utf8');
+    const readme = `# Proto UI（由 @proto-ui/cli init 生成）
+
+- adapters/ — 当前项目使用的适配器
+- prototypes/ — 安装的原型
+- components/ — 组装后的组件入口
+
+这些内容通常由 CLI 维护；直接编辑前请查阅文档。
+`;
+    await writeFile(join(root, 'README.md'), readme, 'utf8');
+    console.log(`已创建 ${subdirs.map((d) => `proto-ui/${d}/`).join('、')}`);
+    console.log('下一步: 将本地包 proto-ui 挂到你的项目依赖里（推荐 file:）。');
+    console.log('例如（pnpm）: pnpm add -D \"proto-ui@file:./proto-ui\"');
+    console.log('然后你就可以: import { ... } from \"proto-ui/components\"');
+}
+const vuePrototypeMap = {
+    // shadcn
+    'shadcn-button': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnButton',
+        componentExportName: 'Button',
+    },
+    'shadcn-toggle': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnToggle',
+        componentExportName: 'Toggle',
+    },
+    'shadcn-switch-root': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnSwitchRoot',
+        componentExportName: 'SwitchRoot',
+    },
+    'shadcn-switch-thumb': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnSwitchThumb',
+        componentExportName: 'SwitchThumb',
+    },
+    'shadcn-tabs-root': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnTabsRoot',
+        componentExportName: 'TabsRoot',
+    },
+    'shadcn-tabs-list': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnTabsList',
+        componentExportName: 'TabsList',
+    },
+    'shadcn-tabs-trigger': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnTabsTrigger',
+        componentExportName: 'TabsTrigger',
+    },
+    'shadcn-tabs-content': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnTabsContent',
+        componentExportName: 'TabsContent',
+    },
+    'shadcn-hover-card-root': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnHoverCardRoot',
+        componentExportName: 'HoverCardRoot',
+    },
+    'shadcn-hover-card-trigger': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnHoverCardTrigger',
+        componentExportName: 'HoverCardTrigger',
+    },
+    'shadcn-hover-card-content': {
+        lib: '@prototype-libs/shadcn',
+        libExportName: 'shadcnHoverCardContent',
+        componentExportName: 'HoverCardContent',
+    },
+    // base
+    'base-button': {
+        lib: '@prototype-libs/base',
+        libExportName: 'button',
+        componentExportName: 'BaseButton',
+    },
+};
+function buildVueGeneratedJs(resolved) {
+    if (resolved.length === 0)
+        return `// generated by @proto-ui/cli\nexport {};\n`;
+    // manifest 可能会因为重复 add 产生重复请求；在生成阶段按导出名去重，避免重复导出导致的错误
+    const byExportName = new Map();
+    for (const r of resolved) {
+        if (!byExportName.has(r.componentExportName))
+            byExportName.set(r.componentExportName, r);
+    }
+    const dedupedResolved = Array.from(byExportName.values());
+    const exportNames = dedupedResolved.map((r) => r.componentExportName);
+    const byLib = new Map();
+    for (const r of dedupedResolved) {
+        if (!byLib.has(r.lib))
+            byLib.set(r.lib, new Set());
+        byLib.get(r.lib).add(r.libExportName);
+    }
+    const libImports = Array.from(byLib.entries())
+        .map(([lib, exportsSet]) => {
+        const list = Array.from(exportsSet).sort((a, b) => a.localeCompare(b));
+        return `import { ${list.join(', ')} } from '${lib}';`;
+    })
+        .join('\n');
+    const resolvedSorted = dedupedResolved.sort((a, b) => a.componentExportName.localeCompare(b.componentExportName));
+    const lines = [];
+    lines.push(`import { createVueAdapter } from '@proto-ui/adapters.vue';`);
+    lines.push(`import * as Vue from 'vue';`);
+    lines.push(libImports);
+    lines.push('');
+    lines.push(`const AdaptToVue = createVueAdapter(Vue);`);
+    lines.push('');
+    for (const r of resolvedSorted) {
+        lines.push(`const ${r.componentExportName} = AdaptToVue(${r.libExportName});`);
+    }
+    lines.push('');
+    lines.push(`export { ${resolvedSorted.map((r) => r.componentExportName).join(', ')} };`);
+    lines.push('');
+    return lines.join('\n');
+}
+function buildVueGeneratedDts(resolved) {
+    if (resolved.length === 0)
+        return `// generated by @proto-ui/cli\nexport {};\n`;
+    const names = Array.from(new Set(resolved.map((r) => r.componentExportName))).sort((a, b) => a.localeCompare(b));
+    return (`// generated by @proto-ui/cli\n` + names.map((n) => `export const ${n}: any;`).join('\n') + '\n');
+}
+async function cmdAdd(cwd, adapter, prototype) {
+    const root = join(cwd, 'proto-ui');
+    if (!existsSync(root)) {
+        console.error('未找到 proto-ui/。请先运行: npx @proto-ui/cli init');
+        process.exitCode = 1;
+        return;
+    }
+    const manifestPath = join(root, 'manifest.json');
+    let manifest = { requests: [] };
+    if (existsSync(manifestPath)) {
+        try {
+            const parsed = JSON.parse(await readFile(manifestPath, 'utf8'));
+            if (parsed?.requests && Array.isArray(parsed.requests)) {
+                manifest = parsed;
+            }
+        }
+        catch {
+            // ignore corrupt manifest
+        }
+    }
+    manifest.requests.push({
+        adapter,
+        prototype,
+        addedAt: new Date().toISOString(),
+    });
+    await writeFile(manifestPath, JSON.stringify(manifest, null, 2) + '\n', 'utf8');
+    console.log(`已记录: ${adapter} / ${prototype}（写入 proto-ui/manifest.json）`);
+    if (adapter === 'vue') {
+        const resolved = [];
+        for (const req of manifest.requests) {
+            if (req.adapter !== 'vue')
+                continue;
+            const map = vuePrototypeMap[req.prototype];
+            if (!map) {
+                const available = Object.keys(vuePrototypeMap).join(', ');
+                throw new Error(`[@proto-ui/cli] 未知原型: ${req.prototype}\n可用 Vue 原型: ${available}`);
+            }
+            resolved.push(map);
+        }
+        const generatedJs = buildVueGeneratedJs(resolved);
+        const generatedDts = buildVueGeneratedDts(resolved);
+        await writeFile(join(root, 'components', 'generated.js'), generatedJs, 'utf8');
+        await writeFile(join(root, 'components', 'generated.d.ts'), generatedDts, 'utf8');
+        // 显式导出，减少 TS/IDE 在 re-export 场景下的缓存/解析不一致问题
+        const exportedNames = Array.from(new Set(resolved.map((r) => r.componentExportName))).sort((a, b) => a.localeCompare(b));
+        const indexDts = `export { ${exportedNames.join(', ')} } from './generated';\n`;
+        await writeFile(join(root, 'components', 'index.d.ts'), indexDts, 'utf8');
+        console.log('已生成 Vue 组件入口: proto-ui/components/generated.js');
+        return;
+    }
+    console.log('说明: 当前 CLI 已支持 Vue 方向的组件入口生成（后续可扩展 React）。');
+}
+async function main() {
+    const version = await readPackageVersion();
+    const { values, positionals } = parseArgs({
+        allowPositionals: true,
+        options: {
+            help: { type: 'boolean', short: 'h' },
+            version: { type: 'boolean', short: 'v' },
+        },
+    });
+    if (values.help) {
+        printHelp(version);
+        return;
+    }
+    if (values.version) {
+        console.log(version);
+        return;
+    }
+    const [cmd, ...rest] = positionals;
+    if (!cmd || cmd === 'help') {
+        printHelp(version);
+        return;
+    }
+    if (cmd === 'version') {
+        console.log(version);
+        return;
+    }
+    const cwd = process.cwd();
+    if (cmd === 'init') {
+        await cmdInit(cwd);
+        return;
+    }
+    if (cmd === 'add') {
+        const [adapter, prototype] = rest;
+        if (!adapter || !prototype) {
+            console.error('用法: npx @proto-ui/cli add <adapter> <prototype>');
+            console.error('示例: npx @proto-ui/cli add react shadcn-button');
+            process.exitCode = 1;
+            return;
+        }
+        await cmdAdd(cwd, adapter, prototype);
+        return;
+    }
+    console.error(`未知命令: ${cmd}`);
+    printHelp(version);
+    process.exitCode = 1;
+}
+main().catch((err) => {
+    console.error(err);
+    process.exitCode = 1;
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@proto.ui/cli",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "bin": {
+    "proto-ui": "./bin/proto-ui.mjs"
+  },
+  "dependencies": {
+    "typescript": "^5.0.0"
+  },
+  "description": "Proto UI command line helpers for generating Tailwind token sources and theme css files.",
+  "license": "MIT",
+  "homepage": "https://github.com/guangliang2019/Prototype-UI/tree/main/packages/cli",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/guangliang2019/Prototype-UI.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/guangliang2019/Prototype-UI/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "proto-ui",
+    "cli",
+    "tailwind",
+    "tokens"
+  ]
+}

package/src/cli.mjs

@@ -0,0 +1,791 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import ts from 'typescript';
+
+const DEFAULT_THEME_NAME = 'shadcn';
+const DEFAULT_THEME_IMPORT = './shadcn-theme.css';
+const DEFAULT_TOKENS_IMPORT = './prototype-tokens.generated.css';
+
+const SHADCN_THEME_CSS = `:root {
+  --radius: 0.625rem;
+  --background: lab(100% 0 0);
+  --foreground: lab(2.75381% 0 0);
+  --card: lab(100% 0 0);
+  --card-foreground: lab(2.75381% 0 0);
+  --popover: lab(100% 0 0);
+  --popover-foreground: lab(2.75381% 0 0);
+  --primary: lab(7.78201% -0.0000149012 0);
+  --primary-foreground: lab(98.26% 0 0);
+  --secondary: lab(96.52% -0.0000298023 0.0000119209);
+  --secondary-foreground: lab(7.78201% -0.0000149012 0);
+  --muted: lab(96.52% -0.0000298023 0.0000119209);
+  --muted-foreground: lab(48.496% 0 0);
+  --accent: lab(96.52% -0.0000298023 0.0000119209);
+  --accent-foreground: lab(7.78201% -0.0000149012 0);
+  --destructive: lab(48.4493% 77.4328 61.5452);
+  --destructive-foreground: lab(96.4152% 3.22586 1.14673);
+  --border: lab(90.952% 0 -0.0000119209);
+  --input: lab(90.952% 0 -0.0000119209);
+  --ring: lab(66.128% -0.0000298023 0.0000119209);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: lab(98.26% 0 0);
+  --sidebar-foreground: lab(2.75381% 0 0);
+  --sidebar-primary: lab(7.78201% -0.0000149012 0);
+  --sidebar-primary-foreground: lab(98.26% 0 0);
+  --sidebar-accent: lab(96.52% -0.0000298023 0.0000119209);
+  --sidebar-accent-foreground: lab(7.78201% -0.0000149012 0);
+  --sidebar-border: lab(90.952% 0 -0.0000119209);
+  --sidebar-ring: lab(66.128% -0.0000298023 0.0000119209);
+  --surface: lab(97.68% -0.0000298023 0.0000119209);
+  --surface-foreground: var(--foreground);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: lab(95.36% 0 0);
+  --code-number: lab(48.96% 0 0);
+  --selection: lab(2.75381% 0 0);
+  --selection-foreground: lab(100% 0 0);
+}
+
+:root.dark,
+:root[data-theme='dark'] {
+  --background: lab(2.75381% 0 0);
+  --foreground: lab(98.26% 0 0);
+  --card: lab(7.78201% -0.0000149012 0);
+  --card-foreground: lab(98.26% 0 0);
+  --popover: lab(7.78201% -0.0000149012 0);
+  --popover-foreground: lab(98.26% 0 0);
+  --primary: lab(90.952% 0 -0.0000119209);
+  --primary-foreground: lab(7.78201% -0.0000149012 0);
+  --secondary: lab(15.204% 0 -0.00000596046);
+  --secondary-foreground: lab(98.26% 0 0);
+  --muted: lab(15.204% 0 -0.00000596046);
+  --muted-foreground: lab(66.128% -0.0000298023 0.0000119209);
+  --accent: lab(27.036% 0 0);
+  --accent-foreground: lab(98.26% 0 0);
+  --destructive: lab(63.7053% 60.745 31.3109);
+  --destructive-foreground: lab(49.0747% 69.3434 49.6251);
+  --border: lab(100% 0 0 / 0.1);
+  --input: lab(100% 0 0 / 0.15);
+  --ring: lab(48.496% 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: lab(7.78201% -0.0000149012 0);
+  --sidebar-foreground: lab(98.26% 0 0);
+  --sidebar-primary: lab(36.9089% 35.0961 -85.6872);
+  --sidebar-primary-foreground: lab(98.26% 0 0);
+  --sidebar-accent: lab(15.204% 0 -0.00000596046);
+  --sidebar-accent-foreground: lab(98.26% 0 0);
+  --sidebar-border: lab(100% 0 0 / 0.1);
+  --sidebar-ring: lab(34.924% 0 0);
+  --surface: lab(7.22637% -0.0000149012 0);
+  --surface-foreground: lab(66.128% -0.0000298023 0.0000119209);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: lab(15.32% 0 0);
+  --code-number: lab(67.52% -0.0000298023 0);
+  --selection: lab(90.952% 0 -0.0000119209);
+  --selection-foreground: lab(7.78201% -0.0000149012 0);
+}
+`;
+
+const TAILWIND_BASE_TEMPLATE = `@import 'tailwindcss';
+@import '__THEME_IMPORT__';
+@import '__TOKENS_IMPORT__';
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  --radius: 0.625rem;
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+}
+
+@layer base {
+  :root {
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+  }
+
+  * {
+    border-color: var(--color-border);
+  }
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+`;
+
+export async function run(argv) {
+  const [command, ...rest] = argv;
+
+  if (!command || command === '--help' || command === '-h') {
+    printHelp();
+    return;
+  }
+
+  if (command === 'tokens') {
+    await runGenerateTokens(rest);
+    return;
+  }
+
+  if (command === 'tailwindcss') {
+    await runGenerateTailwindCss(rest);
+    return;
+  }
+
+  if (command === 'theme') {
+    await runGenerateTheme(rest);
+    return;
+  }
+
+  await runPreset(command, rest);
+}
+
+function printHelp() {
+  console.log(`proto-ui
+
+Usage:
+  proto-ui <theme> [--prototypes <dir>] [--styles-dir <dir>]
+  proto-ui tokens --input <dir> --out <file>
+  proto-ui tailwindcss [--theme-import <path>] [--tokens-import <path>] --out <file>
+  proto-ui theme <name> --out <file>
+
+Examples:
+  proto-ui shadcn --prototypes ./src/prototypes --styles-dir ./src/styles
+  proto-ui tokens --input ./packages/prototypes --out ./src/styles/prototype-tokens.generated.css
+  proto-ui tailwindcss --out ./src/styles/tailwindcss.css
+  proto-ui theme shadcn --out ./src/styles/shadcn-theme.css
+`);
+}
+
+async function runPreset(themeName, args) {
+  const options = parseOptions(args);
+  const prototypesDir = options.prototypes ?? './src/prototypes';
+  const stylesDir = options['styles-dir'] ?? './src/styles';
+  const tokensFileName = options['tokens-file'] ?? 'prototype-tokens.generated.css';
+  const tailwindFileName = options['tailwind-file'] ?? 'tailwindcss.css';
+  const themeFileName = options['theme-file'] ?? `${themeName}-theme.css`;
+
+  const tokensOut = path.join(stylesDir, tokensFileName);
+  const themeOut = path.join(stylesDir, themeFileName);
+  const tailwindOut = path.join(stylesDir, tailwindFileName);
+
+  await runGenerateTokens(['--input', prototypesDir, '--out', tokensOut]);
+  await runGenerateTheme([themeName, '--out', themeOut]);
+
+  const tailwindAbs = path.resolve(process.cwd(), tailwindOut);
+  const themeImport = toCssImportPath(tailwindAbs, path.resolve(process.cwd(), themeOut));
+  const tokensImport = toCssImportPath(tailwindAbs, path.resolve(process.cwd(), tokensOut));
+
+  await runGenerateTailwindCss([
+    '--out',
+    tailwindOut,
+    '--theme-import',
+    themeImport,
+    '--tokens-import',
+    tokensImport,
+  ]);
+
+  console.log(
+    `[proto-ui] setup(${themeName}): completed tokens + theme + tailwindcss in ${stylesDir}`
+  );
+}
+
+async function runGenerateTokens(args) {
+  const options = parseOptions(args);
+  const input = requiredOption(options, 'input');
+  const outFile = requiredOption(options, 'out');
+  const root = path.resolve(process.cwd(), input);
+  const outputFile = path.resolve(process.cwd(), outFile);
+
+  const files = await collectTsFiles(root);
+  const tokens = new Set();
+
+  for (const file of files) {
+    const sourceText = await fs.readFile(file, 'utf8');
+    const sourceFile = ts.createSourceFile(
+      file,
+      sourceText,
+      ts.ScriptTarget.Latest,
+      true,
+      file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS
+    );
+    const scope = createScope();
+    walk(sourceFile, scope, tokens);
+  }
+
+  const css = renderTokenCss(Array.from(tokens).sort());
+  await ensureDirectory(outputFile);
+  await fs.writeFile(outputFile, css, 'utf8');
+  console.log(`[proto-ui] tokens: wrote ${tokens.size} tokens -> ${relativeToCwd(outputFile)}`);
+}
+
+async function runGenerateTailwindCss(args) {
+  const options = parseOptions(args);
+  const outFile = requiredOption(options, 'out');
+  const themeImport = options['theme-import'] ?? DEFAULT_THEME_IMPORT;
+  const tokensImport = options['tokens-import'] ?? DEFAULT_TOKENS_IMPORT;
+  const outputFile = path.resolve(process.cwd(), outFile);
+  const css = TAILWIND_BASE_TEMPLATE.replace('__THEME_IMPORT__', themeImport).replace(
+    '__TOKENS_IMPORT__',
+    tokensImport
+  );
+
+  await ensureDirectory(outputFile);
+  await fs.writeFile(outputFile, css, 'utf8');
+  console.log(`[proto-ui] tailwindcss: wrote ${relativeToCwd(outputFile)}`);
+}
+
+async function runGenerateTheme(args) {
+  const [name, ...rest] = args;
+  if (!name || name.startsWith('-')) {
+    throw new Error(
+      'theme name is required. Example: proto-ui theme shadcn --out ./src/styles/shadcn-theme.css'
+    );
+  }
+
+  const options = parseOptions(rest);
+  const outFile = requiredOption(options, 'out');
+  const outputFile = path.resolve(process.cwd(), outFile);
+  const normalizedName = name.toLowerCase();
+
+  let css = '';
+  if (normalizedName === DEFAULT_THEME_NAME) {
+    css = SHADCN_THEME_CSS;
+  } else {
+    throw new Error(`unsupported theme "${name}". currently supported: ${DEFAULT_THEME_NAME}.`);
+  }
+
+  await ensureDirectory(outputFile);
+  await fs.writeFile(outputFile, css, 'utf8');
+  console.log(`[proto-ui] theme(${normalizedName}): wrote ${relativeToCwd(outputFile)}`);
+}
+
+function parseOptions(args) {
+  const options = {};
+  for (let i = 0; i < args.length; i += 1) {
+    const token = args[i];
+    if (!token.startsWith('--')) continue;
+    const key = token.slice(2);
+    const next = args[i + 1];
+    if (!next || next.startsWith('--')) {
+      options[key] = 'true';
+      continue;
+    }
+    options[key] = next;
+    i += 1;
+  }
+  return options;
+}
+
+function requiredOption(options, key) {
+  const value = options[key];
+  if (!value) throw new Error(`missing required option: --${key}`);
+  return value;
+}
+
+async function ensureDirectory(filePath) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+}
+
+function relativeToCwd(filePath) {
+  return path.relative(process.cwd(), filePath) || '.';
+}
+
+function toCssImportPath(fromFile, toFile) {
+  const fromDir = path.dirname(fromFile);
+  const relative = path.relative(fromDir, toFile).replace(/\\/g, '/');
+  if (relative.startsWith('.')) return relative;
+  return `./${relative}`;
+}
+
+function createScope(parent = null) {
+  return { parent, bindings: new Map() };
+}
+
+function walk(node, scope, tokens) {
+  if (createsScope(node)) {
+    const nextScope = createScope(scope);
+
+    if (hasStatements(node)) {
+      for (const stmt of node.statements) {
+        if (ts.isVariableStatement(stmt)) {
+          for (const decl of stmt.declarationList.declarations) {
+            registerDeclaration(decl, nextScope);
+            if (decl.initializer) walk(decl.initializer, nextScope, tokens);
+          }
+          continue;
+        }
+        walk(stmt, nextScope, tokens);
+      }
+      return;
+    }
+
+    ts.forEachChild(node, (child) => walk(child, nextScope, tokens));
+    return;
+  }
+
+  if (
+    ts.isCallExpression(node) &&
+    ts.isIdentifier(node.expression) &&
+    node.expression.text === 'tw'
+  ) {
+    for (const arg of node.arguments) {
+      const value = resolveExpression(arg, scope);
+      for (const token of value.strings.flatMap(splitTokens)) {
+        tokens.add(token);
+      }
+    }
+  }
+
+  if (ts.isCallExpression(node) && isPropertyNamed(node.expression, 'rule')) {
+    collectRuleVariantTokens(node, scope, tokens);
+  }
+
+  ts.forEachChild(node, (child) => walk(child, scope, tokens));
+}
+
+function createsScope(node) {
+  return (
+    ts.isSourceFile(node) ||
+    ts.isBlock(node) ||
+    ts.isModuleBlock(node) ||
+    ts.isCaseBlock(node) ||
+    ts.isFunctionDeclaration(node) ||
+    ts.isFunctionExpression(node) ||
+    ts.isArrowFunction(node)
+  );
+}
+
+function hasStatements(node) {
+  return (
+    ts.isSourceFile(node) || ts.isBlock(node) || ts.isModuleBlock(node) || ts.isCaseBlock(node)
+  );
+}
+
+function registerDeclaration(decl, scope) {
+  if (!ts.isIdentifier(decl.name) || !decl.initializer) return;
+  scope.bindings.set(decl.name.text, resolveBinding(decl.initializer, scope));
+}
+
+function resolveExpression(node, scope) {
+  if (ts.isStringLiteralLike(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+    return asStringValue([node.text]);
+  }
+
+  if (ts.isArrayLiteralExpression(node)) {
+    const parts = [];
+    for (const element of node.elements) {
+      const value = resolveExpression(element, scope);
+      if (!value.single) return emptyValue();
+      parts.push(value.single);
+    }
+    return asStringValue([parts.join(',')]);
+  }
+
+  if (
+    ts.isCallExpression(node) &&
+    ts.isPropertyAccessExpression(node.expression) &&
+    node.expression.name.text === 'join'
+  ) {
+    return resolveJoinCall(node, scope);
+  }
+
+  if (ts.isIdentifier(node)) {
+    return lookup(node.text, scope);
+  }
+
+  if (
+    ts.isParenthesizedExpression(node) ||
+    ts.isAsExpression(node) ||
+    ts.isTypeAssertionExpression(node)
+  ) {
+    return resolveExpression(node.expression, scope);
+  }
+
+  if (ts.isObjectLiteralExpression(node)) {
+    const entries = new Map();
+    for (const prop of node.properties) {
+      if (ts.isPropertyAssignment(prop)) {
+        const key = getPropertyName(prop.name);
+        if (!key) continue;
+        const value = resolveExpression(prop.initializer, scope);
+        if (value.strings.length > 0) entries.set(key, value.strings);
+      } else if (ts.isShorthandPropertyAssignment(prop)) {
+        const value = lookup(prop.name.text, scope);
+        if (value.strings.length > 0) entries.set(prop.name.text, value.strings);
+      }
+    }
+    return asMapValue(entries);
+  }
+
+  if (ts.isElementAccessExpression(node)) {
+    const base = resolveExpression(node.expression, scope);
+    if (!base.map) return emptyValue();
+
+    if (node.argumentExpression && ts.isStringLiteralLike(node.argumentExpression)) {
+      return asStringValue(base.map.get(node.argumentExpression.text) ?? []);
+    }
+
+    const out = new Set();
+    for (const strings of base.map.values()) {
+      for (const value of strings) out.add(value);
+    }
+    return asStringValue(Array.from(out));
+  }
+
+  if (ts.isConditionalExpression(node)) {
+    const values = new Set([
+      ...resolveExpression(node.whenTrue, scope).strings,
+      ...resolveExpression(node.whenFalse, scope).strings,
+    ]);
+    return asStringValue(Array.from(values));
+  }
+
+  return emptyValue();
+}
+
+function resolveJoinCall(node, scope) {
+  const separatorArg = node.arguments[0];
+  const separator =
+    separatorArg &&
+    (ts.isStringLiteralLike(separatorArg) || ts.isNoSubstitutionTemplateLiteral(separatorArg))
+      ? separatorArg.text
+      : ',';
+  const base = resolveExpression(node.expression.expression, scope);
+  if (!base.single) return emptyValue();
+  return asStringValue([base.single.split(',').join(separator)]);
+}
+
+function lookup(name, scope) {
+  let current = scope;
+  while (current) {
+    const value = current.bindings.get(name);
+    if (value) return value;
+    current = current.parent;
+  }
+  return emptyValue();
+}
+
+function resolveBinding(node, scope) {
+  const semantic = resolveSemanticBinding(node);
+  const value = resolveExpression(node, scope);
+  return semantic ? { ...value, semantic } : value;
+}
+
+function resolveSemanticBinding(node) {
+  if (
+    !ts.isCallExpression(node) ||
+    !isPropertyAccessChain(node.expression, ['state', 'fromInteraction'])
+  ) {
+    if (
+      !ts.isCallExpression(node) ||
+      !isPropertyAccessChain(node.expression, ['state', 'fromAccessibility'])
+    ) {
+      return null;
+    }
+  }
+
+  const kind = node.expression.name.text === 'fromInteraction' ? 'interaction' : 'accessibility';
+  const firstArg = node.arguments[0];
+  if (!firstArg || !ts.isStringLiteralLike(firstArg)) return null;
+  const name = firstArg.text;
+
+  if (kind === 'interaction') {
+    return (
+      {
+        hovered: 'hover',
+        pressed: 'active',
+        disabled: 'data-[disabled]',
+        focused: 'data-[focused]',
+        focusVisible: 'data-[focus-visible]',
+      }[name] ?? null
+    );
+  }
+
+  return (
+    {
+      expanded: 'aria-expanded',
+      invalid: 'aria-invalid',
+      selected: 'aria-selected',
+      checked: 'aria-checked',
+      current: 'aria-current',
+    }[name] ?? null
+  );
+}
+
+function collectRuleVariantTokens(node, scope, tokens) {
+  const config = node.arguments[0];
+  if (!config || !ts.isObjectLiteralExpression(config)) return;
+
+  const whenProp = config.properties.find(
+    (prop) => ts.isPropertyAssignment(prop) && getPropertyName(prop.name) === 'when'
+  );
+  const intentProp = config.properties.find(
+    (prop) => ts.isPropertyAssignment(prop) && getPropertyName(prop.name) === 'intent'
+  );
+  if (
+    !whenProp ||
+    !intentProp ||
+    !ts.isPropertyAssignment(whenProp) ||
+    !ts.isPropertyAssignment(intentProp)
+  ) {
+    return;
+  }
+
+  const variants = analyzeWhenVariants(whenProp.initializer, scope);
+  if (variants.length === 0) return;
+
+  const intentTokens = collectTwTokens(intentProp.initializer, scope);
+  for (const token of intentTokens) {
+    tokens.add(`${variants.join(':')}:${token}`);
+  }
+}
+
+function analyzeWhenVariants(node, scope) {
+  const out = new Set();
+
+  visit(node);
+  return Array.from(out).sort(compareVariants);
+
+  function visit(current) {
+    if (ts.isArrowFunction(current) || ts.isFunctionExpression(current)) {
+      visit(current.body);
+      return;
+    }
+
+    if (
+      ts.isParenthesizedExpression(current) ||
+      ts.isAsExpression(current) ||
+      ts.isTypeAssertionExpression(current)
+    ) {
+      visit(current.expression);
+      return;
+    }
+
+    if (ts.isCallExpression(current) && ts.isPropertyAccessExpression(current.expression)) {
+      const method = current.expression.name.text;
+
+      if (method === 'all' || method === 'any') {
+        for (const arg of current.arguments) visit(arg);
+        return;
+      }
+
+      if (method === 'eq') {
+        const subject = current.expression.expression;
+        if (ts.isCallExpression(subject) && ts.isPropertyAccessExpression(subject.expression)) {
+          const subjectMethod = subject.expression.name.text;
+          if (subjectMethod === 'state') {
+            const firstArg = subject.arguments[0];
+            if (firstArg && ts.isIdentifier(firstArg)) {
+              const binding = lookup(firstArg.text, scope);
+              if (binding.semantic) out.add(binding.semantic);
+            }
+            return;
+          }
+
+          if (subjectMethod === 'meta') {
+            const key = subject.arguments[0];
+            const value = current.arguments[0];
+            if (
+              key &&
+              value &&
+              ts.isStringLiteralLike(key) &&
+              ts.isStringLiteralLike(value) &&
+              key.text === 'colorScheme' &&
+              value.text === 'dark'
+            ) {
+              out.add('dark');
+            }
+          }
+        }
+      }
+    }
+
+    ts.forEachChild(current, visit);
+  }
+}
+
+function collectTwTokens(node, scope) {
+  const found = new Set();
+
+  visit(node, scope);
+  return Array.from(found);
+
+  function visit(current, currentScope) {
+    if (createsScope(current)) {
+      const nextScope = createScope(currentScope);
+      if (hasStatements(current)) {
+        for (const stmt of current.statements) {
+          if (ts.isVariableStatement(stmt)) {
+            for (const decl of stmt.declarationList.declarations) {
+              registerDeclaration(decl, nextScope);
+              if (decl.initializer) visit(decl.initializer, nextScope);
+            }
+            continue;
+          }
+          visit(stmt, nextScope);
+        }
+        return;
+      }
+    }
+
+    if (
+      ts.isCallExpression(current) &&
+      ts.isIdentifier(current.expression) &&
+      current.expression.text === 'tw'
+    ) {
+      for (const arg of current.arguments) {
+        const value = resolveExpression(arg, currentScope);
+        for (const token of value.strings.flatMap(splitTokens)) found.add(token);
+      }
+    }
+
+    ts.forEachChild(current, (child) => visit(child, currentScope));
+  }
+}
+
+function compareVariants(a, b) {
+  const order = ['dark', 'hover', 'active', 'focus', 'focus-visible', 'disabled'];
+  const ai = order.indexOf(a);
+  const bi = order.indexOf(b);
+  if (ai !== -1 || bi !== -1) return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
+  return a.localeCompare(b);
+}
+
+function isPropertyNamed(node, name) {
+  return ts.isPropertyAccessExpression(node) && node.name.text === name;
+}
+
+function isPropertyAccessChain(node, names) {
+  let current = node;
+  for (let i = names.length - 1; i >= 0; i -= 1) {
+    if (!ts.isPropertyAccessExpression(current) || current.name.text !== names[i]) return false;
+    current = current.expression;
+  }
+  return ts.isIdentifier(current);
+}
+
+function getPropertyName(name) {
+  if (ts.isIdentifier(name) || ts.isStringLiteralLike(name)) return name.text;
+  return null;
+}
+
+function splitTokens(value) {
+  return value
+    .split(/\s+/)
+    .map((token) => token.trim())
+    .filter(Boolean);
+}
+
+function emptyValue() {
+  return { strings: [], single: null, map: null, semantic: null };
+}
+
+function asStringValue(strings) {
+  return {
+    strings,
+    single: strings.length === 1 ? strings[0] : null,
+    map: null,
+    semantic: null,
+  };
+}
+
+function asMapValue(map) {
+  const strings = [];
+  for (const values of map.values()) strings.push(...values);
+  return {
+    strings,
+    single: null,
+    map,
+    semantic: null,
+  };
+}
+
+function renderTokenCss(tokens) {
+  const lines = [
+    '/* This file is auto-generated by @proto.ui/cli (proto-ui tokens). */',
+    '/* Do not edit by hand. */',
+    '',
+  ];
+
+  for (const token of tokens) {
+    lines.push(`@source inline("${escapeForCss(token)}");`);
+  }
+
+  lines.push('');
+  return lines.join('\n');
+}
+
+function escapeForCss(token) {
+  return token.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+async function collectTsFiles(dir) {
+  const out = [];
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === 'dist' || entry.name === 'test' || entry.name === 'node_modules') continue;
+      out.push(...(await collectTsFiles(fullPath)));
+      continue;
+    }
+    if (entry.isFile() && /\.(ts|tsx|mts|cts)$/.test(entry.name)) out.push(fullPath);
+  }
+  return out;
+}