@lotics/ui 29.3.0 → 30.1.0

package/AGENTS.md

@@ -16,7 +16,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 |---|---|
 | [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` + `loticsResolve()` — the pre-bundle list and the whole `resolve` block a custom-code app's `vite.config.ts` imports rather than hand-carries, dev-link included). Read before building any screen; reuse first. |
 | [docs/data_entry.md](./docs/data_entry.md) | Which editing pattern for which job — inline edit, fieldset forms, browser-autofill suppression (search controls only), find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (the `FilesEditor` COMPOUND — root owns selection/gallery/confirm, you compose the bar, a HOST verb reads `useFilesEditorSelection` — plus the three-way file INTAKE: CTA + `FileDropTarget` + `usePasteFiles`), stage gates, the commit-on-blur vs action-press ordering law (the kit gates the press — `pending_commits`). |
-| [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values (machine → a gate: a diff when something is being replaced, a full editable preview when records are being created from a document; human-typed → save-direct + the `ResultHeader` receipt), findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md)., the whole run in a dialog (`AgentRunScope`/`AgentRunPane`/`AgentRunActions` — a parked question REPLACES the feed, actions in the footer); **review surfaces compose from atoms** — `DiffValue` (a changed value, droppable in any cell/row/total), `DiffMark` (what happened to the row — ONE circular disc, every surface), `useChangeSet` (accept/reject/undo bookkeeping, no layout) — see [MIGRATION.md](./MIGRATION.md) for the `ChangeReview` family they replace |
+| [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values (machine → a gate: a diff when something is being replaced, a full editable preview when records are being created from a document; human-typed → save-direct + the `ResultHeader` receipt), findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md)., the whole run in a dialog (`AgentRunScope`/`AgentRunPane`/`AgentRunActions` — a parked question REPLACES the feed, actions in the footer, **Stop** while streaming), **stopping** (`cancel` stops the run, `abort` only stops listening — so closing a dialog must `cancel` or it keeps billing); **review surfaces compose from atoms** — `DiffValue` (a changed value, droppable in any cell/row/total), `DiffMark` (what happened to the row — ONE circular disc, every surface), `useChangeSet` (accept/reject/undo bookkeeping, no layout) — see [MIGRATION.md](./MIGRATION.md) for the `ChangeReview` family they replace |
 | [docs/composition.md](./docs/composition.md) | The design-language contract — canvas + content column, heading altitude (incl. eyebrow vs group lead — a label is one or the other), banded cards, register vs inset rows, master-detail `Drawer` on a LIST screen vs a child collection's row EXPANDING inside a record, view controls, RECORD EXTENT (one page, sections scrolled to and never routed to), color discipline, typography, whitespace, and how to TEST an overlay component (a `Popover`-backed surface never mounts under jsdom). |
 | [docs/templates.md](./docs/templates.md) | The map of `examples/tpl_*.tsx` — what shape each template solves and which to start from (copy + adapt, never import) — plus the record-surface composition rules (pipeline order, static shape, decision budget). |
 
@@ -89,6 +89,28 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   back — which is what makes scanning twenty records unaffordable. `TableRow`'s `detail` +
   `expanded` reveal the detail beneath the row; keep the drawer for a heavy form.
   → [catalog.md](./docs/catalog.md).
+- **ONE LEFT EDGE — a row that paints a wash BLEEDS it, and never insets its content.**
+  `marginHorizontal: -ROW_WASH_BLEED` absorbed by an equal `paddingHorizontal` is net zero, so
+  a row's content sits on its container's own edge — level with the headings, labels and prose
+  beside it — while the hover/selection wash still breathes by growing into the parent's
+  padding. `PressableRow` (all variants), `Table`, `ChoiceList`, `ListItem` and `FileRow`
+  already do this, so a screen composed from the kit aligns with **no per-site padding at all**.
+  The moment one component insets instead, every neighbour has to be hand-padded by the same
+  amount to catch up, and that compensation spreads to each new surface built beside it — which
+  is how a `SummaryLine`, a `Clarify` question and a bare table's footer each acquired a
+  padding they should never have needed. **An indent is legible only when something VISIBLE
+  occupies it** — a checkbox, an ordinal, a diff mark. An empty indent is a defect.
+  - **The one exception is a self-contained OVERLAY.** A menu or a selector's popover
+    (`MenuListItem`, `OptionList`) has nothing outside itself to align with, so its rows keep
+    plain padding. Bleeding there would push rows past the popover's own edge.
+  - **A slot holding another component's part takes THAT component's constant**, never a
+    hand-picked number that happens to look close: `AgentRun`'s dot column was 18 while the
+    `Marker` it holds is `NODE` (24), so a 24px dot centred in an 18px column put the whole run
+    rail 3px left of every other band in the dialog. Import the owner's constant.
+  - Inside a `Dialog`, every band reads `dialogGutter(small)` — header, scroll area, footer and
+    any pane a caller drops in. A hand-copied `small ? 16 : 24` is a fifth copy of a number
+    that has to agree with four others.
+  → [composition.md](./docs/composition.md).
 - **Documents get a LIST; images get a GRID.** The discriminator is what identifies the file to
   the person looking for it. A PDF, a Word doc and a spreadsheet are identified by their NAME —
   their thumbnails are a grey page with grey lines on it, identical to every other grey page —

package/MIGRATION.md

@@ -4,6 +4,29 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 30.0.0 — a washed row bleeds; content sits on the container's edge
+
+No API changed. Every register, table and choice list **moves its content 20px
+left** onto its container's own edge, because `PressableRow` (all three
+variants), `ChoiceList` and `Table` now bleed their hover/selection wash outward
+instead of insetting content to make room for it. `ROW_WASH_BLEED` (8) in
+`control_surface` names the rule.
+
+**What you may have to remove.** If a surface of yours was hand-padded to line
+up with a register or a table, that compensation is now a double-correction and
+will sit 20px out. The shapes to look for:
+
+| Compensator | What to do |
+|---|---|
+| A `SummaryLine`, caption or toolbar wrapped in `paddingHorizontal: 20` to match the rows below it | Drop the padding |
+| `CardFooter` used as a **bare table's** footer (no `Card` around it) | Use a `Divider` + a plain row; `CardFooter` carries a *card's* 20px interior gutter |
+| A heading or question hand-padded 8 to match a `ChoiceList`/`Clarify` block | Drop the padding |
+| Anything reading `ROW_GUTTER` for its own spacing | It is 0 now — it means "the table's content gutter", and the wash no longer lives in it |
+
+Tables also fit slightly MORE: the fit math stops reserving 40px of horizontal
+padding, so a column that used to drop at a given width may now survive. Nothing
+that was visible becomes hidden — the change only ever un-drops.
+
 ## 29.0.0 — review surfaces compose from atoms
 
 `ChangeReview` and its family are DELETED, replaced by three layout-free pieces. The

package/docs/ai_patterns.md

@@ -133,6 +133,30 @@ transition — never leave a live button waiting on a network round-trip:
   `useWorkflow` calls are NOT deduped (rapid distinct calls are legitimate), so a workflow CTA
   must disable itself (`loading`) while pending or a double-click writes twice.
 
+## Stopping — the exit is part of the trigger
+
+The press being irreversible is a property of the BUTTON, not of the run. Every streaming surface
+owes the operator a way out, because the reason to leave is usually visible in the first few
+steps: it read the wrong document, it is grouping the wrong way, the brief was wrong. Without an
+exit they pay for a result they already know they will discard.
+
+- **`cancel`, never `abort`.** `useAgentRun` exposes both and they are not synonyms. `abort` stops
+  LISTENING — the run keeps executing server-side and lands in the session history. `cancel` stops
+  the run itself. A user-facing Stop wires to `cancel`; `abort` is for unmount.
+- **Closing a dialog must CANCEL.** This is the one that leaks silently. The hook aborts on
+  unmount by design — right for a page you navigate away from and will come back to, wrong for a
+  dialog just dismissed, where the result is abandoned and every remaining token is spent on
+  nobody. Unmount is not cancellation; the close handler calls `cancel` itself.
+- **Stop lands where the run STARTED**, not on a dead transcript — the intake, with the files, the
+  brief and the answers still there, because the operator stopped in order to change one of them.
+  It is the same destination the parked wizard's Cancel uses; only the verb differs, and it
+  differs truthfully — you STOP something running, you CANCEL something waiting.
+- **The control is PINNED, in the footer.** A feed that follows its newest part scrolls a control
+  placed inside it away from the reader — exactly while the run is doing the thing they want to
+  stop. `AgentRunActions` renders Stop for you; a surface composing its own footers states it
+  directly ([`tpl_item_list`](../examples/tpl_item_list.tsx) and
+  [`tpl_record`](../examples/tpl_record.tsx) respectively).
+
 ## Show the work — `AgentRun`
 
 `AgentRun` (`@lotics/ui/agent_run`) is a live feed of the agent's work as a TIMELINE. The prop is
@@ -424,8 +448,8 @@ Reach for it whenever an agent run happens inside a dialog — which is nearly a
 const run = useAgentRun("intake");            // @lotics/app-sdk
 <AgentRunScope>                                {/* wraps the Dialog, like ClarifyWizardScope */}
   <Dialog …>
-    <AgentRunPane run={run} onCancel={…} />                        {/* content */}
-    <DialogFooter><AgentRunActions run={run} /></DialogFooter>     {/* actions */}
+    <AgentRunPane run={run} onCancel={back} />                              {/* content */}
+    <DialogFooter><AgentRunActions run={run} onStop={back} /></DialogFooter> {/* actions */}
   </Dialog>
 </AgentRunScope>
 ```
@@ -438,8 +462,15 @@ Submit, leaving a live `awaiting_input` run readable and unanswerable until it e
 also swaps `FollowScroll` for `DialogScrollArea` on the park, so the question opens at the top
 rather than wherever the feed was scrolled to.
 
+**Mount `AgentRunActions` wherever the run drives the surface — never gated on one phase.** It
+holds the wizard's verbs while a question is up, **Stop** while the run streams, and nothing once
+it settles; the RUN decides, which is the whole point of handing it the run. A host that names a
+single phase out here duplicates that decision and gets it wrong the moment the bar learns a new
+one — which is precisely how two streaming phases ended up with an empty footer and no way to
+stop.
+
 **`run` is a SHAPE, not an import** (`AgentRunLike`: `status`, `parts`, `pendingChoice`,
-`answerChoice`, `error`; `AgentRunQuestion` names what `pendingChoice` carries, so a template or
+`answerChoice`, `cancel`, `error`; `AgentRunQuestion` names what `pendingChoice` carries, so a template or
 test declares one directly — an option is a label + description and the answer's value IS the
 label, which is the `ask_user_choice` wire shape, so nothing maps between two question types). `useAgentRun()` satisfies it structurally — `@lotics/ui` never depends on
 `@lotics/app-sdk` — which also means a template or test can hand it a plain object and exercise the

package/docs/catalog.md

@@ -1333,8 +1333,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   honestly-declared type is returned untouched; an *uninformative* one (`""`,
   `application/octet-stream` and friends — what an OS clipboard or drag hands
   over) is resolved from the filename extension instead, falling back to the
-  declaration when the extension is unknown too. It returns the same answer the
-  server stores, so a surface that filters on it agrees with what gets persisted.
+  declaration when the extension is unknown too. Documents, images and A/V; on
+  every extension it knows it returns exactly what the SERVER stores, pinned by
+  `src/mime_parity.test.ts`. The server reads a far larger table, so an `accept`
+  naming a MIME pattern (`audio/*`) for an extension outside this one drops a
+  file the server would have kept — write that `accept` as an EXTENSION
+  (`.dwg`), which never consults the table, or add the entry.
 - **`download`** — `downloadFileFromUrl(url, filename, { credentials? })`: fetch+blob+anchor
   download that works inside sandboxed iframes (where `window.open` is silently dropped);
   `credentials` defaults to `same-origin` — pass `"include"` only for auth-gated same-site

package/docs/composition.md

@@ -122,6 +122,31 @@ without scanning. The heading row is the section's control line — it already c
 and the view controls — so the add belongs on it, in the same spot whether the section holds
 nought or forty.
 
+**Where there IS no heading row, the add has nowhere else to be, so it rides the surface's own
+bar** — an attachment popover, a dialog body, any self-contained widget. That is not an exception
+to the law so much as the same reasoning: the rule exists so the verb sits in ONE place a reader
+can return to, and on a surface with no heading the bar IS that place. `FilesEditorUpload` is for
+exactly this case; inside a section the host puts its own `Button` on the heading instead, because
+`FilesEditor` provides the context and the heading is outside it — and a file widget rendering a
+`SectionHeading` would own something the section owns. Worked both ways in `tpl_record` (Files,
+Photos) and `tpl_task_board` (the attachment popover).
+
+**A header CHECKBOX is legible only when it heads a COLUMN.** A table's select-all works because
+it sits at the same x as every row's box beneath it — the column is what turns a 24px tick into
+"all of these". A grid has no such column, so the same control in a section heading heads
+nothing: it is a transparent 24×24 at radius 6 standing between 40px grounded buttons at radius
+10, off their baseline, differing on every axis at once, and shape is read before meaning. **A
+grid's select-all is a BUTTON** ("Select all" / "Deselect all"), which is what
+`FilesEditorSelectAll` ships. Nothing is lost by giving up the tri-state: `indeterminate` says
+"some", and the `FloatingActionBar` beside it already says WHICH some as an exact count — the
+glyph was approximating a number that was on screen.
+
+While a mode is ON, the heading row holds only that mode's controls; the section's own ADD stands
+down until it is off. Otherwise a `primary` add sits in a row that is entirely about the
+selection, competing with the promoted act in the action bar — two accents on one screen. At rest
+the add returns to the right edge where the law puts it, and drag/paste never stopped working, so
+no path actually closes.
+
 - **Weight is the section's**, not a hedge: a section's add is the act that section offers, so
   `primary`. Don't drop to `secondary` because the list is full — an add that changes weight
   with row count is the fault, not the cure.
@@ -306,9 +331,50 @@ Divider-separated.
 
 | `PressableRow` variant | Shape | Use |
 |---|---|---|
-| `register` (default) | rounded (radius 10) full-width hover/open/`marked` wash; content sits on the 20px gutter so a `Table` header + cells align | THE record list |
-| `bleed` (legacy) | 20px square, `Divider`-separated | only an edge-to-edge data grid that genuinely wants hard rules |
-| `inset` | rounded (radius 8), pulled in from the edge | grouped lists in a padded container (Accordion drill-downs) |
+| `register` (default) | rounded (radius 10) full-width hover/open/`marked` wash | THE record list |
+| `bleed` (legacy) | square wash, `Divider`-separated | only an edge-to-edge data grid that genuinely wants hard rules |
+| `inset` | rounded (radius 8) | grouped lists in a padded container (Accordion drill-downs) |
+
+**A washed row BLEEDS its wash; it never insets its content.** All three variants
+carry `marginHorizontal: -ROW_WASH_BLEED` absorbed by an equal `paddingHorizontal`
+— net zero for layout — so a row's content sits on its container's own edge,
+level with the headings, labels and prose around it, while the wash still gets
+breathing room by growing into the parent's padding. The parent must afford
+`ROW_WASH_BLEED` (8px); every kit container clears it (`Drawer` 20, `Dialog` 24,
+the page canvas 28).
+
+**A bar of verbs is TWO groups, not a row of peers.** `FloatingActionBar` separates its own
+STATE (the count and Clear — what is picked, and how to un-pick it) from the ACTS
+(`children`) with the section boundary getting the most air (20) and each group sitting on the
+action gap (8). Spaced uniformly, four controls read as four equal things, and the emphasis
+ladder between them — muted for a dismiss, `danger` for a destructive act, `primary` for the
+promoted one — stops reading as a ladder and starts reading as arbitrary variety. The colours
+are not the defect when this happens; the spacing is. Group first, and the ladder is then read
+WITHIN the acts, where it means something.
+
+The grouping pays a second time at PHONE width, which is why it is structure and not styling. A
+count plus an escape plus three verbs is ~520px of content — wider than a 375 screen — so the
+bar wraps; because `state` and `acts` are each a nowrap row, the ONLY break available is the
+boundary between them. The line splits exactly where the meaning does (what is picked / what to
+do with it) instead of orphaning one verb from the ladder it belongs to. A row of five peers has
+no such seam and breaks wherever it runs out of room.
+
+**Two exceptions, both real.** A self-contained OVERLAY — a menu, a selector's popover
+(`MenuListItem`, `OptionList`) — has nothing outside itself to align with, so its rows keep
+plain padding; bleeding there would push them past the popover's own edge. And a slot that
+holds another component's PART takes that component's constant, never a hand-picked number:
+`AgentRun`'s dot column was 18 while the `Marker` it holds is `NODE` (24), so a 24px dot
+centred in an 18px column put the whole run rail 3px outside the surface's edge — every row
+wrong by the same amount, so it read as internally consistent and nothing flagged it.
+
+The register used to pad 20 WITHOUT the negative margin, and the cost was not
+the 20px — it was that everything nearby had to be hand-padded by the same 20 to
+line up with it. A `Table`'s header band, its static rows and its expanded detail
+all inherited the number; a `SummaryLine` above the register got it at the call
+site; a bare table's footer borrowed `CardFooter` and picked up a *card's*
+interior gutter. **An indent is legible only when something VISIBLE occupies it**
+— a checkbox, an ordinal, a diff mark. An empty one is a defect, and the
+compensation it forces spreads to every new surface that sits beside it.
 
 The `Divider` BETWEEN rows is the resting separation; the wash is the hover state. `selected`
 shows a zinc-100 highlight; `marked` (a bulk-ticked row) a resting blue-50 tint.
@@ -419,7 +485,7 @@ and the "detail" of a list belongs in a `Drawer`/sheet, not a second column):
    band, plus a bottom-pinned `<FloatingActionBar count label onClear>` carrying the bulk
    action(s) while ≥ 1 row is ticked (it renders nothing at count 0); a row that can't take the
    action has no usable checkbox. Bar weight gradient, left → right: the built-in Clear is muted
-   (the quietest act), destructive bulk = `danger-secondary` + icon, secondary bulk = `secondary`
+   (the quietest act), destructive bulk = `danger` + icon, secondary bulk = `secondary`
    + icon, ONE primary CTA last — never repeat the count in a CTA title; the bar's label already
    carries it.
 
@@ -504,7 +570,16 @@ All view controls are 40px tall (`CONTROL_HEIGHT`), `sm` labels, in ONE wrapping
   action `primary`; it sits at a different altitude than the form's one terminal commit.)
 - **Button labels carry no trailing ellipsis** ("Assign", not "Assign…"). **Button color is
   VALENCE/RISK, never category**: the ladder `muted < secondary < primary` is the emphasis axis;
-  `danger` (and its quieter `danger-secondary`) marks destructive — that's the whole axis. A
+  `danger` (and its quieter `danger-secondary`) marks destructive — that's the whole axis.
+  **Which of the two is decided by the COMPANY the button keeps, never by how destructive the
+  act is.** Among other BUTTONS — a bar, a form's action row, a toolbar — use `danger`: it
+  carries a ground (red-100) exactly where `secondary` carries zinc-100, so every act in the row
+  keeps ONE shape and only the ink moves; the ladder is then legible as a ladder. Drop a
+  groundless `danger-secondary` in there and the destructive verb is the one control with no box
+  — a shape difference, which a reader parses before colour and reads as an accident, and the
+  row stops looking designed (this is what "four buttons with different shapes" is, every time).
+  Among TEXT — a row's trailing verb, a `Callout`'s action, a dialog's tertiary — use
+  `danger-secondary`, because there a filled box is the thing that looks pasted on. A
   fill-less `Button` (`danger-secondary`, `muted`, un-colored) shows no box, so its optical edge is
   its INK, inset by its padding: **never align one to a column of TEXT** — it reads as indented
   against every label starting on the true edge. The answer is to move the act, not to invent a

package/docs/data_entry.md

@@ -589,7 +589,11 @@ Finder/Explorer and pasted arrives with real bytes and a real filename but an un
 type — `""`, or just as often `application/octet-stream`, the same non-answer wearing the shape
 of one. Judging it on that reads silence as "not a PDF", the file is discarded, and since an
 unacceptable paste is deliberately left alone, the user sees nothing happen at all. Matching on
-the resolved type also means the surface agrees with what the server will store. Separately,
+the resolved type also means the surface agrees with what the server will store. The kit's
+extension table covers documents, images and A/V; the server reads a far larger one, so an
+`accept` naming a MIME pattern (`audio/*`) for some exotic extension the kit does not list
+drops a file the server would have stored — write that `accept` as an EXTENSION (`.dwg`), which
+never consults the table, or add the entry. Separately,
 some clipboards carry only a file *reference* (a path/URL, no bytes): there is nothing to
 upload and no API that can go read it, so those pastes cannot work by any means — dragging the
 file is the path that always does.

package/examples/tpl_item_list.tsx

@@ -7,7 +7,6 @@ import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { Alert } from "@lotics/ui/alert";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
-import { CardFooter } from "@lotics/ui/card";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Divider } from "@lotics/ui/divider";
@@ -571,6 +570,11 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
       );
       setPhase("running");
     },
+    // A REAL app passes `useAgentRun().cancel` — which stops the run on the
+    // SERVER, not just locally. Here the run IS the reveal timer below, and that
+    // timer is gated on `phase`, so leaving the streaming phase is what stops
+    // it; there is nothing else for this mock to tear down.
+    cancel: () => {},
   };
   useEffect(() => {
     if (phase !== "analyze" && phase !== "running") return;
@@ -624,7 +628,17 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
     setDienThoai("");
     setPhi(null);
   };
-  const close = () => { onOpenChange(false); reset(); };
+  /**
+   * Closing CANCELS — it does not merely stop watching.
+   *
+   * `useAgentRun` aborts on unmount, and its `abort` is deliberately
+   * local-only: the run keeps executing server-side so it survives navigating
+   * away and lands in the session history. That is right for a page you will
+   * come back to, and wrong for a dialog you just dismissed — the operator has
+   * abandoned the result and every remaining token is spent on nobody. So the
+   * close path calls `cancel` explicitly. Unmount is not cancellation.
+   */
+  const close = () => { run.cancel(); onOpenChange(false); reset(); };
 
   /**
    * THE COMMIT. It writes what is on screen — the edited drafts, minus the
@@ -955,9 +969,22 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
             <Button title="Back" color="secondary" onPress={() => { setKhach(""); setDienThoai(""); setPhi(null); setPhase("intake"); }} />
             <Button title="Create record" color="primary" disabled={khach.trim() === ""} onPress={createManual} />
           </DialogFooter>
-        ) : phase === "clarify" ? (
+        ) : phase === "analyze" || phase === "clarify" || phase === "running" ? (
           <DialogFooter>
-            <AgentRunActions run={run} />
+            {/* EVERY run-driven phase, not just `clarify`. This branch used to
+                name that one phase, because `AgentRunActions` only ever held the
+                wizard and there was nothing to show while the feed streamed —
+                so the two streaming phases had an empty footer and no way to
+                stop. The component's contract is that the HOST mounts it
+                wherever the run drives the surface and the RUN decides what it
+                holds; gating it by phase out here duplicates that decision and
+                gets it wrong the moment the run learns a new one.
+
+                `onStop` is the SAME handler the pane's `onCancel` gets: stopping
+                a streaming run and abandoning a parked question both put the
+                operator back at the intake they started from, with their files
+                and their answers still there to retry from. */}
+            <AgentRunActions run={run} onStop={() => setPhase("intake")} />
           </DialogFooter>
         ) : phase === "preview" ? (
           <DialogFooter>
@@ -1252,7 +1279,13 @@ export function TplItemList() {
               <EmptyState message="No matching records" hint="Try another keyword or switch status" />
             </>
           ) : null}
-          <CardFooter>
+          {/* NOT `CardFooter` — that is a Card PART, and its 20px is the card's
+              interior gutter. There is no card here, so it put the totals 20px
+              right of the register's own rows and of the toolbar above them.
+              A bare table's footer is a divider and a row; borrowing furniture
+              from a container that is not there is what put it out of true. */}
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 12 }}>
             <Text size="sm" color="muted" tabular style={{ flex: 1 }}>
               {`${filtered.length} records, ${formatMoney(tongPhi)} in fees`}
             </Text>
@@ -1264,7 +1297,7 @@ export function TplItemList() {
               total={filtered.length}
               onPageChange={setPage}
             />
-          </CardFooter>
+          </View>
         </View>
       </View>
     </ScrollView>

package/examples/tpl_record.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
+import { Fragment, useEffect, useRef, useState, type ReactNode, useMemo } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
@@ -45,6 +45,7 @@ import { EmptyState } from "@lotics/ui/empty_state";
 import { FormField } from "@lotics/ui/form_field";
 import { TextInputField } from "@lotics/ui/text_input_field";
 import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
+import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { DangerZone } from "@lotics/ui/danger_zone";
 import { FileRow } from "@lotics/ui/file_row";
@@ -423,6 +424,18 @@ const DOCS: Doc[] = [
   // an IMAGE file — the register renders it as a real square thumbnail (the
   // SVG data URI stands in for the stored photo URL a live app serves)
   { id: "f5", name: "delivery-photo.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1424, added: "30 Jun", addedAt: 630, url: MOCK_PHOTO_URL },
+  // The hand-over set. EIGHT photos, not one: a grid with a single tile does not
+  // exercise a grid — it never wraps, its tiles are never told apart by content,
+  // and a Select mode over one item reads as absurd. A photo set on a real
+  // consignment is a dozen frames of the same yard from different angles, which
+  // is the case the surface has to survive.
+  { id: "p1", name: "hạ-container-01.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 820, added: "30 Jun", addedAt: 630, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JmZGJmZScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyNhOGEyOWUnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjZGMyNjI2Jy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMyNTYzZWInLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNkYzI2MjYnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p2", name: "hạ-container-02.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 957, added: "30 Jun", addedAt: 630, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2ZlZDdhYScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM3ODcxNmMnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjMDg5MWIyJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMxNTVlNzUnLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMwODkxYjInIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p3", name: "seal-truoc-khi-keo.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1094, added: "30 Jun", addedAt: 630, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2JiZjdkMCcvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM1NzUzNGUnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjYjQ1MzA5Jy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyM3YzJkMTInLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNiNDUzMDknIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p4", name: "cont-rong-mat-truoc.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1231, added: "01 Jul", addedAt: 701, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2U5ZDVmZicvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyNhMWExYWEnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjYmUxMjNjJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMxZTI5M2InLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNiZTEyM2MnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p5", name: "cont-rong-ben-trong.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1368, added: "01 Jul", addedAt: 701, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2ZlY2FjYScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM0NDQwM2MnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjMGY3NjZlJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMzMzQxNTUnLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMwZjc2NmUnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p6", name: "bien-so-xe.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1505, added: "01 Jul", addedAt: 701, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2ZlZjA4YScvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM1MjUyNTInLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjN2UyMmNlJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMxZTNhOGEnLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyM3ZTIyY2UnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
+  { id: "p7", name: "bang-ke-giao-nhan.jpg", mimeType: "image/jpeg", kind: "JPG", sizeKB: 1642, added: "02 Jul", addedAt: 702, url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMjAnIGhlaWdodD0nMzIwJz48cmVjdCB3aWR0aD0nMzIwJyBoZWlnaHQ9JzMyMCcgZmlsbD0nI2E1ZjNmYycvPjxyZWN0IHk9JzIxMCcgd2lkdGg9JzMyMCcgaGVpZ2h0PScxMTAnIGZpbGw9JyM3MzczNzMnLz48cmVjdCB4PScyMCcgeT0nMTUwJyB3aWR0aD0nMTI0JyBoZWlnaHQ9JzYwJyBmaWxsPScjYzI0MTBjJy8+PHJlY3QgeD0nMTUyJyB5PScxNTAnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyMwNjRlM2InLz48cmVjdCB4PSc4NicgeT0nODgnIHdpZHRoPScxMjQnIGhlaWdodD0nNjAnIGZpbGw9JyNjMjQxMGMnIG9wYWNpdHk9JzAuNycvPjwvc3ZnPg==" },
 ];
 
 const EXTRACT_STEPS: ScriptStep[] = [
@@ -1269,7 +1282,32 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   // ── the document desk (see the module banner above; the record's files ARE
   //    the desk's register)
   const [files, setFiles] = useState<Doc[]>(DOCS);
+  // The photo subset of the SAME collection — one list, two surfaces. Derived
+  // rather than a second state, or the two sections would drift the moment
+  // anything is added to one of them.
+  const photoDocs = useMemo(() => files.filter((f) => f.mimeType.startsWith("image/")), [files]);
+  /**
+   * SELECT MODE — for the grid only, and only because a grid has nowhere free
+   * to put a checkbox.
+   *
+   * The Files LIST leaves its checkboxes on permanently: a table already has a
+   * leading column, so they cost nothing and selection is always one tap away.
+   * A photo tile has no such column — a permanent checkbox sits ON the content,
+   * and worse it splits a 96px tile into two hit targets (tap the tile to open,
+   * tap the box to select) exactly where fingers are least precise. So the grid
+   * gets a mode instead: the default view is photos, and one visible control
+   * switches it to picking. Hover-to-reveal was the other candidate and it is
+   * not a design — it simply does not exist on touch, and long-press is a
+   * gesture nothing on screen advertises.
+   *
+   * The selection itself is SHARED with the Files table rather than a second
+   * one, because these are the same records seen two ways. Two selections would
+   * mean two `FloatingActionBar`s racing for the same corner.
+   */
+  const [pickingPhotos, setPickingPhotos] = useState(false);
   const sel = useSelection();
+  const photoIds = useMemo(() => photoDocs.map((p) => p.id), [photoDocs]);
+  const allPhotosPicked = sel.allSelected(photoIds);
 
   // Use AI — one entry off the selection, forking into the two document tasks.
   const [aiOpen, setAiOpen] = useState(false);
@@ -1321,6 +1359,25 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   };
   // The upload path's save: pending picked files land on the record only here.
   const commitUpload = () => setFiles((fs) => [...fs, ...picked.filter((p2) => !fs.some((f) => f.id === p2.id))]);
+  /**
+   * STOP the run and go back to the intake — the files, the brief and the task
+   * choice are all still there, because the operator stopped to change one of
+   * them. A real app cancels the run itself first:
+   *   run.cancel();          // `useAgentRun().cancel` — stops it SERVER-side
+   * Here the run is the reveal timer below, which is gated on `phase`, so
+   * leaving "running" is what stops it.
+   */
+  const stopRun = () => { setPhase("fork"); setRevealed(0); setTask(null); };
+  /**
+   * Closing CANCELS the run — it does not merely stop watching it.
+   *
+   * `useAgentRun` aborts on unmount, and its `abort` is local-only BY DESIGN:
+   * the run keeps executing server-side so it survives navigating away and
+   * lands in the session history. Right for a page you will return to, wrong
+   * for a dialog just dismissed — the result has been abandoned and every
+   * remaining token is spent on nobody. So a real app calls `run.cancel()`
+   * here. Unmount is not cancellation.
+   */
   const closeAi = () => {
     setAiOpen(false); setTask(null); setPhase("fork"); setRevealed(0); setUploadFlow(false); setBrief(""); setTaskChoice(null);
     setCarrierRef(CARRIER_REF_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); lines.reset(); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); fields.reset();
@@ -1810,6 +1867,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     // there.
     { key: "comments", label: "Comments", icon: "message-square" },
     { key: "files", label: "Files", icon: "folder-closed" },
+    { key: "photos", label: "Photos", icon: "image" },
     { key: "transport", label: "Transport", icon: "map-pin" },
     { key: "fees", label: "Fees", icon: "receipt" },
     { key: "billing", label: "Billing", icon: "credit-card" },
@@ -1817,9 +1875,15 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     { key: "receipt", label: "Delivery receipt", icon: "log-in" },
     { key: "danger", label: "Danger zone", icon: "circle-alert" },
   ] as const;
-  // Kept in step with `SECTIONS` above by hand — a key added there and forgotten
-  // here type-errors at every `nav.register` call, which is the cheap failure.
-  const nav = useSectionNav(["progress", "general", "comments", "files", "transport", "fees", "billing", "docset", "receipt", "danger"] as const);
+  // The explicit `<SecKey>` is what keeps this list and `SECTIONS` in step, and
+  // it is not decoration. Inferred, this tuple defines its own key type and is
+  // checked against nothing — so a section registered and scrolled to, but never
+  // added to `SECTIONS`, compiles clean and simply has no rail row. That is the
+  // silent direction, and it is the one that happened: Photos shipped reachable
+  // by scroll and invisible in the outline. Bound to `SecKey`, a key here that
+  // `SECTIONS` does not carry stops being assignable, so the omission is a
+  // compile error instead of a missing row nobody notices.
+  const nav = useSectionNav<SecKey>(["progress", "general", "comments", "files", "photos", "transport", "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
@@ -2613,6 +2677,111 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         </Section>
         </View>
 
+        {/* PHOTOS — the same collection, the other SURFACE.
+
+            Files above is a row LIST because a shipping document is identified by
+            its NAME: a PDF thumbnail is a grey page identical to every other grey
+            page, so a grid of them is a wall of one tile. A photo is identified
+            by its CONTENT — `IMG_4471.jpg` tells nobody anything — so the tile IS
+            the identity and a grid puts twelve on screen at once. Same record,
+            same verbs, different surface, decided by what the reader recognises.
+            (AGENTS.md: documents get a LIST, images get a GRID.)
+
+            The ADD rides the heading row, right edge, exactly as it does on Files
+            and Fees — a section's add sits in the same spot whether the section
+            holds nought or forty. Note it is a plain `Button` + `pickFiles`, not
+            `FilesEditorUpload`: that verb reads the `FilesEditor` context, and the
+            heading is OUTSIDE the editor by construction, so a compound's own
+            upload button can never reach the one place the law puts it. */}
+        <View onLayout={nav.register("photos")}>
+        <Section>
+          <SectionHeading>
+            <SectionHeadingTitle description="Condition and hand-over photos. Drag, paste, or click to add.">Photos</SectionHeadingTitle>
+            {/* Secondary LEFT of primary — the same order every action row in the
+                system uses, so the section's add stays on the right edge where
+                the add-placement law puts it and the mode toggle never displaces
+                it. In mode, the toggle becomes the way OUT; the bulk verbs never
+                come here, because a verb that needs a selection has no meaning
+                until there is one. */}
+            {/* GROUPED, so the heading's 10px slot gap separates the TITLE from
+                the pair rather than the two buttons from each other. A pair of
+                buttons is an action group and takes the action gap (8) every
+                other action row in the kit uses — a Dialog footer, a comment
+                composer, the wizard. Wrapping is composition, not the per-site
+                padding this kit spent the day deleting: it states that these two
+                belong together, rather than compensating for someone else's
+                geometry. */}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              {/* SELECT ALL, in mode only — the same control the Files table
+                  carries in its header, at the grid's equivalent surface. A grid
+                  has no header row to head its tiles, so the section heading is
+                  where it goes; without it, picking 40 photos is 40 taps while
+                  the list beside it does the job in one. Reads all/some/none
+                  from the SAME `sel` the table uses, so the two sections cannot
+                  disagree about what is picked. */}
+              {/* SELECT ALL is a BUTTON here, not the checkbox the Files table
+                  header carries, and the difference is not a preference. A bare
+                  header checkbox is legible only when it HEADS A COLUMN — the
+                  table's sits at the same x as every row's box beneath it, which
+                  is what makes a 24px tick in a header row read as "all of
+                  these". A grid has no such column, so the same control in a
+                  heading row heads nothing: a 24×24 transparent 6px-radius tick
+                  standing between two 40px grounded 10px-radius buttons, off
+                  their baseline by 8px, differing on every axis at once. Shape
+                  is read before meaning, so it read as a stray.
+                  Nothing is lost by dropping the tri-state: `indeterminate` said
+                  "some", and the action bar already says WHICH some, as an exact
+                  count. A glyph was approximating a number that was on screen. */}
+              {pickingPhotos ? (
+                <Button
+                  title={allPhotosPicked ? "Deselect all" : "Select all"}
+                  color="secondary"
+                  onPress={() => sel.setAll(photoIds, !allPhotosPicked)}
+                />
+              ) : null}
+              <Button
+                title={pickingPhotos ? "Done" : "Select"}
+                color="secondary"
+                onPress={() => {
+                  if (pickingPhotos) sel.setAll(photoIds, false);
+                  setPickingPhotos(!pickingPhotos);
+                }}
+              />
+              {/* The ADD stands down while picking. Not decluttering for its own
+                  sake: in select mode this row is ABOUT the selection, and the
+                  section's own act is a third kind of thing in a two-control
+                  row — which is how the primary ended up competing with the one
+                  in the action bar (`Use AI`), two accents on one screen. At
+                  rest the add is back on the right edge where the placement law
+                  puts it, and while picking, drag/paste still adds, so the path
+                  is never actually closed. */}
+              {pickingPhotos ? null : (
+                <Button
+                  title="Add photos"
+                  color="primary"
+                  onPress={() => {
+                    void pickFiles({ accept: "image/*", multiple: true }).then(intakeFiles);
+                  }}
+                />
+              )}
+            </View>
+          </SectionHeading>
+          <FileThumbnailGrid
+            files={photoDocs.map(toDisplay)}
+            minItemWidth={104}
+            // Checkboxes exist only in mode — `selectedIds` undefined is the
+            // clean preview. ONE meaning per tap: out of mode a tile opens, in
+            // mode it picks.
+            selectedIds={pickingPhotos ? sel.selected : undefined}
+            onFilePress={(f) =>
+              pickingPhotos
+                ? sel.toggle(f.id)
+                : openPreview(photoDocs, photoDocs.findIndex((p: Doc) => p.id === f.id))
+            }
+          />
+        </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".
@@ -3509,7 +3678,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
 
     {/* ── the document desk's overlays */}
     <FloatingActionBar count={sel.count} label={sel.count === 1 ? "file selected" : "files selected"} onClear={sel.clear}>
-      <Button title="Remove" color="danger-secondary" icon="trash" onPress={removeSelected} />
+      <Button title="Remove" color="danger" icon="trash" onPress={removeSelected} />
       <Button title="Download" color="secondary" icon="download" onPress={() => { /* a real app zips or opens each selected file (openExternal) */ }} />
       <Button title="Use AI" color="primary" onPress={openAi} />
     </FloatingActionBar>
@@ -3814,7 +3983,19 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         ) : null}
       </DialogScrollArea>
       )}
-      {phase === "fork" ? (
+      {phase === "running" ? (
+        /* The one phase that used to have NO footer, which meant a run could not
+           be stopped — the operator who sees from the first step that it is
+           reading the wrong document had to sit through the whole thing and pay
+           for it. Stop belongs HERE rather than under the transcript because the
+           feed follows its newest part: a control inside it scrolls away exactly
+           while the run is doing the thing they want to stop. `AgentRunActions`
+           renders the same button for a pane-based surface (tpl_item_list); this
+           dialog composes its own footers per phase, so it states it directly. */
+        <DialogFooter>
+          <Button title="Stop" color="secondary" onPress={stopRun} />
+        </DialogFooter>
+      ) : phase === "fork" ? (
         <DialogFooter>
           {uploadFlow ? <Button title="Save files only" color="muted" onPress={() => { commitUpload(); closeAi(); }} /> : <Button title="Cancel" color="muted" onPress={closeAi} />}
           <Button

package/package.json

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

package/src/agent_run.tsx

@@ -9,6 +9,7 @@ import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
 import { Marker, type StepStatus } from "./stepper";
+import { NODE } from "./stepper_layout";
 import { AnimationFadeIn } from "./animation_fade_in";
 import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 import { useLoticsLocale, type LoticsLocale } from "./locale";
@@ -498,7 +499,13 @@ const styles = StyleSheet.create({
     marginHorizontal: -8,
     paddingHorizontal: 8,
   },
-  dotCol: { width: 18, alignItems: "center" },
+  // NODE, not a local 18. The dot IS a stepper `Marker` (exported from
+  // `stepper` precisely so this feed reuses the same one), and a Marker is
+  // NODE across. An 18px column centring a 24px disc overflows 3px each side,
+  // so the whole dot rail sat 3px LEFT of the surface's own edge — every other
+  // band in a dialog lined up and the run did not. Read the owner's constant
+  // rather than re-deriving a width that has to match it.
+  dotCol: { width: NODE, alignItems: "center" },
   rowBody: { flex: 1 },
   // Reasoning body aligns under the "Thinking" label (past the dot column + gap).
   reasoning: { paddingLeft: 28, paddingBottom: 4 },

package/src/agent_run_pane.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useMemo, type ReactNode } from "react";
 import { View } from "react-native";
 import { AgentRun, type AgentRunProps } from "./agent_run";
+import { Button } from "./button";
+import { useLoticsLocale } from "./locale";
 import type { AgentUIPart } from "./agent_transform";
 import { ClarifyWizard, ClarifyWizardActions, ClarifyWizardScope, type ClarifyWizardAnswer } from "./clarify_wizard";
-import { DialogScrollArea } from "./dialog";
+import { DialogScrollArea, useDialogGutter } from "./dialog";
 import { FollowScroll } from "./follow_scroll";
-import { useContainerSize } from "@lotics/ui/size_boundary";
 
 /**
  * What this pair needs from a run — structurally the shape `useAgentRun()`
@@ -36,6 +37,17 @@ export interface AgentRunLike {
   /** Non-null exactly while parked. */
   pendingChoice: { questions: AgentRunQuestion[] } | null;
   answerChoice: (answers: { value: string; custom: boolean }[]) => Promise<unknown>;
+  /**
+   * STOP the run — server-side, not just locally. `useAgentRun().cancel` is
+   * exactly this; do NOT pass its `abort`, which detaches the listener and
+   * leaves the run executing (and billing) to completion.
+   *
+   * Without this the hook's capability was unreachable through the pane, so
+   * every surface built on it could only wait a run out. A long extraction is
+   * the case that matters: the operator sees from the first steps that it read
+   * the wrong document, and the only exit was to sit through it.
+   */
+  cancel: () => void;
   error: string | null;
 }
 
@@ -64,7 +76,12 @@ export interface AgentRunPaneProps {
  */
 export function AgentRunPane(props: AgentRunPaneProps) {
   const { run, labelForCall, renderToolOutput, onCancel } = props;
-  const { small } = useContainerSize();
+  // The DIALOG's gutter, not this pane's own container measurement. Asking
+  // `useContainerSize()` here answered "small" for a 760px dialog while the
+  // header, scroll area and footer asked the SCREEN and answered "not small" —
+  // two honest answers to one question, and the run's rows landed 8px left of
+  // the dialog's own title. One decision, published by the Dialog, read here.
+  const gutter = useDialogGutter();
   const pending = run.pendingChoice;
 
   // Mapped once per question set, not per render: the wizard keys its per-step
@@ -100,7 +117,10 @@ export function AgentRunPane(props: AgentRunPaneProps) {
   // deliberate — remounting opens the question at the top rather than wherever
   // the feed happened to be scrolled to.
   return (
-    <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: small ? 16 : 24 }}>
+    // The dialog's OWN gutter, read rather than re-derived: this pane sits as a
+    // band among the dialog's header and footer, and a hand-copied `small ? 16 :
+    // 24` here is a fifth copy of a number that has to agree with four others.
+    <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: gutter }}>
       {/* No empty-state slot on purpose. `AgentRun` renders its own breathing
           "Starting…" row while streaming with zero parts, localized through the
           `agentRun` locale slice — and ai_patterns states the law outright:
@@ -118,17 +138,42 @@ export function AgentRunPane(props: AgentRunPaneProps) {
 }
 
 /**
- * The run's action bar, for a `DialogFooter`. Renders the wizard's
- * Cancel/Back/Next/Submit while a question is up and NOTHING otherwise, so the
- * host can mount it unconditionally and let the run decide.
+ * The run's action bar, for a `DialogFooter`. The run decides what it holds, so
+ * the host mounts it unconditionally: the wizard's Cancel/Back/Next/Submit
+ * while a question is up, **Stop** while the run is streaming, nothing once it
+ * has settled.
  *
- * Pinned outside the scroller is the point: no length of question can push
- * Submit out of reach.
+ * Pinned outside the scroller is the point, and it is what decides that Stop
+ * lives here rather than under the transcript: the feed FOLLOWS its newest part,
+ * so a control inside it scrolls away from the reader exactly while the run is
+ * doing the thing they want to stop. No length of question can push Submit out
+ * of reach either.
+ *
+ * `onStop` is the host's way back — the screen to return to once the run is
+ * stopped, normally the intake it was started from. It is the same handler the
+ * pane's `onCancel` takes, because abandoning a parked question and stopping a
+ * streaming run land the operator in the same place; only the verb differs, and
+ * it differs truthfully (you STOP something running, you CANCEL something
+ * waiting).
  */
-export function AgentRunActions({ run }: { run: AgentRunLike }) {
+export function AgentRunActions({ run, onStop }: { run: AgentRunLike; onStop?: () => void }) {
+  const loc = useLoticsLocale().agentRun;
   // Reads the SAME run the pane reads, rather than state the pane publishes: two
   // components deriving from one source cannot disagree, and nothing has to set
   // a parent's state during a child's render to keep them in step.
-  if (run.pendingChoice == null) return null;
-  return <ClarifyWizardActions />;
+  if (run.pendingChoice != null) return <ClarifyWizardActions />;
+  // Parked is NOT streaming — a run waiting on an answer burns nothing, so it is
+  // the wizard's Cancel that leaves it, not a Stop. Checked in this order for
+  // that reason.
+  if (run.status !== "streaming") return null;
+  return (
+    <Button
+      title={loc.stop}
+      color="secondary"
+      onPress={() => {
+        run.cancel();
+        onStop?.();
+      }}
+    />
+  );
 }

package/src/choice_list.tsx

@@ -6,7 +6,7 @@ import { Icon } from "./icon";
 import { Divider } from "./divider";
 import { composeHandler, useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { CONTROL_RADIUS, FOCUS_RING } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, ROW_WASH_BLEED } from "./control_surface";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { fontFamilyMedium, getInputTextStyle } from "./text_utils";
 import { useLoticsLocale } from "./locale";
@@ -52,7 +52,10 @@ function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selec
       onPress={onSelect}
       {...focusProps}
       style={({ hovered, pressed }) => [
-        { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS },
+        // Bleeds like every other washed row, so the option TEXT sits on the
+        // container's edge — level with the question above it, which no longer
+        // has to hand-pad itself to match.
+        { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: ROW_WASH_BLEED, marginHorizontal: -ROW_WASH_BLEED, borderRadius: CONTROL_RADIUS },
         // Selected reads as a persistent tint (zinc-100); an unselected row only
         // washes on hover (zinc-50). The check below reserves its slot always.
         selected ? { backgroundColor: colors.zinc[100] } : hovered || pressed ? { backgroundColor: colors.zinc[50] } : null,
@@ -88,7 +91,7 @@ function CustomAnswerRow({ value, selected, onChangeText, onFocus, placeholder }
     <View
       {...(hoverProps as object)}
       style={[
-        { paddingVertical: 14, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS },
+        { paddingVertical: 14, paddingHorizontal: ROW_WASH_BLEED, marginHorizontal: -ROW_WASH_BLEED, borderRadius: CONTROL_RADIUS },
         // Same states as an option row: a filled custom answer reads as selected
         // (zinc-100); otherwise it washes on hover (zinc-50).
         selected ? { backgroundColor: colors.zinc[100] } : hovered ? { backgroundColor: colors.zinc[50] } : null,

package/src/clarify.tsx

@@ -36,9 +36,13 @@ export interface ClarifyProps {
 export function Clarify(props: ClarifyProps) {
   return (
     <View style={{ gap: 12 }}>
-      {/* paddingHorizontal 8 aligns the eyebrow + question with the option/answer
+      {/* No padding: the `ChoiceList` rows below BLEED their wash now, so their
+          text already sits on this container's edge and the question needs
+          nothing to line up with it. The 8 that used to be here was compensation
+          for a row that pushed its own content in. Old note kept for the why:
+          it "aligned the eyebrow + question with the option/answer
           text, which sits on the `ChoiceList` rows' 8px inset (CONTROL_RADIUS grid). */}
-      <View style={{ gap: 4, paddingHorizontal: 8 }}>
+      <View style={{ gap: 4 }}>
         {props.eyebrow ? (
           <Text size="xs" color="muted" weight="medium">
             {props.eyebrow}

package/src/clarify_wizard.tsx

@@ -123,12 +123,14 @@ export function ClarifyWizard(props: ClarifyWizardProps) {
   return (
     <View style={{ gap: 16 }}>
       {/* The step position is an eyebrow above the question (no progress bar — and
-          none at all for a single question); the footer aligns to the same 8px inset
+          none at all for a single question); the footer shares their left edge
           as the question and answers. Keyed by index so each step's custom-answer
           draft is its own (no bleed across steps). */}
       <Clarify key={index} eyebrow={total > 1 ? `${index + 1} / ${total}` : undefined} question={q.question} options={q.answers} answer={current} onAnswer={setAnswer} allowCustom={q.allowCustom} />
+      {/* No horizontal padding — the choice rows below BLEED their wash now, so
+          the footer already shares their left edge without compensating for it. */}
       {scope == null ? (
-        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8, paddingHorizontal: 8 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
           <Button title={labels.cancel} color="muted" onPress={onCancel} />
           <View style={{ flexDirection: "row", gap: 8 }}>
             {index > 0 ? <Button title={labels.back} color="secondary" onPress={() => setIndex(index - 1)} /> : null}

package/src/control_surface.ts

@@ -23,6 +23,31 @@ export const MIN_CONTROL_WIDTH = 160;
  *  (avatars, dots, switches, sliders, progress, icon buttons) stay full. */
 export const CONTROL_RADIUS = 10;
 
+/**
+ * HOW FAR A ROW'S WASH EXTENDS PAST ITS CONTENT — and the invariant that goes
+ * with it: **a row that paints a hover/selection wash BLEEDS it outward; it
+ * never insets its content to make room for decoration.**
+ *
+ * `marginHorizontal: -ROW_WASH_BLEED` absorbed by an equal `paddingHorizontal`
+ * is net zero for layout, so the row's CONTENT stays on the container's edge —
+ * flush with the headings, labels and prose around it — while the wash gets its
+ * breathing room by growing into the parent's padding.
+ *
+ * The alternative (pad without the negative margin) is what the kit did in
+ * three places, and it fails in a way nobody reports as a bug: the row's content
+ * sits N px right of everything else on the page, so every neighbour that has to
+ * line up with it — a summary line, a question above a choice list, a table's
+ * own header — gets hand-padded by the same N at its call site. The indent then
+ * looks deliberate because it is everywhere, and the compensation spreads to
+ * each new surface. An indent is legible only when something VISIBLE occupies
+ * it (a checkbox, an ordinal, a mark); an empty one is a defect.
+ *
+ * The parent must afford this much horizontal padding. 8 is chosen because it is
+ * the smallest breathing room that reads, and because every container in the kit
+ * already clears it (`Drawer` 20, `Dialog` 24, the page canvas 28).
+ */
+export const ROW_WASH_BLEED = 8;
+
 /** How far {@link FOCUS_RING} extends BEYOND the control's border box. Module-local
  *  on purpose: it is a FLOOR for anyone who clips (a container reserving less than
  *  this on an edge a focusable child sits against shears that child's ring), never a

package/src/dialog.tsx

@@ -50,6 +50,8 @@ export const DialogNavigationProvider = DialogNavigationContext.Provider;
 interface DialogContextValue {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** The horizontal gutter every band inside THIS dialog shares — see {@link useDialogGutter}. */
+  gutter: number;
 }
 
 const DialogContext = createContext<DialogContextValue | null>(null);
@@ -83,6 +85,39 @@ export interface DialogProps {
   initialRoute?: string;
 }
 
+/**
+ * THE DIALOG'S HORIZONTAL GUTTER — every band inside a dialog reads this, so a
+ * header, a scroll area, a footer and any pane a caller drops in all share one
+ * left edge.
+ *
+ * It existed as the literal `small ? 16 : 24` at five sites (four here, one
+ * hand-copied into `AgentRunPane`), which is exactly how a band drifts: the copy
+ * has to be found and changed with the others, and the one that is missed is
+ * invisible until someone measures two bands against each other.
+ */
+function dialogGutterFor(small: boolean): number {
+  return small ? 16 : 24;
+}
+
+/**
+ * THE gutter of the dialog you are inside — read, never re-derived.
+ *
+ * Centralising the VALUE was not enough, and that mistake shipped: `dialogGutter(small)` still
+ * left every band to work out `small` for itself, and `AgentRunPane` asked
+ * `useContainerSize()` (its own measured box, "small" at a 760px dialog) while the header,
+ * scroll area and footer asked `useScreenSize()` (the viewport, not small). Two honest answers
+ * to one question put the run's rows 8px left of the dialog's own title.
+ *
+ * So the Dialog decides ONCE and publishes it. A band inside a dialog gets that number
+ * whatever its own box measures; a surface rendered outside one falls back to the SCREEN — the
+ * same signal a dialog uses — so the two paths can never disagree about what "small" means.
+ */
+export function useDialogGutter(): number {
+  const ctx = useContext(DialogContext);
+  const screenSize = useScreenSize();
+  return ctx?.gutter ?? dialogGutterFor(screenSize.small);
+}
+
 export function Dialog(props: DialogProps) {
   const {
     testID,
@@ -127,12 +162,16 @@ export function Dialog(props: DialogProps) {
     onOpenChange(false);
   }, [onOpenChange]);
 
+  // Decided ONCE, here, and published — so a band never has to work out "small"
+  // for itself and land on a different answer than its siblings.
+  const gutter = dialogGutterFor(screenSize.small);
   const dialogValue = useMemo(
     (): DialogContextValue => ({
       open,
       onOpenChange,
+      gutter,
     }),
-    [open, onOpenChange],
+    [open, onOpenChange, gutter],
   );
 
   const effectiveOffsetTop = screenSize.small ? 0 : offsetTop;
@@ -165,7 +204,7 @@ export function Dialog(props: DialogProps) {
                 >
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
-                      <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
+                      <View style={[styles.closeButtonContainer, { paddingHorizontal: gutter }]}>
                         <IconButton icon="x" size="lg" accessibilityLabel={locale.overlay.close} onPress={handleClose} />
                       </View>
                       <SizeBoundary style={styles.container}>{children}</SizeBoundary>
@@ -199,10 +238,10 @@ export interface DialogHeaderProps {
 export function DialogHeader(props: DialogHeaderProps) {
   const { children, style } = props;
   const { goBack, showBackButton } = useDialogNavigation();
-  const screenSize = useScreenSize();
+  const gutter = useDialogGutter();
 
   return (
-    <View style={[styles.header, { paddingHorizontal: screenSize.small ? 16 : 24 }, style]}>
+    <View style={[styles.header, { paddingHorizontal: gutter }, style]}>
       {showBackButton && <BackButton onPress={goBack} />}
       {children}
     </View>
@@ -244,10 +283,10 @@ export interface DialogScrollAreaProps {
 
 export function DialogScrollArea(props: DialogScrollAreaProps) {
   const { children } = props;
-  const screenSize = useScreenSize();
+  const gutter = useDialogGutter();
 
   return (
-    <ScrollView contentContainerStyle={[styles.scrollAreaContent, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
+    <ScrollView contentContainerStyle={[styles.scrollAreaContent, { paddingHorizontal: gutter }]}>
       {children}
     </ScrollView>
   );
@@ -264,12 +303,12 @@ export interface DialogFooterProps {
 
 export function DialogFooter(props: DialogFooterProps) {
   const { children, align = "end" } = props;
-  const screenSize = useScreenSize();
+  const gutter = useDialogGutter();
 
   const justifyContent =
     align === "end" ? "flex-end" : align === "space-between" ? "space-between" : "flex-start";
 
-  return <View style={[styles.footer, { justifyContent, paddingHorizontal: screenSize.small ? 16 : 24 }]}>{children}</View>;
+  return <View style={[styles.footer, { justifyContent, paddingHorizontal: gutter }]}>{children}</View>;
 }
 
 // ============================================================================

package/src/files_editor.tsx

@@ -351,7 +351,7 @@ export function FilesEditorRemove() {
   return (
     <Button
       title={labels.delete}
-      color="danger-secondary"
+      color="danger"
       disabled={selected.length === 0}
       onPress={() => confirmRemove(selected, () => { for (const f of selected) onRemove(f.id); exit(); })}
     />

package/src/floating_action_bar.tsx

@@ -33,9 +33,20 @@ export function FloatingActionBar(props: FloatingActionBarProps) {
   return (
     <View pointerEvents="box-none" style={styles.wrap}>
       <Card style={styles.bar}>
-        <Text size="sm" weight="semibold" tabular>{`${count} ${label}`}</Text>
-        <Button title={clearLabel} color="muted" onPress={onClear} />
-        {children}
+        {/* TWO GROUPS, not one row of peers. The count and Clear are the bar's
+            own STATE — what is picked, and how to un-pick it; they act on the
+            selection, not on the records. `children` are the ACTS. A single gap
+            across all of them made four buttons read as four equal things, and
+            the emphasis ladder between them (muted / secondary / primary, which
+            encodes destructive vs benign vs promoted) then looked like
+            arbitrary variety rather than a ladder. Grouping states the kind
+            difference; the ladder is then read WITHIN the acts, where it means
+            something. */}
+        <View style={styles.state}>
+          <Text size="sm" weight="semibold" tabular>{`${count} ${label}`}</Text>
+          <Button title={clearLabel} color="muted" onPress={onClear} />
+        </View>
+        <View style={styles.acts}>{children}</View>
       </Card>
     </View>
   );
@@ -48,13 +59,31 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     alignItems: "center",
+    // Keeps the bar off the screen edges at any width — and, with the bar's
+    // `maxWidth`, is what bounds it to the viewport on a phone.
+    paddingHorizontal: 16,
     zIndex: 20,
   },
   bar: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    justifyContent: "center",
+    // A count plus an escape plus three verbs is ~520px of content — wider than
+    // a phone. Unbounded it simply hung off both edges, taking the promoted act
+    // with it, and no host could fix that without re-authoring the bar. So it
+    // WRAPS, and the grouping decides where: `state` and `acts` are each a
+    // nowrap row, so the only break available is the boundary between them —
+    // the line splits exactly where the meaning does (what is picked / what to
+    // do with it), never mid-ladder with Download orphaned from Use AI.
+    flexWrap: "wrap",
+    maxWidth: "100%",
+    // The biggest boundary in the bar — state | acts — gets the most air. The
+    // two groups below sit on the kit's action gap. Doubles as the row gap once
+    // wrapped, which is the same boundary seen vertically.
+    gap: 20,
     paddingVertical: 10,
     paddingHorizontal: 16,
   },
+  state: { flexDirection: "row", alignItems: "center", gap: 8 },
+  acts: { flexDirection: "row", alignItems: "center", gap: 8 },
 });

package/src/locale.tsx

@@ -193,6 +193,7 @@ export interface LoticsLocale {
     output: string;
     awaiting: string;
     retry: string;
+    stop: string;
     tools: Record<string, string>;
     steps: (n: number) => string;
   };
@@ -341,6 +342,7 @@ export const en: LoticsLocale = {
     output: "Output",
     awaiting: "Awaiting",
     retry: "Retry",
+    stop: "Stop",
     tools: {
       query_records: "Searching records",
       get_record: "Reading a record",
@@ -493,6 +495,7 @@ export const vi: LoticsLocale = {
     output: "Kết quả",
     awaiting: "Chờ duyệt",
     retry: "Thử lại",
+    stop: "Dừng",
     tools: {
       query_records: "Đang tìm dữ liệu",
       get_record: "Đang đọc một bản ghi",

package/src/mime.ts

@@ -73,7 +73,10 @@ const GENERIC_MIME_TYPES: ReadonlySet<string> = new Set([
 ]);
 
 /**
- * Extension → MIME, for the document and image formats an intake surface names.
+ * Extension → MIME, for the document, image and A/V formats an intake surface
+ * names. Values are taken verbatim from the server`s table (`mime-types`, via
+ * `@lotics/shared/mime_resolution`) — `mime_parity.test.ts` pins them, and an
+ * intake that knows LESS than the server silently drops a storable file.
  * A `Map`, not an object literal, so a file named `x.constructor` looks up a
  * miss rather than `Object.prototype`'s member.
  */
@@ -101,6 +104,21 @@ const MIME_BY_EXTENSION: ReadonlyMap<string, string> = new Map([
   ["xls", "application/vnd.ms-excel"],
   ["docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
   ["doc", "application/msword"],
+  // A/V: an `audio/*` or `video/*` intake resolves a pasted recording only if
+  // its extension is here — the extension-pattern form (`.m4a`) never needed it.
+  ["m4a", "audio/mp4"],
+  ["mp3", "audio/mpeg"],
+  ["wav", "audio/wave"],
+  ["ogg", "audio/ogg"],
+  ["opus", "audio/ogg"],
+  ["flac", "audio/x-flac"],
+  ["aac", "audio/x-aac"],
+  ["mp4", "video/mp4"],
+  ["m4v", "video/x-m4v"],
+  ["mov", "video/quicktime"],
+  ["webm", "video/webm"],
+  ["avi", "video/x-msvideo"],
+  ["mkv", "video/x-matroska"],
 ]);
 
 /** What a filename's extension says the file is, or `""` when it says nothing. */

package/src/pressable_row.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, Ref, useCallback, useState } from "react";
+import { ROW_WASH_BLEED } from "./control_surface";
 import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 import { pressSelectedText } from "./press_selection";
@@ -108,23 +109,26 @@ const styles = StyleSheet.create({
     // the text it had no business covering.
     ...({ cursor: "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
   },
-  // THE register row — FULL-WIDTH rounded highlight. The hover/selected wash
-  // spans the entire row (so the pressable area === the row, never narrower than
-  // the dividers around it) and rounds (radius 10); content sits on the 20px
-  // column gutter so a Table header + cells align. The Divider between rows (the
-  // Table renders it) is the resting separation; this wash is the hover state.
+  // THE register row — FULL-WIDTH rounded highlight that BLEEDS past the content
+  // (`ROW_WASH_BLEED`, net-zero margin+padding), so the row's content sits on the
+  // container's own edge and the wash still has breathing room. It used to pad 20
+  // WITHOUT the negative margin, which put every table's first column 20px right
+  // of the headings above it and made `SummaryLine` call sites hand-pad 20 to
+  // catch up. `inset` below has always done it correctly; this is the same rule.
   register: {
     borderRadius: 10,
-    paddingHorizontal: 20,
+    paddingHorizontal: ROW_WASH_BLEED,
+    marginHorizontal: -ROW_WASH_BLEED,
   },
   // Square, full-bleed — lines up with the Dividers between register rows. Legacy.
   bleed: {
-    paddingHorizontal: 20,
+    paddingHorizontal: ROW_WASH_BLEED,
+    marginHorizontal: -ROW_WASH_BLEED,
   },
   // Rounded, pulled in from the edge — matches the Accordion's inset rows.
   inset: {
     borderRadius: 8,
-    paddingHorizontal: 8,
-    marginHorizontal: -8,
+    paddingHorizontal: ROW_WASH_BLEED,
+    marginHorizontal: -ROW_WASH_BLEED,
   },
 });

package/src/table_fit.ts

@@ -30,10 +30,22 @@ export interface TableFitColumn {
 /** Gap between the header band's / a row's children — `table.tsx` styles consume
  *  this, so the fit math and the rendered geometry can't drift. */
 export const COLUMN_GAP = 14;
-/** The register's horizontal gutter — mirrors `PressableRow`'s register variant
- *  (`paddingHorizontal: 20`), the one geometry this file models but doesn't own.
- *  `table.tsx` consumes it for the header band and static rows. */
-export const ROW_GUTTER = 20;
+/**
+ * The register's CONTENT gutter — zero, because the washed row bleeds instead.
+ *
+ * It was 20, mirroring `PressableRow`'s register variant, and every unwashed
+ * part of a table (the header band, static rows, an expanded detail) padded by
+ * the same 20 purely to line up with the washed row's inset content. That put a
+ * table's first column 20px right of the section heading above it with nothing
+ * visible in the gap. The wash now grows outward (`ROW_WASH_BLEED`) rather than
+ * pushing content in, so every part of a table sits on its container's edge and
+ * the five `table.tsx` sites that read this constant follow automatically.
+ *
+ * Kept as a named constant rather than deleted: the header band, the rows and
+ * the fit math must agree, and a literal repeated at five sites is how they
+ * stopped agreeing before.
+ */
+export const ROW_GUTTER = 0;
 const ROW_H_PADDING = ROW_GUTTER * 2;
 /** Fit-math width a flexible column needs to stay usable — below this the flex
  *  column is crushed to ellipsis soup, so it counts as this wide when deciding