@lotics/ui 12.1.2 → 13.7.1

package/docs/templates.md

@@ -41,8 +41,7 @@ the package index is [../AGENTS.md](../AGENTS.md).
 | A register / consolidated work-list (browse, per-row action, bulk action) | `tpl_item_list` |
 | A guided sequence of physical tasks (scan, confirm, next) | `tpl_pick` |
 | Splitting one source amount across many targets | `tpl_allocate` |
-| A record's create/edit surface — also the settings shape | `tpl_record` |
-| A personal to-do list | `tpl_tasks` |
+| A record's create/edit surface — also the settings shape (its Tasks section IS the canonical task pattern) | `tpl_record` |
 | A team task board (inline-managed grouped table) | `tpl_task_board` |
 | Financial statements | `tpl_statements` |
 | A scoped lookup report with export | `tpl_report` |
@@ -65,34 +64,41 @@ Laws for any screen where a record's data is edited and a primary action produce
 2. **Static shape.** The page never changes shape from output-selection state. Conditional
    rendering is DATA-driven only (a control appears because two stored values differ), never
    selection-driven. Relevance is an advisory `Callout` with a jump-to-section action — warn,
-   never hide, never hard-block. One sanctioned disclosure: a TRANSIENT fill-what's-missing
-   editor expanding under a just-checked item is progressive disclosure of the gate, not
-   shape change — it edits the record field in place and collapses once satisfied.
+   never hide, never hard-block. One sanctioned disclosure: a fill-what's-missing `Inset`
+   editor CO-LOCATED under a just-checked item is progressive disclosure of the gate, not
+   shape change — it edits the record field in place and clears once satisfied.
 3. **Colocation & ownership.** Every output option (selections, print/export switches) lives in
    the output section beside its action; a per-entity selection carries its owner's name in its
    heading. Persisted record DATA never lives there — data belongs in data sections. Misfiled
    data announces itself as callout special-cases; the exception disappearing is the sign the
    model is right. (HOMING is what's forbidden, not repair: the output section may host a
-   transient fill editor that saves onto the record field — same storage, the field's home row
-   shows the value — rendered only while the field blocks a checked output.)
+   co-located fill editor that saves onto the record field — same storage, the field's home
+   row shows the value — rendered only while a checked output still lacks the field.)
 4. **Resolved state.** Controls show the EFFECTIVE state, never raw storage: a derived/suggested
    selection renders checked; the first manual change persists the full explicit set; a
    reset-to-auto affordance appears only in explicit mode. What's shown = what happens.
 5. **Decision budget.** Every user decision earns its place — derive it, default it, or
    conditionally render it; ask only the underivable. Suggestions are one-tap-save chips; a
    placeholder states the honest effective fallback (what actually happens when empty), never
-   an example that lies.
-6. **Header = identity + provenance.** Id, the key identifier, created-at. No metrics or badges
+   an example that lies. A status/stage is the canonical DERIVED value — computed from its
+   inputs (dates, rollups, amounts), never a `select` the user maintains: if a human must set
+   it by hand, it isn't a status.
+6. **Right section per data kind.** Files live in the ONE Documents desk near the top — never a
+   `files`/`FilesEditor` field scattered into a stage or detail section (a record has a single
+   Documents desk; → the **Documents** section below). A history / payment / event schedule is
+   a plain DATED LIST (Text rows or a simple `Table`), never a `Timeline` — `Timeline` is a
+   genuine activity FEED (who changed what, when), not a schedule of payments.
+7. **Header = identity + provenance.** Id, the key identifier, created-at. No metrics or badges
    duplicating data a section already owns.
-7. **Destructive placement.** Solid `danger`, bottom-left after the entity's fields, ONE
+8. **Destructive placement.** Solid `danger`, bottom-left after the entity's fields, ONE
    convention page-wide, confirmed by `Alert`. Never in a heading row, never one-tap.
-8. **Create-then-refine.** An add is one click creating a draft edited in place — drafts render
+9. **Create-then-refine.** An add is one click creating a draft edited in place — drafts render
    as empty inline editors with placeholders, never as fake data. No type-a-name-then-click
    forms.
-9. **Optimistic feedback.** Every edit echoes locally, saves in the background, reconciles on
-   refetch, reverts + surfaces on error. Silent success, loud failure — no persistent "saved"
-   chrome.
-10. **Chrome discipline.** Kit spacing scale only; ONE divider rule (between sibling blocks,
+10. **Optimistic feedback.** Every edit echoes locally, saves in the background, reconciles on
+    refetch, reverts + surfaces on error. Silent success, loud failure — no persistent "saved"
+    chrome.
+11. **Chrome discipline.** Kit spacing scale only; ONE divider rule (between sibling blocks,
     never doubled with section hairlines, none trailing); no state-echo labels or filler
     captions — explanations live in `info` popovers and empty states (→ [composition grammar
     §Microcopy](./composition.md)). A "why" question about a control is answered by tracing
@@ -167,15 +173,18 @@ screens — register, per-row action, gated selection, and act-on-many in one. T
 
 - **One toolbar row** — search + a status `Select` + facet `FilterChip`s LEFT, the New CTA
   RIGHT; a light `SummaryLine` of the filtered view below.
-- **A sortable, `Divider`-separated `Table`** where every row carries a leading checkbox; a
-  row that can't take the bulk action gets a **disabled** checkbox (the same gating as any
-  blocked line). A per-row action `Button` (here Print) is the row's primary action in the
-  trailing column, `⋯` its overflow. A select-all band, footer totals + `Pagination`, and a
+- **A sortable, `Divider`-separated `Table`** where the record's KEY/identifier is the FIRST
+  column and every row carries a leading checkbox; a row that can't take the bulk action gets a
+  **disabled** checkbox (the same gating as any blocked line). A row's status is
+  `Badge variant="dot"` — never the tonal `Badge` (that's the drawer/header twin; → [composition
+  grammar §"Status indicators have a WEIGHT"](./composition.md)) — and the SAME dot vocabulary
+  drives the status facet. A per-row action `Button` (here Print) is the row's primary action in
+  the trailing column, `⋯` its overflow. A select-all band, footer totals + `Pagination`, and a
   `FloatingActionBar` carrying the bulk action while rows are ticked.
 - **A row press opens the PRODUCTION workspace `Drawer`**, which demonstrates the full
   record-workspace anatomy section by section:
   - **Details `DetailTable`** showing every inline field type — text, `InlineMemberSelect`,
-    dates incl. optional time, dot-select, money number, the `InlineTagSelect` tag field,
+    dates incl. optional time, dot-select, money number, an `InlineSelect multi` tag field,
     and `InlineStatic` + a System badge for read-only values. Detail rows earn trailing CTAs
     where deserved (Phone → Call, Due → Today) — the case where `trailingWidth` IS set.
   - **Linked records** — the customer's other records as `ListItem`s (title + description at
@@ -236,8 +245,8 @@ billing, and quick-capture templates. Top → bottom:
   and `error` (derived, e.g. overdue Due) — always explicit, never an ⓘ; the inline editors
   demo their own transient save error (a throwing `onSave`). The Classification group works
   **the right-input-per-field law**: a field gets the control its SHAPE wants, never a
-  default text box — ≤5 exclusive options the user should see → `RadioPicker` (column when
-  options carry descriptions, row when short), a longer closed list → `InlineSelect` (rich
+  default text box — ≤5 exclusive options the user should see → `RadioPicker` (a stacked
+  column of full-width choices), a longer closed list → `InlineSelect` (rich
   options carry a description line, shown in the resting row too), a pick from a big
   REGISTRY → `Combobox` (search is the input), a boolean → `CheckboxInput`; a DEPENDENT
   field renders only while its parent value makes it real (no disabled ghost rows).
@@ -248,9 +257,15 @@ billing, and quick-capture templates. Top → bottom:
   file-capable edit form injected via `renderEditForm`) + THE kit `Composer` (attach via
   `actionsButton`, staged files in its `files` slot) — never a bespoke comment box.
 - **Tasks** — the full task-list grammar: clearable Group-by `FilterChip` (+ assignee/status
-  chips), the `CaptureRow` on top, `Checklist`/`ChecklistRow` rows with `InlineMemberSelect`
-  assignees and per-row menus, suggestions as `SuggestionChip`s; groups divide via the
-  `SubsectionStack` beat with plain text heads (no dot badges).
+  chips), the `CaptureRow` on top, `Checklist`/`ChecklistRow` rows and per-row menus,
+  suggestions as `SuggestionChip`s; groups divide via the `SubsectionStack` beat with plain
+  text heads (no dot badges). Each row's trailing carries **due + assignee as COMPACT grid CELLS** —
+  the SAME `InlineDatePicker` / `InlineMemberSelect` used in the General section, in **`variant="cell"`**
+  (transparent rest + wash on hover, no glyph/chevron): the due a urgency-coloured date (`tone`
+  = `dueTone` — red past due, amber ≤3d, else muted), the assignee an **`avatarOnly`** bare avatar
+  (dashed add-ghost when unset), sized to the list's `trailingWidth` so the title never overlaps.
+  (Contrast the General section's dates/assignee, the same editors in the default `variant="form"`
+  — a zinc-50 chip + hover-border + the full member chip.)
 - **Documents** — the Agents "Document desk" pattern (shared with `tpl_documents` — change
   it in BOTH): the register `Table` (search · Add files) whose selection feeds the
   `FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI). Every
@@ -260,13 +275,13 @@ billing, and quick-capture templates. Top → bottom:
   sanctioned divergence: GENERATION — on the record page this desk holds what ARRIVES and
   Create moves to the Document set OUTPUT section below; `tpl_documents` (no output
   pipeline on its page) keeps the toolbar "Create documents" dialog.
-- **Customer — the LINKED-RECORD reference implementation** (inline, no wrapper component):
-  another record's data NEVER renders as field rows on this one — a BORDERED, fully
-  pressable box (glyph anchor · identity · facts stacked VERTICALLY, legible at any width)
-  whose press opens the detail drawer (read-only rows + the navigate verb); the action row
-  sits INSIDE the box — destructive (Remove, `danger`) LEFT, go-to (Open record) RIGHT.
-  Built on `PressableRow` + the keyboard door, never `role="button"` on the box — the
-  press anatomy is [composition.md's linked-record law](./composition.md).
+- **Customer — the LINKED-RECORD reference** via **`LinkedRecordBox`**: another record's data
+  NEVER renders as field rows on this one — a BORDERED, fully pressable box (glyph anchor ·
+  identity · facts stacked VERTICALLY) whose press opens the detail drawer; the verbs ride the
+  `actions` slot INSIDE the box — destructive (Remove, `danger`) LEFT, go-to (Open record)
+  RIGHT. The component owns the keyboard-door a11y contract (never `role="button"` on the box —
+  see [composition.md's linked-record law](./composition.md)); the template supplies the icon,
+  facts, and localized verbs.
   Empty state = the find-or-create search, custom row → the create `Dialog` (tax ID + Fetch;
   its field errors ride `DetailRow error`, not a loose line).
 - **Fees — the DETAILED money ledger** (both directions), distinct from Billing's invoice
@@ -301,24 +316,19 @@ billing, and quick-capture templates. Top → bottom:
   consumers ("printed on the delivery note"). The picker rows ride `Checklist`/
   `ChecklistRow` (`controlWidth={24}` for the `CheckboxInput`) — the compound owns the row
   geometry and the `meta`/`expansion` indent; hand-rolling the anatomy is how alignment
-  drifts. Every not-ready row shows BOTH the mark and the explicit trigger — the mark says
-  WHAT (the `meta` line: 12px `circle-alert` + "Needs: …", muted ink until checked,
-  warning once it blocks), the trigger says HOW: a colored `TextLink` ("Add missing
-  fields", link-blue) BESIDE the label — an inline row action; a `Button` here outweighs
-  the row. It toggles the TRANSIENT fill editor in the row's `expansion` ("These values
-  save onto the order and unlock the form.") — `FormTextInput`s (label + the consumer
-  hint as `description`), Cancel / "Save fields" (secondary — the section keeps ONE
-  primary, disabled while a draft is empty). Checking NEVER expands anything by itself —
-  an expansion that only a side effect reveals is no affordance. Save writes the record
-  field (its home row shows the value) and the panel collapses; mark + trigger vanish =
-  ready, and a ready form stays silent. Drafts are keyed BY FIELD, so two forms needing
-  the same field share one draft and one Save resolves both. The trigger HIDES while its
-  panel is open — the panel's Cancel is the closer. Missing fields are the gating law's
-  DEGRADED-BUT-VALID case (those fields print blank, filled by hand later): Create stays
-  ENABLED, the co-located warning `Callout` states the consequence ("… print blank unless
-  filled above"), and the press CONFIRMS via `Alert` — per-form "form — fields" lines,
-  Cancel back to the inline fixes / "Generate anyway". Only an empty pick disables, and
-  silently. A form can also be DATA-conditional (the hazardous-goods note renders only
+  drifts. Warning and fix are CO-LOCATED on the row. The mark NAMES what's missing (the
+  `meta` line: 13px `circle-alert` + "Needs: …" the actual field labels — muted at rest so
+  gaps show WITHOUT checking, warning once checked because it now blocks). The FIX sits
+  right under it in the row's `expansion` — an `Inset` (a FORM surface, NEVER a `Callout`:
+  a warning Callout is an ARIA `alert`, wrong around a form) with a `FormTextInput` per gap
+  (label + the consumer hint as `description`) and a "Save fields" (secondary — the section
+  keeps ONE primary, disabled while every draft is empty). Save writes the record fields
+  (their home rows show the values); the need resolves, the mark clears, the fill drops
+  away. Drafts are keyed BY FIELD, so a field two checked forms share is entered ONCE and
+  one Save resolves both. A ready form stays SILENT. Missing fields are the gating law's
+  DEGRADED-BUT-VALID case (they print blank, filled by hand later): Create stays ENABLED, a
+  co-located warning `Callout` states the consequence, and the press CONFIRMS via `Alert`.
+  Only an empty pick disables, and silently. A form can also be DATA-conditional (the hazardous-goods note renders only
   while the record's Hazardous goods boolean is set — record data may reshape the list,
   output selection never does).
 - **Delivery receipt — the QUICK-ISSUE form, its OWN section** (in the rail): one document
@@ -363,29 +373,13 @@ billing, and quick-capture templates. Top → bottom:
   below that it collapses to the pinned bar. Sizing the column is the SHELL's job — inner
   blocks are plain `width: "100%"`, never a second `maxWidth` + `alignSelf: "center"`.
 
-### `tpl_tasks` — the quick list
-
-The personal to-do shape: quiet `CheckCircle` rows you tick to finish and tap to **expand in
-place** to edit (`Inline*` editors; the row is stable — the meta summary never shifts on
-expand), colour-dot tags (`OptionBadge`), an attachments field (`FilesEditor` — thumbnail
-grid, tap a tile for the gallery with download + confirmed remove, plus its Add button),
-search + a clearable group-by (✕ → ungrouped) + tag filter chips, and a primary
-Draft-from-notes CTA (`Composer` → `AgentRun` → `ChangeReview`). No assignee — the list is
-yours.
-
-**Warning — never a button in a button.** There is deliberately NO `Task` component: a task
-row varies too much to bake into one, so rows compose `CheckCircle` + `InlineTextInput` +
-inline-editor cells as **sibling** controls in a plain `View`. NEVER wrap the whole row in a
-`Pressable accessibilityRole="button"` (for tap-to-expand) with those controls nested inside:
-React Native Web renders the row AND each control as a `<button>`, so you get `<button>`s
-inside a `<button>` — invalid DOM, and the inner controls drop out of the keyboard tab order.
-Give "expand" its own affordance (a trailing `Pressable` over the meta/chevron), as
-`tpl_tasks` does.
-
 ### `tpl_task_board` — the columns shape
 
 The manager's board: a search · group-by · filter toolbar over a grouped, sortable grid of
-LIVE inline-editable cells — assignee/due/status/tags set directly in the cell. It builds on
+LIVE editable cells — assignee/due/status/tags ALL via `Inline*` editors in **`variant="cell"`**
+(`InlineMemberSelect` · `InlineDatePicker` · `InlineSelect`, and tags an `InlineSelect multi
+allowCustom` — create-a-tag included), set directly in the cell. Every editable cell + the custom
+Files/Action cells share ONE hover language (the `zinc-100` wash); no cell reveals a border. It builds on
 the `DataGrid` primitive (the inline-managed grouped-table shape) and **owns only its data,
 toolbar, columns, and per-group add**; `DataGrid` owns the sortable header, the collapsible
 grouped sections, and the aligned rows. It demonstrates:
@@ -397,14 +391,15 @@ grouped sections, and the aligned rows. It demonstrates:
   workflow: one board, a different action per row; the link's pressable fills the cell to
   match the inline editors.
 - A trailing `ActionMenu` (the `⋯` overflow — a `danger` Remove behind a confirm `Alert`).
-- CUSTOM pressable cells (files, the action link) hover with the control-surface BORDER
-  reveal (`HOVER_BORDER` from `@lotics/ui/control_surface`) — the same language as the
-  inline-editor cells beside them, never their own background wash.
+- CUSTOM pressable cells (files, the action link) hover with the **background-tint WASH**
+  (`zinc-100`) — the standard CELL language, matching the `variant="cell"` editors beside them.
+  (A `variant="form"` editor reveals a border; a `variant="cell"` editor uses the wash — the two
+  hover languages, one per surface.)
 - Per-group add rows that pre-set the group's field (align with the exported `gridRowStyle`),
-  and the same Draft-from-notes CTA as `tpl_tasks`.
+  and a Draft-from-notes CTA.
 
-Both `tpl_tasks` and `tpl_task_board`: filters/search left, primary CTA right, one toolbar
-row; group-by holds only real dimensions, ✕ clears to ungrouped (no "Nothing" option).
+`tpl_task_board`: filters/search left, primary CTA right, one toolbar row; group-by holds
+only real dimensions, ✕ clears to ungrouped (no "Nothing" option).
 
 **Altitude rule**: `tpl_task_board` is the inline-managed grouped table — MODERATE data you
 manage in view (group/sort/filter/edit-in-place; it renders ALL rows). For thousands+ you

package/examples/tpl_item_list.tsx

@@ -56,7 +56,6 @@ import { Callout, CalloutText } from "@lotics/ui/callout";
 import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
 import { Link } from "@lotics/ui/link";
 import { TextInputField } from "@lotics/ui/text_input_field";
-import { InlineTagSelect } from "@lotics/ui/inline_tag_select";
 import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle } from "@lotics/ui/section_heading";
 import { DangerZone } from "@lotics/ui/danger_zone";
 import { ChipGroup } from "@lotics/ui/chip_group";
@@ -209,7 +208,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
             <>
               <View style={{ width: 150 }}>
                 <InlineMemberSelect
-                  background="transparent"
+                  variant="cell"
                   members={MEMBERS}
                   value={t.assignee}
                   onSave={(m) => patch(t.id, { assignee: m })}
@@ -219,7 +218,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
               </View>
               <View style={{ width: 130 }}>
                 <InlineDatePicker
-                  background="transparent"
+                  variant="cell"
                   value={t.due}
                   onSave={(v) => patch(t.id, { due: v })}
                   placeholder="Set due…"
@@ -230,7 +229,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
           }
         >
           <InlineTextInput
-            background="transparent"
+            variant="cell"
             value={t.label}
             onSave={(v) => patch(t.id, { label: v })}
             struck={t.done}
@@ -618,11 +617,12 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
               <InlineNumberInput value={declared} onSave={persist(setDeclared)} min={0} format={(v) => (v == null ? "" : formatMoney(v))} accessibilityLabel="Declared value" />
             </DetailRow>
             <DetailRow label="Tags">
-              <InlineTagSelect
+              <InlineSelect
+                multi
                 value={tags}
                 onSave={persist(setTags)}
                 options={TAG_OPTIONS}
-                renderTag={renderTagBadge}
+                renderSelected={renderTagBadge}
                 placeholder="Add tags…"
                 accessibilityLabel="Tags"
               />
@@ -957,7 +957,6 @@ function RecordDrawer({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, on
           hs.khach
         )
       }
-      width={440}
       onPrev={canGoBack ? undefined : onPrev}
       onNext={canGoBack ? undefined : onNext}
       position={canGoBack ? undefined : position}