{"_id":"@aphrody/m3-design","_rev":"5-3b5bd07d43c7c2baf3a9583fc606a4d4","name":"@aphrody/m3-design","dist-tags":{"latest":"3.2.6"},"versions":{"3.2.1":{"name":"@aphrody/m3-design","version":"3.2.1","author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-design@3.2.1","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-design#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"f3166ed8c0388788af14005c441aaf7fe061a8e8","tarball":"https://registry.npmjs.org/@aphrody/m3-design/-/m3-design-3.2.1.tgz","fileCount":14,"integrity":"sha512-gTXL95ICaGz0Gl2tPb7yCwEaH2iHKAo8n7O9bO5vDEdZroDHjSUcM5uA9/mbgiyFcKIkx0O7XrTQwujNs5DVzA==","signatures":[{"sig":"MEUCIQCTDKIhjHgx2x54d9Fkkapq/zIAGw4bl0/cTMAPALQeRwIgLBl6TLqEzufAfwKNYL58M+t7Xa0u6a1FO0GNXNQnR40=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106864},"main":"src/index.ts","type":"module","shasum":"f3166ed8c0388788af14005c441aaf7fe061a8e8","scripts":{"test":"bun test","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-gTXL95ICaGz0Gl2tPb7yCwEaH2iHKAo8n7O9bO5vDEdZroDHjSUcM5uA9/mbgiyFcKIkx0O7XrTQwujNs5DVzA==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-design"},"_npmVersion":"10.8.3","description":"Automated design engine for Material Design 3 and Google Design","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/bun-rs":"3.2.1","@aphrody/m3-react":"3.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bun-types":"^1.3.14","typescript":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/m3-design_3.2.1_1780527348006_0.08134248209402006","host":"s3://npm-registry-packages-npm-production"}},"3.2.2":{"name":"@aphrody/m3-design","version":"3.2.2","author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-design@3.2.2","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-design#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"a3a0a56abf669aff4137c9f2f445dee2e5e41500","tarball":"https://registry.npmjs.org/@aphrody/m3-design/-/m3-design-3.2.2.tgz","fileCount":14,"integrity":"sha512-mRoQmy3b3/sMqmMbmZuP+qlBRcDIoWpSOvEeWzxrQeUSrZ90jXftKwqwwvY1+GjMkzOq1QW/CeqiR3Y8+00DFQ==","signatures":[{"sig":"MEUCICE/+1Bea+gUYeohtN8PVRvYvdWc02b5cY3Vyyj/Bm1gAiEA67+CZhhKJG5ng2mxXWGlgfuIPLTk59aG7nVs5aqMTKU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106864},"main":"src/index.ts","type":"module","shasum":"a3a0a56abf669aff4137c9f2f445dee2e5e41500","scripts":{"test":"bun test","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-mRoQmy3b3/sMqmMbmZuP+qlBRcDIoWpSOvEeWzxrQeUSrZ90jXftKwqwwvY1+GjMkzOq1QW/CeqiR3Y8+00DFQ==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-design"},"_npmVersion":"10.8.3","description":"Automated design engine for Material Design 3 and Google Design","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/bun-rs":"3.2.1","@aphrody/m3-react":"3.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bun-types":"^1.3.14","typescript":"^6.0.3"},"_npmOperationalInternal":{"tmp":"tmp/m3-design_3.2.2_1780528054817_0.8444799760751351","host":"s3://npm-registry-packages-npm-production"}},"3.2.4":{"name":"@aphrody/m3-design","version":"3.2.4","author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-design@3.2.4","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-design#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"11d43cece0d204931b0e91961187138831b9ffb6","tarball":"https://registry.npmjs.org/@aphrody/m3-design/-/m3-design-3.2.4.tgz","fileCount":14,"integrity":"sha512-iyEyGIjWi0ETaG6l9D9hr6G0WSJK3YaDl7KIhcwILvHAzC3xieHZeA+nIHg+TSXQ2R7NN4DKM7Y7lVqvXevyvg==","signatures":[{"sig":"MEUCIDUx+W7TBMDWd3LlxTyVCVGzkhyqIBmRZdNCYodmag+MAiEAjyknmNPEdoVoqLMf8khEW7GK4kmvE+NCHUOXy9k4LWo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106894},"main":"src/index.ts","type":"module","shasum":"11d43cece0d204931b0e91961187138831b9ffb6","scripts":{"test":"bun test","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-iyEyGIjWi0ETaG6l9D9hr6G0WSJK3YaDl7KIhcwILvHAzC3xieHZeA+nIHg+TSXQ2R7NN4DKM7Y7lVqvXevyvg==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-design"},"_npmVersion":"10.8.3","description":"Automated design engine for Material Design 3 and Google Design","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/bun-rs":"3.2.2","@aphrody/m3-react":"3.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bun-types":"^1.3.14","typescript":"^6.0.3","@types/node":"^25.9.1"},"_npmOperationalInternal":{"tmp":"tmp/m3-design_3.2.4_1786525667415_0.9550712431441553","host":"s3://npm-registry-packages-npm-production"}},"3.2.5":{"name":"@aphrody/m3-design","version":"3.2.5","author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-design@3.2.5","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-design#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"8117c9877e8475d7a9b9949bdc1f1a3b5e3574f6","tarball":"https://registry.npmjs.org/@aphrody/m3-design/-/m3-design-3.2.5.tgz","fileCount":14,"integrity":"sha512-41H6bWpmTPq/W++JbVNYpmi9LXM0yDVJ+A/ac/iy5pOj/G6Y4fW6Gjt7eL2EYMxePDUhzUjS6sa9uxA6RBY19Q==","signatures":[{"sig":"MEUCIAKxnkKNEu8j5tT3UuioE+bRWGPzr58c6xS30uIcnS6OAiEAxZ4uCs/lTcqP8KnjAWfSWA6QZ2zdnmJ4Ig0oDfdK2YI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106896},"main":"src/index.ts","type":"module","shasum":"8117c9877e8475d7a9b9949bdc1f1a3b5e3574f6","scripts":{"test":"bun test","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-41H6bWpmTPq/W++JbVNYpmi9LXM0yDVJ+A/ac/iy5pOj/G6Y4fW6Gjt7eL2EYMxePDUhzUjS6sa9uxA6RBY19Q==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-design"},"_npmVersion":"10.8.3","description":"Automated design engine for Material Design 3 and Google Design","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/bun-rs":"^3.2.4","@aphrody/m3-react":"^3.2.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bun-types":"^1.3.14","typescript":"^6.0.3","@types/node":"^25.9.1"},"_npmOperationalInternal":{"tmp":"tmp/m3-design_3.2.5_1786525721319_0.22717412417635696","host":"s3://npm-registry-packages-npm-production"}},"3.2.6":{"_id":"@aphrody/m3-design@3.2.6","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"8d9c3b4d075c00aa2371833a371bf2c7a8fc2c14","tarball":"https://registry.npmjs.org/@aphrody/m3-design/-/m3-design-3.2.6.tgz","fileCount":13,"integrity":"sha512-+YOz1MMMeB5DpIUygBtjrJshsk21MQMoW21gvTIxrn6nUselIDLijTfLIiDOnUMz+MwLmU1w4Fxp4kLpLp/Wiw==","signatures":[{"sig":"MEUCIHxCdX62chJbs/Xh5C97Yhk1h+4LD/b5TyFK1IsStGyKAiEAh6RZp3xuQi8epXYGjguDLENgaJueHuhBHQjD5zRU0JA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHGBe0PNsg4NOeFSN9FajzZdTNKZoyknicBZaZV9SdgAAiBM4Imo9OzMViGH8ibWH/M4Z+o7yRS9sbjtVSrjVhwfmg=="}],"unpackedSize":106509},"main":"src/index.ts","name":"@aphrody/m3-design","type":"module","author":{"name":"aphrody-code"},"gitHead":"6981e124848acb9ce5364d87af955fd5fe992e23","license":"Apache-2.0","scripts":{"test":"bun test","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"version":"3.2.6","_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-design#readme","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-design"},"_npmVersion":"9.2.0","description":"Automated design engine for Material Design 3 and Google Design","directories":{},"maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"_nodeVersion":"24.3.0","dependencies":{"@aphrody/bun-rs":"^3.2.4","@aphrody/m3-react":"^3.2.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"bun-types":"catalog:","typescript":"catalog:","@types/node":"catalog:"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/m3-design_3.2.6_1789022246098_0.7458168037318478"}}},"time":{"created":"2026-06-03T22:55:47.390Z","modified":"2026-09-10T06:37:26.437Z","3.2.1":"2026-06-03T22:55:48.141Z","3.2.2":"2026-06-03T23:07:34.965Z","3.2.4":"2026-08-12T09:07:47.553Z","3.2.5":"2026-08-12T09:08:41.468Z","3.2.6":"2026-09-10T06:37:26.207Z"},"bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"author":{"name":"aphrody-code"},"license":"Apache-2.0","homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-design#readme","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-design"},"description":"Automated design engine for Material Design 3 and Google Design","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"readme":"\n\n# @aphrody/m3-design\n\n`@aphrody/m3-design` is the natural-language design compiler of the **material-web** Material Design 3 monorepo. It turns raw, natural-language design briefs directly into **Material Design 3 (M3)** React scaffolds, emitting a production-ready `index.tsx` layout tree built on `@aphrody/m3-react` components, plus an HCT tonal-palette theme stylesheet and W3C design-token JSON.\n\nIt is meant to be a fast, deterministic scaffold generator for autonomous agents and tooling: it replaces manual visual-configuration forms with a semantic parser and an HCT-inspired tonal theme engine, so a single prompt yields a self-contained, type-checked React artifact.\n\n---\n\n## Architecture Overview\n\nThe package is split into decoupled components that translate a text spec into running code:\n\n```mermaid\ngraph TD\n A[Raw Design Brief / Prompt] --> B[Semantic Parser]\n B -->|DesignBrief Parameters| C[Design Compiler]\n\n D[Seed Hex Color / Option] --> E[HCT Palette Engine]\n E -->|18 Tone Steps| F[CSS Custom Properties]\n\n C -->|Compiles template & applies configs| G[index.tsx Layout Code]\n F -->|System Token Mappings| H[theme.css Stylesheet]\n\n G --> I[Self-Critique Engine]\n H --> I\n I -->|Scores & Rationale| J[GenerationResult API Payload]\n```\n\n### 1. Semantic Parser (`src/parser.ts`)\n\nParses a raw natural-language prompt into structured design directives, extracting:\n\n- **Output Kind**: target layout mode (`deck`, `prototype`, `dashboard`, `mobile`, `editorial`).\n- **Adaptive Platform**: target device viewports (`desktop-web`, `ios`, `responsive-web`).\n- **Layout Organization**: structural model (`scaffold`, `list-detail`, `supporting-pane`, `feed`).\n- **Visual Density**: layout spacing (`high` compact, `default`, `low` loose).\n- **Color Extraction**: detects hex patterns or color references (e.g. \"dark blue\", \"compact red\") to pick a seed color. The default seed is the M3 baseline `#6750A4`.\n- **Feature Toggles**: auto-detects real-time streaming, thinking/shimmer indicators, and central action-router delegation.\n\n### 2. HCT Theme Compiler (`src/hct.ts`)\n\nImplements an approximation of Google's **HCT (Hue, Chroma, Tone)** color space using dynamic HSL transformations:\n\n- **Sine Saturation Tuning**: drops saturation near tone boundaries (Tone 0 and Tone 100) to better match perceptual curves.\n- **Tonal Palettes**: computes 18 tone steps `[0, 6, 10, 12, 20, 22, 30, 40, 50, 60, 70, 80, 90, 94, 95, 98, 99, 100]` across 6 core keys: `primary`, `secondary`, `tertiary`, `error`, `neutral`, and `neutral-variant`.\n- **CSS Compilation**: maps palettes to M3 light and dark mode system tokens (e.g. `--md-sys-color-primary-container`, `--md-sys-color-surface-container`), matching the runtime `--md-sys-color-*` roles emitted by `@aphrody/material-web`.\n\n### 3. Layout Generator (`src/generator.ts`)\n\nThe core code-generation engine. It processes the parsed `DesignBrief` and compiles the `SEED_TEMPLATE` into a finished React tree:\n\n- **Import Aliasing**: every component in the generated artifact imports the real `Md*` export from `@aphrody/m3-react`, aliased to a friendly local name (e.g. `MdScaffold as Scaffold`, `MdType as TypeText`).\n- **Layout Adapters**: mutates scaffolding structures (e.g. strips the navigation rail and adds a bottom app bar for mobile targets; restructures list items into slide sequences for deck outputs).\n- **Self-Contained Primitives**: when a brief enables them, inline definitions for `ThinkingIndicator`, `StreamingText`, and the `useStreamingText` hook are injected directly into the artifact so the output compiles without external dependencies beyond `@aphrody/m3-react`.\n- **Action Router / Registry**: when delegation is requested, a single root-level event handler dispatches `data-action` / `data-id` interactions through a central registry (see below).\n- **Environment Injectors**: injects dark-mode classes and desaturates colors for additive environments (such as translucent AR/XR overlays).\n- **Self-Critique Engine**: runs static analysis on the artifact and grades it across 5 axes: `philosophy`, `hierarchy`, `detail`, `functionalParity`, and `innovation`.\n\n### 4. Server / CLI (`src/server.ts`)\n\nExposes the compiler via a Bun-native REST API server and a direct terminal CLI wrapper.\n\n---\n\n## Getting Started\n\n> [!NOTE]\n> bun only — `npm` and `pnpm` are not used in this monorepo. Run all tasks from this package directory (`packages/m3-design/`).\n\n### Running via CLI\n\n```bash\nbun src/server.ts --prompt \"Make a dark, compact dashboard in blue\" --color \"#0F52BA\"\n```\n\n### Starting the HTTP Server\n\n```bash\nbun src/server.ts\n```\n\n---\n\n## REST API Specification\n\n### Generate Layout and Palette\n\n- **Endpoint**: `POST /api/generate`\n- **Content-Type**: `application/json`\n\n#### Request Payload\n\n| Field | Type | Required | Description |\n| :---------- | :------- | :------- | :------------------------------------------------------------ |\n| `prompt` | `string` | **Yes** | Natural language text defining design layout requirements. |\n| `seedColor` | `string` | No | Hex string (e.g., `#6750A4`) to seed the HCT tonal generator. |\n\n#### Response Schema (`GenerationResult`)\n\n```json\n{\n \"brief\": {\n \"outputKind\": \"deck\",\n \"platforms\": [\"desktop-web\"],\n \"audience\": \"general users\",\n \"tones\": [\"minimal\"],\n \"seedColor\": \"#0F52BA\",\n \"scale\": \"8 slides\",\n \"constraints\": \"Dark mode first\",\n \"rawBrief\": \"Make a dark compact deck in blue\",\n \"layoutType\": \"scaffold\",\n \"density\": \"high\",\n \"hasThinkingIndicator\": false,\n \"hasStreaming\": false,\n \"hasActionRouter\": false\n },\n \"theme\": {\n \"seed\": \"#0F52BA\",\n \"palettes\": {\n \"primary\": { \"name\": \"primary\", \"tones\": { \"0\": \"#000000\", \"40\": \"#0A3B85\" } }\n },\n \"cssCustomProperties\": \":root {\\n --md-ref-palette-primary-0: #000000; ...\"\n },\n \"files\": [\n { \"path\": \"src/theme.css\", \"content\": \"...\" },\n { \"path\": \"src/tokens.json\", \"content\": \"...\" },\n { \"path\": \"src/index.tsx\", \"content\": \"...\" }\n ],\n \"critique\": {\n \"scores\": {\n \"philosophy\": 90,\n \"hierarchy\": 92,\n \"detail\": 95,\n \"functionalParity\": 98,\n \"innovation\": 94\n },\n \"rationale\": \"M3 design compiler successfully mapped the brief...\"\n }\n}\n```\n\n---\n\n## Mapped Component Catalog\n\nThe layout generator scaffolds against a catalog of components imported from `@aphrody/m3-react`. Each friendly local name aliases the real `Md*` React wrapper.\n\n| Category | Local Name | Real Export | Custom Element |\n| :----------------- | :------------------- | :--------------------- | :-------------------------- |\n| **Action** | `ElevatedButton` | `MdElevatedButton` | `` |\n| | `FilledButton` | `MdFilledButton` | `` |\n| | `FilledTonalButton` | `MdFilledTonalButton` | `` |\n| | `OutlinedButton` | `MdOutlinedButton` | `` |\n| | `TextButton` | `MdTextButton` | `` |\n| | `IconButton` | `MdIconButton` | `` |\n| | `FilledIconButton` | `MdFilledIconButton` | `` |\n| | `Fab` | `MdFab` | `` |\n| | `BrandedFab` | `MdBrandedFab` | `` |\n| | `ButtonGroup` | `MdButtonGroup` | `` |\n| | `FabMenu` | `MdFabMenu` | `` |\n| | `FabMenuItem` | `MdFabMenuItem` | `` |\n| **Forms & Select** | `Checkbox` | `MdCheckbox` | `` |\n| | `Radio` | `MdRadio` | `` |\n| | `Switch` | `MdSwitch` | `` |\n| | `Slider` | `MdSlider` | `` |\n| | `AssistChip` | `MdAssistChip` | `` |\n| | `FilterChip` | `MdFilterChip` | `` |\n| | `InputChip` | `MdInputChip` | `` |\n| | `SuggestionChip` | `MdSuggestionChip` | `` |\n| | `ChipSet` | `MdChipSet` | `` |\n| | `DatePicker` | `MdDatePicker` | `` |\n| | `TimePicker` | `MdTimePicker` | `` |\n| **Inputs** | `FilledTextField` | `MdFilledTextField` | `` |\n| | `OutlinedTextField` | `MdOutlinedTextField` | `` |\n| **Communication** | `Dialog` | `MdDialog` | `` |\n| | `CircularProgress` | `MdCircularProgress` | `` |\n| | `LinearProgress` | `MdLinearProgress` | `` |\n| | `Snackbar` | `MdSnackbar` | `` |\n| | `LoadingIndicator` | `MdLoadingIndicator` | `` |\n| **Navigation** | `Tabs` | `MdTabs` | `` |\n| | `PrimaryTab` | `MdPrimaryTab` | `` |\n| | `SecondaryTab` | `MdSecondaryTab` | `` |\n| | `Menu` | `MdMenu` | `` |\n| | `MenuItem` | `MdMenuItem` | `` |\n| | `NavigationRail` | `MdNavigationRail` | `` |\n| | `NavigationRailItem` | `MdNavigationRailItem` | `` |\n| | `TopAppBar` | `MdTopAppBar` | `` |\n| | `BottomAppBar` | `MdBottomAppBar` | `` |\n| **Containment** | `List` | `MdList` | `` |\n| | `ListItem` | `MdListItem` | `` |\n| | `Divider` | `MdDivider` | `` |\n| | `BottomSheet` | `MdBottomSheet` | `` |\n| | `SideSheet` | `MdSideSheet` | `` |\n| | `Carousel` | `MdCarousel` | `` |\n| | `CarouselItem` | `MdCarouselItem` | `` |\n| **Layout Panes** | `Scaffold` | `MdScaffold` | `` |\n| | `Pane` | `MdPane` | `` |\n| | `ListDetail` | `MdListDetail` | `` |\n| | `SupportingPane` | `MdSupportingPane` | `` |\n| **Enterprise** | `Tooltip` | `MdTooltip` | `` |\n| | `ExpansionPanel` | `MdExpansionPanel` | `` |\n| | `Accordion` | `MdAccordion` | `` |\n| | `GridList` | `MdGridList` | `` |\n| | `GridTile` | `MdGridTile` | `` |\n| | `Table` | `MdTable` | `` |\n| | `Paginator` | `MdPaginator` | `` |\n| | `VirtualScroller` | `MdVirtualScroller` | `` |\n| | `Stepper` | `MdStepper` | `` |\n| | `Step` | `MdStep` | `` |\n| | `Autocomplete` | `MdAutocomplete` | `` |\n| | `Tree` | `MdTree` | `` |\n| | `TreeItem` | `MdTreeItem` | `` |\n| **Typography** | `TypeText` | `MdType` | `` |\n| | `WebgpuCanvas` | `MdWebgpuCanvas` | `` |\n\n---\n\n## Physical Motion Presets\n\nIn alignment with **Material Design 3 motion**, transition timings enforce standard spring profiles via CSS cubic-bezier parameters.\n\n> [!IMPORTANT]\n> Always match the correct preset mode to the visual property being animated.\n\n- **Spatial Animations**: components moving across dimensions (expanding sidebar, dragging sliders, dialog scales).\n- **Effects Animations**: opacity shifts and background color state changes (hover shadows, active highlights, fades).\n\n### Spring Presets Specification Table\n\n| Preset Name | Damping Ratio | Cubic Bezier Curve | Target Duration | Common Uses |\n| :------------------ | :------------ | :------------------------------------- | :-------------- | :---------------------------- |\n| **Fast Spatial** | `0.9` | `cubic-bezier(0.42, 1.67, 0.21, 0.90)` | `350 ms` | Slide panels, quick lists. |\n| **Default Spatial** | `0.9` | `cubic-bezier(0.38, 1.21, 0.22, 1.00)` | `500 ms` | Modal dialog openings, rails. |\n| **Fast Effects** | `1.0` | `cubic-bezier(0.31, 0.94, 0.34, 1.00)` | `150 ms` | Opacity fades, hover changes. |\n| **Default Effects** | `1.0` | `cubic-bezier(0.34, 0.80, 0.34, 1.00)` | `200 ms` | Color updates, page loads. |\n\n---\n\n## Action Router Delegation\n\nWhen a brief requests delegation, the generated code uses a **centralized event-delegation pattern** to optimize performance and avoid event-listener pollution.\n\nRather than binding distinct `onClick` listeners to hundreds of separate elements, a single root-level handler listens at the viewport boundary and dispatches interactions through a central registry keyed by `data-action`, passing along `data-id`.\n\n> [!TIP]\n> This routing model lowers memory footprint and avoids component re-renders during interactions.\n\n```tsx\nexport default function GeneratedArtifact() {\n // Action registry dynamically mapped based on layout actions\n const actionRegistry: Record void> = {\n \"toggle-dialog\": () => {\n const dialog = document.querySelector(\"md-dialog\");\n if (dialog) (dialog as any).open = !(dialog as any).open;\n },\n \"select-item\": (id) => {\n console.log(\"Delegated select-item:\", id);\n },\n };\n\n // Central action router\n const handleInteraction = (e: React.MouseEvent) => {\n const actionElement = (e.target as HTMLElement).closest(\"[data-action]\");\n if (!actionElement) return;\n\n const action = actionElement.getAttribute(\"data-action\");\n const id = actionElement.getAttribute(\"data-id\");\n console.log(`[Action Router] Action: ${action}, ID: ${id}`);\n\n if (action && actionRegistry[action]) {\n actionRegistry[action](id);\n }\n };\n\n return (\n
\n \n \n Show Specs\n \n \n\n \n \n \n
\n );\n}\n```\n\n---\n\n## Workspace Specifications\n\nAll modules are clean, type-safe ESM exports:\n\n- `src/types.ts`: core models (`DesignBrief`, `M3Theme`, `GeneratedFile`, `GenerationResult`).\n- `src/parser.ts`: natural-language prompt parsing.\n- `src/hct.ts`: tonal-palette approximation for Material themes.\n- `src/prompts.ts`: directive mappings, the seed template, and visual catalogs.\n- `src/generator.ts`: the layout compiler.\n- `src/server.ts`: Bun-native HTTP server and CLI.\n\n### Testing\n\n```bash\nbun test # unit suites (parser, hct, generator)\nbunx tsc -p tsconfig.json --noEmit\n```\n","readmeFilename":"README.md"}