impact-nova 2.0.9 → 2.1.0-alpha.10

package/dist/lib/virtualized/useVirtualizedList.js

@@ -1,155 +1,161 @@
-import { useRef as c, useCallback as d, useEffect as ne } from "react";
-import { useDataSource as se } from "./useDataSource.js";
-import { useRowState as ae } from "./useRowState.js";
-import { useVirtualizedRows as ie } from "./useVirtualizedRows.js";
-function fe(M) {
+import { useRef as g, useEffect as _, useCallback as d } from "react";
+import { useDataSource as ie } from "./useDataSource.js";
+import { useRowState as ce } from "./useRowState.js";
+import { useVirtualizedRows as le } from "./useVirtualizedRows.js";
+function pe($) {
   const {
     rowCount: u,
-    getRowData: T,
-    isRowLoaded: _,
-    prefetchRange: $,
-    getRowError: D,
-    selectionMode: A,
-    selectedIds: H,
-    onSelectedIdsChange: L,
-    defaultSelectedIds: B,
-    selectAll: K,
-    toggledIds: P,
-    onSelectionStateChange: X,
-    defaultSelectAll: Y,
-    defaultToggledIds: j,
-    expandedIds: q,
-    onExpandedIdsChange: F,
-    defaultExpandedIds: G,
-    scrollElementRef: J,
-    getRowId: R,
-    estimateSize: N,
-    overscan: Q,
-    getItemKey: U,
-    endReachedThreshold: m = 3,
-    onEndReached: w,
-    hasMore: S = !0,
-    onChange: x,
-    ...W
-  } = M, r = se({
+    getRowData: D,
+    isRowLoaded: A,
+    prefetchRange: H,
+    getRowError: L,
+    selectionMode: B,
+    selectedIds: K,
+    onSelectedIdsChange: P,
+    defaultSelectedIds: X,
+    selectAll: Y,
+    toggledIds: j,
+    onSelectionStateChange: q,
+    defaultSelectAll: F,
+    defaultToggledIds: G,
+    expandedIds: J,
+    onExpandedIdsChange: N,
+    defaultExpandedIds: Q,
+    scrollElementRef: U,
+    getRowId: x,
+    estimateSize: c,
+    overscan: W,
+    getItemKey: Z,
+    endReachedThreshold: f = 3,
+    onEndReached: h,
+    hasMore: p = !0,
+    onChange: z,
+    ...O
+  } = $, n = ie({
     rowCount: u,
-    getRowData: T,
-    isRowLoaded: _,
-    prefetchRange: $,
-    getRowError: D
-  }), E = ae({
-    selectionMode: A,
-    selectedIds: H,
-    onSelectedIdsChange: L,
-    defaultSelectedIds: B,
-    selectAll: K,
-    toggledIds: P,
-    onSelectionStateChange: X,
-    defaultSelectAll: Y,
-    defaultToggledIds: j,
-    expandedIds: q,
-    onExpandedIdsChange: F,
-    defaultExpandedIds: G
-  }), z = c(u), C = c(S), b = c(m), g = c(w);
-  z.current = u, C.current = S, b.current = m, g.current = w;
-  const Z = d(
+    getRowData: D,
+    isRowLoaded: A,
+    prefetchRange: H,
+    getRowError: L
+  }), E = ce({
+    selectionMode: B,
+    selectedIds: K,
+    onSelectedIdsChange: P,
+    defaultSelectedIds: X,
+    selectAll: Y,
+    toggledIds: j,
+    onSelectionStateChange: q,
+    defaultSelectAll: F,
+    defaultToggledIds: G,
+    expandedIds: J,
+    onExpandedIdsChange: N,
+    defaultExpandedIds: Q
+  }), C = g(u), b = g(p), y = g(f), R = g(h);
+  _(() => {
+    C.current = u, b.current = p, y.current = f, R.current = h;
+  }, [u, p, f, h]);
+  const ee = d(
     (e, o) => {
-      if (x?.(e, o), !g.current || !C.current) return;
-      const t = e.getVirtualItems(), n = t[t.length - 1];
-      n && n.index >= z.current - b.current - 1 && g.current();
+      if (z?.(e, o), !R.current || !b.current) return;
+      const t = e.getVirtualItems(), r = t[t.length - 1];
+      r && r.index >= C.current - y.current - 1 && R.current();
     },
-    [x]
-  ), { virtualizer: i, virtualItems: s, totalSize: y, measureElement: f } = ie({
-    scrollElementRef: J,
-    rowCount: r.rowCount,
-    estimateSize: N,
-    overscan: Q,
-    getItemKey: U,
-    onChange: Z,
-    ...W
-  }), h = s[0]?.index, p = s[s.length - 1]?.index;
-  ne(() => {
-    r.prefetchRange && (h === void 0 || p === void 0 || r.prefetchRange(h, p));
-  }, [r.prefetchRange, h, p]);
-  const { isSelected: I, isExpanded: v, toggleSelect: V, toggleExpand: k } = E, O = d(
+    [z]
+  ), { virtualizer: s, virtualItems: a, totalSize: I, measureElement: m } = le({
+    scrollElementRef: U,
+    rowCount: n.rowCount,
+    estimateSize: c,
+    overscan: W,
+    getItemKey: Z,
+    onChange: ee,
+    ...O
+  }), w = a[0]?.index, S = a[a.length - 1]?.index;
+  _(() => {
+    n.prefetchRange && (w === void 0 || S === void 0 || n.prefetchRange(w, S));
+  }, [n, w, S]);
+  const { isSelected: v, isExpanded: V, toggleSelect: k, toggleExpand: M } = E, te = d(
     (e) => {
-      const o = R(e), t = r.getRowStatus(e), n = r.getRowData(e), l = r.getRowError(e);
+      const o = x(e), t = n.getRowStatus(e), r = n.getRowData(e), l = n.getRowError(e);
       return {
         index: e,
         id: o,
-        data: n,
-        item: n,
+        data: r,
+        item: r,
         status: t,
         error: t === "error" ? l : void 0,
-        isSelected: I(o),
-        isExpanded: v(o),
-        toggleSelect: () => V(o),
-        toggleExpand: () => k(o)
+        isSelected: v(o),
+        isExpanded: V(o),
+        toggleSelect: () => k(o),
+        toggleExpand: () => M(o)
       };
     },
-    [R, r, I, v, V, k]
-  ), ee = d(
+    [x, n, v, V, k, M]
+  ), oe = d(
     (e, o) => {
-      const t = typeof e == "number" ? s.find((a) => a.index === e) : e, n = !!i.options.horizontal, l = o?.measure !== !1;
+      const t = typeof e == "number" ? a.find((i) => i.index === e) : e, r = !!s.options.horizontal, l = o?.measure !== !1;
       if (!t) {
-        const a = typeof e == "number" ? e : -1;
+        const i = typeof e == "number" ? e : -1;
         return {
-          key: a >= 0 ? a : "__missing__",
-          role: "row",
-          "data-index": a >= 0 ? a : 0,
+          key: i >= 0 ? i : "__missing__",
+          "data-index": i >= 0 ? i : 0,
           ref: void 0,
           style: {}
         };
       }
-      const oe = {
+      const re = {
         position: "absolute",
         top: 0,
         left: 0,
         width: "100%",
         transform: `translateY(${t.start}px)`
-      }, re = {
+      }, ae = {
         position: "absolute",
         top: 0,
         left: 0,
         height: "100%",
         transform: `translateX(${t.start}px)`
-      };
+      }, T = c(t.index);
       return {
         key: t.key,
-        role: "row",
         "data-index": t.index,
-        ref: l ? f : void 0,
-        style: n ? {
-          ...re,
-          // Fixed span when not measuring; dynamic width uses measureElement.
-          ...l ? {} : { width: `${t.size}px` }
+        ref: l ? m : void 0,
+        style: r ? {
+          ...ae,
+          // Fixed span when not measuring; use estimate — not cached expanded size.
+          ...l ? {} : { width: `${T}px` }
         } : {
-          ...oe,
+          ...re,
           // Do not set fixed height when measuring — expanded rows must grow and
           // ResizeObserver can update layout so following virtual rows move down.
-          ...l ? {} : { height: `${t.size}px` }
+          ...l ? {} : { height: `${T}px` }
         }
       };
     },
-    [s, i.options.horizontal, f]
-  ), te = d(
+    [a, s.options.horizontal, m, c]
+  ), ne = d(
+    (e) => {
+      s.resizeItem(e, c(e));
+    },
+    [s, c]
+  ), se = d(
     (...e) => {
-      i.scrollToIndex(...e);
+      s.scrollToIndex(...e);
     },
-    [i]
+    [s]
   );
   return {
-    virtualItems: s,
-    totalHeight: y,
-    totalSize: y,
-    measureElement: f,
-    virtualizer: i,
-    scrollToIndex: te,
-    getRow: O,
-    getItemProps: ee,
+    virtualItems: a,
+    totalHeight: I,
+    totalSize: I,
+    measureElement: m,
+    virtualizer: s,
+    scrollToIndex: se,
+    getRow: te,
+    getItemProps: oe,
+    resetRowSize: ne,
     rowState: E
   };
 }
 export {
-  fe as useVirtualizedList
+  pe as useVirtualizedList
 };

package/dist/lib/virtualized/useVirtualizedRows.d.ts

@@ -18,5 +18,5 @@ export declare function useVirtualizedRows<TScrollElement extends Element = HTML
     virtualizer: import('@tanstack/virtual-core').Virtualizer<TScrollElement, TItemElement>;
     virtualItems: import('@tanstack/virtual-core').VirtualItem[];
     totalSize: number;
-    measureElement: (node: TItemElement) => void;
+    measureElement: (node: TItemElement | null | undefined) => void;
 };

package/dist/lib/virtualized/virtualized-list-context.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { UseVirtualizedListResult } from './useVirtualizedList';
+import * as React from "react";
+export interface VirtualizedListContextValue<TData = unknown> {
+    list: UseVirtualizedListResult<TData>;
+    scrollRef: RefObject<HTMLDivElement | null>;
+}
+export declare function VirtualizedListProvider<TData>({ value, children, }: {
+    value: VirtualizedListContextValue<TData>;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useVirtualizedListContext<TData = unknown>(): VirtualizedListContextValue<TData>;

package/dist/lib/virtualized/virtualized-list-context.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+const r = i.createContext(null);
+function u({
+  value: t,
+  children: e
+}) {
+  return /* @__PURE__ */ o(r.Provider, { value: t, children: e });
+}
+function s() {
+  const t = i.useContext(r);
+  if (!t)
+    throw new Error(
+      "VirtualizedList compound parts must be used within VirtualizedList or VirtualizedListProvider."
+    );
+  return t;
+}
+export {
+  u as VirtualizedListProvider,
+  s as useVirtualizedListContext
+};

package/dist/lib/virtualized/virtualized-list-parts.d.ts

@@ -0,0 +1,50 @@
+import { VirtualItem, VirtualRowModel } from './types';
+import { VirtualizedListContextValue } from './virtualized-list-context';
+import { UseVirtualizedListOptions, UseVirtualizedListResult } from './useVirtualizedList';
+import * as React from "react";
+export declare const VirtualizedListShell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export type VirtualizedListProps<TData> = {
+    children: React.ReactNode;
+    className?: string;
+} & ({
+    value: VirtualizedListContextValue<TData>;
+} | (Omit<UseVirtualizedListOptions<TData>, "scrollElementRef"> & {
+    value?: undefined;
+}));
+export declare function VirtualizedList<TData>(props: VirtualizedListProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace VirtualizedList {
+    var displayName: string;
+}
+export declare const VirtualizedListHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const VirtualizedListHeaderActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const VirtualizedListFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const VirtualizedListSearch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface VirtualizedListSelectAllProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "onClick"> {
+    children?: React.ReactNode | ((state: {
+        allVisibleSelected: boolean;
+    }) => React.ReactNode);
+    /** Override visible row ids (default: loaded rows in the virtual window). */
+    getVisibleIds?: (list: UseVirtualizedListResult<unknown>) => string[];
+}
+export declare const VirtualizedListSelectAll: React.ForwardRefExoticComponent<VirtualizedListSelectAllProps & React.RefAttributes<HTMLButtonElement>>;
+export type VirtualizedListViewportProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const VirtualizedListViewport: React.ForwardRefExoticComponent<VirtualizedListViewportProps & React.RefAttributes<HTMLDivElement>>;
+export interface VirtualizedListContentProps<TData> {
+    children: (row: VirtualRowModel<TData>, virtualItem: VirtualItem) => React.ReactNode;
+    className?: string;
+    /** When false, row uses fixed `estimateSize` (faster for collapsed expandable rows). Default: true. */
+    getItemMeasure?: (row: VirtualRowModel<TData>) => boolean;
+}
+export declare function VirtualizedListContent<TData>({ children, className, getItemMeasure, }: VirtualizedListContentProps<TData>): import("react/jsx-runtime").JSX.Element;
+export interface VirtualizedListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    virtualItem: VirtualItem;
+    children: React.ReactNode;
+    measure?: boolean;
+    /** Enables collapse height reset for expandable rows. */
+    row?: Pick<VirtualRowModel<unknown>, "isExpanded">;
+}
+export declare const VirtualizedListItem: React.ForwardRefExoticComponent<VirtualizedListItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface VirtualizedListItemSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const VirtualizedListItemSkeleton: React.ForwardRefExoticComponent<VirtualizedListItemSkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/lib/virtualized/virtualized-list-parts.js

@@ -0,0 +1,175 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import { useRef as m, useLayoutEffect as P, useMemo as H } from "react";
+import { useComposedRefs as N } from "../compose-refs.js";
+import { createCompoundPart as c } from "../primitives/create-compound.js";
+import { cn as p } from "../utils.js";
+import { VirtualizedListProvider as R, useVirtualizedListContext as f } from "./virtualized-list-context.js";
+import { getVisibleReadyRowIds as T } from "./virtualized-list-utils.js";
+import { useVirtualizedList as _ } from "./useVirtualizedList.js";
+const y = c("virtualized-list", {
+  part: "root",
+  displayName: "VirtualizedList",
+  className: "mx-auto flex w-full max-w-[420px] flex-col overflow-hidden rounded-xl border border-stroke bg-canvas-elevated shadow-sm"
+});
+function D({
+  className: t,
+  children: a,
+  ...r
+}) {
+  const e = m(null), i = _({
+    ...r,
+    scrollElementRef: e
+  }), s = H(
+    () => ({ list: i, scrollRef: e }),
+    [i, e]
+  );
+  return /* @__PURE__ */ o(R, { value: s, children: /* @__PURE__ */ o(y, { className: t, "data-component": "virtualized", children: a }) });
+}
+function F(t) {
+  if ("value" in t && t.value) {
+    const { value: i, className: s, children: l } = t;
+    return /* @__PURE__ */ o(R, { value: i, children: /* @__PURE__ */ o(y, { className: s, "data-component": "virtualized", children: l }) });
+  }
+  const { className: a, children: r, ...e } = t;
+  return /* @__PURE__ */ o(D, { className: a, ...e, children: r });
+}
+F.displayName = "VirtualizedList";
+const $ = c("virtualized-list", {
+  part: "header",
+  displayName: "VirtualizedListHeader",
+  className: "shrink-0 border-b border-stroke bg-canvas-elevated px-4 pb-3 pt-4"
+}), ee = c("virtualized-list", {
+  part: "header-actions",
+  displayName: "VirtualizedListHeaderActions",
+  className: "mt-3 flex items-center gap-2"
+}), te = c("virtualized-list", {
+  part: "footer",
+  displayName: "VirtualizedListFooter",
+  className: "shrink-0 border-t border-stroke px-4 py-2 text-xs text-content-muted"
+}), ie = c("virtualized-list", {
+  part: "search",
+  displayName: "VirtualizedListSearch",
+  className: "min-w-0 flex-1"
+}), j = d.forwardRef(({ className: t, children: a, getVisibleIds: r, ...e }, i) => {
+  const { list: s } = f(), l = d.useMemo(
+    () => r ? r(s) : T(s),
+    [r, s]
+  ), n = l.length > 0 && s.rowState.isAllSelected(l), u = typeof a == "function" ? a({ allVisibleSelected: n }) : a ?? (n ? "Deselect visible" : "Select all visible");
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      "data-component": "virtualized-list-select-all",
+      className: p(
+        "shrink-0 text-sm font-medium text-brand hover:underline",
+        t
+      ),
+      onClick: () => s.rowState.toggleSelectAll(l),
+      ...e,
+      children: u
+    }
+  );
+});
+j.displayName = "VirtualizedListSelectAll";
+const I = d.forwardRef(({ className: t, children: a, ...r }, e) => {
+  const { scrollRef: i } = f(), s = N(i, e);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: s,
+      "data-component": "virtualized-list-viewport",
+      className: p("shrink-0 overflow-auto", t),
+      ...r,
+      children: a
+    }
+  );
+});
+I.displayName = "VirtualizedListViewport";
+function se({
+  children: t,
+  className: a,
+  getItemMeasure: r
+}) {
+  const { list: e } = f();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-component": "virtualized-list-content",
+      className: p("relative w-full", a),
+      style: { height: e.totalHeight },
+      children: e.virtualItems.map((i) => {
+        const s = e.getRow(i.index), l = r ? r(s) : !0;
+        return /* @__PURE__ */ o(
+          b,
+          {
+            virtualItem: i,
+            row: s,
+            measure: l,
+            children: t(s, i)
+          },
+          String(i.key)
+        );
+      })
+    }
+  );
+}
+const K = 220, b = d.forwardRef(
+  ({ virtualItem: t, children: a, className: r, measure: e, row: i, ...s }, l) => {
+    const { list: n } = f(), u = m(null), x = m(i?.isExpanded), h = m(e), S = n.getItemProps(t, { measure: e }), { key: U, ref: E, style: g, ...k } = S, A = N(E, l, u);
+    return P(() => {
+      const M = x.current, L = i?.isExpanded, C = h.current, z = e !== !1, V = M === !0 && L === !1;
+      (V || C && !z) && n.resetRowSize(t.index);
+      let v;
+      return V && z && (v = window.setTimeout(() => {
+        const w = u.current;
+        w && n.measureElement(w);
+      }, K)), x.current = L, h.current = z, () => {
+        v !== void 0 && window.clearTimeout(v);
+      };
+    }, [i?.isExpanded, e, t.index, n]), /* @__PURE__ */ o(
+      "div",
+      {
+        ref: A,
+        "data-component": "virtualized-list-item",
+        style: g,
+        className: r,
+        ...k,
+        ...s,
+        children: a
+      }
+    );
+  }
+);
+b.displayName = "VirtualizedListItem";
+const O = d.forwardRef(({ className: t, children: a, ...r }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: e,
+    "data-component": "virtualized-list-item-skeleton",
+    className: p("px-3 py-2", t),
+    ...r,
+    children: a ?? /* @__PURE__ */ o(
+      "div",
+      {
+        className: "h-12 w-full animate-pulse rounded-md bg-muted",
+        "aria-hidden": !0
+      }
+    )
+  }
+));
+O.displayName = "VirtualizedListItemSkeleton";
+export {
+  F as VirtualizedList,
+  se as VirtualizedListContent,
+  te as VirtualizedListFooter,
+  $ as VirtualizedListHeader,
+  ee as VirtualizedListHeaderActions,
+  b as VirtualizedListItem,
+  O as VirtualizedListItemSkeleton,
+  ie as VirtualizedListSearch,
+  j as VirtualizedListSelectAll,
+  y as VirtualizedListShell,
+  I as VirtualizedListViewport
+};

package/dist/lib/virtualized/virtualized-list-utils.d.ts

@@ -0,0 +1,5 @@
+import { UseVirtualizedListResult } from './useVirtualizedList';
+/**
+ * Row ids for loaded rows currently in the virtual window (excludes loading / error placeholders).
+ */
+export declare function getVisibleReadyRowIds<TData>(list: Pick<UseVirtualizedListResult<TData>, "virtualItems" | "getRow">): string[];

package/dist/lib/virtualized/virtualized-list-utils.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return t.virtualItems.map((e) => t.getRow(e.index)).filter((e) => e.status === "ready").map((e) => e.id);
+}
+export {
+  a as getVisibleReadyRowIds
+};

package/dist/lib/virtualized/virtualized.types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Public types for `impact-nova/virtualized` (registry co-location SSOT).
+ */
+export type { DataSourceApi, DataSourceConfig, RowSelectionMode, RowSelectionState, SelectionCounts, UseRowStateOptions, UseRowStateResult, VirtualItem, VirtualListKey, VirtualRowDataStatus, VirtualRowModel, } from './types';
+export type { DataSectionBlock, HeaderSectionBlock, SectionBlock, SectionedFlatList, SectionedFlatRow, } from './sectioned';
+export type { DataGridVirtualRowsResult } from './useDataGrid';
+export type { UseVirtualizedListOptions, UseVirtualizedListResult } from './useVirtualizedList';
+export type { UseVirtualizedRowsOptions } from './useVirtualizedRows';
+export type { VirtualizedListContextValue } from './virtualized-list-context';
+export type { VirtualizedListContentProps, VirtualizedListItemProps, VirtualizedListItemSkeletonProps, VirtualizedListProps, VirtualizedListSelectAllProps, VirtualizedListViewportProps, } from './virtualized-list-parts';

package/dist/llms/rules/accessibility.js

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

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";
+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## 7. AG Grid v36 version pin (mandatory)\n\nImpact Nova **2.1.0-alpha.7+** 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:**\n\n```tsx\n<DataTableSheet open={sheetOpen} onOpenChange={setSheetOpen}>\n  <DataTableSheetContent>\n    <DataTableSheetHeader title=\"Table Settings\" />\n    <Tabs defaultValue=\"columns\">\n      <TabsList>\n        <TabsTrigger value=\"columns\">Columns</TabsTrigger>\n        <TabsTrigger value=\"format\">Format</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"columns\">\n        <DataTableColumnList />\n      </TabsContent>\n      <TabsContent value=\"format\">\n        <DataTableFormatOptions />\n      </TabsContent>\n    </Tabs>\n  </DataTableSheetContent>\n</DataTableSheet>\n```\n\nStorybook reference: `Data/DataTable/Column settings scenarios` (`PinSortSearchAndReset`).\n\n---\n";