{"_id":"@aibos/design-system","_rev":"2-da36af9456bc273a5ffbee782ac37d83","name":"@aibos/design-system","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.0":{"name":"@aibos/design-system","version":"1.1.0","keywords":["design-system","css","tokens","ui","components","react","nextjs","tailwind","design-tokens","neural-analog","enterprise","typescript"],"author":{"name":"AI-BOS"},"license":"MIT","_id":"@aibos/design-system@1.1.0","maintainers":[{"name":"aibos88","email":"jackwee2020@gmail.com"}],"homepage":"https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM#readme","bugs":{"url":"https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM/issues"},"dist":{"shasum":"ce90d6f4a8c2f7df86f58dfc4dcc1d1908b06658","tarball":"https://registry.npmjs.org/@aibos/design-system/-/design-system-1.1.0.tgz","fileCount":29,"integrity":"sha512-J4db6Ze4Uyev4IFi7Qzp5taYtvFbHiokK7DJWMKm3A2xyeQDO/E7D5e9hfWNyGRJRFQP2NtvpyWjsztv2rAfVA==","signatures":[{"sig":"MEUCIGGmy6chr04VdCeKyDn3LPG3oMo9JmBfqJRYJCTIhwF7AiEAjpvPWiJz3EFVDZ29GloX5DYWn0HAoulvvK8vx/qWbHY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":463744},"main":"./style.css","type":"module","exports":{".":"./style.css","./css":"./style.css","./react":{"types":"./components/react/index.ts","import":"./components/react/index.ts","require":"./components/react/index.ts"},"./types":{"types":"./types/index.ts","import":"./types/index.ts","require":"./types/index.ts"},"./utils":{"types":"./components/utils.ts","import":"./components/utils.ts","require":"./components/utils.ts"},"./tokens":"./dist/tokens.json","./design-tokens":{"types":"./types/design-tokens.ts","import":"./types/design-tokens.ts","require":"./types/design-tokens.ts"},"./tokens/typescript":"./dist/tokens/index.d.ts"},"gitHead":"a7e204fe850b4166eb81f92826e2045d51e16078","scripts":{"dev":"pnpm exec postcss input.css -o style.css --watch","lint":"eslint . && stylelint \"**/*.css\" --ignore-path .stylelintignore","build":"pnpm exec postcss input.css -o style.css && pnpm extract:tokens","watch":"pnpm exec postcss input.css -o style.css --watch","format":"prettier --write \"**/*.{css,js,ts,json,md}\"","prepare":"pnpm build","quality":"pnpm validate:all","lint:fix":"eslint . --fix && stylelint \"**/*.css\" --fix --ignore-path .stylelintignore","validate":"node scripts/validate-design-tokens.js","format:check":"prettier --check \"**/*.{css,js,ts,json,md}\"","validate:all":"pnpm lint && pnpm validate && pnpm enforce:semantics","extract:tokens":"node scripts/extract-tokens.js","prepublishOnly":"pnpm build","extract:headless":"node scripts/extract-headless-map.cjs","enforce:semantics":"node scripts/enforce-semantics.cjs"},"_npmUser":{"name":"aibos88","email":"jackwee2020@gmail.com"},"repository":{"url":"git+https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM.git","type":"git"},"_npmVersion":"10.9.3","description":"Enterprise-grade design system with 254 tokens, 171 semantic classes, and Beast Mode patterns. Includes React components for Next.js integration. Zero framework overhead, 100% Figma compliant.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","glob":"^11.0.0","eslint":"^9.39.2","postcss":"^8.5.6","prettier":"^3.7.4","stylelint":"^16.26.1","postcss-cli":"^11.0.1","tailwindcss":"^4.1.18","autoprefixer":"^10.4.23","tailwind-merge":"^2.6.0","@tailwindcss/postcss":"^4.1.18","stylelint-config-standard":"^39.0.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","@nextui-org/react":">=2.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"@nextui-org/react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.1.0_1767248609561_0.8888660393010646","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@aibos/design-system","version":"1.1.1","description":"Enterprise-grade design system with 245 tokens, 171 semantic classes, 24 React components, and Beast Mode patterns. Includes Storybook documentation. Zero framework overhead, 100% Figma compliant.","type":"module","keywords":["design-system","css","tokens","ui","components","react","nextjs","tailwind","design-tokens","neural-analog","enterprise","typescript"],"author":{"name":"AI-BOS"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM.git"},"homepage":"https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM#readme","bugs":{"url":"https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM/issues"},"scripts":{"build":"pnpm build:css && pnpm build:ts && pnpm extract:tokens && pnpm extract:api-docs && pnpm extract:css-data && pnpm extract:validation-rules && pnpm extract:helpers-docs && pnpm extract:eslint-config && pnpm extract:shadcn-map && pnpm generate:specs && pnpm generate:adapter all --framework react && pnpm generate:docs","build:fast":"pnpm build:css && pnpm build:ts && pnpm extract:tokens && pnpm extract:api-docs && pnpm extract:css-data && pnpm extract:validation-rules && pnpm extract:helpers-docs && pnpm extract:eslint-config && pnpm extract:shadcn-map","build:prod":"node scripts/build-prod.js","build:css":"pnpm exec postcss input.css -o style.css","build:ts":"tsc -p tsconfig.build.json","watch":"pnpm exec postcss input.css -o style.css --watch","dev":"pnpm exec postcss input.css -o style.css --watch","extract:tokens":"node scripts/extract-tokens.js","extract:headless":"node scripts/extract-headless-map.cjs","extract:api-docs":"node scripts/generate-api-docs.js","extract:css-data":"node scripts/generate-css-custom-data.js","extract:validation-rules":"node scripts/generate-validation-rules.js","extract:helpers-docs":"node scripts/generate-helpers-docs.js","extract:eslint-config":"node scripts/generate-eslint-config.js","extract:shadcn-map":"node scripts/generate-shadcn-map.js","generate:specs":"node scripts/generate-component-specs.js","generate:adapter":"node scripts/generate-adapter.js","generate:types":"node scripts/generate-types.js","generate:docs":"node scripts/generate-all-docs.js","generate:api-reference":"node scripts/generate-api-reference-md.js","cleanup:docs":"node scripts/cleanup-docs.js","cleanup:docs:dry-run":"node scripts/cleanup-docs.js --dry-run","test":"vitest","test:ui":"vitest --ui","test:coverage":"vitest --coverage","test:watch":"vitest --watch","enforce:semantics":"node scripts/enforce-semantics.cjs","lint":"eslint . && stylelint \"**/*.css\" --ignore-path .stylelintignore","lint:fix":"eslint . --fix && stylelint \"**/*.css\" --fix --ignore-path .stylelintignore","format":"prettier --write \"**/*.{css,js,ts,json,md}\"","format:check":"prettier --check \"**/*.{css,js,ts,json,md}\"","validate":"node scripts/validate-design-tokens.js","validate:all":"pnpm lint && pnpm validate && pnpm enforce:semantics","audit":"node scripts/audit-exports.js","quality":"pnpm validate:all","prepublishOnly":"pnpm build","prepare":"pnpm build"},"main":"./style.css","types":"./dist/types/index.d.ts","exports":{".":"./style.css","./css":"./style.css","./tokens":"./dist/tokens.json","./tokens/typescript":"./dist/tokens/index.d.ts","./api-docs":"./dist/api-docs.json","./css-custom-data":"./dist/css-custom-data.json","./validation-rules":"./dist/validation-rules.json","./helpers-docs":"./dist/helpers-docs.json","./eslint-config":"./dist/eslint-config.json","./headless-map":"./dist/headless-map.json","./shadcn-map":"./dist/shadcn-map.json","./shadcn-map/typescript":"./dist/types/shadcn-map.d.ts","./react":{"types":"./dist/components/react/index.d.ts","import":"./dist/components/react/index.js","require":"./dist/components/react/index.js"},"./types":{"types":"./dist/types/index.d.ts","import":"./dist/types/index.js","require":"./dist/types/index.js"},"./utils":{"types":"./dist/components/utils.d.ts","import":"./dist/components/utils.js","require":"./dist/components/utils.js"},"./design-tokens":{"types":"./dist/types/design-tokens.d.ts","import":"./dist/types/design-tokens.js","require":"./dist/types/design-tokens.js"},"./cli":{"types":"./dist/lib/index.d.ts","import":"./dist/lib/index.js","require":"./dist/lib/index.js"},"./components.json":"./components.json","./component-specs":"./dist/component-specs.json","./component-specs/schema":"./schemas/component-spec.schema.json","./adapters/react":{"types":"./dist/adapters/react/index.d.ts","import":"./dist/adapters/react/index.ts","require":"./dist/adapters/react/index.js"},"./adapters/react/utils":{"types":"./adapters/react/utils.d.ts","import":"./adapters/react/utils.ts","require":"./adapters/react/utils.js"},"./themes":{"types":"./themes/index.d.ts","import":"./themes/index.ts","require":"./themes/index.js"},"./themes/light":{"types":"./themes/light-theme.d.ts","import":"./themes/light-theme.ts","require":"./themes/light-theme.js"},"./themes/attractive":{"types":"./themes/attractive-theme.d.ts","import":"./themes/attractive-theme.ts","require":"./themes/attractive-theme.js"},"./themes/rose-pine":{"types":"./themes/rose-pine-theme.d.ts","import":"./themes/rose-pine-theme.ts","require":"./themes/rose-pine-theme.js"},"./themes/catppuccin-frappe":{"types":"./themes/catppuccin-frappe-theme.d.ts","import":"./themes/catppuccin-frappe-theme.ts","require":"./themes/catppuccin-frappe-theme.js"},"./themes/kanagawa":{"types":"./themes/kanagawa-theme.d.ts","import":"./themes/kanagawa-theme.ts","require":"./themes/kanagawa-theme.js"}},"peerDependencies":{"@nextui-org/react":">=2.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"@nextui-org/react":{"optional":true}},"devDependencies":{"@tailwindcss/postcss":"^4.1.18","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@testing-library/user-event":"^14.5.2","@types/node":"^20.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@vitejs/plugin-react":"^4.3.4","@vitest/coverage-v8":"^2.1.9","@vitest/ui":"^2.1.8","ajv":"^8.17.1","ajv-formats":"^3.0.1","autoprefixer":"^10.4.23","clsx":"^2.1.1","eslint":"^9.39.2","glob":"^11.0.0","jsdom":"^25.0.1","postcss":"^8.5.6","postcss-cli":"^11.0.1","prettier":"^3.7.4","stylelint":"^16.26.1","stylelint-config-standard":"^39.0.1","tailwind-merge":"^2.6.0","tailwindcss":"^4.1.18","typescript":"^5.6.0","vitest":"^2.1.8"},"dependencies":{"@radix-ui/react-accordion":"^1.2.1","@radix-ui/react-alert-dialog":"^1.1.2","@radix-ui/react-checkbox":"^1.1.2","@radix-ui/react-dialog":"^1.1.2","@radix-ui/react-dropdown-menu":"^2.1.2","@radix-ui/react-label":"^2.1.0","@radix-ui/react-popover":"^1.1.2","@radix-ui/react-radio-group":"^1.2.1","@radix-ui/react-select":"^2.1.2","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-slider":"^1.2.1","@radix-ui/react-slot":"^1.2.4","@radix-ui/react-switch":"^1.1.1","@radix-ui/react-tabs":"^1.1.1","@radix-ui/react-toast":"^1.2.2","@radix-ui/react-tooltip":"^1.1.3"},"_id":"@aibos/design-system@1.1.1","gitHead":"9a474b737813d2785cc04cbbfe8c71cbb941e280","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-ZjQ5Iio1Qz7yFHEs5NwPAGc/iNOynQs8BGxjfZ1/X72Q8GWkbGpFmqaC8ZInQSBxSpoBHPvuMX6emn595qZH5g==","shasum":"843a5878d623d98a34513ee31044063afc6a8633","tarball":"https://registry.npmjs.org/@aibos/design-system/-/design-system-1.1.1.tgz","fileCount":221,"unpackedSize":1463118,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB2YtXpA+pIBG0YY61pLQ1G0/G/7n+JUJ9mA0IHFac7JAiEAzZ2N7d4H1VTZG2+Ay9ySlRQYK5Ev/ECR3bxp4EVL+Z0="}]},"_npmUser":{"name":"aibos88","email":"jackwee2020@gmail.com"},"directories":{},"maintainers":[{"name":"aibos88","email":"jackwee2020@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_1.1.1_1767452470784_0.06224371520505878"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-01T06:23:29.459Z","modified":"2026-01-03T15:01:11.220Z","1.1.0":"2026-01-01T06:23:29.713Z","1.1.1":"2026-01-03T15:01:10.994Z"},"bugs":{"url":"https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM/issues"},"author":{"name":"AI-BOS"},"license":"MIT","homepage":"https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM#readme","keywords":["design-system","css","tokens","ui","components","react","nextjs","tailwind","design-tokens","neural-analog","enterprise","typescript"],"repository":{"type":"git","url":"git+https://github.com/pohlai88/AIBOS-DESIGN-SYSTEM.git"},"description":"Enterprise-grade design system with 245 tokens, 171 semantic classes, 24 React components, and Beast Mode patterns. Includes Storybook documentation. Zero framework overhead, 100% Figma compliant.","maintainers":[{"name":"aibos88","email":"jackwee2020@gmail.com"}],"readme":"# Neo-Analog Design System v1.1.0\n\n**Version**: 1.1.0  \n**Last Updated**: 2026-01-03  \n**Status**: ✅ **Production-Ready | Beast Mode Enabled | Theme System Complete | shadcn/ui Integrated | React Components Available**\n\n---\n\n## Overview\n\nThe Neo-Analog Design System is an enterprise-grade, production-ready design system that achieves **100% Figma compliance** and delivers **desktop-app performance** with pure CSS/HTML—zero JavaScript framework overhead.\n\n### Key Features\n\n- ✅ **245 Design Tokens** - Comprehensive token system (colors, typography, spacing, shadows, motion)\n- ✅ **24 React Components** - Production-ready React components with TypeScript support\n- ✅ **171 Semantic Classes** - Reusable `.na-*` component classes\n- ✅ **10 Production Themes** - From default dark to GitHub-inspired themes\n- ✅ **Theme Engine** - Enterprise-grade theme system with SSR support\n- ✅ **shadcn/ui Integration** - Complete mapping of 54 shadcn components to AIBOS classes (872 mappings)\n- ✅ **Beast Mode Patterns** - Advanced patterns (Radio State Machine, Bi-directional Grid, Omni Shell)\n- ✅ **100% Figma Compliant** - Full alignment with Figma design system standards\n- ✅ **Zero Framework Overhead** - Pure CSS/HTML implementation\n- ✅ **Drift Prevention** - Automated semantic validation\n- ✅ **Headless Architecture** - Platform-agnostic design API\n- ✅ **IDE Integration** - Full TypeScript support, IntelliSense, and autocomplete\n\n---\n\n## Quick Start\n\n### For External Users (npm Package)\n\n```bash\n# Install\nnpm install @aibos/design-system\n\n# Import CSS\nimport '@aibos/design-system/css';\n# or\nimport '@aibos/design-system';\n\n# Use classes\n<div className=\"na-card na-p-6\">Content</div>\n\n# Or use React components\nimport { Card, Button } from '@aibos/design-system/react';\n```\n\n📖 **See [External Usage Guide](./docs/archive/EXTERNAL_USAGE.md) for complete external usage guide** (archived)  \n📋 **See [API Reference](./docs/API_REFERENCE.md) for typography, spacing, and component reference** (auto-generated)  \n📦 **See [Component Reference](./docs/COMPONENTS.md) for React components** (auto-generated)  \n🎨 **See [Token Reference](./docs/TOKEN_REFERENCE.md) for design tokens** (auto-generated)\n\n### 📋 Quick Reference for npm Users\n\n**Typography Hierarchy:**\n- `.na-h1` = 32px bold (Page titles)\n- `.na-h2` = 24px semibold (Section titles)\n- `.na-h3` = 20px semibold (Subsections)\n- `.na-h4` = 18px semibold (Card titles)\n- `.na-data` = 14px monospace (Data values)\n- `.na-data-large` = 30px serif (KPI values)\n- `.na-metadata` = 11px uppercase (Labels)\n\n**Spacing:**\n- Use standard Tailwind classes: `p-4` (16px), `p-6` (24px), `p-8` (32px)\n- Standard padding: `p-6` (24px)\n- Standard gap: `gap-6` (24px)\n\n**Components:**\n- Cards: `.na-card p-6`\n- Buttons: `.na-btn na-btn-primary`\n- Status: `.na-status na-status-ok`\n\n👉 **Full details in [API Reference](./docs/API_REFERENCE.md)** (auto-generated)\n\n### For Developers (Local Development)\n\n```bash\ncd design_system\npnpm install\n```\n\n### Build\n\n```bash\npnpm build      # Compile CSS, TypeScript, extract tokens, generate docs\npnpm watch      # Watch mode for development\npnpm dev        # Development mode (watch)\n```\n\n**Build Process Includes:**\n- CSS compilation from `input.css`\n- TypeScript compilation\n- Token extraction\n- API documentation generation\n- Auto-generated documentation (API Reference, Token Reference, Component Reference)\n- React adapter generation\n\n### Quality Control\n\n```bash\npnpm quality        # Run all quality checks\npnpm validate       # Design token validation\npnpm lint           # CSS/JS linting\npnpm enforce:semantics  # Drift detection\npnpm validate:all   # Combined validation\n```\n\n---\n\n## Documentation\n\n### Auto-Generated Documentation ⭐ **ALWAYS UP-TO-DATE**\n\nThese documents are automatically generated from the codebase and are always current:\n\n1. **[API Reference](./docs/API_REFERENCE.md)** ⭐ **QUICK REFERENCE**\n   - Typography hierarchy (sizes, weights, usage)\n   - Spacing & padding scale\n   - Component classes\n   - Color tokens\n   - Complete API reference\n   - *Auto-generated from `dist/api-docs.json`*\n\n2. **[Component Reference](./docs/COMPONENTS.md)** ⭐ **REACT COMPONENTS**\n   - 24 production-ready React components\n   - TypeScript definitions\n   - Usage examples\n   - Props documentation\n   - *Auto-generated from `components/react/`*\n\n3. **[Token Reference](./docs/TOKEN_REFERENCE.md)** ⭐ **DESIGN TOKENS**\n   - Complete design token reference\n   - All 245 tokens documented\n   - Color, typography, spacing, shadows, motion\n   - *Auto-generated from `dist/tokens.json`*\n\n**Documentation Generation:**\n- Run `pnpm generate:docs` to regenerate all documentation\n- Documentation is automatically generated during `pnpm build`\n- See [Documentation Evaluation](./docs/DOCUMENTATION_EVALUATION.md) for quality metrics\n\n### Manual Documentation\n\n4. **[Design System Guide](./docs/DESIGN_SYSTEM.md)** ⭐ **COMPLETE REFERENCE**\n   - Complete design system reference\n   - All tokens, components, and patterns\n   - Usage guidelines and examples\n\n5. **[Advanced Patterns](./docs/ADVANCED_PATTERNS.md)** 🚀 **BEAST MODE**\n   - Radio Button State Machine (0ms latency view switching)\n   - Bi-directional Sticky Grid (Frozen panes)\n   - Omni Shell Layout (Grid-based application shell)\n   - Status Select Component\n\n6. **[Quick Start Guide](./adapters/QUICK_START_GUIDE.md)**\n   - Single repository setup\n   - Monorepo integration\n   - Framework integration examples\n\n### Archived Documentation 📦\n\nMany documentation files have been archived in [`docs/archive/`](./docs/archive/) for reference:\n- Theme System guides (moved to archive)\n- External Usage Guide (moved to archive)\n- IDE Integration guides (moved to archive)\n- Historical documentation and migration guides\n\n### AI Agent Protocol\n\n**[AI Design Protocol](./AI_DESIGN_PROTOCOL.md)** - Strict instructions for AI agents to enforce semantic class usage and prevent drift.\n\n---\n\n## Prototypes\n\n### System Launcher\n\n**Start here**: Open [`prototypes/index.html`](./prototypes/index.html) to access the **System Launcher**—a high-impact landing page presenting all prototypes as a cohesive product suite.\n\n### The Neo-Analog Trilogy (Beast Mode)\n\n1. **[The Console](./prototypes/prototype-dashboard-nextgen.html)** 📊\n   - Executive Command Center\n   - Breathing data visualizations\n   - Cinematic lighting effects\n\n2. **[OMNI ERP OS](./prototypes/omni-erp-integrated.html)** ⚡ **GOLD STANDARD**\n   - High-Frequency ERP Operating System\n   - Bi-directional sticky grids\n   - CSS state machines (0ms latency)\n\n3. **[Project AEGIS](./prototypes/prototype-aegis-threat-map.html)** 🛡️\n   - Cybersecurity Threat Map\n   - Pure CSS data visualization\n   - CSS Grid world maps, motion paths, hex-grid topology\n\n### Standard Modules\n\n- **[UI Kit Reference](./prototypes/prototype-ui-kit.html)** - Complete component showcase\n- **[ERP God Mode](./prototypes/prototype-erp-god-mode.html)** - Enterprise ERP dashboard\n- **[Data Lineage](./prototypes/prototype-data-lineage.html)** - Data catalog and lineage\n- **[IDE Dashboard](./prototypes/prototype-ide-dashboard.html)** - IDE-style dashboard\n- **[Supabase ERP](./prototypes/prototype-supabase-erp.html)** - Supabase integration\n\nSee [`prototypes/README.md`](./prototypes/README.md) for complete prototype documentation.\n\n---\n\n## Storybook ⭐ **COMPONENT DOCUMENTATION**\n\nThe design system includes a **Storybook** instance for interactive component documentation and testing.\n\n### Quick Start\n\n```bash\n# Start Storybook dev server (if configured)\npnpm storybook\n\n# Build Storybook for production\npnpm build:storybook\n```\n\n### Storybook Build Output\n\nThe built Storybook is available in the `storybook-static/` directory:\n- **Self-contained**: All HTML, CSS, JS, and assets included\n- **Independent**: Can be deployed separately from the main application\n- **Static**: No server required, works with any static hosting\n\n### Deployment\n\nStorybook can be deployed independently to:\n- **Vercel**: Zero-config deployment with automatic HTTPS\n- **Netlify**: Static site hosting with CI/CD\n- **GitHub Pages**: Free hosting for public repositories\n- **Any static hosting**: Just upload the `storybook-static/` folder\n\n📖 **See [Storybook Deployment Guide](./docs/archive/STORYBOOK_DEPLOYMENT_GUIDE.md) for detailed deployment instructions** (archived)  \n📖 **See [Storybook Setup Guide](./docs/archive/STORYBOOK_SETUP_AND_OPTIMIZATION.md) for configuration details** (archived)\n\n---\n\n## File Structure\n\n```\ndesign_system/\n├── README.md                    # This file\n├── AI_DESIGN_PROTOCOL.md        # AI agent protocol\n├── input.css                    # Source file (all design tokens)\n├── style.css                    # Compiled output\n├── package.json                 # Dependencies and scripts\n├── tailwind.config.js           # Tailwind configuration\n├── postcss.config.js            # PostCSS configuration\n├── eslint.config.js             # JavaScript linting\n├── docs/                        # Documentation\n│   ├── API_REFERENCE.md         # ⭐ Auto-generated API reference\n│   ├── COMPONENTS.md            # ⭐ Auto-generated component reference\n│   ├── TOKEN_REFERENCE.md       # ⭐ Auto-generated token reference\n│   ├── DESIGN_SYSTEM.md         # Main documentation\n│   ├── ADVANCED_PATTERNS.md     # 🚀 Beast Mode patterns\n│   ├── DOCUMENTATION_EVALUATION.md # Documentation quality metrics\n│   └── archive/                 # Archived documentation (90+ files)\n├── components/                  # Component implementations\n│   ├── react/                  # React components (24 components)\n│   │   ├── Button.tsx\n│   │   ├── Card.tsx\n│   │   ├── shells/             # Shell components\n│   │   ├── contexts/           # React contexts\n│   │   └── hooks/              # Custom hooks\n│   ├── html/                   # HTML component examples\n│   ├── web-components/         # Web component implementations\n│   └── ui/                     # UI component utilities\n├── adapters/                    # Framework adapters\n│   ├── react/                  # React adapter\n│   ├── universal/              # Universal adapter\n│   └── web/                    # Web adapter\n├── themes/                      # Theme system (29 theme files)\n│   ├── index.ts                # Theme exports\n│   ├── light-theme.ts\n│   ├── attractive-theme.ts\n│   └── ...                     # Additional themes\n├── prototypes/                  # Production prototypes\n│   ├── index.html              # 🚀 System Launcher\n│   ├── omni-erp-integrated.html # ⚡ Gold Standard\n│   ├── prototype-*.html        # Official prototypes (30+ files)\n│   ├── advanced/               # Advanced prototypes\n│   ├── core/                   # Core prototypes\n│   ├── demos/                  # Demo prototypes\n│   ├── features/               # Feature prototypes\n│   ├── tokens/                 # Token prototypes\n│   ├── README.md               # Prototype documentation\n│   └── archive/                # Archived prototypes\n├── storybook-static/            # Storybook build output\n│   ├── index.html              # Storybook entry point\n│   ├── iframe.html             # Storybook iframe\n│   ├── chunks/                 # JavaScript chunks\n│   ├── assets/                 # CSS, images, fonts\n│   └── sb-common-assets/       # Storybook assets\n├── scripts/                     # Build and validation scripts\n│   ├── enforce-semantics.cjs   # Drift detection\n│   ├── extract-headless-map.cjs # Headless map extraction\n│   ├── extract-tokens.js        # Token extraction\n│   ├── generate-shadcn-map.js  # shadcn/ui mapping generator\n│   ├── generate-all-docs.js    # Documentation generator\n│   ├── generate-api-reference-md.js # API reference generator\n│   ├── cleanup-docs.js         # Documentation cleanup\n│   └── validate-design-tokens.js # Token validation\n├── specs/                       # Component specifications\n│   ├── components/             # Component specs (JSON)\n│   └── examples/               # Spec examples\n├── components.json              # shadcn/ui configuration\n└── dist/                        # Generated files\n    ├── tokens.json              # Extracted tokens\n    ├── headless-map.json        # Headless design map\n    ├── shadcn-map.json          # shadcn/ui component mapping\n    ├── api-docs.json            # API documentation\n    ├── component-specs.json     # Component specifications\n    ├── css-custom-data.json     # VS Code IntelliSense data\n    ├── validation-rules.json    # Validation rules\n    ├── helpers-docs.json        # Helper documentation\n    ├── eslint-config.json       # ESLint configuration\n    ├── components/              # Compiled components\n    ├── adapters/                # Compiled adapters\n    ├── lib/                     # Compiled library code\n    ├── types/                   # TypeScript definitions\n    └── web/                     # Web build output\n```\n\n---\n\n## Usage Examples\n\n### Typography\n\n```html\n<h1 class=\"na-h1\">Page Title</h1>\n<h2 class=\"na-h2\">Section Title</h2>\n<div class=\"na-data\">$12,450.00</div>\n<div class=\"na-metadata\">PO-88219 • Feed Supply</div>\n```\n\n### Components\n\n```html\n<div class=\"na-card\">\n  <h3 class=\"na-h4\">Card Title</h3>\n  <div class=\"na-data\">Data value</div>\n</div>\n```\n\n### Theme System ⭐ **NEW**\n\n```tsx\nimport { ThemeProvider, useThemeSwitch, lightTheme } from '@aibos/design-system/themes';\nimport '@aibos/design-system/css';\n\n// Wrap your app\n<ThemeProvider customThemes={[lightTheme, twilightTheme, attractiveTheme]}>\n  <App />\n</ThemeProvider>\n\n// Switch themes\nfunction ThemeSwitcher() {\n  const { switchToDefault, switchToCustom } = useThemeSwitch();\n  return (\n    <div>\n      <button onClick={() => switchToDefault()}>Default</button>\n      <button onClick={() => switchToCustom('light')}>Light</button>\n      <button onClick={() => switchToCustom('twilight')}>Twilight</button>\n    </div>\n  );\n}\n```\n\n📖 **See [Theme System Complete Guide](./docs/archive/THEME_SYSTEM_COMPLETE_GUIDE.md) for full documentation** (archived)\n\n### Beast Mode Patterns\n\n```html\n<!-- Radio Button State Machine -->\n<input type=\"radio\" name=\"view\" id=\"v-grid\" class=\"na-state-radio\" checked>\n<label for=\"v-grid\" class=\"na-state-label\">Grid</label>\n\n<!-- Bi-directional Sticky Grid -->\n<div class=\"na-grid-frozen\">\n  <table class=\"na-table-frozen\">...</table>\n</div>\n\n<!-- Omni Shell Layout -->\n<div class=\"na-shell-omni\">\n  <header class=\"na-shell-head\">...</header>\n  <aside class=\"na-shell-rail\">...</aside>\n  <main class=\"na-shell-main\">...</main>\n</div>\n```\n\n---\n\n## Scripts Reference\n\n| Command | Description |\n|---------|-------------|\n| `pnpm build` | Full build (CSS, TypeScript, tokens, docs, adapters) |\n| `pnpm build:fast` | Fast build (skip documentation generation) |\n| `pnpm build:css` | Compile CSS from input.css |\n| `pnpm build:ts` | Compile TypeScript |\n| `pnpm watch` | Watch mode for development |\n| `pnpm dev` | Development mode (watch) |\n| `pnpm extract:tokens` | Extract design tokens to JSON |\n| `pnpm extract:headless` | Generate headless design map |\n| `pnpm extract:shadcn-map` | Generate shadcn/ui component mapping |\n| `pnpm extract:api-docs` | Generate API documentation JSON |\n| `pnpm extract:css-data` | Generate CSS custom data for IntelliSense |\n| `pnpm generate:docs` | Generate all documentation (API, Components, Tokens) |\n| `pnpm generate:api-reference` | Generate API reference markdown |\n| `pnpm generate:specs` | Generate component specifications |\n| `pnpm generate:adapter` | Generate framework adapters |\n| `pnpm cleanup:docs` | Cleanup documentation files |\n| `pnpm cleanup:docs:dry-run` | Preview documentation cleanup (dry run) |\n| `pnpm enforce:semantics` | Run drift detection |\n| `pnpm validate` | Validate design tokens |\n| `pnpm validate:all` | Run all validations |\n| `pnpm quality` | Run complete quality check |\n| `pnpm lint` | Run linting |\n| `pnpm lint:fix` | Fix linting issues |\n| `pnpm test` | Run tests |\n| `pnpm test:coverage` | Run tests with coverage |\n| `pnpm storybook` | Start Storybook dev server (if configured) |\n| `pnpm build:storybook` | Build Storybook for production |\n\n---\n\n## Design Tokens & Exports\n\n### Available Exports\n\n```typescript\n// CSS\nimport '@aibos/design-system/css'\n\n// Theme System ⭐ NEW\nimport { ThemeProvider, defaultTheme, lightTheme } from '@aibos/design-system/themes'\nimport { useThemeSwitch, useCurrentTheme } from '@aibos/design-system/themes'\nimport { tokenRegistry } from '@aibos/design-system/themes/token-registry'\nimport { getThemeFromCookiesSSR } from '@aibos/design-system/themes/ssr-utils'\n\n// Tokens (JSON)\nimport tokens from '@aibos/design-system/tokens'\n\n// Tokens (TypeScript)\nimport type { DesignTokens } from '@aibos/design-system/tokens/typescript'\n\n// API Documentation (JSON) - For IDE integration\nimport apiDocs from '@aibos/design-system/api-docs'\n\n// CSS Custom Data (JSON) - For VS Code IntelliSense\nimport cssData from '@aibos/design-system/css-custom-data'\n\n// shadcn/ui Component Mapping (JSON)\nimport shadcnMap from '@aibos/design-system/shadcn-map'\n\n// shadcn/ui Component Mapping (TypeScript)\nimport type { ShadcnMap, ShadcnComponentMapping } from '@aibos/design-system/shadcn-map/typescript'\n\n// shadcn/ui Configuration\nimport componentsConfig from '@aibos/design-system/components.json'\n\n// Headless Map (Class-to-CSS mapping)\nimport headlessMap from '@aibos/design-system/headless-map'\n\n// TypeScript Types\nimport type { ShadcnMap, AIBOSClassesMapping } from '@aibos/design-system/types'\n```\n\n---\n\n## shadcn/ui Integration\n\nThe design system provides **complete integration** with shadcn/ui components, mapping all 54 shadcn components to AIBOS semantic classes.\n\n### Quick Start with shadcn/ui\n\n```bash\n# 1. Install shadcn/ui\nnpx shadcn-ui@latest init\n\n# 2. Install AIBOS Design System\nnpm install @aibos/design-system\n\n# 3. Import AIBOS CSS in your app\nimport '@aibos/design-system/css'\n```\n\n### Using the Mapping\n\n```typescript\n// Import the mapping\nimport shadcnMap from '@aibos/design-system/shadcn-map'\n\n// Get AIBOS classes for a shadcn component\nconst buttonClasses = shadcnMap.mappings.button.aibosClasses\n// Returns: { base: 'na-btn', semantic: [...], utilities: [...], all: [...] }\n\n// Use in your component\nimport { Button } from '@/components/ui/button'\n\n<Button className={shadcnMap.mappings.button.aibosClasses.base}>\n  Click me\n</Button>\n```\n\n### TypeScript Support\n\n```typescript\nimport type { \n  ShadcnMap, \n  ShadcnComponentMapping,\n  AIBOSClassesForComponent \n} from '@aibos/design-system/types'\n\n// Type-safe access\nconst buttonMapping: ShadcnComponentMapping = shadcnMap.mappings.button\n\n// Helper types\ntype ButtonClasses = AIBOSClassesForComponent<'button'>\n```\n\n### Component Mapping Examples\n\n**Button Component:**\n```tsx\nimport { Button } from '@/components/ui/button'\nimport shadcnMap from '@aibos/design-system/shadcn-map'\n\n// Primary button\n<Button className={shadcnMap.mappings.button.aibosClasses.base}>\n  Primary Action\n</Button>\n\n// With recommended classes\n<Button className={`${shadcnMap.mappings.button.aibosClasses.base} ${shadcnMap.mappings.button.aibosClasses.semantic[1]}`}>\n  Styled Button\n</Button>\n```\n\n**Card Component:**\n```tsx\nimport { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'\nimport shadcnMap from '@aibos/design-system/shadcn-map'\n\n<Card className={shadcnMap.mappings.card.aibosClasses.base}>\n  <CardHeader className={shadcnMap.mappings.card.parts.CardHeader?.join(' ')}>\n    <CardTitle className={shadcnMap.mappings.card.parts.CardTitle?.join(' ')}>\n      Card Title\n    </CardTitle>\n  </CardHeader>\n  <CardContent className={shadcnMap.mappings.card.parts.CardContent?.join(' ')}>\n    Content here\n  </CardContent>\n</Card>\n```\n\n### Mapping Statistics\n\n- **54 shadcn components** fully mapped\n- **872 total mappings** generated\n- **172 AIBOS classes** available\n- **100% coverage** of shadcn/ui components\n- **IDE-friendly** with IntelliSense metadata\n\n### Configuration\n\nThe `components.json` file is included in the package and can be imported:\n\n```typescript\nimport componentsConfig from '@aibos/design-system/components.json'\n\n// Access shadcn/ui configuration\nconsole.log(componentsConfig.style) // \"new-york\"\nconsole.log(componentsConfig.tailwind.css) // \"input.css\"\n```\n\n### IDE Integration\n\nThe mapping includes IDE-friendly metadata for VS Code, WebStorm, and TypeScript:\n\n- **IntelliSense**: Full autocomplete for component mappings\n- **Type Safety**: Complete TypeScript definitions\n- **Hover Documentation**: Detailed descriptions for each component\n- **Usage Examples**: Code snippets for each component\n\nSee [IDE Integration Guide](./docs/archive/IDE_INTEGRATION.md) for complete IDE setup guide (archived).\n\n---\n\n## React Components ⭐ **NEW**\n\nThe design system includes **24 production-ready React components** with full TypeScript support:\n\n### Available Components\n\n- **Layout Components**: Card, Shell components (CommandCenter, Sidebar, MasterDetail, etc.)\n- **Interactive Components**: Button, StatusIndicator\n- **Context Providers**: AuthContext, KeyboardManager\n- **Custom Hooks**: useDebounce, useIntersectionObserver, useVirtualScroll\n\n### Quick Start with React\n\n```bash\n# Install\nnpm install @aibos/design-system\n```\n\n```tsx\n// Import React components\nimport { Button, Card } from '@aibos/design-system/react';\nimport '@aibos/design-system/css';\n\n// Use components\nfunction App() {\n  return (\n    <Card>\n      <h3 className=\"na-h4\">Card Title</h3>\n      <Button className=\"na-btn na-btn-primary\">\n        Click me\n      </Button>\n    </Card>\n  );\n}\n```\n\n### Next.js Integration\n\nThe React components are fully compatible with Next.js and support SSR:\n\n```tsx\n// app/layout.tsx or pages/_app.tsx\nimport '@aibos/design-system/css';\nimport { ThemeProvider } from '@aibos/design-system/themes';\n```\n\n📖 **See [Component Reference](./docs/COMPONENTS.md) for complete React component documentation** (auto-generated)\n\n## Support\n\nFor questions or issues:\n\n1. **Auto-Generated Docs**: Check [API Reference](./docs/API_REFERENCE.md), [Component Reference](./docs/COMPONENTS.md), or [Token Reference](./docs/TOKEN_REFERENCE.md) first\n2. **Theme System**: Check [Theme System Complete Guide](./docs/archive/THEME_SYSTEM_COMPLETE_GUIDE.md) (archived)\n3. **External users**: Check [External Usage Guide](./docs/archive/EXTERNAL_USAGE.md) (archived)\n4. **Developers**: Check [Design System Guide](./docs/DESIGN_SYSTEM.md) first\n5. **Documentation Quality**: See [Documentation Evaluation](./docs/DOCUMENTATION_EVALUATION.md) for metrics\n6. Review [Advanced Patterns](./docs/ADVANCED_PATTERNS.md) for Beast Mode patterns\n7. Run `pnpm quality` to check for issues\n8. Review validation output\n\n---\n\n## Status\n\n**Version**: 1.1.0  \n**Last Updated**: 2026-01-03  \n**Status**: ✅ **Production Ready**  \n**Beast Mode**: ✅ **Enabled**  \n**Theme System**: ✅ **10 production themes**  \n**React Components**: ✅ **24 production-ready components**  \n**shadcn/ui Integration**: ✅ **54 components mapped (872 mappings)**  \n**Storybook**: ✅ **Component documentation available**  \n**Prototypes**: 30+ production-ready modules  \n**Documentation**: ✅ **Complete with auto-generated docs**\n\n---\n\n**Neo-Analog Design System** - Enterprise-grade UI framework with zero framework overhead.\n","readmeFilename":"README.md"}