{"id":30823017,"url":"https://github.com/dev-ignis/forge","last_synced_at":"2026-05-15T06:36:31.880Z","repository":{"id":312202032,"uuid":"1046550616","full_name":"dev-ignis/forge","owner":"dev-ignis","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-05T16:01:48.000Z","size":2933,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-05T16:38:16.753Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-ignis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-28T21:16:14.000Z","updated_at":"2025-09-05T14:38:21.000Z","dependencies_parsed_at":"2025-08-29T07:50:41.325Z","dependency_job_id":null,"html_url":"https://github.com/dev-ignis/forge","commit_stats":null,"previous_names":["dev-ignis/forge"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/dev-ignis/forge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-ignis%2Fforge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-ignis%2Fforge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-ignis%2Fforge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-ignis%2Fforge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-ignis","download_url":"https://codeload.github.com/dev-ignis/forge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-ignis%2Fforge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273880195,"owners_count":25184428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-06T11:02:31.487Z","updated_at":"2026-05-15T06:36:31.874Z","avatar_url":"https://github.com/dev-ignis.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries"],"readme":"# @nexcraft/forge\n\n[![npm version](https://img.shields.io/npm/v/@nexcraft/forge.svg)](https://www.npmjs.com/package/@nexcraft/forge)\n[![Bundle Size](https://img.shields.io/badge/bundle%20size-\u003c10KB-brightgreen.svg)](https://bundlephobia.com/package/@nexcraft/forge)\n[![Test Coverage](https://img.shields.io/badge/coverage-86.4%25-brightgreen.svg)](./coverage)\n[![WCAG 2.1 AA](https://img.shields.io/badge/WCAG%202.1-AA-blue.svg)](https://www.w3.org/WAI/WCAG21/quickref/)\n[![AI-Native](https://img.shields.io/badge/AI-Native-purple.svg)](./docs/ai/metadata-reference.md)\n[![Performance Monitored](https://img.shields.io/badge/Performance-Monitored-orange.svg)](./docs/performance-monitoring.md)\n[![Figma Tokens](https://img.shields.io/badge/Figma%20Tokens-CLI%2FMCP-blue.svg)](./docs/guides/figma-to-forge.md)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\n\u003e **\"Write Once, Use Forever\"** - A future-proof UI component library built on web standards that will outlive framework trends.\n\n**The FIRST AI-Native component library with built-in AI metadata, design token bridge, and real-time performance dashboard.** Every component can explain its state to AI systems, monitor its own performance, and integrate seamlessly with AI coding tools like Cursor, GitHub Copilot, and Claude. Import design tokens from any system (Figma, Tailwind, Material Design) with zero configuration - built for the age of AI-assisted development.\n\n## 🤖 **FOR AI ASSISTANTS \u0026 LLMs**\n\n**AI Context**: @nexcraft/forge is an AI-native web component library with 26+ components and React/Vue/Angular integrations.\n\n**Quick AI Reference**:\n- 📦 **React**: `import { ForgeButton, ForgeInput } from '@nexcraft/forge-react'`\n- 🌲 **Selective**: `import { ForgeButton } from '@nexcraft/forge/button'`\n- 🎨 **Tailwind**: `import forgePlugin from '@nexcraft/forge/plugin'`\n- 📝 **Forms**: `import { RHFForgeInput } from '@nexcraft/forge-rhf'`\n\n**📚 AI Documentation**:\n- [🤖 AI Metadata Reference](./docs/ai/metadata-reference.md) - Complete AI metadata system guide (interfaces, methods, implementation)\n- [🤖 AI Integration Guide](./docs/ai/integration-guide.md) - ChatGPT, Claude, Copilot integration examples \u0026 common patterns\n- [🎨 Styling Guide](./docs/guides/AI_STYLING_GUIDE.md) - Complete styling reference (variants, CSS, Tailwind)\n- [📦 Import Guide](./docs/guides/AI_IMPORT_GUIDE.md) - All import methods \u0026 framework examples\n- [🤖 AI Manifest](./ai-manifest.json) - Structured component metadata\n\n### 🤖 **AI Manifest Files** - Machine-Readable Component Metadata\n\nForge provides comprehensive, machine-readable metadata files that AI assistants and build tools can consume programmatically:\n\n#### **📋 Available Files**\n\n**1. `ai-index.json`** - Fast component discovery (465 lines)\n- Quick component lookup by tag/description\n- Framework usage examples (React, Vue, Angular, vanilla)\n- Component metrics (props count, events, slots, a11y)\n- Navigation to detailed resources\n\n**2. `ai-manifest.json`** - Complete API reference (2000+ lines)\n- Full component metadata (props, events, slots with types)\n- Accessibility details (ARIA, keyboard nav, screen reader behavior)\n- AI method documentation (`getPossibleActions`, `explainState`, `aiState`)\n- SSR fallback HTML templates\n- Framework-specific examples\n\n**3. `ai-manifest.schema.json`** - Schema validation\n- JSON Schema for validating manifest structure\n- Use in CI/CD pipelines to ensure quality\n\n#### **💻 Programmatic Access**\n\n```javascript\n// Import manifest files directly from the package\nimport aiIndex from '@nexcraft/forge/ai-index.json';\nimport aiManifest from '@nexcraft/forge/ai-manifest.json';\n\n// Quick discovery: Find components by capability\nconst selectComponents = aiIndex.components.filter(c =\u003e\n  c.tag.includes('select')\n);\n// [{ tag: 'forge-select', props: 39, ... },\n//  { tag: 'forge-multi-select', props: 32, ... }]\n\n// Detailed API: Get full component metadata\nconst buttonMeta = aiManifest.components.find(c =\u003e\n  c.tag === 'forge-button'\n);\nconsole.log(buttonMeta.props);     // All props with types\nconsole.log(buttonMeta.a11y);      // Accessibility requirements\nconsole.log(buttonMeta.aiMethods); // AI integration methods\n```\n\n#### **🤖 AI Agent Usage Examples**\n\nAI assistants use these files to provide accurate code generation:\n\n**Scenario 1: Component Discovery**\n```\nUser: \"I need a component for notifications\"\nAI: [Reads ai-index.json] → Finds forge-toast and forge-alert\nAI: \"Use forge-toast for temporary notifications or forge-alert for persistent messages\"\n```\n\n**Scenario 2: Code Generation**\n```\nUser: \"Create a primary button that's disabled\"\nAI: [Reads ai-manifest.json] → Gets forge-button props\nAI: Generates: \u003cforge-button variant=\"primary\" disabled\u003eSubmit\u003c/forge-button\u003e\n```\n\n**Scenario 3: Accessibility Verification**\n```\nUser: \"Is my table accessible?\"\nAI: [Reads ai-manifest.json] → Checks forge-data-table a11y requirements\nAI: \"Add aria-label: \u003cforge-data-table aria-label='User accounts'\u003e...\"\n```\n\n#### **🛠️ Build Tool Integration**\n\n```javascript\n// Use in build scripts, documentation generators, or testing tools\nimport { components } from '@nexcraft/forge/ai-index.json';\n\n// Generate component documentation\ncomponents.forEach(comp =\u003e {\n  generateDocs(comp.tag, comp.description, comp.examples);\n});\n\n// Validate component usage\nfunction validateComponent(tagName, props) {\n  const manifest = getComponentFromManifest(tagName);\n  const validProps = manifest.props.map(p =\u003e p.name);\n  const invalidProps = Object.keys(props).filter(p =\u003e !validProps.includes(p));\n  if (invalidProps.length) {\n    throw new Error(`Invalid props: ${invalidProps.join(', ')}`);\n  }\n}\n```\n\n#### **📖 Learn More**\n\n- **[Component Index](./ai-index.json)** - Browse all 31 components with quick metrics\n- **[Full API Reference](./ai-manifest.json)** - Complete component specifications\n- **[AI Integration Guide](./docs/ai/integration-guide.md)** - How to use AI features in your app\n\n## 🎯 Why Choose @nexcraft/forge?\n\n### ✨ **What Makes @nexcraft/forge Special:**\n```javascript\n// @nexcraft/forge: Intelligent Components Built for the AI Era\nconst button = document.querySelector('forge-button');\n\n// 🤖 AI Integration Built-In\nbutton.explainState()  // \"Button is primary variant, enabled, ready for interaction\"\nbutton.getPossibleActions()  // [{name: 'click', available: true, description: '...'}]\nbutton.aiState  // {variant: 'primary', disabled: false, renderTime: 0.8ms}\n\n// 🎨 Design System Integration (Industry First!)\nimport { TokenBridge } from '@nexcraft/forge/utils';\nconst bridge = TokenBridge.fromFigma(figmaTokens);  // Import from ANY design system!\nconst css = bridge.toCSSProperties();  // Automatic CSS generation\n// Works with Figma, Tailwind, Material Design, and more!\n\n// ⚡ Performance Self-Monitoring\nbutton.setAttribute('max-render-ms', '2');  // Auto-optimizes if slow!\nbutton.performanceMode = 'auto';  // Degrades gracefully on slow devices\n\n// 🎨 True Style Isolation (Shadow DOM)\n// Your styles NEVER conflict, GUARANTEED\n```\n\n### 💡 **Real-World Benefits:**\n- **AI Apps**: Components provide context to LLMs automatically\n- **Design Systems**: Import tokens from Figma, Tailwind, Material Design automatically\n- **Performance**: Self-optimizing components that never slow down\n- **Migration**: Move from React to Vue to Angular without changing components\n- **Micro-frontends**: Multiple versions coexist without conflicts\n- **Future-proof**: Built on web standards, not framework trends\n\n## 🚀 Quick Start (30 Seconds!)\n\n### Option 1: Zero-Config CDN (Instant!)\n```html\n\u003c!-- Just add and use - no build required --\u003e\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nexcraft/forge\"\u003e\u003c/script\u003e\n\n\u003c!-- Your AI-ready component with performance monitoring! --\u003e\n\u003cforge-button \n  variant=\"primary\" \n  ai-context=\"submit-form\"\n  max-render-ms=\"2\"\u003e\n  Click Me\n\u003c/forge-button\u003e\n```\n\n### Option 2: NPM Installation\n```bash\nnpm install @nexcraft/forge\n```\n\n#### Works with EVERY Framework (Same Code!)\n```javascript\n// Import once, use everywhere\nimport '@nexcraft/forge';\n\n// React Example\nfunction App() {\n  const button = useRef();\n  \n  useEffect(() =\u003e {\n    // Access AI features!\n    console.log(button.current.explainState());\n  }, []);\n  \n  return \u003cforge-button ref={button} onClick={handleClick}\u003eClick\u003c/forge-button\u003e\n}\n\n// Vue Example (with dedicated package)\nnpm install @nexcraft/forge-vue\n\u003ctemplate\u003e\n  \u003cforge-button @click=\"handleClick\" :ai-context=\"context\"\u003eClick\u003c/forge-button\u003e\n\u003c/template\u003e\n\n// Angular Example (with dedicated package)\nnpm install @nexcraft/forge-angular\n// In Angular templates\n\u003cforge-button forgeComponent (click)=\"handleClick()\" [aiContext]=\"context\"\u003eClick\u003c/forge-button\u003e\n\n// Vanilla JS - Full Power!\nconst btn = document.querySelector('forge-button');\nconsole.log(btn.getPossibleActions()); // AI-ready!\n```\n\n### Development Setup\n```bash\n# Clone and setup\ngit clone https://github.com/nexcraft/forge.git\ncd forge\nnpm install\n\n# Start development\nnpm run dev        # Component development\nnpm run storybook  # Interactive documentation\nnpm run test       # Run tests\n```\n\n## 📦 Framework Packages\n\n### Core Package  \n- **`@nexcraft/forge`** - Pure web components (truly framework-agnostic)\n\n### Optional Framework Extensions\n- **`@nexcraft/forge-react`** - React wrappers, hooks \u0026 SSR support\n- **`@nexcraft/forge-vue`** - Vue composables, directives \u0026 plugin\n- **`@nexcraft/forge-angular`** - Angular directives, services \u0026 reactive forms\n- **`@nexcraft/forge-rhf`** - React Hook Form adapters\n\n```bash\n# Install what you need\nnpm install @nexcraft/forge                    # Pure web components\nnpm install @nexcraft/forge-react             # + React integration\nnpm install @nexcraft/forge-vue               # + Vue composables \u0026 plugin\nnpm install @nexcraft/forge-angular           # + Angular integration  \nnpm install @nexcraft/forge-rhf               # + React Hook Form\n```\n\n📖 **[View Integration Guides →](./docs/integrations/)** — React: [docs/integrations/react.md](./docs/integrations/react.md) • Angular: [docs/integrations/angular.md](./docs/integrations/angular.md) • Vue: [docs/integrations/vue.md](./docs/integrations/vue.md)\n\n## 📋 Component Index\n\nQuick reference to all 26 components with HTML tag names:\n\n### Organisms (6 components)\n`\u003cforge-tabs\u003e` • `\u003cforge-pagination\u003e` • `\u003cforge-navigation-bar\u003e` • `\u003cforge-data-table\u003e` • `\u003cforge-accordion\u003e` • `\u003cforge-tree-view\u003e`\n\n### Molecules (8 components) \n`\u003cforge-tooltip\u003e` • `\u003cforge-date-picker\u003e` • `\u003cforge-dropdown\u003e` • `\u003cforge-form-field\u003e` • `\u003cforge-modal\u003e` • `\u003cforge-multi-select\u003e` • `\u003cforge-card\u003e` • `\u003cforge-toast\u003e`\n\n### Atoms (12 components)\n`\u003cforge-button\u003e` • `\u003cforge-input\u003e` • `\u003cforge-icon\u003e` • `\u003cforge-alert\u003e` • `\u003cforge-checkbox\u003e` • `\u003cforge-badge\u003e` • `\u003cforge-switch\u003e` • `\u003cforge-radio-group\u003e` • `\u003cforge-select\u003e` • `\u003cforge-progress\u003e` • `\u003cforge-skeleton\u003e` • `\u003cforge-aspect-ratio\u003e`\n\n**Plus supporting components**: `\u003cforge-progress-circle\u003e` • `\u003cforge-toast-container\u003e` • `\u003cforge-performance-dashboard\u003e`\n\n💡 **Can't find what you're looking for?** Try searching for keywords like \"progress\", \"toast\", \"skeleton\" in the [Component Showcase](#-components-showcase) section below.\n\n## 📚 Documentation\n\n### Getting Started\n- **[Quick Start Guide](./docs/GETTING_STARTED.md)** - Get your first component running in 4 hours\n- **[Component Architecture](./plans/adrs/ADR-015-atomic-composition-pattern.md)** - Atomic design patterns \u0026 composition\n- **[Component API Design](./plans/adrs/ADR-008-component-api-design.md)** - API standards \u0026 conventions\n\n### Core Features\n- **[🤖 AI Metadata Reference](./docs/ai/metadata-reference.md)** - Complete AI metadata system guide (architecture, API, implementation)\n- **[🤖 AI Integration Guide](./docs/ai/integration-guide.md)** - ChatGPT, Claude, Copilot examples \u0026 common patterns\n- **[🤖 AI-Native Development](./docs/guides/ai-native-development.md)** - Building with AI coding assistants\n- **[🎨 Theming Overview](./docs/guides/theming-overview.md)** - Core theming concepts and strategies\n- **[🎨 Token Bridge Reference](./docs/theming/token-bridge.md)** - Complete guide and API for design token conversion\n- **[🔄 Token Migration Guide](./docs/theming/token-migration-guide.md)** - Migrate from existing token systems\n- **[⚡ Performance Dashboard Guide](./docs/guides/performance-dashboard-guide.md)** - Real-time performance monitoring\n- **[⚡ Performance Monitoring](./docs/performance-monitoring.md)** - Advanced performance monitoring system\n- **[Figma → Forge Tokens](./docs/guides/figma-to-forge.md)** - Pull tokens from Figma via CLI/MCP (no plugin required)\n\n### Architecture \u0026 Planning\n- **[Implementation Roadmap](./plans/implementation-roadmap.md)** - Complete development timeline with all differentiators\n- **[🚀 Phase 9: AI-Native Development](./plans/phases/phase-9-ai-native-development.md)** - Strategic pivot to AI-first component library\n- **[Architecture Decision Records](./plans/adrs/)** - 18 key technical decisions including AI-native components\n- **[Build Tooling Strategy](./plans/adrs/ADR-005-build-tooling.md)** - Vite, Lit, TypeScript stack decisions\n\n## ✨ The \"Shiny\" Stuff - What Makes Us Special\n\n### 🤖 **AI-Native Components** (Industry First!)\nThe FIRST component library built for AI agents - every component can communicate with AI systems out of the box:\n```javascript\nconst button = document.querySelector('forge-button');\n\n// Ask component to explain itself\nconsole.log(button.explainState());\n// \"Button is enabled and primary variant. Not loading. Ready for click interaction.\"\n\n// Get possible actions for AI agents\nconsole.log(button.getPossibleActions());\n// [{ name: 'click', description: 'Trigger button action', available: true }]\n\n// Access real-time state for AI context\nconsole.log(button.aiState);\n// { variant: 'primary', disabled: false, loading: false, renderTime: 0.8ms }\n```\n\n### 🎨 **Design Token Bridge** (Industry First!)\nImport design tokens from ANY design system with zero configuration:\n```javascript\nimport { TokenBridge } from '@nexcraft/forge/utils';\n\n// Import from Figma, Tailwind, Material Design, or any design system\nconst bridge = TokenBridge.fromFigma(figmaTokens);\nconst css = bridge.toCSSProperties();\n\n// Automatic CSS generation - always in sync with your design system!\n// :root { --forge-brand-primary-500: #3b82f6; }\n```\n\n### ⚡ **Performance Dashboard** (Unique Feature!)\nReal-time performance monitoring with visual dashboard:\n```html\n\u003c!-- Instant performance dashboard - no setup required --\u003e\n\u003cforge-performance-dashboard auto-refresh=\"true\" show-violations=\"true\"\u003e\n\u003c/forge-performance-dashboard\u003e\n\n\u003c!-- Components auto-monitor their performance --\u003e\n\u003cforge-tooltip max-render-ms=\"2\" performance-mode=\"auto\"\u003e\n  Self-optimizing tooltip with real-time metrics!\n\u003c/forge-tooltip\u003e\n```\n\n```javascript\n// Programmatic access to performance data\nimport { performanceDashboard } from '@nexcraft/forge/utils';\n\nconst metrics = performanceDashboard.getAllMetrics();\nconst slowComponents = performanceDashboard.getSlowComponents(16);\n// Real-time performance insights for every component!\n```\n\n### 🎯 **Core Differentiators**\n| Feature | Description | Benefits |\n|---------|-------------|-----------|\n| **🤖 AI-Native Metadata** | First library built for AI agents | Components communicate with Cursor, Copilot, Claude automatically |\n| **🧠 AI Code Generation** | Context-aware component suggestions | Faster development with AI-powered assistance |\n| **🎨 Design Token Bridge** | Import from any design system | Zero-config integration with Figma, Tailwind, Material Design |\n| **⚡ Performance Dashboard** | Real-time visual monitoring + auto-degradation | Self-optimizing components with performance insights |\n| **🌐 Framework Independence** | True Web Components | Use with React, Vue, Angular, or vanilla JS |\n| **🛡️ Style Isolation** | Shadow DOM guaranteed | Complete style encapsulation, zero CSS conflicts |\n| **📦 Optimized Bundle** | \u003c10KB per component | Lightweight, tree-shakeable, production-ready |\n| **🔮 Future Proof** | Built on web standards | Will work in browsers for decades to come |\n\n### 🚀 **Zero-Config Magic**\n```html\n\u003c!-- Works instantly - no build, no config, no dependencies --\u003e\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nexcraft/forge\"\u003e\u003c/script\u003e\n\u003cforge-button variant=\"primary\" ai-context=\"submit-form\"\u003e\n  Click Me\n\u003c/forge-button\u003e\n```\n\n## 🏗️ Architecture\n\n### Core Technologies\n- **[Lit 3.2.0](https://lit.dev/)** - Web Components framework\n- **[TypeScript 5.3.3](https://www.typescriptlang.org/)** - Type safety\n- **[Vite 5.0.10](https://vitejs.dev/)** - Build tool and dev server\n- **[Storybook 7.x](https://storybook.js.org/)** - Component development environment\n\n### Key Principles\n1. **Web Standards First** - Built on Custom Elements, Shadow DOM, and CSS Custom Properties\n2. **True Encapsulation** - Shadow DOM ensures style isolation\n3. **Properties Down, Events Up** - Unidirectional data flow\n4. **Composition Over Configuration** - Small, focused, composable components\n\n## 📦 Components Showcase\n\n### 🏛️ **Organism Components** (Phase 3 - Production Ready!)\nComplex, full-featured components built from atoms and molecules:\n\n| Component | AI Features | Performance Features | Unique Capabilities | Documentation |\n|-----------|-------------|---------------------|-------------------|---------------|\n| **📁 Tabs** | Tab prediction | Lazy panel loading | Drag-to-reorder, closeable tabs, keyboard nav | [📚 Docs](./docs/components/organisms/tabs.md) |\n| **🔢 Pagination** | Page suggestion | Optimized renders | Multiple modes, customizable sizes | [📚 Docs](./docs/components/organisms/pagination.md) |\n| **🦭 Navigation Bar** | Smart menus | Responsive modes | Mobile drawer, user actions, search | [📚 Docs](./docs/components/organisms/navigation-bar.md) |\n| **📊 Data Table** | Sort prediction | Virtual scrolling | Multi-sort, selection, expandable rows | [📚 Docs](./docs/components/organisms/data-table.md) |\n| **🏗️ Data Grid** | Cell editing AI | Advanced virtual scrolling | Inline editing, export, multi-column sort, filtering | [📚 Docs](./docs/components/organisms/data-grid.md) |\n| **🎵 Accordion** | Panel management | Lazy content | Multi-expand, animations, icons | [📚 Docs](./docs/components/organisms/accordion.md) |\n| **🌳 Tree View** | Node navigation | Lazy loading | Drag-drop, checkboxes, search | [📚 Docs](./docs/components/organisms/tree-view.md) |\n\n### 🌟 **Molecule Components** (Advanced \u0026 Feature-Rich)\nAdvanced components that combine atoms:\n\n| Component | AI Features | Performance Features | Unique Capabilities | Documentation |\n|-----------|-------------|---------------------|-------------------|---------------|\n| **🎯 Tooltip** | Self-positioning AI | \u003c1ms render | Smart viewport detection, auto-repositioning | [📚 Docs](./docs/components/molecules/tooltip.md) |\n| **📅 DatePicker** | Date prediction | Lazy calendar | i18n support, range selection, constraints | [📚 Docs](./docs/components/molecules/date-picker.md) |\n| **🔽 Dropdown** | Action suggestions | Virtual scrolling | Nested menus, keyboard nav, groups | [📚 Docs](./docs/components/molecules/dropdown.md) |\n| **📝 FormField** | Validation AI | Input optimization | Floating labels, inline variants | [📚 Docs](./docs/components/molecules/form-field.md) |\n| **🎭 Modal** | Focus management | Stacking optimization | Focus trap, backdrop blur, size variants | [📚 Docs](./docs/components/molecules/modal.md) |\n| **🗂️ MultiSelect** | Smart filtering | Bulk operations | Tag display, search highlighting | [📚 Docs](./docs/components/molecules/multi-select.md) |\n| **🃏 Card** | Content analysis | Elevation shadows | 6 levels, media support, skeleton states | [📚 Docs](./docs/components/molecules/card.md) |\n| **🆕 🔔 Toast** | State analysis | Queue management | Auto-dismiss, progress bars, global helpers | [📚 Docs](./docs/components/molecules/toast.md) |\n\n### ⚙️ **Atomic Components** (Foundation + Essential)\nFoundation components with comprehensive test coverage:\n\n| Component | Test Coverage | Key Features | Documentation |\n|-----------|--------------|--------------|---------------|\n| **Button** | 92.38% | 5 variants, ripple effect, loading states | [📚 Docs](./docs/components/button.md) |\n| **Input** | 84.56% | 7 types, validation, clearable | [📚 Docs](./docs/components/input.md) |\n| **Icon** | 78.38% | Registry system, lazy loading | [📚 Docs](./docs/components/icon.md) |\n| **Alert** | 97.02% | Auto-dismiss, animations | [📚 Docs](./docs/components/alert.md) |\n| **Checkbox** | 98.50% | Indeterminate state | [📚 Docs](./docs/components/checkbox.md) |\n| **Badge** | 100% | Count/dot modes, positions | [📚 Docs](./docs/components/badge.md) |\n| **Switch** | 98.50% | Loading state, custom labels | [📚 Docs](./docs/components/switch.md) |\n| **RadioGroup** | 93.79% | Group management, keyboard nav | [📚 Docs](./docs/components/radio-group.md) |\n| **Select** | 84.69% | Search/filter, groups | [📚 Docs](./docs/components/select.md) |\n| **🆕 Progress** | 100% | Linear \u0026 circular variants, indeterminate states | [📚 Docs](./docs/components/atoms/progress.md) |\n| **🆕 Skeleton** | 100% | Shimmer animations, shape variants, accessibility | [📚 Docs](./docs/components/atoms/skeleton.md) |\n| **🆕 AspectRatio** | 100% | Responsive containers, preset ratios, constraints | [📚 Docs](./docs/components/atoms/aspect-ratio.md) |\n\n### 📊 **Component Stats**\n- **Total Components**: 27 production-ready (12 atoms + 8 molecules + 7 organisms)\n- **Overall Test Coverage**: 87.2% \n- **Total Tests**: 1140+ passing (99% pass rate)\n- **Performance**: All components \u003c2ms render\n- **Accessibility**: 100% WCAG 2.1 AA compliant\n- **AI Coverage**: 100% metadata implementation\n- **ADR Compliance**: 100% compliant with all 16 ADRs\n- **🎯 Phase 7 Complete**: Essential modern UI components for any application!\n\n### Roadmap\nSee our **[Implementation Roadmap](./plans/implementation-roadmap.md)** for the complete component timeline.\n\n## 🧪 Testing\n\n```bash\n# Unit tests\nnpm run test\n\n# E2E tests\nnpm run test:e2e\n\n# Visual regression\nnpm run test:visual\n\n# All tests\nnpm run test:all\n```\n\nOur comprehensive testing strategy includes:\n- ✅ Unit tests (90%+ coverage)\n- ✅ Visual regression (Chromatic)\n- ✅ Cross-framework E2E tests\n- ✅ Accessibility audits\n- ✅ Performance benchmarks\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our **[Contributing Guide](./docs/CONTRIBUTING.md)** for details.\n\n### Quick Commands\n```bash\n# Generate a new component\nnpm run generate:component MyComponent atoms\n\n# Run linting\nnpm run lint\n\n# Run type checking\nnpm run type-check\n\n# Run all tests\nnpm run test:all\n```\n\n## 📊 Performance \u0026 Quality Metrics\n\n### 🏆 **Phase 8 Started - Enterprise Data Grid Delivered!**\n| Metric | Target | Current | Status |\n|--------|--------|---------|--------|\n| **ForgeDataGrid Implementation** | Full-featured | **✅ Complete** | 🎉 **NEW!** |\n| **Virtual Scrolling Architecture** | 10,000+ rows | **✅ Implemented** | 🚀 **ACHIEVED** |\n| **Advanced Data Management** | Editing, Export, Filtering | **✅ Complete** | 💪 **DELIVERED** |\n| **AI Metadata Coverage** | 100% | **100%** | ✅ MAINTAINED |\n| **Performance Monitoring** | Built-in | **Fully Implemented** | ✅ MAINTAINED |\n| **Total Tests** | 1000+ | **1140+ passing** | 🆙 **IMPROVED** |\n| **Component Count** | 26 → 27 | **27 components** | 📈 **EXPANDED** |\n\n### 🏆 **Phase 7 Complete - Essential Components Foundation!**\n| Metric | Target | Current | Status |\n|--------|--------|---------|--------|\n| **Atom Components** | 12 essential | **12/12** | ✅ COMPLETED |\n| **Molecule Components** | 8 advanced | **8/8** | ✅ COMPLETED |\n| **Organism Components** | 6 planned | **7/7** | 🆙 **EXCEEDED** |\n| **Test Coverage** | \u003e85% | **87.2%** | ✅ ACHIEVED |\n| **Bundle Size (per component)** | \u003c10KB | **\u003c10KB** | ✅ ACHIEVED |\n| **Component Render** | \u003c2ms | **\u003c1ms** | ✅ EXCEEDED |\n| **Accessibility** | WCAG 2.1 AA | **100% Compliant** | ✅ ACHIEVED |\n| **ADR Compliance** | Full | **100% Compliant** | ✅ ACHIEVED |\n\n### 🚀 **Why This Matters**\n- **🏗️ Enterprise Data Grid**: ForgeDataGrid handles 10,000+ rows with virtual scrolling\n- **⚡ Advanced Features**: Inline editing, multi-column sorting, export, filtering\n- **87.2% Test Coverage**: Your components won't break in production  \n- **\u003c1ms Render Time**: Faster than the human eye can perceive\n- **100% AI Coverage**: Every component can talk to ChatGPT, Claude, Copilot\n- **1140+ Tests**: More comprehensive testing than enterprise libraries\n- **27 Production Components**: 12 atoms, 8 molecules, 7 organisms - enterprise-ready toolkit\n- **🏆 Phase 8 Started**: Advanced data management components for complex applications\n\n## 📄 License\n\nMIT © Nexcraft Team\n\n## 🔗 Links\n\n- **[NPM Package](https://www.npmjs.com/package/@nexcraft/forge)** - Published package\n- **[GitHub](https://github.com/nexcraft/forge)** - Source code  \n- **[Storybook](https://nexcraft.github.io/forge)** - Live component playground (Coming Soon)\n- **[Documentation](./plans/)** - Complete planning documentation\n\n## 💡 Philosophy \u0026 Vision\n\n\u003e **\"Write Once, Use Forever\"**\n\u003e \n\u003e In 2034, React might be legacy, Vue could be vintage, and Angular may be ancient. \n\u003e But your @nexcraft/forge components? They'll still be running perfectly.\n\n### 🎭 **The Problem We Solve**\nEvery 3-5 years, teams rewrite their UI components for the latest framework. It's a **$100B industry problem**.\n\n### 🛡️ **Our Solution**\nBuild on **web standards** that browsers will support forever. Add **AI intelligence** and **performance monitoring** that no other library offers.\n\n### 📈 **The Business Case**\n```javascript\n// Traditional Approach (2019-2034)\nYear 2019: Build components in React 16      // Cost: $500K\nYear 2022: Migrate to React 18                // Cost: $200K  \nYear 2025: Rewrite for React Server Components // Cost: $400K\nYear 2028: Migrate to NewFramework.js         // Cost: $500K\nYear 2031: Rewrite again...                   // Cost: $500K\n// Total: $2.1M + maintenance\n\n// @nexcraft/forge Approach\nYear 2024: Build components once              // Cost: $500K\nYear 2034: Still working perfectly            // Cost: $0\n// Total: $500K + minimal maintenance\n\n// ROI: 320% cost savings + no technical debt\n```\n\n### 🚀 **Join the Revolution**\nStop rewriting. Start building components that outlive frameworks.\n\n\u003c!-- COMPONENT SEARCH KEYWORDS:\nforge-progress linear circular progress-bar loading indicator spinner\nforge-toast notification alert snackbar message popup banner\nforge-skeleton loading placeholder shimmer ghost content-loader\nforge-aspect-ratio responsive container layout ratio media embed\nforge-toast-container global notification manager queue system\nforge-progress-circle circular radial progress donut spinner\nweb-components lit typescript shadow-dom css-custom-properties\nai-ready ai-metadata performance-monitoring design-tokens\nreact vue angular vanilla javascript framework-agnostic\naccessibility wcag aria keyboard-navigation screen-reader\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-ignis%2Fforge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-ignis%2Fforge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-ignis%2Fforge/lists"}