@lotics/ui 23.1.1 → 24.0.0

package/examples/tpl_record.tsx

@@ -13,17 +13,20 @@ import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Callout, CalloutText } from "@lotics/ui/callout";
 import { Inset } from "@lotics/ui/inset";
-import { DialogSectionHeadingTitle, Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
+import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { Pipeline, PipelineActions, PipelineField, PipelineNote, PipelineStage } from "@lotics/ui/pipeline";
 import { TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
 import { MenuButton } from "@lotics/ui/menu_button";
-import { Modal, ModalBody, ModalHeader } from "@lotics/ui/modal";
+import { Popover, PopoverContent } from "@lotics/ui/popover";
 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";
 import { CommentList, type CommentEditFormProps, type ThreadComment, type ThreadFile } from "@lotics/ui/comments_thread";
 import { Composer } from "@lotics/ui/composer";
@@ -38,7 +41,7 @@ import { InlineSelect } from "@lotics/ui/inline_select";
 import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
 import { MemberSelect, type MemberSelectMember } from "@lotics/ui/member_select";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { Drawer } from "@lotics/ui/drawer";
 import { EmptyState } from "@lotics/ui/empty_state";
 import { FormField } from "@lotics/ui/form_field";
 import { TextInputField } from "@lotics/ui/text_input_field";
@@ -53,13 +56,11 @@ import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Finding, FindingComparison } from "@lotics/ui/finding";
 import { FormTextInput } from "@lotics/ui/form_text_input";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { Popover, PopoverContent } from "@lotics/ui/popover";
-import { ChipGroup } from "@lotics/ui/chip_group";
+import { ChipGroup, type ChipOption } from "@lotics/ui/chip_group";
 import { Sequence, SequenceItem, SEQUENCE_INSET } from "@lotics/ui/sequence";
-import { TextLink } from "@lotics/ui/text_link";
+import { ReferenceField } from "@lotics/ui/reference_field";
+import { TextButton } from "@lotics/ui/text_button";
 import { InlineButton } from "@lotics/ui/inline_button";
-import { InlineEditView } from "@lotics/ui/inline_edit";
-import { RadioPicker } from "@lotics/ui/radio_picker";
 import { useSelection } from "@lotics/ui/use_selection";
 import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
 import { CardSelectItem } from "@lotics/ui/card_select_item";
@@ -88,7 +89,7 @@ type Part = UIMessagePart<UIDataTypes, UITools>;
 // THE SECTION PATTERNS (what each is, when to use it):
 // - General         — the CORE FACTS: a headingless key-facts lead + named
 //                     groups + Classification (the right-input-per-field
-//                     showcase) + System ids. Always present, first in rail.
+//                     showcase). Always present, first in rail.
 // - Comments        — the discussion thread. When people collaborate here.
 // - Progress        — WHERE the record sits: the desks as a `Pipeline`, each
 //                     owning its own facts, the live one owning the act that
@@ -437,9 +438,21 @@ const iso = (d: Date): string => d.toISOString().slice(0, 10);
 
 // ── the FEES ledger — the DETAILED money view (both directions), distinct
 // from Billing's invoice DOCUMENTS: every fee the record incurs or charges,
-// with its party, due date, proof reference and paid state. The register +
-// right-docked entity drawer (◀ ▶ steps the rows) is the drill-down law:
-// every child row opens to its FULL detail.
+// with its party, due date, proof reference and paid state.
+//
+// The drill-down law for a CHILD COLLECTION inside a record: the row EXPANDS
+// (`TableRow` `detail` + `expanded`), it does not open a drawer. A register
+// screen's row still docks a workspace Drawer — on a list screen there is
+// nowhere else for the detail to go — but here the record page IS the context
+// the drawer was recreating, so docking one charged for navigation twice and
+// took the surrounding rows away to show nine fields.
+//
+// This is also why the ledger is not simply WIDER. All nine fields as columns
+// demand 946px + 112 gap + 40 gutter = 1098px against a 720px reading column;
+// over budget `table_fit` drops droppable columns by priority until the rest
+// fit, which at 720 leaves about the five below. Widening the register does not
+// display VAT / Invoice no / Note — it drops them silently. And `note` is prose:
+// it has no column width at any measure.
 type FeeDirection = "charge" | "cost";
 interface Fee {
   id: string;
@@ -463,7 +476,7 @@ const FEE_SEED: Fee[] = [
 ];
 // `priority` = the mobile contract: Party then Type drop first on a narrow
 // container, Amount + Status survive with the identity; at the floor the rows
-// STACK label-over-value — and the entity drawer always carries the full fee.
+// STACK label-over-value — and the expansion always carries the full fee.
 const FEE_COLUMNS: TableColumn[] = [
   { key: "fee", label: "Fee", flex: 1 },
   { key: "type", label: "Type", width: 72, priority: 3 },
@@ -565,6 +578,23 @@ const SERVICE_LEVELS: PickerOption<string>[] = [
   { value: "economy", label: "Economy" },
   { value: "scheduled", label: "Scheduled" },
 ];
+// Both of these were RadioPickers rendered INLINE on the record: 4 and 3 options
+// permanently expanded, 232px and 156px against a 40px field grid — 49% of the
+// Classification group, spent on values a reader almost never changes. A pick from a
+// short list is the SAME SHAPE as Service level above, so it gets the same control;
+// the gloss that justified the radio rides into the dropdown as `data.hint`, which is
+// where a description is read anyway — while CHOOSING, not on every later read.
+const FULFILMENT_STATUSES: PickerOption<string, { hint?: string }>[] = [
+  { value: "ready", label: "Ready at the warehouse" },
+  { value: "production", label: "In production", data: { hint: "Confirmed ready by the ship date." } },
+  { value: "awaiting", label: "Awaiting inbound supply" },
+  { value: "partial", label: "Partial", data: { hint: "Ships in two lots — the rest follows on the next run." } },
+];
+const INSURANCE_LEVELS: ChipOption<string>[] = [
+  { value: "none", label: "None" },
+  { value: "standard", label: "Standard" },
+  { value: "all_risk", label: "All-risk" },
+];
 const SERVICE_LEVEL_DESC: Record<string, string> = {
   standard: "Door to door on the regular schedule.",
   express: "Priority handling — the first available departure.",
@@ -582,134 +612,6 @@ const DESTINATIONS: PickerOption<string, { country: string }>[] = [
   { value: "dubai", label: "Dubai", data: { country: "United Arab Emirates" } },
 ];
 
-/**
- * A REFERENCE to another record, rendered as a FIELD VALUE.
- *
- * It wears the inline editor's resting surface — same 40px band, same zinc-50
- * chip, same radius — so a pointer at another record sits in the value column
- * exactly like the editors above and below it, rather than announcing itself as
- * a different species of thing. (The chip's usual promise is "editable"; here it
- * reads as "pressable", which is what `InlineSelect` and `InlineDatePicker`
- * already mean by it — they open a popover too.)
- *
- * THREE acts, placed by how OFTEN they happen and how much they cost to undo:
- *   press the value → the facts, in a popover (free, so it's the whole surface)
- *   Open, inside    → the record itself (the common act, so it stays in sight)
- *   Remove, in the peek → detach (destructive and rare, so it sits one layer in)
- *
- * Remove earns its depth twice over. It is the answer to the question the PEEK
- * asks — "is this the right one?" — so the check and the correction are the same
- * gesture; and a detach link repeated down a column of references is noise in the
- * scan path for an act most readers never perform. Depth is not a hiding place
- * here: pressing a field-shaped value is the first thing anyone tries, and the
- * verb is plainly visible once open.
- *
- * The anatomy is the one a container-with-controls REQUIRES and that hand-rolling
- * reliably gets wrong: the surface is a role-less, non-focusable `Pressable` (a
- * button must never contain a button), an empty `PressDoor` sibling carries the
- * tab stop / accessible name / focus ring, and the interior verb lifts above the
- * door on `zIndex`. Hover is tracked on the container itself so the border stays
- * lit while the pointer crosses Open — react-native-web otherwise releases the
- * parent's hover to the innermost pressable and the edge flickers out.
- *
- * This is a TEMPLATE composition, not yet a kit primitive: it earns extraction on
- * its second consumer, and that extraction is about this ANATOMY, not the layout.
- */
-function ReferenceValue(props: {
-  name: string;
-  code?: string;
-  facts: { label: string; value: string }[];
-  /** Announced name of the peek trigger, e.g. "Harbor Freight Lines — details". */
-  accessibilityLabel: string;
-  onOpen: () => void;
-  openLabel: string;
-  /** Detach — omit where the link cannot be broken (a handoff's sibling record). */
-  onRemove?: () => void;
-}) {
-  const { name, code, facts, accessibilityLabel, onOpen, openLabel, onRemove } = props;
-  const anchor = useRef<View>(null);
-  const [peekOpen, setPeekOpen] = useState(false);
-  return (
-    <Popover open={peekOpen} onOpenChange={setPeekOpen} triggerRef={anchor} side="bottom" align="start">
-      {/* THE KIT'S FIELD, not a lookalike. This was hand-rolled — a Pressable
-          wearing copies of the field's border, radius, height and hover — and it
-          promptly fell out of step the moment the kit's field changed: it kept a
-          pointer cursor no editor has, and missed the hover TINT that every other
-          field gained. A copied surface always drifts; the fix is to stop copying.
-
-          `InlineEditView` gives all of it: the surface and its states, the verb as
-          a SIBLING of the press target (a button must not contain a button), hover
-          tracked on the box so the border holds while the pointer crosses the
-          verb, and focus-within. `anchorRef` hands the popover the FIELD's box —
-          the press target inside is narrower, and a peek anchored there would
-          open misaligned with the row it describes.
-
-          OPEN, never toggle: the press target and the popover's own dismissal
-          would otherwise fight, and idempotent `true` makes the pair safe. The
-          popover closes on outside press / Escape. */}
-      <InlineEditView
-        anchorRef={anchor}
-        accessibilityLabel={accessibilityLabel}
-        onPress={() => setPeekOpen(true)}
-        active={peekOpen}
-        display={
-          <View style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: 6 }}>
-            <Text size="sm" numberOfLines={1}>{name}</Text>
-            {code ? <Text size="sm" color="muted" numberOfLines={1}>{code}</Text> : null}
-          </View>
-        }
-        actions={
-          /* Dismiss the peek on the way out: the verb sits inside the popover's
-             own trigger and stops propagation, so nothing else will close it —
-             and a summary left hanging over the record you just opened describes
-             what you are now looking at. */
-          <InlineButton title="Open" accessibilityLabel={openLabel} onPress={() => { setPeekOpen(false); onOpen(); }} />
-        }
-      />
-      {/* THE PEEK'S FORMAT — the kit's own grammar, not a bespoke one. A popover
-          is dialog-scale, so the identity takes the ramp's dialog rung
-          (`DialogSectionHeadingTitle`, ####) with the code as its description
-          rather than a hand-picked font weight; the facts are `DetailRow`s, which
-          is what label-beside-value IS everywhere else on this page; and the
-          destructive verb is fenced off by a `Divider` instead of floating after
-          the last fact. Width matches `Peek`'s own content width so every peek in
-          an app is the same object.
-          `labelWidth` is the one override, and it is not arbitrary: a `DetailTable`
-          STACKS its columns below `labelWidth + MIN_CONTROL_WIDTH + 24`, so the
-          page's 150 would flip a 320 popover into stacked form grammar. 88 keeps
-          the summary side-by-side, which is the whole point of a glance. */}
-      <PopoverContent style={{ width: 320 }} disableBodyScroll>
-        <View style={{ gap: 12 }}>
-          <DialogSectionHeadingTitle description={code}>{name}</DialogSectionHeadingTitle>
-          <DetailTable labelWidth={88}>
-            {facts.map((f) => (
-              <DetailRow key={f.label} label={f.label} flat>
-                <InlineStatic value={f.value || "—"} />
-              </DetailRow>
-            ))}
-          </DetailTable>
-          {/* THE FOOTER — destructive LEFT, go-to RIGHT, the kit's convention.
-              Open repeats the verb on the surface deliberately: the popover now
-              covers the button that opened it, and having read the facts, "take me
-              there" is the next move. That is the shape `Peek` prescribes — a
-              summary with one action to the full record. Remove closes the peek
-              first, because the surface it is anchored to is about to stop
-              existing. */}
-          <Divider />
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            {onRemove ? (
-              // No icon: an ✕ beside "Remove" says it twice, and the glyph alone
-              // made this read as the popover's dismiss rather than a decision.
-              <Button title="Remove" color="danger" onPress={() => { setPeekOpen(false); onRemove(); }} />
-            ) : null}
-            <View style={{ flex: 1 }} />
-            <Button title="Open" color="secondary" onPress={() => { setPeekOpen(false); onOpen(); }} />
-          </View>
-        </View>
-      </PopoverContent>
-    </Popover>
-  );
-}
 
 /** One stop on a route. `place` + when the movement is expected there; the ROLE
  *  (origin, via, destination) is DERIVED from position, never stored — a stored
@@ -783,8 +685,7 @@ function RouteStops({ stops, onChange }: { stops: Stop[]; onChange: (next: Stop[
       <View style={{ flexDirection: "row", paddingLeft: SEQUENCE_INSET }}>
         {/* A stop is added BEFORE the destination — a new leg is always in the
             middle of a journey; nobody adds one past the end. */}
-        <TextLink
-          size="sm"
+        <TextButton
           onPress={() =>
             onChange([
               ...stops.slice(0, -1),
@@ -794,7 +695,7 @@ function RouteStops({ stops, onChange }: { stops: Stop[]; onChange: (next: Stop[
           }
         >
           Add stop
-        </TextLink>
+        </TextButton>
       </View>
     </View>
   );
@@ -815,7 +716,7 @@ function PartyRow({ role, rec, options, placeholder, onPick, onOpen, onRemove }:
   return (
     <DetailRow label={role}>
       {rec ? (
-        <ReferenceValue
+        <ReferenceField
           name={rec.name}
           code={rec.code}
           facts={[
@@ -838,7 +739,21 @@ function PartyRow({ role, rec, options, placeholder, onPick, onOpen, onRemove }:
   );
 }
 
-export function TplRecord() {
+/** `page` (default) = the record's own screen: an outline rail in the left gutter
+ *  and the discussion docked in the right. `drawer` = the same CONTENT inside a
+ *  register's workspace `Drawer`, which owns its own header, close and sequencing.
+ *
+ *  It is a MODE, not a second component, and that is the point: a register's
+ *  drawer showing a COPY of this surface is how the two drifted apart the first
+ *  time — a checklist here, a pipeline there. Rendering one component in two
+ *  chromes makes them identical by construction.
+ *
+ *  Most of the difference needs no flag: at a drawer's width `wide` is already
+ *  false, so the rail, the panel and the mirrored gutters collapse on their own.
+ *  What the flag decides is what a nested surface must NOT do — open comments in
+ *  a Drawer inside a Drawer, or draw a back button over the one the Drawer has. */
+export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?: "page" | "drawer"; code?: string } = {}) {
+  const isDrawer = chrome === "drawer";
   const id = useRef(1);
   const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
   const { small } = useScreenSize();
@@ -870,9 +785,13 @@ export function TplRecord() {
   // ── the audit trail — real actions on this surface append to it. An entry
   // DRILLS DOWN via the Timeline `details` chevron: a field change carries its
   // From → To diff, a document entry the pressable file, an issue its amount.
-  // ── the fees ledger — register + entity drawer (create-then-refine: Add
-  // creates a blank fee and opens it; every field refines in the drawer)
+  // ── the fees ledger — a register whose rows EXPAND (create-then-refine: Add
+  // appends a blank fee already open; every field refines in the expansion)
   const [fees, setFees] = useState<Fee[]>(FEE_SEED);
+  // Which fee is expanded — ONE at a time, the caller's rule (`TableRow.expanded`
+  // is controlled precisely so this is a decision and not a default). Two open
+  // 380px details would push the third row off screen, and a register that can't
+  // be scanned has stopped being a register.
   const [feeView, setFeeView] = useState<{ kind: "edit"; id: string } | null>(null);
   const patchFee = (id: string, p: Partial<Fee>) => setFees((prev) => prev.map((f) => (f.id === id ? { ...f, ...p } : f)));
   const addFee = () => {
@@ -880,8 +799,6 @@ export function TplRecord() {
     setFees((prev) => [...prev, f]);
     setFeeView({ kind: "edit", id: f.id });
   };
-  const openFee = feeView ? fees.find((f) => f.id === feeView.id) ?? null : null;
-  const feeIdx = openFee ? fees.findIndex((f) => f.id === openFee.id) : -1;
   const deleteFee = (f: Fee) => {
     Alert.alert(`Remove ${f.name || "this fee"}?`, "The fee comes off the record's ledger. This can't be undone.", [
       { text: "Cancel", style: "cancel" },
@@ -896,7 +813,6 @@ export function TplRecord() {
           : { text: "Unpaid", danger: false };
 
   // ── the record — seeded mid-flight so every state is visible
-  const code = "RC-2026-0418";
   const [stage, setStage] = useState<Stage>("sales");
   // The customer book is STATE: the attached customer's tax ID edits inline in
   // the Customer section (that's what un-gates invoicing).
@@ -1357,8 +1273,6 @@ export function TplRecord() {
   const [handoffTo, setHandoffTo] = useState<Desk>("operations");
   const [handoffAssignee, setHandoffAssignee] = useState<string | null>(null);
   const [handoffNote, setHandoffNote] = useState("");
-  // ── the customer detail drawer (the linked record's full info)
-  const [customerOpen, setCustomerOpen] = useState(false);
   // Confirm MARKS the handoff — whom, where, the note.
   //
   // It commits what the DIALOG captured (`handoffTo`), never what `stage` implies
@@ -1395,21 +1309,81 @@ export function TplRecord() {
   // GENERAL leads the rail — the item's core details (the customer among them,
   // 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.
   const SECTIONS = [
     { key: "general", label: "General", icon: "file-text" },
+    // Files sits SECOND: what arrived on the record is read before what the
+    // record is doing, and it puts the intake affordance near the top of the
+    // scroll instead of eight sections down.
+    { key: "files", label: "Files", icon: "folder-closed" },
     { key: "transport", label: "Transport", icon: "map-pin" },
     { key: "progress", label: "Progress", icon: "git-branch" },
-    { key: "documents", label: "Documents", icon: "folder-closed" },
     { key: "fees", label: "Fees", icon: "receipt" },
     { key: "billing", label: "Billing", icon: "credit-card" },
-    { key: "docset", label: "Document set", icon: "file-stack" },
+    { key: "docset", label: "Documents", icon: "file-stack" },
     { key: "receipt", label: "Delivery receipt", icon: "log-in" },
     { key: "danger", label: "Danger zone", icon: "circle-alert" },
   ] as const;
-  const nav = useSectionNav(["general", "transport", "progress", "documents", "fees", "billing", "docset", "receipt", "danger"] as const);
+  const nav = useSectionNav(["general", "files", "transport", "progress", "fees", "billing", "docset", "receipt", "danger"] as const);
+  // ONE record, ONE page. A section is a place you SCROLL to, never a
+  // destination you swap to: routing a record was tried here and lost, because
+  // every fix it needed rebuilt the whole-record view in miniature — a dot to
+  // say which hidden section changed, a header action to re-surface an
+  // affordance a section had swallowed, an "all" route that is just this page.
+  // The tax it charges is real and permanent (browser find reaches only the
+  // open section, two sections can never be read together, a cross-section
+  // check costs a click each way); the length it fixes is a DENSITY problem,
+  // and density is cuttable. So: cut the sections, keep the page.
+  type SecKey = (typeof SECTIONS)[number]["key"];
+  const activeSection = nav.activeKey;
+  // WHICH sections have something wrong — one map, read by the rail. Each section
+  // still states the condition itself beside the fields it concerns; this only says
+  // where to look, which is the job the removed banner was doing badly.
+  // ONE clock per render. Two rows each calling `new Date()` can land on
+  // opposite sides of midnight and disagree about what "today" is.
+  const now = new Date();
+  const words = useLoticsLocale();
+  // The countdown for any date field on this record: "2 days overdue" / "Today"
+  // / "5 days left", routed to the annotation slot its urgency earns
+  // (error / warning / description) — @lotics/ui/deadline owns the wording and
+  // the thresholds so this screen cannot disagree with the register beside it.
+  const dueAnnotation = (iso: string, open: boolean) =>
+    open && iso !== "" ? deadlineAnnotation(daysUntil(new Date(iso), now), words.deadline) : {};
+  const overdue = stage !== "closed" && deliverBy !== "" && daysUntil(new Date(deliverBy), now) < 0;
+  const sectionIssue: Partial<Record<SecKey, "warning" | "danger">> = {
+    general: overdue ? "warning" : undefined,
+    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
@@ -1421,6 +1395,11 @@ export function TplRecord() {
   // on the RIGHT, opposite the section picker, since it is about the record as a
   // whole rather than a place in it.
   const [commentsOpen, setCommentsOpen] = useState(false);
+  // Drawer chrome switches the BODY between the record and the discussion. As a
+  // section it competed with nine others for one scroll — first it pushed the
+  // record down, last it sat 7,466px from the top. They are two things a reader
+  // alternates between, so the bar names both and the body shows one.
+  const [commentsView, setCommentsView] = useState(false);
   // The rail floats over its RESERVED gutter rather than sitting in the scroll
   // row, so the ScrollView keeps the FULL page width — wheel anywhere and the
   // record scrolls. (Capping the ScrollView at the column's width instead makes
@@ -1438,31 +1417,88 @@ export function TplRecord() {
         // 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.
-        <View style={{ borderBottomWidth: 1, borderBottomColor: colors.zinc[200], paddingHorizontal: 12, paddingVertical: 6, flexDirection: "row", alignItems: "center", gap: 8 }}>
+        // 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 ? 20 : 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). */}
-          <BackButton onPress={() => {}} />
-          <Button
-            title={SECTIONS.find((sec) => sec.key === nav.activeKey)?.label ?? "Sections"}
-            color="secondary"
-            icon="list-collapse"
-            onPress={() => setSectionsOpen(true)}
-          />
+              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"
+                icon="list-collapse"
+                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);
+                      // Leaving comments is part of jumping: in comments view the
+                      // sections are not rendered, so a jump with no exit was a
+                      // control that did nothing.
+                      setCommentsView(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. */}
-          <IconButton
-            icon="message-square"
-            tooltip="Comments"
-            accessibilityLabel={`Comments (${comments.length})`}
-            onPress={() => setCommentsOpen(true)}
-          />
+          {/* 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`. */}
+          {isDrawer ? (
+            <Button
+              title={commentsView ? "Close comments" : `Comments (${comments.length})`}
+              color="muted"
+              icon="message-square"
+              onPress={() => setCommentsView((v) => !v)}
+            />
+          ) : (
+            <Button
+              title={`Comments (${comments.length})`}
+              color="muted"
+              icon="message-square"
+              onPress={() => setCommentsOpen(true)}
+            />
+          )}
         </View>
       )}
     <View style={{ flex: 1 }}>
     {/* FULL-WIDTH scroller: the whole page scrolls, wherever the pointer is. */}
-    <ScrollView ref={nav.scrollRef} onScroll={nav.onScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{ padding: 28, paddingBottom: 96 }}>
+    {/* The gutter is CHROME's, not the record's: 28 is the page canvas, 20 is what
+        a `Drawer` pads its header with — so in a drawer the content lines up with
+        the record NAME in the header above it instead of sitting 8px inside it. */}
+    <ScrollView ref={nav.scrollRef} onScroll={nav.onScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{ padding: isDrawer ? 20 : 28, paddingBottom: 96 }}>
       {/* The centred group: a gutter RESERVED for the rail, the reading column,
           and an equal empty gutter that balances it — so the column's centre is
           the window's centre. Both gutters live INSIDE the scroller, so they
@@ -1500,32 +1536,82 @@ export function TplRecord() {
       {/* the page column is a SectionStack — it owns the 56px beat + the
           hairline BETWEEN top-level blocks (a conditional block that renders
           null never leaves a stray divider) */}
-      <SectionStack style={{ flex: 1, minWidth: 0 }}>
-        {/* header band — identity, attention, a light summary. No stage chip
-            here (Progress carries the desk and the act), no breadcrumb,
-            no create CTA: back lives in the panel, creation belongs to the
-            REGISTER (the list owns "new"), the record page only edits. */}
-        <View style={{ gap: 16 }}>
-        <RecordSummary
-          title={code}
-          subtitle={customer ? [customer.name, customer.city].filter(Boolean).join(", ") : "No customer"}
+      {/* Routed shows ONE section, so there is nothing to separate — and the
+          hairlines are owned by SectionStack, which draws one per non-null child.
+          Hidden-but-mounted children still count, so leaving them on would stack a
+          divider above the section for every section before it. */}
+      {/* The header band sits ABOVE the stack, on the canvas beat — it is the
+          record's IDENTITY, not a section, so the 56px between-sections rhythm
+          (and, in scroll mode, the hairline that comes with it) does not apply.
+          Every condition it used to announce now lives on the field it concerns,
+          with a dot on the rail saying which section to look in. */}
+      <View style={{ flex: 1, minWidth: 0, gap: 28 }}>
+        {/* The record's own ACTS live here, beside its identity — not inside a
+            section. Dropping a file is something you do TO THE RECORD, but its
+            only affordance used to sit in the Files section, which scoped the
+            discoverability to that section: from anywhere else on the page
+            (or from 3,975px above it) nothing said the record took files at
+            all, and a whole-record drop target nobody can see is an
+            accelerator, never an entry point. The Files register keeps its own
+            Add — a register's Add belongs under its register — this is the
+            record-level way in. A template composition for now; it earns a kit
+            slot on RecordSummary at its second consumer. */}
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <RecordSummary
+              title={code}
+              subtitle={customer ? [customer.name, customer.city].filter(Boolean).join(", ") : "No customer"}
+            />
+          </View>
+        </View>
+      {isDrawer && commentsView ? (
+      <View style={{ gap: 28 }}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Notes on this record — everyone with access sees them.">Comments</SectionHeadingTitle>
+            <SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
+          </SectionHeading>
+        <CommentList
+          comments={comments}
+          currentMemberId="mem_01"
+          resolveMember={(mid) => { const m = TEAM.find((x) => x.id === mid); return m ? { id: m.id, name: m.name ?? null } : null; }}
+          onEdit={(cid, content, efiles) => setComments((prev) => prev.map((c) => (c.id === cid ? { ...c, content, files: efiles ?? undefined, updated_at: new Date().toISOString() } : c)))}
+          onDelete={(cid) => setComments((prev) => prev.filter((c) => c.id !== cid))}
+          /* the file-capable edit form — the same injection the product uses */
+          renderEditForm={(p) => <CommentFileEditForm {...p} />}
+          /* attachments render as the SAME thumbnail grid the product uses —
+             press previews in the gallery (the desk's preview state) */
+          renderFiles={(files) => (
+            <FileGrid
+              files={files.map(commentFileToDisplay)}
+              itemSize={84}
+              onFilePress={(f) => setPreview({ files: [f], index: 0 })}
+            />
+          )}
+          /* compact timestamp — the product formats RELATIVE ("2 days ago",
+             date-fns); a template stays dependency-free and deterministic */
+          formatTimestamp={(iso) => { const d = new Date(iso); return `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`; }}
         />
-        {/* the record's ATTENTION state, on top — record-scoped, so it reads
-            as a Callout here (field-scoped state stays on its field) */}
-        {stage !== "closed" && deliverBy !== "" && new Date(deliverBy) < new Date() ? (
-          <Callout tone="warning">
-            <CalloutText>Overdue — the due date has passed. Chase the delivery or move the date.</CalloutText>
-          </Callout>
-        ) : null}
-        {/* the light summary — what's on this record, one quiet line */}
-        <SummaryLine
-          items={[
-            { label: "desk", value: stageOf(stage).label, format: "none" },
-            { label: "documents", value: files.length },
-            { label: "to collect", value: grandTotal, format: "currency", compact: true },
-          ]}
+          {/* The pane the toggle switches TO has to be the WHOLE discussion, not
+              half of it: reading without a reply is a dead end, and this is the
+              only surface where the thread has no panel or sheet to fall back on. */}
+        <Composer
+          onSend={(content) => {
+            setComments((prev) => [...prev, { id: `cm_${(commentSeq += 1)}`, member_id: "mem_01", content, files: pendingFiles.length > 0 ? pendingFiles : undefined, created_at: new Date().toISOString(), updated_at: new Date().toISOString() }]);
+            setPendingFiles([]);
+          }}
+          placeholder="Write a comment…"
+          sendLabel="Send"
+          actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
+          files={pendingFiles.length > 0 ? (
+            <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
+          ) : undefined}
         />
-        </View>
+        </Section>
+      </View>
+      ) : (
+      <SectionStack>
+
 
         {/* GENERAL — the MAIN details, FIRST section: the core facts of the
             item; every other section is supplementary. The body is a
@@ -1536,6 +1622,8 @@ export function TplRecord() {
             the grid stays aligned through the groups; read-only values are
             InlineStatic in the same column, aligned to the pixel. */}
         <View onLayout={nav.register("general")}>
+        {/* the record's own overdue state — co-located with the Due field it reads,
+            never as a banner above every section */}
         <Section>
           <SectionHeading>
             <SectionHeadingTitle description="The core facts of the order — what every desk reads first.">General</SectionHeadingTitle>
@@ -1552,7 +1640,7 @@ export function TplRecord() {
                     its picker, and its annotation. So it sits among the order's
                     other core facts, where a reader looks for the bill-to party.
 
-                    The value is a `ReferenceValue` (above): the inline editor's
+                    The value is a `ReferenceField` (the kit primitive): the inline editor's
                     own resting surface, so the reference sits in the value column
                     like every editor around it rather than as a card that
                     outweighs the fields it sits among. Its three verbs are three
@@ -1564,7 +1652,7 @@ export function TplRecord() {
                   warning={customer && !taxIdValid ? "No valid tax ID — invoicing stays blocked until this customer carries one." : undefined}
                 >
                   {customer ? (
-                    <ReferenceValue
+                    <ReferenceField
                       name={customer.name}
                       code={customer.code}
                       facts={[
@@ -1574,7 +1662,13 @@ export function TplRecord() {
                       ]}
                       accessibilityLabel={`${customer.name} — details`}
                       openLabel="Open customer"
-                      onOpen={() => setCustomerOpen(true)}
+                      /* A real app navigates to the customer's OWN record page —
+                         same as Ship to / Notify / Carrier below. This used to
+                         open a local drawer that re-showed the five facts the
+                         peek had just shown, so "Open" resolved to "read that
+                         again, wider" and the customer's record was unreachable
+                         from the one control that promised it. */
+                      onOpen={() => {}}
                       onRemove={() => setCustomerId(null)}
                     />
                   ) : (
@@ -1618,7 +1712,11 @@ export function TplRecord() {
                 <DetailRow label="Opened">
                   <InlineDatePicker value={orderDate} onSave={persist(setOrderDate)} locale="en-US" accessibilityLabel="Opened date" />
                 </DetailRow>
-                <DetailRow label="Due">
+                {/* The countdown ANNOTATES the date it is about — the worked
+                    example for @lotics/ui/deadline. It replaced a hand-rolled
+                    `error={overdue ? … }`, which was binary: a date due
+                    tomorrow read exactly like one due in three months. */}
+                <DetailRow label="Due" {...dueAnnotation(deliverBy, stage !== "closed")}>
                   <InlineDatePicker value={deliverBy} onSave={persist(setDeliverBy)} locale="en-US" accessibilityLabel="Due date" placeholder="Set a due date…" />
                 </DetailRow>
                 {/* a LONG description — it wraps in the value column, the
@@ -1703,8 +1801,8 @@ export function TplRecord() {
             </Subsection>
             {/* CLASSIFICATION — the right-input-per-field law, worked. A field
                 gets the control its SHAPE wants, not a default text box:
-               , ≤5 exclusive options the user should SEE → RadioPicker
-                  (a stacked column of full-width choices)
+               , 2-3 SHORT options switched often → ChipGroup (every choice
+                  visible, switching is ONE press, still one row)
                , a longer closed list → InlineSelect (rich options carry a
                   description line — it shows in the resting row too)
                , a pick from a big REGISTRY → InlineSelect searchable (the
@@ -1741,28 +1839,26 @@ export function TplRecord() {
                   />
                 </DetailRow>
                 <DetailRow label="Fulfilment status">
-                  <RadioPicker
-                    accessibilityLabel="Fulfilment status"
+                  <InlineSelect
                     value={fulfilmentStatus}
-                    onValueChange={setFulfilmentStatus}
-                    options={[
-                      { value: "ready", label: "Ready at the warehouse" },
-                      { value: "production", label: "In production", description: "Confirmed ready by the ship date." },
-                      { value: "awaiting", label: "Awaiting inbound supply" },
-                      { value: "partial", label: "Partial", description: "Ships in two lots — the rest follows on the next run." },
-                    ]}
+                    options={FULFILMENT_STATUSES}
+                    onSave={persist(setFulfilmentStatus)}
+                    accessibilityLabel="Fulfilment status"
+                    renderOptionContent={(o) => (
+                      <View style={{ gap: 1, flexShrink: 1 }}>
+                        <Text size="sm">{o.label}</Text>
+                        {o.data?.hint ? <Text size="xs" color="muted">{o.data.hint}</Text> : null}
+                      </View>
+                    )}
+                    renderSelected={(o) => <Text size="sm">{o.label}</Text>}
                   />
                 </DetailRow>
                 <DetailRow label="Insurance">
-                  <RadioPicker
+                  <ChipGroup
                     accessibilityLabel="Insurance"
                     value={insurance}
                     onValueChange={setInsurance}
-                    options={[
-                      { value: "none", label: "None" },
-                      { value: "standard", label: "Standard" },
-                      { value: "all_risk", label: "All-risk" },
-                    ]}
+                    options={INSURANCE_LEVELS}
                   />
                 </DetailRow>
                 {insurance !== "none" ? (
@@ -1814,21 +1910,87 @@ export function TplRecord() {
                 ) : null}
               </DetailTable>
             </Subsection>
-            {/* system-managed identifiers get a HOME, not a per-row badge */}
-            <Subsection>
-              <SubsectionHeading>
-                <SubsectionHeadingTitle>System</SubsectionHeadingTitle>
-              </SubsectionHeading>
-              <DetailTable labelWidth={150}>
-                <DetailRow label="Record ID">
-                  <InlineStatic value={code} tabular />
-                </DetailRow>
-              </DetailTable>
-            </Subsection>
+            {/* No System group. It held ONE row — "Record ID", printing the
+                value already set in xxl semibold at the top of the page — and
+                spent a subsection heading plus 193px restating the title. A
+                system identifier the record is NAMED BY needs no field: the
+                identity band IS its display, and copying it belongs to that
+                band, not to a row 1,400px below. Genuine system metadata
+                (created, last updated) is audit data and reads in the
+                Activity timeline, where it has a time axis to sit on. */}
           </SubsectionStack>
         </Section>
         </View>
 
+        {/* DOCUMENTS — the document desk: the register Table (search, Create
+            documents, Add files) whose selection feeds the Use-AI fork below.
+            No FileDropTarget of its OWN — the WHOLE-RECORD target above already
+            captures a drop/paste here (and everywhere else on the surface); this
+            section keeps only its explicit Add-files CTA and the affordance line. */}
+        <View onLayout={nav.register("files")}>
+        <Section>
+          <SectionHeading>
+            {/* The standard files-section affordance line — drag / paste / click
+                stay discoverable even though the drop target is the whole record. */}
+            <SectionHeadingTitle description="Everything that ARRIVED on this record. Drag, paste, or click to add.">Files</SectionHeadingTitle>
+          </SectionHeading>
+          <Table
+            columns={DOC_COLUMNS}
+            leading={24}
+            trailing={44}
+            sort={docSort}
+            onSort={(key) => setDocSort(cycleSort(docSort, key))}
+            selectAll={
+              <CheckboxInput
+                accessibilityLabel="Select all documents"
+                checked={sel.allSelected(visibleFiles.map((f) => f.id))}
+                indeterminate={sel.indeterminate(visibleFiles.map((f) => f.id))}
+                onChange={(on) => sel.setAll(visibleFiles.map((f) => f.id), on)}
+              />
+            }
+          >
+            {visibleFiles.map((f, fi) => (
+              <TableRow
+                key={f.id}
+                onPress={() => openPreview(visibleFiles, fi)}
+                marked={sel.has(f.id)}
+                accessibilityLabel={`Open ${f.name}`}
+                leading={<CheckboxInput accessibilityLabel={`Select ${f.name}`} checked={sel.has(f.id)} onChange={(on) => sel.toggle(f.id, on)} />}
+                trailing={<ActionMenu items={fileMenuFor(f)} accessibilityLabel={`Actions for ${f.name}`} />}
+              >
+                <TableCell>
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                    {/* ONE square 32px slot for every type: an image fills it as a
+                        real thumbnail, a document centers its badge in it */}
+                    <FileThumbnail file={toDisplay(f)} size={32} onPress={() => openPreview(visibleFiles, fi)} />
+                    <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{f.name}</Text>
+                  </View>
+                </TableCell>
+                <TableCell>
+                  <Text size="sm" tabular>{fmtSize(f.sizeKB)}</Text>
+                </TableCell>
+                <TableCell>
+                  <Text size="sm" tabular>{f.added}</Text>
+                </TableCell>
+              </TableRow>
+            ))}
+          </Table>
+          {/* the Add, under the register it extends — see the Fees section for
+              why it is not in the heading. PENDING until the user chooses:
+              saving is a decision the dialog asks for (save only / run a task),
+              never a side effect of picking — closing the dialog discards. */}
+          <View style={{ flexDirection: "row" }}>
+            <Button
+              title="Add files"
+              color="primary"
+              onPress={() => {
+                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then(intakeFiles);
+              }}
+            />
+          </View>
+        </Section>
+        </View>
+
         {/* TRANSPORT — the DENSE section, and the honest one. Two groups of ~10
             fields, three record references, mixed editor types, a derived
             warning, one "Show more".
@@ -2059,81 +2221,14 @@ export function TplRecord() {
         </Section>
         </View>
 
-        {/* DOCUMENTS — the document desk: the register Table (search, Create
-            documents, Add files) whose selection feeds the Use-AI fork below.
-            No FileDropTarget of its OWN — the WHOLE-RECORD target above already
-            captures a drop/paste here (and everywhere else on the surface); this
-            section keeps only its explicit Add-files CTA and the affordance line. */}
-        <View onLayout={nav.register("documents")}>
-        <Section>
-          <SectionHeading>
-            {/* The standard files-section affordance line — drag / paste / click
-                stay discoverable even though the drop target is the whole record. */}
-            <SectionHeadingTitle description="Drag, paste, or click to add files">Documents</SectionHeadingTitle>
-          </SectionHeading>
-          <Table
-            columns={DOC_COLUMNS}
-            leading={24}
-            trailing={44}
-            sort={docSort}
-            onSort={(key) => setDocSort(cycleSort(docSort, key))}
-            selectAll={
-              <CheckboxInput
-                accessibilityLabel="Select all documents"
-                checked={sel.allSelected(visibleFiles.map((f) => f.id))}
-                indeterminate={sel.indeterminate(visibleFiles.map((f) => f.id))}
-                onChange={(on) => sel.setAll(visibleFiles.map((f) => f.id), on)}
-              />
-            }
-          >
-            {visibleFiles.map((f, fi) => (
-              <TableRow
-                key={f.id}
-                onPress={() => openPreview(visibleFiles, fi)}
-                marked={sel.has(f.id)}
-                accessibilityLabel={`Open ${f.name}`}
-                leading={<CheckboxInput accessibilityLabel={`Select ${f.name}`} checked={sel.has(f.id)} onChange={(on) => sel.toggle(f.id, on)} />}
-                trailing={<ActionMenu items={fileMenuFor(f)} accessibilityLabel={`Actions for ${f.name}`} />}
-              >
-                <TableCell>
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                    {/* ONE square 32px slot for every type: an image fills it as a
-                        real thumbnail, a document centers its badge in it */}
-                    <FileThumbnail file={toDisplay(f)} size={32} onPress={() => openPreview(visibleFiles, fi)} />
-                    <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>{f.name}</Text>
-                  </View>
-                </TableCell>
-                <TableCell>
-                  <Text size="sm" tabular>{fmtSize(f.sizeKB)}</Text>
-                </TableCell>
-                <TableCell>
-                  <Text size="sm" tabular>{f.added}</Text>
-                </TableCell>
-              </TableRow>
-            ))}
-          </Table>
-          {/* the Add, under the register it extends — see the Fees section for
-              why it is not in the heading. PENDING until the user chooses:
-              saving is a decision the dialog asks for (save only / run a task),
-              never a side effect of picking — closing the dialog discards. */}
-          <View style={{ flexDirection: "row" }}>
-            <Button
-              title="Add files"
-              color="primary"
-              onPress={() => {
-                void pickFiles({ accept: "application/pdf,image/*", multiple: true }).then(intakeFiles);
-              }}
-            />
-          </View>
-        </Section>
-        </View>
 
         {/* FEES — the DETAILED money ledger, both directions (charge = billed
             to the customer, cost = paid to a vendor), distinct from Billing's
-            invoice DOCUMENTS. The drill-down law: a compact register row, and
-            EVERY row opens its FULL detail in a right-docked entity drawer
-            (◀ ▶ steps the rows). Add is create-then-refine — a blank fee
-            opens in the drawer. */}
+            invoice DOCUMENTS. The drill-down law for a child collection: a
+            compact register row, and EVERY row EXPANDS to its full detail in
+            place — one at a time, no drawer, so the surrounding rows stay
+            readable and coming back costs nothing. Add is create-then-refine —
+            a blank fee appends already open, where it will live. */}
         <View onLayout={nav.register("fees")}>
         <Section>
           <SectionHeading>
@@ -2147,13 +2242,114 @@ export function TplRecord() {
             ]}
           />
           {fees.length === 0 ? (
-            <EmptyState icon="receipt" message="No fees on this order" hint="Add the first charge or cost — it opens ready to fill in." action={<Button title="Add fee" color="primary" onPress={addFee} />} />
+            <EmptyState icon="receipt" message="No fees on this order" hint="Add the first charge or cost — it expands ready to fill in." action={<Button title="Add fee" color="primary" onPress={addFee} />} />
           ) : (
             <Table columns={FEE_COLUMNS}>
               {fees.map((f) => {
                 const st = feeStatus(f);
                 return (
-                  <TableRow key={f.id} onPress={() => setFeeView({ kind: "edit", id: f.id })} selected={feeView?.id === f.id} accessibilityLabel={`Open ${f.name || "fee"}`}>
+                  <TableRow
+                    key={f.id}
+                    /* TOGGLE, unlike the peek's open-never-toggle: a popover
+                       fights its own outside-press dismissal, an expansion has
+                       none, so the row that opened it must also close it. */
+                    onPress={() => setFeeView((cur) => (cur?.id === f.id ? null : { kind: "edit", id: f.id }))}
+                    expanded={feeView?.id === f.id}
+                    /* `— details`, the peek's convention: the door is a disclosure,
+                       not a trip, so "Open" would name the wrong act. `PressDoor`
+                       carries the state as aria-expanded. */
+                    accessibilityLabel={`${f.name || "New fee"} — details`}
+                    /* NO `selected`: `TableRow` already derives it —
+                       `selected={selected || showDetail}` — so the expanded row
+                       wears the wash without being told, and passing it here
+                       would only restate the kit. */
+                    detail={
+                      /* The detail carries ALL NINE fields, including the five the
+                         row already shows — because the row's cells are read-only
+                         Text, and because tier 2 DROPS Party and Type on a narrow
+                         container. `table_fit` licenses that drop on the promise
+                         that "the door opens the record where dropped values
+                         live"; the expansion is now that door, so anything it
+                         omitted would be unreachable, not merely inconvenient.
+                         Table does not expose its fit result, so this cannot be
+                         conditional — nor should it be. */
+                      /* 24 (`SPACE.lg`), not the 12 this file uses for intra-block
+                         gaps: the field grid's own row gap is `SPACE.md` (16), so
+                         anything separating a DIFFERENT block has to beat it or
+                         the verb below reads as one more field. Same rung logic
+                         `DetailRow` uses for its stacked rows. */
+                      <View style={{ gap: 24 }}>
+                        {/* labelWidth 130 (the kit default) is NOT the page's 150,
+                            and must not be "fixed" to it. The page's invariant is
+                            one pixel-aligned VALUE column: General sits at x=0 and
+                            puts values at 0+150, this detail is inset by
+                            ROW_GUTTER and puts them at 20+130 — the same 150. At
+                            150 they would land at 170 and break the column. In an
+                            inset field grid the label width is 150 − inset. */}
+                        <DetailTable labelWidth={130}>
+                          <DetailRow label="Fee">
+                            <InlineTextInput value={f.name} onSave={persist((v: string) => patchFee(f.id, { name: v }))} placeholder="Name the fee…" accessibilityLabel="Fee name" />
+                          </DetailRow>
+                          <DetailRow label="Type" description="Charge — billed to the customer; Cost — paid to a vendor">
+                            <InlineSelect
+                              value={f.direction}
+                              options={[{ value: "charge", label: "Charge" }, { value: "cost", label: "Cost" }]}
+                              onSave={persist((v: FeeDirection) => patchFee(f.id, { direction: v }))}
+                              accessibilityLabel="Fee type"
+                            />
+                          </DetailRow>
+                          <DetailRow label="Party">
+                            <InlineTextInput value={f.party} onSave={persist((v: string) => patchFee(f.id, { party: v }))} placeholder="Who pays, or is paid…" accessibilityLabel="Party" />
+                          </DetailRow>
+                          <DetailRow label="Amount">
+                            <InlineNumberInput value={f.amount || null} onSave={persist((v: number | null) => patchFee(f.id, { amount: v ?? 0 }))} min={0} format={money} placeholder="—" accessibilityLabel="Amount" />
+                          </DetailRow>
+                          <DetailRow label="VAT (%)">
+                            <InlineNumberInput value={f.vat} onSave={persist((v: number | null) => patchFee(f.id, { vat: v }))} min={0} placeholder="—" accessibilityLabel="VAT percent" />
+                          </DetailRow>
+                          <DetailRow label="Due" {...dueAnnotation(f.due, !f.paid)}>
+                            <InlineDatePicker value={f.due} onSave={persist((v: string) => patchFee(f.id, { due: v }))} locale="en-US" placeholder="Set a due date…" accessibilityLabel="Fee due date" />
+                          </DetailRow>
+                          <DetailRow label="Invoice no" description="The party's invoice or debit note">
+                            <InlineTextInput value={f.invoiceNo} onSave={persist((v: string) => patchFee(f.id, { invoiceNo: v }))} placeholder="Add the reference…" accessibilityLabel="Invoice number" />
+                          </DetailRow>
+                          <DetailRow label="Status">
+                            <InlineSelect
+                              value={f.paid ? "paid" : "unpaid"}
+                              options={[{ value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }]}
+                              onSave={persist((v: string) => patchFee(f.id, { paid: v === "paid" }))}
+                              accessibilityLabel="Paid status"
+                            />
+                          </DetailRow>
+                          <DetailRow label="Note">
+                            <InlineTextInput value={f.note} onSave={persist((v: string) => patchFee(f.id, { note: v }))} placeholder="Add a note…" accessibilityLabel="Fee note" />
+                          </DetailRow>
+                        </DetailTable>
+                        {/* The destructive verb, LEFT — the peek footer's
+                            convention, which is the kit's. It replaces the
+                            DrawerFooter that used to pin it.
+
+                            `TextButton`, same as the peek's detach: a text-weight
+                            destructive act aligned to a column of text. It lands its
+                            ink ON the label column by construction, keeps a 40px
+                            target via hitSlop, and drops the trash glyph — "Remove
+                            fee" already names the object, which is the safeguard the
+                            icon was only decorating.
+
+                            NO Divider. Every hairline a `Table` draws is
+                            full-bleed (the row `Divider`s carry no padding, the
+                            header band's border spans its whole box), so one
+                            inset by ROW_GUTTER puts two hairline lengths in the
+                            same vertical run — and it would be saying twice what
+                            the expanded row's own wash already says. The row
+                            wrapper is required, not decoration: a `Button` alone
+                            in a column View stretches to full width. */}
+                        <View style={{ flexDirection: "row" }}>
+                          <TextButton color="danger" onPress={() => deleteFee(f)}>Remove fee</TextButton>
+                        </View>
+                      </View>
+                    }
+                  >
                     <TableCell><Text size="sm" weight="medium" numberOfLines={1}>{f.name || "—"}</Text></TableCell>
                     <TableCell><Text size="sm" color="muted">{f.direction === "charge" ? "Charge" : "Cost"}</Text></TableCell>
                     <TableCell><Text size="sm" color="muted" numberOfLines={1}>{f.party || "—"}</Text></TableCell>
@@ -2334,7 +2530,7 @@ export function TplRecord() {
         <View onLayout={nav.register("docset")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="The paperwork this record produces — pick each party's forms, generate on demand.">Document set</SectionHeadingTitle>
+            <SectionHeadingTitle description="The paperwork this record PRODUCES — pick each party's forms, generate on demand.">Documents</SectionHeadingTitle>
           </SectionHeading>
           <SubsectionStack>
             {FORM_GROUPS.map((g) => {
@@ -2580,33 +2776,14 @@ export function TplRecord() {
           </DangerZone>
         </Section>
         </View>
+
       </SectionStack>
+      )}
+      </View>
       </FileDropTarget>
       </>
       )}
 
-      {/* the narrow-mode section picker — a full-page takeover: pick a section
-          to jump there; Escape or the close control dismisses */}
-      <Modal open={sectionsOpen} onClose={() => setSectionsOpen(false)}>
-        <ModalHeader title="Sections" onClose={() => setSectionsOpen(false)} />
-        <ModalBody>
-          <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>
-        </ModalBody>
-      </Modal>
-
       {/* find-or-create's CREATE branch — a focused Dialog (4 fields is
           dialog-weight; an inline swap shifts the page). Essentials only: the
           dialog's Fetch fills contact + city off the tax ID. */}
@@ -2711,93 +2888,6 @@ export function TplRecord() {
         </DialogFooter>
       </Dialog>
 
-      {/* the fee ENTITY DRAWER — the drill-down law: a register row opens its
-          full detail right-docked; ◀ ▶ + the position caption step the rows
-          without closing. Every field refines inline; Remove is confirmed. */}
-      <Drawer
-        open={openFee !== null}
-        onOpenChange={(o) => { if (!o) setFeeView(null); }}
-        title={openFee?.name || "New fee"}
-        width={480}
-        onPrev={feeIdx > 0 ? () => setFeeView({ kind: "edit", id: fees[feeIdx - 1].id }) : undefined}
-        onNext={feeIdx >= 0 && feeIdx < fees.length - 1 ? () => setFeeView({ kind: "edit", id: fees[feeIdx + 1].id }) : undefined}
-        position={feeIdx >= 0 ? `${feeIdx + 1}/${fees.length}` : undefined}
-      >
-        {openFee ? (
-          <View style={{ padding: 20, gap: 8 }}>
-            <DetailTable labelWidth={130}>
-              <DetailRow label="Fee">
-                <InlineTextInput value={openFee.name} onSave={persist((v: string) => patchFee(openFee.id, { name: v }))} placeholder="Name the fee…" accessibilityLabel="Fee name" />
-              </DetailRow>
-              <DetailRow label="Type" description="Charge — billed to the customer; Cost — paid to a vendor">
-                <InlineSelect
-                  value={openFee.direction}
-                  options={[{ value: "charge", label: "Charge" }, { value: "cost", label: "Cost" }]}
-                  onSave={persist((v: FeeDirection) => patchFee(openFee.id, { direction: v }))}
-                  accessibilityLabel="Fee type"
-                />
-              </DetailRow>
-              <DetailRow label="Party">
-                <InlineTextInput value={openFee.party} onSave={persist((v: string) => patchFee(openFee.id, { party: v }))} placeholder="Who pays, or is paid…" accessibilityLabel="Party" />
-              </DetailRow>
-              <DetailRow label="Amount">
-                <InlineNumberInput value={openFee.amount || null} onSave={persist((v: number | null) => patchFee(openFee.id, { amount: v ?? 0 }))} min={0} format={money} placeholder="—" accessibilityLabel="Amount" />
-              </DetailRow>
-              <DetailRow label="VAT (%)">
-                <InlineNumberInput value={openFee.vat} onSave={persist((v: number | null) => patchFee(openFee.id, { vat: v }))} min={0} placeholder="—" accessibilityLabel="VAT percent" />
-              </DetailRow>
-              <DetailRow label="Due" error={feeOverdue(openFee) ? "Overdue — chase the payment or move the date." : undefined}>
-                <InlineDatePicker value={openFee.due} onSave={persist((v: string) => patchFee(openFee.id, { due: v }))} locale="en-US" placeholder="Set a due date…" accessibilityLabel="Fee due date" />
-              </DetailRow>
-              <DetailRow label="Invoice no" description="The party's invoice or debit note">
-                <InlineTextInput value={openFee.invoiceNo} onSave={persist((v: string) => patchFee(openFee.id, { invoiceNo: v }))} placeholder="Add the reference…" accessibilityLabel="Invoice number" />
-              </DetailRow>
-              <DetailRow label="Status">
-                <InlineSelect
-                  value={openFee.paid ? "paid" : "unpaid"}
-                  options={[{ value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }]}
-                  onSave={persist((v: string) => patchFee(openFee.id, { paid: v === "paid" }))}
-                  accessibilityLabel="Paid status"
-                />
-              </DetailRow>
-              <DetailRow label="Note">
-                <InlineTextInput value={openFee.note} onSave={persist((v: string) => patchFee(openFee.id, { note: v }))} placeholder="Add a note…" accessibilityLabel="Fee note" />
-              </DetailRow>
-            </DetailTable>
-          </View>
-        ) : (
-          <View />
-        )}
-        {openFee ? (
-          <DrawerFooter>
-            <Button title="Remove fee" color="danger-secondary" icon="trash" onPress={() => deleteFee(openFee)} />
-          </DrawerFooter>
-        ) : null}
-      </Drawer>
-
-      {/* the CUSTOMER detail drawer — the linked record's full info, read-only
-          (it's ANOTHER record; editing happens on its own page). The footer
-          carries the record-level verbs: navigate there, or detach. */}
-      <Drawer open={customerOpen && customer !== null} onOpenChange={(o) => { if (!o) setCustomerOpen(false); }} title={customer?.name ?? ""} width={440}>
-        {customer ? (
-          <View style={{ padding: 20 }}>
-            <DetailTable labelWidth={110}>
-              <DetailRow label="Name"><InlineStatic value={customer.name} /></DetailRow>
-              <DetailRow label="Code"><InlineStatic value={customer.code} tabular /></DetailRow>
-              <DetailRow label="Tax ID"><InlineStatic value={customer.taxId || "—"} tabular /></DetailRow>
-              <DetailRow label="Contact"><InlineStatic value={customer.contact || "—"} /></DetailRow>
-              <DetailRow label="City"><InlineStatic value={customer.city || "—"} /></DetailRow>
-            </DetailTable>
-          </View>
-        ) : (
-          <View />
-        )}
-        <DrawerFooter>
-          <Button title="Remove from record" color="danger-secondary" icon="x" onPress={() => { setCustomerOpen(false); setCustomerId(null); }} />
-          {/* a real app navigates to the customer's own record page */}
-          <Button title="Open record" color="secondary" onPress={() => {}} />
-        </DrawerFooter>
-      </Drawer>
 
       {/* the handoff dialog — who receives the record + a note; the rows name
           exactly WHAT is being handed off. Confirm writes the trail entry. */}
@@ -2825,8 +2915,10 @@ export function TplRecord() {
     </ScrollView>
 
     {/* Narrow: the same thread, in the panel shape a small screen has — a
-        right-docked Drawer off the bar's own comments control. */}
-    <Drawer open={commentsOpen} onOpenChange={setCommentsOpen} title="Comments" width={380}>
+        right-docked Drawer off the bar's own comments control. Never in drawer
+        mode: a Drawer inside a Drawer traps the reader one layer deeper than the
+        record they opened. */}
+    <Drawer open={commentsOpen && !isDrawer} onOpenChange={setCommentsOpen} title="Comments" width={380}>
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 20, gap: 12 }}>
         <CommentList
           comments={comments}
@@ -3157,6 +3249,7 @@ export function TplRecord() {
             it was written to mean. */}
         <SectionHeading>
           <SectionHeadingTitle>Comments</SectionHeadingTitle>
+          <SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
         </SectionHeading>
         <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 12, paddingBottom: 8 }}>
         <CommentList
@@ -3211,7 +3304,14 @@ export function TplRecord() {
         <BackButton label="Records" onPress={() => {}} />
         <View style={{ gap: 2 }}>
           {SECTIONS.map((sec) => (
-            <MenuButton key={sec.key} icon={sec.icon} title={sec.label} current={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />
+            <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>