impact-nova 1.7.0 → 1.7.2

package/dist/llms/index.js

@@ -0,0 +1,75 @@
+import rule_0 from './rules/requirements.js';
+import rule_1 from './rules/installation.js';
+import rule_2 from './rules/best-practices.js';
+import rule_3 from './rules/ag-grid.js';
+import rule_4 from './rules/troubleshooting.js';
+import rule_5 from './rules/accessibility.js';
+import rule_6 from './rules/command-palette.js';
+import rule_7 from './rules/real-world-patterns.js';
+import rule_8 from './rules/migration.js';
+const rules = [
+  {
+    name: "impact-nova-overview",
+    description: "Impact Nova: peer baseline and pointers (always apply)",
+    rule: rule_0,
+    alwaysApply: true,
+    globs: [],
+  },
+  {
+    name: "installation",
+    description: "Impact Nova: install and configure",
+    rule: rule_1,
+    alwaysApply: false,
+    globs: ["package.json","**/vite.config.*","**/tsconfig*.json"],
+  },
+  {
+    name: "best-practices",
+    description: "Impact Nova: best practices, imports, composition",
+    rule: rule_2,
+    alwaysApply: false,
+    globs: ["**/components/**/*.{tsx,ts}","**/app/**/*.{tsx,ts}","**/src/**/*.{tsx,ts}"],
+  },
+  {
+    name: "ag-grid",
+    description: "Impact Nova: AG Grid and DataTable rules",
+    rule: rule_3,
+    alwaysApply: false,
+    globs: ["**/*data-table*","**/*DataTable*","**/*ag-grid*","**/data-table/**/*.{tsx,ts}"],
+  },
+  {
+    name: "troubleshooting",
+    description: "Impact Nova: troubleshooting (styles, React, AG Grid, charts)",
+    rule: rule_4,
+    alwaysApply: false,
+    globs: ["package.json","**/vite.config.*","**/index.html","**/*.config.*"],
+  },
+  {
+    name: "accessibility",
+    description: "Impact Nova: accessibility patterns",
+    rule: rule_5,
+    alwaysApply: false,
+    globs: ["**/*.tsx","**/*.jsx"],
+  },
+  {
+    name: "command-palette",
+    description: "Impact Nova: command palette and keyboard shortcuts",
+    rule: rule_6,
+    alwaysApply: false,
+    globs: ["**/*command-palette*","**/*CommandPalette*","**/*shortcut*","**/*Shortcut*"],
+  },
+  {
+    name: "real-world-patterns",
+    description: "Impact Nova: charts and real-world patterns",
+    rule: rule_7,
+    alwaysApply: false,
+    globs: ["**/*chart*","**/*Chart*","**/highcharts*","**/*Chart*.tsx"],
+  },
+  {
+    name: "migration-impact-ui",
+    description: "Impact Nova: migrate from Impact UI",
+    rule: rule_8,
+    alwaysApply: false,
+    globs: ["**/migration/**/*","**/*migration*"],
+  },
+];
+export default rules;

package/dist/llms/rules/accessibility.js

@@ -0,0 +1 @@
+export default "# Impact Nova — Accessibility (a11y)\n\n**Optional for now.** Accessibility guidance below is not mandatory; use it when you want to improve a11y. Don’t stress on it if the project doesn’t require it yet.\n\nImpact Nova components are built on **Radix UI**, which provides keyboard navigation, focus management, and ARIA attributes. The following are optional practices to consider for more accessible UIs.\n\n---\n\n## 1. Preserve built-in behavior\n\n- **Do not remove or override** keyboard support, focus handling, or ARIA that Radix/Impact Nova provide (e.g. Dialog escape to close, Select arrow keys, DropdownMenu focus trap).\n- Use **compound components** as intended (e.g. `DialogContent`, `SelectTrigger` + `SelectContent`) so semantics and behavior stay correct.\n\n---\n\n## 2. Labels and descriptions\n\n- **Icon-only buttons**: Prefer setting `aria-label` (e.g. `<Button size=\"icon\" aria-label=\"Close\">`). Use i18n for the label when possible.\n- **Form controls**: Associate labels with inputs (use the component’s label prop or a visible `<label>` with correct `htmlFor`). Use `aria-describedby` for hint or error text when provided by the component.\n- **Dialogs/Sheets**: Ensure a visible title (e.g. `DialogTitle`, `SheetTitle`) so screen readers announce the purpose.\n\n---\n\n## 3. Keyboard and focus\n\n- **Focus order**: Layout and DOM order should match visual order; avoid positive `tabIndex` unless required for a custom focus flow.\n- **Skip links**: For app shell or long pages, consider a “Skip to main content” link at the top (visible on focus).\n- **Modals/Sheets**: Focus is typically trapped and restored by Radix; don’t move focus manually unless the component API supports it.\n\n---\n\n## 4. Screen readers and semantics\n\n- Use **semantic HTML** where Impact Nova doesn’t replace it (e.g. headings hierarchy `h1` → `h2`, lists for lists).\n- **Live regions**: For dynamic messages (toast, success after save), use the toast/alert components so they are announced (they typically use `aria-live` under the hood).\n- **Loading**: Prefer `Loader` or `Skeleton` and ensure loading state is communicated (e.g. `aria-busy` or `role=\"status\"` with a message) when implementing custom loading UIs.\n\n---\n\n## 5. Color and contrast\n\n- Use **design tokens** (e.g. `text-content`, `bg-brand`) so contrast follows the design system. Avoid custom colors that reduce contrast.\n- Don’t rely on color alone for meaning (e.g. pair an icon or text with color for status).\n\n---\n\n## 6. Testing and checks\n\n- Run **axe** or **Lighthouse** on pages that use Impact Nova to catch missing labels, contrast, or focus issues.\n- Test **keyboard-only** navigation (Tab, Enter, Escape, arrows) for dialogs, selects, and menus.\n- Verify **screen reader** announcements for critical flows (form errors, success toasts, dialog open/close).\n\nUse `search_best_practices` with query \"accessibility\" for condensed rules. This resource is optional guidance when you want to improve a11y; it is not required for every project.\n";

package/dist/llms/rules/ag-grid.js

@@ -0,0 +1 @@
+export default "# AG Grid & Data Table — Mandatory Rules\n\n**When working with DataTable, or any data table that uses AG Grid (including Impact Nova's grid components), the following rules are mandatory. Do not deviate.**\n\n---\n\n## 1. Use AG Grid documentation only\n\n- **Refer only to AG Grid's official documentation** for grid behavior, APIs, column definitions, filtering, sorting, and all grid features.\n- Do not rely on third-party tutorials or generic \"data grid\" patterns that contradict or bypass AG Grid's docs.\n- Official docs: [ag-grid.com/documentation](https://www.ag-grid.com/documentation/) (React: [AG Grid React](https://www.ag-grid.com/react-data-grid/)).\n\n---\n\n## 2. Follow AG Grid recommended patterns\n\n- **Always follow AG Grid's recommended patterns** for:\n  - Column definitions (`ColDef`, `ColGroupDef`)\n  - Cell renderers and editors\n  - Filtering, sorting, and row selection\n  - API ref access (`gridRef.current?.api`)\n  - Theming and styling (AG Grid theme / CSS variables)\n- Do not invent custom patterns that bypass or replace AG Grid's intended usage.\n\n---\n\n## 3. Use the AG Grid API only\n\n- **Rely on the AG Grid API only** for all grid operations:\n  - Getting/setting data, refreshing cells, updating columns\n  - Export (CSV/Excel if using Enterprise)\n  - Filter/sort state, row selection, pinned columns\n  - Any behavior that AG Grid exposes via its API\n- Do not manipulate the DOM or internal structure of the grid directly. Do not use non-API workarounds unless AG Grid docs explicitly suggest them.\n\n---\n\n## 4. Collaboration with ag-mcp (when installed)\n\n- **If the user has installed the ag-mcp server** (AG Grid MCP), this MCP can collaborate with it:\n  - Use **ag-mcp** for AG Grid–specific questions: API reference, column config, React integration, and official examples.\n  - Use **impact-nova-mcp** for Impact Nova wrappers (`DataTable`, `DataTableContent`, `processBackendColumnDefs`, `BackendColDef`, cell renderers from `impact-nova/ag-grid-react/cell-renderers`).\n  - When generating or editing grid code: prefer fetching AG Grid details from ag-mcp when available, and combine with Impact Nova's DataTable/column/cell-renderer patterns from this MCP.\n- If ag-mcp is not installed, still follow rules 1–3 using AG Grid's official documentation only.\n\n---\n\n**Summary:** For any code or design involving AG Grid or Impact Nova's DataTable (which uses AG Grid), use **only** AG Grid documentation, **only** AG Grid recommended patterns, and **only** the AG Grid API—with no deviation. When ag-mcp is available, use it to get accurate AG Grid API and docs; use this MCP for Impact Nova–specific integration.\n\n---\n\n## 5. Mandatory Data Table component usage\n\n**CRITICAL RULE:** If you see a table in a screenshot, or if the user asks for a table by default, you **MUST** consider using the custom component at `src/components/ui/data-table/data-table.tsx` (`Impact Nova DataTable`). **Do not build a raw AG Grid or HTML table.**\n\nA typical Default Data Table in Impact Nova features this exact structure:\n\n```tsx\nconst DataTableWithFilters = () => {\n    const { tStory } = useStorybookStoryI18n();\n    const [sheetOpen, setSheetOpen] = useState(false);\n    const [activeTab, setActiveTab] = useState(\"columns\");\n    const [showFilterStrip, setShowFilterStrip] = useState(false);\n\n    return (\n    <div className=\"h-[800px] w-full p-8 bg-slate-50 flex flex-col items-center justify-center\">\n       <div className=\"w-full max-w-[1200px] h-[600px] bg-white rounded-lg overflow-hidden flex flex-col [box-shadow:0px_0px_4px_0px_rgba(0,0,0,0.12)]\">\n        <DataTable className=\"h-full\">\n            <DataTableToolbar className=\"border-b border-[#e6e8f0]\">\n                <div className=\"flex items-center gap-2\">\n                    <h2 className=\"font-bold text-sm text-slate-800\">Sales Report</h2>\n                </div>\n                \n                <div className=\"flex items-center gap-2\">\n                    <Button \n                        variant=\"secondary\" \n                        size=\"icon\" \n                        onClick={() => setShowFilterStrip(!showFilterStrip)}\n                        aria-label={showFilterStrip ? tStory('filterStrip.hideFilters') : tStory('filterStrip.showFilters')}\n                    >\n                        {showFilterStrip ? <FunnelHide size=\"xs\" /> : <FunnelShow size=\"xs\" />}\n                    </Button>\n\n                    <div className=\"h-4 w-[1px] bg-[#e6e8f0] mx-1\" />\n\n                    {/* Scoped Sheet for Settings - Renders inside this relative container */}\n                    <DataTableSheet open={sheetOpen} onOpenChange={setSheetOpen}>\n                        <DropdownMenu>\n                            <DataTableViewMenuTrigger />\n                            <DataTableViewMenuContent>\n                                <DataTableViewMenuSettingsItem />\n                                <DataTableViewMenuDensity />\n                            </DataTableViewMenuContent>\n                        </DropdownMenu>\n                        \n                        <DataTableSheetContent>\n                            <DataTableSheetHeader title=\"Table Settings\" />\n                            <Tabs value={activeTab} onValueChange={setActiveTab} variant=\"line\" hideInactiveLabel tooltipClassName=\"z-[110]\" className=\"flex-1 flex flex-col min-h-0 w-full px-4\">\n                                <TabsList>\n                                    <TabsTrigger \n                                        value=\"columns\" \n                                        icon={<Column size={16} />}\n                                    >\n                                        Columns\n                                    </TabsTrigger>\n                                    <TabsTrigger \n                                        value=\"format\" \n                                        icon={<Font size={16} />}\n                                    >\n                                        Format\n                                    </TabsTrigger>\n                                    <TabsTrigger \n                                        value=\"custom-filters\" \n                                        icon={<Filter size={16} />}\n                                    >\n                                        Filters\n                                    </TabsTrigger>\n                                </TabsList>\n                                \n                                <TabsContent value=\"columns\" className=\"flex-1 min-h-0 relative p-0 data-[state=inactive]:hidden mt-0\">\n                                     <div className=\"flex-1 h-full p-2\">\n                                        <DataTableColumnList />\n                                     </div>\n                                </TabsContent>\n                                <TabsContent value=\"format\" className=\"flex-1 min-h-0 relative p-4 pt-1 data-[state=inactive]:hidden overflow-y-auto mt-0\">\n                                     <DataTableFormatOptions />\n                                </TabsContent>\n                                <TabsContent value=\"custom-filters\" className=\"flex-1 min-h-0 relative p-4 pt-1 data-[state=inactive]:hidden overflow-y-auto mt-0\">\n                                     <div className=\"flex flex-col gap-4 text-sm text-[#60697d]\">\n                                         <p>Custom filter configuration would go here.</p>\n                                         <Button variant=\"outline\" className=\"w-full justify-start\">\n                                            + Add Condition\n                                         </Button>\n                                     </div>\n                                </TabsContent>\n                            </Tabs>\n                        </DataTableSheetContent>\n                    </DataTableSheet>\n                </div>\n            </DataTableToolbar>\n            \n            <DataTableContent\n                rowData={rowData}\n                columnDefs={columnDefs}\n                // Standard AG Grid props work here\n                pagination={true}\n                paginationPageSize={20}\n            />\n        </DataTable>\n      </div>\n      <p className=\"mt-4 text-slate-400 text-sm\">\n        Note: The settings panel opens *inside* the table container, respecting its boundaries.\n      </p>\n    </div>\n    );\n};\n```\nNote: This component (`DataTable`) internally uses `ag-grid-react` as a customized version. Rely on it rather than naked AG Grid.\n\n---\n\n## 6. Built-in Clipboard Handlers for JSON Objects\n\n**All DataTable and AG Grid instances in Impact Nova automatically support copying and pasting JSON objects.**\n\nThe `AgGridWrapper` component includes built-in clipboard handlers that:\n- **When copying**: Automatically stringify object values to JSON format\n- **When pasting**: Automatically parse JSON strings back to objects\n\n### How it works\n\n```tsx\n// When you copy a cell with an object value like:\n{ \n  wp: { value: 6479, _isDisabled: true, cellMetadata: {...} },\n  iaf: { value: 6090, _isDisabled: true, cellMetadata: {...} }\n}\n\n// It's automatically converted and split into separate Excel columns:\n// Column 1      Column 2\n// WP: 6479      IAF: 6090\n\n// Technical metadata (_isDisabled, cellMetadata) is hidden for clarity\n// Only the meaningful \"value\" is shown - perfect for PMs and non-technical users\n// Tab-separated format automatically expands into multiple columns in Excel\n```\n\n**Example with simple properties:**\n```tsx\n// Copy this object:\n{ name: \"John\", age: 30, status: \"active\" }\n\n// Expands into 3 Excel columns:\n// Column 1      Column 2    Column 3\n// name: John    age: 30     status: active\n```\n\n**When pasting:**\n```tsx\n// You can paste JSON strings and they'll be parsed back to objects:\n'{\"name\":\"Jane\",\"age\":25}' → { name: \"Jane\", age: 25 }\n```\n\n**Benefits:**\n- ✅ Simple and readable for non-technical users (PMs, stakeholders)\n- ✅ Extracts only meaningful values, hides technical metadata\n- ✅ Automatically expands object properties into separate Excel columns\n- ✅ Perfect for analysis - each property gets its own column\n- ✅ Works seamlessly for both single-cell and multi-cell copy operations\n- ✅ Still supports pasting JSON back for developers\n\n### Usage\n\n**No configuration needed!** This works automatically for all DataTable instances:\n\n```tsx\n<DataTable>\n  <DataTableContent\n    rowData={data}\n    columnDefs={columns}\n    // Clipboard handlers are already active ✅\n  />\n</DataTable>\n```\n\n### Override if needed\n\nYou can override the default behavior by passing your own handlers:\n\n```tsx\n<DataTableContent\n  rowData={data}\n  columnDefs={columns}\n  processCellForClipboard={(params) => {\n    // Custom copy logic\n    return customFormat(params.value);\n  }}\n  processCellFromClipboard={(params) => {\n    // Custom paste logic\n    return customParse(params.value);\n  }}\n/>\n```\n\n**Key benefits:**\n- ✅ Works automatically for all tables\n- ✅ No code duplication needed\n- ✅ Handles complex object structures\n- ✅ Gracefully falls back to string if JSON parsing fails\n- ✅ Can be overridden when custom behavior is needed\n\n---\n";

package/dist/llms/rules/best-practices.js

@@ -0,0 +1 @@
+export default "# Impact Nova — Best Practices & Do's and Don'ts\n\n## Use Impact Nova components only\n\n**When building with Impact Nova, use the components that are present in this design system only.** The library includes a full set of UI components (forms, navigation, feedback, data display, layout, etc.). There is no need to create new custom components for standard UI—use what Impact Nova provides. Check `list_components` or the component catalog to see what's available; use `get_component` for the spec and usage of any component. Prefer composing existing Impact Nova components over building from scratch.\n\n## Do's\n\n1. **Use compound components** — Use subcomponents (e.g. `Dialog.Content`, `Card.Header`, `Select.Trigger`) for full control without prop drilling.\n2. **Use `cn()` and Tailwind token classes** — Merge classNames with the `cn()` helper; use design token classes (e.g. `bg-brand`, `text-content`, `border-stroke`) not raw hex or arbitrary values.\n3. **Use design tokens** — Prefer Tailwind theme tokens (colors, spacing, radius from the design system). No arbitrary values where a token exists.\n4. **Accessibility first** — Components are built on Radix UI; preserve aria-labels, keyboard support, and screen reader compatibility. Add `aria-label` for icon-only buttons.\n5. **i18n for user-facing strings** — Use `ImpactNovaI18nProvider` and `useImpactNovaI18n()` / `t()` for labels, placeholders, and button text. Override via props when needed.\n6. **File naming** — Use `kebab-case.tsx` for files (e.g. `file-upload.tsx`).\n7. **TypeScript** — Import and extend component props (e.g. `ButtonProps`) for type-safe wrappers.\n8. **Use `variant` and `size` props** — For appearance, use the component's built-in variant and size props (e.g. `Button variant=\"primary\" size=\"lg\"`). Add `className` only for layout (e.g. margin, gap) or intentional overrides.\n\n## Don'ts\n\n1. **No inline styles for token-backed values** — Don't use `style={{ color: '...' }}` or inline hex for colors that exist as tokens.\n2. **Don't bypass tokens** — Avoid hardcoded spacing or colors; use Tailwind token classes.\n3. **Don't skip i18n** — For any user-facing label, placeholder, or message, use the i18n context or pass overrides via props.\n4. **Don't add unnecessary classNames for styling** — Components are already styled to the design standard. Use `variant` and `size` for appearance. Use `className` only for layout (e.g. `mt-4`, `flex gap-2`) or intentional overrides, not for duplicating built-in styles (e.g. don't add `rounded-lg` if the component already applies it).\n5. **Don't use non-token colors** — Stick to the design token palette (primary, secondary, accent, destructive, muted, etc.).\n6. **Don't create new components when Impact Nova already provides one** — The design system has the components you need. Use `list_components` / `get_component` to find and use them instead of building custom equivalents.\n7. **Error and empty states** — Use **Alert** for form or API errors; use **EmptyContainer** when there is no data to show (with optional action like \"Select filter\" or \"Add item\").\n\n## Composition over inheritance\n\nFavor composition. Compose subcomponents rather than extending or wrapping with custom styling that overrides the design system.\n\n## Imports\n\n- **Barrel (many exports)**: `import { Button, Card, DataTable } from 'impact-nova';`\n- **Subpath (tree-shaking)**: Prefer when you need one component or a small set: `import { Button } from 'impact-nova/button';`, `import { Sheet, SheetContent } from 'impact-nova/sheet';`, `import { FilterPanel, FilterPanelSidebar } from 'impact-nova/filter-panel';`\n- **Icons**: `import { Pin, Chart, getIconComponent } from 'impact-nova/icons';`\n- **Types only**: `import type { Option } from 'impact-nova/select';`, `import type { BackendColDef } from 'impact-nova';`, `import type { FilterSidebarItem } from 'impact-nova/filter-panel';`, `import type { NestedListItem } from 'impact-nova/nested-list';`\n- **i18n**: `import { ImpactNovaI18nProvider, useImpactNovaI18n } from 'impact-nova';`\n- **Locale packs**: `import { de } from 'impact-nova/locale/de';`\n- **CSS (once at root)**: `import 'impact-nova/dist/impact-nova.css';`\n\nWhen using Vite with impact-nova, add `dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react']` in resolve to avoid dual React/AG Grid instances.\n\n## AG Grid / Data tables (mandatory)\n\n**When working with DataTable, or any data table that uses AG Grid:**\n- **CRITICAL RULE:** If you see a table in a screenshot, or if the user asks for a table by default, you **MUST** consider using the custom component at `src/components/ui/data-table/data-table.tsx` (`Impact Nova DataTable`). **Do not build a raw AG Grid or HTML table.**\n- Use **only** AG Grid's official documentation.\n- Follow **only** AG Grid recommended patterns.\n- Rely **only** on the AG Grid API for grid behavior. No deviation.\n- If the user has **ag-mcp** installed, use it for AG Grid API and docs and combine with this MCP for Impact Nova DataTable/column/cell-renderer integration. See resource `impact-nova://ag-grid-rules` for full rules and the default table structure.\n";

package/dist/llms/rules/command-palette.js

@@ -0,0 +1 @@
+export default "# Command Palette & Keyboard Shortcuts — Implementation Guide\n\nThe Command Palette (⌘K) and shortcut system in Impact Nova is **more involved** than most components. Follow this guide step by step. Use the subpath **`impact-nova/command-palette`** for all exports.\n\n---\n\n## 1. Minimal setup (required)\n\n**Step 1:** Wrap your app with `CommandPaletteProvider`. Render `CommandPalette` once inside it (typically at the root so ⌘K works everywhere).\n\n```tsx\nimport { CommandPaletteProvider, CommandPalette } from 'impact-nova/command-palette';\n\nfunction App() {\n  return (\n    <CommandPaletteProvider>\n      <YourAppLayout />\n      <CommandPalette />  {/* ⌘K overlay — renders as a portal */}\n    </CommandPaletteProvider>\n  );\n}\n```\n\n**Step 2:** Register at least one shortcut so the palette has commands. Use `useShortcut` for page/module/modal scope, or `useGlobalShortcut` for app-wide (e.g. ⌘K to open palette is built-in).\n\n---\n\n## 2. Registering shortcuts\n\n### useShortcut (scoped: page, module, modal)\n\nUse when the shortcut only applies in a certain part of the app (e.g. Save on a page, Create Task in a module).\n\n```tsx\nimport { useShortcut } from 'impact-nova/command-palette';\n\nfunction SaveButton() {\n  useShortcut({\n    id: 'document.save',\n    label: 'Save Document',\n    description: 'Save the current document',\n    category: 'Document',\n    scope: 'page',\n    defaultKeybinding: { key: 's', meta: true },\n    handler: () => saveDocument(),\n  });\n\n  return <button>Save</button>;\n}\n```\n\n### useGlobalShortcut (app-wide)\n\nUse for actions that should work from anywhere (e.g. Open Settings, Toggle Sidebar).\n\n```tsx\nimport { useGlobalShortcut } from 'impact-nova/command-palette';\n\nfunction App() {\n  useGlobalShortcut({\n    id: 'app.open-settings',\n    label: 'Open Settings',\n    category: 'Navigation',\n    defaultKeybinding: { key: ',', meta: true },\n    handler: () => openSettings(),\n  });\n  // ...\n}\n```\n\n### KeyBinding shape\n\n```ts\ninterface KeyBinding {\n  key: string;     // e.g. 's', 'Enter', 'ArrowUp', 'k'\n  meta?: boolean;  // ⌘ on Mac, Ctrl on Windows\n  ctrl?: boolean;\n  alt?: boolean;\n  shift?: boolean;\n}\n```\n\nUse `meta: true` for ⌘/Ctrl. Examples: Save = `{ key: 's', meta: true }`, Redo = `{ key: 'z', meta: true, shift: true }`.\n\n---\n\n## 3. Scope priority\n\nWhen the same key is registered in multiple places, **scope priority** decides which runs (highest wins):\n\n| Priority | Scope    | Use case                          |\n|----------|----------|-----------------------------------|\n| 4        | `modal`  | Dialogs, sheets, overlays         |\n| 3        | `page`   | Page-level (save, export)        |\n| 2        | `module` | Feature area (planning, analytics)|\n| 1        | `global` | App-wide (⌘K, notifications)     |\n\nAlways set the correct `scope` so the right command fires (e.g. Save in a dialog vs Save on the page).\n\n---\n\n## 4. Multi-table / instance-aware shortcuts\n\nWhen you have **multiple DataTables** (or similar) on one page and each uses the same shortcut (e.g. Alt+T to toggle columns), only the **focused** one should respond.\n\n**Solution:** Wrap each table (or section) in `ShortcutScopeProvider` with a unique `instance`:\n\n```tsx\nimport { ShortcutScopeProvider, useShortcut } from 'impact-nova/command-palette';\n\nfunction DashboardPage() {\n  return (\n    <>\n      <ShortcutScopeProvider scope=\"page\" instance=\"sales-table\" label=\"Sales\">\n        <SalesDataTable />\n      </ShortcutScopeProvider>\n\n      <ShortcutScopeProvider scope=\"page\" instance=\"inventory-table\" label=\"Inventory\">\n        <InventoryDataTable />\n      </ShortcutScopeProvider>\n    </>\n  );\n}\n\nfunction SalesDataTable() {\n  useShortcut({\n    id: 'sales.toggle-columns',\n    label: 'Toggle Column Visibility',\n    scope: 'page',\n    defaultKeybinding: { key: 't', alt: true },\n    handler: () => toggleColumnsPanel(),\n  });\n  return <DataTable />;\n}\n```\n\nFocus inside a table sets the active instance; the shortcut then runs only for that instance.\n\n---\n\n## 5. Opening the palette programmatically (e.g. button)\n\nUse `useCommandPalette()` to get `setOpen`:\n\n```tsx\nimport { useCommandPalette, CommandPalette, Kbd } from 'impact-nova/command-palette';\nimport { Button } from 'impact-nova';\n\nfunction Header() {\n  const { setOpen } = useCommandPalette();\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Open Command Palette <Kbd keybinding={{ key: 'k', meta: true }} size=\"sm\" />\n      </Button>\n      <CommandPalette />\n    </>\n  );\n}\n```\n\n`CommandPalette` must still be rendered inside `CommandPaletteProvider`.\n\n---\n\n## 6. Shortcut Settings panel (customise shortcuts)\n\nThe **ShortcutSettings** component is an AG Grid–powered panel where users can view and rebind shortcuts. Put it inside a **Sheet** (e.g. in your app settings):\n\n```tsx\nimport { ShortcutSettings } from 'impact-nova/command-palette';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody } from 'impact-nova/sheet';\n\nfunction SettingsSheet({ open, onOpenChange }) {\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent side=\"bottom\" expandable>\n        <SheetHeader>\n          <SheetTitle>Keyboard Shortcuts</SheetTitle>\n        </SheetHeader>\n        <SheetBody className=\"p-0\">\n          <ShortcutSettings className=\"flex-1\" />\n        </SheetBody>\n      </SheetContent>\n    </Sheet>\n  );\n}\n```\n\nFeatures: click-to-record new keybinding, conflict detection, reset to default, source filter (system / user / ag-grid / browser). For AG Grid behaviour in this panel, follow AG Grid docs (see `impact-nova://ag-grid-rules`).\n\n---\n\n## 7. Browser shortcuts (read-only in palette)\n\nTo show browser-reserved shortcuts in the palette and settings without intercepting them, use `useBrowserShortcuts()`:\n\n```tsx\nimport { useBrowserShortcuts } from 'impact-nova/command-palette';\n\nfunction App() {\n  useBrowserShortcuts();\n  // Or hide dev-oriented ones:\n  // useBrowserShortcuts({ exclude: ['devtools', 'page source', 'caret browsing', 'inspect'] });\n  // ...\n}\n```\n\n---\n\n## 8. Kbd component (show shortcut in UI)\n\nDisplay a keybinding with platform-aware symbols (⌘ on Mac, Ctrl on Windows):\n\n```tsx\nimport { Kbd } from 'impact-nova/command-palette';\n\n<Kbd keybinding={{ key: 'k', meta: true }} />           // ⌘ K\n<Kbd keybinding={{ key: 's', meta: true }} size=\"lg\" /> // large\n<Kbd keys=\"⌘+S\" />                                       // from string\n```\n\nUse `variant=\"muted\"` or `variant=\"dark\"` for different backgrounds.\n\n---\n\n## 9. Command definition (full shape)\n\nWhen you need to pass a full command (e.g. for custom UI), use this shape:\n\n```ts\ninterface CommandDefinition {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: ReactNode;\n  category?: string;\n  scope: 'global' | 'module' | 'page' | 'modal';\n  defaultKeybinding?: KeyBinding;\n  handler: () => void;\n  customisable?: boolean;   // default true\n  hidden?: boolean;         // hide from palette, default false\n  source?: 'system' | 'user' | 'ag-grid' | 'browser';\n  passive?: boolean;        // show in palette but don't intercept keys\n  instance?: string;        // for multi-table dispatch\n}\n```\n\nSet `source: 'system'` and `customisable: false` for built-in shortcuts that must not be changed.\n\n---\n\n## 10. Checklist\n\n- [ ] Wrap app with `CommandPaletteProvider`.\n- [ ] Render `<CommandPalette />` once inside the provider.\n- [ ] Register commands with `useShortcut` (scoped) or `useGlobalShortcut` (app-wide).\n- [ ] Use correct `scope` (modal > page > module > global).\n- [ ] For multiple tables/sections with same shortcut: wrap each in `ShortcutScopeProvider` with unique `instance`.\n- [ ] Optional: add `ShortcutSettings` inside a Sheet for user customisation.\n- [ ] Optional: `useBrowserShortcuts()` for read-only browser shortcuts; `Kbd` for showing shortcuts in UI.\n- [ ] To open from a button: `useCommandPalette().setOpen(true)`.\n\n**Import path:** `impact-nova/command-palette` — exports: `CommandPaletteProvider`, `CommandPalette`, `useShortcut`, `useGlobalShortcut`, `useCommandPalette`, `useBrowserShortcuts`, `ShortcutScopeProvider`, `ShortcutSettings`, `Kbd`.\n";

package/dist/llms/rules/installation.js

@@ -0,0 +1 @@
+export default "# Install and configure Impact Nova\n\nUse these steps to add Impact Nova to an existing project. Run the commands in your project root and apply the code changes to your entry file and layout.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova\nnpm install react@^19 react-dom@^19\n```\n\nIf you use AG Grid or Highcharts in your app, also install:\n\n```bash\nnpm install ag-grid-react@35.0.1 ag-grid-enterprise@35.0.1\n# Optional, for charts:\nnpm install highcharts@^12 highcharts-react-official@^3 highcharts-border-radius@^0.0.4\n```\n\n## 2. Import styles in your root entry\n\nIn your app root (e.g. `main.tsx`, `App.tsx`, or `layout.tsx`), **import the CSS before your app component**:\n\n```tsx\nimport 'impact-nova/dist/impact-nova.css';\nimport App from './App';\n// ... rest of your bootstrap\n```\n\n## 3. Add Manrope font (recommended)\n\nIn your `index.html` or layout:\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\" />\n```\n\nIn your global CSS or Tailwind base:\n\n```css\n@layer base {\n  body {\n    font-family: 'Manrope', sans-serif;\n  }\n}\n```\n\n## 4. Wrap your app with i18n (recommended)\n\nWrap your app with `ImpactNovaI18nProvider` so date pickers, selects, and other components use the correct locale and labels:\n\n```tsx\nimport { ImpactNovaI18nProvider } from 'impact-nova';\n\nfunction Root() {\n  return (\n    <ImpactNovaI18nProvider locale=\"en\">\n      <App />\n    </ImpactNovaI18nProvider>\n  );\n}\n```\n\nFor another locale, use a locale pack:\n\n```tsx\nimport { ImpactNovaI18nProvider, de } from 'impact-nova';\n\n<ImpactNovaI18nProvider locale=\"de\" messages={de}>\n  <App />\n</ImpactNovaI18nProvider>\n```\n\n## 5. Using Impact Nova with CSS or SCSS (no Tailwind)\n\nIf your app uses **plain CSS or SCSS** and does **not** use Tailwind, you can still use Impact Nova. Tailwind is optional. Impact Nova ships a single built CSS file (no SCSS source).\n\n- **Import the library CSS** in your app root (e.g. `main.tsx`, `App.tsx`):\n  ```tsx\n  import 'impact-nova/dist/impact-nova.css';\n  ```\n  Or from your main stylesheet: `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss.\n- **Component styling** comes from Impact Nova's CSS. Use each component's `variant` and `size` props; no Tailwind classes are required.\n- **Your layout and spacing** stay in your CSS or SCSS (margins, padding, flexbox, grid). Use your usual class names; the design system does not require Tailwind utilities.\n- **Manrope font:** Add the font link in `index.html` and in your CSS/SCSS set `body { font-family: 'Manrope', sans-serif; }` (see section 3).\n- **Summary:** No Tailwind, no Tailwind config. Load `impact-nova.css` once; use components with their props; use your existing CSS/SCSS for the rest.\n\n## 6. Using Impact Nova with Webpack\n\nIf your app is built with **Webpack** (including Create React App, which uses Webpack):\n\n- **CSS import:** Webpack will bundle the library CSS as long as you have a rule for `.css`. Ensure your config includes something like:\n  ```js\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader'],\n        // or with MiniCssExtractPlugin:\n        // use: [MiniCssExtractPlugin.loader, 'css-loader'],\n      },\n      // ... other rules (e.g. for .tsx, .js)\n    ],\n  },\n  ```\n  Then in your root component or entry:\n  ```tsx\n  import 'impact-nova/dist/impact-nova.css';\n  ```\n- **Create React App (CRA):** No extra config. Add `import 'impact-nova/dist/impact-nova.css';` in `index.tsx` or `App.tsx`.\n- **Dedupe React / AG Grid:** If you see “multiple copies of React” or AG Grid issues, use Webpack’s `resolve.alias` so the app uses a single version:\n  ```js\n  resolve: {\n    alias: {\n      react: path.resolve(__dirname, 'node_modules/react'),\n      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),\n      // If using AG Grid:\n      'ag-grid-react': path.resolve(__dirname, 'node_modules/ag-grid-react'),\n      'ag-grid-community': path.resolve(__dirname, 'node_modules/ag-grid-community'),\n      'ag-grid-enterprise': path.resolve(__dirname, 'node_modules/ag-grid-enterprise'),\n    },\n  },\n  ```\n- **Tailwind + Webpack:** If you use Tailwind, add the Impact Nova preset and include the package in `content` (see section 7 below).\n\n## 7. Optional: extend Tailwind with Impact Nova preset\n\nIf your project uses Tailwind and you want the same theme (colors, radius), extend your `tailwind.config.js` with the preset from the package:\n\n```js\n// tailwind.config.js\nimport impactNovaPreset from 'impact-nova/tailwind.config.js';\n\nexport default {\n  presets: [impactNovaPreset],\n  content: [\n    './index.html',\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/impact-nova/dist/**/*.js',\n  ],\n  // ... rest of your config\n};\n```\n\n## Summary checklist\n\n- [ ] `npm install impact-nova` (and react, react-dom; optional: ag-grid, highcharts)\n- [ ] `import 'impact-nova/dist/impact-nova.css'` in root entry (or @import in main.css/main.scss if using CSS or SCSS without Tailwind; see §5)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaI18nProvider locale=\"en\">`\n- [ ] (Optional) Add Tailwind preset and content path for impact-nova\n- [ ] **Webpack:** Ensure a CSS rule (style-loader + css-loader) and, if needed, resolve.alias for React/AG Grid\n\nAfter this, you can import components: `import { Button, Card } from 'impact-nova';`\n";

package/dist/llms/rules/migration.js

@@ -0,0 +1 @@
+export default "# Migration: Impact UI → Impact Nova\n\nGuide for migrating from **Impact UI** (or similar legacy UI) to **Impact Nova**. Use with other Impact Nova MCP tools: `get_component`, `get_installation_and_config`, `get_real_world_patterns`, `validate_usage`.\n\n---\n\n## 1. Prerequisites & MCP usage\n\n**Impact UI MCP:** Impact UI has `impact-ui-mcp-server`. Keep it enabled during migration.\n\n- **impact-ui-mcp-server** — Source API: Impact UI component names, props, import paths. Use to map usages and prop renames (e.g. `severity` → `variant`).\n- **Impact Nova MCP** — Target API: Nova imports, compound components, patterns; validate with `validate_usage`.\n\nWorkflow: per screen/component, use Impact UI MCP for current usage → Impact Nova MCP for replacement (`get_component`) and validation. After migration, disable `impact-ui-mcp-server`.\n\n**Impact Nova MCP tools:** `list_components` | `get_component` | `get_installation_and_config` | `get_real_world_patterns` | `validate_usage` | `suggest_components_for_ui`.\n\nBefore migrating: find all usages of the old UI library; choose big-bang or incremental strategy.\n\n---\n\n## 2. Phase 1 — Install and configure Impact Nova\n\n**Dependencies:**\n```bash\nnpm install impact-nova\nnpm install react@^19 react-dom@^19\n```\nWith AG Grid: `ag-grid-react@35.0.1 ag-grid-enterprise@35.0.1`. Optional charts: `highcharts@^12 highcharts-react-official@^3`. Then `npm uninstall impact-ui` when ready.\n\n**Styles:** In app root: `import 'impact-nova/dist/impact-nova.css';`\n\n**Font (Manrope):** Link in HTML; set `body { font-family: 'Manrope', sans-serif; }` in global CSS.\n\n**i18n:** Wrap app with `<ImpactNovaI18nProvider locale=\"en\">` (from `impact-nova`). Use locale packs (e.g. `de`) for other locales.\n\n**Tailwind (optional):** Preset `impact-nova/tailwind.config.js`; add `node_modules/impact-nova/dist/**/*.js` to `content`.\n\n**Vite:** Add `resolve.dedupe: ['react','react-dom','ag-grid-community','ag-grid-enterprise','ag-grid-react']`.\n\nUse MCP **`get_installation_and_config`** for project-specific steps.\n\n---\n\n## 3. Phase 2 — Component mapping (Impact UI → Impact Nova)\n\nUse **`get_component`** for exact API of each Nova component.\n\n| Legacy (Impact UI / common) | Impact Nova | Import |\n|-----------------------------|-------------|--------|\n| Button | Button | `impact-nova` / `impact-nova/button` |\n| Modal / Dialog | Dialog, AlertDialog, Prompt | `impact-nova`, `impact-nova/prompt` |\n| Slide-out / Drawer | Sheet | `impact-nova/sheet` |\n| Select / Dropdown | Select | `impact-nova/select` |\n| Input, TextField | Input, SmartInput | `impact-nova/input`, `impact-nova/smart-input` |\n| Textarea | Textarea | `impact-nova/textarea` |\n| Checkbox | Checkbox | `impact-nova/checkbox` |\n| Radio group | RadioGroup, RadioGroupItem | `impact-nova/radio-group` |\n| Switch / Toggle | Switch | `impact-nova/switch` |\n| Date picker / range | DatePicker, DateRangePicker, WeekRangePicker, MonthRangePicker | `impact-nova/date-picker` |\n| Tabs | Tabs, TabsList, TabsTrigger, TabsContent | `impact-nova/tabs` |\n| Alert / Banner | Alert, AlertTitle, AlertDescription, AlertIcon | `impact-nova/alert` |\n| Toast / Snackbar | toast, Toaster, useToast | `impact-nova` |\n| Badge / Tag | Badge, Tag, Chips | `impact-nova/badge`, `impact-nova`, `impact-nova/chips` |\n| Loader / Spinner | Loader, LoadingSpinner (icons) | `impact-nova/loader`, `impact-nova/icons` |\n| Accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | `impact-nova/accordion` |\n| Sidebar / Nav | Sidebar | `impact-nova/sidebar` |\n| Header / AppBar | Header + subcomponents | `impact-nova/header` |\n| Breadcrumb | Breadcrumb, BreadcrumbList, etc. | `impact-nova/breadcrumb` |\n| Avatar | Avatar, AvatarFallback | `impact-nova/avatar` |\n| Tooltip | Tooltip, TooltipTrigger, TooltipContent | `impact-nova/tooltip` |\n| File upload | FileUpload (composition) | `impact-nova/file-upload` |\n| Data grid / Table | DataTable, AG Grid | `impact-nova`, `impact-nova/ag-grid-react/cell-renderers` |\n| Filter panel / strip | FilterPanel, FilterStrip | `impact-nova/filter-panel`, `impact-nova` |\n| Empty state | EmptyContainer + subcomponents | `impact-nova/empty-container` |\n| Confirmation dialog | Prompt, AlertDialog | `impact-nova/prompt`, `impact-nova` |\n| Nested list / Tree | NestedList | `impact-nova/nested-list` |\n| Chart | Chart | `impact-nova/chart` |\n| Horizontal scroll list | HorizontalScroller | `impact-nova/horizontal-scroller` |\n\nIcons: `impact-nova/icons` (e.g. Pin, Chart, LoadingSpinner, getIconComponent).\n\n---\n\n## 4. Phase 3 — Import and API changes\n\n**Imports:** Barrel `import { Button, Card } from 'impact-nova';` | Subpath `import { Button } from 'impact-nova/button';` | Types `import type { Option, MultiValue } from 'impact-nova/select';`, `import type { BackendColDef } from 'impact-nova';`, `import type { FilterItem, SavedFilterItem } from 'impact-nova/filter-strip';`, `import type { NestedListItem } from 'impact-nova/nested-list';`.\n\n**API:** Severity/type → `variant` (e.g. `variant=\"destructive\"`). Alert: use AlertTitle, AlertDescription, AlertIcon. Toast: `toast()`, Toaster, useToast. Dialog: compound components; confirmations → Prompt or AlertDialog. Select options: type `Option` from `impact-nova/select`. Prefer compound components (e.g. SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter). Use **`validate_usage`** on snippets.\n\n---\n\n## 5. Phase 4 — Compound patterns\n\nUse **`get_real_world_patterns`** for more detail.\n\n- **Filter UI:** FilterPanel + FilterPanelSidebar, FilterPanelBody, FilterPanelFooter; FilterStrip; types FilterItem, SavedFilterItem, FilterSidebarItem.\n- **Data table + AG Grid:** DataTable, DataTableContent, processBackendColumnDefs, BackendColDef; AG_GRID_CELL_COMPONENTS, LinkCellRenderer from `impact-nova/ag-grid-react/cell-renderers`.\n- **Sheet:** Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter from `impact-nova/sheet`; pair with react-hook-form.\n- **Empty state:** EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction.\n- **Toast + Alert:** Toaster + toast()/useToast; Alert + AlertTitle, AlertDescription, AlertIcon from `impact-nova/alert`.\n- **Tabs + NestedList + Accordion:** Tabs components; NestedList + NestedListItem; Accordion components.\n\n---\n\n## 6. Phase 5 — Verification\n\n**Setup:** Impact Nova MCP enabled; keep impact-ui-mcp-server during migration. Nova + peers installed; CSS + Manrope + ImpactNovaI18nProvider; optional Tailwind + Vite dedupe.\n\n**Migration:** All legacy imports → Nova (barrel/subpath); Alert/Toast/Dialog use Nova variants and compounds; Option/MultiValue from `impact-nova/select`; types via `import type`; use tokens and variant/size.\n\n**MCP:** Use `validate_usage`, `get_component`, `suggest_components_for_ui`.\n\n**Build/tests:** `npm run build`, lint, manual test of forms, filters, tables, toasts, dialogs.\n";

package/dist/llms/rules/real-world-patterns.js

@@ -0,0 +1 @@
+export default "# Impact Nova — Real-World Patterns (from production apps)\n\nPatterns observed in apps that use Impact Nova extensively (e.g. filter UIs, data tables, sheets, empty states).\n\n---\n\n## 1. Subpath imports (tree-shaking)\n\nPrefer **subpath imports** when you need only a few exports; use the barrel `impact-nova` when you need many from the same area.\n\n| Use case | Import |\n|----------|--------|\n| Button only | `import { Button } from 'impact-nova/button';` |\n| Sheet (side panel) | `import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter } from 'impact-nova/sheet';` |\n| Filter panel | `import { FilterPanel, FilterPanelSidebar } from 'impact-nova/filter-panel';` and `FilterPanelBody`, `FilterPanelFooter` |\n| Filter strip | `import { FilterStrip } from 'impact-nova/filter-strip';` |\n| Empty state | `import { EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction } from 'impact-nova/empty-container';` |\n| Accordion | `import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'impact-nova/accordion';` |\n| Date pickers | `import { DateRangePicker } from 'impact-nova/date-picker';` or `WeekRangePicker`, `MonthRangePicker` |\n| Select | `import { Select } from 'impact-nova/select';` |\n| Alert | `import { Alert, AlertTitle, AlertDescription, AlertIcon } from 'impact-nova/alert';` |\n| Tooltip | `import { Tooltip, TooltipTrigger, TooltipContent } from 'impact-nova/tooltip';` |\n| Icons | `import { Pin, Unpin, Chart, getIconComponent } from 'impact-nova/icons';` |\n| AG Grid cell renderers | `import { AG_GRID_CELL_COMPONENTS, LinkCellRenderer } from 'impact-nova/ag-grid-react/cell-renderers';` |\n| Prompt | `import { Prompt } from 'impact-nova/prompt';` |\n| Radio group | `import { RadioGroup, RadioGroupItem } from 'impact-nova/radio-group';` |\n| Button group | `import { ButtonGroup } from 'impact-nova/button-group';` |\n| Smart input | `import { SmartInput as InputWrapper } from 'impact-nova/smart-input';` |\n| Chips | `import { Chip } from 'impact-nova/chips';` |\n| Loader | `import { Loader } from 'impact-nova/loader';` |\n\n---\n\n## 2. Type-only imports\n\nUse type-only imports for types to avoid pulling runtime code:\n\n```ts\nimport type { Option, MultiValue, ActionMeta } from 'impact-nova/select';\nimport type { FilterSidebarItem } from 'impact-nova/filter-panel';\nimport type { FilterItem, SavedFilterItem } from 'impact-nova/filter-strip';\nimport type { NestedListItem } from 'impact-nova/nested-list';\nimport type { FileUploadProps } from 'impact-nova/file-upload';\nimport type { BackendColDef } from 'impact-nova';\n```\n\n---\n\n## 3. Compound patterns\n\n### Filter UI (panel + strip)\n\n- **FilterPanel** + **FilterPanelSidebar** for the sliding panel; **FilterPanelBody** and **FilterPanelFooter** for content and Apply/Cancel.\n- **FilterStrip** to show applied filters (chips/tags). Types: `FilterItem`, `SavedFilterItem` from `impact-nova/filter-strip`.\n- Config drives **FilterSidebarItem** (from `impact-nova/filter-panel`); form state often with react-hook-form.\n\n### Data table + AG Grid\n\n**Mandatory (no deviation):** For DataTable or any data table using AG Grid, refer **only** to AG Grid's official documentation, follow **only** AG Grid recommended patterns, and use **only** the AG Grid API for grid operations. See resource `impact-nova://ag-grid-rules` for full rules. If the user has **ag-mcp** installed, use it for AG Grid API/docs and collaborate with this MCP for Impact Nova integration.\n\n- **DataTable**, **DataTableContent**, **DataTableSheet**, **DataTableSheetContent**, **DataTableSheetHeader**, **DataTableColumnList**, **DataTableFormatOptions** from `impact-nova`.\n- Use **processBackendColumnDefs** from `impact-nova` when column defs come from the backend; type **BackendColDef**.\n- Cell renderers: **AG_GRID_CELL_COMPONENTS** or **LinkCellRenderer** from `impact-nova/ag-grid-react/cell-renderers`; extend/wrap as needed (e.g. PlanningLinkCellRenderer).\n\n### Sheet (side panel with form)\n\n- **Sheet**, **SheetContent**, **SheetHeader**, **SheetTitle**, **SheetBody**, **SheetFooter** from `impact-nova/sheet`.\n- Use for “Match With”, “Bulk Edit”, “View Management” panels. Pair with react-hook-form for form content.\n\n### Empty state\n\n- **EmptyContainer** wrapping **EmptyContainerImage**, **EmptyContainerTitle**, **EmptyContainerDescription**, **EmptyContainerAction** (e.g. a Button to “Select filter” or “Add item”).\n\n### Tabs + NestedList + Accordion (view management)\n\n- **Tabs**, **TabsList**, **TabsTrigger**, **TabsContent** for switching sections.\n- **NestedList** with **SelectionMode**; data shape **NestedListItem** from `impact-nova/nested-list`.\n- **Accordion**, **AccordionItem**, **AccordionTrigger**, **AccordionContent** for expandable blocks (e.g. Versions & Variance).\n\n### Chart (Highcharts)\n\n- Use **Chart** from `impact-nova` (or `impact-nova/chart` if available) as the wrapper.\n- For **series, options, and configuration** refer to **Highcharts documentation** ([highcharts.com/docs](https://www.highcharts.com/docs/)); use the Highcharts API for chart behavior. Impact Nova provides the React integration and styling; options/series follow Highcharts.\n- Install: `highcharts@^12`, `highcharts-react-official@^3`, optional `highcharts-border-radius@^0.0.4`.\n\n### Toast + Alert\n\n- **toast**, **Toaster**, **useToast** from `impact-nova`; wrap app with **Toaster**.\n- **Alert**, **AlertTitle**, **AlertDescription**, **AlertIcon** from `impact-nova/alert` for inline or toast-style messages.\n\n### Command Palette & keyboard shortcuts\n\nImplementation is **more involved** than other components. Use the dedicated guide: resource **`impact-nova://command-palette`**.\n\n- **Import:** `import { CommandPaletteProvider, CommandPalette, useShortcut, useGlobalShortcut, ShortcutSettings, ShortcutScopeProvider, Kbd, useCommandPalette, useBrowserShortcuts } from 'impact-nova/command-palette';`\n- **Minimal setup:** Wrap app with `CommandPaletteProvider`; render `<CommandPalette />` once inside it (⌘K overlay). Register commands with `useShortcut` (scoped: page/module/modal) or `useGlobalShortcut` (app-wide). Use correct `scope` for priority (modal > page > module > global).\n- **Multi-table:** When multiple DataTables share the same shortcut, wrap each in `ShortcutScopeProvider` with a unique `instance` so only the focused one responds.\n- **ShortcutSettings:** AG Grid–powered panel for user customisation; put inside a Sheet (e.g. Keyboard Shortcuts settings). For AG Grid behaviour follow `impact-nova://ag-grid-rules`.\n- **Kbd:** Use `<Kbd keybinding={{ key: 'k', meta: true }} />` to show shortcut in UI. **Button trigger:** `useCommandPalette().setOpen(true)`.\n\n---\n\n## 4. App setup\n\n- **CSS once at root**: `import 'impact-nova/dist/impact-nova.css';` (e.g. in App.tsx or main.tsx).\n- **AG Grid**: Set `LicenseManager.setLicenseKey(...)` if using enterprise.\n- **Vite**: Dedupe react/ag-grid when using impact-nova to avoid dual instances:\n\n```js\nresolve: {\n  dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],\n  alias: {\n    // If impact-nova/horizontal-scroller doesn't re-export default:\n    'impact-nova/horizontal-scroller': resolve(__dirname, 'node_modules/impact-nova/dist/components/ui/horizontal-scroller/horizontal-scroller.js'),\n  },\n},\n```\n\n---\n\n## 5. Known workarounds\n\n- **HorizontalScroller**: Some builds expose it as default export from the component file; if the package entry is empty, add a Vite alias to `.../horizontal-scroller/horizontal-scroller.js` and a small `declare module 'impact-nova/horizontal-scroller'` (default export + props type) for TypeScript.\n- **Chart**: If the main export path doesn’t work, apps sometimes use `import { Chart as ImpactChart } from 'impact-nova/dist/components/ui/chart/chart';`. Prefer the public export when available.\n\n---\n\n## 6. Forms and options\n\n- **Select options**: Use type **Option** (or **SelectOption**) from `impact-nova/select` for `{ value, label }` (and optional fields). **MultiValue** for multi-select.\n- **react-hook-form**: Use Impact Nova form controls (SmartInput, Select, DateRangePicker, RadioGroup, ButtonGroup, Chips, etc.) as controlled components; pass `value`/`onChange` from the form library.\n- **Validation and errors**: Show validation errors with **Alert** or field-level messages; use the form library’s error state (e.g. `formState.errors`) and optional schema validation (e.g. Zod) with react-hook-form.\n\n---\n\n## 7. Breadcrumb and toolbar\n\n- **Breadcrumb** with **BreadcrumbList**, **BreadcrumbItem**, **BreadcrumbLink**, **BreadcrumbSeparator**, **BreadcrumbPage** for table/section context.\n- **DataTableToolbar** for table toolbars (view mode, view management, filters, Update/Cancel when editing).\n\nUse these patterns so the MCP and generated code stay close to how Impact Nova is used in real apps.\n";

package/dist/llms/rules/requirements.js

@@ -0,0 +1 @@
+export default "# Impact Nova — baseline\n\nUse **Impact Nova** design-system components and tokens. Prefer subpath imports (e.g. `impact-nova/button`) when you only need a few modules. For live component lists, specs, and codegen, use the **impact-nova-mcp** MCP server (see npm `impact-nova-mcp`). Browse **Storybook**: https://impact-nova.iaproducts.ai/\n\n## Peer dependency summary\n\n```json\n{\n  \"impactNova\": {\n    \"package\": \"impact-nova\",\n    \"recommendedVersion\": \"^1.4.0\",\n    \"description\": \"Design system package\"\n  },\n  \"requiredPeers\": [\n    {\n      \"package\": \"react\",\n      \"recommendedVersion\": \"^19.0.0\",\n      \"description\": \"React 19 required\"\n    },\n    {\n      \"package\": \"react-dom\",\n      \"recommendedVersion\": \"^19.0.0\",\n      \"description\": \"React DOM 19 required\"\n    }\n  ],\n  \"optionalPeers\": [\n    {\n      \"package\": \"ag-grid-react\",\n      \"recommendedVersion\": \"35.0.1\",\n      \"description\": \"For DataTable and grid components; use exact version to match Impact Nova\"\n    },\n    {\n      \"package\": \"ag-grid-enterprise\",\n      \"recommendedVersion\": \"35.0.1\",\n      \"description\": \"Required if using ag-grid-react with enterprise features\"\n    },\n    {\n      \"package\": \"highcharts\",\n      \"recommendedVersion\": \"^12.0.0\",\n      \"description\": \"For Chart component\"\n    },\n    {\n      \"package\": \"highcharts-react-official\",\n      \"recommendedVersion\": \"^3.0.0\",\n      \"description\": \"For Chart component\"\n    },\n    {\n      \"package\": \"highcharts-border-radius\",\n      \"recommendedVersion\": \"^0.0.4\",\n      \"description\": \"Optional Highcharts plugin for rounded corners\"\n    }\n  ]\n}\n```\n";

package/dist/llms/rules/troubleshooting.js

@@ -0,0 +1 @@
+export default "# Impact Nova — Troubleshooting\n\nCommon setup and runtime issues when using Impact Nova, and how to fix them.\n\n---\n\n## 1. Duplicate React or AG Grid (Vite)\n\n**Symptom:** \"Invalid hook call\", \"Multiple copies of React\", or AG Grid warnings about multiple instances.\n\n**Fix:** In Vite config, add `resolve.dedupe` so the app uses a single copy of React and AG Grid:\n\n```js\n// vite.config.js / vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],\n  },\n});\n```\n\n---\n\n## 2. Styles not applying\n\n**Symptom:** Components render but look unstyled or wrong.\n\n**Fix:**\n\n- Import Impact Nova CSS **once** at the app root, **before** your app component:  \n  `import 'impact-nova/dist/impact-nova.css';`  \n  Or, if you use **CSS or SCSS (no Tailwind)**, you can `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss. See installation **§5. Using Impact Nova with CSS or SCSS (no Tailwind)**.\n- Ensure your build includes the CSS (no rule excluding `node_modules/impact-nova`).\n- If using Tailwind, ensure the design system tokens aren’t overridden by a conflicting Tailwind theme.\n\n---\n\n## 3. Font (Manrope) not loading\n\n**Symptom:** Text renders in fallback font.\n\n**Fix:**\n\n- Add the Manrope link in `index.html`:  \n  `<link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\" />`\n- In global CSS or Tailwind base:  \n  `body { font-family: 'Manrope', sans-serif; }`\n\n---\n\n## 4. Chart component not found or wrong export\n\n**Symptom:** `import { Chart } from 'impact-nova'` fails or Chart doesn’t render.\n\n**Fix:**\n\n- Prefer the public export: `import { Chart } from 'impact-nova';` (or the subpath if documented).\n- If the main export path doesn’t work, some apps use:  \n  `import { Chart as ImpactChart } from 'impact-nova/dist/components/ui/chart/chart';`  \n  Prefer the public API when available. Ensure Highcharts is installed:  \n  `npm install highcharts@^12 highcharts-react-official@^3`\n\n---\n\n## 5. HorizontalScroller or other subpath missing\n\n**Symptom:** Import from `impact-nova/horizontal-scroller` (or similar) fails.\n\n**Fix:**\n\n- If the package doesn’t export that subpath, add a Vite alias to the component file and a small TypeScript declaration:\n\n```js\n// vite.config\nresolve: {\n  alias: {\n    'impact-nova/horizontal-scroller': resolve(__dirname, 'node_modules/impact-nova/dist/components/ui/horizontal-scroller/horizontal-scroller.js'),\n  },\n},\n```\n\n```ts\n// declare module 'impact-nova/horizontal-scroller'\ndeclare module 'impact-nova/horizontal-scroller' {\n  const Component: React.ComponentType<{ /* props */ }>;\n  export default Component;\n}\n```\n\n---\n\n## 6. AG Grid CSS not applied (legacy container conflict)\n\n**Symptom:** AG Grid in a micro-frontend (MFE) looks wrong or unstyled; the new AG Grid theme is not applied.\n\n**Cause:** The **container** (host app) is loading legacy AG Grid CSS. Those legacy style tags conflict with the new theme, so the MFE’s AG Grid doesn’t get the correct styles.\n\n**Fix:** Apply the fix in the **container** app, not in the MFE/remote repo. In the container, when you mount the remote (e.g. in a `useEffect`), remove the legacy AG Grid style tags from the document so the new theme can apply. Example:\n\n```tsx\n// In the CONTAINER app (not in the MFE repo)\nuseEffect(() => {\n  const { onParentNavigate } = mount(ref.current, {\n    initialPath: history.location.pathname,\n    onNavigate: ({ pathname: nextPathname }) => {\n      const { pathname } = history.location;\n      if (pathname !== nextPathname) {\n        history.push(nextPathname);\n      }\n    },\n    containerStore,\n    routes,\n    defaultHistory: history,\n  });\n\n  history.listen(onParentNavigate);\n\n  const removeAgGridStyles = () => {\n    const styleTags = document.querySelectorAll('style');\n    styleTags.forEach((styleTag) => {\n      const content = styleTag.textContent || styleTag.innerHTML || '';\n      // Legacy AG Grid styles (--ag-legacy-styles-loaded + .ag-icon)\n      const isLegacyStyles =\n        content.includes('--ag-legacy-styles-loaded') && content.includes('.ag-icon');\n      // Generic AG Grid selectors that override the new theme\n      const hasAgGridSelectors =\n        content.includes('ag-grid,ag-grid-angular') ||\n        content.includes('ag-grid, ag-grid-angular') ||\n        content.includes('ag-grid-ng2') ||\n        content.includes('ag-grid-polymer') ||\n        content.includes('ag-grid-aurelia');\n      if (isLegacyStyles || hasAgGridSelectors) {\n        styleTag.remove();\n      }\n    });\n  };\n\n  removeAgGridStyles();\n\n  const domNode = document.getElementById('itemsmart-remote'); // or your remote mount node id\n  return () => {\n    unmountComponentAtNode(domNode);\n  };\n}, []);\n```\n\nAdjust `mount`, `ref`, `history`, `containerStore`, `routes`, and the mount node id to match your container’s setup. The important part is calling `removeAgGridStyles()` so legacy AG Grid `<style>` tags are removed and the new theme can apply.\n\n---\n\n## 7. AG Grid license or enterprise features\n\n**Symptom:** AG Grid shows watermark or enterprise features don’t work.\n\n**Fix:** Set the license key once (e.g. in root or layout):\n\n```ts\nimport { LicenseManager } from 'ag-grid-enterprise';\n\nLicenseManager.setLicenseKey('your-license-key');\n```\n\n---\n\n## 8. i18n / locale not applied\n\n**Symptom:** Date pickers, selects, or other components show wrong locale or default English.\n\n**Fix:** Wrap the app with `ImpactNovaI18nProvider` and pass the correct `locale` (and optional `messages`):\n\n```tsx\nimport { ImpactNovaI18nProvider } from 'impact-nova';\n\n<ImpactNovaI18nProvider locale=\"de\">\n  <App />\n</ImpactNovaI18nProvider>\n```\n\n---\n\n## 9. React 19 compatibility\n\n**Symptom:** Peer dependency warnings or runtime errors after adding Impact Nova.\n\n**Fix:** Impact Nova targets React 19. Upgrade React and React DOM:\n\n```bash\nnpm install react@^19 react-dom@^19\n```\n\nUse `analyze_project_for_impact_nova` with your `package.json` content to get exact recommended versions and install commands.\n\n---\n\nUse `get_installation_and_config` for full setup steps and `impact-nova://install` for the installation resource.\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Built-in internationalization (i18n) and comprehensive UI component library for scalable, accessible, and performant applications.",
   "type": "module",
   "main": "./dist/index.js",
@@ -87,6 +87,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./llms": {
+      "types": "./dist/llms/index.d.ts",
+      "import": "./dist/llms/index.js"
+    },
     "./dist/impact-nova.css": "./dist/impact-nova.css",
     "./locale": {
       "types": "./dist/i18n/locales/index.d.ts",
@@ -530,7 +534,7 @@
     "dev": "vite",
     "prepublishOnly": "npm i && npm run build",
     "validate-imports": "node scripts/validate-imports.mjs",
-    "build": "node scripts/validate-imports.mjs && tsc -b && vite build",
+    "build": "node scripts/validate-imports.mjs && tsc -b && vite build && node scripts/build-llms.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",