@lotics/ui 45.10.0 → 45.10.1

package/docs/testing.md

@@ -3,8 +3,7 @@
 Three kit anatomies where the accessibility tree says one thing and an automated
 driver has to do another. Each is **by design** — the shape that makes the
 component correct for a keyboard and a screen reader is the shape that defeats a
-naive `click()` — so each will read as a bug the first time, and the wrong
-reaction (`force: true`, or "the component is broken") costs a debugging session.
+naive `click()` — so each will read as a bug the first time.
 
 Everything here is true wherever the kit renders. The iframe that a Lotics app
 runs inside adds one more rule on top — `lotics docs building_an_app` § 8.
@@ -25,9 +24,7 @@ So the a11y tree shows `button "Open ACME-1042"`, and clicking it fails:
 subtree intercepts pointer events
 ```
 
-That is the design working, not a defect — the visible row is above the door
-precisely so a pointer lands on the row rather than the door. Drive it the way a
-mouse user does:
+That is the design working, not a defect. Drive it the way a mouse user does:
 
 - **click the row container** — the `generic [cursor=pointer]` wrapping the door;
   the click bubbles to `PressableRow`
@@ -66,5 +63,4 @@ and the window are the right ones. From the dragged element,
 
 Then check **both** halves: re-snapshot for the optimistic move, and re-read the
 record to confirm the mutation actually persisted. An optimistic move that never
-reached the server looks identical on screen, which is the whole reason to check
-the second one.
+reached the server looks identical on screen.

package/package.json

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

package/src/pressable_row.tsx

@@ -14,10 +14,11 @@ export interface PressableRowProps {
   marked?: boolean;
   /**
    * - "register" (THE record-list default): a rounded row whose hover/open/`marked`
-   *   wash spans the FULL row width (incl. nested controls); content stays on the
-   *   20px column gutter so a `Table` header and its cells still align. The `Table`
-   *   separates rows with a `Divider` (the wash is the hover/selection state, the
-   *   hairline the resting separation) — every app inherits this register look.
+   *   wash spans the FULL row width (incl. nested controls); the wash BLEEDS outward
+   *   and the content stays on the container's own edge, so a `Table` header and its
+   *   cells still align. The `Table` draws NOTHING between rows — it spaces them by
+   *   4px and the wash is the only mark a row makes — every app inherits this
+   *   register look.
    * - "bleed" (legacy): px-20, square wash to the edges, `Divider`-separated.
    *   The pre-rounded register row — kept for an edge-to-edge data grid that
    *   genuinely wants hard rules, not the floating default.
@@ -143,7 +144,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: ROW_WASH_BLEED,
     marginHorizontal: -ROW_WASH_BLEED,
   },
-  // Square, full-bleed — lines up with the Dividers between register rows. Legacy.
+  // Square, full-bleed — the pre-rounded register row, for a grid that draws its own
+  // rules between rows. The register variant draws none. Legacy.
   bleed: {
     paddingHorizontal: ROW_WASH_BLEED,
     marginHorizontal: -ROW_WASH_BLEED,

package/src/table.tsx

@@ -181,9 +181,9 @@ export interface TableProps {
  * THE columnar register — define `columns` once and the header band + every row's
  * cell widths come from it, so they can't drift (no hand-rolled `W` map, no
  * `<View style={{width}}>` per cell). Renders a full-bleed eyebrow header (a
- * sortable column becomes a `SortHeader`) and its `TableRow` children,
- * `Divider`-separated. Compose `TableRow` / `TableCell` for the body. For a
- * non-columnar list (entity piles, card stacks) use `PressableRow` directly.
+ * sortable column becomes a `SortHeader`) and its `TableRow` children, spaced by
+ * 4px with no rule between them. Compose `TableRow` / `TableCell` for the body.
+ * For a non-columnar list (entity piles, card stacks) use `PressableRow` directly.
  *
  * The register is container-responsive with no prop: when the measured width
  * can't fit every column it drops droppable columns by `priority`, and below
@@ -312,10 +312,10 @@ export interface TableGroupProps {
  * column: that is a sort, and it costs a band of chrome per value while telling
  * them what the cell beside it says.
  *
- * The band separates itself with AIR rather than a rule, because it is the
- * biggest boundary inside the register and the row hairlines are the smallest —
- * drawing both as lines makes them compete. The heading also takes no rule
- * beneath it, which would orphan the title from the rows it opens.
+ * The band separates itself with AIR rather than a rule, because the register
+ * already separates its own rows with air and keeps ONE line — the band capping
+ * the columns — so a second would compete with it. The heading takes no rule
+ * beneath it either, which would orphan the title from the rows it opens.
  *
  * A group's rows keep their own `ordinal` numbering if they carry one: restart
  * inside each band, where the reader's question is "which of these" rather than
@@ -609,8 +609,8 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingBottom: 16,
   },
-  // A hairline under the column header anchors the columns; the rows below it are
-  // Divider-separated.
+  // A hairline under the column header anchors the columns; the rows below it carry
+  // none — see the file header for why that boundary is the register's only rule.
   headerBandFilled: {
     // The literal neutral, not `accent_wash`: this band is a lid on the columns,
     // never a "you are here", and reading it through the brand token made a
@@ -644,11 +644,12 @@ const styles = StyleSheet.create({
   body: {
     gap: 4,
   },
-  // Air, not a rule. A band boundary is the LARGEST break inside a register and
-  // the row hairlines are the smallest; drawing both as lines makes the two
-  // compete and the grouping stops reading. The first band's heading sits under
-  // the column band's own hairline, so it takes less top space than the ones
-  // that follow — handled by the heading's own padding rather than by the caller.
+  // Air, not a rule. A band boundary is the LARGEST break inside a register, and the
+  // register does not rule the smallest one either — rows are spaced, not ruled — so
+  // a line here would be a second rule competing with the column band's, and the
+  // grouping stops reading. The first band's heading sits under the column band's own
+  // hairline, so it takes less top space than the ones that follow — handled by the
+  // heading's own padding rather than by the caller.
   groupHeading: {
     flexDirection: "row",
     alignItems: "center",