impact-nova 2.0.5 → 2.0.7

package/dist/components/ui/date-picker/week-range-picker.js

@@ -1,15 +1,15 @@
 import { jsxs as f, jsx as l } from "react/jsx-runtime";
 import * as c from "react";
 import { Cross as Ne, CalendarMonth as Re, Info as Z } from "impact-nova-icons";
-import { format as s, isValid as C, parse as I } from "date-fns";
-import { cn as p, padValidDateString as $, maskDate as Y } from "../../../lib/utils.js";
+import { format as r, isValid as C, parse as I } from "date-fns";
+import { cn as m, padValidDateString as $, maskDate as Y } from "../../../lib/utils.js";
 import { Popover as Se, PopoverAnchor as Ce, PopoverContent as Ie } from "../popover.js";
 import { Calendar as Pe } from "../calendar.js";
 import { Tooltip as _, TooltipTrigger as F, TooltipContent as ee } from "../tooltip.js";
 import { resolveWeekSelection as We } from "../../../lib/fiscal-calendar.js";
 import { getDateFnsLocale as Ve } from "../../../i18n/getDateFnsLocale.js";
 import { useImpactNovaI18n as Ee } from "../../../i18n/ImpactNovaI18nContext.js";
-const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c.forwardRef(
+const i = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c.forwardRef(
   ({
     value: t,
     onChange: b,
@@ -26,7 +26,7 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
     fiscalMonthPattern: B,
     fiscalYearStartMonth: O = 1,
     weekStartsOn: T = 1,
-    disabled: i,
+    disabled: a,
     className: se,
     isError: D,
     size: H,
@@ -40,20 +40,20 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
   }, ie) => {
     const { locale: G, t: W } = Ee(), o = c.useMemo(() => Ve(G), [G]), J = te ?? W("datePicker.selectWeekRange"), Q = c.useRef(null), de = c.useRef(null);
     c.useRef(null), c.useRef(null), c.useImperativeHandle(ie, () => Q.current);
-    const [r, k] = c.useState(!1), V = c.useRef(!1), [v, m] = c.useState(t), [R, u] = c.useState(t?.from ? s(t.from.startDate, n, { locale: o }) : ""), [S, x] = c.useState(a(t) ? s(a(t), n, { locale: o }) : ""), [fe, j] = c.useState(t?.from?.startDate || /* @__PURE__ */ new Date());
+    const [s, p] = c.useState(!1), V = c.useRef(!1), [v, u] = c.useState(t), [R, x] = c.useState(t?.from ? r(t.from.startDate, n, { locale: o }) : ""), [S, h] = c.useState(i(t) ? r(i(t), n, { locale: o }) : ""), [fe, j] = c.useState(t?.from?.startDate || /* @__PURE__ */ new Date());
     c.useEffect(() => {
-      r || (u(t?.from ? s(t.from.startDate, n, { locale: o }) : ""), x(a(t) ? s(a(t), n, { locale: o }) : ""), m(t));
-    }, [t, n, r, o]), c.useEffect(() => {
-      r && (m(t), u(t?.from ? s(t.from.startDate, n, { locale: o }) : ""), x(a(t) ? s(a(t), n, { locale: o }) : ""), j(t?.from?.startDate || /* @__PURE__ */ new Date()));
-    }, [r, t, n, o]);
+      s || (x(t?.from ? r(t.from.startDate, n, { locale: o }) : ""), h(i(t) ? r(i(t), n, { locale: o }) : ""), u(t));
+    }, [t, n, s, o]), c.useEffect(() => {
+      s && (u(t), x(t?.from ? r(t.from.startDate, n, { locale: o }) : ""), h(i(t) ? r(i(t), n, { locale: o }) : ""), j(t?.from?.startDate || /* @__PURE__ */ new Date()));
+    }, [s, t, n, o]);
     const pe = (e) => {
-      m(e), e?.from ? (u(s(e.from.startDate, n, { locale: o })), x(s(a(e), n, { locale: o }))) : (u(""), x("")), !y && e?.from && e?.to && e.from.startDate.getTime() !== e.to.startDate.getTime() && (b?.(e), k(!1));
+      u(e), e?.from ? (x(r(e.from.startDate, n, { locale: o })), h(r(i(e), n, { locale: o }))) : (x(""), h("")), !y && e?.from && e?.to && e.from.startDate.getTime() !== e.to.startDate.getTime() && (b?.(e), p(!1));
     }, me = (e) => {
-      b?.(e !== void 0 ? e : v), k(!1);
+      b?.(e !== void 0 ? e : v), p(!1);
     }, z = () => {
-      m(t), u(t?.from ? s(t.from.startDate, n, { locale: o }) : ""), x(a(t) ? s(a(t), n, { locale: o }) : ""), k(!1);
+      u(t), x(t?.from ? r(t.from.startDate, n, { locale: o }) : ""), h(i(t) ? r(i(t), n, { locale: o }) : ""), p(!1);
     }, U = () => {
-      m(void 0), u(""), x(""), b?.(void 0), y || k(!1);
+      u(void 0), x(""), h(""), b?.(void 0), y || p(!1);
     }, E = (e) => We(e, {
       calendarType: L,
       fiscalMode: K,
@@ -63,46 +63,46 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
       weekStartsOn: T
     }), ue = (e) => {
       const w = e.target.value, d = Y(w, n, R);
-      if (u(d), d === "") {
-        const g = { from: void 0, to: v?.to };
-        m(g), y || b?.(g);
+      if (x(d), d === "") {
+        const k = { from: void 0, to: v?.to };
+        u(k), y || b?.(k);
         return;
       }
-      const h = I(d, n, /* @__PURE__ */ new Date(), { locale: o });
-      if (C(h) && d.length === n.length) {
-        const N = { from: E(h), to: v?.to };
-        m(N), x(s(a(N), n, { locale: o })), y || b?.(N);
+      const g = I(d, n, /* @__PURE__ */ new Date(), { locale: o });
+      if (C(g) && d.length === n.length) {
+        const N = { from: E(g), to: v?.to };
+        u(N), h(r(i(N), n, { locale: o })), y || b?.(N);
       }
     }, xe = (e) => {
       const w = e.target.value, d = Y(w, n, S);
-      if (x(d), d === "") {
-        const g = { from: v?.from, to: void 0 };
-        m(g), y || b?.(g);
+      if (h(d), d === "") {
+        const k = { from: v?.from, to: void 0 };
+        u(k), y || b?.(k);
         return;
       }
-      const h = I(d, n, /* @__PURE__ */ new Date(), { locale: o });
-      if (C(h) && d.length === n.length) {
-        const g = E(h), N = { from: v?.from, to: g };
-        m(N), v?.from && u(s(v.from.startDate, n, { locale: o })), h && j(h), y || b?.(N);
+      const g = I(d, n, /* @__PURE__ */ new Date(), { locale: o });
+      if (C(g) && d.length === n.length) {
+        const k = E(g), N = { from: v?.from, to: k };
+        u(N), v?.from && x(r(v.from.startDate, n, { locale: o })), g && j(g), y || b?.(N);
       }
     }, X = () => {
-      if (r) return;
-      const e = $(R, n), w = $(S, n), d = I(e, n, /* @__PURE__ */ new Date(), { locale: o }), h = I(w, n, /* @__PURE__ */ new Date(), { locale: o }), g = C(d) && e.length === n.length, N = C(h) && w.length === n.length;
-      if (!g || !N)
-        u(t?.from ? s(t.from.startDate, n, { locale: o }) : ""), x(a(t) ? s(a(t), n, { locale: o }) : ""), m(t);
-      else if (u(e), x(w), !y) {
-        const De = E(d), ve = E(h);
+      if (s) return;
+      const e = $(R, n), w = $(S, n), d = I(e, n, /* @__PURE__ */ new Date(), { locale: o }), g = I(w, n, /* @__PURE__ */ new Date(), { locale: o }), k = C(d) && e.length === n.length, N = C(g) && w.length === n.length;
+      if (!k || !N)
+        x(t?.from ? r(t.from.startDate, n, { locale: o }) : ""), h(i(t) ? r(i(t), n, { locale: o }) : ""), u(t);
+      else if (x(e), h(w), !y) {
+        const De = E(d), ve = E(g);
         b?.({ from: De, to: ve });
       }
-    }, he = t?.from ? s(t.from.startDate, n, { locale: o }) : "", ge = a(t) ? s(a(t), n, { locale: o }) : "", ke = he !== R, we = ge !== S, be = R.length === n.length && !C(I(R, n, /* @__PURE__ */ new Date(), { locale: o })), ye = S.length === n.length && !C(I(S, n, /* @__PURE__ */ new Date(), { locale: o }));
-    return /* @__PURE__ */ f("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "week-range-picker", "data-disabled": i || void 0, children: [
+    }, he = t?.from ? r(t.from.startDate, n, { locale: o }) : "", ge = i(t) ? r(i(t), n, { locale: o }) : "", ke = he !== R, we = ge !== S, be = R.length === n.length && !C(I(R, n, /* @__PURE__ */ new Date(), { locale: o })), ye = S.length === n.length && !C(I(S, n, /* @__PURE__ */ new Date(), { locale: o }));
+    return /* @__PURE__ */ f("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "week-range-picker", "data-disabled": a || void 0, children: [
       /* @__PURE__ */ f("div", { className: "flex flex-col gap-[6px]", children: [
         q && /* @__PURE__ */ f(
           "label",
           {
-            className: p(
+            className: m(
               "text-xs font-medium leading-[18px] text-content-tertiary",
-              i && "opacity-70",
+              a && "opacity-70",
               D && "text-destructive"
             ),
             children: [
@@ -115,23 +115,23 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
         /* @__PURE__ */ f(
           "div",
           {
-            className: p(
+            className: m(
               "w-full",
               P && A === "absolute" && "relative"
             ),
             children: [
-              /* @__PURE__ */ f(Se, { open: i ? !1 : r, onOpenChange: (e) => {
-                i || k(e);
+              /* @__PURE__ */ f(Se, { open: a ? !1 : s, onOpenChange: (e) => {
+                a || p(e);
               }, children: [
                 /* @__PURE__ */ l(Ce, { asChild: !0, children: /* @__PURE__ */ f(
                   "div",
                   {
-                    "data-state": r ? "open" : "closed",
-                    className: p(
+                    "data-state": s ? "open" : "closed",
+                    className: m(
                       "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
                       D ? "border-destructive hover:border-destructive" : "border-field",
                       H === "sm" ? "h-6" : H === "md" ? "h-[28px]" : "h-8",
-                      i && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+                      a && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
                       "cursor-pointer",
                       se
                     ),
@@ -145,15 +145,15 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
                             value: R,
                             onChange: ue,
                             onBlur: X,
-                            onClick: (e) => r && e.stopPropagation(),
+                            onClick: () => !a && p(!0),
                             onKeyDown: (e) => {
-                              (e.key === "Enter" || e.key === "ArrowDown") && !r && !i && (e.preventDefault(), V.current = !0, k(!0)), e.key === "Escape" && r && (e.preventDefault(), z());
+                              (e.key === "Enter" || e.key === "ArrowDown") && !s && !a && (e.preventDefault(), V.current = !0, p(!0)), e.key === "Escape" && s && (e.preventDefault(), z());
                             },
-                            placeholder: r ? n : J,
-                            disabled: !!i,
+                            placeholder: s ? n : J,
+                            disabled: !!a,
                             "aria-label": "Start Date",
                             "data-field": "start",
-                            className: p(
+                            className: m(
                               "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
                               be ? "text-destructive" : ke ? "text-content-muted" : ""
                             ),
@@ -168,15 +168,15 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
                             value: S,
                             onChange: xe,
                             onBlur: X,
-                            onClick: (e) => r && e.stopPropagation(),
+                            onClick: () => !a && p(!0),
                             onKeyDown: (e) => {
-                              (e.key === "Enter" || e.key === "ArrowDown") && !r && !i && (e.preventDefault(), V.current = !0, k(!0)), e.key === "Escape" && r && (e.preventDefault(), z());
+                              (e.key === "Enter" || e.key === "ArrowDown") && !s && !a && (e.preventDefault(), V.current = !0, p(!0)), e.key === "Escape" && s && (e.preventDefault(), z());
                             },
-                            placeholder: r ? n : J,
-                            disabled: !!i,
+                            placeholder: s ? n : J,
+                            disabled: !!a,
                             "aria-label": "End Date",
                             "data-field": "end",
-                            className: p(
+                            className: m(
                               "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
                               ye ? "text-destructive" : we ? "text-content-muted" : ""
                             )
@@ -184,7 +184,7 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
                         )
                       ] }),
                       /* @__PURE__ */ f("div", { className: "flex items-center gap-1 shrink-0", children: [
-                        t?.from && !i && /* @__PURE__ */ f(_, { children: [
+                        t?.from && !a && /* @__PURE__ */ f(_, { children: [
                           /* @__PURE__ */ l(F, { asChild: !0, children: /* @__PURE__ */ l(
                             "button",
                             {
@@ -202,9 +202,9 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
                         ] }),
                         /* @__PURE__ */ f(_, { children: [
                           /* @__PURE__ */ l(F, { asChild: !0, children: /* @__PURE__ */ l("button", { type: "button", tabIndex: 0, "aria-label": W("datePicker.selectWeekRange"), onClick: (e) => {
-                            e.stopPropagation(), i || k(!r);
+                            e.stopPropagation(), a || p(!s);
                           }, onKeyDown: (e) => {
-                            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), i || (V.current = !0, k(!r)));
+                            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), a || (V.current = !0, p(!s)));
                           }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ l(Re, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
                           /* @__PURE__ */ l(ee, { variant: "tertiary", side: "top", children: W("datePicker.selectWeekRange") })
                         ] })
@@ -248,12 +248,12 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
                   }
                 )
               ] }),
-              P && A === "absolute" && /* @__PURE__ */ f("div", { className: p("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", D && "text-destructive"), children: [
+              P && A === "absolute" && /* @__PURE__ */ f("div", { className: m("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", D && "text-destructive"), children: [
                 /* @__PURE__ */ l(
                   Z,
                   {
                     size: "xs",
-                    className: p(
+                    className: m(
                       "shrink-0",
                       D ? "text-destructive" : "text-content-muted"
                     )
@@ -262,7 +262,7 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
                 /* @__PURE__ */ l(
                   "p",
                   {
-                    className: p(
+                    className: m(
                       "min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
                       D && "text-destructive"
                     ),
@@ -274,12 +274,12 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
           }
         )
       ] }),
-      P && A === "flow" && /* @__PURE__ */ f("div", { className: p("flex items-center gap-[6px]", D && "text-destructive"), children: [
+      P && A === "flow" && /* @__PURE__ */ f("div", { className: m("flex items-center gap-[6px]", D && "text-destructive"), children: [
         /* @__PURE__ */ l(
           Z,
           {
             size: "xs",
-            className: p(
+            className: m(
               "shrink-0",
               D ? "text-destructive" : "text-content-muted"
             )
@@ -288,7 +288,7 @@ const a = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, Ae = c
         /* @__PURE__ */ l(
           "p",
           {
-            className: p(
+            className: m(
               "text-[12px] font-medium leading-[18px] text-navigation-muted",
               D && "text-destructive"
             ),

package/dist/llms/rules/installation.js

@@ -1 +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## 0. Scaffold a new app (recommended)\n\n**Pre-publish (local monorepo):** scaffold links `impact-nova` via `file:` — no npm publish required.\n\n```bash\n# from impact-nova repo (after npm run build at repo root)\nnpx create-impact-nova my-dashboard\ncd my-dashboard\nnpm run dev\n```\n\nMCP: **`scaffold_impact_nova_app`** with `projectName` (defaults to local `file:` impact-nova).\n\n**After publish:** add `--from-npm` to CLI or `usePublishedPackages: true` in MCP.\n\n```bash\nnpx create-impact-nova my-dashboard --from-npm\n```\n\nIncludes Tailwind, Layout, AG Grid DataTable, Highcharts Chart, FilterStrip, and sample Dashboard + Items pages.\n\n**Local link in an existing app** (manual):\n\n```bash\nnpm install impact-nova@file:../path-to-impact-nova-repo\n```\n\nRun `npm run build` in the impact-nova repo after design-system changes.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova impact-nova-icons\nnpm install react@^19 react-dom@^19\n```\n\n**Required peers:** `react@^19`, `react-dom@^19`, `impact-nova-icons@^0.1.1`\n\n**Optional peers** (install when you use these features):\n\n| Package | Version | When needed |\n|---------|---------|-------------|\n| `ag-grid-react` | `35.0.1` | DataTable / AG Grid |\n| `ag-grid-enterprise` | `35.0.1` | Enterprise grid features |\n| `highcharts` | `^12` | Chart component |\n| `highcharts-react-official` | `^3` | Chart component |\n| `highcharts-border-radius` | `^0.0.4` | Rounded chart corners |\n| `@tanstack/react-table` | `^8.20` | Optional table utilities |\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 } from 'impact-nova';\nimport { de } from 'impact-nova/locale/de';\n\n<ImpactNovaI18nProvider locale=\"de\" messages={de}>\n  <App />\n</ImpactNovaI18nProvider>\n```\n\n## 5. Subpath imports (recommended)\n\nPrefer subpath imports in feature code for tree-shaking:\n\n```tsx\nimport { Button } from 'impact-nova/button';\nimport { Card, CardContent } from 'impact-nova/card';\nimport { DataTable, DataTableContent, useDataTable } from 'impact-nova/data-table';\nimport { CheckCircle } from 'impact-nova-icons';\n```\n\nThe barrel `import { Button } from 'impact-nova'` still works but pulls a larger module graph. Use subpaths in production apps.\n\n## 6. 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  **CSS split exports** (optional, for layered theming): `impact-nova/impact-nova-tokens.scss`, `impact-nova/impact-nova-base.scss`, `impact-nova/impact-nova-components.css`\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## 7. 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## 8. 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 impact-nova-icons` (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 §6)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaI18nProvider locale=\"en\">`\n- [ ] Use subpath imports in feature code (see §5)\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, import components via subpaths: `import { Button } from 'impact-nova/button';`\n\n## 9. Dashboard app shell (optional)\n\nTo scaffold a full dashboard (sidebar, header, breadcrumb, filters), read resource **`impact-nova://layout`** or call `get_real_world_patterns` with `topic: \"layout\"`. Use `Layout` from `impact-nova/layout` — not `DynamicLayout` (grid/flex utility only).\n";
+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## 0. Scaffold a new app (recommended)\n\n**`create-impact-nova@^1.0.0`** is on npm. Scaffold auto-detects dependency mode:\n\n| Where you run | `impact-nova` dependency |\n|---------------|--------------------------|\n| Published CLI / MCP (outside monorepo) | `^2.0.5` from npm |\n| Inside impact-nova monorepo | `file:` link to repo root |\n\n```bash\nnpx create-impact-nova my-dashboard\ncd my-dashboard\nnpm run dev\n```\n\nMCP: **`scaffold_impact_nova_app`** with `projectName` and optional `modules[]` from the user prompt.\n\n**Overrides:** CLI `--from-npm` · `--link-monorepo` · MCP `usePublishedPackages: true | false`\n\n```bash\nnpx create-impact-nova my-dashboard --from-npm\n```\n\nBase template is shell-only (Home + shared primitives). Feature pages come from recipes — see `create-impact-nova/recipes/README.md`.\n\n**Local link in an existing app** (manual):\n\n```bash\nnpm install impact-nova@file:../path-to-impact-nova-repo\n```\n\nRun `npm run build` in the impact-nova repo after design-system changes.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova impact-nova-icons\nnpm install react@^19 react-dom@^19\n```\n\n**Required peers:** `react@^19`, `react-dom@^19`, `impact-nova-icons@^0.1.1`\n\n**Optional peers** (install when you use these features):\n\n| Package | Version | When needed |\n|---------|---------|-------------|\n| `ag-grid-react` | `35.0.1` | DataTable / AG Grid |\n| `ag-grid-enterprise` | `35.0.1` | Enterprise grid features |\n| `highcharts` | `^12` | Chart component |\n| `highcharts-react-official` | `^3` | Chart component |\n| `highcharts-border-radius` | `^0.0.4` | Rounded chart corners |\n| `@tanstack/react-table` | `^8.20` | Optional table utilities |\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 } from 'impact-nova';\nimport { de } from 'impact-nova/locale/de';\n\n<ImpactNovaI18nProvider locale=\"de\" messages={de}>\n  <App />\n</ImpactNovaI18nProvider>\n```\n\n## 5. Subpath imports (recommended)\n\nPrefer subpath imports in feature code for tree-shaking:\n\n```tsx\nimport { Button } from 'impact-nova/button';\nimport { Card, CardContent } from 'impact-nova/card';\nimport { DataTable, DataTableContent, useDataTable } from 'impact-nova/data-table';\nimport { CheckCircle } from 'impact-nova-icons';\n```\n\nThe barrel `import { Button } from 'impact-nova'` still works but pulls a larger module graph. Use subpaths in production apps.\n\n## 6. 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  **CSS split exports** (optional, for layered theming): `impact-nova/impact-nova-tokens.scss`, `impact-nova/impact-nova-base.scss`, `impact-nova/impact-nova-components.css`\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## 7. 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## 8. 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 impact-nova-icons` (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 §6)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaI18nProvider locale=\"en\">`\n- [ ] Use subpath imports in feature code (see §5)\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, import components via subpaths: `import { Button } from 'impact-nova/button';`\n\n## 9. Dashboard app shell (optional)\n\nTo scaffold a full dashboard (sidebar, header, breadcrumb, filters), read resource **`impact-nova://layout`** or call `get_real_world_patterns` with `topic: \"layout\"`. Use `Layout` from `impact-nova/layout` — not `DynamicLayout` (grid/flex utility only).\n";

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

@@ -1 +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\n**Default for production apps:** use subpath imports. Production apps (e.g. mtp-mfe-itemsmart-v3) migrated to 100% subpath imports — zero barrel `from 'impact-nova'` in feature code. Barrel is OK for i18n bootstrapping only.\n\n| Use case | Import |\n|----------|--------|\n| Layout (app shell) | `import { Layout } from 'impact-nova/layout';` |\n| Sidebar | `import { Sidebar, SidebarProvider, SidebarContent } from 'impact-nova/sidebar';` |\n| Header | `import { Header, HeaderLeft, HeaderRight, HeaderTitle } from 'impact-nova/header';` |\n| Breadcrumb | `import { Breadcrumb, BreadcrumbList, BreadcrumbHeader } from 'impact-nova/breadcrumb';` |\n| Button only | `import { Button } from 'impact-nova/button';` |\n| Combobox | `import { Combobox } from 'impact-nova/combobox';` |\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| Data table | `import { DataTable, DataTableContent, DataTableToolbar, useDataTable } from 'impact-nova/data-table';` |\n| Progress bar | `import { ProgressBar } from 'impact-nova/progress-bar';` |\n| Virtualized list | `import { useVirtualizedList, useDebouncedValue } from 'impact-nova/virtualized';` |\n| Row selection type | `import type { RowSelectionState } from 'impact-nova/virtualized';` |\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 } from 'impact-nova-icons';` + `createIconResolver` for dynamic lookup |\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/data-table`.\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- **Lazy illustrations:** When no custom `children` are passed to `EmptyContainerImage`, one random illustration loads via dynamic `import()` — only ~1 webp chunk per empty state, not all 6 upfront. Pass custom children to skip illustration loading entirely.\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/chart` 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. Exclude `impact-nova-icons` from `optimizeDeps` to prevent SVG asset warnings in dev:\n\n```js\noptimizeDeps: {\n  exclude: ['impact-nova-icons'],\n},\nresolve: {\n  dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],\n},\n```\n\n---\n\n## 5. Known workarounds\n\n- **HorizontalScroller**: If the package entry is empty in your build, add a Vite alias to `.../horizontal-scroller/horizontal-scroller.js` and a small `declare module 'impact-nova/horizontal-scroller'` for TypeScript.\n- **Chart**: Prefer `import { Chart } from 'impact-nova/chart'`. Pre-bundle Highcharts UMD modules in Vite `optimizeDeps.include` if you see interop errors in dev.\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\n---\n\n## 8. Wizard (multi-step flow)\n\nUse **Wizard** for any multi-step creation or onboarding flow. Radix-style controlled state (`value` / `onValueChange`), optional split-panel layout, and `useWizard()` for flexible footers.\n\n### Import\n\n```ts\nimport {\n  WizardRoot,\n  WizardLayout,\n  WizardSidebar,\n  WizardTitle,\n  WizardDescription,\n  WizardMedia,\n  WizardBody,\n  WizardProgress,\n  WizardHeader,\n  WizardContent,\n  WizardStep,\n  WizardFooter,\n  useWizard,\n} from 'impact-nova/wizard';\n```\n\n### Minimal multi-step example\n\n```tsx\nimport { useState } from 'react';\nimport {\n  WizardRoot, WizardLayout,\n  WizardSidebar, WizardTitle, WizardDescription, WizardMedia,\n  WizardBody, WizardProgress,\n  WizardContent, WizardStep, WizardHeader,\n  WizardFooter,\n} from 'impact-nova/wizard';\nimport { Button } from 'impact-nova/button';\n\nexport function CreateAlertFlow() {\n  const [step, setStep] = useState(1);\n\n  return (\n    <WizardRoot value={step} totalSteps={3} onValueChange={setStep}>\n      <WizardLayout>\n        <WizardSidebar>\n          <WizardTitle>Create Alert</WizardTitle>\n          <WizardDescription>Configure your alert step by step.</WizardDescription>\n          <WizardMedia />\n        </WizardSidebar>\n\n        <WizardBody>\n          <WizardProgress />\n          <WizardContent>\n            <WizardStep value={1}>\n              <WizardHeader>Alert Details</WizardHeader>\n            </WizardStep>\n            <WizardStep value={2}>\n              <WizardHeader>Configuration</WizardHeader>\n            </WizardStep>\n            <WizardStep value={3}>\n              <WizardHeader>Review</WizardHeader>\n            </WizardStep>\n          </WizardContent>\n          <WizardFooter>\n            <Button variant=\"secondary\">Cancel</Button>\n            <Button variant=\"default\">Submit</Button>\n          </WizardFooter>\n        </WizardBody>\n      </WizardLayout>\n    </WizardRoot>\n  );\n}\n```\n\n### Key rules\n\n- **WizardRoot** is the context provider — every other sub-component must be a descendant.\n- Use **useWizard()** for `goNext`, `goBack`, `isFirstStep`, `isLastStep` without prop drilling.\n- **WizardStep** renders nothing when `value` doesn't match the current step — use one per step.\n- **WizardMedia** renders a default SVG when neither `src` nor `children` are provided.\n- The sidebar is hidden below the `lg` breakpoint.\n- All sub-components except **WizardRoot** are optional — compose only what you need.\n---\n\n## 9. App layout (app shell)\n\n**Use `Layout`** for the app chrome — not `DynamicLayout` (that is a grid/flex/stack utility only).\n\nFull beginner scaffold: resource **`impact-nova://layout`**.\n\n### Structure\n\n```tsx\nimport { Layout } from 'impact-nova/layout';\nimport { Sidebar, SidebarProvider } from 'impact-nova/sidebar';\nimport { Header, HeaderLeft, HeaderTitle } from 'impact-nova/header';\nimport { BreadcrumbHeader, Breadcrumb, BreadcrumbList } from 'impact-nova/breadcrumb';\nimport { FilterStrip } from 'impact-nova/filter-strip';\n\n<SidebarProvider defaultOpen={false} id=\"app-sidebar\" className=\"flex h-svh min-h-0 w-full min-w-0 overflow-hidden\">\n  <Layout\n    sidebar={<Sidebar collapsible=\"offcanvas\">...</Sidebar>}\n    header={<Header>...</Header>}\n  >\n    {/* Page content — breadcrumb + filters + body */}\n    <div className=\"sticky top-0 z-40 bg-canvas-wash\">\n      <BreadcrumbHeader>...</BreadcrumbHeader>\n      <FilterStrip ... />\n    </div>\n    <div className=\"p-8\">...</div>\n  </Layout>\n</SidebarProvider>\n```\n\n### Key rules\n\n- **`SidebarProvider` at app root** — wraps `Layout`, not inside the sidebar slot.\n- **Breadcrumb and FilterStrip in `children`** — each page composes its own; the layout does not accept breadcrumb/filter props.\n- **Subpath imports** — `impact-nova/layout`, `impact-nova/sidebar`, `impact-nova/header`, `impact-nova/breadcrumb`, `impact-nova/filter-strip`.\n- **With React Router** — put `<Outlet />` inside `Layout` children; route pages render breadcrumb + body.\n- **With Command Palette** — `CommandPaletteProvider` at root; `<CommandPalette />` as sibling inside `SidebarProvider`. See `impact-nova://command-palette`.\n";
+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\n**Default for production apps:** use subpath imports. Production apps (e.g. mtp-mfe-itemsmart-v3) migrated to 100% subpath imports — zero barrel `from 'impact-nova'` in feature code. Barrel is OK for i18n bootstrapping only.\n\n| Use case | Import |\n|----------|--------|\n| Layout (app shell) | `import { Layout } from 'impact-nova/layout';` |\n| Sidebar | `import { Sidebar, SidebarProvider, SidebarContent } from 'impact-nova/sidebar';` |\n| Header | `import { Header, HeaderLeft, HeaderRight, HeaderTitle } from 'impact-nova/header';` |\n| Breadcrumb | `import { Breadcrumb, BreadcrumbList, BreadcrumbHeader } from 'impact-nova/breadcrumb';` |\n| Button only | `import { Button } from 'impact-nova/button';` |\n| Combobox | `import { Combobox } from 'impact-nova/combobox';` |\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| Data table | `import { DataTable, DataTableContent, DataTableToolbar, useDataTable } from 'impact-nova/data-table';` |\n| Progress bar | `import { ProgressBar } from 'impact-nova/progress-bar';` |\n| Virtualized list | `import { useVirtualizedList, useDebouncedValue } from 'impact-nova/virtualized';` |\n| Row selection type | `import type { RowSelectionState } from 'impact-nova/virtualized';` |\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 } from 'impact-nova-icons';` + `createIconResolver` for dynamic lookup |\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/data-table`.\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- **Lazy illustrations:** When no custom `children` are passed to `EmptyContainerImage`, one random illustration loads via dynamic `import()` — only ~1 webp chunk per empty state, not all 6 upfront. Pass custom children to skip illustration loading entirely.\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/chart` 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. Exclude `impact-nova-icons` from `optimizeDeps` to prevent SVG asset warnings in dev:\n\n```js\noptimizeDeps: {\n  exclude: ['impact-nova-icons'],\n},\nresolve: {\n  dedupe: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react'],\n},\n```\n\n---\n\n## 5. Known workarounds\n\n- **HorizontalScroller**: If the package entry is empty in your build, add a Vite alias to `.../horizontal-scroller/horizontal-scroller.js` and a small `declare module 'impact-nova/horizontal-scroller'` for TypeScript.\n- **Chart**: Prefer `import { Chart } from 'impact-nova/chart'`. Pre-bundle Highcharts UMD modules in Vite `optimizeDeps.include` if you see interop errors in dev.\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\n---\n\n## 8. Wizard (multi-step flow)\n\nUse **Wizard** for any multi-step creation or onboarding flow. Radix-style controlled state (`value` / `onValueChange`), optional split-panel layout, and `useWizard()` for flexible footers.\n\n### Import\n\n```ts\nimport {\n  WizardRoot,\n  WizardLayout,\n  WizardSidebar,\n  WizardTitle,\n  WizardDescription,\n  WizardMedia,\n  WizardBody,\n  WizardProgress,\n  WizardHeader,\n  WizardContent,\n  WizardStep,\n  WizardFooter,\n  useWizard,\n} from 'impact-nova/wizard';\n```\n\n### Minimal multi-step example\n\n```tsx\nimport { useState } from 'react';\nimport {\n  WizardRoot, WizardLayout,\n  WizardSidebar, WizardTitle, WizardDescription, WizardMedia,\n  WizardBody, WizardProgress,\n  WizardContent, WizardStep, WizardHeader,\n  WizardFooter,\n} from 'impact-nova/wizard';\nimport { Button } from 'impact-nova/button';\n\nexport function CreateAlertFlow() {\n  const [step, setStep] = useState(1);\n\n  return (\n    <WizardRoot value={step} totalSteps={3} onValueChange={setStep}>\n      <WizardLayout>\n        <WizardSidebar>\n          <WizardTitle>Create Alert</WizardTitle>\n          <WizardDescription>Configure your alert step by step.</WizardDescription>\n          <WizardMedia />\n        </WizardSidebar>\n\n        <WizardBody>\n          <WizardProgress />\n          <WizardContent>\n            <WizardStep value={1}>\n              <WizardHeader>Alert Details</WizardHeader>\n            </WizardStep>\n            <WizardStep value={2}>\n              <WizardHeader>Configuration</WizardHeader>\n            </WizardStep>\n            <WizardStep value={3}>\n              <WizardHeader>Review</WizardHeader>\n            </WizardStep>\n          </WizardContent>\n          <WizardFooter>\n            <Button variant=\"secondary\">Cancel</Button>\n            <Button variant=\"default\">Submit</Button>\n          </WizardFooter>\n        </WizardBody>\n      </WizardLayout>\n    </WizardRoot>\n  );\n}\n```\n\n### Key rules\n\n- **WizardRoot** is the context provider — every other sub-component must be a descendant.\n- Use **useWizard()** for `goNext`, `goBack`, `isFirstStep`, `isLastStep` without prop drilling.\n- **WizardStep** renders nothing when `value` doesn't match the current step — use one per step.\n- **WizardMedia** renders a default SVG when neither `src` nor `children` are provided.\n- The sidebar is hidden below the `lg` breakpoint.\n- All sub-components except **WizardRoot** are optional — compose only what you need.\n---\n\n## 9. App layout (app shell)\n\n**Use `Layout`** for the app chrome — not `DynamicLayout` (that is a grid/flex/stack utility only).\n\nFull beginner scaffold: resource **`impact-nova://layout`**.\n\n### Structure\n\n```tsx\nimport { Layout } from 'impact-nova/layout';\nimport { Sidebar, SidebarProvider } from 'impact-nova/sidebar';\nimport { Header, HeaderLeft, HeaderTitle } from 'impact-nova/header';\nimport { BreadcrumbHeader, Breadcrumb, BreadcrumbList } from 'impact-nova/breadcrumb';\nimport { FilterStrip } from 'impact-nova/filter-strip';\n\n<SidebarProvider defaultOpen={false} id=\"app-sidebar\" className=\"flex h-svh min-h-0 w-full min-w-0 overflow-hidden\">\n  <Layout\n    sidebar={<Sidebar collapsible=\"offcanvas\">...</Sidebar>}\n    header={<Header>...</Header>}\n  >\n    {/* Page content — Item Smart parity */}\n    <PageShell>\n      <PageStickyHeader pageTitle=\"...\" filterStrip={filtersApplied ? <FilterStrip ... /> : undefined} />\n      {filtersApplied ? <WorkspaceBody /> : <EmptyStateView title=\"...\" primaryActionLabel=\"Select filter\" />}\n    </PageShell>\n  </Layout>\n</SidebarProvider>\n```\n\n### Key rules\n\n- **`SidebarProvider` at app root** — wraps `Layout`, not inside the sidebar slot.\n- **Page background** — `PageShell` → `bg-brand-subtle` (not `bg-canvas-wash` on module pages)\n- **Filter strip** — white sticky bar via `PageStickyHeader` `filterStrip` slot (`page-filter-strip` class)\n- **Tables** — `module-table-container mx-6 flex min-h-[480px] flex-1` → white `DataTable` card with shadow\n- **Subpath imports** — `impact-nova/layout`, `impact-nova/sidebar`, `impact-nova/header`, `impact-nova/breadcrumb`, `impact-nova/filter-strip`.\n- **With React Router** — put `<Outlet />` inside `Layout` children; route pages render breadcrumb + body.\n- **With Command Palette** — `CommandPaletteProvider` at root; `<CommandPalette />` as sibling inside `SidebarProvider`. See `impact-nova://command-palette`.\n\n### Premium primitives (shipped in create-impact-nova template)\n\n| Component | Role |\n|-----------|------|\n| `PageShell` | `bg-brand-subtle` + flex fill chain |\n| `PageStickyHeader` | Breadcrumb `z-30` + white filter strip slot |\n| `EmptyStateView` | Illustration + primary/secondary CTAs |\n| `SummaryMetricCard` | Dashboard KPI tiles (`border-[#C3C8D4]`, hover shadow) |\n| `module-table-container` | Table card shadow + `min-h-[480px] flex-1` fill |\n";

package/dist/llms/rules/requirements.js

@@ -1 +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\": \"^2.0.5\",\n    \"description\": \"Design system package — ESM with 90+ subpath exports\"\n  },\n  \"localDevelopment\": {\n    \"defaultScaffoldDependency\": \"file:<relative-path-to-impact-nova-repo-root>\",\n    \"description\": \"Until packages are on npm, create-impact-nova scaffolds with file: link to the monorepo. Rebuild impact-nova (npm run build) after DS changes.\",\n    \"cliFlagForNpm\": \"--from-npm\",\n    \"mcpScaffoldFlag\": \"usePublishedPackages: true\"\n  },\n  \"mandatoryRules\": {\n    \"componentsOnly\": \"Use Impact Nova components only — never create new custom UI components\",\n    \"tables\": \"Any table/grid/spreadsheet → DataTable from impact-nova/data-table (not HTML table, not raw ag-grid-react)\",\n    \"validateBeforeDone\": \"Call validate_usage on generated UI code\",\n    \"resource\": \"impact-nova://design-system-mandate\"\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      \"package\": \"impact-nova-icons\",\n      \"recommendedVersion\": \"^0.1.1\",\n      \"description\": \"Icons peer — not bundled in impact-nova\"\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      \"package\": \"@tanstack/react-table\",\n      \"recommendedVersion\": \"^8.20.0\",\n      \"description\": \"Optional table utilities\"\n    }\n  ]\n}\n```\n";
+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\": \"^2.0.5\",\n    \"description\": \"Design system package — ESM with 90+ subpath exports\"\n  },\n  \"createImpactNova\": {\n    \"package\": \"create-impact-nova\",\n    \"recommendedVersion\": \"^1.0.0\",\n    \"description\": \"Vite + React scaffold with recipe-based modules\"\n  },\n  \"localDevelopment\": {\n    \"defaultScaffoldDependency\": \"auto\",\n    \"description\": \"create-impact-nova auto-detects: file: link when run inside the impact-nova monorepo; npm (^2.0.5) otherwise. CLI: --from-npm or --link-monorepo to override. Rebuild impact-nova (npm run build) after DS changes when using file: link.\",\n    \"cliFlagForNpm\": \"--from-npm\",\n    \"cliFlagForMonorepo\": \"--link-monorepo\",\n    \"mcpScaffoldFlag\": \"usePublishedPackages: true | false (omit for auto-detect)\"\n  },\n  \"mandatoryRules\": {\n    \"componentsOnly\": \"Use Impact Nova components only — never create new custom UI components\",\n    \"tables\": \"Any table/grid/spreadsheet → DataTable from impact-nova/data-table (not HTML table, not raw ag-grid-react)\",\n    \"validateBeforeDone\": \"Call validate_usage on generated UI code\",\n    \"resource\": \"impact-nova://design-system-mandate\"\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      \"package\": \"impact-nova-icons\",\n      \"recommendedVersion\": \"^0.1.1\",\n      \"description\": \"Icons peer — not bundled in impact-nova\"\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      \"package\": \"@tanstack/react-table\",\n      \"recommendedVersion\": \"^8.20.0\",\n      \"description\": \"Optional table utilities\"\n    }\n  ]\n}\n```\n";

package/dist/llms/rules/troubleshooting.js

@@ -1 +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- Use the public subpath: `import { Chart } from 'impact-nova/chart';`\n- Ensure Highcharts is installed: `npm install highcharts@^12 highcharts-react-official@^3`\n- In Vite, pre-bundle Highcharts modules in `optimizeDeps.include` if you see UMD interop errors in dev.\n\n---\n\n## 5. impact-nova-icons SVG warnings in Vite dev\n\n**Symptom:** Hundreds of \"Failed to resolve import\" warnings for `.svg` files from `impact-nova-icons` on dev startup.\n\n**Fix:** Exclude icons from dependency pre-bundling:\n\n```js\noptimizeDeps: {\n  exclude: ['impact-nova-icons'],\n},\n```\n\nIf using Module Federation, add an asset URL rewrite plugin for `impact-nova-icons/dist/assets/*2.svg.js` shims.\n\n---\n\n## 6. React 19 — \"Cannot access refs during render\"\n\n**Symptom:** React 19 error about updating or reading refs during render.\n\n**Fix:** Never assign to `ref.current` during render. Use refs only in event handlers, effects, or callbacks. Prefer deriving values during render instead of mirroring props into refs.\n\n---\n\n## 7. 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## 8. 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## 9. 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## 10. 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## 11. 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";
+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, Chart doesn't render, or dev throws:\n\n`The requested module '.../highcharts-react-official/dist/highcharts-react.min.js' does not provide an export named 'default'`\n\n**Fix:**\n\n- Use the public subpath: `import { Chart } from 'impact-nova/chart';`\n- Ensure Highcharts is installed: `npm install highcharts@^12 highcharts-react-official@^3`\n- In Vite, add `highcharts-react-official` to `optimizeDeps.include` (the `create-impact-nova` template includes it in `HIGHCHARTS_OPTIMIZE_DEPENDENCIES`). Clear `.vite` cache and restart dev after changing config.\n\n---\n\n## 5. impact-nova-icons SVG warnings in Vite dev\n\n**Symptom:** Hundreds of \"Failed to resolve import\" warnings for `.svg` files from `impact-nova-icons` on dev startup.\n\n**Fix:** Exclude icons from dependency pre-bundling:\n\n```js\noptimizeDeps: {\n  exclude: ['impact-nova-icons'],\n},\n```\n\nIf using Module Federation, add an asset URL rewrite plugin for `impact-nova-icons/dist/assets/*2.svg.js` shims.\n\n---\n\n## 6. React 19 — \"Cannot access refs during render\"\n\n**Symptom:** React 19 error about updating or reading refs during render.\n\n**Fix:** Never assign to `ref.current` during render. Use refs only in event handlers, effects, or callbacks. Prefer deriving values during render instead of mirroring props into refs.\n\n---\n\n## 7. 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## 8. 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## 9. 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## 10. 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## 11. 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": "2.0.5",
+  "version": "2.0.7",
   "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",