@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/esm/views/ReportBuilder.mjs

@@ -1,26 +1,24 @@
 import { BarChart } from "../charts/BarChart.mjs";
 import { componentColors } from "../componentColors.mjs";
+import { DropdownMenu } from "../DropdownMenu/index.mjs";
+import { useDirection } from "../hooks/useDirection.mjs";
 import { AsyncBoundary, AsyncSkeleton, resolveAsyncStatus } from "../layouts/AsyncBoundary.mjs";
 import { EmptyState } from "../layouts/page.mjs";
-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 { 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 { useState, useMemo, useCallback, useId, useRef } from "react";
+import { useTranslation } from "../shared/i18n.mjs";
+import { ScrollView, Text, XStack, YStack } from "tamagui";
 import { jsx, jsxs } from "react/jsx-runtime";
+const AGGREGATIONS = ["count", "sum", "avg", "min", "max"];
 const numericFieldTypes = /* @__PURE__ */new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
 const reportTextSizeMap = {
   $3: "$1",
   $4: "$2",
   $5: "$3"
 };
-const 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({
   data,
   height = 200
@@ -71,11 +79,9 @@ function SimpleBarChart({
     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,6 +103,8 @@ function ReportBuilder({
   error = null,
   onRetry,
   hasActiveFilters = false,
+  height,
+  minHeight,
   ...stackProps
 }) {
   const {
@@ -106,17 +114,25 @@ function ReportBuilder({
     knobProps
   } = useResolvedKnobs();
   const reportFontSize = reportTextSizeMap[knobProps.sizeToken] ?? "$2";
+  const nestedPx = knobProps.nestedControl.px;
+  const isRTL = useDirection() === "rtl";
+  const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   const hasError = resolveAsyncStatus({
     error
   }) === "error";
   const isInitialLoading = !hasError && isLoading && data.length === 0;
+  const bounded = height != null || minHeight != null;
+  const tableId = useId();
+  const gridRef = useRef(null);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
   const [enabledColumnSet, setEnabledColumnSet] = useState(() => new Set(columns.filter(c => c.enabled).map(c => c.fieldname)));
   const enabledColumns = useMemo(() => columns.filter(c => enabledColumnSet.has(c.fieldname)), [columns, enabledColumnSet]);
-  const _numericColumns = useMemo(() => columns.filter(c => isNumericFieldType(c.fieldtype)), [columns]);
-  const _toggleColumn = useCallback(fieldname => {
+  const numericColumns = useMemo(() => columns.filter(c => isNumericFieldType(c.fieldtype)), [columns]);
+  const toggleColumn = useCallback(fieldname => {
     setEnabledColumnSet(prev => {
       const next = new Set(prev);
       if (next.has(fieldname)) {
+        if (next.size <= 1) return prev;
         next.delete(fieldname);
       } else {
         next.add(fieldname);
@@ -127,16 +143,30 @@ function ReportBuilder({
   }, [onColumnsChange]);
   const [internalGroupBy, setInternalGroupBy] = useState(groupByProp ?? null);
   const groupBy = groupByProp !== void 0 ? groupByProp : internalGroupBy;
-  const _handleGroupByChange = useCallback(config => {
+  const handleGroupByChange = useCallback(config => {
     setInternalGroupBy(config);
     onGroupByChange?.(config);
   }, [onGroupByChange]);
   const [collapsedGroups, setCollapsedGroups] = useState(() => /* @__PURE__ */new Set());
+  const [sort, setSort] = useState(null);
+  const [chartVisible, setChartVisible] = useState(showChart);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const sortedData = useMemo(() => {
+    if (!sort) return data;
+    const col = columns.find(c => c.fieldname === sort.field);
+    const fieldtype = col?.fieldtype ?? "Data";
+    const copy = data.slice();
+    copy.sort((a, b) => {
+      const cmp = compareValues(a[sort.field], b[sort.field], fieldtype);
+      return sort.dir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [data, sort, columns]);
   const groupedData = useMemo(() => {
     if (!groupBy) return null;
     const groups = {};
-    for (const row of data) {
-      const key = String(row[groupBy.field] ?? "(empty)");
+    for (const row of sortedData) {
+      const key = String(row[groupBy.field] ?? t("(empty)"));
       if (!groups[key]) {
         groups[key] = {
           rows: [],
@@ -184,28 +214,65 @@ function ReportBuilder({
       }
     }
     return groups;
-  }, [groupBy, data]);
-  const chartData = useMemo(() => {
-    if (!groupedData) return [];
-    return Object.entries(groupedData).map(([label, group]) => ({
-      label,
-      value: group.aggregationValue
+  }, [groupBy, sortedData, t]);
+  const groupEntries = useMemo(() => groupedData ? Object.entries(groupedData) : [], [groupedData]);
+  const chartData = useMemo(() => groupEntries.map(([label, group]) => ({
+    label,
+    value: group.aggregationValue
+  })), [groupEntries]);
+  const totals = useMemo(() => {
+    return enabledColumns.filter(col => isNumericFieldType(col.fieldtype)).map(col => ({
+      col,
+      value: sortedData.reduce((acc, row) => acc + (Number(row[col.fieldname]) || 0), 0)
     }));
-  }, [groupedData]);
-  const [chartVisible, setChartVisible] = useState(false);
+  }, [enabledColumns, sortedData]);
+  const focusItems = useMemo(() => {
+    if (groupBy && groupedData) {
+      const items = [];
+      for (const [key, group] of groupEntries) {
+        items.push({
+          type: "group",
+          key
+        });
+        if (!collapsedGroups.has(key)) {
+          group.rows.forEach((row, index) => items.push({
+            type: "row",
+            row,
+            index
+          }));
+        }
+      }
+      return items;
+    }
+    return sortedData.map((row, index) => ({
+      type: "row",
+      row,
+      index
+    }));
+  }, [groupBy, groupedData, groupEntries, collapsedGroups, sortedData]);
+  const effectiveFocused = focusedIndex >= focusItems.length ? -1 : focusedIndex;
   const toggleGroup = useCallback(groupKey => {
     setCollapsedGroups(prev => {
       const 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;
     });
   }, []);
+  const cycleSort = useCallback(field => {
+    setSort(prev => {
+      if (prev?.field !== field) return {
+        field,
+        dir: "asc"
+      };
+      if (prev.dir === "asc") return {
+        field,
+        dir: "desc"
+      };
+      return null;
+    });
+  }, []);
   const handleExport = useCallback(() => {
-    const exportData = data.map(row => {
+    const exportData = sortedData.map(row => {
       const filtered = {};
       for (const col of enabledColumns) {
         filtered[col.fieldname] = row[col.fieldname];
@@ -213,98 +280,254 @@ function ReportBuilder({
       return filtered;
     });
     onExport?.(exportData);
-  }, [data, enabledColumns, onExport]);
+  }, [sortedData, enabledColumns, onExport]);
+  const selectGroupField = useCallback(fieldname => {
+    if (!fieldname) {
+      handleGroupByChange(null);
+      return;
+    }
+    handleGroupByChange({
+      field: fieldname,
+      aggregation: groupBy?.aggregation ?? "count",
+      aggregationField: groupBy?.aggregationField
+    });
+  }, [groupBy, handleGroupByChange]);
+  const selectAggregation = useCallback(aggregation => {
+    if (!groupBy) return;
+    handleGroupByChange({
+      ...groupBy,
+      aggregation,
+      aggregationField: aggregation === "count" ? void 0 : groupBy.aggregationField ?? numericColumns[0]?.fieldname
+    });
+  }, [groupBy, handleGroupByChange, numericColumns]);
+  const aggregationLabels = {
+    count: t("Count"),
+    sum: t("Sum"),
+    avg: t("Average"),
+    min: t("Min"),
+    max: t("Max")
+  };
+  const handleContainerFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedIndex(prev => prev < 0 ? 0 : prev);
+  }, []);
+  const scrollToFocused = useCallback(index => {
+    document.getElementById(`${tableId}-item-${index}`)?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [tableId]);
+  const hotkeyOpts = {
+    target: gridRef
+  };
+  useHotkey("ArrowDown", () => {
+    setFocusedIndex(prev => {
+      const next = prev < 0 ? 0 : Math.min(prev + 1, focusItems.length - 1);
+      scrollToFocused(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey("ArrowUp", () => {
+    setFocusedIndex(prev => {
+      const next = prev < 0 ? focusItems.length - 1 : Math.max(prev - 1, 0);
+      scrollToFocused(next);
+      return next;
+    });
+  }, hotkeyOpts);
+  useHotkey("Home", () => {
+    if (focusItems.length > 0) {
+      setFocusedIndex(0);
+      scrollToFocused(0);
+    }
+  }, hotkeyOpts);
+  useHotkey("End", () => {
+    if (focusItems.length > 0) {
+      const last = focusItems.length - 1;
+      setFocusedIndex(last);
+      scrollToFocused(last);
+    }
+  }, hotkeyOpts);
+  useHotkey("Enter", () => {
+    const item = focusItems[effectiveFocused];
+    if (!item) return;
+    if (item.type === "group") toggleGroup(item.key);else onRowPress?.(item.row, item.index);
+  }, hotkeyOpts);
+  useHotkey("ArrowLeft", () => {
+    const item = focusItems[effectiveFocused];
+    if (item?.type === "group" && !collapsedGroups.has(item.key)) toggleGroup(item.key);
+  }, hotkeyOpts);
+  useHotkey("ArrowRight", () => {
+    const item = focusItems[effectiveFocused];
+    if (item?.type === "group" && collapsedGroups.has(item.key)) toggleGroup(item.key);
+  }, hotkeyOpts);
+  const rowRing = isFocused => isFocused && wasKeyboardFocus() ? keyboardFocusRingProps : {
+    outlineWidth: 0
+  };
+  const cellAlign = col => isNumericFieldType(col.fieldtype) ? "right" : "left";
   const renderHeaderRow = () => /* @__PURE__ */jsx(XStack, {
-    padding: "$2",
-    ...{
-      backgroundColor: componentColors.surface.background
-    },
-    borderBottomWidth: 1,
-    borderBottomColor: "$borderColor",
-    children: enabledColumns.map(col => /* @__PURE__ */jsx(Text, {
-      flex: 1,
-      fontWeight: "600",
-      fontSize: reportFontSize,
-      color: "$color",
-      paddingHorizontal: "$2",
-      numberOfLines: 1,
-      children: col.label
-    }, col.fieldname))
+    role: "row",
+    minHeight: nestedPx,
+    alignItems: "center",
+    backgroundColor: componentColors.surface.background,
+    ...hairline.bottom,
+    children: enabledColumns.map(col => {
+      const active = sort?.field === col.fieldname;
+      const SortIcon = active && sort?.dir === "desc" ? CaretDownIcon : CaretUpIcon;
+      return /* @__PURE__ */jsxs(XStack, {
+        role: "columnheader",
+        "aria-sort": active ? sort?.dir === "asc" ? "ascending" : "descending" : "none",
+        flex: 1,
+        minWidth: 0,
+        minHeight: nestedPx,
+        hitSlop: knobProps.nestedControl.hitSlop,
+        alignItems: "center",
+        justifyContent: cellAlign(col) === "right" ? "flex-end" : "flex-start",
+        gap: "$1",
+        paddingHorizontal: "$2",
+        cursor: "pointer",
+        tabIndex: -1,
+        onPress: () => 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);
+    })
   });
-  const renderDataRow = (row, index, isGrouped = false) => /* @__PURE__ */jsx(XStack, {
-    padding: "$2",
-    borderBottomWidth: 1,
-    borderBottomColor: componentColors.divider,
-    backgroundColor: index % 2 === 0 ? "$background" : {
-      backgroundColor: componentColors.surface.background
-    }.backgroundColor,
-    hoverStyle: {
-      backgroundColor: componentColors.surface.background
-    },
-    ...(isGrouped ? {
-      paddingInlineStart: knobProps.panelPadding.padding
-    } : {}),
-    ...(onRowPress ? {
-      cursor: "pointer",
-      onPress: () => onRowPress(row, index)
-    } : {}),
-    children: enabledColumns.map(col => /* @__PURE__ */jsx(Text, {
-      flex: 1,
-      fontSize: reportFontSize,
-      color: "$color",
-      paddingHorizontal: "$2",
-      numberOfLines: 1,
-      children: formatCellValue(row[col.fieldname], col.fieldtype)
-    }, col.fieldname))
-  }, `row-${String(row.name ?? index)}`);
+  const renderDataRow = (row, index, focusIdx, isLast, isGrouped = false) => {
+    const isFocused = effectiveFocused === focusIdx;
+    return /* @__PURE__ */jsx(XStack, {
+      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: isFocused ? "$accentBackground" : componentColors.interactive.background
+      },
+      ...(isLast ? {} : hairline.bottom),
+      ...(isGrouped ? {
+        paddingInlineStart: knobProps.panelPadding.padding
+      } : {}),
+      ...(onRowPress ? {
+        cursor: "pointer",
+        hitSlop: knobProps.nestedControl.hitSlop,
+        onPress: () => {
+          setFocusedIndex(focusIdx);
+          gridRef.current?.focus();
+          onRowPress(row, index);
+        }
+      } : {}),
+      children: enabledColumns.map(col => /* @__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))
+    }, `${tableId}-row-${String(row.name ?? index)}`);
+  };
   const renderGroupedRows = () => {
-    if (!groupedData || !groupBy) return null;
-    const groupByCol = columns.find(c => c.fieldname === groupBy.field);
+    if (!groupBy) return null;
+    const groupByCol2 = columns.find(c => c.fieldname === groupBy.field);
     const aggLabel = aggregationLabels[groupBy.aggregation];
     const aggFieldCol = groupBy.aggregationField ? columns.find(c => c.fieldname === groupBy.aggregationField) : null;
-    return Object.entries(groupedData).map(([groupKey, group]) => {
+    let cursor = 0;
+    return groupEntries.map(([groupKey, group], groupIndex) => {
       const isCollapsed = collapsedGroups.has(groupKey);
+      const headerFocus = cursor;
+      cursor += 1;
       const aggDisplay = groupBy.aggregation === "count" ? `${aggLabel}: ${formatNumber(group.aggregationValue, {
         maximumFractionDigits: 0
       })}` : `${aggLabel}(${aggFieldCol?.label ?? groupBy.aggregationField ?? ""}): ${formatNumber(group.aggregationValue)}`;
+      const isFocused = effectiveFocused === headerFocus;
+      const 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: () => {
+          setFocusedIndex(headerFocus);
+          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: [groupByCol2?.label ?? 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}`);
+      const rows = isCollapsed ? null : group.rows.map((row, index) => {
+        const focusIdx = cursor;
+        cursor += 1;
+        const lastInTable = groupIndex === groupEntries.length - 1 && index === group.rows.length - 1;
+        return renderDataRow(row, index, focusIdx, lastInTable, true);
+      });
       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: () => 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: [groupByCol?.label ?? 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((row, index) => renderDataRow(row, index, true))]
+        children: [header, rows]
       }, groupKey);
     });
   };
+  const groupByCol = groupBy ? columns.find(c => c.fieldname === groupBy.field) : void 0;
+  const aggregationFieldCol = groupBy?.aggregationField ? columns.find(c => c.fieldname === groupBy.aggregationField) : void 0;
+  const chartAvailable = Boolean(groupedData && chartData.length > 0);
   if (hasError) {
     return /* @__PURE__ */jsx(AsyncBoundary, {
       error,
@@ -317,63 +540,207 @@ function ReportBuilder({
     });
   }
   return /* @__PURE__ */jsxs(YStack, {
+    testID: "report-builder",
     ...knobProps.gap,
+    height,
+    minHeight,
     ...stackProps,
-    children: [/* @__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: [/* @__PURE__ */jsxs(Text, {
-          fontSize: reportFontSize,
-          color: componentColors.text.muted,
-          children: [enabledColumns.length, " / ", columns.length, " columns"]
-        }), /* @__PURE__ */jsx(XStack, {
-          flex: 1
-        }), showChart && groupedData && /* @__PURE__ */jsx(Button, {
-          size: knobProps.sizeToken,
-          onPress: () => setChartVisible(v => !v),
-          theme: chartVisible ? "active" : void 0,
-          ...pressTargetStyle(),
-          children: "Chart"
-        }), 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(column => {
+            const checked = enabledColumnSet.has(column.fieldname);
+            const 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: () => toggleColumn(column.fieldname),
+              children: column.label
+            }, column.fieldname);
+          })]
         })]
-      })
-    }), 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: () => selectGroupField(null),
+            children: t("No grouping")
+          }), /* @__PURE__ */jsx(DropdownMenu.Separator, {}), columns.map(column => /* @__PURE__ */jsx(DropdownMenu.CheckboxItem, {
+            checked: groupBy?.field === column.fieldname,
+            closeOnSelect: true,
+            onCheckedChange: () => 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(aggregation => {
+            const 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: () => 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: aggregationFieldCol?.label ?? groupBy.aggregationField ?? t("field")
+            })
+          })
+        }), /* @__PURE__ */jsx(DropdownMenu.Content, {
+          maxHeight: 360,
+          children: numericColumns.map(column => /* @__PURE__ */jsx(DropdownMenu.CheckboxItem, {
+            checked: groupBy.aggregationField === column.fieldname,
+            closeOnSelect: true,
+            onCheckedChange: () => 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: () => setChartVisible(v => !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
       })
-    }), /* @__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((row, index) => renderDataRow(row, index)), 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((row, index) => 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(({
+            col,
+            value
+          }) => /* @__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
+            })
           })]
-        })
+        })]
       })
     })]
   });