impact-nova 2.6.3 → 3.0.0-alpha.0

package/dist/components/data/ag-grid-react/cell-renderers/select-ai-insight-affordance.js

@@ -0,0 +1,96 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { Badge as f } from "../../../data-display/badge/badge.js";
+import { HoverCard as u, HoverCardTrigger as m, HoverCardContent as g } from "../../../feedback/hover-card/hover-card.js";
+import { IrisAlanGradientIcon as h } from "../../../primitives/iris/iris-alan-gradient-icon.js";
+import { cn as s } from "../../../../lib/utils.js";
+import { getFieldValue as l } from "./cell-renderer-utils.js";
+function v(e) {
+  return e.showAiInsight === !0 || e.cellMetadata?.aiInsight === !0 ? !0 : l(e.aiInsightField, void 0, e.data) === !0;
+}
+function b(e) {
+  if (typeof e.cellMetadata?.confidenceScore == "number")
+    return e.cellMetadata.confidenceScore;
+  const t = l(
+    e.confidenceScoreField,
+    e.confidenceScore,
+    e.data
+  );
+  return typeof t == "number" ? t : void 0;
+}
+function y(e) {
+  if (typeof e.cellMetadata?.confidenceReason == "string" && e.cellMetadata.confidenceReason.length > 0)
+    return e.cellMetadata.confidenceReason;
+  const t = l(
+    e.confidenceReasonField,
+    e.confidenceReason,
+    e.data
+  );
+  return typeof t == "string" && t.length > 0 ? t : void 0;
+}
+function A(e) {
+  const t = e.confidenceLabel ?? "Confidence Score";
+  if (!v(e)) return null;
+  const i = b(e), c = y(e), d = i != null || c != null, r = /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      "data-component": "select-display-ai-insight",
+      className: s(
+        "relative z-[2] inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-content-icon",
+        "hover:bg-canvas-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+        "motion-reduce:transition-none",
+        e.className
+      ),
+      "aria-label": i != null ? `${t} ${i}%` : "AI insight",
+      onMouseDown: (n) => {
+        n.preventDefault(), n.stopPropagation();
+      },
+      onClick: (n) => {
+        n.preventDefault(), n.stopPropagation();
+      },
+      onPointerDown: (n) => {
+        n.stopPropagation();
+      },
+      children: /* @__PURE__ */ o(h, { size: 14 })
+    }
+  );
+  return d ? /* @__PURE__ */ a(u, { openDelay: 200, closeDelay: 100, children: [
+    /* @__PURE__ */ o(m, { asChild: !0, children: r }),
+    /* @__PURE__ */ a(
+      g,
+      {
+        align: "end",
+        side: "top",
+        sideOffset: 8,
+        collisionPadding: 12,
+        className: "z-[9999] w-80 max-w-[min(20rem,calc(100vw-1.5rem))] p-3",
+        "data-component": "select-display-confidence-card",
+        onMouseDown: (n) => n.stopPropagation(),
+        onClick: (n) => n.stopPropagation(),
+        onPointerDown: (n) => n.stopPropagation(),
+        children: [
+          i != null && /* @__PURE__ */ a(f, { variant: "outline", color: "success", size: "sm", shape: "circle", children: [
+            t,
+            " - ",
+            i,
+            "%"
+          ] }),
+          c != null && /* @__PURE__ */ o(
+            "p",
+            {
+              className: s(
+                "text-sm text-content leading-snug",
+                i != null && "mt-2"
+              ),
+              children: c
+            }
+          )
+        ]
+      }
+    )
+  ] }) : r;
+}
+A.displayName = "SelectAiInsightAffordance";
+export {
+  A as SelectAiInsightAffordance
+};

package/dist/components/data/ag-grid-react/cell-renderers/select-display-renderer.d.ts

@@ -1,5 +1,7 @@
 import { ICellRendererParams } from 'ag-grid-community';
 import { SelectOption } from './types';
+import { SelectAiInsightMetadata } from './select-ai-insight-affordance';
+export type { SelectAiInsightMetadata };
 export interface SelectDisplayRendererProps extends ICellRendererParams {
     /** Available options for the select */
     options?: SelectOption[];
@@ -7,6 +9,23 @@ export interface SelectDisplayRendererProps extends ICellRendererParams {
     placeholder?: string;
     /** Whether the field is disabled */
     disabled?: boolean;
+    /**
+     * Force-show the AI sparkle when insight metadata is absent.
+     * Prefer `cellMetadata.aiInsight` / `aiInsightField` for per-row control.
+     */
+    showAiInsight?: boolean;
+    /** Row field that resolves to a boolean for the AI sparkle */
+    aiInsightField?: string;
+    /** Static confidence score (0–100); overridden by cellMetadata / field */
+    confidenceScore?: number;
+    /** Row field for confidence score */
+    confidenceScoreField?: string;
+    /** Static confidence reason copy */
+    confidenceReason?: string;
+    /** Row field for confidence reason */
+    confidenceReasonField?: string;
+    /** Confidence badge label prefix (default: "Confidence Score") */
+    confidenceLabel?: string;
 }
 /**
  * SelectDisplayRenderer - Lightweight styled div that looks like a select/dropdown.
@@ -15,28 +34,29 @@ export interface SelectDisplayRendererProps extends ICellRendererParams {
  * zero React state. Shows the label of the currently selected option with a
  * chevron icon. When clicked, AG Grid activates the paired `SelectCellEditor`.
  *
+ * Optional AI insight affordance: when `aiInsight` metadata (or `showAiInsight`)
+ * is set, an Iris sparkle appears. Hovering it opens a confidence HoverCard
+ * (score badge + reason) without entering edit mode.
+ *
  * Usage in colDef:
  * ```ts
  * {
- *   field: 'status',
+ *   field: 'recommendation',
  *   cellRenderer: SelectDisplayRenderer,
  *   cellEditor: SelectCellEditor,
  *   editable: true,
  *   singleClickEdit: true,
  *   cellRendererParams: {
  *     options: [
- *       { label: 'Active', value: 'active' },
- *       { label: 'Inactive', value: 'inactive' },
- *     ],
- *     placeholder: 'Select status...',
- *   },
- *   cellEditorParams: {
- *     options: [
- *       { label: 'Active', value: 'active' },
- *       { label: 'Inactive', value: 'inactive' },
+ *       { label: 'Keep', value: 'keep' },
+ *       { label: 'Shop', value: 'shop' },
+ *       { label: 'Drop', value: 'drop' },
  *     ],
+ *     placeholder: 'Select...',
  *   },
  * }
+ * // Cell value with AI insight:
+ * // { value: 'keep', cellMetadata: { aiInsight: true, confidenceScore: 98, confidenceReason: '...' } }
  * ```
  */
 export declare const SelectDisplayRenderer: {

package/dist/components/data/ag-grid-react/cell-renderers/select-display-renderer.js

@@ -1,31 +1,79 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
-import { ChevronRight as g } from "impact-nova-icons";
-const h = (u) => {
-  const { value: e, options: p = [], placeholder: b = "Select...", disabled: o, colDef: i, data: l } = u, c = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, r = l && typeof l == "object" && "rowMetadata" in l ? l.rowMetadata?._isDisabled : void 0;
-  let t = !1;
-  if (!o) {
-    const s = i?._originalEditable;
-    i?.editable === !1 ? t = !1 : c === !1 ? t = !0 : c === !0 ? t = !1 : r === !1 ? t = !0 : r === !0 ? t = !1 : t = s === !0 || i?.editable === !0;
-  }
-  const a = e && typeof e == "object" && "value" in e ? e.value : e, d = p.find((s) => s.value === String(a ?? ""))?.label ?? (a != null && a !== "" ? String(a) : ""), f = !d;
-  return /* @__PURE__ */ n(
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+import { ChevronRight as D } from "impact-nova-icons";
+import { cn as f } from "../../../../lib/utils.js";
+import { SelectAiInsightAffordance as M } from "./select-ai-insight-affordance.js";
+function E(i) {
+  const { value: e, data: t, disabled: c, colDef: l } = i;
+  if (c) return !1;
+  const a = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, n = t && typeof t == "object" && "rowMetadata" in t ? t.rowMetadata?._isDisabled : void 0, r = l?._originalEditable;
+  return l?.editable === !1 ? !1 : a === !1 ? !0 : a === !0 ? !1 : n === !1 ? !0 : n === !0 ? !1 : r === !0 || l?.editable === !0;
+}
+const F = (i) => {
+  const {
+    value: e,
+    options: t = [],
+    placeholder: c = "Select...",
+    disabled: l,
+    data: a,
+    showAiInsight: n,
+    aiInsightField: r,
+    confidenceScore: h,
+    confidenceScoreField: g,
+    confidenceReason: v,
+    confidenceReasonField: x,
+    confidenceLabel: y
+  } = i, s = E(i), u = e && typeof e == "object" && "value" in e, w = u ? e.cellMetadata : void 0, o = u ? e.value : e, p = t.find((j) => j.value === String(o ?? ""))?.label ?? (o != null && o !== "" ? String(o) : ""), b = !p, S = a && typeof a == "object" ? a : null;
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: `w-full h-full flex items-center ag-cell-inner-padding ${o ? "opacity-60 cursor-not-allowed" : t ? "in-ag-editable-cell-highlight" : ""}`,
-      children: /* @__PURE__ */ m(
-        "div",
-        {
-          className: `flex w-full items-center justify-between rounded-[8px] px-1.5 h-7 ${t ? "bg-canvas-elevated cursor-pointer" : "bg-inherit"}`,
-          children: [
-            /* @__PURE__ */ n("span", { className: `truncate text-sm font-medium text-content ${f ? "text-content-empty" : ""}`, children: f ? b : d }),
-            t && /* @__PURE__ */ n(g, { className: "h-3.5 w-3.5 shrink-0 rotate-90 text-content-icon" })
-          ]
-        }
-      )
+      className: f(
+        "box-border flex h-full w-full min-w-0 items-center gap-2 ps-2 pe-2.5",
+        l && "opacity-60 cursor-not-allowed",
+        s && "in-ag-editable-cell-highlight"
+      ),
+      "data-component": "select-display-renderer",
+      children: [
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: f(
+              "flex h-7 min-w-0 flex-1 items-center justify-between rounded-[8px] px-1.5",
+              s ? "bg-canvas-elevated cursor-pointer" : "bg-inherit"
+            ),
+            children: [
+              /* @__PURE__ */ d(
+                "span",
+                {
+                  className: f(
+                    "truncate text-sm font-medium text-content",
+                    b && "text-content-empty"
+                  ),
+                  children: b ? c : p
+                }
+              ),
+              s && /* @__PURE__ */ d(D, { className: "h-3.5 w-3.5 shrink-0 rotate-90 text-content-icon" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ d(
+          M,
+          {
+            showAiInsight: n,
+            aiInsightField: r,
+            confidenceScore: h,
+            confidenceScoreField: g,
+            confidenceReason: v,
+            confidenceReasonField: x,
+            confidenceLabel: y,
+            data: S,
+            cellMetadata: w
+          }
+        )
+      ]
     }
   );
 };
-h.displayName = "SelectDisplayRenderer";
+F.displayName = "SelectDisplayRenderer";
 export {
-  h as SelectDisplayRenderer
+  F as SelectDisplayRenderer
 };

package/dist/components/data/ag-grid-react/cell-renderers/style-description-display-renderer.d.ts

@@ -0,0 +1,42 @@
+import { ICellRendererParams } from 'ag-grid-community';
+export interface StyleDescriptionCellValue {
+    label?: string;
+    /** CSS color for the swatch (token or data-driven hex from the API) */
+    swatchColor?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+}
+export interface StyleDescriptionDisplayRendererProps extends ICellRendererParams {
+    /** Row field for the style label (fallback when value is a plain string) */
+    labelField?: string;
+    /** Row field for swatch color */
+    swatchColorField?: string;
+    /** Row field for product thumbnail URL */
+    imageUrlField?: string;
+    /** Row field for image alt text */
+    imageAltField?: string;
+    /** Shown when label is empty (default em dash) */
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * StyleDescriptionDisplayRenderer — swatch + label + thumbnail in one cell.
+ *
+ * Matches Hindsight By Item “Style Description” (color chip, style name,
+ * product image with empty fallback). Display-only; no editor pairing.
+ *
+ * Usage in colDef:
+ * ```ts
+ * {
+ *   field: 'styleDescription',
+ *   cellRenderer: StyleDescriptionDisplayRenderer,
+ *   cellClass: AG_CELL_NO_PADDING,
+ *   // value: { label: 'Ribbed Jeans', swatchColor: '#7f1d1d', imageUrl: '...' }
+ *   // or cellRendererParams: { labelField, swatchColorField, imageUrlField }
+ * }
+ * ```
+ */
+export declare const StyleDescriptionDisplayRenderer: {
+    (props: StyleDescriptionDisplayRendererProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/data/ag-grid-react/cell-renderers/style-description-display-renderer.js

@@ -0,0 +1,86 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { Image as p } from "impact-nova-icons";
+import { Avatar as y, AvatarImage as f, AvatarFallback as g } from "../../../data-display/avatar/avatar.js";
+import { cn as d } from "../../../../lib/utils.js";
+import { getFieldValue as n } from "./cell-renderer-utils.js";
+function b(a) {
+  const { value: t, data: i } = a;
+  if (t && typeof t == "object" && !Array.isArray(t)) {
+    const e = t;
+    if (e.value && typeof e.value == "object" && !Array.isArray(e.value))
+      return e.value;
+    if ("label" in e || "swatchColor" in e || "imageUrl" in e)
+      return e;
+  }
+  const r = typeof t == "string" || typeof t == "number" ? String(t) : void 0;
+  return {
+    label: n(a.labelField, r, i) ?? void 0,
+    swatchColor: n(a.swatchColorField, void 0, i) ?? void 0,
+    imageUrl: n(a.imageUrlField, void 0, i) ?? void 0,
+    imageAlt: n(a.imageAltField, void 0, i) ?? void 0
+  };
+}
+const h = (a) => {
+  const { className: t, emptyLabel: i = "—" } = a, { label: r, swatchColor: e, imageUrl: s, imageAlt: u } = b(a), o = r != null && String(r).trim().length > 0, m = o ? String(r) : i;
+  return !o && !e && !s ? /* @__PURE__ */ l(
+    "div",
+    {
+      className: d(
+        "w-full h-full flex items-center justify-center ag-cell-inner-padding text-content-empty text-sm",
+        t
+      ),
+      "data-component": "style-description-display",
+      children: i
+    }
+  ) : /* @__PURE__ */ c(
+    "div",
+    {
+      className: d(
+        "w-full h-full flex items-center gap-2 ag-cell-inner-padding min-w-0",
+        t
+      ),
+      "data-component": "style-description-display",
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          e ? /* @__PURE__ */ l(
+            "span",
+            {
+              className: "box-border size-4 shrink-0 rounded-sm border border-stroke bg-muted",
+              style: { backgroundColor: e },
+              title: e,
+              "aria-hidden": !0,
+              "data-component": "style-description-swatch"
+            }
+          ) : null,
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: d(
+                "truncate text-sm font-medium",
+                o ? "text-content" : "text-content-empty"
+              ),
+              children: m
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { className: "ms-auto flex shrink-0 items-center border-s border-stroke ps-2", children: /* @__PURE__ */ c(
+          y,
+          {
+            size: "sm",
+            shape: "square",
+            className: "size-8 rounded-md text-[0]",
+            "data-component": "style-description-image",
+            children: [
+              s ? /* @__PURE__ */ l(f, { src: s, alt: u ?? m }) : null,
+              /* @__PURE__ */ l(g, { className: "rounded-md bg-muted text-content-icon", children: /* @__PURE__ */ l(p, { size: 16, "aria-hidden": !0, className: "text-content-icon" }) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+h.displayName = "StyleDescriptionDisplayRenderer";
+export {
+  h as StyleDescriptionDisplayRenderer
+};

package/dist/components/data/ag-grid-react/index.d.ts

@@ -1,7 +1,7 @@
 import { AgGridWrapperProps } from './ag-grid.types';
 import { subscribeGridApiEvent, subscribeGridApiEvents } from './grid-api-event-subscription';
 export { subscribeGridApiEvent, subscribeGridApiEvents };
-export declare function AgGridWrapper<TData>({ children, defaultColDef, defaultColGroupDef, columnDefs, valueFormatters, onGridReady: userOnGridReady, onGridPreDestroyed: userOnGridPreDestroyed, onFilterChanged: userOnFilterChanged, onSelectionChanged: userOnSelectionChanged, onModelUpdated: userOnModelUpdated, ensureDomOrder, autoSizeStrategy, tooltipShowMode, tooltipShowDelay, tooltipHideDelay, tooltipInteraction, themeOverride, ...restProps }: AgGridWrapperProps<TData> & {
+export declare function AgGridWrapper<TData>({ children, defaultColDef, defaultColGroupDef, columnDefs, valueFormatters, onGridReady: userOnGridReady, onGridPreDestroyed: userOnGridPreDestroyed, onFilterChanged: userOnFilterChanged, onSelectionChanged: userOnSelectionChanged, onModelUpdated: userOnModelUpdated, ensureDomOrder, autoSizeStrategy, tooltipShowMode, tooltipShowDelay, tooltipHideDelay, tooltipInteraction, themeOverride, variant, ...restProps }: AgGridWrapperProps<TData> & {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export { useAgGridTruncationTooltip } from './use-ag-grid-truncation-tooltip';