@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/components/GroupHeaderRow.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { ChevronRight, ChevronDown } from "lucide-react";
+const GroupHeaderRow = memo(({
+  visualRow,
+  virtualItem,
+  totalWidth,
+  columns,
+  onToggle,
+  selectable,
+  selected,
+  someSelected,
+  onToggleSelect,
+  formatGroupValue
+}) => {
+  const fieldLabel = columns.find((c) => c.data === visualRow.field)?.title || visualRow.field;
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      "data-group-header": true,
+      "data-group-key": visualRow.groupKey,
+      className: "hot-group-header-row",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        // Match VirtualRow's width logic so the group band lines up with the
+        // data rows.
+        width: `${totalWidth}px`,
+        height: `${virtualItem.size}px`,
+        transform: `translateY(${virtualItem.start}px)`
+      },
+      children: [
+        selectable && /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-row-header hot-group-header-select-cell",
+            onClick: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
+            style: {
+              width: 50,
+              flexBasis: 50,
+              flexShrink: 0,
+              flexGrow: 0,
+              position: "sticky",
+              left: 0,
+              zIndex: 3
+            },
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "hot-row-select hot-row-select-all",
+                checked: !!selected,
+                ref: (el) => {
+                  if (el) el.indeterminate = !selected && !!someSelected;
+                },
+                onChange: () => onToggleSelect?.(),
+                onClick: (e) => e.stopPropagation(),
+                onMouseDown: (e) => e.stopPropagation(),
+                "aria-label": "Select all rows in group"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-group-header-label-cell",
+            style: { position: "sticky", left: selectable ? 50 : 0, zIndex: 2 },
+            onClick: () => onToggle(visualRow.groupKey),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "hot-group-header-content",
+                style: { paddingLeft: `${(selectable ? 0 : 12) + visualRow.depth * 20}px` },
+                children: [
+                  visualRow.collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "hot-group-header-chevron" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "hot-group-header-chevron" }),
+                  /* @__PURE__ */ jsx("span", { className: "hot-group-header-field", children: fieldLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "hot-group-header-value", children: formatGroupValue?.({
+                    field: visualRow.field,
+                    value: visualRow.value,
+                    count: visualRow.count
+                  }) ?? visualRow.value }),
+                  /* @__PURE__ */ jsx("span", { className: "hot-group-header-count", children: visualRow.count })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-group-header-cell",
+            style: { width: `${totalWidth - (selectable ? 50 : 0)}px` },
+            onClick: () => onToggle(visualRow.groupKey)
+          }
+        )
+      ]
+    }
+  );
+});
+GroupHeaderRow.displayName = "GroupHeaderRow";
+var GroupHeaderRow_default = GroupHeaderRow;
+export {
+  GroupHeaderRow_default as default
+};
+//# sourceMappingURL=GroupHeaderRow.js.map

package/dist/backend/dynamic-table/components/GroupHeaderRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/GroupHeaderRow.tsx"],
+  "sourcesContent": ["import React, { memo } from 'react';\nimport type { VirtualItem } from '@tanstack/react-virtual';\nimport type { GroupHeaderVisualRow } from '../types/grouping';\nimport type { ColumnDef } from '../types/index';\nimport { ChevronRight, ChevronDown } from 'lucide-react';\n\ninterface GroupHeaderRowProps {\n  visualRow: GroupHeaderVisualRow;\n  virtualItem: VirtualItem;\n  totalWidth: number;\n  columns: ColumnDef[];\n  onToggle: (groupKey: string) => void;\n  /** v2: show a checkbox that selects/deselects every row in the group. */\n  selectable?: boolean;\n  /** All rows in the group are selected. */\n  selected?: boolean;\n  /** Some \u2014 but not all \u2014 rows in the group are selected. */\n  someSelected?: boolean;\n  onToggleSelect?: () => void;\n  /**\n   * Rename a group's heading \u2014 the field, the raw value, and what the table\n   * would otherwise print.\n   *\n   * Exists because the ONLY thing the grouping engine can say about a group with\n   * no value is its own sentinel, `(Empty)`, which names the table's internals\n   * rather than the data. Grouped by case, that pile is \"No case\" \u2014 the\n   * documents nobody has filed \u2014 and a host that knows the domain should be\n   * able to say so. Return `undefined` to keep the default.\n   */\n  formatGroupValue?: (ctx: { field: string; value: string; count: number }) => string | undefined;\n}\n\nconst GroupHeaderRow: React.FC<GroupHeaderRowProps> = memo(({\n  visualRow,\n  virtualItem,\n  totalWidth,\n  columns,\n  onToggle,\n  selectable,\n  selected,\n  someSelected,\n  onToggleSelect,\n  formatGroupValue,\n}) => {\n  const fieldLabel = columns.find(c => c.data === visualRow.field)?.title || visualRow.field;\n\n  return (\n    <tr\n      data-group-header\n      data-group-key={visualRow.groupKey}\n      className=\"hot-group-header-row\"\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        // Match VirtualRow's width logic so the group band lines up with the\n        // data rows.\n        width: `${totalWidth}px`,\n        height: `${virtualItem.size}px`,\n        transform: `translateY(${virtualItem.start}px)`,\n      }}\n    >\n      {selectable && (\n        <td\n          className=\"hot-row-header hot-group-header-select-cell\"\n          // Stop clicks here from bubbling to the content cell (collapse toggle).\n          onClick={(e) => e.stopPropagation()}\n          onMouseDown={(e) => e.stopPropagation()}\n          style={{\n            width: 50,\n            flexBasis: 50,\n            flexShrink: 0,\n            flexGrow: 0,\n            position: 'sticky',\n            left: 0,\n            zIndex: 3,\n          }}\n        >\n          <input\n            type=\"checkbox\"\n            className=\"hot-row-select hot-row-select-all\"\n            checked={!!selected}\n            ref={(el) => { if (el) el.indeterminate = !selected && !!someSelected; }}\n            onChange={() => onToggleSelect?.()}\n            onClick={(e) => e.stopPropagation()}\n            onMouseDown={(e) => e.stopPropagation()}\n            aria-label=\"Select all rows in group\"\n          />\n        </td>\n      )}\n      {/* Zero-width sticky cell that pins the group label to the left edge so it\n         stays visible while the table scrolls horizontally. It contributes ~0 to\n         the row width (the label overflows to the right over the band fill), so\n         the band still lines up with the data rows. Offset by the 50px select\n         cell (itself sticky at left:0) when present so it doesn't slide under it. */}\n      <td\n        className=\"hot-group-header-label-cell\"\n        style={{ position: 'sticky', left: selectable ? 50 : 0, zIndex: 2 }}\n        onClick={() => onToggle(visualRow.groupKey)}\n      >\n        <div\n          className=\"hot-group-header-content\"\n          style={{ paddingLeft: `${(selectable ? 0 : 12) + visualRow.depth * 20}px` }}\n        >\n          {visualRow.collapsed ? (\n            <ChevronRight className=\"hot-group-header-chevron\" />\n          ) : (\n            <ChevronDown className=\"hot-group-header-chevron\" />\n          )}\n          <span className=\"hot-group-header-field\">{fieldLabel}</span>\n          <span className=\"hot-group-header-value\">\n            {formatGroupValue?.({\n              field: visualRow.field,\n              value: visualRow.value,\n              count: visualRow.count,\n            }) ?? visualRow.value}\n          </span>\n          <span className=\"hot-group-header-count\">{visualRow.count}</span>\n        </div>\n      </td>\n      {/* Band fill \u2014 spans the remaining table width so the group band stays flush\n         with the data rows even when scrolled. `totalWidth` budgets 50px for the\n         row-header column (CSS clamps it to 32px), so subtract that allotment\n         when the select cell is present. */}\n      <td\n        className=\"hot-group-header-cell\"\n        style={{ width: `${totalWidth - (selectable ? 50 : 0)}px` }}\n        onClick={() => onToggle(visualRow.groupKey)}\n      />\n    </tr>\n  );\n});\n\nGroupHeaderRow.displayName = 'GroupHeaderRow';\n\nexport default GroupHeaderRow;\n"],
+  "mappings": "AA8EU,cAsBF,YAtBE;AA9EV,SAAgB,YAAY;AAI5B,SAAS,cAAc,mBAAmB;AA4B1C,MAAM,iBAAgD,KAAK,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,QAAQ,KAAK,OAAK,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS,UAAU;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,qBAAiB;AAAA,MACjB,kBAAgB,UAAU;AAAA,MAC1B,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA;AAAA;AAAA,QAGN,OAAO,GAAG,UAAU;AAAA,QACpB,QAAQ,GAAG,YAAY,IAAI;AAAA,QAC3B,WAAW,cAAc,YAAY,KAAK;AAAA,MAC5C;AAAA,MAEC;AAAA,sBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YAEV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,YACtC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAM;AAAA,cACN,QAAQ;AAAA,YACV;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,CAAC,CAAC;AAAA,gBACX,KAAK,CAAC,OAAO;AAAE,sBAAI,GAAI,IAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAAA,gBAAc;AAAA,gBACvE,UAAU,MAAM,iBAAiB;AAAA,gBACjC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,gBAClC,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,gBACtC,cAAW;AAAA;AAAA,YACb;AAAA;AAAA,QACF;AAAA,QAOF;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,UAAU,UAAU,MAAM,aAAa,KAAK,GAAG,QAAQ,EAAE;AAAA,YAClE,SAAS,MAAM,SAAS,UAAU,QAAQ;AAAA,YAE1C;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,aAAa,IAAI,aAAa,IAAI,MAAM,UAAU,QAAQ,EAAE,KAAK;AAAA,gBAEzE;AAAA,4BAAU,YACT,oBAAC,gBAAa,WAAU,4BAA2B,IAEnD,oBAAC,eAAY,WAAU,4BAA2B;AAAA,kBAEpD,oBAAC,UAAK,WAAU,0BAA0B,sBAAW;AAAA,kBACrD,oBAAC,UAAK,WAAU,0BACb,6BAAmB;AAAA,oBAClB,OAAO,UAAU;AAAA,oBACjB,OAAO,UAAU;AAAA,oBACjB,OAAO,UAAU;AAAA,kBACnB,CAAC,KAAK,UAAU,OAClB;AAAA,kBACA,oBAAC,UAAK,WAAU,0BAA0B,oBAAU,OAAM;AAAA;AAAA;AAAA,YAC5D;AAAA;AAAA,QACF;AAAA,QAKA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,cAAc,aAAa,KAAK,EAAE,KAAK;AAAA,YAC1D,SAAS,MAAM,SAAS,UAAU,QAAQ;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/backend/dynamic-table/components/GroupSummaryRow.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Sigma } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useCellStore } from "../hooks/index.js";
+import { formatAggregate } from "../utils/formatAggregate.js";
+import { columnSpacerKey, columnSpacerStyle } from "../utils/columnSpacerStyle.js";
+const GroupSummaryRow = memo(({
+  visualRow,
+  virtualItem,
+  columns,
+  rowHeaders,
+  leftOffsets,
+  rightOffsets,
+  actionsColumnWidth,
+  showActionsColumn = true,
+  totalWidth,
+  aggregations,
+  label,
+  locale,
+  storeRevision: _storeRevision,
+  columnWindow
+}) => {
+  const store = useCellStore();
+  const t = useT();
+  const aggregatedFields = new Set(aggregations.map((a) => a.field));
+  const scopeNote = visualRow.scope === "page" ? t("dynamicTable.aggregation.groupScopeNote", "(this page only)") : null;
+  const renderSummaryCell = (colIndex) => {
+    const col = columns[colIndex];
+    if (!col) return null;
+    const width = store.getColumnWidth(colIndex);
+    const stickyLeft = leftOffsets[colIndex];
+    const stickyRight = rightOffsets[colIndex];
+    const style = {
+      width,
+      flexBasis: width,
+      minWidth: width,
+      flexShrink: 0,
+      flexGrow: 0,
+      position: "relative"
+    };
+    if (stickyLeft !== void 0) {
+      style.position = "sticky";
+      style.left = stickyLeft;
+      style.zIndex = 2;
+    } else if (stickyRight !== void 0) {
+      style.position = "sticky";
+      style.right = stickyRight;
+      style.zIndex = 2;
+    }
+    const showValue = aggregatedFields.has(col.data);
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        "aria-colindex": colIndex + 1 + (rowHeaders ? 1 : 0),
+        className: `hot-cell hot-group-summary-cell${col.align ? ` cell-align-${col.align}` : ""}${col.mono ? " cell-mono" : ""}`,
+        style,
+        "data-group-summary-cell": col.data,
+        "data-sticky-left": stickyLeft !== void 0,
+        "data-sticky-right": stickyRight !== void 0,
+        children: showValue ? /* @__PURE__ */ jsx("span", { className: "cell-content hot-group-summary-value", children: formatAggregate(
+          visualRow.values[col.data],
+          col,
+          locale,
+          visualRow.fns[col.data] ?? "sum",
+          visualRow.breakdowns?.[col.data]
+        ) }) : null
+      },
+      col.data
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      "data-group-summary": true,
+      "data-group-key": visualRow.groupKey,
+      "data-group-scope": visualRow.scope,
+      "data-group-rows-covered": visualRow.rowsCovered,
+      className: "hot-group-summary-row",
+      style: {
+        display: "flex",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: `${totalWidth}px`,
+        height: `${virtualItem.size}px`,
+        transform: `translateY(${virtualItem.start}px)`
+      },
+      children: [
+        rowHeaders && /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-row-header hot-group-summary-rowheader",
+            style: { width: 50, flexBasis: 50, flexShrink: 0, flexGrow: 0, position: "sticky", left: 0, zIndex: 3 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-group-summary-label-cell",
+            style: { position: "relative", zIndex: 2 },
+            children: /* @__PURE__ */ jsxs("div", { className: "hot-group-summary-label", style: { paddingLeft: `${12 + visualRow.depth * 20}px` }, children: [
+              /* @__PURE__ */ jsx(Sigma, { className: "hot-group-summary-sigma" }),
+              /* @__PURE__ */ jsx("span", { children: label }),
+              scopeNote ? /* @__PURE__ */ jsx("span", { className: "hot-group-summary-scope text-body-regular-xs", "data-group-scope-label": true, children: scopeNote }) : null
+            ] })
+          }
+        ),
+        columnWindow?.virtualized ? columnWindow.segments.map((seg) => seg.type === "spacer" ? /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-cell-spacer",
+            "aria-hidden": "true",
+            style: columnSpacerStyle(seg.width)
+          },
+          columnSpacerKey(seg.fromIndex, seg.toIndex)
+        ) : renderSummaryCell(seg.column.index)) : columns.map((_, colIndex) => renderSummaryCell(colIndex)),
+        showActionsColumn && /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "hot-cell hot-actions-cell hot-group-summary-actions",
+            style: { width: actionsColumnWidth, flexBasis: actionsColumnWidth, flexShrink: 0, flexGrow: 0, position: "sticky", right: 0, zIndex: 2 }
+          }
+        )
+      ]
+    }
+  );
+});
+GroupSummaryRow.displayName = "GroupSummaryRow";
+var GroupSummaryRow_default = GroupSummaryRow;
+export {
+  GroupSummaryRow_default as default
+};
+//# sourceMappingURL=GroupSummaryRow.js.map

package/dist/backend/dynamic-table/components/GroupSummaryRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/GroupSummaryRow.tsx"],
+  "sourcesContent": ["import React, { memo } from 'react';\nimport type { VirtualItem } from '@tanstack/react-virtual';\nimport { Sigma } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { useCellStore } from '../hooks/index';\nimport type { ColumnDef } from '../types/index';\nimport type { AggregationRule, GroupSummaryVisualRow } from '../types/grouping';\nimport { formatAggregate } from '../utils/formatAggregate';\nimport type { ColumnWindow } from '../utils/columnWindow';\nimport { columnSpacerKey, columnSpacerStyle } from '../utils/columnSpacerStyle';\n\ninterface GroupSummaryRowProps {\n  visualRow: GroupSummaryVisualRow;\n  virtualItem: VirtualItem;\n  columns: ColumnDef[];\n  rowHeaders: boolean;\n  leftOffsets: (number | undefined)[];\n  rightOffsets: (number | undefined)[];\n  actionsColumnWidth: number;\n  showActionsColumn?: boolean;\n  totalWidth: number;\n  aggregations: AggregationRule[];\n  label: string;\n  locale?: string;\n  /** Bumps when column widths change so the memo re-renders. */\n  storeRevision: number;\n  /**\n   * Mounted column window \u2014 the SAME instance the data rows consume, so a\n   * subtotal stays under its column while scrolled. Omit for the unvirtualized\n   * render.\n   */\n  columnWindow?: ColumnWindow;\n}\n\nconst GroupSummaryRow: React.FC<GroupSummaryRowProps> = memo(({\n  visualRow,\n  virtualItem,\n  columns,\n  rowHeaders,\n  leftOffsets,\n  rightOffsets,\n  actionsColumnWidth,\n  showActionsColumn = true,\n  totalWidth,\n  aggregations,\n  label,\n  locale,\n  storeRevision: _storeRevision,\n  columnWindow,\n}) => {\n  const store = useCellStore();\n  const t = useT();\n  const aggregatedFields = new Set(aggregations.map((a) => a.field));\n  // A subtotal folded from ONE server page, presented as if it were the group's\n  // total, is the defect this note exists to end. Shipping the widened\n  // functions without it would simply re-create it in six new flavours.\n  const scopeNote =\n    visualRow.scope === 'page'\n      ? t('dynamicTable.aggregation.groupScopeNote', '(this page only)')\n      : null;\n\n  // One cell renderer, two callers \u2014 `colIndex` is always the ABSOLUTE\n  // index into `columns`.\n  const renderSummaryCell = (colIndex: number) => {\n    const col = columns[colIndex];\n    if (!col) return null;\n\n    const width = store.getColumnWidth(colIndex);\n    const stickyLeft = leftOffsets[colIndex];\n    const stickyRight = rightOffsets[colIndex];\n    const style: React.CSSProperties = {\n      width,\n      flexBasis: width,\n      minWidth: width,\n      flexShrink: 0,\n      flexGrow: 0,\n      position: 'relative',\n    };\n    if (stickyLeft !== undefined) {\n      style.position = 'sticky';\n      style.left = stickyLeft;\n      style.zIndex = 2;\n    } else if (stickyRight !== undefined) {\n      style.position = 'sticky';\n      style.right = stickyRight;\n      style.zIndex = 2;\n    }\n    const showValue = aggregatedFields.has(col.data);\n    return (\n      <td\n        key={col.data}\n        aria-colindex={colIndex + 1 + (rowHeaders ? 1 : 0)}\n        className={`hot-cell hot-group-summary-cell${col.align ? ` cell-align-${col.align}` : ''}${col.mono ? ' cell-mono' : ''}`}\n        style={style}\n        data-group-summary-cell={col.data}\n        data-sticky-left={stickyLeft !== undefined}\n        data-sticky-right={stickyRight !== undefined}\n      >\n        {showValue ? (\n          <span className=\"cell-content hot-group-summary-value\">\n            {/* No `?? 0`: a null MIN must read as an em dash, not 0,00.\n                The fn is REQUIRED \u2014 without it a `count` of 3 renders 3,00.\n                The breakdown, when the rule carried a `dimension`, REPLACES the\n                scalar \u2014 see `formatAggregate`. */}\n            {formatAggregate(\n              visualRow.values[col.data],\n              col,\n              locale,\n              visualRow.fns[col.data] ?? 'sum',\n              visualRow.breakdowns?.[col.data],\n            )}\n          </span>\n        ) : null}\n      </td>\n    );\n  };\n\n  return (\n    <tr\n      data-group-summary\n      data-group-key={visualRow.groupKey}\n      data-group-scope={visualRow.scope}\n      data-group-rows-covered={visualRow.rowsCovered}\n      className=\"hot-group-summary-row\"\n      style={{\n        display: 'flex',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: `${totalWidth}px`,\n        height: `${virtualItem.size}px`,\n        transform: `translateY(${virtualItem.start}px)`,\n      }}\n    >\n      {rowHeaders && (\n        <td\n          className=\"hot-row-header hot-group-summary-rowheader\"\n          style={{ width: 50, flexBasis: 50, flexShrink: 0, flexGrow: 0, position: 'sticky', left: 0, zIndex: 3 }}\n        />\n      )}\n      {/* Zero-width \"\u03A3 Suma\" label \u2014 overflows to the right over the (blank) lead\n         columns and scrolls with the row (not sticky). `relative` + z-index keeps\n         it painted above the following cells so v2's white fill can't cover it. */}\n      <td\n        className=\"hot-group-summary-label-cell\"\n        style={{ position: 'relative', zIndex: 2 }}\n      >\n        <div className=\"hot-group-summary-label\" style={{ paddingLeft: `${12 + visualRow.depth * 20}px` }}>\n          <Sigma className=\"hot-group-summary-sigma\" />\n          <span>{label}</span>\n          {scopeNote ? (\n            <span className=\"hot-group-summary-scope text-body-regular-xs\" data-group-scope-label>\n              {scopeNote}\n            </span>\n          ) : null}\n        </div>\n      </td>\n      {columnWindow?.virtualized\n        ? columnWindow.segments.map((seg) =>\n            seg.type === 'spacer' ? (\n              <td\n                key={columnSpacerKey(seg.fromIndex, seg.toIndex)}\n                className=\"hot-cell-spacer\"\n                aria-hidden=\"true\"\n                style={columnSpacerStyle(seg.width)}\n              />\n            ) : (\n              renderSummaryCell(seg.column.index)\n            ))\n        : columns.map((_, colIndex) => renderSummaryCell(colIndex))}\n\n      {showActionsColumn && (\n        <td\n          className=\"hot-cell hot-actions-cell hot-group-summary-actions\"\n          style={{ width: actionsColumnWidth, flexBasis: actionsColumnWidth, flexShrink: 0, flexGrow: 0, position: 'sticky', right: 0, zIndex: 2 }}\n        />\n      )}\n    </tr>\n  );\n});\n\nGroupSummaryRow.displayName = 'GroupSummaryRow';\n\nexport default GroupSummaryRow;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/components/ImportPanel.js

@@ -0,0 +1,341 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { AlertTriangle, FileSpreadsheet, Undo2, Upload } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "../../../primitives/button.js";
+import { apiCall } from "../../utils/apiCall.js";
+import { flash } from "../../FlashMessages.js";
+import ImportPreviewGrid from "./ImportPreviewGrid.js";
+const ACCEPT = ".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+const ImportPanel = ({
+  previewUrl,
+  commitUrl,
+  revertUrl,
+  modes = ["create", "upsert_id"],
+  onChanged,
+  onClose
+}) => {
+  const t = useT();
+  const fileInputRef = useRef(null);
+  const [phase, setPhase] = useState("choose");
+  const [busy, setBusy] = useState(false);
+  const [file, setFile] = useState(null);
+  const [mode, setMode] = useState(modes[0] ?? "create");
+  const [preview, setPreview] = useState(null);
+  const [commitResult, setCommitResult] = useState(null);
+  const [errorText, setErrorText] = useState(null);
+  const modeLabels = useMemo(
+    () => ({
+      create: t("dynamicTable.import.modeCreate", "Add new rows"),
+      upsert_id: t("dynamicTable.import.modeUpsertId", "Update rows matched by id")
+    }),
+    [t]
+  );
+  const describeError = useCallback(
+    (body, fallback) => {
+      if (!body) return fallback;
+      if (body.messageKey === "dynamicTable.import.tooManyRows") {
+        return t(
+          "dynamicTable.import.tooManyRows",
+          "This file has {count} rows; the limit is {limit}. Split it and import in parts.",
+          body.details
+        );
+      }
+      if (body.messageKey) {
+        return t(
+          body.messageKey,
+          body.error ?? fallback,
+          body.details
+        );
+      }
+      return body.error ?? fallback;
+    },
+    [t]
+  );
+  const runPreview = useCallback(
+    async (nextFile, nextMode, mapping) => {
+      setBusy(true);
+      setErrorText(null);
+      try {
+        const form = new FormData();
+        form.append("file", nextFile);
+        form.append("mode", nextMode);
+        if (mapping) form.append("mapping", JSON.stringify(mapping));
+        const { ok, result } = await apiCall(previewUrl, {
+          method: "POST",
+          body: form
+        });
+        if (!ok || !result || !("importBatchId" in result)) {
+          setErrorText(
+            describeError(
+              result,
+              t("dynamicTable.import.previewFailed", "The file could not be read")
+            )
+          );
+          return;
+        }
+        setPreview(result);
+        setPhase("preview");
+      } finally {
+        setBusy(false);
+      }
+    },
+    [previewUrl, describeError, t]
+  );
+  const onFileChosen = useCallback(
+    (chosen) => {
+      if (!chosen) return;
+      setFile(chosen);
+      setCommitResult(null);
+      void runPreview(chosen, mode);
+    },
+    [mode, runPreview]
+  );
+  const onModeChange = useCallback(
+    (next) => {
+      setMode(next);
+      if (file) void runPreview(file, next, preview?.mapping);
+    },
+    [file, preview, runPreview]
+  );
+  const onCommit = useCallback(async () => {
+    if (!preview) return;
+    setBusy(true);
+    setErrorText(null);
+    try {
+      const { ok, result } = await apiCall(
+        commitUrl(preview.importBatchId),
+        { method: "POST" }
+      );
+      if (!ok || !result || !("created" in result)) {
+        setErrorText(
+          describeError(
+            result,
+            t("dynamicTable.import.commitFailed", "The import could not be completed")
+          )
+        );
+        return;
+      }
+      setCommitResult(result);
+      setPhase("committed");
+      flash(
+        t("dynamicTable.import.summary", "{created} new, {updated} updated, {skipped} skipped, {failed} with errors", {
+          created: result.created,
+          updated: result.updated,
+          skipped: preview.summary.skipped,
+          failed: result.failed
+        }),
+        "success"
+      );
+      onChanged?.();
+    } finally {
+      setBusy(false);
+    }
+  }, [preview, commitUrl, describeError, onChanged, t]);
+  const onRevert = useCallback(async () => {
+    if (!commitResult) return;
+    setBusy(true);
+    setErrorText(null);
+    try {
+      const { ok, result } = await apiCall(
+        revertUrl(commitResult.importBatchId),
+        { method: "POST" }
+      );
+      if (!ok || !result || !("restored" in result)) {
+        setErrorText(
+          describeError(
+            result,
+            t("dynamicTable.import.revertFailed", "The import could not be undone")
+          )
+        );
+        return;
+      }
+      const reverted = result.restored + result.deleted;
+      flash(t("dynamicTable.import.reverted", "Reverted {count} rows", { count: reverted }), "success");
+      if (result.refused.length) {
+        flash(
+          t(
+            "dynamicTable.import.revertRefused",
+            "{count} rows were changed since the import and were left alone",
+            { count: result.refused.length }
+          ),
+          "error"
+        );
+      }
+      onChanged?.();
+      onClose?.();
+    } finally {
+      setBusy(false);
+    }
+  }, [commitResult, revertUrl, describeError, onChanged, onClose, t]);
+  const reset = useCallback(() => {
+    setPhase("choose");
+    setFile(null);
+    setPreview(null);
+    setCommitResult(null);
+    setErrorText(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", "data-testid": "import-panel", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h3", { className: "text-heading-bold-lg", children: t("dynamicTable.import.title", "Import from file") }) }),
+    errorText ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3",
+        role: "alert",
+        "data-testid": "import-error",
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-4 text-destructive", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-regular-sm text-destructive", children: errorText })
+        ]
+      }
+    ) : null,
+    phase === "choose" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-label-medium-md", id: "import-mode-label", children: t("dynamicTable.import.mode", "What should this file do?") }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex flex-wrap gap-2",
+          role: "group",
+          "aria-labelledby": "import-mode-label",
+          children: modes.map((m) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: m === mode ? "default" : "outline",
+              "aria-pressed": m === mode,
+              onClick: () => setMode(m),
+              "data-testid": `import-mode-${m}`,
+              children: modeLabels[m]
+            },
+            m
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border p-8 hover:bg-accent",
+          onClick: () => fileInputRef.current?.click(),
+          disabled: busy,
+          "data-testid": "import-dropzone",
+          children: [
+            /* @__PURE__ */ jsx(Upload, { className: "size-6 text-muted-foreground", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "text-body-regular-sm text-muted-foreground", children: t("dynamicTable.import.dropFile", "Drop a CSV or Excel file, or browse") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: ACCEPT,
+          className: "sr-only",
+          "data-testid": "import-file-input",
+          onChange: (e) => onFileChosen(e.target.files?.[0] ?? null)
+        }
+      )
+    ] }) : null,
+    phase === "preview" && preview ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(FileSpreadsheet, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "text-body-medium-sm", children: preview.sourceFileName }),
+        /* @__PURE__ */ jsx("span", { className: "text-body-regular-xs text-muted-foreground", children: modeLabels[preview.mode] })
+      ] }),
+      /* @__PURE__ */ jsx("h4", { className: "text-heading-semibold-md", "data-testid": "import-preview-heading", children: t("dynamicTable.import.previewHeading", "Review {count} rows before importing", {
+        count: preview.rows.length
+      }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-regular-sm text-muted-foreground", "data-testid": "import-summary", children: t(
+        "dynamicTable.import.summary",
+        "{created} new, {updated} updated, {skipped} skipped, {failed} with errors",
+        {
+          created: preview.summary.created,
+          updated: preview.summary.updated,
+          skipped: preview.summary.skipped,
+          failed: preview.summary.failed
+        }
+      ) }),
+      preview.mappingIssues.length ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", "data-testid": "import-mapping-issues", children: preview.mappingIssues.map((issue, i) => /* @__PURE__ */ jsx("li", { className: "text-body-regular-xs text-muted-foreground", children: issue.code === "relation_unsupported" ? t(
+        "dynamicTable.import.relationUnsupported",
+        "{column} links to another record and cannot be imported here",
+        { column: issue.label }
+      ) : issue.code === "missing_required" ? t("dynamicTable.import.missingRequired", "{column} is required and is not in this file", {
+        column: issue.label
+      }) : issue.code === "duplicate_field" ? t("dynamicTable.import.duplicateField", "Two columns both map to {column}", {
+        column: issue.label
+      }) : t("dynamicTable.import.unknownField", "{column} does not match any field", {
+        column: issue.label
+      }) }, `${issue.code}-${issue.label}-${i}`)) }) : null,
+      /* @__PURE__ */ jsx(ImportPreviewGrid, { rows: preview.rows, fields: preview.fields, mapping: preview.mapping }),
+      /* @__PURE__ */ jsx("p", { className: "text-body-regular-xs text-muted-foreground", "data-testid": "import-cancel-safe", children: t("dynamicTable.import.cancelSafe", "Nothing has been saved yet") }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: onCommit,
+            disabled: busy || preview.summary.created + preview.summary.updated === 0,
+            "data-testid": "import-commit",
+            children: t("dynamicTable.import.commit", "Import {count} rows", {
+              count: preview.summary.created + preview.summary.updated
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: reset, disabled: busy, "data-testid": "import-cancel", children: t("dynamicTable.import.cancel", "Cancel") }),
+        modes.length > 1 ? modes.filter((m) => m !== preview.mode).map((m) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            onClick: () => onModeChange(m),
+            disabled: busy,
+            "data-testid": `import-switch-mode-${m}`,
+            children: modeLabels[m]
+          },
+          m
+        )) : null
+      ] })
+    ] }) : null,
+    phase === "committed" && commitResult ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-testid": "import-result", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-body-regular-sm", children: t(
+        "dynamicTable.import.summary",
+        "{created} new, {updated} updated, {skipped} skipped, {failed} with errors",
+        {
+          created: commitResult.created,
+          updated: commitResult.updated,
+          skipped: preview?.summary.skipped ?? 0,
+          failed: commitResult.failed
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: onRevert,
+            disabled: busy,
+            "data-testid": "import-revert",
+            children: [
+              /* @__PURE__ */ jsx(Undo2, { className: "size-4", "aria-hidden": true }),
+              t("dynamicTable.import.revert", "Undo this import")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => {
+          reset();
+          onClose?.();
+        }, disabled: busy, children: t("dynamicTable.import.done", "Done") })
+      ] })
+    ] }) : null
+  ] });
+};
+var ImportPanel_default = ImportPanel;
+export {
+  ImportPanel_default as default
+};
+//# sourceMappingURL=ImportPanel.js.map