vibe-ui-suite 4.0.0

package/dist/cli.mjs

@@ -0,0 +1,243 @@
+#!/usr/bin/env node
+import * as fs from 'fs';
+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';
+function printBanner() {
+    console.log(`
+\x1b[35m  ▲ VIBE UI CLI v${VERSION}\x1b[0m
+  \x1b[90mDeterministic UI contracts & component primitives for AI coding assistants\x1b[0m
+`);
+}
+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
+  \x1b[32minit\x1b[0m               Initialize Vibe UI contracts, OKLCH tokens & AI rules in current project
+  \x1b[32madd <component>\x1b[0m     Add an accessible, AI-native component template to your project
+  \x1b[32mlist\x1b[0m               List all available component primitives in the registry
+
+\x1b[1mOPTIONS:\x1b[0m
+  -f, --force        Overwrite existing files (creates automated .bak backups)
+  --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 --dry-run
+  npx vibe-ui-suite add thinking-drawer
+  npx vibe-ui-suite add thinking-drawer --force
+`);
+}
+function prompt(rl, query) {
+    return new Promise((resolve) => rl.question(query, resolve));
+}
+function safeWriteFile(filePath, content, options) {
+    const relPath = path.relative(process.cwd(), filePath);
+    if (options.dryRun) {
+        console.log(`  \x1b[34m[dry-run]\x1b[0m Would write: ${relPath}`);
+        return { written: false, skipped: false };
+    }
+    if (fs.existsSync(filePath) && !options.force) {
+        console.log(`  \x1b[33m[skip]\x1b[0m ${relPath} already exists. (Use --force to overwrite)`);
+        return { written: false, skipped: true };
+    }
+    if (fs.existsSync(filePath) && options.force) {
+        const backupPath = `${filePath}.bak`;
+        fs.copyFileSync(filePath, backupPath);
+        fs.writeFileSync(filePath, content, 'utf-8');
+        console.log(`  \x1b[35m[backup]\x1b[0m Backed up existing file to ${path.relative(process.cwd(), backupPath)}`);
+        return { written: true, skipped: false, backup: backupPath };
+    }
+    fs.writeFileSync(filePath, content, 'utf-8');
+    return { written: true, skipped: false };
+}
+const CONTRACT_RULES = `# Vibe UI Design & Code Quality Contract
+# Generated via npx vibe-ui-suite init
+
+Follow strict anti-slop guidelines:
+- Zero raw unicode emojis (use inline SVGs only)
+- Strict WCAG 2.2 AA contrast (>= 4.5:1 body, >= 3.0:1 headings)
+- Use typed OKLCH color spaces for perceptual accuracy
+- Strict maximum of 3 backdrop-filter / glass layers
+- Semantic RTL: preserve physical macro coordinate stability
+`;
+async function handleInit(options) {
+    printBanner();
+    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');
+        }
+        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');
+            }
+        }
+        if (editorChoice === '3' || editorChoice === '4') {
+            const res = safeWriteFile(path.join(cwd, '.windsurfrules'), CONTRACT_RULES, options);
+            if (res.written)
+                createdFiles.push('.windsurfrules');
+        }
+        // 4. Generate CSS Tokens file safely
+        const cssContent = `:root {
+  /* Vibe UI Chemistry: ${selectedChem.name} (${selectedChem.id}) */
+  --vibe-canvas: ${selectedChem.colors.canvas};
+  --vibe-surface: ${selectedChem.colors.surface};
+  --vibe-border: ${selectedChem.colors.border};
+  --vibe-primary-accent: ${selectedChem.colors.primaryAccent};
+  --vibe-text-primary: ${selectedChem.colors.textPrimary};
+  --vibe-text-muted: ${selectedChem.colors.textMuted};
+  --vibe-ring: ${selectedChem.colors.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(`
+\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
+`);
+    }
+    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]');
+        process.exit(1);
+        return;
+    }
+    const comp = COMPONENT_REGISTRY[componentName.toLowerCase()];
+    if (!comp) {
+        console.log(`\x1b[31mError: Unknown component "${componentName}".\x1b[0m\n`);
+        handleList();
+        process.exit(1);
+        return;
+    }
+    const cwd = process.cwd();
+    const targetDir = path.join(cwd, 'components', 'vibe-ui');
+    if (!options.dryRun) {
+        fs.mkdirSync(targetDir, { recursive: true });
+    }
+    const targetFile = path.join(targetDir, comp.filename);
+    const writeRes = safeWriteFile(targetFile, comp.code, options);
+    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`);
+        return;
+    }
+    if (writeRes.written) {
+        console.log(`\x1b[32m✔ Added component "${comp.name}"!\x1b[0m`);
+        console.log(`  \x1b[90mLocation:\x1b[0m components/vibe-ui/${comp.filename}`);
+        console.log(`  \x1b[90mDescription:\x1b[0m ${comp.description}\n`);
+        console.log(`\x1b[1mUsage in your page or view:\x1b[0m`);
+        console.log(`  import { ${comp.filename.replace('.tsx', '')} } from '@/components/vibe-ui/${comp.filename.replace('.tsx', '')}';\n`);
+    }
+}
+function handleList() {
+    console.log('\x1b[1mAvailable Vibe UI Components:\x1b[0m');
+    Object.values(COMPONENT_REGISTRY).forEach((comp) => {
+        console.log(`  \x1b[32m${comp.name.padEnd(18)}\x1b[0m \x1b[90m${comp.description}\x1b[0m`);
+    });
+}
+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 cmd = filteredArgs[0]?.toLowerCase();
+    const options = { force, dryRun };
+    if (!cmd || cmd === '--help' || cmd === '-h') {
+        printHelp();
+        return;
+    }
+    if (cmd === '--version' || cmd === '-v') {
+        console.log(`v${VERSION}`);
+        return;
+    }
+    switch (cmd) {
+        case 'init':
+            await handleInit(options);
+            break;
+        case 'add':
+            handleAdd(filteredArgs[1], options);
+            break;
+        case 'list':
+            printBanner();
+            handleList();
+            break;
+        default:
+            console.log(`\x1b[31mUnknown command "${cmd}".\x1b[0m`);
+            printHelp();
+            process.exit(1);
+    }
+}
+main().catch((err) => {
+    console.error('\x1b[31mFatal CLI error:\x1b[0m', err);
+    process.exit(1);
+});

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @vibe-ui/tokens
+ * Typed OKLCH design tokens, physics curves, and contrast utilities.
+ */
+export type VisualChemistryId = 'MINIMALIST_SAAS' | 'LUXURY_GLASS_2' | 'NEOBRUTALISM' | 'SWISS_EDITORIAL' | 'STRIPE_CRISP_LIGHT';
+export interface ChemistryColors {
+    canvas: string;
+    surface: string;
+    border: string;
+    primaryAccent: string;
+    textPrimary: string;
+    textMuted: string;
+    ring: string;
+}
+export interface ChemistryTypography {
+    display: string;
+    body: string;
+    mono: string;
+}
+export interface ChemistryPhysics {
+    springStiffness: number;
+    dampingRatio: number;
+    lerpAlpha: string;
+}
+export interface VisualChemistry {
+    id: VisualChemistryId;
+    name: string;
+    tagline: string;
+    colors: ChemistryColors;
+    typography: ChemistryTypography;
+    physics: ChemistryPhysics;
+}
+export declare const VISUAL_CHEMISTRIES: Record<VisualChemistryId, VisualChemistry>;
+/** Easing curves adhering to Vibe UI motion standards */
+export declare const MOTION_CURVES: {
+    readonly naturalSpring: "cubic-bezier(0.16, 1, 0.3, 1)";
+    readonly responsiveSnap: "cubic-bezier(0.25, 1, 0.5, 1)";
+    readonly crispEnter: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly crispExit: "cubic-bezier(0.4, 0, 1, 1)";
+};
+/** Relative luminance formula conforming to WCAG 2.2 */
+export declare function getRelativeLuminance(r: number, g: number, b: number): number;
+/** Contrast ratio between two luminance values */
+export declare function getContrastRatio(lumA: number, lumB: number): number;

package/dist/index.js

@@ -0,0 +1,152 @@
+"use strict";
+/**
+ * @vibe-ui/tokens
+ * Typed OKLCH design tokens, physics curves, and contrast utilities.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOTION_CURVES = exports.VISUAL_CHEMISTRIES = void 0;
+exports.getRelativeLuminance = getRelativeLuminance;
+exports.getContrastRatio = getContrastRatio;
+exports.VISUAL_CHEMISTRIES = {
+    MINIMALIST_SAAS: {
+        id: 'MINIMALIST_SAAS',
+        name: 'Minimalist SaaS',
+        tagline: 'High-signal B2B productivity with subtle borders and monochrome restraint',
+        colors: {
+            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)',
+            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',
+            mono: 'JetBrains Mono, Menlo, monospace',
+        },
+        physics: {
+            springStiffness: 280,
+            dampingRatio: 0.85,
+            lerpAlpha: '1 - Math.exp(-14 * dt)',
+        },
+    },
+    LUXURY_GLASS_2: {
+        id: 'LUXURY_GLASS_2',
+        name: 'Luxury Glassmorphism 2.0',
+        tagline: 'Deep dark substrates with specular highlights and gold accents',
+        colors: {
+            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)',
+            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',
+            mono: 'JetBrains Mono, monospace',
+        },
+        physics: {
+            springStiffness: 180,
+            dampingRatio: 0.92,
+            lerpAlpha: '1 - Math.exp(-8 * dt)',
+        },
+    },
+    NEOBRUTALISM: {
+        id: 'NEOBRUTALISM',
+        name: 'Neobrutalism',
+        tagline: 'High-contrast saturated flat cards with hard 3px black offset shadows',
+        colors: {
+            canvas: 'oklch(0.96 0.01 95)',
+            surface: 'oklch(0.99 0.002 95)',
+            border: 'oklch(0.15 0.01 95)',
+            primaryAccent: 'oklch(0.82 0.20 135)',
+            textPrimary: 'oklch(0.12 0.01 95)',
+            textMuted: 'oklch(0.35 0.02 95)',
+            ring: 'oklch(0.15 0.01 95)',
+        },
+        typography: {
+            display: 'Space Grotesk, Syne, sans-serif',
+            body: 'Space Grotesk, sans-serif',
+            mono: 'Space Mono, monospace',
+        },
+        physics: {
+            springStiffness: 450,
+            dampingRatio: 0.7,
+            lerpAlpha: '1 - Math.exp(-22 * dt)',
+        },
+    },
+    SWISS_EDITORIAL: {
+        id: 'SWISS_EDITORIAL',
+        name: 'Swiss Editorial',
+        tagline: 'Asymmetric typography-first layout inspired by International Typographic Style',
+        colors: {
+            canvas: 'oklch(0.97 0.005 80)',
+            surface: 'oklch(0.93 0.008 80)',
+            border: 'oklch(0.20 0.005 80)',
+            primaryAccent: 'oklch(0.58 0.24 28)',
+            textPrimary: 'oklch(0.15 0.005 80)',
+            textMuted: 'oklch(0.42 0.01 80)',
+            ring: 'oklch(0.58 0.24 28)',
+        },
+        typography: {
+            display: 'Helvetica Neue, Arial, sans-serif',
+            body: 'Newsreader, Georgia, serif',
+            mono: 'Courier New, monospace',
+        },
+        physics: {
+            springStiffness: 300,
+            dampingRatio: 0.9,
+            lerpAlpha: '1 - Math.exp(-12 * dt)',
+        },
+    },
+    STRIPE_CRISP_LIGHT: {
+        id: 'STRIPE_CRISP_LIGHT',
+        name: 'Stripe Crisp Light',
+        tagline: 'Ultra-clean developer-first documentation layout with refined micro-borders',
+        colors: {
+            canvas: 'oklch(0.985 0.002 247.8)',
+            surface: 'oklch(1 0 0)',
+            border: 'oklch(0.90 0.008 247.8)',
+            primaryAccent: 'oklch(0.55 0.22 265)',
+            textPrimary: 'oklch(0.20 0.02 265)',
+            textMuted: 'oklch(0.50 0.02 265)',
+            ring: 'oklch(0.55 0.22 265)',
+        },
+        typography: {
+            display: 'Inter, system-ui, sans-serif',
+            body: 'Inter, system-ui, sans-serif',
+            mono: 'Fira Code, monospace',
+        },
+        physics: {
+            springStiffness: 320,
+            dampingRatio: 0.88,
+            lerpAlpha: '1 - Math.exp(-16 * dt)',
+        },
+    },
+};
+/** Easing curves adhering to Vibe UI motion standards */
+exports.MOTION_CURVES = {
+    naturalSpring: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    responsiveSnap: 'cubic-bezier(0.25, 1, 0.5, 1)',
+    crispEnter: 'cubic-bezier(0, 0, 0.2, 1)',
+    crispExit: 'cubic-bezier(0.4, 0, 1, 1)',
+};
+/** Relative luminance formula conforming to WCAG 2.2 */
+function getRelativeLuminance(r, g, b) {
+    const transform = (c) => {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * transform(r) + 0.7152 * transform(g) + 0.0722 * transform(b);
+}
+/** Contrast ratio between two luminance values */
+function getContrastRatio(lumA, lumB) {
+    const l1 = Math.max(lumA, lumB);
+    const l2 = Math.min(lumA, lumB);
+    return (l1 + 0.05) / (l2 + 0.05);
+}

package/dist/index.mjs

@@ -0,0 +1,147 @@
+/**
+ * @vibe-ui/tokens
+ * Typed OKLCH design tokens, physics curves, and contrast utilities.
+ */
+export const VISUAL_CHEMISTRIES = {
+    MINIMALIST_SAAS: {
+        id: 'MINIMALIST_SAAS',
+        name: 'Minimalist SaaS',
+        tagline: 'High-signal B2B productivity with subtle borders and monochrome restraint',
+        colors: {
+            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)',
+            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',
+            mono: 'JetBrains Mono, Menlo, monospace',
+        },
+        physics: {
+            springStiffness: 280,
+            dampingRatio: 0.85,
+            lerpAlpha: '1 - Math.exp(-14 * dt)',
+        },
+    },
+    LUXURY_GLASS_2: {
+        id: 'LUXURY_GLASS_2',
+        name: 'Luxury Glassmorphism 2.0',
+        tagline: 'Deep dark substrates with specular highlights and gold accents',
+        colors: {
+            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)',
+            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',
+            mono: 'JetBrains Mono, monospace',
+        },
+        physics: {
+            springStiffness: 180,
+            dampingRatio: 0.92,
+            lerpAlpha: '1 - Math.exp(-8 * dt)',
+        },
+    },
+    NEOBRUTALISM: {
+        id: 'NEOBRUTALISM',
+        name: 'Neobrutalism',
+        tagline: 'High-contrast saturated flat cards with hard 3px black offset shadows',
+        colors: {
+            canvas: 'oklch(0.96 0.01 95)',
+            surface: 'oklch(0.99 0.002 95)',
+            border: 'oklch(0.15 0.01 95)',
+            primaryAccent: 'oklch(0.82 0.20 135)',
+            textPrimary: 'oklch(0.12 0.01 95)',
+            textMuted: 'oklch(0.35 0.02 95)',
+            ring: 'oklch(0.15 0.01 95)',
+        },
+        typography: {
+            display: 'Space Grotesk, Syne, sans-serif',
+            body: 'Space Grotesk, sans-serif',
+            mono: 'Space Mono, monospace',
+        },
+        physics: {
+            springStiffness: 450,
+            dampingRatio: 0.7,
+            lerpAlpha: '1 - Math.exp(-22 * dt)',
+        },
+    },
+    SWISS_EDITORIAL: {
+        id: 'SWISS_EDITORIAL',
+        name: 'Swiss Editorial',
+        tagline: 'Asymmetric typography-first layout inspired by International Typographic Style',
+        colors: {
+            canvas: 'oklch(0.97 0.005 80)',
+            surface: 'oklch(0.93 0.008 80)',
+            border: 'oklch(0.20 0.005 80)',
+            primaryAccent: 'oklch(0.58 0.24 28)',
+            textPrimary: 'oklch(0.15 0.005 80)',
+            textMuted: 'oklch(0.42 0.01 80)',
+            ring: 'oklch(0.58 0.24 28)',
+        },
+        typography: {
+            display: 'Helvetica Neue, Arial, sans-serif',
+            body: 'Newsreader, Georgia, serif',
+            mono: 'Courier New, monospace',
+        },
+        physics: {
+            springStiffness: 300,
+            dampingRatio: 0.9,
+            lerpAlpha: '1 - Math.exp(-12 * dt)',
+        },
+    },
+    STRIPE_CRISP_LIGHT: {
+        id: 'STRIPE_CRISP_LIGHT',
+        name: 'Stripe Crisp Light',
+        tagline: 'Ultra-clean developer-first documentation layout with refined micro-borders',
+        colors: {
+            canvas: 'oklch(0.985 0.002 247.8)',
+            surface: 'oklch(1 0 0)',
+            border: 'oklch(0.90 0.008 247.8)',
+            primaryAccent: 'oklch(0.55 0.22 265)',
+            textPrimary: 'oklch(0.20 0.02 265)',
+            textMuted: 'oklch(0.50 0.02 265)',
+            ring: 'oklch(0.55 0.22 265)',
+        },
+        typography: {
+            display: 'Inter, system-ui, sans-serif',
+            body: 'Inter, system-ui, sans-serif',
+            mono: 'Fira Code, monospace',
+        },
+        physics: {
+            springStiffness: 320,
+            dampingRatio: 0.88,
+            lerpAlpha: '1 - Math.exp(-16 * dt)',
+        },
+    },
+};
+/** Easing curves adhering to Vibe UI motion standards */
+export const MOTION_CURVES = {
+    naturalSpring: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    responsiveSnap: 'cubic-bezier(0.25, 1, 0.5, 1)',
+    crispEnter: 'cubic-bezier(0, 0, 0.2, 1)',
+    crispExit: 'cubic-bezier(0.4, 0, 1, 1)',
+};
+/** Relative luminance formula conforming to WCAG 2.2 */
+export function getRelativeLuminance(r, g, b) {
+    const transform = (c) => {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * transform(r) + 0.7152 * transform(g) + 0.0722 * transform(b);
+}
+/** Contrast ratio between two luminance values */
+export function getContrastRatio(lumA, lumB) {
+    const l1 = Math.max(lumA, lumB);
+    const l2 = Math.min(lumA, lumB);
+    return (l1 + 0.05) / (l2 + 0.05);
+}

package/dist/registry/components.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Vibe UI Component Registry
+ * Production-ready, accessible, AI-native React component templates.
+ */
+export interface ComponentTemplate {
+    name: string;
+    filename: string;
+    description: string;
+    code: string;
+}
+export declare const COMPONENT_REGISTRY: Record<string, ComponentTemplate>;