@lotics/ui 21.0.0 → 21.1.0

package/docs/catalog.md

@@ -137,8 +137,13 @@ Two columnar shapes, and the choice is about data size:
   sortable header + collapsible grouped sections + aligned rows + an optional per-row
   `leading` slot (a `CheckCircle`); YOU own the data, the sort/group/filter/collapse STATE
   (`cycleSort` + `sortBy` from `@lotics/ui/sort_header`, a `collapsed` Set), the toolbar
-  (`SearchInput` + `FilterChip`s), and the per-group add row (`renderGroupFooter`, aligned
-  with the exported `gridRowStyle` + the column widths). It renders ALL rows (no
+  (`SearchInput` + `FilterChip`s). A column's `align: "right"` moves BOTH its cells and its
+  heading, so digits line up under their label; **`DataGridColumn.footer` gives that column its
+  cell in the group's footer row** (a subtotal, a resolved measure) — the grid lays it out in
+  the column's own box, so a total can never drift from what it sums and no consumer rebuilds
+  the row. `renderGroupFooter` remains for content that does NOT sit in a column (a per-group
+  add row). The grid takes exactly its container's width — no outdent to fight, so it needs no
+  scroller unless YOU add one. It renders ALL rows (no
   virtualization), so it's only for sets small enough to hold in view — at 10k+ it lags, and
   grouping + pagination/infinite don't compose; use the register instead. Worked example:
   [`tpl_task_board`](../examples/tpl_task_board.tsx) (a `CheckCircle` leading).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "21.0.0",
+  "version": "21.1.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/data_grid.tsx

@@ -11,9 +11,17 @@ export interface DataGridColumn<T> {
   label: string;
   /** Fixed width in px; omit for the flexible primary column (usually the first). */
   width?: number;
+  /** Cell + header alignment. Money and counts read RIGHT so digits line up under
+   *  their heading; text reads left (the default). */
+  align?: "left" | "right";
   sortable?: boolean;
   /** Render the cell for this column — any field: a `Text`, an inline editor, a badge. */
   cell: (item: T) => ReactNode;
+  /** This column's cell in the group's FOOTER row — a subtotal, a resolved measure.
+   *  Declared per COLUMN so the grid lays it out in that column's own box: a total
+   *  can never drift from the values it sums, and no consumer re-implements the row.
+   *  The footer row renders when ANY column defines one. */
+  footer?: (group: DataGridGroup<T>) => ReactNode;
 }
 
 export interface DataGridGroup<T> {
@@ -39,7 +47,9 @@ export interface DataGridProps<T> {
   /** Controlled collapse — the set of collapsed group keys. */
   collapsed?: Set<string>;
   onToggleCollapse?: (key: string) => void;
-  /** Rendered under each group's rows — typically a per-group add row. Align it with `gridRowStyle` + the column widths. */
+  /** Rendered under each group's rows AND under the columns' own footer row —
+   *  for content that does NOT sit in a column, typically a per-group add row.
+   *  For a column-aligned subtotal use `DataGridColumn.footer`. */
   renderGroupFooter?: (group: DataGridGroup<T>) => ReactNode;
 }
 
@@ -57,13 +67,19 @@ export interface DataGridProps<T> {
 export function DataGrid<T>(props: DataGridProps<T>) {
   const { columns, groups, getRowKey, leading, sort, onSort, labels, collapsed, onToggleCollapse, renderGroupFooter } = props;
   const lead = leading?.width ?? 0;
+  const hasFooter = columns.some((c) => c.footer != null);
 
   return (
     <View>
       <View style={[styles.row, styles.head]}>
         {lead > 0 ? <View style={{ width: lead }} /> : null}
+        {/* The header label rides the SAME column box as the cells below it, so a
+            right-aligned column's heading sits over its digits instead of drifting
+            to the column's left edge. */}
         {columns.map((c) => (
-          <SortLabel key={c.key} label={c.label} sortKey={c.key} sortable={c.sortable !== false && !!onSort} sort={sort ?? null} onSort={onSort} labels={labels} style={colStyle(c)} />
+          <View key={c.key} style={colStyle(c)}>
+            <SortLabel label={c.label} sortKey={c.key} sortable={c.sortable !== false && !!onSort} sort={sort ?? null} onSort={onSort} labels={labels} />
+          </View>
         ))}
       </View>
 
@@ -95,6 +111,14 @@ export function DataGrid<T>(props: DataGridProps<T>) {
                     ))}
                   </View>
                 ))}
+                {hasFooter ? (
+                  <View style={styles.row}>
+                    {lead > 0 ? <View style={{ width: lead }} /> : null}
+                    {columns.map((c) => (
+                      <View key={c.key} style={colStyle(c)}>{c.footer?.(g)}</View>
+                    ))}
+                  </View>
+                ) : null}
                 {renderGroupFooter?.(g)}
               </>
             ) : null}
@@ -105,13 +129,20 @@ export function DataGrid<T>(props: DataGridProps<T>) {
   );
 }
 
-function colStyle(c: { width?: number }): StyleProp<ViewStyle> {
-  return c.width != null ? { width: c.width } : styles.flexCol;
+/** The shared column box — width (or flex) plus alignment. ONE definition, used by
+ *  the header, every cell and every footer cell, so the three cannot drift. */
+function colStyleImpl(c: { width?: number; align?: "left" | "right" }): StyleProp<ViewStyle> {
+  return [
+    c.width != null ? { width: c.width } : styles.flexCol,
+    c.align === "right" ? { alignItems: "flex-end" as const } : null,
+  ];
 }
+const colStyle = colStyleImpl;
 
-// The aligned sortable header label — same 8px inset as the cells, so it lines up
-// with the column content (the kit's `SortHeader` keeps its label flush, which
-// wouldn't match inline-editor cells).
+// The column heading. It sits in the SAME column box as the cells, and its own
+// padding is cancelled by an equal negative margin — so the hover pill has room
+// while the label still starts exactly on its cell's edge. Non-sortable headings
+// render as plain text: no press, no pointer, no button in the a11y tree.
 function SortLabel(props: { label: string; sortKey: string; sortable: boolean; sort: SortState | null; onSort?: (k: string) => void; labels?: SortHeaderLabels; style?: StyleProp<ViewStyle> }) {
   const { label, sortKey, sortable, sort, onSort, labels, style } = props;
   const active = sort?.key === sortKey;
@@ -126,7 +157,7 @@ function SortLabel(props: { label: string; sortKey: string; sortable: boolean; s
   const sortByLabel = (labels?.sortBy ?? ((l: string) => `Sort by ${l}`))(label);
   const dirText = active ? (sort?.dir === "asc" ? (labels?.ascending ?? ", ascending") : (labels?.descending ?? ", descending")) : "";
   return (
-    <FocusRingPressable onPress={() => onSort?.(sortKey)} accessibilityRole="button" accessibilityLabel={`${sortByLabel}${dirText}`} style={({ hovered }: { hovered?: boolean }) => [styles.sortLabel, hovered ? styles.sortLabelHover : null, style]}>
+    <FocusRingPressable onPress={() => onSort?.(sortKey)} accessibilityRole="button" accessibilityLabel={`${sortByLabel}${dirText}`} style={({ hovered }: { hovered?: boolean }) => [styles.sortLabel, styles.sortLabelPressable, hovered ? styles.sortLabelHover : null, style]}>
       <Text size="xs" weight="semibold" color={active ? "default" : "muted"} numberOfLines={1} style={styles.headLabel}>{label}</Text>
       {arrow ? <Icon name={arrow} size={12} color={colors.zinc[500]} /> : null}
     </FocusRingPressable>
@@ -139,7 +170,6 @@ export const gridRowStyle: ViewStyle = {
   alignItems: "center",
   gap: 12,
   minHeight: 44,
-  paddingHorizontal: 8,
 };
 
 const styles = StyleSheet.create({
@@ -152,9 +182,12 @@ const styles = StyleSheet.create({
     marginBottom: 4,
   },
   headLabel: { letterSpacing: 0.3, textTransform: "uppercase" },
-  sortLabel: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 6, cursor: "pointer" },
+  // Padded for the hover pill but zero-width in flow (negative margin), so the label
+  // sits on its cell's edge instead of 8px inside it.
+  sortLabel: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 6, marginHorizontal: -6, paddingVertical: 2, borderRadius: 6 },
+  sortLabelPressable: { cursor: "pointer" },
   sortLabelHover: { backgroundColor: colors.zinc[50] },
   groupSep: { borderTopWidth: 1, borderTopColor: colors.zinc[100], marginTop: 8, paddingTop: 8 },
-  section: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, paddingVertical: 7, borderRadius: 8 },
+  section: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, marginHorizontal: -8, paddingVertical: 7, borderRadius: 8 },
   sectionHover: { backgroundColor: colors.zinc[50] },
 });

package/src/ledger.tsx

@@ -77,7 +77,7 @@ export function LedgerGroup(props: LedgerGroupProps) {
   const { format } = useLedger();
   return (
     <View style={styles.group}>
-      <View style={styles.row}>
+      <View style={styles.groupHead}>
         <Text size="xs" weight="medium" color="muted" style={styles.grow}>
           {label}
         </Text>
@@ -198,8 +198,11 @@ const styles = StyleSheet.create({
   // Outdent by the rows' 8px inset (the ListItem/Timeline technique) so row text +
   // the money column align with the section heading and the container edges;
   // the pressable door's wash bleeds into the gutter instead of squeezing text.
-  ledger: { gap: 12, marginHorizontal: -8 },
-  group: { gap: 4 },
+  // Grouping reads by PROXIMITY: the gap between groups must be decisively larger
+  // than the gap inside one, or the eyebrow floats midway and belongs to neither
+  // the group above nor the rows below. 18 between, 2 within.
+  ledger: { gap: 16, marginHorizontal: -8 },
+  group: { gap: 0 },
   // EVERY line (group header, rows, the total) shares the 8px text inset, so
   // labels and the money column sit on one edge whether a row peeks or not —
   // the pressable door's wash simply fills the same padded box.
@@ -210,6 +213,16 @@ const styles = StyleSheet.create({
     minHeight: 28,
     paddingHorizontal: 8,
   },
+  // The group eyebrow is a CAPTION on the rows beneath it, not a line of its own —
+  // it takes only the height its xs text needs, so it hugs what it labels instead
+  // of sitting in a full 28px row box.
+  groupHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 16,
+    paddingHorizontal: 8,
+  },
   rowPress: {
     borderRadius: 8,
   },