@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/esm/views/ReportBuilder.native.js

@@ -1,26 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BarChart } from "../charts/BarChart.native.js";
 import { componentColors } from "../componentColors.native.js";
+import { DropdownMenu } from "../DropdownMenu/index.native.js";
+import { useDirection } from "../hooks/useDirection.native.js";
 import { AsyncBoundary, AsyncSkeleton, resolveAsyncStatus } from "../layouts/AsyncBoundary.native.js";
 import { EmptyState } from "../layouts/page.native.js";
-import { formatAbsoluteDate, formatAbsoluteDateTime, formatCurrency, formatNumber, formatPercent, formatTimeOfDay, pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatAbsoluteDate, formatAbsoluteDateTime, formatCurrency, formatNumber, formatPercent, formatTimeOfDay, hairline, keyboardFocusRingProps, pressTargetStyle, useResolvedKnobs, ensureKeyboardModalityTracking, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
-import React, { useState, useMemo, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Card, ScrollView, Text, XStack, YStack } from "tamagui";
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChartBarIcon, DownloadSimpleIcon } from "@phosphor-icons/react";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import React, { useState, useMemo, useCallback, useId, useRef } from "react";
+import { useTranslation } from "../shared/i18n.native.js";
+import { ScrollView, Text, XStack, YStack } from "tamagui";
+var AGGREGATIONS = ["count", "sum", "avg", "min", "max"];
 var numericFieldTypes = /* @__PURE__ */new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
 var reportTextSizeMap = {
   $3: "$1",
   $4: "$2",
   $5: "$3"
 };
-var aggregationLabels = {
-  count: "Count",
-  sum: "Sum",
-  avg: "Average",
-  min: "Min",
-  max: "Max"
-};
 function isNumericFieldType(fieldtype) {
   return numericFieldTypes.has(fieldtype);
 }
@@ -30,9 +28,6 @@ function formatCellValue(value, fieldtype) {
   switch (fieldtype) {
     case "Check":
       return value ? "Yes" : "No";
-    // Report cells take the fixed-precision variants of the house number
-    // registers (LC-12 render channel): money keeps its two digits so a
-    // column stays aligned, floats keep report precision, ints stay whole.
     case "Currency":
       return formatCurrency(value);
     case "Float":
@@ -51,8 +46,6 @@ function formatCellValue(value, fieldtype) {
       return `${formatNumber(Number(value) * 5, {
         precision: 1
       })} / 5`;
-    // Date-class cells take the house absolute register instead of letting
-    // the wire string ("2026-01-15") reach the reader.
     case "Date":
       return formatAbsoluteDate(value);
     case "Datetime":
@@ -63,6 +56,21 @@ function formatCellValue(value, fieldtype) {
       return String(value);
   }
 }
+function compareValues(a, b, fieldtype) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (isNumericFieldType(fieldtype)) {
+    return (Number(a) || 0) - (Number(b) || 0);
+  }
+  if (fieldtype === "Date" || fieldtype === "Datetime" || fieldtype === "Time") {
+    return String(a).localeCompare(String(b));
+  }
+  return String(a).localeCompare(String(b), void 0, {
+    numeric: true,
+    sensitivity: "base"
+  });
+}
 function SimpleBarChart(param) {
   var {
     data,
@@ -72,9 +80,9 @@ function SimpleBarChart(param) {
     knobProps
   } = useResolvedKnobs();
   if (data.length === 0) return null;
-  return /* @__PURE__ */_jsx(Card, {
-    size: knobProps.sizeToken,
-    backgroundColor: componentColors.surface.background,
+  return /* @__PURE__ */_jsx(YStack, {
+    ...knobProps.surface,
+    ...knobProps.containerRadius,
     padding: "$2",
     overflow: "hidden",
     children: /* @__PURE__ */_jsx(BarChart, {
@@ -97,9 +105,11 @@ function ReportBuilder(param) {
     error = null,
     onRetry,
     hasActiveFilters = false,
+    height,
+    minHeight,
     ...stackProps
   } = param;
-  var _reportTextSizeMap_knobProps_sizeToken;
+  var _reportTextSizeMap_knobProps_sizeToken, _ref, _ref1;
   var {
     t
   } = useTranslation();
@@ -107,10 +117,17 @@ function ReportBuilder(param) {
     knobProps
   } = useResolvedKnobs();
   var reportFontSize = (_reportTextSizeMap_knobProps_sizeToken = reportTextSizeMap[knobProps.sizeToken]) !== null && _reportTextSizeMap_knobProps_sizeToken !== void 0 ? _reportTextSizeMap_knobProps_sizeToken : "$2";
+  var nestedPx = knobProps.nestedControl.px;
+  var isRTL = useDirection() === "rtl";
+  var CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   var hasError = resolveAsyncStatus({
     error
   }) === "error";
   var isInitialLoading = !hasError && isLoading && data.length === 0;
+  var bounded = height != null || minHeight != null;
+  var tableId = useId();
+  var gridRef = useRef(null);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
   var [enabledColumnSet, setEnabledColumnSet] = useState(function () {
     return new Set(columns.filter(function (c) {
       return c.enabled;
@@ -123,15 +140,16 @@ function ReportBuilder(param) {
       return enabledColumnSet.has(c.fieldname);
     });
   }, [columns, enabledColumnSet]);
-  var _numericColumns = useMemo(function () {
+  var numericColumns = useMemo(function () {
     return columns.filter(function (c) {
       return isNumericFieldType(c.fieldtype);
     });
   }, [columns]);
-  var _toggleColumn = useCallback(function (fieldname) {
+  var toggleColumn = useCallback(function (fieldname) {
     setEnabledColumnSet(function (prev) {
       var next = new Set(prev);
       if (next.has(fieldname)) {
+        if (next.size <= 1) return prev;
         next.delete(fieldname);
       } else {
         next.add(fieldname);
@@ -142,13 +160,30 @@ function ReportBuilder(param) {
   }, [onColumnsChange]);
   var [internalGroupBy, setInternalGroupBy] = useState(groupByProp !== null && groupByProp !== void 0 ? groupByProp : null);
   var groupBy = groupByProp !== void 0 ? groupByProp : internalGroupBy;
-  var _handleGroupByChange = useCallback(function (config) {
+  var handleGroupByChange = useCallback(function (config) {
     setInternalGroupBy(config);
     onGroupByChange === null || onGroupByChange === void 0 ? void 0 : onGroupByChange(config);
   }, [onGroupByChange]);
   var [collapsedGroups, setCollapsedGroups] = useState(function () {
     return /* @__PURE__ */new Set();
   });
+  var [sort, setSort] = useState(null);
+  var [chartVisible, setChartVisible] = useState(showChart);
+  var [focusedIndex, setFocusedIndex] = useState(-1);
+  var sortedData = useMemo(function () {
+    var _ref2;
+    if (!sort) return data;
+    var col = columns.find(function (c) {
+      return c.fieldname === sort.field;
+    });
+    var fieldtype = (_ref2 = col === null || col === void 0 ? void 0 : col.fieldtype) !== null && _ref2 !== void 0 ? _ref2 : "Data";
+    var copy = data.slice();
+    copy.sort(function (a, b) {
+      var cmp = compareValues(a[sort.field], b[sort.field], fieldtype);
+      return sort.dir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [data, sort, columns]);
   var groupedData = useMemo(function () {
     if (!groupBy) return null;
     var groups = {};
@@ -156,10 +191,10 @@ function ReportBuilder(param) {
       _didIteratorError = false,
       _iteratorError = void 0;
     try {
-      for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      for (var _iterator = sortedData[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
         var row = _step.value;
         var _row_groupBy_field;
-        var key = String((_row_groupBy_field = row[groupBy.field]) !== null && _row_groupBy_field !== void 0 ? _row_groupBy_field : "(empty)");
+        var key = String((_row_groupBy_field = row[groupBy.field]) !== null && _row_groupBy_field !== void 0 ? _row_groupBy_field : t("(empty)"));
         if (!groups[key]) {
           groups[key] = {
             rows: [],
@@ -249,31 +284,101 @@ function ReportBuilder(param) {
       }
     }
     return groups;
-  }, [groupBy, data]);
+  }, [groupBy, sortedData, t]);
+  var groupEntries = useMemo(function () {
+    return groupedData ? Object.entries(groupedData) : [];
+  }, [groupedData]);
   var chartData = useMemo(function () {
-    if (!groupedData) return [];
-    return Object.entries(groupedData).map(function (param2) {
+    return groupEntries.map(function (param2) {
       var [label, group] = param2;
       return {
         label,
         value: group.aggregationValue
       };
     });
-  }, [groupedData]);
-  var [chartVisible, setChartVisible] = useState(false);
+  }, [groupEntries]);
+  var totals = useMemo(function () {
+    return enabledColumns.filter(function (col) {
+      return isNumericFieldType(col.fieldtype);
+    }).map(function (col) {
+      return {
+        col,
+        value: sortedData.reduce(function (acc, row) {
+          return acc + (Number(row[col.fieldname]) || 0);
+        }, 0)
+      };
+    });
+  }, [enabledColumns, sortedData]);
+  var focusItems = useMemo(function () {
+    if (groupBy && groupedData) {
+      var items = [];
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = groupEntries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var [key, group] = _step.value;
+          items.push({
+            type: "group",
+            key
+          });
+          if (!collapsedGroups.has(key)) {
+            group.rows.forEach(function (row, index) {
+              return items.push({
+                type: "row",
+                row,
+                index
+              });
+            });
+          }
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      return items;
+    }
+    return sortedData.map(function (row, index) {
+      return {
+        type: "row",
+        row,
+        index
+      };
+    });
+  }, [groupBy, groupedData, groupEntries, collapsedGroups, sortedData]);
+  var effectiveFocused = focusedIndex >= focusItems.length ? -1 : focusedIndex;
   var toggleGroup = useCallback(function (groupKey) {
     setCollapsedGroups(function (prev) {
       var next = new Set(prev);
-      if (next.has(groupKey)) {
-        next.delete(groupKey);
-      } else {
-        next.add(groupKey);
-      }
+      if (next.has(groupKey)) next.delete(groupKey);else next.add(groupKey);
       return next;
     });
   }, []);
+  var cycleSort = useCallback(function (field) {
+    setSort(function (prev) {
+      if ((prev === null || prev === void 0 ? void 0 : prev.field) !== field) return {
+        field,
+        dir: "asc"
+      };
+      if (prev.dir === "asc") return {
+        field,
+        dir: "desc"
+      };
+      return null;
+    });
+  }, []);
   var handleExport = useCallback(function () {
-    var exportData = data.map(function (row) {
+    var exportData = sortedData.map(function (row) {
       var filtered = {};
       var _iteratorNormalCompletion = true,
         _didIteratorError = false,
@@ -300,118 +405,284 @@ function ReportBuilder(param) {
       return filtered;
     });
     onExport === null || onExport === void 0 ? void 0 : onExport(exportData);
-  }, [data, enabledColumns, onExport]);
+  }, [sortedData, enabledColumns, onExport]);
+  var selectGroupField = useCallback(function (fieldname) {
+    var _ref2;
+    if (!fieldname) {
+      handleGroupByChange(null);
+      return;
+    }
+    handleGroupByChange({
+      field: fieldname,
+      aggregation: (_ref2 = groupBy === null || groupBy === void 0 ? void 0 : groupBy.aggregation) !== null && _ref2 !== void 0 ? _ref2 : "count",
+      aggregationField: groupBy === null || groupBy === void 0 ? void 0 : groupBy.aggregationField
+    });
+  }, [groupBy, handleGroupByChange]);
+  var selectAggregation = useCallback(function (aggregation) {
+    var _groupBy_aggregationField;
+    var _numericColumns_;
+    if (!groupBy) return;
+    handleGroupByChange({
+      ...groupBy,
+      aggregation,
+      aggregationField: aggregation === "count" ? void 0 : (_groupBy_aggregationField = groupBy.aggregationField) !== null && _groupBy_aggregationField !== void 0 ? _groupBy_aggregationField : (_numericColumns_ = numericColumns[0]) === null || _numericColumns_ === void 0 ? void 0 : _numericColumns_.fieldname
+    });
+  }, [groupBy, handleGroupByChange, numericColumns]);
+  var aggregationLabels = {
+    count: t("Count"),
+    sum: t("Sum"),
+    avg: t("Average"),
+    min: t("Min"),
+    max: t("Max")
+  };
+  var handleContainerFocus = useCallback(function () {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex(function (prev) {
+      return prev < 0 ? 0 : prev;
+    });
+  }, []);
+  var scrollToFocused = useCallback(function (index) {
+    var _document_getElementById;
+    (_document_getElementById = document.getElementById(`${tableId}-item-${index}`)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.scrollIntoView({
+      block: "nearest"
+    });
+  }, [tableId]);
+  var hotkeyOpts = {
+    target: gridRef
+  };
+  useHotkey("ArrowDown", function () {
+    setFocusedIndex(function (prev) {
+      var next = prev < 0 ? 0 : Math.min(prev + 1, focusItems.length - 1);
+      scrollToFocused(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey("ArrowUp", function () {
+    setFocusedIndex(function (prev) {
+      var next = prev < 0 ? focusItems.length - 1 : Math.max(prev - 1, 0);
+      scrollToFocused(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey("Home", function () {
+    if (focusItems.length > 0) {
+      setFocusedIndex(0);
+      scrollToFocused(0);
+    }
+  }, hotkeyOpts);
+  useHotkey("End", function () {
+    if (focusItems.length > 0) {
+      var last = focusItems.length - 1;
+      setFocusedIndex(last);
+      scrollToFocused(last);
+    }
+  }, hotkeyOpts);
+  useHotkey("Enter", function () {
+    var item = focusItems[effectiveFocused];
+    if (!item) return;
+    if (item.type === "group") toggleGroup(item.key);else onRowPress === null || onRowPress === void 0 ? void 0 : onRowPress(item.row, item.index);
+  }, hotkeyOpts);
+  useHotkey("ArrowLeft", function () {
+    var item = focusItems[effectiveFocused];
+    if ((item === null || item === void 0 ? void 0 : item.type) === "group" && !collapsedGroups.has(item.key)) toggleGroup(item.key);
+  }, hotkeyOpts);
+  useHotkey("ArrowRight", function () {
+    var item = focusItems[effectiveFocused];
+    if ((item === null || item === void 0 ? void 0 : item.type) === "group" && collapsedGroups.has(item.key)) toggleGroup(item.key);
+  }, hotkeyOpts);
+  var rowRing = function rowRing2(isFocused) {
+    return isFocused && wasKeyboardFocus() ? keyboardFocusRingProps : {
+      outlineWidth: 0
+    };
+  };
+  var cellAlign = function cellAlign2(col) {
+    return isNumericFieldType(col.fieldtype) ? "right" : "left";
+  };
   var renderHeaderRow = function renderHeaderRow2() {
     return /* @__PURE__ */_jsx(XStack, {
-      padding: "$2",
+      role: "row",
+      minHeight: nestedPx,
+      alignItems: "center",
       backgroundColor: componentColors.surface.background,
-      borderBottomWidth: 1,
-      borderBottomColor: "$borderColor",
+      ...hairline.bottom,
       children: enabledColumns.map(function (col) {
-        return /* @__PURE__ */_jsx(Text, {
+        var active = (sort === null || sort === void 0 ? void 0 : sort.field) === col.fieldname;
+        var SortIcon = active && (sort === null || sort === void 0 ? void 0 : sort.dir) === "desc" ? CaretDownIcon : CaretUpIcon;
+        return /* @__PURE__ */_jsxs(XStack, {
+          role: "columnheader",
+          "aria-sort": active ? (sort === null || sort === void 0 ? void 0 : sort.dir) === "asc" ? "ascending" : "descending" : "none",
           flex: 1,
-          fontWeight: "600",
-          fontSize: reportFontSize,
-          color: "$color",
+          minWidth: 0,
+          minHeight: nestedPx,
+          hitSlop: knobProps.nestedControl.hitSlop,
+          alignItems: "center",
+          justifyContent: cellAlign(col) === "right" ? "flex-end" : "flex-start",
+          gap: "$1",
           paddingHorizontal: "$2",
-          numberOfLines: 1,
-          children: col.label
+          cursor: "pointer",
+          tabIndex: -1,
+          onPress: function onPress() {
+            return cycleSort(col.fieldname);
+          },
+          hoverStyle: {
+            backgroundColor: componentColors.interactive.background
+          },
+          children: [/* @__PURE__ */_jsx(Text, {
+            fontWeight: "600",
+            fontSize: reportFontSize,
+            color: "$color",
+            numberOfLines: 1,
+            textAlign: cellAlign(col),
+            children: col.label
+          }), /* @__PURE__ */_jsx(SortIcon, {
+            size: 10,
+            weight: "bold",
+            color: active ? componentColors.text.primary : componentColors.text.muted,
+            opacity: active ? 1 : 0.35
+          })]
         }, col.fieldname);
       })
     });
   };
-  var renderDataRow = function renderDataRow2(row, index) {
-    var isGrouped = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+  var renderDataRow = function renderDataRow2(row, index, focusIdx, isLast) {
+    var isGrouped = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false;
     var _row_name;
+    var isFocused = effectiveFocused === focusIdx;
     return /* @__PURE__ */_jsx(XStack, {
-      padding: "$2",
-      borderBottomWidth: 1,
-      borderBottomColor: componentColors.divider,
-      backgroundColor: index % 2 === 0 ? "$background" : {
-        backgroundColor: componentColors.surface.background
-      }.backgroundColor,
+      id: `${tableId}-item-${focusIdx}`,
+      role: "row",
+      "aria-selected": isFocused,
+      tabIndex: -1,
+      ...(isFocused ? {
+        "data-focused": true
+      } : {}),
+      minHeight: nestedPx,
+      alignItems: "center",
+      backgroundColor: isFocused ? "$accentBackground" : "transparent",
+      ...rowRing(isFocused),
       hoverStyle: {
-        backgroundColor: componentColors.surface.background
+        backgroundColor: isFocused ? "$accentBackground" : componentColors.interactive.background
       },
+      ...(isLast ? {} : hairline.bottom),
       ...(isGrouped ? {
         paddingInlineStart: knobProps.panelPadding.padding
       } : {}),
       ...(onRowPress ? {
         cursor: "pointer",
+        hitSlop: knobProps.nestedControl.hitSlop,
         onPress: function onPress() {
-          return onRowPress(row, index);
+          var _gridRef_current;
+          setFocusedIndex(focusIdx);
+          (_gridRef_current = gridRef.current) === null || _gridRef_current === void 0 ? void 0 : _gridRef_current.focus();
+          onRowPress(row, index);
         }
       } : {}),
       children: enabledColumns.map(function (col) {
         return /* @__PURE__ */_jsx(Text, {
+          role: "cell",
           flex: 1,
+          minWidth: 0,
           fontSize: reportFontSize,
           color: "$color",
           paddingHorizontal: "$2",
           numberOfLines: 1,
+          textAlign: cellAlign(col),
           children: formatCellValue(row[col.fieldname], col.fieldtype)
         }, col.fieldname);
       })
-    }, `row-${String((_row_name = row.name) !== null && _row_name !== void 0 ? _row_name : index)}`);
+    }, `${tableId}-row-${String((_row_name = row.name) !== null && _row_name !== void 0 ? _row_name : index)}`);
   };
   var renderGroupedRows = function renderGroupedRows2() {
-    if (!groupedData || !groupBy) return null;
-    var groupByCol = columns.find(function (c) {
+    if (!groupBy) return null;
+    var groupByCol2 = columns.find(function (c) {
       return c.fieldname === groupBy.field;
     });
     var aggLabel = aggregationLabels[groupBy.aggregation];
     var aggFieldCol = groupBy.aggregationField ? columns.find(function (c) {
       return c.fieldname === groupBy.aggregationField;
     }) : null;
-    return Object.entries(groupedData).map(function (param2) {
+    var cursor = 0;
+    return groupEntries.map(function (param2, groupIndex) {
       var [groupKey, group] = param2;
-      var _ref, _ref1, _ref2;
+      var _ref2, _ref12, _ref22;
       var isCollapsed = collapsedGroups.has(groupKey);
+      var headerFocus = cursor;
+      cursor += 1;
       var aggDisplay = groupBy.aggregation === "count" ? `${aggLabel}: ${formatNumber(group.aggregationValue, {
         maximumFractionDigits: 0
-      })}` : `${aggLabel}(${(_ref = (_ref1 = aggFieldCol === null || aggFieldCol === void 0 ? void 0 : aggFieldCol.label) !== null && _ref1 !== void 0 ? _ref1 : groupBy.aggregationField) !== null && _ref !== void 0 ? _ref : ""}): ${formatNumber(group.aggregationValue)}`;
-      return /* @__PURE__ */_jsxs(YStack, {
-        children: [/* @__PURE__ */_jsxs(XStack, {
-          padding: "$2",
-          paddingHorizontal: knobProps.panelPadding.padding,
-          backgroundColor: componentColors.interactive.background,
-          borderBottomWidth: 1,
-          borderBottomColor: "$borderColor",
-          alignItems: "center",
-          gap: "$2",
-          cursor: "pointer",
-          onPress: function onPress() {
-            return toggleGroup(groupKey);
-          },
-          hoverStyle: {
-            backgroundColor: componentColors.interactive.hover
-          },
-          children: [/* @__PURE__ */_jsx(Text, {
-            fontSize: reportFontSize,
-            children: isCollapsed ? "\u25B6" : "\u25BC"
-          }), /* @__PURE__ */_jsxs(Text, {
-            fontWeight: "600",
-            fontSize: reportFontSize,
-            color: "$accentColor",
-            children: [(_ref2 = groupByCol === null || groupByCol === void 0 ? void 0 : groupByCol.label) !== null && _ref2 !== void 0 ? _ref2 : groupBy.field, ": ", groupKey]
-          }), /* @__PURE__ */_jsxs(Text, {
-            fontSize: reportFontSize,
-            color: componentColors.text.muted,
-            children: ["(", group.rows.length, " ", group.rows.length === 1 ? "record" : "records", ")"]
-          }), /* @__PURE__ */_jsx(XStack, {
-            flex: 1
-          }), /* @__PURE__ */_jsx(Text, {
-            fontWeight: "500",
-            fontSize: reportFontSize,
-            color: "$accentColor",
-            children: aggDisplay
-          })]
-        }), !isCollapsed && group.rows.map(function (row, index) {
-          return renderDataRow(row, index, true);
+      })}` : `${aggLabel}(${(_ref2 = (_ref12 = aggFieldCol === null || aggFieldCol === void 0 ? void 0 : aggFieldCol.label) !== null && _ref12 !== void 0 ? _ref12 : groupBy.aggregationField) !== null && _ref2 !== void 0 ? _ref2 : ""}): ${formatNumber(group.aggregationValue)}`;
+      var isFocused = effectiveFocused === headerFocus;
+      var header = /* @__PURE__ */_jsxs(XStack, {
+        id: `${tableId}-item-${headerFocus}`,
+        role: "row",
+        "aria-expanded": !isCollapsed,
+        "aria-selected": isFocused,
+        tabIndex: -1,
+        ...(isFocused ? {
+          "data-focused": true
+        } : {}),
+        minHeight: nestedPx,
+        hitSlop: knobProps.nestedControl.hitSlop,
+        paddingHorizontal: "$2",
+        backgroundColor: isFocused ? "$accentBackground" : componentColors.interactive.background,
+        ...(groupIndex === groupEntries.length - 1 && isCollapsed ? {} : hairline.bottom),
+        alignItems: "center",
+        gap: "$2",
+        cursor: "pointer",
+        ...rowRing(isFocused),
+        onPress: function onPress() {
+          var _gridRef_current;
+          setFocusedIndex(headerFocus);
+          (_gridRef_current = gridRef.current) === null || _gridRef_current === void 0 ? void 0 : _gridRef_current.focus();
+          toggleGroup(groupKey);
+        },
+        hoverStyle: {
+          backgroundColor: isFocused ? "$accentBackground" : componentColors.interactive.hover
+        },
+        children: [isCollapsed ? /* @__PURE__ */_jsx(CollapsedCaretIcon, {
+          size: 12,
+          weight: "bold"
+        }) : /* @__PURE__ */_jsx(CaretDownIcon, {
+          size: 12,
+          weight: "bold"
+        }), /* @__PURE__ */_jsxs(Text, {
+          fontWeight: "600",
+          fontSize: reportFontSize,
+          color: "$accentColor",
+          numberOfLines: 1,
+          children: [(_ref22 = groupByCol2 === null || groupByCol2 === void 0 ? void 0 : groupByCol2.label) !== null && _ref22 !== void 0 ? _ref22 : groupBy.field, ": ", groupKey]
+        }), /* @__PURE__ */_jsxs(Text, {
+          fontSize: reportFontSize,
+          color: componentColors.text.muted,
+          children: ["(", group.rows.length, " ", group.rows.length === 1 ? t("record") : t("records"), ")"]
+        }), /* @__PURE__ */_jsx(XStack, {
+          flex: 1
+        }), /* @__PURE__ */_jsx(Text, {
+          fontWeight: "500",
+          fontSize: reportFontSize,
+          color: "$accentColor",
+          numberOfLines: 1,
+          children: aggDisplay
         })]
+      }, `group-${groupKey}`);
+      var rows = isCollapsed ? null : group.rows.map(function (row, index) {
+        var focusIdx = cursor;
+        cursor += 1;
+        var lastInTable = groupIndex === groupEntries.length - 1 && index === group.rows.length - 1;
+        return renderDataRow(row, index, focusIdx, lastInTable, true);
+      });
+      return /* @__PURE__ */_jsxs(YStack, {
+        children: [header, rows]
       }, groupKey);
     });
   };
+  var groupByCol = groupBy ? columns.find(function (c) {
+    return c.fieldname === groupBy.field;
+  }) : void 0;
+  var aggregationFieldCol = (groupBy === null || groupBy === void 0 ? void 0 : groupBy.aggregationField) ? columns.find(function (c) {
+    return c.fieldname === groupBy.aggregationField;
+  }) : void 0;
+  var chartAvailable = Boolean(groupedData && chartData.length > 0);
   if (hasError) {
     return /* @__PURE__ */_jsx(AsyncBoundary, {
       error,
@@ -424,78 +695,230 @@ function ReportBuilder(param) {
     });
   }
   return /* @__PURE__ */_jsxs(YStack, {
+    testID: "report-builder",
     ...knobProps.gap,
+    height,
+    minHeight,
     ...stackProps,
-    children: [/* Toolbar */
-    /* @__PURE__ */_jsx(Card, {
-      size: knobProps.sizeToken,
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      children: /* @__PURE__ */_jsxs(XStack, {
-        ...knobProps.panelPadding,
-        ...knobProps.gap,
-        alignItems: "center",
-        flexWrap: "wrap",
-        children: [/* Column toggle info */
-        /* @__PURE__ */_jsxs(Text, {
-          fontSize: reportFontSize,
-          color: componentColors.text.muted,
-          children: [enabledColumns.length, " / ", columns.length, " columns"]
-        }), /* @__PURE__ */_jsx(XStack, {
-          flex: 1
-        }), /* Chart toggle */
-        showChart && groupedData && /* @__PURE__ */_jsx(Button, {
-          size: knobProps.sizeToken,
-          onPress: function onPress() {
-            return setChartVisible(function (v) {
-              return !v;
-            });
-          },
-          theme: chartVisible ? "active" : void 0,
-          ...pressTargetStyle(),
-          children: "Chart"
-        }), /* Export */
-        onExport && /* @__PURE__ */_jsx(Button, {
-          size: knobProps.sizeToken,
-          onPress: handleExport,
-          ...pressTargetStyle(),
-          children: "Export"
+    children: [/* @__PURE__ */_jsxs(XStack, {
+      ...knobProps.surface,
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding,
+      ...knobProps.gap,
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */_jsxs(DropdownMenu, {
+        children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */_jsx(Button, {
+            size: knobProps.sizeToken,
+            chromeless: true,
+            ...pressTargetStyle(),
+            children: t("Columns ({{enabled}}/{{total}})", {
+              enabled: enabledColumns.length,
+              total: columns.length
+            })
+          })
+        }), /* @__PURE__ */_jsxs(DropdownMenu.Content, {
+          maxHeight: 360,
+          children: [/* @__PURE__ */_jsx(DropdownMenu.Label, {
+            children: t("Report columns")
+          }), columns.map(function (column) {
+            var checked = enabledColumnSet.has(column.fieldname);
+            var lastEnabled = checked && enabledColumnSet.size === 1;
+            return /* @__PURE__ */_jsx(DropdownMenu.CheckboxItem, {
+              checked,
+              disabled: lastEnabled,
+              disabledReason: lastEnabled ? t("At least one column stays visible") : void 0,
+              onCheckedChange: function onCheckedChange() {
+                return toggleColumn(column.fieldname);
+              },
+              children: column.label
+            }, column.fieldname);
+          })]
         })]
-      })
-    }), /* Chart area */
-    chartVisible && groupedData && chartData.length > 0 && /* @__PURE__ */_jsx(YStack, {
+      }), /* @__PURE__ */_jsxs(DropdownMenu, {
+        children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */_jsx(Button, {
+            size: knobProps.sizeToken,
+            chromeless: true,
+            ...pressTargetStyle(),
+            children: groupByCol ? t("Group by: {{field}}", {
+              field: groupByCol.label
+            }) : t("Group by")
+          })
+        }), /* @__PURE__ */_jsxs(DropdownMenu.Content, {
+          maxHeight: 360,
+          children: [/* @__PURE__ */_jsx(DropdownMenu.CheckboxItem, {
+            checked: !groupBy,
+            closeOnSelect: true,
+            onCheckedChange: function onCheckedChange() {
+              return selectGroupField(null);
+            },
+            children: t("No grouping")
+          }), /* @__PURE__ */_jsx(DropdownMenu.Separator, {}), columns.map(function (column) {
+            return /* @__PURE__ */_jsx(DropdownMenu.CheckboxItem, {
+              checked: (groupBy === null || groupBy === void 0 ? void 0 : groupBy.field) === column.fieldname,
+              closeOnSelect: true,
+              onCheckedChange: function onCheckedChange() {
+                return selectGroupField(column.fieldname);
+              },
+              children: column.label
+            }, column.fieldname);
+          })]
+        })]
+      }), groupBy && /* @__PURE__ */_jsxs(DropdownMenu, {
+        children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */_jsx(Button, {
+            size: knobProps.sizeToken,
+            chromeless: true,
+            ...pressTargetStyle(),
+            children: aggregationLabels[groupBy.aggregation]
+          })
+        }), /* @__PURE__ */_jsx(DropdownMenu.Content, {
+          children: AGGREGATIONS.map(function (aggregation) {
+            var needsNumeric = aggregation !== "count" && numericColumns.length === 0;
+            return /* @__PURE__ */_jsx(DropdownMenu.CheckboxItem, {
+              checked: groupBy.aggregation === aggregation,
+              closeOnSelect: true,
+              disabled: needsNumeric,
+              disabledReason: needsNumeric ? t("No numeric fields to aggregate") : void 0,
+              onCheckedChange: function onCheckedChange() {
+                return selectAggregation(aggregation);
+              },
+              children: aggregationLabels[aggregation]
+            }, aggregation);
+          })
+        })]
+      }), groupBy && groupBy.aggregation !== "count" && numericColumns.length > 0 && /* @__PURE__ */_jsxs(DropdownMenu, {
+        children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */_jsx(Button, {
+            size: knobProps.sizeToken,
+            chromeless: true,
+            ...pressTargetStyle(),
+            children: t("of {{field}}", {
+              field: (_ref = (_ref1 = aggregationFieldCol === null || aggregationFieldCol === void 0 ? void 0 : aggregationFieldCol.label) !== null && _ref1 !== void 0 ? _ref1 : groupBy.aggregationField) !== null && _ref !== void 0 ? _ref : t("field")
+            })
+          })
+        }), /* @__PURE__ */_jsx(DropdownMenu.Content, {
+          maxHeight: 360,
+          children: numericColumns.map(function (column) {
+            return /* @__PURE__ */_jsx(DropdownMenu.CheckboxItem, {
+              checked: groupBy.aggregationField === column.fieldname,
+              closeOnSelect: true,
+              onCheckedChange: function onCheckedChange() {
+                return handleGroupByChange({
+                  ...groupBy,
+                  aggregationField: column.fieldname
+                });
+              },
+              children: column.label
+            }, column.fieldname);
+          })
+        })]
+      }), /* @__PURE__ */_jsx(XStack, {
+        flex: 1
+      }), chartAvailable && /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        chromeless: true,
+        icon: ChartBarIcon,
+        "aria-pressed": chartVisible,
+        onPress: function onPress() {
+          return setChartVisible(function (v) {
+            return !v;
+          });
+        },
+        theme: chartVisible ? "active" : void 0,
+        ...pressTargetStyle(),
+        children: t("Chart")
+      }), onExport && /* @__PURE__ */_jsx(Button, {
+        size: knobProps.sizeToken,
+        chromeless: true,
+        icon: DownloadSimpleIcon,
+        onPress: handleExport,
+        ...pressTargetStyle(),
+        children: t("Export")
+      })]
+    }), chartVisible && chartAvailable && /* @__PURE__ */_jsx(YStack, {
       ...knobProps.gap,
       children: /* @__PURE__ */_jsx(SimpleBarChart, {
         data: chartData
       })
-    }), /* Report table */
-    /* @__PURE__ */_jsx(Card, {
-      size: knobProps.sizeToken,
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      flex: 1,
-      children: isInitialLoading ? (/* Skeleton twin inside the live table card (LC-20 / DG-ST-02) */
-      /* @__PURE__ */_jsx(AsyncSkeleton, {
+    }), /* @__PURE__ */_jsx(YStack, {
+      ...knobProps.surface,
+      ...knobProps.containerRadius,
+      overflow: "hidden",
+      flex: bounded ? 1 : void 0,
+      minHeight: bounded ? 0 : void 0,
+      children: isInitialLoading ? /* @__PURE__ */_jsx(AsyncSkeleton, {
         layout: "table",
         padding: "$2"
-      })) : /* @__PURE__ */_jsx(ScrollView, {
-        flex: 1,
-        children: /* @__PURE__ */_jsxs(YStack, {
-          minWidth: "100%",
-          children: [renderHeaderRow(), groupBy && groupedData ? renderGroupedRows() : data.map(function (row, index) {
-            return renderDataRow(row, index);
-          }),
-          /* Zero rows: distinguish "filters matched nothing" from a truly
-          empty dataset (DG-TBL-06 / Axiom 6: empty ≠ no-results) */
-          data.length === 0 && /* @__PURE__ */_jsx(EmptyState, {
-            compact: true,
-            "aria-live": "polite",
-            "data-async-state": hasActiveFilters ? "no-results" : "empty",
-            title: hasActiveFilters ? t("No results found") : t("No data to display")
+      }) : /* @__PURE__ */_jsxs(YStack, {
+        ref: gridRef,
+        flex: bounded ? 1 : void 0,
+        minHeight: bounded ? 0 : void 0,
+        role: "grid",
+        "aria-rowcount": sortedData.length,
+        "aria-colcount": enabledColumns.length,
+        "aria-label": t("Report"),
+        "aria-activedescendant": effectiveFocused >= 0 ? `${tableId}-item-${effectiveFocused}` : void 0,
+        tabIndex: 0,
+        outlineWidth: 0,
+        onFocus: handleContainerFocus,
+        children: [/* @__PURE__ */_jsx(ScrollView, {
+          flex: bounded ? 1 : void 0,
+          children: /* @__PURE__ */_jsxs(YStack, {
+            minWidth: "100%",
+            children: [renderHeaderRow(), groupBy && groupedData ? renderGroupedRows() : sortedData.map(function (row, index) {
+              return renderDataRow(row, index, index, index === sortedData.length - 1);
+            }), data.length === 0 && /* @__PURE__ */_jsx(EmptyState, {
+              compact: true,
+              "aria-live": "polite",
+              "data-async-state": hasActiveFilters ? "no-results" : "empty",
+              title: hasActiveFilters ? t("No results found") : t("No data to display")
+            })]
+          })
+        }), data.length > 0 && /* @__PURE__ */_jsxs(XStack, {
+          role: "row",
+          minHeight: nestedPx,
+          alignItems: "center",
+          paddingHorizontal: "$2",
+          ...hairline.top,
+          backgroundColor: componentColors.surface.background,
+          gap: "$3",
+          flexWrap: "wrap",
+          children: [/* @__PURE__ */_jsx(Text, {
+            fontSize: reportFontSize,
+            fontWeight: "600",
+            color: componentColors.text.muted,
+            children: t("Totals")
+          }), totals.map(function (param2) {
+            var {
+              col,
+              value
+            } = param2;
+            return /* @__PURE__ */_jsxs(Text, {
+              fontSize: reportFontSize,
+              color: "$color",
+              children: [col.label, ":", " ", /* @__PURE__ */_jsx(Text, {
+                fontSize: reportFontSize,
+                fontWeight: "600",
+                children: formatCellValue(value, col.fieldtype)
+              })]
+            }, col.fieldname);
+          }), /* @__PURE__ */_jsx(XStack, {
+            flex: 1
+          }), /* @__PURE__ */_jsx(Text, {
+            fontSize: reportFontSize,
+            color: componentColors.text.muted,
+            children: t("{{count}} row(s)", {
+              count: data.length
+            })
           })]
-        })
+        })]
       })
     })]
   });