impact-nova 2.6.2 → 3.0.0-alpha.0

package/dist/components/data/data-table/data-table.js

@@ -1,41 +1,42 @@
-import { jsx as i, jsxs as I } from "react/jsx-runtime";
-import { useState as h, useMemo as p, useCallback as D, useEffect as A, memo as w, useRef as O, useLayoutEffect as N } from "react";
-import { AgGridWrapper as M } from "../ag-grid-react/index.js";
-import { cn as _ } from "../../../lib/utils.js";
-import { DataTableContext as F, DataTableSheetPortalStoreContext as z, useDataTable as B, useDataTableSheetPortal as P } from "./data-table-context.js";
-import { createDataTableSheetPortalStore as L } from "./data-table-sheet-portal-store.js";
-import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as v, DATA_TABLE_SHEET_SLIDE_TRANSITION_MS as j } from "./data-table-constants.js";
-import { scheduleColumnTreePrewarm as k } from "./data-table-column-tree-cache.js";
-import { scheduleColumnRuntimeStateGuard as W } from "./column-runtime-state-guard.js";
-import { extractRuntimeColumnDefs as X, mergeInitialGridRuntimeState as V } from "./data-table-column-def-pin.js";
-const R = {
+import { jsx as i, jsxs as O } from "react/jsx-runtime";
+import { useState as p, useMemo as S, useCallback as b, useEffect as x, memo as A, useRef as N, useLayoutEffect as M } from "react";
+import { AgGridWrapper as F } from "../ag-grid-react/index.js";
+import { AG_GRID_LIST_ROW_HEIGHT_BY_DENSITY as B } from "../ag-grid-react/ag-grid-list.js";
+import { cn as w } from "../../../lib/utils.js";
+import { DataTableContext as L, DataTableSheetPortalStoreContext as z, useDataTable as j, useDataTableSheetPortal as G } from "./data-table-context.js";
+import { createDataTableSheetPortalStore as k } from "./data-table-sheet-portal-store.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as R, DATA_TABLE_SHEET_SLIDE_TRANSITION_MS as W } from "./data-table-constants.js";
+import { scheduleColumnTreePrewarm as Y } from "./data-table-column-tree-cache.js";
+import { scheduleColumnRuntimeStateGuard as X } from "./column-runtime-state-guard.js";
+import { extractRuntimeColumnDefs as V, mergeInitialGridRuntimeState as $ } from "./data-table-column-def-pin.js";
+const P = {
   default: 46,
   compact: 30,
   comfort: 52
-}, ie = ({
+}, le = ({
   children: a,
   className: r
 }) => {
-  const [t, e] = h(null), [o, s] = h("medium"), [n, d] = h("full"), [l, u] = h("default"), m = p(() => L(), []), f = D((c) => {
+  const [e, t] = p(null), [o, s] = p("medium"), [n, d] = p("full"), [l, u] = p("default"), m = S(() => k(), []), f = b((c) => {
     m.registerScopedSheetDepth(c);
-  }, [m]), g = D((c) => {
-    e(c);
+  }, [m]), g = b((c) => {
+    t(c);
   }, []);
-  A(() => {
-    if (!t)
+  x(() => {
+    if (!e)
       return;
-    const c = k(t), S = W(t);
+    const c = Y(e), _ = X(e);
     return () => {
-      c(), S();
+      c(), _();
     };
-  }, [t]);
-  const H = {
+  }, [e]);
+  const h = {
     small: "12px",
     medium: "14px",
     large: "16px"
-  }[o], x = `${R[l]}px`, b = p(
+  }[o], H = `${P[l]}px`, D = S(
     () => ({
-      gridApi: t,
+      gridApi: e,
       registerApi: g,
       registerScopedSheetDepth: f,
       fontSize: o,
@@ -46,7 +47,7 @@ const R = {
       setRowHeight: u
     }),
     [
-      t,
+      e,
       g,
       f,
       o,
@@ -54,7 +55,7 @@ const R = {
       l
     ]
   );
-  return /* @__PURE__ */ i(F.Provider, { value: b, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(L.Provider, { value: D, children: /* @__PURE__ */ i(
     z.Provider,
     {
       value: m,
@@ -62,13 +63,13 @@ const R = {
         "div",
         {
           "data-component": "data-table",
-          className: _(
+          className: w(
             "flex flex-col w-full min-h-0 rounded-[inherit]",
             r
           ),
           style: {
-            "--ag-font-size": H,
-            "--ag-row-height": x
+            "--ag-font-size": h,
+            "--ag-row-height": H
           },
           children: a
         }
@@ -81,8 +82,8 @@ const R = {
   m: "mil",
   b: "bil",
   full_precision: "full_precision"
-}, Y = w(function() {
-  const { setSheetTarget: r } = P();
+}, q = A(function() {
+  const { setSheetTarget: r } = G();
   return /* @__PURE__ */ i(
     "div",
     {
@@ -90,64 +91,64 @@ const R = {
       className: "absolute inset-0 pointer-events-none z-[39] flex overflow-hidden"
     }
   );
-}), $ = w(function({
+}), J = A(function({
   className: r,
-  children: t
+  children: e
 }) {
-  const { scopedSheetOpen: e } = P(), o = O(null), [s, n] = h(!1);
-  !e && s && n(!1), N(() => {
-    if (!e || (o.current?.clientHeight ?? 0) >= v)
+  const { scopedSheetOpen: t } = G(), o = N(null), [s, n] = p(!1);
+  !t && s && n(!1), M(() => {
+    if (!t || (o.current?.clientHeight ?? 0) >= R)
       return;
     const u = window.setTimeout(() => {
       n(!0);
-    }, j);
+    }, W);
     return () => {
       window.clearTimeout(u);
     };
-  }, [e]);
-  const d = e && s;
-  return /* @__PURE__ */ I(
+  }, [t]);
+  const d = t && s;
+  return /* @__PURE__ */ O(
     "div",
     {
       ref: o,
-      className: _(
+      className: w(
         "relative flex-1 min-h-0 w-full bg-canvas-elevated rounded-b-[inherit] grid-rounded-bottom",
         r
       ),
-      style: d ? { minHeight: v } : void 0,
+      style: d ? { minHeight: R } : void 0,
       children: [
-        t,
-        /* @__PURE__ */ i(Y, {})
+        e,
+        /* @__PURE__ */ i(q, {})
       ]
     }
   );
-}), q = w(function({
+}), K = A(function({
   resolvedRowHeight: r,
-  mergedContext: t,
-  onGridReady: e,
+  mergedContext: e,
+  onGridReady: t,
   columnDefs: o,
   maintainColumnOrder: s = !0,
   ...n
 }) {
   return /* @__PURE__ */ i(
-    M,
+    F,
     {
       ...n,
       columnDefs: o,
       rowHeight: r,
-      onGridReady: e,
-      context: t,
+      onGridReady: t,
+      context: e,
       maintainColumnOrder: s
     }
   );
 });
-function ae(a) {
+function ce(a) {
   const {
     registerApi: r,
-    rowHeight: t,
-    gridApi: e,
+    rowHeight: e,
+    gridApi: t,
     numericFormat: o
-  } = B(), {
+  } = j(), {
     className: s,
     onGridReady: n,
     rowHeight: d,
@@ -156,72 +157,74 @@ function ae(a) {
     initialState: m,
     suppressInitialRuntimeState: f,
     maintainColumnOrder: g = !0,
+    variant: h = "table",
     ...H
-  } = a, x = R[t], b = d ?? x, { runtimeColumnDefs: c, extractedRuntimeDefaults: S } = p(
-    () => X(u ?? void 0),
+  } = a, D = P[e], c = d ?? (h === "list" ? B[e] : D), { runtimeColumnDefs: _, extractedRuntimeDefaults: v } = S(
+    () => V(u ?? void 0),
     [u]
-  ), C = p(
-    () => V(
+  ), C = S(
+    () => $(
       m,
-      S,
+      v,
       f
     ),
-    [m, S, f]
-  ), G = p(
+    [m, v, f]
+  ), E = S(
     () => ({
       ...l,
       formatType: y[o]
     }),
     [l, o]
   );
-  A(() => {
-    e?.resetRowHeights();
-  }, [t, e]), A(() => {
-    if (e) {
-      const T = e.getGridOption("context") || {};
-      e.setGridOption("context", {
+  x(() => {
+    t?.resetRowHeights();
+  }, [e, h, t]), x(() => {
+    if (t) {
+      const T = t.getGridOption("context") || {};
+      t.setGridOption("context", {
         ...T,
         formatType: y[o]
-      }), e.refreshCells({ force: !0 });
+      }), t.refreshCells({ force: !0 });
     }
-  }, [o, e]);
-  const E = D(
+  }, [o, t]);
+  const I = b(
     (T) => {
       r(T.api), n?.(T);
     },
     [r, n]
   );
-  return /* @__PURE__ */ i($, { className: s, children: /* @__PURE__ */ i(
-    q,
+  return /* @__PURE__ */ i(J, { className: s, children: /* @__PURE__ */ i(
+    K,
     {
       ...H,
-      columnDefs: c,
+      variant: h,
+      columnDefs: _,
       initialState: C,
       maintainColumnOrder: g,
-      resolvedRowHeight: b,
-      mergedContext: G,
-      onGridReady: E
+      resolvedRowHeight: c,
+      mergedContext: E,
+      onGridReady: I
     }
   ) });
 }
-const se = ({
+const ue = ({
   children: a,
   className: r,
-  ...t
+  ...e
 }) => /* @__PURE__ */ i(
   "div",
   {
     "data-component": "data-table-toolbar",
-    className: _(
+    className: w(
       "flex items-center justify-between px-4 py-3 shrink-0 bg-canvas-elevated rounded-t-[inherit]",
       r
     ),
-    ...t,
+    ...e,
     children: a
   }
 );
 export {
-  ie as DataTable,
-  ae as DataTableContent,
-  se as DataTableToolbar
+  le as DataTable,
+  ce as DataTableContent,
+  ue as DataTableToolbar
 };

package/dist/components/data/data-table/data-table.types.d.ts

@@ -14,6 +14,11 @@ export type DataTableProps = {
  */
 export type DataTableContentProps<TData = unknown> = AgGridWrapperProps<TData> & {
     className?: string;
+    /**
+     * Visual skin forwarded to `AgGridWrapper`. `"list"` is card-row chrome with
+     * a 60px default row height (48px card + 12px gap). Explicit `rowHeight` wins.
+     */
+    variant?: AgGridWrapperProps<TData>["variant"];
     /**
      * Skip injecting extracted column pinning/visibility into `initialState` on
      * first paint — use when a saved view will apply immediately after mount.

package/dist/components/data/expandable-list-item/expandable-list-item-attributes.js

@@ -3,8 +3,7 @@ import { Badge as s } from "../../data-display/badge/badge.js";
 import { FilterPopoverContent as u } from "../../flows/filter-strip/filter-tag-list.js";
 import { Popover as b, PopoverTrigger as f } from "../../feedback/popover/popover.js";
 import { Tooltip as g, TooltipTrigger as v, TooltipContent as x } from "../../feedback/tooltip/tooltip.js";
-import "react";
-function I({
+function w({
   tags: o,
   title: l = "Attributes",
   maxVisibleTags: n = 4,
@@ -71,5 +70,5 @@ function I({
   );
 }
 export {
-  I as ExpandableListItemAttributes
+  w as ExpandableListItemAttributes
 };

package/dist/components/data/expandable-list-item/expandable-list-item-metrics.js

@@ -1,9 +1,8 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { ScrollOverflowAffordance as o } from "../../layout/horizontal-scroller/scroll-overflow-affordance.js";
-import "react";
 import { OverflowTooltip as r } from "../../feedback/tooltip/overflow-tooltip.js";
 const m = 128;
-function f({
+function x({
   columns: i,
   sectionId: l = "metrics"
 }) {
@@ -51,5 +50,5 @@ function f({
   );
 }
 export {
-  f as ExpandableListItemMetrics
+  x as ExpandableListItemMetrics
 };

package/dist/components/data/expandable-list-item/sku-next-page-coordinator.d.ts

@@ -0,0 +1,14 @@
+type NextPageRequestResult = {
+    started: boolean;
+    elapsedMs: number;
+};
+/**
+ * One in-flight next-page request for an infinite query.
+ * Callers that bypass `fetchNextPageIfNeeded` are not protected by the lock.
+ */
+export declare function createNextPageRequestCoordinator(requestPage: () => Promise<unknown>): {
+    /** Drops the lock so a new search or sort can fetch immediately. */
+    reset(): void;
+    fetchNextPageIfNeeded(canFetch: boolean): Promise<NextPageRequestResult>;
+};
+export {};

package/dist/components/data/expandable-list-item/sku-strip-lookahead.d.ts

@@ -0,0 +1,26 @@
+export declare const SKU_PREFETCH_FALLBACK_LATENCY_MS = 220;
+/**
+ * Strips to stay ahead of a forward flick.
+ * `ceil(|velocity| * latency / stride) + safety`, clamped.
+ * Velocity is px/ms, latency is ms, stride is px per strip.
+ */
+export declare function getForwardStripLookahead(options: {
+    velocityPxPerMs: number;
+    latencyMs: number;
+    stripStridePx: number;
+    minimumStrips?: number;
+    maximumStrips?: number;
+    safetyStrips?: number;
+}): number;
+/**
+ * Forward pagination only. Idle and upward scrolls do not request the next page.
+ * `loadedStripCount` is the boundary; skeleton strips past it are not loaded data.
+ */
+export declare function shouldPrefetchForwardPage(options: {
+    isScrolling: boolean;
+    scrollDirection: "forward" | "backward" | null;
+    lastVirtualIndex: number | null;
+    loadedStripCount: number;
+    lookaheadStrips: number;
+    requestedLoadedStripCount: number;
+}): boolean;

package/dist/components/data/expandable-list-item/useServerSkuInfinitePages.d.ts

@@ -0,0 +1,10 @@
+export declare function useServerSkuInfinitePages(search: string, sortAlphabetically: boolean): {
+    debouncedSearch: string;
+    query: import('@tanstack/react-query').UseInfiniteQueryResult<import('@tanstack/query-core').InfiniteData<import('./virtualized-responsive-grid.catalog').SkuServerPage, unknown>, Error>;
+    loadedCatalogIndices: number[];
+    totalCount: number;
+    loadedItemCount: number;
+    fetchNextPageIfNeeded: () => Promise<boolean>;
+    loadLatencyMsRef: import('react').RefObject<number>;
+    pageRequestFailedRef: import('react').RefObject<boolean>;
+};

package/dist/components/data/expandable-list-item/useSkuStripVirtualizer.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+import { UseVirtualizedListResult } from '../../../lib/virtualized';
+type SkuStrip = {
+    items: Array<{
+        id: string;
+    } | undefined>;
+};
+export type SkuStripVirtualizerResult<TStrip extends SkuStrip> = UseVirtualizedListResult<TStrip> & {
+    /** True while a fast flick should paint placeholders instead of heavy cells. */
+    scrollSeekRef: RefObject<boolean>;
+    /** Strip indexes painted as real cells before the current flick. */
+    warmedStripIndexesRef: RefObject<Set<number>>;
+};
+export declare function useSkuStripVirtualizer<TStrip extends SkuStrip>(options: {
+    scrollRef: RefObject<HTMLDivElement | null>;
+    rowCount: number;
+    getRowData: (stripIndex: number) => TStrip;
+    getRowId: (stripIndex: number) => string;
+    isCardView: boolean;
+    hasMore?: boolean;
+    onEndReached?: () => void | Promise<unknown>;
+    isRowLoaded?: (stripIndex: number) => boolean;
+    /** Loaded strips only. Skeleton strips past this index are not real rows. */
+    loadedStripCount?: number;
+    /** Observed page latency. Falls back to the mock's 220ms. */
+    loadLatencyMsRef?: RefObject<number>;
+    /** Changes when search, sort, layout, or a failed page request replaces the boundary. */
+    requestGeneration?: string;
+}): SkuStripVirtualizerResult<TStrip>;
+export {};

package/dist/components/data/expandable-list-item/virtualized-responsive-grid.catalog.d.ts

@@ -0,0 +1,81 @@
+import { ImageComponent } from 'impact-nova-icons';
+export declare const SKU_CATALOG_TOTAL = 50000;
+export declare const ITEM_CATALOG_TOTAL = 50000;
+export declare const SERVER_PAGE_SIZE = 200;
+export declare const SKU_CARD_MINIMUM_WIDTH = 198;
+export declare const SKU_CARD_COLUMN_GAP = 12;
+/** Painted ChoiceCard `size="sm"` height. Keep in lockstep with `estimateSize` (no live measure). */
+export declare const SKU_CARD_HEIGHT = 66;
+export declare const SKU_LIST_MINIMUM_WIDTH = 155;
+export declare const SKU_LIST_COLUMN_GAP = 80;
+export declare const SKU_LIST_ROW_HEIGHT = 24;
+export declare const SKU_LIST_ROW_GAP = 16;
+export declare const SKU_STRIP_OVERSCAN = 12;
+export declare const BY_ITEM_VISUAL_GRID_COLUMN_COUNT = 4;
+export declare const PRODUCT_CARD_COLUMN_GAP = 16;
+export declare const PRODUCT_CARD_HEIGHT = 331;
+export declare const SKU_PREFIXES: readonly ["WM", "WD", "WB", "WP", "WS", "WJ", "WK"];
+export declare const SKU_PRODUCT_NAMES: readonly ["Classic Crew Tee", "Relaxed Fit Tee", "Oversized Boxy Tee", "V-Neck Essential", "Ribbed Baby Tee", "Cropped Pocket Tee", "Silk Midi Dress", "Knit Cardigan", "Pleated Maxi Skirt", "Wide Leg Trousers", "Cropped Blazer", "Satin Camisole", "Wrap Blouse", "Linen Jumpsuit", "Peplum Jacket", "Ruffle Top", "Pencil Skirt", "A-Line Coat"];
+export type SkuCatalogItem = {
+    id: string;
+    skuCode: string;
+    productName: string;
+    Thumbnail: ImageComponent;
+};
+export type RecommendationValue = "keep" | "drop" | "review";
+export declare const RECOMMENDATION_OPTIONS: Array<{
+    value: RecommendationValue;
+    label: string;
+}>;
+export type ItemPlanComparison = {
+    label: string;
+    value: string;
+    direction: "positive" | "negative";
+};
+export type ItemCatalogRecord = {
+    id: string;
+    title: string;
+    styleId: string;
+    category: string;
+    buyUnits: number;
+    saleUnits: number;
+    recommendation: RecommendationValue;
+    ProductImage: ImageComponent | null;
+    unitsVersusPlan: ItemPlanComparison;
+    revenueVersusPlan: ItemPlanComparison;
+    grossMarginPercent: string;
+    markdownPercent: string;
+    weeksOnHand: string;
+    sellThroughVersusPlan: ItemPlanComparison;
+};
+export declare function getSkuCatalogItem(catalogIndex: number): SkuCatalogItem;
+export declare function getSkuCatalogSearchText(catalogIndex: number): string;
+export type SkuServerPage = {
+    startIndex: number;
+    catalogIndices: number[];
+    totalCount: number;
+    nextStartIndex?: number;
+};
+/** Reuse the filtered catalog for later pages of the same search. Does not mutate cached arrays. */
+export declare function getCachedSkuMatchingIndices(searchQuery: string, sortAlphabetically: boolean): number[] | null;
+export declare function fetchSkuServerPage(options: {
+    startIndex: number;
+    searchQuery: string;
+    sortAlphabetically: boolean;
+    pageSize?: number;
+}): Promise<SkuServerPage>;
+export declare function getItemCatalogRecord(catalogIndex: number): ItemCatalogRecord;
+export declare function getStripCount(itemCount: number, columnCount: number): number;
+export declare function collectStripCatalogIndices(options: {
+    stripIndex: number;
+    columnCount: number;
+    itemCount: number;
+    catalogIndices?: number[] | null;
+}): number[];
+export declare function filterAndSortCatalogIndices(options: {
+    totalCount: number;
+    searchQuery: string;
+    sortAlphabetically: boolean;
+    getSearchText: (catalogIndex: number) => string;
+    getSortKey: (catalogIndex: number) => string;
+}): number[] | null;

package/dist/components/data/expandable-list-item/virtualized-responsive-grid.item-grid.d.ts

@@ -0,0 +1 @@
+export declare function ByItemVisualGrid(): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/expandable-list-item/virtualized-responsive-grid.product-card.d.ts

@@ -0,0 +1,7 @@
+import { ItemCatalogRecord, RecommendationValue } from './virtualized-responsive-grid.catalog';
+export declare function ProductCard(props: {
+    item: ItemCatalogRecord;
+    selected: boolean;
+    onToggle: () => void;
+    onRecommendationChange: (value: RecommendationValue) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/expandable-list-item/virtualized-responsive-grid.sku-picker.d.ts

@@ -0,0 +1,2 @@
+export declare function ClientSkuPickerGrid(): import("react/jsx-runtime").JSX.Element;
+export declare function ServerSkuPickerGrid(): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/chart/chart-heatmap-demos.d.ts

@@ -0,0 +1,3 @@
+export declare function CategoryClusterHeatmapCard(): import("react/jsx-runtime").JSX.Element;
+export declare function DivergingHeatmapCard(): import("react/jsx-runtime").JSX.Element;
+export declare function DivergingHeatmapResponsiveCard(): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/chart/chart-heatmap-play.d.ts

@@ -0,0 +1,9 @@
+export declare function playCategoryClusterHeatmap({ canvasElement, }: {
+    canvasElement: HTMLElement;
+}): Promise<void>;
+export declare function playDivergingHeatmap({ canvasElement, }: {
+    canvasElement: HTMLElement;
+}): Promise<void>;
+export declare function playDivergingHeatmapResponsive({ canvasElement, }: {
+    canvasElement: HTMLElement;
+}): Promise<void>;

package/dist/components/data-display/chart/chart.category-cluster-heatmap.stories-data.d.ts

@@ -0,0 +1,22 @@
+import { default as Highcharts } from 'highcharts';
+export declare const CATEGORY_CLUSTER_PRODUCT_CATEGORIES: readonly ["Knitwear", "Outerwear", "Tops", "Bottoms", "Accessories", "Denim"];
+export declare const CATEGORY_CLUSTER_LABELS: readonly ["A", "B", "C", "D", "E"];
+export declare const CATEGORY_CLUSTER_HEATMAP_TITLE = "Category \u00D7 Cluster \u2014 ST%";
+export declare const CATEGORY_CLUSTER_INSIGHT_TEXT = "Cells are colour-coded against the 69% plan: green \u2265+10pp, amber within \u00B15pp, red \u2264\u22125pp. 10 of 30 category-cluster combinations are running red \u2014 Footwear \u00D7 Outlet is the weakest at 46% ST, the first candidate for reallocation or cluster-specific markdown";
+export type CategoryClusterPerformanceTone = "positive" | "warning" | "negative";
+export interface CategoryClusterHeatmapPoint {
+    x: number;
+    y: number;
+    value: number;
+    color: string;
+    name: string;
+    custom: {
+        category: string;
+        cluster: string;
+    };
+}
+export declare function buildCategoryClusterHeatmapPoints(): CategoryClusterHeatmapPoint[];
+export declare function formatCategoryClusterHeatmapTooltip(formatterContext: object): string;
+export declare const CATEGORY_CLUSTER_HEATMAP_SERIES: Highcharts.SeriesHeatmapOptions;
+export declare const CATEGORY_CLUSTER_HEATMAP_OPTIONS: Highcharts.Options;
+export declare const CATEGORY_CLUSTER_HEATMAP_SOURCE = "import {\n  Chart,\n  ChartContainer,\n  ChartHeader,\n  ChartTitle,\n  ChartContent,\n} from 'impact-nova/chart';\nimport { Card } from 'impact-nova/card';\nimport { IrisMenu } from 'impact-nova/iris';\n\n<Card className=\"w-[880px] max-w-full rounded-lg p-3 shadow-elevation-card\">\n  <ChartContainer>\n    <ChartHeader>\n      <ChartTitle>Category \u00D7 Cluster \u2014 ST%</ChartTitle>\n    </ChartHeader>\n    <IrisMenu appearance=\"status\">\n      Cells are colour-coded against the 69% plan...\n    </IrisMenu>\n    <ChartContent>\n      <Chart\n        type=\"heatmap\"\n        xAxisCategories={['A', 'B', 'C', 'D', 'E']}\n        yAxisCategories={['Knitwear', 'Outerwear', 'Tops', 'Bottoms', 'Accessories', 'Denim']}\n        showLegend={false}\n        series={[{ type: 'heatmap', data, dataLabels: { enabled: true, format: '{point.value}%' } }]}\n        options={{ yAxis: { reversed: true }, plotOptions: { heatmap: { borderRadius: 8, borderWidth: 4 } } }}\n      />\n    </ChartContent>\n  </ChartContainer>\n</Card>";

package/dist/components/data-display/chart/chart.diverging-heatmap.stories-data.d.ts

@@ -0,0 +1,43 @@
+import { default as Highcharts } from 'highcharts';
+export declare const DIVERGING_HEATMAP_ROW_LABELS: readonly ["Short Sleeve", "Long Sleeve", "Sleeveless"];
+export declare const DIVERGING_HEATMAP_COLUMN_LABELS: readonly ["A-Premium Urban", "B-High Street", "C-Suburban", "D-Tourist", "E-Outlet", "F-Online Only", "Org"];
+/** Color-axis domain in millions. Zero is the white midpoint at 2/3 of the range. */
+export declare const DIVERGING_HEATMAP_COLOR_MIN = -2;
+export declare const DIVERGING_HEATMAP_COLOR_MAX = 1;
+export declare const DIVERGING_HEATMAP_ZERO_STOP: number;
+export declare const DIVERGING_HEATMAP_TITLE = "Sleeve Length - Top Value ST% Heatmap By Cluster";
+/** Figma 2626:73835 — 216px columns, 60px cells, 4px gutters, labels under each column. */
+export declare const DIVERGING_HEATMAP_COLUMN_COUNT: 7;
+export declare const DIVERGING_HEATMAP_ROW_COUNT: 3;
+export declare const DIVERGING_HEATMAP_COLUMN_WIDTH = 216;
+export declare const DIVERGING_HEATMAP_ROW_LABEL_WIDTH = 129;
+export declare const DIVERGING_HEATMAP_MARGIN_TOP = 24;
+export declare const DIVERGING_HEATMAP_MARGIN_BOTTOM = 48;
+export declare const DIVERGING_HEATMAP_MARGIN_RIGHT = 96;
+export declare const DIVERGING_HEATMAP_PLOT_HEIGHT = 192;
+export declare const DIVERGING_HEATMAP_CHART_WIDTH: number;
+export declare const DIVERGING_HEATMAP_CHART_HEIGHT: number;
+export interface DivergingHeatmapPoint {
+    x: number;
+    y: number;
+    value: number;
+    color: string;
+    name: string;
+    borderColor?: string;
+    borderWidth?: number;
+    custom: {
+        displayLabel: string;
+        rowLabel: string;
+        columnLabel: string;
+    };
+}
+export declare function buildDivergingHeatmapPoints(): DivergingHeatmapPoint[];
+export declare function formatDivergingHeatmapLabel(formatterContext: object): string;
+export declare function formatDivergingHeatmapTooltip(formatterContext: object): string;
+export declare function formatDivergingHeatmapColorAxisLabel(tickValue: number): string;
+export declare const DIVERGING_HEATMAP_SERIES: Highcharts.SeriesHeatmapOptions;
+export declare const DIVERGING_HEATMAP_OPTIONS: Highcharts.Options;
+/** Container-fit variant — Highcharts ellipsis instead of overlapping labels. */
+export declare const DIVERGING_HEATMAP_RESPONSIVE_OPTIONS: Highcharts.Options;
+export declare const DIVERGING_HEATMAP_RESPONSIVE_SOURCE = "import { Chart } from 'impact-nova/chart';\n\n<Chart\n  type=\"heatmap\"\n  height={320}\n  showLegend\n  showTooltip\n  xAxisCategories={columns}\n  yAxisCategories={rows}\n  series={[{ type: 'heatmap', data, dataLabels: { enabled: true } }]}\n  options={{\n    xAxis: {\n      labels: {\n        rotation: 0,\n        autoRotation: [0],\n        overflow: 'justify',\n        allowOverlap: false,\n        style: { textOverflow: 'ellipsis', whiteSpace: 'nowrap' },\n      },\n    },\n    legend: { align: 'right', verticalAlign: 'middle', layout: 'vertical' },\n  }}\n/>";
+export declare const DIVERGING_HEATMAP_SOURCE = "import { Chart } from 'impact-nova/chart';\n\n<Chart\n  type=\"heatmap\"\n  xAxisCategories={columns}\n  yAxisCategories={rows}\n  series={[{\n    type: 'heatmap',\n    data: [{ x: 0, y: 0, value: -1.8, custom: { displayLabel: '$10M' } }],\n    dataLabels: {\n      enabled: true,\n      formatter() { return this.point.custom?.displayLabel; },\n      style: { pointerEvents: 'none' },\n    },\n  }]}\n  options={{\n    colorAxis: {\n      min: -2,\n      max: 1,\n      reversed: true,\n      stops: [\n        [0, 'var(--color-error-border)'],\n        [2 / 3, 'var(--color-surface-elevated)'],\n        [1, 'var(--color-success)'],\n      ],\n    },\n    legend: { align: 'right', verticalAlign: 'middle', layout: 'vertical' },\n  }}\n/>";