@multiplatform.one/table 6.7.0 → 7.1.0

package/dist/cjs/components/DataTableGrouping/index.native.js

@@ -32,11 +32,10 @@ __export(DataTableGrouping_exports, {
 });
 module.exports = __toCommonJS(DataTableGrouping_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react2 = require("@phosphor-icons/react");
+var import_react = require("@phosphor-icons/react");
 var import_components = require("@multiplatform.one/components");
 var import_theme = require("@multiplatform.one/theme");
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_viewData = require("../../utils/viewData.native.js");
@@ -52,11 +51,38 @@ var groupItemPaddingMap = {
   medium: "$2",
   large: "$3"
 };
+var groupIndentStepMap = {
+  small: 12,
+  medium: 16,
+  large: 24
+};
 var groupMetaSizeMap = {
   $3: "$2",
   $4: "$3",
   $5: "$4"
 };
+var groupIconSize = function groupIconSize2(token) {
+  return (0, import_theme.sizeRecipeForToken)(token).iconSize;
+};
+var startRail = import_tamagui.isWeb ? {
+  borderInlineStartWidth: 4,
+  borderInlineStartStyle: "solid",
+  borderInlineStartColor: "$color6"
+} : {
+  borderStartWidth: 4,
+  borderStartColor: "$color6"
+};
+function groupIndent(space, level) {
+  var _groupIndentStepMap_;
+  return ((_groupIndentStepMap_ = groupIndentStepMap[space !== null && space !== void 0 ? space : "medium"]) !== null && _groupIndentStepMap_ !== void 0 ? _groupIndentStepMap_ : 16) * Math.max(0, level);
+}
+function formatCellValue(value) {
+  if (value == null) return "";
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? (0, import_theme.formatNumber)(value) : "";
+  }
+  return String(value);
+}
 function formatAggregateValue(value, agg) {
   if (value == null) return (0, import_theme.formatNumber)(0);
   if (typeof value === "number") {
@@ -93,15 +119,15 @@ function DataTableGrouping(props) {
     maxDepth = 5
   } = props;
   var isExpansionControlled = onExpandedGroupsChange != null;
-  var [internalExpandedGroups, setInternalExpandedGroups] = (0, import_react3.useState)(function () {
+  var [internalExpandedGroups, setInternalExpandedGroups] = (0, import_react2.useState)(function () {
     return new Set(expandedGroupsProp);
   });
   var expandedGroups = isExpansionControlled ? expandedGroupsProp !== null && expandedGroupsProp !== void 0 ? expandedGroupsProp : EMPTY_EXPANDED_GROUPS : internalExpandedGroups;
-  var groupedData = (0, import_react3.useMemo)(function () {
+  var groupedData = (0, import_react2.useMemo)(function () {
     if (!groupBy.length) return null;
     return groupData(data, groupBy, aggregations, maxDepth);
   }, [data, groupBy, aggregations, maxDepth]);
-  var toggleGroupExpansion = (0, import_react3.useCallback)(function (groupKey) {
+  var toggleGroupExpansion = (0, import_react2.useCallback)(function (groupKey) {
     var newExpanded = new Set(expandedGroups);
     if (newExpanded.has(groupKey)) {
       newExpanded.delete(groupKey);
@@ -119,6 +145,8 @@ function DataTableGrouping(props) {
     groupedData,
     columns,
     level: 0,
+    stackStart: true,
+    stackEnd: true,
     aggregations,
     showAggregations,
     expandedGroups,
@@ -132,6 +160,8 @@ function GroupedDataRenderer(param) {
     groupedData,
     columns,
     level,
+    stackStart,
+    stackEnd,
     aggregations,
     showAggregations,
     expandedGroups,
@@ -140,15 +170,22 @@ function GroupedDataRenderer(param) {
     renderGroupFooter
   } = param;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    children: groupedData.map(function (group) {
+    children: groupedData.map(function (group, groupIndex) {
       var _ref;
       var _group_children;
       var groupKey = getGroupKey(group);
       var isExpanded = expandedGroups.has(groupKey);
       var isExpandable = ((_ref = (_group_children = group.children) === null || _group_children === void 0 ? void 0 : _group_children.length) !== null && _ref !== void 0 ? _ref : 0) > 0 || group.items.length > 0;
+      var position = (0, import_theme.getGroupPosition)(groupIndex, groupedData.length);
+      var isFirst = position === "first" || position === "only";
+      var isLast = position === "last" || position === "only";
+      var headerStart = stackStart && isFirst;
+      var headerEnd = stackEnd && isLast && !isExpanded;
+      var childStackEnd = stackEnd && isLast;
       return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        children: [/* Group Header */
-        /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+        children: [groupIndex > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...import_theme.hairline.line
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
           group,
           level,
           isExpanded,
@@ -158,14 +195,19 @@ function GroupedDataRenderer(param) {
           onToggleExpansion: function onToggleExpansion1() {
             return onToggleExpansion(groupKey);
           },
-          renderCustomHeader: renderGroupHeader
-        }), /* Group Content */
-        isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          marginInlineStart: level * 20,
-          children: group.children && group.children.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupedDataRenderer, {
+          renderCustomHeader: renderGroupHeader,
+          position,
+          stackStart: headerStart,
+          stackEnd: headerEnd
+        }), isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...import_theme.hairline.line
+          }), group.children && group.children.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupedDataRenderer, {
             groupedData: group.children,
             columns,
             level: level + 1,
+            stackStart: false,
+            stackEnd: childStackEnd,
             aggregations,
             showAggregations,
             expandedGroups,
@@ -174,10 +216,11 @@ function GroupedDataRenderer(param) {
             renderGroupFooter
           }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupItems, {
             items: group.items,
-            columns
-          })
-        }), /* Group Footer */
-        renderGroupFooter && isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupFooter, {
+            columns,
+            level: level + 1,
+            stackEnd: childStackEnd
+          })]
+        }), renderGroupFooter && isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupFooter, {
           group,
           level,
           renderCustomFooter: renderGroupFooter
@@ -195,48 +238,67 @@ function GroupHeader(param) {
     aggregations,
     showAggregations,
     onToggleExpansion,
-    renderCustomHeader
+    renderCustomHeader,
+    position = "only",
+    stackStart,
+    stackEnd
   } = param;
-  var _groupHeaderPaddingMap_knobProps_space, _groupMetaSizeMap_knobProps_sizeToken;
+  var _groupMetaSizeMap_knobProps_sizeToken, _groupHeaderPaddingMap_knobProps_space;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var CollapsedCaretIcon = (0, import_components.useDirection)() === "rtl" ? import_react2.CaretLeftIcon : import_react2.CaretRightIcon;
+  var CollapsedCaretIcon = (0, import_components.useDirection)() === "rtl" ? import_react.CaretLeftIcon : import_react.CaretRightIcon;
+  var corners = (0, import_theme.stackEdgeRadius)(knobProps.borderRadius.borderRadius, {
+    start: stackStart,
+    end: stackEnd
+  });
+  var iconSize = groupIconSize(String(knobProps.sizeToken));
+  var metaSize = (_groupMetaSizeMap_knobProps_sizeToken = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken : "$3";
+  var indent = groupIndent(knobProps.space, level);
+  var label = group.value == null || group.value === "" ? "No Value" : String(group.value);
+  var countLabel = `${(0, import_theme.formatNumber)(group.count, {
+    maximumFractionDigits: 0
+  })} item${group.count !== 1 ? "s" : ""}`;
   if (renderCustomHeader) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       children: renderCustomHeader(group, level)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    ...knobProps.borderRadius,
+    ...corners,
+    ...startRail,
     alignItems: "center",
+    gap: "$2",
+    minHeight: 44,
     padding: (_groupHeaderPaddingMap_knobProps_space = groupHeaderPaddingMap[knobProps.space]) !== null && _groupHeaderPaddingMap_knobProps_space !== void 0 ? _groupHeaderPaddingMap_knobProps_space : "$3",
-    // SF-CONTROL fill tier: filled keeps the previous $color2; outlined
-    // flips to transparent (InputParts pattern, spec:388-392).
     backgroundColor: knobProps.inputBackground,
-    // Logical start accent so the group rail mirrors in RTL; tamagui
-    // borderStartWidth does not compile to working CSS on web (SB-M-1215).
-    ...(import_tamagui.isWeb ? {
-      borderInlineStartWidth: 4,
-      borderInlineStartStyle: "solid",
-      borderInlineStartColor: "$color6"
-    } : {
-      borderStartWidth: 4,
-      borderStartColor: "$color6"
-    }),
+    overflow: "hidden",
     cursor: "pointer",
     hoverStyle: {
-      backgroundColor: level === 0 ? "$accentBackground" : {
-        backgroundColor: "$color2"
-      }.backgroundColor
+      backgroundColor: "$backgroundHover",
+      ...corners
+    },
+    pressStyle: {
+      backgroundColor: "$backgroundPress",
+      ...corners
     },
     onPress: onToggleExpansion,
-    // Keyboard + AT contract: the header is a toggle button with an
-    // expanded state; Enter/Space activate it like the pointer does.
     role: "button",
     tabIndex: 0,
     "aria-expanded": isExpanded,
+    "aria-label": `${label}, ${countLabel}`,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
     ...{
+      "data-testid": "data-table-group-header",
+      "data-group-position": position,
+      "data-stack-start": stackStart ? "true" : "false",
+      "data-stack-end": stackEnd ? "true" : "false",
       onKeyDown: function onKeyDown(e) {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
@@ -244,50 +306,52 @@ function GroupHeader(param) {
         }
       }
     },
-    children: [/* Expansion Toggle */
-    /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: 20,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: iconSize + 4,
       alignItems: "center",
-      children: hasChildren && (isExpanded ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-        size: 16
+      marginInlineStart: indent,
+      children: hasChildren && (isExpanded ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+        size: iconSize
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(CollapsedCaretIcon, {
-        size: 16
+        size: iconSize
       }))
-    }), /* Group Info */
-    /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       flex: 1,
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$3",
+      flexWrap: "wrap",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         alignItems: "center",
         gap: "$2",
+        flexShrink: 1,
+        minWidth: 0,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontSize: knobProps.sizeToken,
           fontWeight: "600",
-          children: (
-          /* Nullish/empty shows the placeholder; falsy-but-real values
-          like 0 and false render as themselves. */
-          group.value == null || group.value === "" ? "No Value" : String(group.value))
+          numberOfLines: 1,
+          children: label
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: (_groupMetaSizeMap_knobProps_sizeToken = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken : "$3",
+          fontSize: metaSize,
           color: "$color10",
-          children: ["(", group.count, " item", group.count !== 1 ? "s" : "", ")"]
+          children: ["(", countLabel, ")"]
         })]
-      }), /* Aggregations */
-      showAggregations && aggregations.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        gap: "$4",
-        marginTop: "$2",
+      }), showAggregations && aggregations.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        gap: "$3",
+        flexWrap: "wrap",
+        justifyContent: "flex-end",
         children: aggregations.map(function (agg, index) {
-          var _groupMetaSizeMap_knobProps_sizeToken2, _groupMetaSizeMap_knobProps_sizeToken1;
           var _group_aggregations_agg_column;
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            alignItems: "center",
+            alignItems: "baseline",
             gap: "$1",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-              fontSize: (_groupMetaSizeMap_knobProps_sizeToken2 = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken2 !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken2 : "$3",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: metaSize,
               color: "$color10",
-              children: [agg.label || `${agg.function}(${agg.column})`, ":"]
+              children: `${agg.label || `${agg.function}(${agg.column})`}:`
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: (_groupMetaSizeMap_knobProps_sizeToken1 = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken1 !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken1 : "$3",
-              fontWeight: "500",
+              fontSize: metaSize,
+              fontWeight: "600",
               children: formatAggregateValue((_group_aggregations_agg_column = group.aggregations[agg.column]) === null || _group_aggregations_agg_column === void 0 ? void 0 : _group_aggregations_agg_column[agg.function], agg)
             })]
           }, index);
@@ -299,37 +363,61 @@ function GroupHeader(param) {
 function GroupItems(param) {
   var {
     items,
-    columns = []
+    columns = [],
+    level,
+    stackEnd
   } = param;
+  var _groupMetaSizeMap_knobProps_sizeToken;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var metaSize = (_groupMetaSizeMap_knobProps_sizeToken = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken : "$3";
+  var indent = groupIndent(knobProps.space, level);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     children: items.map(function (item, index) {
-      var _groupItemPaddingMap_knobProps_space, _groupMetaSizeMap_knobProps_sizeToken;
-      return /* @__PURE__ */(0, import_react.createElement)(import_tamagui.XStack, {
-        ...knobProps.borderRadius,
-        key: index,
-        padding: (_groupItemPaddingMap_knobProps_space = groupItemPaddingMap[knobProps.space]) !== null && _groupItemPaddingMap_knobProps_space !== void 0 ? _groupItemPaddingMap_knobProps_space : "$2",
-        paddingInlineStart: "$4",
-        backgroundColor: index % 2 === 0 ? "$background" : "$color2",
-        borderBottomWidth: 1,
-        borderBottomColor: "$borderColor"
-      }, columns.length > 0 ? columns.map(function (column, colIndex) {
-        var _groupMetaSizeMap_knobProps_sizeToken2;
-        var key = column.accessorKey || column.id || `col-${colIndex}`;
-        var value = item[key];
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          flex: 1,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: (_groupMetaSizeMap_knobProps_sizeToken2 = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken2 !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken2 : "$3",
-            children: String(value !== null && value !== void 0 ? value : "")
+      var _groupItemPaddingMap_knobProps_space;
+      var position = (0, import_theme.getGroupPosition)(index, items.length);
+      var isLast = position === "last" || position === "only";
+      var corners = (0, import_theme.stackEdgeRadius)(knobProps.borderRadius.borderRadius, {
+        start: false,
+        end: stackEnd && isLast
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...import_theme.hairline.line
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          ...corners,
+          padding: (_groupItemPaddingMap_knobProps_space = groupItemPaddingMap[knobProps.space]) !== null && _groupItemPaddingMap_knobProps_space !== void 0 ? _groupItemPaddingMap_knobProps_space : "$2",
+          paddingInlineStart: indent + 12,
+          overflow: "hidden",
+          backgroundColor: index % 2 === 0 ? "$background" : "$color2",
+          hoverStyle: {
+            backgroundColor: "$backgroundHover",
+            ...corners
+          },
+          ...{
+            "data-testid": "data-table-group-item",
+            "data-group-position": position,
+            "data-stack-end": stackEnd && isLast ? "true" : "false"
+          },
+          children: columns.length > 0 ? columns.map(function (column, colIndex) {
+            var key = column.accessorKey || column.id || `col-${colIndex}`;
+            var value = item[key];
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              flex: 1,
+              minWidth: 0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: metaSize,
+                numberOfLines: 1,
+                children: formatCellValue(value)
+              })
+            }, key);
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: metaSize,
+            children: JSON.stringify(item, null, 2)
           })
-        }, key);
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        fontSize: (_groupMetaSizeMap_knobProps_sizeToken = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken : "$3",
-        children: JSON.stringify(item, null, 2)
-      }));
+        })]
+      }, index);
     })
   });
 }
@@ -339,8 +427,11 @@ function GroupFooter(param) {
     level,
     renderCustomFooter
   } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    marginInlineStart: level * 20,
+    paddingInlineStart: groupIndent(knobProps.space, level),
     children: renderCustomFooter(group, level)
   });
 }
@@ -365,7 +456,7 @@ function DataTableGroupingConfig(props) {
   var sz = knobProps.sizeToken;
   var popoverMinWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
   var popoverMaxWidth = sz === "$3" ? 400 : sz === "$5" ? 560 : 500;
-  var [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  var [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   var availableColumns = columns.filter(function (col) {
     var key = col.accessorKey || col.id || "";
     return key && !currentConfig.columns.includes(key);
@@ -406,6 +497,18 @@ function DataTableGroupingConfig(props) {
     };
     onConfigChange(newConfig);
   };
+  var handleMoveGroupBy = function handleMoveGroupBy2(index, direction) {
+    var next = [...currentConfig.columns];
+    var swap = index + direction;
+    if (swap < 0 || swap >= next.length) return;
+    [next[index], next[swap]] = [next[swap], next[index]];
+    onConfigChange({
+      ...currentConfig,
+      columns: next
+    });
+  };
+  var iconSize = groupIconSize(String(sz));
+  var radius = knobProps.borderRadius.borderRadius;
   return (
     // LC-06/LC-10: collision handling — the config list grows with every
     // group-by/aggregation added and must clamp + scroll inside the viewport
@@ -422,35 +525,31 @@ function DataTableGroupingConfig(props) {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
           size: knobProps.sizeToken,
           variant: "outlined",
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.GearIcon, {
-            size: 16
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+            size: iconSize
           }),
           disabled,
           "aria-label": "Grouping configuration",
           children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
             alignItems: "center",
             gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.ChartBarIcon, {
-              size: 16
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ChartBarIcon, {
+              size: iconSize
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
               children: "Group & Aggregate"
             }), (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
               backgroundColor: "$color6",
-              borderRadius: knobProps.borderRadius.borderRadius,
+              borderRadius: 1e3,
               paddingHorizontal: "$1",
               paddingVertical: 2,
               minWidth: 20,
               alignItems: "center",
-              children: (
-              /* LC-05/DG-COL-01: theme ink, not a named hue — "white" was
-              unreadable on the light-scheme $color6 badge fill. */
-              /* @__PURE__ */
-              (0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
                 fontSize: "$2",
                 color: "$color12",
                 fontWeight: "600",
                 children: currentConfig.columns.length + currentConfig.aggregations.length
-              }))
+              })
             })]
           })
         })
@@ -458,6 +557,7 @@ function DataTableGroupingConfig(props) {
         ...knobProps.borderRadius,
         borderWidth: 1,
         borderColor: "$borderColor",
+        // LC-24: enter/exit styles are dead code without a resolved token
         transition: knobProps.transition,
         enterStyle: {
           x: 0,
@@ -499,31 +599,69 @@ function DataTableGroupingConfig(props) {
                 })]
               }), /* Current Group By Columns */
               /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                gap: "$1",
                 children: currentConfig.columns.map(function (columnKey, index) {
                   var column = columns.find(function (col) {
                     return (col.accessorKey || col.id) === columnKey;
                   });
-                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                    alignItems: "center",
-                    gap: "$2",
-                    padding: "$2",
-                    backgroundColor: "$color2",
-                    borderRadius: knobProps.borderRadius.borderRadius,
-                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                      fontSize: "$3",
-                      flex: 1,
-                      children: [(column === null || column === void 0 ? void 0 : column.header) || columnKey, " (", index + 1, ")"]
-                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                      size: knobProps.sizeToken,
-                      variant: "outlined",
-                      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MinusIcon, {
-                        size: 16
-                      }),
-                      onPress: function onPress() {
-                        return handleRemoveGroupBy(columnKey);
+                  var position = (0, import_theme.getGroupPosition)(index, currentConfig.columns.length);
+                  var corners = (0, import_theme.stackRadiusProps)(position, radius);
+                  var label = String((column === null || column === void 0 ? void 0 : column.header) || columnKey);
+                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                    children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                      ...import_theme.hairline.line
+                    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                      alignItems: "center",
+                      gap: "$2",
+                      padding: "$2",
+                      overflow: "hidden",
+                      backgroundColor: "$color2",
+                      ...corners,
+                      hoverStyle: {
+                        backgroundColor: "$backgroundHover",
+                        ...corners
                       },
-                      "aria-label": `Remove grouping by ${(column === null || column === void 0 ? void 0 : column.header) || columnKey}`
+                      ...{
+                        "data-group-position": position
+                      },
+                      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                        fontSize: "$3",
+                        flex: 1,
+                        numberOfLines: 1,
+                        children: `${label} \xB7 ${index + 1}`
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowUpIcon, {
+                          size: iconSize
+                        }),
+                        disabled: disabled || index === 0,
+                        onPress: function onPress() {
+                          return handleMoveGroupBy(index, -1);
+                        },
+                        "aria-label": `Move ${label} up`
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowDownIcon, {
+                          size: iconSize
+                        }),
+                        disabled: disabled || index === currentConfig.columns.length - 1,
+                        onPress: function onPress() {
+                          return handleMoveGroupBy(index, 1);
+                        },
+                        "aria-label": `Move ${label} down`
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+                          size: iconSize
+                        }),
+                        disabled,
+                        onPress: function onPress() {
+                          return handleRemoveGroupBy(columnKey);
+                        },
+                        "aria-label": `Remove grouping by ${label}`
+                      })]
                     })]
                   }, columnKey);
                 })
@@ -563,30 +701,45 @@ function DataTableGroupingConfig(props) {
                 })]
               }), /* Current Aggregations */
               /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                gap: "$1",
                 children: currentConfig.aggregations.map(function (agg, index) {
-                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                    alignItems: "center",
-                    gap: "$2",
-                    padding: "$2",
-                    backgroundColor: "$color2",
-                    borderRadius: knobProps.borderRadius.borderRadius,
-                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                      fontSize: "$3",
-                      flex: 1,
-                      children: [agg.function, "(", agg.column, ")", agg.label && ` as "${agg.label}"`]
-                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                      size: knobProps.sizeToken,
-                      variant: "outlined",
-                      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MinusIcon, {
-                        size: 16
-                      }),
-                      onPress: function onPress() {
-                        return handleRemoveAggregation(index);
+                  var position = (0, import_theme.getGroupPosition)(index, currentConfig.aggregations.length);
+                  var corners = (0, import_theme.stackRadiusProps)(position, radius);
+                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                    children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                      ...import_theme.hairline.line
+                    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                      alignItems: "center",
+                      gap: "$2",
+                      padding: "$2",
+                      overflow: "hidden",
+                      backgroundColor: "$color2",
+                      ...corners,
+                      hoverStyle: {
+                        backgroundColor: "$backgroundHover",
+                        ...corners
+                      },
+                      ...{
+                        "data-group-position": position
                       },
-                      "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
+                      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+                        fontSize: "$3",
+                        flex: 1,
+                        numberOfLines: 1,
+                        children: [agg.function, "(", agg.column, ")", agg.label && ` as "${agg.label}"`]
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+                          size: iconSize
+                        }),
+                        disabled,
+                        onPress: function onPress() {
+                          return handleRemoveAggregation(index);
+                        },
+                        "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
+                      })]
                     })]
-                  }, index);
+                  }, `${agg.function}-${agg.column}-${index}`);
                 })
               }), /* Add Aggregation */
               /* @__PURE__ */(0, import_jsx_runtime.jsx)(AggregationSelector, {
@@ -620,40 +773,40 @@ function AggregationSelector(param) {
     columns,
     onAddAggregation
   } = param;
-  var [selectedColumn, setSelectedColumn] = (0, import_react3.useState)("");
-  var [selectedFunction, setSelectedFunction] = (0, import_react3.useState)("count");
+  var [selectedColumn, setSelectedColumn] = (0, import_react2.useState)("");
+  var [selectedFunction, setSelectedFunction] = (0, import_react2.useState)("count");
   var aggregationFunctions = [{
     value: "count",
     label: "Count",
-    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.HashIcon, {
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HashIcon, {
       size: 16
     })
   }, {
     value: "sum",
     label: "Sum",
-    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
       size: 16
     })
   }, {
     value: "avg",
     label: "Average",
-    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CalculatorIcon, {
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalculatorIcon, {
       size: 16
     })
   }, {
     value: "min",
     label: "Minimum",
-    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MinusIcon, {
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
       size: 16
     })
   }, {
     value: "max",
     label: "Maximum",
-    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretUpIcon, {
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpIcon, {
       size: 16
     })
   }];
-  var columnOptions = (0, import_react3.useMemo)(function () {
+  var columnOptions = (0, import_react2.useMemo)(function () {
     return columns.map(function (column) {
       var key = column.accessorKey || column.id || "";
       return {
@@ -662,7 +815,7 @@ function AggregationSelector(param) {
       };
     });
   }, [columns]);
-  var functionOptions = (0, import_react3.useMemo)(function () {
+  var functionOptions = (0, import_react2.useMemo)(function () {
     return aggregationFunctions.map(function (func) {
       return {
         value: func.value,
@@ -830,7 +983,7 @@ function useGrouping(param) {
     data,
     initialConfig = {}
   } = param;
-  var [config, setConfig] = (0, import_react3.useState)({
+  var [config, setConfig] = (0, import_react2.useState)({
     columns: [],
     aggregations: [],
     showEmptyGroups: false,
@@ -838,12 +991,12 @@ function useGrouping(param) {
     maxDepth: 5,
     ...initialConfig
   });
-  var [expandedGroups, setExpandedGroups] = (0, import_react3.useState)(/* @__PURE__ */new Set());
-  var groupedData = (0, import_react3.useMemo)(function () {
+  var [expandedGroups, setExpandedGroups] = (0, import_react2.useState)(/* @__PURE__ */new Set());
+  var groupedData = (0, import_react2.useMemo)(function () {
     if (!config.columns.length) return null;
     return groupData(data, config.columns, config.aggregations, config.maxDepth);
   }, [data, config]);
-  var toggleGroupExpansion = (0, import_react3.useCallback)(function (groupKey) {
+  var toggleGroupExpansion = (0, import_react2.useCallback)(function (groupKey) {
     setExpandedGroups(function (prev) {
       var newSet = new Set(prev);
       if (newSet.has(groupKey)) {
@@ -854,7 +1007,7 @@ function useGrouping(param) {
       return newSet;
     });
   }, []);
-  var expandAll = (0, import_react3.useCallback)(function () {
+  var expandAll = (0, import_react2.useCallback)(function () {
     if (!groupedData) return;
     var allKeys = /* @__PURE__ */new Set();
     var collectKeys = function collectKeys1(groups) {
@@ -868,7 +1021,7 @@ function useGrouping(param) {
     collectKeys(groupedData);
     setExpandedGroups(allKeys);
   }, [groupedData]);
-  var collapseAll = (0, import_react3.useCallback)(function () {
+  var collapseAll = (0, import_react2.useCallback)(function () {
     setExpandedGroups(/* @__PURE__ */new Set());
   }, []);
   return {