vibe-ui-suite 4.0.0 → 4.8.0

package/README.md

@@ -77,7 +77,7 @@ In your global stylesheet (e.g. `app/globals.css` or `src/index.css`):
 
 Zero JavaScript configuration files required. Instantly unlocks:
 - **Semantic Color Utilities:** `bg-vibe-canvas`, `bg-vibe-surface`, `text-vibe-primary`, `border-vibe-border`
-- **Physics Springs:** `transition-vibe-spring`, `transition-vibe-snap`, `transition-vibe-glide`
+- **Physics Springs:** `ease-vibe-spring`, `ease-vibe-snap`, `ease-vibe-glide` (or utility `.vibe-spring`)
 - **Surface Elevation:** `shadow-vibe-brutal`, `shadow-vibe-glass`
 
 ---

package/dist/cli.js

@@ -39,7 +39,7 @@ const path = __importStar(require("path"));
 const readline = __importStar(require("readline"));
 const components_1 = require("./registry/components");
 const index_1 = require("./index");
-const VERSION = '4.0.0';
+const VERSION = '4.1.1';
 function printBanner() {
     console.log(`
 \x1b[35m  ▲ VIBE UI CLI v${VERSION}\x1b[0m
@@ -50,7 +50,6 @@ function printHelp() {
     printBanner();
     console.log(`\x1b[1mUSAGE:\x1b[0m
   npx vibe-ui-suite <command> [options]
-  npx @omid-io/tokens <command> [options]
   vibe-ui <command> [options]
 
 \x1b[1mCOMMANDS:\x1b[0m
@@ -60,14 +59,19 @@ function printHelp() {
 
 \x1b[1mOPTIONS:\x1b[0m
   -f, --force        Overwrite existing files (creates automated .bak backups)
+  -y, --yes          Non-interactive mode (use defaults without prompting)
+  --chemistry <1-5>  Select visual chemistry in non-interactive mode
+  --editor <1-4>     Select target AI editor in non-interactive mode (1: Cursor, 2: Claude, 3: Windsurf, 4: All)
   --dry-run          Preview file operations without making actual modifications
   -v, --version      Show CLI version
   -h, --help         Show help menu
 
 \x1b[1mEXAMPLES:\x1b[0m
   npx vibe-ui-suite init
+  npx vibe-ui-suite init -y
   npx vibe-ui-suite init --dry-run
   npx vibe-ui-suite add thinking-drawer
+  npx vibe-ui-suite add theme-toggle
   npx vibe-ui-suite add thinking-drawer --force
 `);
 }
@@ -109,100 +113,124 @@ async function handleInit(options) {
     if (options.dryRun) {
         console.log('\x1b[34m[DRY-RUN MODE ACTIVATED: No files will be modified on disk]\x1b[0m\n');
     }
-    const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-    });
-    try {
-        console.log('\x1b[1mInitialize Vibe UI in current workspace:\x1b[0m\n');
-        // 1. Select Visual Chemistry
-        console.log('\x1b[36m1. Select Visual Chemistry:\x1b[0m');
-        console.log('  [1] Minimalist SaaS (Monochrome restraint, high signal - Recommended)');
-        console.log('  [2] Luxury Glass 2.0 (Specular Fresnel, deep dark, gold accents)');
-        console.log('  [3] Neobrutalism (Hard 3px black offset shadows, bold high saturation)');
-        console.log('  [4] Swiss Editorial (Asymmetric grid, typography-first, high contrast)');
-        console.log('  [5] Stripe Crisp Light (Developer docs, precision micro-borders)');
-        const chemChoice = (await prompt(rl, 'Choice [1-5] (default: 1): ')).trim() || '1';
-        const chemMap = {
-            '1': 'MINIMALIST_SAAS',
-            '2': 'LUXURY_GLASS_2',
-            '3': 'NEOBRUTALISM',
-            '4': 'SWISS_EDITORIAL',
-            '5': 'STRIPE_CRISP_LIGHT',
-        };
-        const selectedChemKey = chemMap[chemChoice] || 'MINIMALIST_SAAS';
-        const selectedChem = index_1.VISUAL_CHEMISTRIES[selectedChemKey];
-        // 2. Select AI Editor
-        console.log('\n\x1b[36m2. Select AI Coding Environment:\x1b[0m');
-        console.log('  [1] Cursor (.cursorrules - Recommended)');
-        console.log('  [2] Claude Code (CLAUDE.md)');
-        console.log('  [3] Windsurf (.windsurfrules)');
-        console.log('  [4] All of the above');
-        const editorChoice = (await prompt(rl, 'Choice [1-4] (default: 1): ')).trim() || '1';
-        // 3. Write contract rules safely
-        const cwd = process.cwd();
-        const createdFiles = [];
-        if (editorChoice === '1' || editorChoice === '4') {
-            const res = safeWriteFile(path.join(cwd, '.cursorrules'), CONTRACT_RULES, options);
-            if (res.written)
-                createdFiles.push('.cursorrules');
+    const isInteractive = !options.yes && Boolean(process.stdin.isTTY);
+    let chemChoice = options.chemistry || '1';
+    let editorChoice = options.editor || '4';
+    const chemMap = {
+        '1': 'MINIMALIST_SAAS',
+        '2': 'LUXURY_GLASS_2',
+        '3': 'NEOBRUTALISM',
+        '4': 'SWISS_EDITORIAL',
+        '5': 'STRIPE_CRISP_LIGHT',
+    };
+    if (isInteractive) {
+        const rl = readline.createInterface({
+            input: process.stdin,
+            output: process.stdout,
+        });
+        try {
+            console.log('\x1b[1mInitialize Vibe UI in current workspace:\x1b[0m\n');
+            // 1. Select Visual Chemistry
+            console.log('\x1b[36m1. Select Visual Chemistry:\x1b[0m');
+            console.log('  [1] Minimalist SaaS (Monochrome restraint, high signal - Recommended)');
+            console.log('  [2] Luxury Glass 2.0 (Specular Fresnel, deep dark, gold accents)');
+            console.log('  [3] Neobrutalism (Hard 3px black offset shadows, bold high saturation)');
+            console.log('  [4] Swiss Editorial (Asymmetric grid, typography-first, high contrast)');
+            console.log('  [5] Stripe Crisp Light (Developer docs, precision micro-borders)');
+            chemChoice = (await prompt(rl, 'Choice [1-5] (default: 1): ')).trim() || '1';
+            // 2. Select AI Editor
+            console.log('\n\x1b[36m2. Select AI Coding Environment:\x1b[0m');
+            console.log('  [1] Cursor (.cursorrules - Recommended)');
+            console.log('  [2] Claude Code (CLAUDE.md)');
+            console.log('  [3] Windsurf (.windsurfrules)');
+            console.log('  [4] All of the above');
+            editorChoice = (await prompt(rl, 'Choice [1-4] (default: 1): ')).trim() || '1';
+        }
+        finally {
+            rl.close();
+        }
+    }
+    else {
+        console.log('\x1b[36m  [auto]\x1b[0m Non-interactive mode activated. Using defaults.');
+    }
+    const selectedChemKey = chemMap[chemChoice] || 'MINIMALIST_SAAS';
+    const selectedChem = index_1.VISUAL_CHEMISTRIES[selectedChemKey];
+    const darkColors = selectedChem.darkColors || selectedChem.colors;
+    console.log(`  \x1b[32m✔\x1b[0m Visual Chemistry: \x1b[1m${selectedChem.name}\x1b[0m (Dual Light & Dark Themes)`);
+    // 3. Write contract rules safely
+    const cwd = process.cwd();
+    const createdFiles = [];
+    if (editorChoice === '1' || editorChoice === '4') {
+        const res = safeWriteFile(path.join(cwd, '.cursorrules'), CONTRACT_RULES, options);
+        if (res.written)
+            createdFiles.push('.cursorrules');
+    }
+    if (editorChoice === '2' || editorChoice === '4') {
+        const claudePath = path.join(cwd, 'CLAUDE.md');
+        if (options.dryRun) {
+            console.log('  \x1b[34m[dry-run]\x1b[0m Would update CLAUDE.md');
         }
-        if (editorChoice === '2' || editorChoice === '4') {
-            const claudePath = path.join(cwd, 'CLAUDE.md');
-            if (options.dryRun) {
-                console.log('  \x1b[34m[dry-run]\x1b[0m Would update CLAUDE.md');
-            }
-            else if (fs.existsSync(claudePath)) {
-                fs.appendFileSync(claudePath, `\n\n${CONTRACT_RULES}`, 'utf-8');
-                createdFiles.push('CLAUDE.md (appended)');
-            }
-            else {
-                const res = safeWriteFile(claudePath, CONTRACT_RULES, options);
-                if (res.written)
-                    createdFiles.push('CLAUDE.md');
-            }
+        else if (fs.existsSync(claudePath)) {
+            fs.appendFileSync(claudePath, `\n\n${CONTRACT_RULES}`, 'utf-8');
+            createdFiles.push('CLAUDE.md (appended)');
         }
-        if (editorChoice === '3' || editorChoice === '4') {
-            const res = safeWriteFile(path.join(cwd, '.windsurfrules'), CONTRACT_RULES, options);
+        else {
+            const res = safeWriteFile(claudePath, CONTRACT_RULES, options);
             if (res.written)
-                createdFiles.push('.windsurfrules');
+                createdFiles.push('CLAUDE.md');
         }
-        // 4. Generate CSS Tokens file safely
-        const cssContent = `:root {
-  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) */
+    }
+    if (editorChoice === '3' || editorChoice === '4') {
+        const res = safeWriteFile(path.join(cwd, '.windsurfrules'), CONTRACT_RULES, options);
+        if (res.written)
+            createdFiles.push('.windsurfrules');
+    }
+    // 4. Generate Dual-Theme CSS Tokens file safely
+    const cssContent = `:root {
+  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) - Light Theme */
   --vibe-canvas: ${selectedChem.colors.canvas};
   --vibe-surface: ${selectedChem.colors.surface};
   --vibe-border: ${selectedChem.colors.border};
   --vibe-primary-accent: ${selectedChem.colors.primaryAccent};
+  --vibe-on-primary: ${selectedChem.colors.onPrimaryAccent};
   --vibe-text-primary: ${selectedChem.colors.textPrimary};
   --vibe-text-muted: ${selectedChem.colors.textMuted};
   --vibe-ring: ${selectedChem.colors.ring};
 }
+
+.dark, [data-theme="dark"] {
+  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) - Dark Theme */
+  --vibe-canvas: ${darkColors.canvas};
+  --vibe-surface: ${darkColors.surface};
+  --vibe-border: ${darkColors.border};
+  --vibe-primary-accent: ${darkColors.primaryAccent};
+  --vibe-on-primary: ${darkColors.onPrimaryAccent};
+  --vibe-text-primary: ${darkColors.textPrimary};
+  --vibe-text-muted: ${darkColors.textMuted};
+  --vibe-ring: ${darkColors.ring};
+}
 `;
-        const cssPath = path.join(cwd, 'vibe-tokens.css');
-        const cssRes = safeWriteFile(cssPath, cssContent, options);
-        if (cssRes.written)
-            createdFiles.push('vibe-tokens.css');
-        console.log('\n\x1b[32m✔ Initialized successfully!\x1b[0m');
-        if (createdFiles.length > 0) {
-            console.log('\x1b[90mGenerated/Updated files:\x1b[0m');
-            createdFiles.forEach((f) => console.log(`  + ${f}`));
-        }
-        console.log(`
+    const cssPath = path.join(cwd, 'vibe-tokens.css');
+    const cssRes = safeWriteFile(cssPath, cssContent, options);
+    if (cssRes.written)
+        createdFiles.push('vibe-tokens.css');
+    console.log('\n\x1b[32m✔ Initialized successfully!\x1b[0m');
+    if (createdFiles.length > 0) {
+        console.log('\x1b[90mGenerated/Updated files:\x1b[0m');
+        createdFiles.forEach((f) => console.log(`  + ${f}`));
+    }
+    console.log(`
 \x1b[1mNext Steps:\x1b[0m
 1. Import \x1b[35mvibe-tokens.css\x1b[0m into your layout or globals.css
-2. Run \x1b[32mnpx @omid-io/tokens add thinking-drawer\x1b[0m to add your first AI component
+2. Run \x1b[32mnpx vibe-ui-suite add thinking-drawer\x1b[0m to add your first AI component
+3. Run \x1b[32mnpx vibe-ui-suite add theme-toggle\x1b[0m to add accessible Dark/Light theme switch
 `);
-    }
-    finally {
-        rl.close();
-    }
 }
 function handleAdd(componentName, options = { force: false, dryRun: false }) {
     if (!componentName) {
         console.log('\x1b[33mError: Please specify a component to add.\x1b[0m\n');
         handleList();
-        console.log('\nUsage: npx @omid-io/tokens add <component> [--force]');
+        console.log('\nUsage: npx vibe-ui-suite add <component> [--force]');
         process.exit(1);
         return;
     }
@@ -223,7 +251,7 @@ function handleAdd(componentName, options = { force: false, dryRun: false }) {
     if (writeRes.skipped) {
         console.log(`\n\x1b[33mWarning: Component already exists at components/vibe-ui/${comp.filename}\x1b[0m`);
         console.log(`To overwrite with automated .bak backup, re-run with:`);
-        console.log(`  \x1b[32mnpx @omid-io/tokens add ${componentName} --force\x1b[0m\n`);
+        console.log(`  \x1b[32mnpx vibe-ui-suite add ${componentName} --force\x1b[0m\n`);
         return;
     }
     if (writeRes.written) {
@@ -244,9 +272,18 @@ async function main() {
     const rawArgs = process.argv.slice(2);
     const force = rawArgs.includes('--force') || rawArgs.includes('-f');
     const dryRun = rawArgs.includes('--dry-run');
-    const filteredArgs = rawArgs.filter((a) => !['--force', '-f', '--dry-run'].includes(a));
+    const yes = rawArgs.includes('--yes') || rawArgs.includes('-y');
+    let chemistry;
+    let editor;
+    for (let i = 0; i < rawArgs.length; i++) {
+        if (rawArgs[i] === '--chemistry' && rawArgs[i + 1])
+            chemistry = rawArgs[i + 1];
+        if (rawArgs[i] === '--editor' && rawArgs[i + 1])
+            editor = rawArgs[i + 1];
+    }
+    const filteredArgs = rawArgs.filter((a) => !['--force', '-f', '--dry-run', '--yes', '-y', '--chemistry', '--editor'].includes(a) && a !== chemistry && a !== editor);
     const cmd = filteredArgs[0]?.toLowerCase();
-    const options = { force, dryRun };
+    const options = { force, dryRun, yes, chemistry, editor };
     if (!cmd || cmd === '--help' || cmd === '-h') {
         printHelp();
         return;

package/dist/cli.mjs

@@ -4,7 +4,7 @@ import * as path from 'path';
 import * as readline from 'readline';
 import { COMPONENT_REGISTRY } from './registry/components';
 import { VISUAL_CHEMISTRIES } from './index';
-const VERSION = '4.0.0';
+const VERSION = '4.1.1';
 function printBanner() {
     console.log(`
 \x1b[35m  ▲ VIBE UI CLI v${VERSION}\x1b[0m
@@ -15,7 +15,6 @@ function printHelp() {
     printBanner();
     console.log(`\x1b[1mUSAGE:\x1b[0m
   npx vibe-ui-suite <command> [options]
-  npx @omid-io/tokens <command> [options]
   vibe-ui <command> [options]
 
 \x1b[1mCOMMANDS:\x1b[0m
@@ -25,14 +24,19 @@ function printHelp() {
 
 \x1b[1mOPTIONS:\x1b[0m
   -f, --force        Overwrite existing files (creates automated .bak backups)
+  -y, --yes          Non-interactive mode (use defaults without prompting)
+  --chemistry <1-5>  Select visual chemistry in non-interactive mode
+  --editor <1-4>     Select target AI editor in non-interactive mode (1: Cursor, 2: Claude, 3: Windsurf, 4: All)
   --dry-run          Preview file operations without making actual modifications
   -v, --version      Show CLI version
   -h, --help         Show help menu
 
 \x1b[1mEXAMPLES:\x1b[0m
   npx vibe-ui-suite init
+  npx vibe-ui-suite init -y
   npx vibe-ui-suite init --dry-run
   npx vibe-ui-suite add thinking-drawer
+  npx vibe-ui-suite add theme-toggle
   npx vibe-ui-suite add thinking-drawer --force
 `);
 }
@@ -74,100 +78,124 @@ async function handleInit(options) {
     if (options.dryRun) {
         console.log('\x1b[34m[DRY-RUN MODE ACTIVATED: No files will be modified on disk]\x1b[0m\n');
     }
-    const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-    });
-    try {
-        console.log('\x1b[1mInitialize Vibe UI in current workspace:\x1b[0m\n');
-        // 1. Select Visual Chemistry
-        console.log('\x1b[36m1. Select Visual Chemistry:\x1b[0m');
-        console.log('  [1] Minimalist SaaS (Monochrome restraint, high signal - Recommended)');
-        console.log('  [2] Luxury Glass 2.0 (Specular Fresnel, deep dark, gold accents)');
-        console.log('  [3] Neobrutalism (Hard 3px black offset shadows, bold high saturation)');
-        console.log('  [4] Swiss Editorial (Asymmetric grid, typography-first, high contrast)');
-        console.log('  [5] Stripe Crisp Light (Developer docs, precision micro-borders)');
-        const chemChoice = (await prompt(rl, 'Choice [1-5] (default: 1): ')).trim() || '1';
-        const chemMap = {
-            '1': 'MINIMALIST_SAAS',
-            '2': 'LUXURY_GLASS_2',
-            '3': 'NEOBRUTALISM',
-            '4': 'SWISS_EDITORIAL',
-            '5': 'STRIPE_CRISP_LIGHT',
-        };
-        const selectedChemKey = chemMap[chemChoice] || 'MINIMALIST_SAAS';
-        const selectedChem = VISUAL_CHEMISTRIES[selectedChemKey];
-        // 2. Select AI Editor
-        console.log('\n\x1b[36m2. Select AI Coding Environment:\x1b[0m');
-        console.log('  [1] Cursor (.cursorrules - Recommended)');
-        console.log('  [2] Claude Code (CLAUDE.md)');
-        console.log('  [3] Windsurf (.windsurfrules)');
-        console.log('  [4] All of the above');
-        const editorChoice = (await prompt(rl, 'Choice [1-4] (default: 1): ')).trim() || '1';
-        // 3. Write contract rules safely
-        const cwd = process.cwd();
-        const createdFiles = [];
-        if (editorChoice === '1' || editorChoice === '4') {
-            const res = safeWriteFile(path.join(cwd, '.cursorrules'), CONTRACT_RULES, options);
-            if (res.written)
-                createdFiles.push('.cursorrules');
+    const isInteractive = !options.yes && Boolean(process.stdin.isTTY);
+    let chemChoice = options.chemistry || '1';
+    let editorChoice = options.editor || '4';
+    const chemMap = {
+        '1': 'MINIMALIST_SAAS',
+        '2': 'LUXURY_GLASS_2',
+        '3': 'NEOBRUTALISM',
+        '4': 'SWISS_EDITORIAL',
+        '5': 'STRIPE_CRISP_LIGHT',
+    };
+    if (isInteractive) {
+        const rl = readline.createInterface({
+            input: process.stdin,
+            output: process.stdout,
+        });
+        try {
+            console.log('\x1b[1mInitialize Vibe UI in current workspace:\x1b[0m\n');
+            // 1. Select Visual Chemistry
+            console.log('\x1b[36m1. Select Visual Chemistry:\x1b[0m');
+            console.log('  [1] Minimalist SaaS (Monochrome restraint, high signal - Recommended)');
+            console.log('  [2] Luxury Glass 2.0 (Specular Fresnel, deep dark, gold accents)');
+            console.log('  [3] Neobrutalism (Hard 3px black offset shadows, bold high saturation)');
+            console.log('  [4] Swiss Editorial (Asymmetric grid, typography-first, high contrast)');
+            console.log('  [5] Stripe Crisp Light (Developer docs, precision micro-borders)');
+            chemChoice = (await prompt(rl, 'Choice [1-5] (default: 1): ')).trim() || '1';
+            // 2. Select AI Editor
+            console.log('\n\x1b[36m2. Select AI Coding Environment:\x1b[0m');
+            console.log('  [1] Cursor (.cursorrules - Recommended)');
+            console.log('  [2] Claude Code (CLAUDE.md)');
+            console.log('  [3] Windsurf (.windsurfrules)');
+            console.log('  [4] All of the above');
+            editorChoice = (await prompt(rl, 'Choice [1-4] (default: 1): ')).trim() || '1';
         }
-        if (editorChoice === '2' || editorChoice === '4') {
-            const claudePath = path.join(cwd, 'CLAUDE.md');
-            if (options.dryRun) {
-                console.log('  \x1b[34m[dry-run]\x1b[0m Would update CLAUDE.md');
-            }
-            else if (fs.existsSync(claudePath)) {
-                fs.appendFileSync(claudePath, `\n\n${CONTRACT_RULES}`, 'utf-8');
-                createdFiles.push('CLAUDE.md (appended)');
-            }
-            else {
-                const res = safeWriteFile(claudePath, CONTRACT_RULES, options);
-                if (res.written)
-                    createdFiles.push('CLAUDE.md');
-            }
+        finally {
+            rl.close();
         }
-        if (editorChoice === '3' || editorChoice === '4') {
-            const res = safeWriteFile(path.join(cwd, '.windsurfrules'), CONTRACT_RULES, options);
+    }
+    else {
+        console.log('\x1b[36m  [auto]\x1b[0m Non-interactive mode activated. Using defaults.');
+    }
+    const selectedChemKey = chemMap[chemChoice] || 'MINIMALIST_SAAS';
+    const selectedChem = VISUAL_CHEMISTRIES[selectedChemKey];
+    const darkColors = selectedChem.darkColors || selectedChem.colors;
+    console.log(`  \x1b[32m✔\x1b[0m Visual Chemistry: \x1b[1m${selectedChem.name}\x1b[0m (Dual Light & Dark Themes)`);
+    // 3. Write contract rules safely
+    const cwd = process.cwd();
+    const createdFiles = [];
+    if (editorChoice === '1' || editorChoice === '4') {
+        const res = safeWriteFile(path.join(cwd, '.cursorrules'), CONTRACT_RULES, options);
+        if (res.written)
+            createdFiles.push('.cursorrules');
+    }
+    if (editorChoice === '2' || editorChoice === '4') {
+        const claudePath = path.join(cwd, 'CLAUDE.md');
+        if (options.dryRun) {
+            console.log('  \x1b[34m[dry-run]\x1b[0m Would update CLAUDE.md');
+        }
+        else if (fs.existsSync(claudePath)) {
+            fs.appendFileSync(claudePath, `\n\n${CONTRACT_RULES}`, 'utf-8');
+            createdFiles.push('CLAUDE.md (appended)');
+        }
+        else {
+            const res = safeWriteFile(claudePath, CONTRACT_RULES, options);
             if (res.written)
-                createdFiles.push('.windsurfrules');
+                createdFiles.push('CLAUDE.md');
         }
-        // 4. Generate CSS Tokens file safely
-        const cssContent = `:root {
-  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) */
+    }
+    if (editorChoice === '3' || editorChoice === '4') {
+        const res = safeWriteFile(path.join(cwd, '.windsurfrules'), CONTRACT_RULES, options);
+        if (res.written)
+            createdFiles.push('.windsurfrules');
+    }
+    // 4. Generate Dual-Theme CSS Tokens file safely
+    const cssContent = `:root {
+  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) - Light Theme */
   --vibe-canvas: ${selectedChem.colors.canvas};
   --vibe-surface: ${selectedChem.colors.surface};
   --vibe-border: ${selectedChem.colors.border};
   --vibe-primary-accent: ${selectedChem.colors.primaryAccent};
+  --vibe-on-primary: ${selectedChem.colors.onPrimaryAccent};
   --vibe-text-primary: ${selectedChem.colors.textPrimary};
   --vibe-text-muted: ${selectedChem.colors.textMuted};
   --vibe-ring: ${selectedChem.colors.ring};
 }
+
+.dark, [data-theme="dark"] {
+  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) - Dark Theme */
+  --vibe-canvas: ${darkColors.canvas};
+  --vibe-surface: ${darkColors.surface};
+  --vibe-border: ${darkColors.border};
+  --vibe-primary-accent: ${darkColors.primaryAccent};
+  --vibe-on-primary: ${darkColors.onPrimaryAccent};
+  --vibe-text-primary: ${darkColors.textPrimary};
+  --vibe-text-muted: ${darkColors.textMuted};
+  --vibe-ring: ${darkColors.ring};
+}
 `;
-        const cssPath = path.join(cwd, 'vibe-tokens.css');
-        const cssRes = safeWriteFile(cssPath, cssContent, options);
-        if (cssRes.written)
-            createdFiles.push('vibe-tokens.css');
-        console.log('\n\x1b[32m✔ Initialized successfully!\x1b[0m');
-        if (createdFiles.length > 0) {
-            console.log('\x1b[90mGenerated/Updated files:\x1b[0m');
-            createdFiles.forEach((f) => console.log(`  + ${f}`));
-        }
-        console.log(`
+    const cssPath = path.join(cwd, 'vibe-tokens.css');
+    const cssRes = safeWriteFile(cssPath, cssContent, options);
+    if (cssRes.written)
+        createdFiles.push('vibe-tokens.css');
+    console.log('\n\x1b[32m✔ Initialized successfully!\x1b[0m');
+    if (createdFiles.length > 0) {
+        console.log('\x1b[90mGenerated/Updated files:\x1b[0m');
+        createdFiles.forEach((f) => console.log(`  + ${f}`));
+    }
+    console.log(`
 \x1b[1mNext Steps:\x1b[0m
 1. Import \x1b[35mvibe-tokens.css\x1b[0m into your layout or globals.css
-2. Run \x1b[32mnpx @omid-io/tokens add thinking-drawer\x1b[0m to add your first AI component
+2. Run \x1b[32mnpx vibe-ui-suite add thinking-drawer\x1b[0m to add your first AI component
+3. Run \x1b[32mnpx vibe-ui-suite add theme-toggle\x1b[0m to add accessible Dark/Light theme switch
 `);
-    }
-    finally {
-        rl.close();
-    }
 }
 function handleAdd(componentName, options = { force: false, dryRun: false }) {
     if (!componentName) {
         console.log('\x1b[33mError: Please specify a component to add.\x1b[0m\n');
         handleList();
-        console.log('\nUsage: npx @omid-io/tokens add <component> [--force]');
+        console.log('\nUsage: npx vibe-ui-suite add <component> [--force]');
         process.exit(1);
         return;
     }
@@ -188,7 +216,7 @@ function handleAdd(componentName, options = { force: false, dryRun: false }) {
     if (writeRes.skipped) {
         console.log(`\n\x1b[33mWarning: Component already exists at components/vibe-ui/${comp.filename}\x1b[0m`);
         console.log(`To overwrite with automated .bak backup, re-run with:`);
-        console.log(`  \x1b[32mnpx @omid-io/tokens add ${componentName} --force\x1b[0m\n`);
+        console.log(`  \x1b[32mnpx vibe-ui-suite add ${componentName} --force\x1b[0m\n`);
         return;
     }
     if (writeRes.written) {
@@ -209,9 +237,18 @@ async function main() {
     const rawArgs = process.argv.slice(2);
     const force = rawArgs.includes('--force') || rawArgs.includes('-f');
     const dryRun = rawArgs.includes('--dry-run');
-    const filteredArgs = rawArgs.filter((a) => !['--force', '-f', '--dry-run'].includes(a));
+    const yes = rawArgs.includes('--yes') || rawArgs.includes('-y');
+    let chemistry;
+    let editor;
+    for (let i = 0; i < rawArgs.length; i++) {
+        if (rawArgs[i] === '--chemistry' && rawArgs[i + 1])
+            chemistry = rawArgs[i + 1];
+        if (rawArgs[i] === '--editor' && rawArgs[i + 1])
+            editor = rawArgs[i + 1];
+    }
+    const filteredArgs = rawArgs.filter((a) => !['--force', '-f', '--dry-run', '--yes', '-y', '--chemistry', '--editor'].includes(a) && a !== chemistry && a !== editor);
     const cmd = filteredArgs[0]?.toLowerCase();
-    const options = { force, dryRun };
+    const options = { force, dryRun, yes, chemistry, editor };
     if (!cmd || cmd === '--help' || cmd === '-h') {
         printHelp();
         return;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export interface ChemistryColors {
     surface: string;
     border: string;
     primaryAccent: string;
+    /** Text color on primary accent guaranteeing >= 4.5:1 (AA) or >= 7:1 (AAA) contrast */
+    onPrimaryAccent: string;
     textPrimary: string;
     textMuted: string;
     ring: string;
@@ -27,6 +29,7 @@ export interface VisualChemistry {
     name: string;
     tagline: string;
     colors: ChemistryColors;
+    darkColors?: ChemistryColors;
     typography: ChemistryTypography;
     physics: ChemistryPhysics;
 }

package/dist/index.js

@@ -13,17 +13,28 @@ exports.VISUAL_CHEMISTRIES = {
         name: 'Minimalist SaaS',
         tagline: 'High-signal B2B productivity with subtle borders and monochrome restraint',
         colors: {
+            canvas: 'oklch(0.985 0.002 264)',
+            surface: 'oklch(1 0 0)',
+            border: 'oklch(0.90 0.008 264)',
+            primaryAccent: 'oklch(0.55 0.22 260)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
+            textPrimary: 'oklch(0.14 0.005 264)',
+            textMuted: 'oklch(0.48 0.015 264)',
+            ring: 'oklch(0.55 0.22 260)',
+        },
+        darkColors: {
             canvas: 'oklch(0.14 0.005 264)',
             surface: 'oklch(0.18 0.008 264)',
             border: 'oklch(0.28 0.01 264)',
             primaryAccent: 'oklch(0.65 0.22 260)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
             textPrimary: 'oklch(0.98 0.002 264)',
             textMuted: 'oklch(0.65 0.015 264)',
             ring: 'oklch(0.65 0.22 260)',
         },
         typography: {
-            display: 'Inter, system-ui, sans-serif',
-            body: 'Inter, system-ui, sans-serif',
+            display: 'Vazirmatn, Inter, system-ui, sans-serif',
+            body: 'Vazirmatn, Inter, system-ui, sans-serif',
             mono: 'JetBrains Mono, Menlo, monospace',
         },
         physics: {
@@ -37,17 +48,28 @@ exports.VISUAL_CHEMISTRIES = {
         name: 'Luxury Glassmorphism 2.0',
         tagline: 'Deep dark substrates with specular highlights and gold accents',
         colors: {
+            canvas: 'oklch(0.97 0.01 85)',
+            surface: 'oklch(1 0 0 / 0.85)',
+            border: 'oklch(0.75 0.12 85 / 0.4)',
+            primaryAccent: 'oklch(0.65 0.18 85)',
+            onPrimaryAccent: 'oklch(0.12 0.02 85)',
+            textPrimary: 'oklch(0.16 0.02 85)',
+            textMuted: 'oklch(0.45 0.03 85)',
+            ring: 'oklch(0.65 0.18 85)',
+        },
+        darkColors: {
             canvas: 'oklch(0.12 0.015 280)',
             surface: 'oklch(0.18 0.02 280 / 0.75)',
             border: 'oklch(0.75 0.15 85 / 0.35)',
             primaryAccent: 'oklch(0.78 0.16 85)',
+            onPrimaryAccent: 'oklch(0.12 0.02 85)',
             textPrimary: 'oklch(0.98 0.005 85)',
             textMuted: 'oklch(0.70 0.03 85)',
             ring: 'oklch(0.78 0.16 85)',
         },
         typography: {
-            display: 'Cinzel, Playfair Display, serif',
-            body: 'Plus Jakarta Sans, sans-serif',
+            display: 'Cinzel, Playfair Display, Vazirmatn, serif',
+            body: 'Vazirmatn, Plus Jakarta Sans, sans-serif',
             mono: 'JetBrains Mono, monospace',
         },
         physics: {
@@ -65,13 +87,24 @@ exports.VISUAL_CHEMISTRIES = {
             surface: 'oklch(0.99 0.002 95)',
             border: 'oklch(0.15 0.01 95)',
             primaryAccent: 'oklch(0.82 0.20 135)',
+            onPrimaryAccent: 'oklch(0.10 0.01 95)',
             textPrimary: 'oklch(0.12 0.01 95)',
             textMuted: 'oklch(0.35 0.02 95)',
             ring: 'oklch(0.15 0.01 95)',
         },
+        darkColors: {
+            canvas: 'oklch(0.15 0.01 95)',
+            surface: 'oklch(0.20 0.015 95)',
+            border: 'oklch(0.95 0.01 95)',
+            primaryAccent: 'oklch(0.82 0.20 135)',
+            onPrimaryAccent: 'oklch(0.10 0.01 95)',
+            textPrimary: 'oklch(0.96 0.01 95)',
+            textMuted: 'oklch(0.70 0.02 95)',
+            ring: 'oklch(0.82 0.20 135)',
+        },
         typography: {
-            display: 'Space Grotesk, Syne, sans-serif',
-            body: 'Space Grotesk, sans-serif',
+            display: 'Space Grotesk, Syne, Vazirmatn, sans-serif',
+            body: 'Vazirmatn, Space Grotesk, sans-serif',
             mono: 'Space Mono, monospace',
         },
         physics: {
@@ -89,13 +122,24 @@ exports.VISUAL_CHEMISTRIES = {
             surface: 'oklch(0.93 0.008 80)',
             border: 'oklch(0.20 0.005 80)',
             primaryAccent: 'oklch(0.58 0.24 28)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
             textPrimary: 'oklch(0.15 0.005 80)',
             textMuted: 'oklch(0.42 0.01 80)',
             ring: 'oklch(0.58 0.24 28)',
         },
+        darkColors: {
+            canvas: 'oklch(0.13 0.005 80)',
+            surface: 'oklch(0.17 0.008 80)',
+            border: 'oklch(0.35 0.005 80)',
+            primaryAccent: 'oklch(0.68 0.22 28)',
+            onPrimaryAccent: 'oklch(0.12 0.005 80)',
+            textPrimary: 'oklch(0.95 0.005 80)',
+            textMuted: 'oklch(0.65 0.01 80)',
+            ring: 'oklch(0.68 0.22 28)',
+        },
         typography: {
-            display: 'Helvetica Neue, Arial, sans-serif',
-            body: 'Newsreader, Georgia, serif',
+            display: 'Helvetica Neue, Arial, Vazirmatn, sans-serif',
+            body: 'Newsreader, Georgia, Vazirmatn, serif',
             mono: 'Courier New, monospace',
         },
         physics: {
@@ -113,13 +157,24 @@ exports.VISUAL_CHEMISTRIES = {
             surface: 'oklch(1 0 0)',
             border: 'oklch(0.90 0.008 247.8)',
             primaryAccent: 'oklch(0.55 0.22 265)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
             textPrimary: 'oklch(0.20 0.02 265)',
             textMuted: 'oklch(0.50 0.02 265)',
             ring: 'oklch(0.55 0.22 265)',
         },
+        darkColors: {
+            canvas: 'oklch(0.13 0.005 265)',
+            surface: 'oklch(0.17 0.008 265)',
+            border: 'oklch(0.26 0.01 265)',
+            primaryAccent: 'oklch(0.65 0.22 265)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
+            textPrimary: 'oklch(0.98 0 0)',
+            textMuted: 'oklch(0.65 0.01 265)',
+            ring: 'oklch(0.65 0.22 265)',
+        },
         typography: {
-            display: 'Inter, system-ui, sans-serif',
-            body: 'Inter, system-ui, sans-serif',
+            display: 'Vazirmatn, Inter, system-ui, sans-serif',
+            body: 'Vazirmatn, Inter, system-ui, sans-serif',
             mono: 'Fira Code, monospace',
         },
         physics: {

package/dist/index.mjs

@@ -8,17 +8,28 @@ export const VISUAL_CHEMISTRIES = {
         name: 'Minimalist SaaS',
         tagline: 'High-signal B2B productivity with subtle borders and monochrome restraint',
         colors: {
+            canvas: 'oklch(0.985 0.002 264)',
+            surface: 'oklch(1 0 0)',
+            border: 'oklch(0.90 0.008 264)',
+            primaryAccent: 'oklch(0.55 0.22 260)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
+            textPrimary: 'oklch(0.14 0.005 264)',
+            textMuted: 'oklch(0.48 0.015 264)',
+            ring: 'oklch(0.55 0.22 260)',
+        },
+        darkColors: {
             canvas: 'oklch(0.14 0.005 264)',
             surface: 'oklch(0.18 0.008 264)',
             border: 'oklch(0.28 0.01 264)',
             primaryAccent: 'oklch(0.65 0.22 260)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
             textPrimary: 'oklch(0.98 0.002 264)',
             textMuted: 'oklch(0.65 0.015 264)',
             ring: 'oklch(0.65 0.22 260)',
         },
         typography: {
-            display: 'Inter, system-ui, sans-serif',
-            body: 'Inter, system-ui, sans-serif',
+            display: 'Vazirmatn, Inter, system-ui, sans-serif',
+            body: 'Vazirmatn, Inter, system-ui, sans-serif',
             mono: 'JetBrains Mono, Menlo, monospace',
         },
         physics: {
@@ -32,17 +43,28 @@ export const VISUAL_CHEMISTRIES = {
         name: 'Luxury Glassmorphism 2.0',
         tagline: 'Deep dark substrates with specular highlights and gold accents',
         colors: {
+            canvas: 'oklch(0.97 0.01 85)',
+            surface: 'oklch(1 0 0 / 0.85)',
+            border: 'oklch(0.75 0.12 85 / 0.4)',
+            primaryAccent: 'oklch(0.65 0.18 85)',
+            onPrimaryAccent: 'oklch(0.12 0.02 85)',
+            textPrimary: 'oklch(0.16 0.02 85)',
+            textMuted: 'oklch(0.45 0.03 85)',
+            ring: 'oklch(0.65 0.18 85)',
+        },
+        darkColors: {
             canvas: 'oklch(0.12 0.015 280)',
             surface: 'oklch(0.18 0.02 280 / 0.75)',
             border: 'oklch(0.75 0.15 85 / 0.35)',
             primaryAccent: 'oklch(0.78 0.16 85)',
+            onPrimaryAccent: 'oklch(0.12 0.02 85)',
             textPrimary: 'oklch(0.98 0.005 85)',
             textMuted: 'oklch(0.70 0.03 85)',
             ring: 'oklch(0.78 0.16 85)',
         },
         typography: {
-            display: 'Cinzel, Playfair Display, serif',
-            body: 'Plus Jakarta Sans, sans-serif',
+            display: 'Cinzel, Playfair Display, Vazirmatn, serif',
+            body: 'Vazirmatn, Plus Jakarta Sans, sans-serif',
             mono: 'JetBrains Mono, monospace',
         },
         physics: {
@@ -60,13 +82,24 @@ export const VISUAL_CHEMISTRIES = {
             surface: 'oklch(0.99 0.002 95)',
             border: 'oklch(0.15 0.01 95)',
             primaryAccent: 'oklch(0.82 0.20 135)',
+            onPrimaryAccent: 'oklch(0.10 0.01 95)',
             textPrimary: 'oklch(0.12 0.01 95)',
             textMuted: 'oklch(0.35 0.02 95)',
             ring: 'oklch(0.15 0.01 95)',
         },
+        darkColors: {
+            canvas: 'oklch(0.15 0.01 95)',
+            surface: 'oklch(0.20 0.015 95)',
+            border: 'oklch(0.95 0.01 95)',
+            primaryAccent: 'oklch(0.82 0.20 135)',
+            onPrimaryAccent: 'oklch(0.10 0.01 95)',
+            textPrimary: 'oklch(0.96 0.01 95)',
+            textMuted: 'oklch(0.70 0.02 95)',
+            ring: 'oklch(0.82 0.20 135)',
+        },
         typography: {
-            display: 'Space Grotesk, Syne, sans-serif',
-            body: 'Space Grotesk, sans-serif',
+            display: 'Space Grotesk, Syne, Vazirmatn, sans-serif',
+            body: 'Vazirmatn, Space Grotesk, sans-serif',
             mono: 'Space Mono, monospace',
         },
         physics: {
@@ -84,13 +117,24 @@ export const VISUAL_CHEMISTRIES = {
             surface: 'oklch(0.93 0.008 80)',
             border: 'oklch(0.20 0.005 80)',
             primaryAccent: 'oklch(0.58 0.24 28)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
             textPrimary: 'oklch(0.15 0.005 80)',
             textMuted: 'oklch(0.42 0.01 80)',
             ring: 'oklch(0.58 0.24 28)',
         },
+        darkColors: {
+            canvas: 'oklch(0.13 0.005 80)',
+            surface: 'oklch(0.17 0.008 80)',
+            border: 'oklch(0.35 0.005 80)',
+            primaryAccent: 'oklch(0.68 0.22 28)',
+            onPrimaryAccent: 'oklch(0.12 0.005 80)',
+            textPrimary: 'oklch(0.95 0.005 80)',
+            textMuted: 'oklch(0.65 0.01 80)',
+            ring: 'oklch(0.68 0.22 28)',
+        },
         typography: {
-            display: 'Helvetica Neue, Arial, sans-serif',
-            body: 'Newsreader, Georgia, serif',
+            display: 'Helvetica Neue, Arial, Vazirmatn, sans-serif',
+            body: 'Newsreader, Georgia, Vazirmatn, serif',
             mono: 'Courier New, monospace',
         },
         physics: {
@@ -108,13 +152,24 @@ export const VISUAL_CHEMISTRIES = {
             surface: 'oklch(1 0 0)',
             border: 'oklch(0.90 0.008 247.8)',
             primaryAccent: 'oklch(0.55 0.22 265)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
             textPrimary: 'oklch(0.20 0.02 265)',
             textMuted: 'oklch(0.50 0.02 265)',
             ring: 'oklch(0.55 0.22 265)',
         },
+        darkColors: {
+            canvas: 'oklch(0.13 0.005 265)',
+            surface: 'oklch(0.17 0.008 265)',
+            border: 'oklch(0.26 0.01 265)',
+            primaryAccent: 'oklch(0.65 0.22 265)',
+            onPrimaryAccent: 'oklch(0.99 0 0)',
+            textPrimary: 'oklch(0.98 0 0)',
+            textMuted: 'oklch(0.65 0.01 265)',
+            ring: 'oklch(0.65 0.22 265)',
+        },
         typography: {
-            display: 'Inter, system-ui, sans-serif',
-            body: 'Inter, system-ui, sans-serif',
+            display: 'Vazirmatn, Inter, system-ui, sans-serif',
+            body: 'Vazirmatn, Inter, system-ui, sans-serif',
             mono: 'Fira Code, monospace',
         },
         physics: {

package/dist/registry/components.js

@@ -218,6 +218,90 @@ export function ContrastBadge({ ratio, label = 'WCAG 2.2', className = '' }: Con
     </span>
   );
 }
+`,
+    },
+    'theme-toggle': {
+        name: 'theme-toggle',
+        filename: 'ThemeToggle.tsx',
+        description: 'Accessible dual-theme switch (light/dark) with SVG vector icons, focus ring, and localStorage persistence',
+        code: `'use client';
+
+import React, { useEffect, useState } from 'react';
+
+export interface ThemeToggleProps {
+  className?: string;
+  defaultTheme?: 'light' | 'dark' | 'system';
+}
+
+export function ThemeToggle({ className = '', defaultTheme = 'system' }: ThemeToggleProps) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem('vibe-theme');
+    if (stored === 'light' || stored === 'dark') {
+      setTheme(stored);
+      document.documentElement.classList.toggle('dark', stored === 'dark');
+      document.documentElement.setAttribute('data-theme', stored);
+    } else {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initial = defaultTheme === 'system' ? (prefersDark ? 'dark' : 'light') : defaultTheme;
+      setTheme(initial);
+      document.documentElement.classList.toggle('dark', initial === 'dark');
+      document.documentElement.setAttribute('data-theme', initial);
+    }
+  }, [defaultTheme]);
+
+  const toggleTheme = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    localStorage.setItem('vibe-theme', next);
+    document.documentElement.classList.toggle('dark', next === 'dark');
+    document.documentElement.setAttribute('data-theme', next);
+  };
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        aria-label="Toggle theme"
+        className={\`inline-flex items-center justify-center min-h-[44px] min-w-[44px] p-2.5 rounded-lg border border-neutral-800 bg-neutral-900/50 text-neutral-400 opacity-60 \${className}\`}
+        disabled
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <circle cx="12" cy="12" r="4" strokeWidth="2" />
+        </svg>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={\`Switch to \${theme === 'dark' ? 'light' : 'dark'} mode\`}
+      className={\`inline-flex items-center justify-center min-h-[44px] min-w-[44px] p-2.5 rounded-lg border transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 \${
+        theme === 'dark'
+          ? 'border-neutral-800 bg-neutral-900/80 text-neutral-200 hover:bg-neutral-800 hover:text-white'
+          : 'border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900'
+      } \${className}\`}
+    >
+      {theme === 'dark' ? (
+        /* Sun Icon for switching to light mode */
+        <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" />
+          <path strokeLinecap="round" d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41m14.14-14.14l-1.41 1.41" />
+        </svg>
+      ) : (
+        /* Moon Icon for switching to dark mode */
+        <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      )}
+    </button>
+  );
+}
 `,
     },
 };

package/dist/registry/components.mjs

@@ -215,6 +215,90 @@ export function ContrastBadge({ ratio, label = 'WCAG 2.2', className = '' }: Con
     </span>
   );
 }
+`,
+    },
+    'theme-toggle': {
+        name: 'theme-toggle',
+        filename: 'ThemeToggle.tsx',
+        description: 'Accessible dual-theme switch (light/dark) with SVG vector icons, focus ring, and localStorage persistence',
+        code: `'use client';
+
+import React, { useEffect, useState } from 'react';
+
+export interface ThemeToggleProps {
+  className?: string;
+  defaultTheme?: 'light' | 'dark' | 'system';
+}
+
+export function ThemeToggle({ className = '', defaultTheme = 'system' }: ThemeToggleProps) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem('vibe-theme');
+    if (stored === 'light' || stored === 'dark') {
+      setTheme(stored);
+      document.documentElement.classList.toggle('dark', stored === 'dark');
+      document.documentElement.setAttribute('data-theme', stored);
+    } else {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initial = defaultTheme === 'system' ? (prefersDark ? 'dark' : 'light') : defaultTheme;
+      setTheme(initial);
+      document.documentElement.classList.toggle('dark', initial === 'dark');
+      document.documentElement.setAttribute('data-theme', initial);
+    }
+  }, [defaultTheme]);
+
+  const toggleTheme = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    localStorage.setItem('vibe-theme', next);
+    document.documentElement.classList.toggle('dark', next === 'dark');
+    document.documentElement.setAttribute('data-theme', next);
+  };
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        aria-label="Toggle theme"
+        className={\`inline-flex items-center justify-center min-h-[44px] min-w-[44px] p-2.5 rounded-lg border border-neutral-800 bg-neutral-900/50 text-neutral-400 opacity-60 \${className}\`}
+        disabled
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <circle cx="12" cy="12" r="4" strokeWidth="2" />
+        </svg>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={\`Switch to \${theme === 'dark' ? 'light' : 'dark'} mode\`}
+      className={\`inline-flex items-center justify-center min-h-[44px] min-w-[44px] p-2.5 rounded-lg border transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 \${
+        theme === 'dark'
+          ? 'border-neutral-800 bg-neutral-900/80 text-neutral-200 hover:bg-neutral-800 hover:text-white'
+          : 'border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900'
+      } \${className}\`}
+    >
+      {theme === 'dark' ? (
+        /* Sun Icon for switching to light mode */
+        <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" />
+          <path strokeLinecap="round" d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41m14.14-14.14l-1.41 1.41" />
+        </svg>
+      ) : (
+        /* Moon Icon for switching to dark mode */
+        <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      )}
+    </button>
+  );
+}
 `,
     },
 };

package/dist/tailwind.js

@@ -16,6 +16,7 @@ function createVibeUiPlugin(options = {}) {
             '--vibe-surface': chem.colors.surface,
             '--vibe-border': chem.colors.border,
             '--vibe-primary': chem.colors.primaryAccent,
+            '--vibe-on-primary': chem.colors.onPrimaryAccent,
             '--vibe-text-primary': chem.colors.textPrimary,
             '--vibe-text-muted': chem.colors.textMuted,
             '--vibe-ring': chem.colors.ring,
@@ -33,9 +34,18 @@ function createVibeUiPlugin(options = {}) {
                 '.vibe-spring': {
                     'transition-timing-function': index_1.MOTION_CURVES.naturalSpring,
                 },
+                '.ease-vibe-spring': {
+                    'transition-timing-function': index_1.MOTION_CURVES.naturalSpring,
+                },
                 '.vibe-snap': {
                     'transition-timing-function': index_1.MOTION_CURVES.responsiveSnap,
                 },
+                '.ease-vibe-snap': {
+                    'transition-timing-function': index_1.MOTION_CURVES.responsiveSnap,
+                },
+                '.ease-vibe-glide': {
+                    'transition-timing-function': 'cubic-bezier(0.25, 1, 0.5, 1)',
+                },
                 '.vibe-glass': {
                     'backdrop-filter': 'blur(12px)',
                     '-webkit-backdrop-filter': 'blur(12px)',

package/dist/tailwind.mjs

@@ -12,6 +12,7 @@ export function createVibeUiPlugin(options = {}) {
             '--vibe-surface': chem.colors.surface,
             '--vibe-border': chem.colors.border,
             '--vibe-primary': chem.colors.primaryAccent,
+            '--vibe-on-primary': chem.colors.onPrimaryAccent,
             '--vibe-text-primary': chem.colors.textPrimary,
             '--vibe-text-muted': chem.colors.textMuted,
             '--vibe-ring': chem.colors.ring,
@@ -29,9 +30,18 @@ export function createVibeUiPlugin(options = {}) {
                 '.vibe-spring': {
                     'transition-timing-function': MOTION_CURVES.naturalSpring,
                 },
+                '.ease-vibe-spring': {
+                    'transition-timing-function': MOTION_CURVES.naturalSpring,
+                },
                 '.vibe-snap': {
                     'transition-timing-function': MOTION_CURVES.responsiveSnap,
                 },
+                '.ease-vibe-snap': {
+                    'transition-timing-function': MOTION_CURVES.responsiveSnap,
+                },
+                '.ease-vibe-glide': {
+                    'transition-timing-function': 'cubic-bezier(0.25, 1, 0.5, 1)',
+                },
                 '.vibe-glass': {
                     'backdrop-filter': 'blur(12px)',
                     '-webkit-backdrop-filter': 'blur(12px)',

package/dist/v4.css

@@ -1,20 +1,26 @@
 /**
- * @omid-io/tokens/v4.css — Native Tailwind CSS v4 Theme Preset
+ * vibe-ui-suite/v4.css — Native Tailwind CSS v4 Theme Preset
  * Provides zero-config @theme tokens with perceptual OKLCH color spaces and physics curves.
  * Usage:
  *   @import "tailwindcss";
- *   @import "@omid-io/tokens/v4.css";
+ *   @import "vibe-ui-suite/v4.css";
  */
 
 @theme {
-  /* OKLCH Perceptual Colors — Semantic Palette */
-  --color-vibe-canvas: var(--vibe-canvas, oklch(0.14 0.005 260));
-  --color-vibe-surface: var(--vibe-surface, oklch(0.18 0.008 260));
-  --color-vibe-border: var(--vibe-border, oklch(0.28 0.01 260));
-  --color-vibe-primary: var(--vibe-primary, oklch(0.65 0.22 265));
-  --color-vibe-text-primary: var(--vibe-text-primary, oklch(0.98 0 0));
-  --color-vibe-text-muted: var(--vibe-text-muted, oklch(0.70 0.01 260));
-  --color-vibe-ring: var(--vibe-ring, oklch(0.65 0.22 265));
+  /* OKLCH Perceptual Colors — Semantic Palette (Defaults to Light Mode) */
+  --color-vibe-canvas: var(--vibe-canvas, oklch(0.985 0.002 264));
+  --color-vibe-surface: var(--vibe-surface, oklch(1 0 0));
+  --color-vibe-border: var(--vibe-border, oklch(0.90 0.008 264));
+  --color-vibe-primary: var(--vibe-primary-accent, var(--vibe-primary, oklch(0.55 0.22 260)));
+  --color-vibe-on-primary: var(--vibe-on-primary, oklch(0.99 0 0));
+  --color-vibe-text-primary: var(--vibe-text-primary, oklch(0.14 0.005 264));
+  --color-vibe-text-muted: var(--vibe-text-muted, oklch(0.48 0.015 264));
+  --color-vibe-ring: var(--vibe-ring, oklch(0.55 0.22 260));
+
+  /* Typography Stacks with Vazirmatn Persian Web Font */
+  --font-vibe-sans: Vazirmatn, Inter, system-ui, -apple-system, sans-serif;
+  --font-vibe-display: Vazirmatn, Inter, system-ui, sans-serif;
+  --font-vibe-mono: JetBrains Mono, Menlo, monospace;
 
   /* Spring & Snap Physics Curves */
   --ease-vibe-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -27,6 +33,19 @@
   --shadow-vibe-glass: inset 0 1px 1px rgba(255, 255, 255, 0.15);
 }
 
+/* Fallback Dark Theme Variables when .dark or [data-theme="dark"] is applied */
+.dark, [data-theme="dark"] {
+  --vibe-canvas: oklch(0.14 0.005 264);
+  --vibe-surface: oklch(0.18 0.008 264);
+  --vibe-border: oklch(0.28 0.01 264);
+  --vibe-primary: oklch(0.65 0.22 260);
+  --vibe-primary-accent: oklch(0.65 0.22 260);
+  --vibe-on-primary: oklch(0.99 0 0);
+  --vibe-text-primary: oklch(0.98 0 0);
+  --vibe-text-muted: oklch(0.65 0.015 264);
+  --vibe-ring: oklch(0.65 0.22 260);
+}
+
 /* BiDi Isolation Utility */
 [dir="rtl"] {
   letter-spacing: normal !important;
@@ -37,3 +56,16 @@
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
+
+/* Tailwind CSS v4 Motion & Transition Utilities */
+@utility transition-vibe-spring {
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@utility transition-vibe-snap {
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@utility transition-vibe-glide {
+  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-ui-suite",
-  "version": "4.0.0",
+  "version": "4.8.0",
   "description": "Deterministic design contracts, component recipes, and WCAG AA evaluation gates for AI coding agents (Cursor, Claude Code, Windsurf, Antigravity).",
   "bin": {
     "vibe-ui-suite": "./dist/cli.js",
@@ -23,6 +23,10 @@
     "./v4": "./dist/v4.css",
     "./v4.css": "./dist/v4.css"
   },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "node build.js"
   },

package/build.js

@@ -1,23 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const srcDistDir = path.resolve(__dirname, '../tokens/dist');
-const targetDistDir = path.resolve(__dirname, 'dist');
-
-if (!fs.existsSync(srcDistDir)) {
-  console.error('Error: ../tokens/dist does not exist. Please build @omid-io/tokens first.');
-  process.exit(1);
-}
-
-// Copy recursively from tokens/dist to vibe-ui-suite/dist
-fs.cpSync(srcDistDir, targetDistDir, { recursive: true });
-
-// Ensure executable permission on dist/cli.js
-const cliPath = path.join(targetDistDir, 'cli.js');
-if (fs.existsSync(cliPath)) {
-  try {
-    fs.chmodSync(cliPath, 0o755);
-  } catch (e) {}
-}
-
-console.log('✅ vibe-ui-suite build complete: synchronized dist/ from tokens package.');