vibe-ui-suite 4.0.0

package/dist/registry/components.js

@@ -0,0 +1,223 @@
+"use strict";
+/**
+ * Vibe UI Component Registry
+ * Production-ready, accessible, AI-native React component templates.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMPONENT_REGISTRY = void 0;
+exports.COMPONENT_REGISTRY = {
+    'thinking-drawer': {
+        name: 'thinking-drawer',
+        filename: 'AiThinkingDrawer.tsx',
+        description: 'Collapsible AI reasoning drawer with CSS grid zero-JS transition, radar pulse & telemetry chips',
+        code: `'use client';
+
+import React, { useState } from 'react';
+
+export interface ThinkingStep {
+  id: string;
+  label: string;
+  status: 'completed' | 'in_progress' | 'pending';
+  duration?: string;
+}
+
+export interface ToolExecutionChip {
+  name: string;
+  latency: string;
+  status: 'cached' | 'executed' | 'verified';
+}
+
+export interface AiThinkingDrawerProps {
+  initialOpen?: boolean;
+  title?: string;
+  durationMs?: number;
+  steps?: ThinkingStep[];
+  tools?: ToolExecutionChip[];
+  className?: string;
+}
+
+const DEFAULT_STEPS: ThinkingStep[] = [
+  { id: 's1', label: 'Ingested prompt & computed ambiguity budget', status: 'completed', duration: '18ms' },
+  { id: 's2', label: 'Validated design-spec against JSON Schema', status: 'completed', duration: '42ms' },
+  { id: 's3', label: 'Enforced WCAG AA contrast (>= 4.5:1) in OKLCH space', status: 'completed', duration: '95ms' },
+];
+
+const DEFAULT_TOOLS: ToolExecutionChip[] = [
+  { name: 'vector_search()', latency: '42ms', status: 'cached' },
+  { name: 'contrast_lint()', latency: '18ms', status: 'verified' },
+];
+
+export function AiThinkingDrawer({
+  initialOpen = false,
+  title = 'Reasoning Architecture & Contract Execution',
+  durationMs = 155,
+  steps = DEFAULT_STEPS,
+  tools = DEFAULT_TOOLS,
+  className = '',
+}: AiThinkingDrawerProps) {
+  const [open, setOpen] = useState(initialOpen);
+
+  return (
+    <div
+      className={\`w-full max-w-2xl mx-auto rounded-xl border border-white/10 bg-slate-950/80 backdrop-blur-md overflow-hidden text-slate-100 font-sans shadow-xl \${className}\`}
+      role="region"
+      aria-label="AI Reasoning Details"
+    >
+      <button
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-white/5 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
+      >
+        <div className="flex items-center gap-3">
+          <span className="relative flex h-2.5 w-2.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
+          </span>
+          <span className="text-sm font-medium text-slate-200">{title}</span>
+          <span className="text-xs px-2 py-0.5 rounded-full bg-slate-800 text-slate-400 font-mono">
+            {durationMs}ms
+          </span>
+        </div>
+        <svg
+          className={\`w-4 h-4 text-slate-400 transition-transform duration-200 \${open ? 'rotate-180' : ''}\`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Zero-JS height transition via CSS Grid */}
+      <div
+        className="grid transition-all duration-300 ease-out"
+        style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+      >
+        <div className="overflow-hidden">
+          <div className="p-4 pt-1 border-t border-white/5 space-y-3">
+            <div className="space-y-2">
+              {steps.map((step) => (
+                <div key={step.id} className="flex items-center justify-between text-xs text-slate-300">
+                  <div className="flex items-center gap-2">
+                    <svg className="w-3.5 h-3.5 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>{step.label}</span>
+                  </div>
+                  {step.duration && <span className="font-mono text-slate-500 text-[11px]">{step.duration}</span>}
+                </div>
+              ))}
+            </div>
+
+            {tools.length > 0 && (
+              <div className="pt-2 border-t border-white/5 flex flex-wrap gap-1.5">
+                {tools.map((t, idx) => (
+                  <span
+                    key={idx}
+                    className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-slate-900 border border-slate-800 text-[11px] font-mono text-slate-300"
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400" />
+                    {t.name}
+                    <span className="text-slate-500">{t.latency}</span>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+`,
+    },
+    'telemetry-hud': {
+        name: 'telemetry-hud',
+        filename: 'TelemetryHud.tsx',
+        description: 'LTR-isolated technical metric HUD with micro-borders for latency, tokens, and model status',
+        code: `'use client';
+
+import React from 'react';
+
+export interface TelemetryMetric {
+  label: string;
+  value: string | number;
+  unit?: string;
+  status?: 'nominal' | 'warning' | 'alert';
+}
+
+export interface TelemetryHudProps {
+  metrics?: TelemetryMetric[];
+  className?: string;
+}
+
+const DEFAULT_METRICS: TelemetryMetric[] = [
+  { label: 'Latency', value: '42', unit: 'ms', status: 'nominal' },
+  { label: 'Entropy', value: '0.12', status: 'nominal' },
+  { label: 'Contrast', value: '9.4:1', unit: 'AAA', status: 'nominal' },
+  { label: 'Tokens', value: '1,420', status: 'nominal' },
+];
+
+export function TelemetryHud({ metrics = DEFAULT_METRICS, className = '' }: TelemetryHudProps) {
+  return (
+    <div
+      dir="ltr"
+      className={\`inline-flex items-center gap-4 px-3 py-1.5 rounded-lg border border-white/10 bg-slate-950/70 backdrop-blur-sm text-xs font-mono text-slate-300 shadow-sm \${className}\`}
+    >
+      {metrics.map((m, i) => (
+        <div key={i} className="flex items-center gap-1.5">
+          <span className="text-slate-500 uppercase tracking-wider text-[10px]">{m.label}:</span>
+          <span className="font-semibold text-slate-200">
+            {m.value}
+            {m.unit && <span className="ml-0.5 text-slate-400 text-[10px] font-normal">{m.unit}</span>}
+          </span>
+          {i < metrics.length - 1 && <span className="text-slate-700">|</span>}
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+    },
+    'contrast-badge': {
+        name: 'contrast-badge',
+        filename: 'ContrastBadge.tsx',
+        description: 'WCAG 2.2 contrast compliance badge indicating AA (4.5:1) or AAA (7.0:1) verification',
+        code: `'use client';
+
+import React from 'react';
+
+export interface ContrastBadgeProps {
+  ratio: number;
+  label?: string;
+  className?: string;
+}
+
+export function ContrastBadge({ ratio, label = 'WCAG 2.2', className = '' }: ContrastBadgeProps) {
+  const isAAA = ratio >= 7.0;
+  const isAA = ratio >= 4.5;
+  const isLargeOnly = ratio >= 3.0;
+
+  const status = isAAA ? 'AAA' : isAA ? 'AA' : isLargeOnly ? 'Large Only' : 'Fail';
+  const colorClass = isAA
+    ? 'border-emerald-500/30 bg-emerald-950/40 text-emerald-300'
+    : isLargeOnly
+    ? 'border-amber-500/30 bg-amber-950/40 text-amber-300'
+    : 'border-rose-500/30 bg-rose-950/40 text-rose-300';
+
+  return (
+    <span
+      dir="ltr"
+      className={\`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-mono font-medium \${colorClass} \${className}\`}
+    >
+      <span className="w-1.5 h-1.5 rounded-full bg-current" />
+      <span>{label}</span>
+      <span className="opacity-60">•</span>
+      <span>{ratio.toFixed(1)}:1</span>
+      <span className="px-1 py-0.2 rounded bg-white/10 text-[10px] uppercase">{status}</span>
+    </span>
+  );
+}
+`,
+    },
+};

package/dist/registry/components.mjs

@@ -0,0 +1,220 @@
+/**
+ * Vibe UI Component Registry
+ * Production-ready, accessible, AI-native React component templates.
+ */
+export const COMPONENT_REGISTRY = {
+    'thinking-drawer': {
+        name: 'thinking-drawer',
+        filename: 'AiThinkingDrawer.tsx',
+        description: 'Collapsible AI reasoning drawer with CSS grid zero-JS transition, radar pulse & telemetry chips',
+        code: `'use client';
+
+import React, { useState } from 'react';
+
+export interface ThinkingStep {
+  id: string;
+  label: string;
+  status: 'completed' | 'in_progress' | 'pending';
+  duration?: string;
+}
+
+export interface ToolExecutionChip {
+  name: string;
+  latency: string;
+  status: 'cached' | 'executed' | 'verified';
+}
+
+export interface AiThinkingDrawerProps {
+  initialOpen?: boolean;
+  title?: string;
+  durationMs?: number;
+  steps?: ThinkingStep[];
+  tools?: ToolExecutionChip[];
+  className?: string;
+}
+
+const DEFAULT_STEPS: ThinkingStep[] = [
+  { id: 's1', label: 'Ingested prompt & computed ambiguity budget', status: 'completed', duration: '18ms' },
+  { id: 's2', label: 'Validated design-spec against JSON Schema', status: 'completed', duration: '42ms' },
+  { id: 's3', label: 'Enforced WCAG AA contrast (>= 4.5:1) in OKLCH space', status: 'completed', duration: '95ms' },
+];
+
+const DEFAULT_TOOLS: ToolExecutionChip[] = [
+  { name: 'vector_search()', latency: '42ms', status: 'cached' },
+  { name: 'contrast_lint()', latency: '18ms', status: 'verified' },
+];
+
+export function AiThinkingDrawer({
+  initialOpen = false,
+  title = 'Reasoning Architecture & Contract Execution',
+  durationMs = 155,
+  steps = DEFAULT_STEPS,
+  tools = DEFAULT_TOOLS,
+  className = '',
+}: AiThinkingDrawerProps) {
+  const [open, setOpen] = useState(initialOpen);
+
+  return (
+    <div
+      className={\`w-full max-w-2xl mx-auto rounded-xl border border-white/10 bg-slate-950/80 backdrop-blur-md overflow-hidden text-slate-100 font-sans shadow-xl \${className}\`}
+      role="region"
+      aria-label="AI Reasoning Details"
+    >
+      <button
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-white/5 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
+      >
+        <div className="flex items-center gap-3">
+          <span className="relative flex h-2.5 w-2.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
+          </span>
+          <span className="text-sm font-medium text-slate-200">{title}</span>
+          <span className="text-xs px-2 py-0.5 rounded-full bg-slate-800 text-slate-400 font-mono">
+            {durationMs}ms
+          </span>
+        </div>
+        <svg
+          className={\`w-4 h-4 text-slate-400 transition-transform duration-200 \${open ? 'rotate-180' : ''}\`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Zero-JS height transition via CSS Grid */}
+      <div
+        className="grid transition-all duration-300 ease-out"
+        style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+      >
+        <div className="overflow-hidden">
+          <div className="p-4 pt-1 border-t border-white/5 space-y-3">
+            <div className="space-y-2">
+              {steps.map((step) => (
+                <div key={step.id} className="flex items-center justify-between text-xs text-slate-300">
+                  <div className="flex items-center gap-2">
+                    <svg className="w-3.5 h-3.5 text-emerald-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>{step.label}</span>
+                  </div>
+                  {step.duration && <span className="font-mono text-slate-500 text-[11px]">{step.duration}</span>}
+                </div>
+              ))}
+            </div>
+
+            {tools.length > 0 && (
+              <div className="pt-2 border-t border-white/5 flex flex-wrap gap-1.5">
+                {tools.map((t, idx) => (
+                  <span
+                    key={idx}
+                    className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-slate-900 border border-slate-800 text-[11px] font-mono text-slate-300"
+                  >
+                    <span className="w-1.5 h-1.5 rounded-full bg-indigo-400" />
+                    {t.name}
+                    <span className="text-slate-500">{t.latency}</span>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+`,
+    },
+    'telemetry-hud': {
+        name: 'telemetry-hud',
+        filename: 'TelemetryHud.tsx',
+        description: 'LTR-isolated technical metric HUD with micro-borders for latency, tokens, and model status',
+        code: `'use client';
+
+import React from 'react';
+
+export interface TelemetryMetric {
+  label: string;
+  value: string | number;
+  unit?: string;
+  status?: 'nominal' | 'warning' | 'alert';
+}
+
+export interface TelemetryHudProps {
+  metrics?: TelemetryMetric[];
+  className?: string;
+}
+
+const DEFAULT_METRICS: TelemetryMetric[] = [
+  { label: 'Latency', value: '42', unit: 'ms', status: 'nominal' },
+  { label: 'Entropy', value: '0.12', status: 'nominal' },
+  { label: 'Contrast', value: '9.4:1', unit: 'AAA', status: 'nominal' },
+  { label: 'Tokens', value: '1,420', status: 'nominal' },
+];
+
+export function TelemetryHud({ metrics = DEFAULT_METRICS, className = '' }: TelemetryHudProps) {
+  return (
+    <div
+      dir="ltr"
+      className={\`inline-flex items-center gap-4 px-3 py-1.5 rounded-lg border border-white/10 bg-slate-950/70 backdrop-blur-sm text-xs font-mono text-slate-300 shadow-sm \${className}\`}
+    >
+      {metrics.map((m, i) => (
+        <div key={i} className="flex items-center gap-1.5">
+          <span className="text-slate-500 uppercase tracking-wider text-[10px]">{m.label}:</span>
+          <span className="font-semibold text-slate-200">
+            {m.value}
+            {m.unit && <span className="ml-0.5 text-slate-400 text-[10px] font-normal">{m.unit}</span>}
+          </span>
+          {i < metrics.length - 1 && <span className="text-slate-700">|</span>}
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+    },
+    'contrast-badge': {
+        name: 'contrast-badge',
+        filename: 'ContrastBadge.tsx',
+        description: 'WCAG 2.2 contrast compliance badge indicating AA (4.5:1) or AAA (7.0:1) verification',
+        code: `'use client';
+
+import React from 'react';
+
+export interface ContrastBadgeProps {
+  ratio: number;
+  label?: string;
+  className?: string;
+}
+
+export function ContrastBadge({ ratio, label = 'WCAG 2.2', className = '' }: ContrastBadgeProps) {
+  const isAAA = ratio >= 7.0;
+  const isAA = ratio >= 4.5;
+  const isLargeOnly = ratio >= 3.0;
+
+  const status = isAAA ? 'AAA' : isAA ? 'AA' : isLargeOnly ? 'Large Only' : 'Fail';
+  const colorClass = isAA
+    ? 'border-emerald-500/30 bg-emerald-950/40 text-emerald-300'
+    : isLargeOnly
+    ? 'border-amber-500/30 bg-amber-950/40 text-amber-300'
+    : 'border-rose-500/30 bg-rose-950/40 text-rose-300';
+
+  return (
+    <span
+      dir="ltr"
+      className={\`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-mono font-medium \${colorClass} \${className}\`}
+    >
+      <span className="w-1.5 h-1.5 rounded-full bg-current" />
+      <span>{label}</span>
+      <span className="opacity-60">•</span>
+      <span>{ratio.toFixed(1)}:1</span>
+      <span className="px-1 py-0.2 rounded bg-white/10 text-[10px] uppercase">{status}</span>
+    </span>
+  );
+}
+`,
+    },
+};

package/dist/tailwind.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @vibe-ui/tokens/tailwind
+ * Configurable OKLCH Tailwind CSS preset plugin for Vibe UI supporting all Visual Chemistries.
+ */
+import { VisualChemistryId } from './index';
+export interface VibeUiPluginOptions {
+    chemistry?: VisualChemistryId;
+}
+export declare function createVibeUiPlugin(options?: VibeUiPluginOptions): ({ addBase, addUtilities }: any) => void;
+export declare function vibeUiTailwindPlugin(arg: any): void | (({ addBase, addUtilities }: any) => void);
+export default vibeUiTailwindPlugin;

package/dist/tailwind.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * @vibe-ui/tokens/tailwind
+ * Configurable OKLCH Tailwind CSS preset plugin for Vibe UI supporting all Visual Chemistries.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVibeUiPlugin = createVibeUiPlugin;
+exports.vibeUiTailwindPlugin = vibeUiTailwindPlugin;
+const index_1 = require("./index");
+function createVibeUiPlugin(options = {}) {
+    const chemId = options.chemistry || 'MINIMALIST_SAAS';
+    const chem = index_1.VISUAL_CHEMISTRIES[chemId] || index_1.VISUAL_CHEMISTRIES.MINIMALIST_SAAS;
+    return function ({ addBase, addUtilities }) {
+        const rootVariables = {
+            '--vibe-canvas': chem.colors.canvas,
+            '--vibe-surface': chem.colors.surface,
+            '--vibe-border': chem.colors.border,
+            '--vibe-primary': chem.colors.primaryAccent,
+            '--vibe-text-primary': chem.colors.textPrimary,
+            '--vibe-text-muted': chem.colors.textMuted,
+            '--vibe-ring': chem.colors.ring,
+        };
+        if (addBase) {
+            addBase({
+                ':root': rootVariables,
+                '[dir="rtl"]': {
+                    'letter-spacing': 'normal !important',
+                },
+            });
+        }
+        if (addUtilities) {
+            addUtilities({
+                '.vibe-spring': {
+                    'transition-timing-function': index_1.MOTION_CURVES.naturalSpring,
+                },
+                '.vibe-snap': {
+                    'transition-timing-function': index_1.MOTION_CURVES.responsiveSnap,
+                },
+                '.vibe-glass': {
+                    'backdrop-filter': 'blur(12px)',
+                    '-webkit-backdrop-filter': 'blur(12px)',
+                },
+            });
+        }
+    };
+}
+// Dual-mode handler: functions as direct plugin or configurable plugin factory
+function vibeUiTailwindPlugin(arg) {
+    if (arg && (arg.addBase || arg.addUtilities)) {
+        return createVibeUiPlugin({})(arg);
+    }
+    return createVibeUiPlugin(arg || {});
+}
+exports.default = vibeUiTailwindPlugin;

package/dist/tailwind.mjs

@@ -0,0 +1,50 @@
+/**
+ * @vibe-ui/tokens/tailwind
+ * Configurable OKLCH Tailwind CSS preset plugin for Vibe UI supporting all Visual Chemistries.
+ */
+import { VISUAL_CHEMISTRIES, MOTION_CURVES } from './index';
+export function createVibeUiPlugin(options = {}) {
+    const chemId = options.chemistry || 'MINIMALIST_SAAS';
+    const chem = VISUAL_CHEMISTRIES[chemId] || VISUAL_CHEMISTRIES.MINIMALIST_SAAS;
+    return function ({ addBase, addUtilities }) {
+        const rootVariables = {
+            '--vibe-canvas': chem.colors.canvas,
+            '--vibe-surface': chem.colors.surface,
+            '--vibe-border': chem.colors.border,
+            '--vibe-primary': chem.colors.primaryAccent,
+            '--vibe-text-primary': chem.colors.textPrimary,
+            '--vibe-text-muted': chem.colors.textMuted,
+            '--vibe-ring': chem.colors.ring,
+        };
+        if (addBase) {
+            addBase({
+                ':root': rootVariables,
+                '[dir="rtl"]': {
+                    'letter-spacing': 'normal !important',
+                },
+            });
+        }
+        if (addUtilities) {
+            addUtilities({
+                '.vibe-spring': {
+                    'transition-timing-function': MOTION_CURVES.naturalSpring,
+                },
+                '.vibe-snap': {
+                    'transition-timing-function': MOTION_CURVES.responsiveSnap,
+                },
+                '.vibe-glass': {
+                    'backdrop-filter': 'blur(12px)',
+                    '-webkit-backdrop-filter': 'blur(12px)',
+                },
+            });
+        }
+    };
+}
+// Dual-mode handler: functions as direct plugin or configurable plugin factory
+export function vibeUiTailwindPlugin(arg) {
+    if (arg && (arg.addBase || arg.addUtilities)) {
+        return createVibeUiPlugin({})(arg);
+    }
+    return createVibeUiPlugin(arg || {});
+}
+export default vibeUiTailwindPlugin;

package/dist/v4.css

@@ -0,0 +1,39 @@
+/**
+ * @omid-io/tokens/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";
+ */
+
+@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));
+
+  /* Spring & Snap Physics Curves */
+  --ease-vibe-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-vibe-snap: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-vibe-glide: cubic-bezier(0.25, 1, 0.5, 1);
+
+  /* Elevation & Material Shadows */
+  --shadow-vibe-brutal: 4px 4px 0px #000000;
+  --shadow-vibe-brutal-lg: 6px 6px 0px #000000;
+  --shadow-vibe-glass: inset 0 1px 1px rgba(255, 255, 255, 0.15);
+}
+
+/* BiDi Isolation Utility */
+[dir="rtl"] {
+  letter-spacing: normal !important;
+}
+
+/* Glassmorphism GPU utility */
+.vibe-glass {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "vibe-ui-suite",
+  "version": "4.0.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",
+    "vibe-ui": "./dist/cli.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.mjs",
+      "require": "./dist/tailwind.js"
+    },
+    "./v4": "./dist/v4.css",
+    "./v4.css": "./dist/v4.css"
+  },
+  "scripts": {
+    "build": "node build.js"
+  },
+  "keywords": [
+    "vibe-ui",
+    "vibe-ui-suite",
+    "vibe-coding",
+    "design-tokens",
+    "oklch",
+    "tailwind",
+    "tailwindcss",
+    "ai-agents",
+    "cursor",
+    "cursorrules",
+    "windsurf",
+    "claude-code",
+    "antigravity",
+    "accessibility",
+    "wcag",
+    "anti-slop"
+  ],
+  "author": "Omid Zaferi <https://github.com/omid-io>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/omid-io/vibe-ui-suite.git",
+    "directory": "packages/vibe-ui-suite"
+  },
+  "bugs": {
+    "url": "https://github.com/omid-io/vibe-ui-suite/issues"
+  },
+  "homepage": "https://omid-io.github.io/vibe-ui-suite/"
+}