@lotics/ui 47.13.0 → 47.14.0

package/docs/data_entry.md

@@ -284,7 +284,10 @@ field they would be both a false claim and dead buttons. The **popover** editors
 (the resting box, wired as the popover trigger) with their OWN `useState` for open/draft/saving/
 error — a pick, not a keystroke, is the edit, so `useInlineEdit` doesn't fit. `onSave` is async
 either way: the saving spinner sits INSIDE the control at its right edge (never a sibling — that
-reflows); an error shows inline without losing the edit.
+reflows); an error shows inline without losing the edit. Saves overlap — the operator blurs one
+field and edits the next while the first round trip is out — so land each result with the
+updater form (`setForm((f) => ({ ...f, [key]: value }))`), never the form the save started from:
+a snapshot lands the other field back at its pre-edit value while the server holds both.
 
 To let a value be UNSET (a diff-write CLEAR — unassign, remove a due date, drop a select), pass
 **`onClear`** to `InlineSelect` / `InlineMemberSelect` / `InlineDatePicker`. It surfaces through
@@ -332,6 +335,15 @@ in a `DataGrid`), where a cell varying with its data breaks the row rhythm the g
 on a record surface; reserve in a table. Worked both ways in `dev/pages/inline_edit.tsx`
 § Multiline — the same value in a reserved field and a grown one, side by side.
 
+**In a table the WIDTH is reserved too, and by the CELL — the editor never states its own.** An
+inline editor is sized by what it holds: at rest a chip around the formatted value, focused a real
+input at its natural width. Put one in a `TableCell` with nothing bounding it and the two states
+are different boxes — the focused one grows sideways out of its column, over the neighbour, and
+takes the row's height with it, on the one row somebody is working in. So wrap it in a `View` with
+a fixed `width`, one number for the column, and both states land on the same rectangle.
+(`NumberInput` already refuses to state a width for exactly this reason — see its `width: "100%"`
+comment — but "fills its container" only bounds anything once a container has a size.)
+
 ### The row stack — `DetailTable` + `DetailRow`
 
 A STACK of rows lives in a `DetailTable` (label, value laid out like a TABLE: `labelWidth` /
@@ -762,12 +774,10 @@ chronological order; each phase owns ITS OWN fee rows + phase total (the invoice
 level up — money never reads as one pot); each closes with a SEQUENTIAL confirm gate that names
 its blockers ("Confirm check-in first."). The header status chip carries the phase.
 
-A LONG record surface pairs with a LEFT OUTLINE RAIL — `MenuButton` items + `useSectionNav`
-(scroll-spy: jump to a section, the highlight follows the scroll); the active item is
-`current={activeKey === key}`, the NAVIGATION state, never `selected`, which is listbox
-selection. On narrow containers the rail
-becomes a PINNED bar naming the current section that opens a full-page section-picker `Modal`. A
-per-phase dot on a rail item carries its confirmed state. A direction that is a TYPE (one record
+A LONG record surface pairs with a LEFT OUTLINE RAIL — `SectionNav` for the chrome,
+`useSectionNav` for the scroll-spy that feeds it `activeKey` and `jumpTo`. On narrow containers
+the same list collapses to a pinned bar naming the current section, which opens it as a picker
+anchored to that bar. A per-phase `issue` dot on an item carries its confirmed state. A direction that is a TYPE (one record
 per event) is instead a discriminator chosen ONCE at creation — a `SegmentedControl` in the
 create step, never a toggle on the record.
 

package/docs/reviewing.md

@@ -333,6 +333,13 @@ defect, so finding it on one panel is a reason to sweep the siblings.
   that drifts across the track means each one was offset by a guess at its own width.
 - **A row beat belongs to the PAGE** — collect every row primitive's height on one screen before
   calling any of them right.
+- **A bar's TRACK, not its card.** A chart whose label column and value column are FIXED spends
+  those pixels first, so a narrow pane leaves the plot itself with almost nothing — and a bar has
+  a minimum width, so every row draws the same short stub and the picture states that all the
+  entities are equal. It measures perfectly: the card is there, the rows are there, the figures
+  are right. Collect the track's width and each bar's, per row: a set of identical bar widths
+  under differing values is the finding, and so is any track under about a third of the card.
+  Same collection catches the axis underneath it, whose labels stack rather than crowd.
 - **Cards laid side by side: collect their BOTTOM edges, not their tops.** Tops align for free —
   the row sets them — so every horizontal check passes while the row ends on a staircase. One
   `getBoundingClientRect().bottom` per card in a row: more than one value is the finding, and the
@@ -342,6 +349,15 @@ defect, so finding it on one panel is a reason to sweep the siblings.
   neighbour, give the short card the fact it is missing, or re-pair the row. Screenshots are how
   this is noticed and the rects are how it is aimed: a staircase is obvious on sight and invisible
   to every probe above this one.
+- **A scroller's CONTENT against the scroller — measure both, never just the frame.** A horizontal
+  scroll region lays its child out in a ROW, so a grid, a strip or a rail narrower than its frame
+  keeps its own content width and leaves the rest of the box empty; a `min-width: 100%` on the
+  content container does not carry to the child, which is what makes this look already fixed in
+  the source. It never appears as the blank space it is — the child sits at its floor, so what
+  shows is its CELLS wrapping their values onto two lines while a third of the card beside them is
+  drawn on by nothing. Walk up from one cell to the ancestor whose parent has `overflow-x: auto`,
+  comparing widths at each step; a child narrower than that frame is the finding, and the fix is
+  to let the child grow, never to widen the cells by hand.
 
 → [composition.md](./composition.md) §"Canvas & content column", §"Cards — banded and composable", §"No dead rows", §"The register's own craft".
 
@@ -583,6 +599,20 @@ explicit one, so a set where "the important ones are annotated" sheds the unanno
 first — annotating some columns and not others is the failure, not the fix. If the register has
 more than one column, either all of them carry a rank or none do.
 
+**Then ask what the FIRST survivor is, because position outranks every rank.** Column 0 is the
+row's identity and never drops, whatever number it carries — so if the survivor list opens on
+something that does not identify the row (a time, a date, a sequence number), the finding is the
+column ORDER and no amount of re-ranking touches it. It hides behind the reading convention:
+anything read as a schedule is ordered time-first, which quietly makes the clock the one column a
+phone cannot lose. Chasing it through the ranks finds nothing, because the rank was never what
+kept it.
+
+**And count each survivor as a FACT, not a column.** Two columns holding one fact-pair — declared
+against counted, quoted against invoiced, planned against actual — mean nothing apart, so the fit
+drops whichever it reaches first and the survivor states a number with nothing to compare it to.
+That is worse than dropping both. Put the pair in ONE cell (`38 → 41`) and it survives or sheds
+whole, which also halves what the width has to carry.
+
 ### 8h-bis. A cell that grows a second line lifts its first
 **Collect** one column's first-line `y` MINUS its row's top, for every row; report the SET.
 

package/docs/templates.md

@@ -805,7 +805,7 @@ quick-capture templates. Top → bottom:
   so a walk-back is one handoff at a time.
 - **Danger zone** — with the full section anatomy (heading + description) like every other
   section; the fenced red `DangerZone` card is the section's BODY.
-- A LEFT OUTLINE RAIL (`MenuButton` + `useSectionNav`) — **the rail is the page's COMPLETE
+- A LEFT OUTLINE RAIL (`SectionNav` + `useSectionNav`) — **the rail is the page's COMPLETE
   map** (every section including Danger zone; subsections never join it) — headed by the
   bare circular `BackButton`; it scroll-spies the active section (`current={activeKey === key}`
   on each item — navigation, not selection), and on narrow containers becomes the pinned

package/examples/tpl_attendance.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors, solid } from "@lotics/ui/colors";
-import { Accordion, AccordionContent, AccordionHeader } from "@lotics/ui/accordion";
 import { ActionMenu } from "@lotics/ui/action_menu";
 import { Avatar } from "@lotics/ui/avatar";
 import { Badge } from "@lotics/ui/badge";
@@ -14,6 +13,7 @@ import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { Picker } from "@lotics/ui/picker";
+import { StateMatrix, type StateMatrixState } from "@lotics/ui/state_matrix";
 import { Tabs } from "@lotics/ui/tabs";
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -24,8 +24,9 @@ import { Tabs } from "@lotics/ui/tabs";
 // Grammar: zinc-50 canvas, header + month Picker, KPIStrip (four counts),
 // Tabs Today / This week. "Today" = one banded roster Card — each row
 // press-opens the employee workspace Drawer (◀ ▶ sequencing) and carries a
-// ⋯ ActionMenu with the day's quick fixes. "This week" = per-person Accordion
-// rows: five day markers, expanding to the day-by-day detail in place.
+// ⋯ ActionMenu with the day's quick fixes. "This week" = one StateMatrix —
+// a person per row, the weekdays named once across the top, a glyph per day;
+// a cell opens the same workspace Drawer.
 // ─────────────────────────────────────────────────────────────────────────────
 
 type TrangThai = "co_mat" | "di_muon" | "vang" | "nghi_phep";
@@ -66,12 +67,13 @@ const TRANG_THAI: Record<TrangThai, { label: string; color: "emerald" | "amber"
   nghi_phep: { label: "On leave", color: "blue" },
 };
 
-const NGAY_CONG: Record<NgayCong, { bg: string; border: string; label: string }> = {
-  du: { bg: solid("emerald"), border: solid("emerald"), label: "Full day" },
-  muon: { bg: solid("amber"), border: solid("amber"), label: "Late" },
-  vang: { bg: colors.white, border: solid("red"), label: "Absent" },
-  phep: { bg: solid("blue"), border: solid("blue"), label: "On leave" },
-};
+const NGAY_CONG: (StateMatrixState & { key: NgayCong })[] = [
+  { key: "du", label: "Full day", color: "emerald" },
+  { key: "muon", label: "Late", color: "amber" },
+  { key: "vang", label: "Absent", color: "red", shape: "hollow" },
+  { key: "phep", label: "On leave", color: "blue", shape: "dot" },
+];
+const ngayCong = (k: NgayCong) => NGAY_CONG.find((n) => n.key === k) ?? NGAY_CONG[0];
 
 const THANG = [
   { label: "April 2026", value: "2026-04" },
@@ -85,12 +87,9 @@ const TAB = [
 ];
 
 const NGAY_TUAN = ["T2", "T3", "T4", "T5", "T6"];
+const NGAY_TUAN_DAY = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
 
-const rowPad = { paddingHorizontal: 20, flexDirection: "row" as const, alignItems: "center" as const, gap: 12 };
 
-// Week-view widths (the Accordion grid: day cells + week total + disclosure).
-// The Today roster uses COLUMNS below, rendered by Table.
-const W = { tong: 72, cell: 22, chevron: 28 };
 
 const COLUMNS: TableColumn[] = [
   { key: "ten", label: "Employee", flex: 1, sortable: true },
@@ -104,12 +103,23 @@ function badgeLabel(nv: NhanVien): string {
   return nv.trangThai === "di_muon" && nv.muonPhut !== undefined ? `${tt.label} ${nv.muonPhut}ph` : tt.label;
 }
 
-/** One weekday marker — filled means worked, hollow red ring means absent. */
+/** One weekday marker in the drawer's day list — the same glyph the week grid draws. */
 function DayCell({ ngay }: { ngay: NgayCong }) {
-  const s = NGAY_CONG[ngay];
+  const s = ngayCong(ngay);
+  const hollow = s.shape === "hollow";
+  const dot = s.shape === "dot";
   return (
-    <View style={{ width: W.cell, alignItems: "center" }}>
-      <View style={{ width: 13, height: 13, borderRadius: 4, backgroundColor: s.bg, borderWidth: 1, borderColor: s.border }} />
+    <View style={{ width: 22, alignItems: "center" }}>
+      <View
+        style={{
+          width: dot ? 6 : 12,
+          height: dot ? 6 : 12,
+          borderRadius: dot ? 999 : 3,
+          backgroundColor: hollow ? colors.white : solid(s.color),
+          borderWidth: hollow ? 1.5 : 0,
+          borderColor: solid(s.color),
+        }}
+      />
     </View>
   );
 }
@@ -160,38 +170,6 @@ function HomNayRow({ nv, selected, onPress }: { nv: NhanVien; selected: boolean;
   );
 }
 
-/** Week row — read-only drill-down: expands in place to the day-by-day detail. */
-function TuanRow({ nv }: { nv: NhanVien }) {
-  return (
-    <Accordion>
-      <AccordionHeader accessibilityLabel={`Week detail for ${nv.ten}`}>
-        <View style={{ flex: 1, gap: 2 }}>
-          <Text size="sm" weight="medium" leading="tight" numberOfLines={1}>{nv.ten}</Text>
-          {/* Body size: `medium` above already separates the pair, so the rung
-              down would be a second demotion on the line that says WHICH
-              person this is. */}
-          <Text size="sm" color="muted" leading="tight" numberOfLines={1}>{nv.chucVu}</Text>
-        </View>
-        <View style={{ flexDirection: "row", gap: 10 }}>
-          {nv.tuan.map((ngay, i) => <DayCell key={NGAY_TUAN[i]} ngay={ngay} />)}
-        </View>
-        <View style={{ width: W.tong, alignItems: "flex-end" }}>
-          <Text size="sm" weight="medium" tabular>{nv.tongTuan}</Text>
-        </View>
-      </AccordionHeader>
-      <AccordionContent>
-        {nv.tuan.map((ngay, i) => (
-          <View key={NGAY_TUAN[i]} style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 32 }}>
-            <Text size="xs" color="muted" tabular style={{ width: 24 }}>{NGAY_TUAN[i]}</Text>
-            <DayCell ngay={ngay} />
-            <Text size="sm">{NGAY_CONG[ngay].label}</Text>
-          </View>
-        ))}
-      </AccordionContent>
-    </Accordion>
-  );
-}
-
 function KVRow({ label, value }: { label: string; value: string }) {
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
@@ -234,7 +212,7 @@ function NhanVienWorkspace({ nv }: { nv: NhanVien }) {
                 <View key={NGAY_TUAN[i]} style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 24 }}>
                   <Text size="xs" color="muted" tabular style={{ width: 24 }}>{NGAY_TUAN[i]}</Text>
                   <DayCell ngay={ngay} />
-                  <Text size="sm">{NGAY_CONG[ngay].label}</Text>
+                  <Text size="sm">{ngayCong(ngay).label}</Text>
                 </View>
               ))}
             </View>
@@ -258,7 +236,6 @@ export function TplAttendance() {
   const onSort = (key: string) => setSort(cycleSort(sort, key));
 
   const dem = (tt: TrangThai) => NHAN_VIEN.filter((nv) => nv.trangThai === tt).length;
-  const eyebrow = (label: string) => <Text size="xs" color="muted" weight="medium">{label}</Text>;
 
   // The Today roster, ordered by the active sort (Hours sorts numerically).
   const sorted = sortBy(NHAN_VIEN, sort, (nv, key) =>
@@ -310,35 +287,29 @@ export function TplAttendance() {
             </Table>
           </Card>
         ) : (
-          <Card style={{ padding: 0 }}>
-            <View style={[rowPad, { paddingVertical: 10 }]}>
-              <View style={{ flex: 1 }}>{eyebrow("Employee")}</View>
-              <View style={{ flexDirection: "row", gap: 10 }}>
-                {NGAY_TUAN.map((d) => (
-                  <View key={d} style={{ width: W.cell, alignItems: "center" }}>{eyebrow(d)}</View>
-                ))}
-              </View>
-              <View style={{ width: W.tong, alignItems: "flex-end" }}>{eyebrow("Week total")}</View>
-              <View style={{ width: W.chevron - 12 }} />
-            </View>
-            <View style={{ paddingHorizontal: 20 }}>
-              {NHAN_VIEN.map((nv) => (
-                <View key={nv.id}>
-                  <Divider />
-                  <TuanRow nv={nv} />
-                </View>
-              ))}
-            </View>
-            <Divider />
-            {/* legend band — what each marker means */}
-            <View style={[rowPad, { paddingVertical: 12, gap: 18 }]}>
-              {(Object.keys(NGAY_CONG) as NgayCong[]).map((k) => (
-                <View key={k} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-                  <DayCell ngay={k} />
-                  <Text size="xs" color="muted">{NGAY_CONG[k].label}</Text>
-                </View>
-              ))}
-            </View>
+          <Card>
+            {/* The grid owns its axis, its legend and its scroll; a cell is a door to the
+                same workspace the roster opens. Absent is HOLLOW and leave is a DOT so the
+                two kinds of "not here" read apart before the legend is consulted. */}
+            <StateMatrix
+              columns={NGAY_TUAN.map((d, i) => ({ key: d, label: d, current: i === 2 }))}
+              states={NGAY_CONG}
+              rows={NHAN_VIEN.map((nv) => ({
+                key: nv.id,
+                leading: <Avatar name={nv.ten} size="sm" />,
+                label: nv.ten,
+                total: nv.tongTuan,
+                cells: nv.tuan.map((ngay, i) => ({
+                  state: ngay,
+                  pressable: true,
+                  name: `${nv.ten}, ${NGAY_TUAN_DAY[i]}: ${ngayCong(ngay).label}`,
+                })),
+              }))}
+              onPressCell={(rowKey) => setOpenId(rowKey)}
+              rowLabelWidth={220}
+              cellWidth={36}
+              labels={{ total: "Week total" }}
+            />
           </Card>
         )}
       </View>

package/examples/tpl_pivot.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import { Pressable, ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
+import { Avatar } from "@lotics/ui/avatar";
 import { Badge } from "@lotics/ui/badge";
 import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
 import { Divider } from "@lotics/ui/divider";
@@ -149,7 +150,15 @@ export function TplPivot() {
           </CardHeader>
           <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
             <Matrix
-              rows={WAREHOUSES.map((w) => ({ key: w.key, label: w.label }))}
+              // A row is a SUBJECT, so it carries the same identity mark a
+              // warehouse wears anywhere else in the app — square, because a
+              // facility is an organization and not a person. The mark is drawn
+              // inside `rowLabelWidth`, so nothing else in the grid moves.
+              rows={WAREHOUSES.map((w) => ({
+                key: w.key,
+                label: w.label,
+                leading: <Avatar shape="square" size="sm" name={w.label} />,
+              }))}
               cols={CATEGORIES.map((c) => ({ key: c.key, label: c.label }))}
               value={value}
               selected={cell}

package/examples/tpl_record.tsx

@@ -23,14 +23,12 @@ import { Section, SectionHeading, SectionHeadingTitle, SectionHeadingMeta, Subse
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { Checklist, ChecklistActions, ChecklistGroup, ChecklistItem, ChecklistNote } from "@lotics/ui/checklist";
 import { DateStamp } from "@lotics/ui/date_stamp";
-import { MenuButton } from "@lotics/ui/menu_button";
-import { Popover, PopoverContent } from "@lotics/ui/popover";
+import { SectionNav } from "@lotics/ui/section_nav";
 import { useSectionNav } from "@lotics/ui/use_section_nav";
 import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "@lotics/ui/dialog";
 import { formatMoney } from "@lotics/ui/format_money";
 import { RecordSummary } from "@lotics/ui/record_summary";
 import { SummaryLine } from "@lotics/ui/summary_line";
-import { Badge } from "@lotics/ui/badge";
 import { daysUntil, deadlineAnnotation } from "@lotics/ui/deadline";
 import { useLoticsLocale } from "@lotics/ui/locale";
 import { Skeleton } from "@lotics/ui/skeleton";
@@ -2662,26 +2660,10 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   // since a reference is a field); everything after it is supplementary
   // (discussion, work, documents, money, lifecycle).
   //
-  // THE SECTION NAV IS HAND-ROLLED ON PURPOSE, for now. `useSectionNav` is the kit
-  // half — the scroll-spy, `activeKey`, `jumpTo`, unit-tested RN-free — and the
-  // CHROME below is this template's. It has exactly one consumer, and the kit's bar
-  // is the SECOND hand-roll, so lifting it today would ship an abstraction shaped by
-  // a single surface. `ReferenceField` sat here under this same note until a
-  // register's drawer needed it, and that is what let the extraction land on the
-  // PEEK contract instead of on the layout.
-  //
-  // When a second surface wants this, the contract worth lifting is: one section
-  // list, rendered as a RAIL where the container affords a gutter and as a pinned
-  // CURRENT-SECTION bar where it does not, the switch reading the CONTAINER (never
-  // the window); the picker anchored to the control that opens it, never a Modal
-  // that escapes its container; and the per-section attention dot, which is what
-  // makes the rail answer "where is the problem" and not merely "where am I".
-  //
-  // What is NOT the contract, and would poison it if lifted along: the issue-tone
-  // MAP below (its keys are this record's domain), the comments toggle (drawer
-  // chrome), the BackButton (page chrome), the gutter arithmetic (28 page / 20
-  // drawer, minus the trigger's padding) and the `wide` threshold. One consumer
-  // cannot tell those apart from the contract — two can.
+  // `SectionNav` draws both forms; `useSectionNav` spies the scroll. What stays
+  // HERE is what reads this record's domain or this page's layout: the issue map
+  // below (its keys are this record's), the BackButton, the gutter arithmetic
+  // and the `wide` threshold.
   const SECTIONS = [
     // PROGRESS leads. The header already IDENTIFIES the record — it titles the
     // customer and carries the code and city beneath it — so the first section
@@ -2694,7 +2676,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     //
     // The rail lists sections in PAGE order, or the scroll-spy highlights one
     // entry while the reader is looking at another.
-    { key: "progress", label: "Progress", icon: "git-branch" },
+    { key: "progress", label: "Progress", icon: "trending-up" },
     { key: "activity", label: "Activity", icon: "message-square" },
     { key: "general", label: "General", icon: "file-text" },
     // Only a SECTION when the page is too narrow to seat the panel — so the wide
@@ -2749,15 +2731,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     transport: scheduleNote !== "on-time" ? "warning" : undefined,
     billing: customer === null ? "warning" : undefined,
   };
-  // Narrow: the rail becomes a pinned bar naming the CURRENT section; tapping
-  // it opens a full-page section picker (Escape / the close control dismiss).
-  const [sectionsOpen, setSectionsOpen] = useState(false);
-  // The picker anchors to the BAR BUTTON, so it is scoped to whatever container
-  // that button sits in — the page, or a drawer. A Modal escaped the container
-  // and took the whole window, which inside a drawer covered the register behind
-  // it. `triggerRef` (not `PopoverTrigger`) because the trigger IS a Button and a
-  // button must not nest in another pressable.
-  const sectionsAnchor = useRef<View>(null);
   const [pageWidth, setPageWidth] = useState<number | null>(null);
   // THREE COLUMNS: the outline rail in the left gutter, the record, and the
   // discussion panel in the right. The right gutter used to be empty — reserved
@@ -2853,63 +2826,21 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     <View style={{ flex: 1, backgroundColor: colors.white, opacity: pageWidth == null ? 0 : 1 }} onLayout={(e) => setPageWidth(e.nativeEvent.layout.width)}>
       {pageWidth == null || wide ? null : (
         // Narrow: a pinned bar names the CURRENT section (the spy keeps it
-        // honest while scrolling); tapping opens the full-page section picker —
-        // no tab strip the thumb has to scroll.
-        // 18, not 12: the bar's gutter is derived from the CONTENT's (28) minus the
-        // trigger's own horizontal padding (10), so the section NAME starts on the
-        // same left edge as every section title below it. A fill-less button shows
-        // no box, so its ink is what the eye lines up — 18 + 10 = 28. Set the bar,
-        // not a negative margin on the button: the gutter belongs to the bar, and
-        // one number here cannot drift out of step with itself.
-        <View style={{ borderBottomWidth: 1, borderBottomColor: colors.zinc[200], paddingHorizontal: (isDrawer ? DRAWER_GUTTER : 28) - 10, paddingVertical: 6, flexDirection: "row", alignItems: "center", gap: 8 }}>
-          {/* narrow keeps the standard too — the bare back glyph beside the
-              section bar (the rail that would carry it is collapsed). A DRAWER
-              already has one in its own header; two would be two exits. */}
-          {isDrawer ? null : <BackButton onPress={() => {}} />}
-          <Popover open={sectionsOpen} onOpenChange={setSectionsOpen} triggerRef={sectionsAnchor} side="bottom" align="start">
-            <View ref={sectionsAnchor}>
-              {/* MUTED, not `secondary`: this names WHERE YOU ARE, so it is a
-                  position readout that happens to be pressable, and a filled chip
-                  competes with the record's own actions for the eye. The usual cost
-                  of a fill-less button does not apply here — it is chrome in a bar
-                  with its own gutter, not a verb aligned to a column of text, so
-                  there is nothing below it for its ink to line up with. The glyph
-                  carries the affordance: `list-collapse` says WHAT the list is,
-                  where `Switcher` uses a chevron for the same shape. */}
-              <Button
-                title={SECTIONS.find((sec) => sec.key === nav.activeKey)?.label ?? "Sections"}
-                color="muted"
-                onPress={() => setSectionsOpen(true)}
-              />
-            </View>
-            <PopoverContent style={{ width: 248 }} disableBodyScroll>
-              <View style={{ gap: 2 }}>
-                {SECTIONS.map((sec) => (
-                  <MenuButton
-                    key={sec.key}
-                    icon={sec.icon}
-                    title={sec.label}
-                    current={nav.activeKey === sec.key}
-                    onPress={() => {
-                      setSectionsOpen(false);
-                      nav.jumpTo(sec.key);
-                    }}
-                  />
-                ))}
-              </View>
-            </PopoverContent>
-          </Popover>
-          <View style={{ flex: 1 }} />
-          {/* WHERE it sits carries the meaning: sections on the left (where you
-              ARE), the discussion on the right (what is being SAID) — the same
-              two poles the wide layout puts in its two gutters. */}
-          {/* A LABEL with its count, not a bare glyph: this is one of the two
-              things the body can show, so it has to say which — and how much is
-              waiting, which is what decides whether you look now. In drawer chrome
-              it toggles the body; on a narrow page it still opens the sheet, which
-              is that layout's panel. The pair reads as a switch: whichever side the
-              body is showing wears the filled `secondary`. */}
-        </View>
+        // honest while scrolling); tapping opens the section picker — no tab
+        // strip the thumb has to scroll. The bar's gutter is the CONTENT's, and
+        // `SectionNav` takes the trigger's own padding off it so the section
+        // NAME starts on the same left edge as every section title below.
+        //
+        // Narrow keeps the back standard too, EXCEPT in a drawer, which already
+        // has one in its own header — two would be two exits.
+        <SectionNav
+          items={SECTIONS.map((sec) => ({ ...sec, issue: sectionIssue[sec.key] }))}
+          activeKey={nav.activeKey}
+          onJump={nav.jumpTo}
+          wide={false}
+          barGutter={isDrawer ? DRAWER_GUTTER : 28}
+          back={isDrawer ? undefined : <BackButton onPress={() => {}} />}
+        />
       )}
     <View style={{ flex: 1 }}>
     {/* FULL-WIDTH scroller: the whole page scrolls, wherever the pointer is. */}
@@ -5239,23 +5170,18 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         scrolls, and out of the scroll row so the page stays wheel-scrollable
         edge to edge. */}
     {pageWidth == null || !wide ? null : (
-      <View style={{ position: "absolute", top: 28, left: railLeft, width: RAIL_W, gap: 10 }}>
-        {/* THE PANEL STANDARD: it opens with BACK — the circular glyph, the
-            collection it returns to named beside it (the register route in a
-            real app), visually apart from the outline items. */}
-        <BackButton label="Records" onPress={() => {}} />
-        <View style={{ gap: 2 }}>
-          {SECTIONS.filter((sec) => sec.key !== "comments").map((sec) => (
-            <MenuButton
-              key={sec.key}
-              icon={sec.icon}
-              title={sec.label}
-              current={activeSection === sec.key}
-              right={sectionIssue[sec.key] ? <Badge variant="dot" color={sectionIssue[sec.key] === "danger" ? "red" : "amber"} /> : undefined}
-              onPress={() => nav.jumpTo(sec.key)}
-            />
-          ))}
-        </View>
+      <View style={{ position: "absolute", top: 28, left: railLeft }}>
+        <SectionNav
+          /* Comments is a section only while the page is too narrow to seat the
+             panel, so the wide rail drops it rather than offering a jump to
+             something that is not there. */
+          items={SECTIONS.filter((sec) => sec.key !== "comments").map((sec) => ({ ...sec, issue: sectionIssue[sec.key] }))}
+          activeKey={activeSection}
+          onJump={nav.jumpTo}
+          wide
+          railWidth={RAIL_W}
+          back={<BackButton label="Records" onPress={() => {}} />}
+        />
       </View>
     )}
     </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.13.0",
+  "version": "47.14.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -71,6 +71,7 @@
     "./data_grid": "./src/data_grid.tsx",
     "./date_calendar": "./src/date_calendar.tsx",
     "./date_filter": "./src/date_filter.tsx",
+    "./date_filter_presets": "./src/date_filter_presets.ts",
     "./date_picker": "./src/date_picker.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
     "./date_stamp": "./src/date_stamp.tsx",
@@ -189,6 +190,8 @@
     "./markdown_types": "./src/markdown_types.ts",
     "./remark_gfm_safe": "./src/remark_gfm_safe.ts",
     "./matrix": "./src/matrix.tsx",
+    "./month_math": "./src/month_math.ts",
+    "./month_stepper": "./src/month_stepper.tsx",
     "./matrix_totals": "./src/matrix_totals.ts",
     "./media_player": {
       "react-native": "./src/media_player.tsx",
@@ -209,6 +212,7 @@
     "./option_badge": "./src/option_badge.tsx",
     "./option_list": "./src/option_list.tsx",
     "./option_picker": "./src/option_picker.tsx",
+    "./organization_name": "./src/organization_name.ts",
     "./overlay_layer": "./src/overlay_layer.ts",
     "./overlay_scope": "./src/overlay_scope.ts",
     "./page_content": "./src/page_content.tsx",
@@ -243,6 +247,7 @@
     "./search_match": "./src/search_match.ts",
     "./section_card": "./src/section_card.tsx",
     "./section_heading": "./src/section_heading.tsx",
+    "./section_nav": "./src/section_nav.tsx",
     "./section_stack": "./src/section_stack.tsx",
     "./segmented_control": "./src/segmented_control.tsx",
     "./select": "./src/select.tsx",
@@ -267,6 +272,7 @@
     "./stacked_bar_chart": "./src/stacked_bar_chart.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
     "./status_badge": "./src/status_badge.tsx",
+    "./state_matrix": "./src/state_matrix.tsx",
     "./status_grid": "./src/status_grid.tsx",
     "./step_progress": "./src/step_progress.tsx",
     "./stepper": "./src/stepper.tsx",
@@ -295,6 +301,8 @@
     "./time_options": "./src/time_options.ts",
     "./time_picker": "./src/time_picker.tsx",
     "./timeline": "./src/timeline.tsx",
+    "./timetable": "./src/timetable.tsx",
+    "./toggle_strip": "./src/toggle_strip.tsx",
     "./tokens": "./src/tokens.ts",
     "./tooltip": "./src/tooltip.tsx",
     "./trend_chip": "./src/trend_chip.tsx",

package/src/avatar_size.ts

@@ -48,14 +48,15 @@ export const AVATAR_PX: Record<AvatarSize, number> = {
    *  beside it. It was 48, which anchored to nothing: the bar's other controls
    *  are 40, and a 48px circle among them reads as the one thing that got out.
    *
-   *  **In a register, the rung follows what the row IS ABOUT, not the density.**
-   *  Where a person is one FIELD of the row — an owner, an assignee beside a
-   *  dozen other columns — the figure is a value like any other and takes `md`.
-   *  Where the person is the row's SUBJECT (a league table of reps, a roster,
-   *  anything grouped BY member), the avatar is that row's leading figure and
-   *  takes this rung; at `md` such a register reads as a list of numbers that
-   *  happens to carry faces. Budget for it: this rung is 12px wider than `md`,
-   *  and in a table it takes those 12 from the flexible column the name is in. */
+   *  **In a register, the rung follows what the reader AIMS AT, not the
+   *  density.** The row's subject takes this rung — and so does an ORGANIZATION
+   *  in its own column, because a book of movements is scanned by whose they
+   *  are, and at `md` such a register reads as a list of numbers that happens to
+   *  carry faces. `md` is for a mark incidental to the value the reader came for
+   *  — a person in an owner or assignee column, where the face is competing with
+   *  the row's own mark anyway. Budget for it: this rung is 12px wider than
+   *  `md`, and in a table it takes those 12 from the flexible column the name is
+   *  in, so a column too tight to seat one takes `md`. */
   lg: 40,
   /** A profile's own header. */
   xl: 72,