# Impact Nova — Design system mandate (MANDATORY)

**This applies to every persona** (product, designer, manager, backend, frontend). No exceptions unless the user explicitly opts out of Impact Nova entirely.

---

## Rule 1 — Impact Nova components only

- **Do NOT create new custom UI components** (no `MyTable`, `CustomSidebar`, `PlanningGrid`, wrapper divs pretending to be design-system primitives).
- **Do NOT import** MUI, Ant Design, Chakra, Bootstrap, shadcn-from-scratch, or raw Radix for UI that Impact Nova already provides.
- **Compose** existing Impact Nova components only. If unsure, call `list_components` or `get_component`.
- Page-level orchestration files (`PlanningPage.tsx`) are fine — they wire Impact Nova pieces together; they must not reimplement design-system widgets.

---

## Rule 2 — Tables → DataTable (mandatory)

If the user mentions **any** of: table, grid, spreadsheet, Excel-like, rows/columns, data grid, KPI columns, SKU matrix, planning grid:

| Forbidden | Required |
|-----------|----------|
| HTML `<table>` | `DataTable` + `DataTableContent` from `impact-nova/data-table` |
| Raw `ag-grid-react` / `AgGridReact` in app code | Impact Nova `DataTable` wrapper |
| `@tanstack/react-table` for UI grids | Impact Nova `DataTable` (unless virtualized list-only via `impact-nova/virtualized`) |
| `import { Table } from 'impact-nova/table'` for data views | **Not exported** — use `DataTable` from `impact-nova/data-table` |
| Custom cell grid built with divs | `DataTable` + `ColDef` / column groups |

Follow **`impact-nova://ag-grid-rules`**: AG Grid docs/API only, via Impact Nova DataTable integration.

---

## Rule 3 — Standard UI mapping

| User asks for | Use (impact-nova subpath) |
|---------------|----------------------------|
| Table / grid / planning sheet | `data-table` |
| App shell / sidebar / header | `layout`, `sidebar`, `header` |
| Breadcrumbs | `breadcrumb` |
| Filter chips / filter bar | `filter-strip`, `filter-panel` |
| Filter selection sheet (Item Filters) | `filter-panel` — sidebar tabs + Apply/Cancel footer |
| Landing before data loads | `empty-container` + Select filter CTA |
| Modal / dialog | `dialog` or `alert-dialog` |
| Side panel | `sheet` or `drawer` |
| Toast / notification | `toast`, `toaster`, `hooks/use-toast` |
| Tabs / workflow modes | `tabs` |
| Buttons | `button`, `button-group` |
| Form inputs | `input`, `select`, `combobox`, `checkbox`, `radio-group`, `date-picker` |
| Charts | `chart` (Highcharts config) |
| Empty state | `empty-container` |
| Loading | `loader`, `skeleton` |
| KPI / stat cards | `card`, `statistics-card` |
| Stepper | `stepper` |
| Command palette / shortcuts | `command-palette` |

**Tabular UI = `DataTable` only** (`impact-nova/data-table`). There is no `impact-nova/table` export.

When mapping is unclear → `suggest_components_for_ui` then `get_component`.

---

## Rule 4 — Validate before done

Call **`validate_snippet`** on generated UI code. Reject output that violates Rules 1–6.

---

## Rule 5 — Planning / Item Smart quality bar

When the user asks for **planning**, **Item Smart-like**, **Baseprice**, or **grid + filters + workflow**:

Read **`impact-nova://product-quality-bar`** and **`impact-nova://ia-design-language`** (Figma-trained IA designer guide). Greenfield scaffolds ship premium chrome — extend that starter; do not ship a bare `DataTable` page.

---

## Rule 6 — Theming (consumer vs Storybook)

| Context | Rule |
|---------|------|
| **Consumer apps** | Import `impact-nova/dist/impact-nova.css` — **Impact Light** tokens only. Override `--color-*` CSS variables for brand deltas. |
| **Storybook presets** | Impact Dark, Midnight, Ocean, etc. are **Storybook/dev-only** — not shipped in npm `dist/`. Never scaffold preset files into app repos. |
| **Agents** | Do not generate `theme-presets.ts`, tweakcn imports, or multi-theme switchers unless the user explicitly builds internal design tooling. |

Token source of truth: `src/theme/tokens/light.json` → generated `impact-nova-tokens.scss` in the published package.

---

## Persona note

- **Product / designer / manager / backend** may not say "DataTable" — you still use it when they say table/grid.
- **Frontend** must not bypass Impact Nova wrappers for convenience.

---

## Only exception

User explicitly requests **non–Impact Nova** stack or **HTML-only artifact** (standalone `.html` with no Impact Nova) — document that they are leaving the design system.