@lotics/ui 31.0.0 → 32.0.0

package/MIGRATION.md

@@ -4,6 +4,27 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 32.0.0 — `Table`'s `align` prop is gone; rows are centred
+
+`align?: "center" | "top"` and the `TableAlign` type are removed. `center` was the
+default and nothing shipped on `top`, so a caller passing nothing is unaffected.
+
+**Why it went, so nobody rebuilds it.** It was added to close a measured 12px spread
+between the first lines of cells carrying different numbers of lines. That number was
+never compared against a baseline: the kit's own canonical register (`tpl_item_list`)
+ships a **15px** spread, centred, and reads correctly. The case the prop existed for
+is the case the reference example already handles.
+
+It was also wrong as built. `top` moved the CELLS to a shared top edge but left the
+row's ordinal, leading checkbox and trailing menu centred — so on a tall row a row's
+number sat ~24px below the name it belonged to, and the register read as scatter.
+Aligning the chrome too is possible, but that yields a correct prop with no consumers.
+
+**If a register looks misaligned, the cell is too tall for a columnar row.** Centring
+works because register cells are bounded; when they cannot be, the row is meant to
+stack — `computeTableFit` already drops to stacked below the register floor. Reach for
+that, or move the content to a record page. Do not reintroduce a cross-axis knob.
+
 ## 31.0.0 — avatar `size` is a rung, not a pixel count
 
 `Avatar`, `MemberChip` and `GroupAvatar` no longer take `size?: number`. They take

package/docs/composition.md

@@ -402,17 +402,6 @@ running total. `tpl_item_list` is the reference. Paginate OUTSIDE (slice + `Pagi
 Right-hand columns align only if every trailing element is FIXED-width — give each trailing action
 a fixed `width`, so amount/status columns don't jitter.
 
-**Cells whose LINE COUNTS differ need `align="top"`.** Cells are centred by default, which is
-right while every cell is one line. The moment they are not — an identity cell carrying a
-supporting line (2), a status cell with a bar over a label (3), a member chip (1) — centring four
-different heights puts their four FIRST lines at four different heights, and the eye steps down
-and back up reading across one row. Measured on a live register: a 12px spread, closed to 2px by
-`align="top"`, which makes cells share a top edge so first lines land on one baseline. It governs
-the CELLS only; the ordinal, the leading checkbox and the trailing ⋯ stay centred, being one line
-by construction. Note a cell whose first element is a BAR or an image still starts its text below
-that element — top-aligning the cell does not top-align the text inside it, so put the line you
-want on the baseline first.
-
 ## Row actions are always-visible siblings — never hover-revealed, never nested
 
 A pressable row = a role-less surface (the hover/press wash covers the whole row) + an accessible

package/package.json

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

package/src/table.tsx

@@ -35,29 +35,6 @@ export interface TableColumn extends TableFitColumn {
   sortable?: boolean;
 }
 
-/**
- * How cells sit on the row's CROSS axis.
- *
- * `center` (the default) — every cell centred in the row. Right for a register
- * whose cells are one line each, which is most of them, and the reason this is
- * not being changed underneath anyone.
- *
- * `top` — cells share a top edge, so the FIRST LINE of every cell lands on one
- * baseline. Reach for it the moment cells carry different numbers of lines: an
- * identity cell with a supporting line (2), a status cell with a bar over a
- * label (3), a member chip (1) and a wrapped cell (2) centred together put four
- * first lines at four different heights, and the eye steps down and back up
- * across a single row. Measured on a live register: a 12px spread.
- *
- * It governs the CELLS only. The ordinal, the leading checkbox and the trailing
- * ⋯ stay centred in the row — they are chrome, they are one line by
- * construction, and pinning them to the top of a tall row would strand them.
- *
- * It applies to EVERY column row — pressable and read-only alike — because a
- * table that mixed the two would otherwise align its own rows differently from
- * each other. A STACKED row (tier 3) is unaffected: it has no columns to line up.
- */
-export type TableAlign = "center" | "top";
 
 interface TableCtx {
   columns: TableColumn[];
@@ -67,7 +44,6 @@ interface TableCtx {
   trailing: number;
   visibleKeys: ReadonlySet<string>;
   stacked: boolean;
-  align: TableAlign;
 }
 const TableContext = createContext<TableCtx | null>(null);
 
@@ -148,9 +124,6 @@ export interface TableProps {
   count?: number;
   /** Reserve a trailing gutter (px) for rows that render a `trailing` slot (a ⋯ / button). */
   trailing?: number;
-  /** How cells sit on the row's cross axis — see {@link TableAlign}. Default
-   *  `center`; pass `top` when cells carry different numbers of lines. */
-  align?: TableAlign;
   /** The `TableRow`s. */
   children: ReactNode;
 }
@@ -170,7 +143,7 @@ export interface TableProps {
  * keeps its current order). See `computeTableFit`.
  */
 export function Table(props: TableProps) {
-  const { columns, sort, onSort, sortLabels, selectAll, leading = 0, count, trailing = 0, align = "center", children } = props;
+  const { columns, sort, onSort, sortLabels, selectAll, leading = 0, count, trailing = 0, children } = props;
   const ordinal = count != null ? ORDINAL_W : 0;
   const rows = Children.toArray(children).filter(isValidElement);
 
@@ -188,7 +161,7 @@ export function Table(props: TableProps) {
   const visibleColumns = columns.filter((c) => fit.visibleKeys.has(c.key));
 
   return (
-    <TableContext.Provider value={{ columns, leading, ordinal, trailing, visibleKeys: fit.visibleKeys, stacked: fit.stacked, align }}>
+    <TableContext.Provider value={{ columns, leading, ordinal, trailing, visibleKeys: fit.visibleKeys, stacked: fit.stacked }}>
       {/* ONE layout node: without this wrapper the header band + body land as two
           direct flex children of the app's container, and a parent column `gap`
           (the standard section spacing) opens a hole between the header and rows. */}
@@ -341,10 +314,8 @@ export function TableRow(props: TableRowProps) {
     .map(({ cell, column }, i) => cloneElement(cell, { _column: column, _stacked: ctx.stacked, _primary: i === 0 }));
 
   // ONE style for the column row, shared by the pressable and read-only paths
-  // below. They rendered near-identical Views and `align` was added to only one,
-  // so a table mixing the two aligned its own rows differently — computing it
-  // once is what makes that divergence impossible rather than merely fixed.
-  const cellsStyle = [styles.cells, { minHeight }, ctx.align === "top" ? styles.cellsTop : null];
+  // below, which render near-identical Views.
+  const cellsStyle = [styles.cells, { minHeight }];
 
   const body = ctx.stacked ? (
     <View style={styles.stackedBody}>
@@ -529,11 +500,6 @@ const styles = StyleSheet.create({
     gap: COLUMN_GAP,
     zIndex: 1,
   },
-  // `align="top"` — see `TableAlign`. Overrides the centring above so unequal
-  // cells share a first-line baseline; the row's own chrome stays centred.
-  cellsTop: {
-    alignItems: "flex-start",
-  },
   // Leading/trailing gutters carry their own controls — lifted above the door
   // like the cells.
   slot: {