impact-nova 2.5.11 → 2.5.13

package/dist/lib/hash/fnv1a128.d.ts

@@ -0,0 +1,16 @@
+/**
+ * FNV-1a 128-bit hash implemented as two independent 64-bit halves.
+ * Produces a 32-char hex string deterministically from a stream of string tokens.
+ *
+ * Used for column-tree fingerprints where O(N) CPU is acceptable but multi-MB
+ * string allocations are not. The 128-bit width makes collision probability
+ * negligible (~1 in 2^128) while keeping output fixed at 32 bytes.
+ */
+export declare class Fnv1a128Hasher {
+    private high;
+    private low;
+    update(input: string): this;
+    digest(): string;
+    reset(): this;
+}
+export declare function fnv1a128(input: string): string;

package/dist/lib/hash/fnv1a128.js

@@ -0,0 +1,21 @@
+const s = BigInt("0x6c62272e07bb0142"), n = BigInt("0x62b821756295c58d"), o = BigInt("0x0000000001000000"), r = BigInt("0x000000000000013b"), f = BigInt("0xffffffffffffffff");
+class g {
+  high = s;
+  low = n;
+  update(h) {
+    for (let t = 0; t < h.length; t++) {
+      const i = BigInt(h.charCodeAt(t) & 255);
+      this.high = (this.high ^ i) * o & f, this.low = (this.low ^ i) * r & f;
+    }
+    return this;
+  }
+  digest() {
+    return this.high.toString(16).padStart(16, "0") + this.low.toString(16).padStart(16, "0");
+  }
+  reset() {
+    return this.high = s, this.low = n, this;
+  }
+}
+export {
+  g as Fnv1a128Hasher
+};

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

@@ -1 +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** use **Impact Nova DataTable** from `impact-nova/data-table`. **Do not build a raw AG Grid or HTML table.**\n\n```tsx\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  useDataTable,\n} from 'impact-nova/data-table';\n```\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\n## 6. Column autosize on container resize\n\n**AgGridWrapper** (from `impact-nova/ag-grid-react`) automatically re-runs `autoSizeStrategy` when the grid container width changes (accordion expand, viewport resize, responsive layout).\n\n- Pass `autoSizeStrategy` to DataTable/AgGridWrapper props (e.g. `{ type: 'fitCellContents', scaleUpToFitGridWidth: true }`).\n- **Do not** add app-level ResizeObserver hacks or deferred grid mount delays — the framework handles this.\n- When applying saved column views, wait for `firstDataRendered` or `newColumnsLoaded` grid events before applying column state — not `setTimeout(0)`.\n- Strip `width`/`flex` from saved column state when applying structural views so autosize can recalculate correctly.\n\n---\n\n## 6b. Truncated text in custom cell renderers\n\n**Do not** use `OverflowTooltip` inside AG Grid cells. Use the grid-native tooltip API via **`useAgGridTruncationTooltip`** from `impact-nova/ag-grid-react`:\n\n```tsx\nimport { useAgGridTruncationTooltip } from 'impact-nova/ag-grid-react';\n\nconst MyCellRenderer = (params: ICellRendererParams) => {\n  const textRef = useRef<HTMLSpanElement>(null);\n  const displayValue = String(params.value ?? '');\n\n  useAgGridTruncationTooltip(\n    params.setTooltip,\n    displayValue,\n    textRef,\n    'ellipsis',\n    'cell',\n  );\n\n  return (\n    <span ref={textRef} className=\"truncate\">\n      {displayValue}\n    </span>\n  );\n};\n```\n\n- Pass AG Grid's `setTooltip` callback (from `ICellRendererParams` / header APIs).\n- Apply `truncate` (or `line-clamp`) on the measured element.\n- `location` is `'cell' | 'leaf' | 'group'` — affects tooltip show mode wiring.\n- For general (non-grid) truncated labels, use `OverflowTooltip` from `impact-nova/tooltip` instead.\n\n---\n\n## 7. AG Grid v36 version pin (mandatory)\n\nImpact Nova **2.2.0+** targets **AG Grid v36**. Consumer apps must install all three packages at the **exact same version**:\n\n```bash\nnpm install ag-grid-community@36.0.1 ag-grid-react@36.0.1 ag-grid-enterprise@36.0.1\n```\n\n**Rules:**\n\n- Pin `36.0.1` in `package.json` — do not float `^36` across community/react/enterprise.\n- Vite/webpack: `resolve.dedupe: ['ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react']` (see `create-impact-nova` template).\n- **Do not** import legacy AG Grid CSS theme files (`ag-grid.css`, `ag-theme-*`). Impact Nova `AgGridWrapper` applies the v36 Quartz theme (`themeQuartz.withPart(iconSetMaterial)`) via the `theme` prop.\n- Column settings (`DataTableColumnList`) sync pin/sort/filter from the live `GridApi` — do not mirror column state in app-level React state.\n\n**Column settings sheet pattern (scroll-safe — use compound layout components):**\n\n```tsx\n<DataTableSheet open={sheetOpen} onOpenChange={setSheetOpen}>\n  <DataTableSheetContent>\n    <DataTableSheetHeader title=\"Table Settings\" />\n    <DataTableSheetBody>\n      <DataTableSheetSection>{savedViews}</DataTableSheetSection>\n      <DataTableSheetTabs value={tab} onValueChange={setTab} variant=\"line\" className=\"px-4\">\n        <DataTableSheetTabsList>\n          <TabsTrigger value=\"columns\">Columns</TabsTrigger>\n          <TabsTrigger value=\"format\">Format</TabsTrigger>\n        </DataTableSheetTabsList>\n        <DataTableSheetTabPanel layout=\"list\" value=\"columns\" className=\"p-0 pt-2\">\n          <DataTableColumnList />\n        </DataTableSheetTabPanel>\n        <DataTableSheetTabPanel layout=\"scroll\" value=\"format\" className=\"p-4 pt-1\">\n          <DataTableFormatOptions />\n        </DataTableSheetTabPanel>\n      </DataTableSheetTabs>\n    </DataTableSheetBody>\n  </DataTableSheetContent>\n</DataTableSheet>\n```\n\nDo **not** use raw `Tabs` + manual `overflow-y-auto` in sheet bodies — see `impact-nova://data-table-sheet-layout`.\n\nStorybook reference: `Data Display/DataTable/Sheet layout` (`CanonicalComposition`) and `Column settings scenarios` (`PinSortSearchAndReset`).\n\n---\n";
+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** use **Impact Nova DataTable** from `impact-nova/data-table`. **Do not build a raw AG Grid or HTML table.**\n\n```tsx\nimport {\n  DataTable,\n  DataTableContent,\n  DataTableToolbar,\n  useDataTable,\n} from 'impact-nova/data-table';\n```\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\n## 6. Column autosize on container resize\n\n**AgGridWrapper** (from `impact-nova/ag-grid-react`) automatically re-runs `autoSizeStrategy` when the grid container width changes (accordion expand, viewport resize, responsive layout).\n\n- Pass `autoSizeStrategy` to DataTable/AgGridWrapper props (e.g. `{ type: 'fitCellContents', scaleUpToFitGridWidth: true }`).\n- **Do not** add app-level ResizeObserver hacks or deferred grid mount delays — the framework handles this.\n- When applying saved column views, wait for `firstDataRendered` or `newColumnsLoaded` grid events before applying column state — not `setTimeout(0)`.\n- Strip `width`/`flex` from saved column state when applying structural views so autosize can recalculate correctly.\n\n---\n\n## 6b. Truncated text in custom cell renderers\n\n**Do not** use `OverflowTooltip` inside AG Grid cells. Use the grid-native tooltip API via **`useAgGridTruncationTooltip`** from `impact-nova/ag-grid-react`:\n\n```tsx\nimport { useAgGridTruncationTooltip } from 'impact-nova/ag-grid-react';\n\nconst MyCellRenderer = (params: ICellRendererParams) => {\n  const textRef = useRef<HTMLSpanElement>(null);\n  const displayValue = String(params.value ?? '');\n\n  useAgGridTruncationTooltip(\n    params.setTooltip,\n    displayValue,\n    textRef,\n    'ellipsis',\n    'cell',\n  );\n\n  return (\n    <span ref={textRef} className=\"truncate\">\n      {displayValue}\n    </span>\n  );\n};\n```\n\n- Pass AG Grid's `setTooltip` callback (from `ICellRendererParams` / header APIs).\n- Apply `truncate` (or `line-clamp`) on the measured element.\n- `location` is `'cell' | 'leaf' | 'group'` — affects tooltip show mode wiring.\n- For general (non-grid) truncated labels, use `OverflowTooltip` from `impact-nova/tooltip` instead.\n\n---\n\n## 7. AG Grid v36 version pin (mandatory)\n\nImpact Nova **2.2.0+** targets **AG Grid v36**. Consumer apps must install all three packages at the **exact same version**:\n\n```bash\nnpm install ag-grid-community@36.0.1 ag-grid-react@36.0.1 ag-grid-enterprise@36.0.1\n```\n\n**Rules:**\n\n- Pin `36.0.1` in `package.json` — do not float `^36` across community/react/enterprise.\n- Vite/webpack: `resolve.dedupe: ['ag-grid-community', 'ag-grid-enterprise', 'ag-grid-react']` (see `create-impact-nova` template).\n- **Do not** import legacy AG Grid CSS theme files (`ag-grid.css`, `ag-theme-*`). Impact Nova `AgGridWrapper` applies the v36 Quartz theme (`themeQuartz.withPart(iconSetMaterial)`) via the `theme` prop.\n- Column settings (`DataTableColumnList`) sync pin/sort/filter from the live `GridApi` — do not mirror column state in app-level React state.\n\n**Column settings sheet pattern (scroll-safe — use compound layout components):**\n\n```tsx\n<DataTableSheet open={sheetOpen} onOpenChange={setSheetOpen}>\n  <DataTableSheetContent>\n    <DataTableSheetHeader title=\"Table Settings\" />\n    <DataTableSheetBody>\n      <DataTableSheetSection>{savedViews}</DataTableSheetSection>\n      <DataTableSheetTabs value={tab} onValueChange={setTab} variant=\"line\" className=\"px-4\">\n        <DataTableSheetTabsList>\n          <TabsTrigger value=\"columns\">Columns</TabsTrigger>\n          <TabsTrigger value=\"format\">Format</TabsTrigger>\n        </DataTableSheetTabsList>\n        <DataTableSheetTabPanel layout=\"list\" value=\"columns\" className=\"p-0 pt-2\">\n          <DataTableColumnList />\n        </DataTableSheetTabPanel>\n        <DataTableSheetTabPanel layout=\"scroll\" value=\"format\" className=\"p-4 pt-1\">\n          <DataTableFormatOptions />\n        </DataTableSheetTabPanel>\n      </DataTableSheetTabs>\n    </DataTableSheetBody>\n  </DataTableSheetContent>\n</DataTableSheet>\n```\n\nDo **not** use raw `Tabs` + manual `overflow-y-auto` in sheet bodies — see `impact-nova://data-table-sheet-layout`.\n\nStorybook reference: `Data Display/DataTable/Sheet layout` (`CanonicalComposition`) and `Column settings scenarios` (`PinSortSearchAndReset`).\n\n---\n\n## 8. 50k+ Column Consumer Settings\n\nWhen building grids with **10,000+ columns** (planning grids, large attribute tables), apply these settings:\n\n### Required grid props\n\n```tsx\n<DataTableContent\n  ensureDomOrder={false}         // Skip DOM reordering for screen readers — critical at 10k+\n  maintainColumnOrder={true}     // Preserve column ordering after runtime column defs changes\n  suppressColumnVirtualisation={false} // Ensure column virtualization is ON (default)\n/>\n```\n\n### Column picker (DataTableColumnList)\n\n- At 80+ visible items, `DataTableColumnList` automatically switches to **virtual-index drag mode** (pointer-based reorder with TanStack Virtual) instead of dnd-kit sortable (50k useSortable hooks + DOM nodes).\n- No consumer configuration needed — the switch is automatic.\n- Drag-and-drop, search, select-all, pin switches, apply/discard all remain functional.\n\n### Saved views and state management\n\n- **Use `applyColumnState({ state, applyOrder: true })` for restoring saved column views** — this is the AG Grid recommended pattern for partial column state application.\n- **Evaluate `gridApi.getState()` / `gridApi.setState()` for full grid snapshots** (includes sort, filter, column state, grouping) when persisting complex view configurations.\n- Keep `mergePartialOrderedColumnState` for picker-initiated partial edits (picker only modifies a subset of columns).\n- **Do not** manually diff columnDefs for saved views — AG Grid's state APIs handle runtime-calculated columns.\n\n### Column runtime state guard\n\n- After `newColumnsLoaded` events, Impact Nova's `columnRuntimeStateGuard` automatically restores hide/pin/order from the cached tree to prevent column-def refreshes from resetting user layout.\n- **Use `deferColumnRuntimeStateGuard(gridApi)`** when your app applies external state (e.g., from a backend save) — this skips the guard for that cycle and rebuilds the cache from your new live state.\n\n### Performance budget (CI ratchet)\n\n| Operation | Target at 50k |\n|-----------|---------------|\n| Hash fingerprint (3x) | < 200ms |\n| Tree build from grid | < 2s |\n| Cache resolve skip path | < 300ms |\n| Indicator patch (sort/filter badges) | < 500ms |\n| Authority build + fingerprint | < 500ms |\n| Authority reorder (splice) | < 50ms |\n| Column sheet open (collapsed groups) | < 500ms |\n| Drag frame time (virtual-index) | < 16ms |\n\n---\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "2.5.11",
+  "version": "2.5.13",
   "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",
   "workspaces": [

package/dist/components/data-display/calendar/calendar-available-view.d.ts

@@ -1,27 +0,0 @@
-export type AvailableViewPickerType = "date" | "week" | "month" | "quarter" | "year";
-export declare const DEFAULT_YEAR_PAGE_SIZE = 12;
-export interface ResolveAvailableViewMonthOptions {
-    seed: Date;
-    pickerType: AvailableViewPickerType;
-    minDate?: Date;
-    maxDate?: Date;
-    numberOfMonths?: number;
-    hasSelection?: boolean;
-    autoNavigateToAvailable?: boolean;
-    yearPageSize?: number;
-}
-export declare function startOfDayDate(date: Date): Date;
-export declare function startOfMonthDate(date: Date): Date;
-export declare function isSameCalendarMonth(left: Date, right: Date): boolean;
-export declare function boundsFromDisabled(disabled?: unknown): {
-    minDate?: Date;
-    maxDate?: Date;
-};
-export declare function hasCalendarValue(value: unknown): boolean;
-/** Clamp `from` into `[minDate, maxDate]`. O(1). */
-export declare function firstAvailableDate(minDate?: Date, maxDate?: Date, from?: Date): Date;
-/**
- * When auto-navigate is on and there is no selection, land the visible pane on the
- * first enabled period. Does not write a selected value.
- */
-export declare function resolveAvailableViewMonth(options: ResolveAvailableViewMonthOptions): Date;

package/dist/components/data-display/calendar/calendar-available-view.js

@@ -1,85 +0,0 @@
-const F = 12;
-function u(t) {
-  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
-}
-function f(t) {
-  return new Date(t.getFullYear(), t.getMonth(), 1);
-}
-function h(t, e) {
-  return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth();
-}
-function A(t) {
-  if (!t || typeof t != "object" || Array.isArray(t))
-    return {};
-  const e = t;
-  return {
-    ...e.before instanceof Date ? { minDate: e.before } : {},
-    ...e.after instanceof Date ? { maxDate: e.after } : {}
-  };
-}
-function Y(t) {
-  if (t == null) return !1;
-  if (Array.isArray(t)) return t.length > 0;
-  if (t instanceof Date) return !0;
-  if (typeof t == "object") {
-    if ("from" in t || "to" in t) {
-      const e = t;
-      return e.from != null || e.to != null;
-    }
-    return !0;
-  }
-  return !1;
-}
-function g(t, e, n = /* @__PURE__ */ new Date()) {
-  const r = u(n);
-  if (t) {
-    const a = u(t);
-    if (r < a) return a;
-  }
-  if (e) {
-    const a = u(e);
-    if (r > a) return a;
-  }
-  return r;
-}
-function D(t, e, n) {
-  const r = f(t), a = new Date(
-    t.getFullYear(),
-    t.getMonth() + e,
-    0,
-    23,
-    59,
-    59,
-    999
-  ), i = u(n).getTime();
-  return i >= r.getTime() && i <= a.getTime();
-}
-function m(t, e, n) {
-  const r = Math.floor(t / n) * n;
-  return e >= r && e <= r + n - 1;
-}
-function w(t) {
-  const {
-    seed: e,
-    pickerType: n,
-    minDate: r,
-    maxDate: a,
-    numberOfMonths: i = 1,
-    hasSelection: l = !1,
-    autoNavigateToAvailable: c = !1,
-    yearPageSize: s = 12
-  } = t;
-  if (!c || l) return e;
-  const o = g(r, a, e);
-  return n === "date" || n === "week" ? D(e, i, o) ? e : f(o) : n === "month" || n === "quarter" ? e.getFullYear() === o.getFullYear() ? e : new Date(o.getFullYear(), 0, 1) : m(e.getFullYear(), o.getFullYear(), s) ? e : new Date(o.getFullYear(), 0, 1);
-}
-export {
-  F as DEFAULT_YEAR_PAGE_SIZE,
-  A as boundsFromDisabled,
-  g as firstAvailableDate,
-  Y as hasCalendarValue,
-  h as isSameCalendarMonth,
-  w as resolveAvailableViewMonth,
-  u as startOfDayDate,
-  f as startOfMonthDate
-};