@lotics/ui 12.1.1 → 13.7.0

package/examples/tpl_record.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
-import { Pressable, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
 import { Button } from "@lotics/ui/button";
@@ -12,6 +12,7 @@ import type { PickerOption } from "@lotics/ui/picker";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Callout, CalloutText } from "@lotics/ui/callout";
+import { Inset } from "@lotics/ui/inset";
 import { Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { MenuButton } from "@lotics/ui/menu_button";
@@ -58,10 +59,7 @@ import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Finding, FindingComparison } from "@lotics/ui/finding";
 import { FormTextInput } from "@lotics/ui/form_text_input";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { TextLink } from "@lotics/ui/text_link";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { useFocusRing } from "@lotics/ui/use_focus_ring";
-import { FOCUS_RING } from "@lotics/ui/control_surface";
+import { LinkedRecordBox } from "@lotics/ui/linked_record_box";
 import { RadioPicker } from "@lotics/ui/radio_picker";
 import { SearchInput } from "@lotics/ui/search_input";
 import { useSelection } from "@lotics/ui/use_selection";
@@ -159,7 +157,27 @@ interface StageTask {
   stage: Desk;
   done: boolean;
   assignee: string | null;
+  /** ISO date (`""` = no due). The row shows it in a `variant="cell"` date field —
+   *  no calendar glyph, coloured by urgency (`tone`), press to edit. */
+  due: string;
 }
+
+// A due date N days from today — keeps the seeded urgency states (overdue / soon /
+// later) correct whenever the gallery is opened.
+const dueIn = (n: number): string => {
+  const d = new Date();
+  d.setDate(d.getDate() + n);
+  return d.toISOString().slice(0, 10);
+};
+// The urgency tone for a due date, fed to the cell's `tone`: red past due, amber within
+// 3 days, else muted — the date text itself is the signal (no separate dot). Done → muted.
+const dueTone = (due: string, done: boolean): "danger" | "warning" | "muted" => {
+  if (!due || done) return "muted";
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const days = Math.round((new Date(due).getTime() - today.getTime()) / 86_400_000);
+  return days < 0 ? "danger" : days <= 3 ? "warning" : "muted";
+};
 // Common-but-OPTIONAL tasks per desk — in a real app, the record type's
 // configured checklist. A NEW record starts with an EMPTY list (tasks truly
 // vary); these commons wait as dismissible suggestion CHIPS under each desk
@@ -180,13 +198,13 @@ const newTaskId = () => `t_${(taskSeq += 1)}`;
 
 // The in-flight demo record's existing checklist (a NEW record gets []).
 const TASK_SEEDS: StageTask[] = [
-  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01" },
-  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01" },
-  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null },
-  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02" },
-  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null },
-  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03" },
-  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null },
+  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10) },
+  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "" },
+  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null, due: dueIn(-2) },
+  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1) },
+  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null, due: dueIn(6) },
+  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "" },
+  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14) },
 ];
 
 // The assignable roster — an app feeds `useMembers()` here.
@@ -569,28 +587,6 @@ const FEE_COLUMNS: TableColumn[] = [
 const feeOverdue = (f: Fee): boolean => !f.paid && f.due !== "" && new Date(f.due) < new Date();
 
 
-/** The keyboard DOOR of a pressable linked-record box: an EMPTY absolutely-
- *  positioned sibling BENEATH the box's content — a button must not contain
- *  the box's interactive descendants (the `PressableRow`/`TableRow` law), so
- *  the door carries the tab stop, the accessible name and the focus ring;
- *  mouse presses ride the `PressableRow` surface, and the interior verbs
- *  lift above the door via `zIndex: 1`. */
-function BoxDoor({ label, onPress }: { label: string; onPress: () => void }) {
-  const { focusVisible, focusProps } = useFocusRing();
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      onPress={onPress}
-      {...focusProps}
-      style={[
-        { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, borderRadius: 10 },
-        focusVisible ? { boxShadow: FOCUS_RING } : null,
-      ]}
-    />
-  );
-}
-
 /** The file-capable comment editor injected via `renderEditForm` — text + the
  *  comment's attachments (each removable), committed together (the DEFAULT
  *  edit form is text-only; the product injects its own equivalent). */
@@ -627,12 +623,13 @@ const DOC_COLUMNS: TableColumn[] = [
 // folds behind "Show all forms". (The Documents section above is the INTAKE
 // register — received files; this registry is what the record can PRODUCE.)
 // READINESS: a form declares which RECORD FIELDS it reads (`needs`). The
-// fields' HOME stays their DATA section (the colocation law); every
-// not-ready row shows its mark AND the explicit "Add missing fields"
-// trigger, which toggles a TRANSIENT fill editor under the row (draft →
-// "Save fields" commits onto the record and the panel collapses) — repair
-// in place, never scrolling off hunting for the field. The hint is each
-// field's consumer line, shown in the panel too.
+// fields' HOME stays their DATA section (the colocation law). Warning and fix
+// are CO-LOCATED on the row: a not-ready row's mark NAMES what's missing (muted
+// at rest so gaps show without checking, warning once checked), and the fix sits
+// right under it in the `expansion` — an `Inset` (a FORM surface, never a Callout,
+// which is an ARIA alert) with the editors, saved onto the record in place. 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.
 type NeedKey = "delivery_address" | "commodity_code" | "hazard_class";
 const NEEDS: Record<NeedKey, { label: string; hint: string }> = {
   delivery_address: { label: "Delivery address", hint: "The consignee's dock — printed on the delivery note" },
@@ -1039,21 +1036,11 @@ export function TplRecord() {
   const isEligible = (f: SetForm) => f.id !== "c3" || hazardousGoods;
   const checkedForms = ALL_FORMS.filter((f) => isEligible(f) && chosenForms.has(f.id));
   const blockingNeeds = [...new Set(checkedForms.flatMap(missingOf))];
-  // the fill panels' DRAFTS — keyed by field, SHARED between panels needing
-  // the same field; Save commits onto the record (the panel then collapses
-  // because the need resolved, and the field's home row shows the value)
+  // the per-row fills' DRAFTS — keyed by field, SHARED between the rows of forms that
+  // need the same field, so filling it under one form resolves it for all; Save commits
+  // onto the record and the field's home row shows the value (the need resolves, the
+  // row's mark clears, the fill drops away).
   const [fillDrafts, setFillDrafts] = useState<Record<string, string>>({});
-  // which rows have their fill editor OPEN — toggled ONLY by the row's
-  // explicit "Add missing fields" trigger, never as a side effect of
-  // checking (an undiscoverable expansion is no affordance)
-  const [openFill, setOpenFill] = useState<ReadonlySet<string>>(new Set());
-  const toggleFillOpen = (fid: string) =>
-    setOpenFill((prev) => {
-      const next = new Set(prev);
-      if (next.has(fid)) next.delete(fid);
-      else next.add(fid);
-      return next;
-    });
   const needSetters: Record<NeedKey, (v: string) => void> = { delivery_address: setDeliveryAddress, commodity_code: setCommodityCode, hazard_class: setHazardClass };
   const saveNeeds = (keys: NeedKey[]) => {
     for (const k of keys) needSetters[k]((fillDrafts[k] ?? "").trim());
@@ -1125,11 +1112,11 @@ export function TplRecord() {
   const addTask = () => {
     const label = newTask.trim();
     if (!label) return;
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null }]);
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null, due: "" }]);
     setNewTask("");
   };
   const addSuggested = (desk: Desk, label: string) =>
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null }]);
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null, due: "" }]);
   const removeTask = (tid: string) => setTasks((prev) => prev.filter((t) => t.id !== tid));
   const moveTask = (tid: string, desk: Desk) =>
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, stage: desk } : t)));
@@ -1138,6 +1125,8 @@ export function TplRecord() {
   const [dismissed, setDismissed] = useState<string[]>([]);
   const assignTask = (tid: string, member: string | null) =>
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, assignee: member } : t)));
+  const dueTask = (tid: string, due: string) =>
+    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, due } : t)));
   // The Task-list grammar: a clearable Group-by + filter chips derive the
   // sections; empty groups drop (except desks — the journey stays visible).
   const [taskGroup, setTaskGroup] = useState<"desk" | "assignee" | "status" | null>("desk");
@@ -1539,7 +1528,7 @@ export function TplRecord() {
             {/* CLASSIFICATION — the right-input-per-field law, worked. A field
                 gets the control its SHAPE wants, not a default text box:
                 · ≤5 exclusive options the user should SEE → RadioPicker
-                  (column when options carry descriptions, row when short)
+                  (a stacked column of full-width choices)
                 · a longer closed list → InlineSelect (rich options carry a
                   description line — it shows in the resting row too)
                 · a pick from a big REGISTRY → InlineSelect searchable (the
@@ -1585,7 +1574,6 @@ export function TplRecord() {
                 <DetailRow label="Insurance">
                   <RadioPicker
                     accessibilityLabel="Insurance"
-                    direction="row"
                     value={insurance}
                     onValueChange={setInsurance}
                     options={[
@@ -1808,7 +1796,7 @@ export function TplRecord() {
                     desk's rows fully editable (the stage gates the handoff
                     and Billing, never task editing — planning ahead on a
                     later desk is normal work) */}
-                <Checklist trailingWidth={156}>
+                <Checklist trailingWidth={152}>
                   {g.items.map((t) => {
                     const next = nextDeskOf(t.stage);
                     const menuItems: ActionMenuItem[] = [
@@ -1828,19 +1816,21 @@ export function TplRecord() {
                           />
                         }
                         trailing={
-                          <InlineMemberSelect
-                            background="transparent"
-                            members={TEAM}
-                            value={t.assignee}
-                            onSave={(m) => assignTask(t.id, m)}
-                            placeholder="Assign…"
-                            accessibilityLabel={`Assignee · ${t.label}`}
-                          />
+                          // Due + assignee as COMPACT grid cells (`variant="cell"`): the due a
+                          // urgency-coloured date (no calendar glyph), the assignee a bare AVATAR
+                          // (`avatarOnly` — no name/chevron, a dashed add-ghost when unset). Both
+                          // hug within the list's `trailingWidth` so the title never overlaps.
+                          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
+                            <View style={{ width: 104 }}>
+                              <InlineDatePicker variant="cell" tone={dueTone(t.due, t.done)} value={t.due || null} onSave={(v) => dueTask(t.id, v)} onClear={() => dueTask(t.id, "")} placeholder="Due…" locale="en-US" accessibilityLabel={`Due · ${t.label}`} />
+                            </View>
+                            <InlineMemberSelect variant="cell" avatarOnly members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} accessibilityLabel={`Assignee · ${t.label}`} />
+                          </View>
                         }
                         menu={{ items: menuItems, accessibilityLabel: `Task options: ${t.label}` }}
                       >
                         <InlineTextInput
-                          background="transparent"
+                          variant="cell"
                           value={t.label}
                           onSave={(v) => renameTask(t.id, v)}
                           struck={t.done}
@@ -1965,50 +1955,28 @@ export function TplRecord() {
           </SectionHeading>
           {customer ? (
             <View style={{ gap: 10 }}>
-              {/* the LINKED-record REFERENCE IMPLEMENTATION (no wrapper
-                  component; copy and customize): a BORDERED box scoping the
-                  other record's data — identity, then the facts stacked
-                  VERTICALLY (legible at any width, never squeezed), the verbs
-                  visible inside (destructive LEFT in danger, go-to RIGHT).
-                  The WHOLE box presses open the detail drawer — built on
-                  `PressableRow` (role-less surface, hover wash spans nested
-                  controls) + the `BoxDoor` sibling: NEVER role="button" on a
-                  container with interactive descendants (invalid HTML). */}
-              <PressableRow
-                onPress={() => setCustomerOpen(true)}
-                style={{ flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingVertical: 16, gap: 12 }}
-              >
-                <BoxDoor label={`${customer.name} — details`} onPress={() => setCustomerOpen(true)} />
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                  <View style={{ width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-                    <Icon name="building-2" size={17} color={colors.zinc[600]} />
-                  </View>
-                  <View style={{ flex: 1, minWidth: 0 }}>
-                    <Text size="sm" weight="medium" numberOfLines={1}>{customer.name}</Text>
-                    <Text size="xs" color="muted" tabular>{customer.code}</Text>
-                  </View>
-                </View>
-                <View style={{ gap: 6 }}>
-                  {[
-                    { label: "Tax ID", value: customer.taxId || "—" },
-                    { label: "Contact", value: customer.contact || "—" },
-                    { label: "City", value: customer.city || "—" },
-                  ].map((f) => (
-                    <View key={f.label} style={{ flexDirection: "row", gap: 10 }}>
-                      <Text size="sm" color="muted" style={{ width: 80 }}>{f.label}</Text>
-                      <Text size="sm" style={{ flex: 1 }}>{f.value}</Text>
-                    </View>
-                  ))}
-                </View>
-                {/* the action row, INSIDE the box: destructive on the LEFT,
-                    the go-to verb on the RIGHT (the box itself = details);
-                    zIndex lifts the verbs above the door's hit area */}
-                <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 }}>
-                  <Button title="Remove" color="danger" onPress={() => setCustomerId(null)} />
-                  <View style={{ flex: 1 }} />
-                  <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the customer's page */ }} />
-                </View>
-              </PressableRow>
+              {/* The linked-record REFERENCE: the whole box is the keyboard door to the
+                  customer's detail (the a11y contract lives in `LinkedRecordBox`); the verbs
+                  ride inside — destructive Remove LEFT, go-to Open record RIGHT. */}
+              <LinkedRecordBox
+                icon="building-2"
+                name={customer.name}
+                subtitle={customer.code}
+                facts={[
+                  { label: "Tax ID", value: customer.taxId || "—" },
+                  { label: "Contact", value: customer.contact || "—" },
+                  { label: "City", value: customer.city || "—" },
+                ]}
+                doorLabel={`${customer.name} — details`}
+                onOpen={() => setCustomerOpen(true)}
+                actions={
+                  <>
+                    <Button title="Remove" color="danger" onPress={() => setCustomerId(null)} />
+                    <View style={{ flex: 1 }} />
+                    <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the customer's page */ }} />
+                  </>
+                }
+              />
               {/* invalid STATE is a Callout CO-LOCATED with what it describes —
                   it lives on the customer card, not floating at a section top */}
               {!taxIdValid ? (
@@ -2022,7 +1990,17 @@ export function TplRecord() {
               <Combobox
                 options={customerOptions}
                 onValueChange={onPickCustomer}
-                getOptionDescription={(o) => (o.data ? `${o.data.code} · ${o.data.city}` : undefined)}
+                renderOptionContent={(o) => (
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                    <View style={{ width: 28, height: 28, borderRadius: 7, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
+                      <Icon name="building-2" size={14} color={colors.zinc[600]} />
+                    </View>
+                    <View style={{ flex: 1, minWidth: 0 }}>
+                      <Text size="sm" weight="medium" numberOfLines={1}>{o.label}</Text>
+                      {o.data ? <Text size="xs" color="muted">{[o.data.city, o.data.taxId ? `Tax ID ${o.data.taxId}` : "No tax ID"].filter(Boolean).join(" · ")}</Text> : null}
+                    </View>
+                  </View>
+                )}
                 reflectSelection={false}
                 allowCustom
                 customOptionPlacement="top"
@@ -2200,32 +2178,27 @@ export function TplRecord() {
                       alignment drifts. controlWidth 24 = CheckboxInput. */}
                   <Checklist controlWidth={24}>
                     {shown.map((f) => {
-                      // READINESS per row, DISCOVERABLE: every not-ready row
-                      // shows its mark (what's missing — warning ink once
-                      // checked, because it now blocks) AND the explicit
-                      // trigger beside the label — a colored TextLink (an
-                      // inline row action; a Button here outweighs the row)
-                      // toggling the TRANSIENT fill editor in the row's
-                      // `expansion`. Save commits onto the record fields
-                      // (their home rows show the values) and the panel
-                      // collapses resolved; mark + trigger vanish = ready. A
-                      // ready form stays SILENT. Checking never expands
-                      // anything by itself.
+                      // READINESS per row, CO-LOCATED: a not-ready row's mark NAMES what's
+                      // missing (muted at rest — discoverable without checking; warning once
+                      // checked, it now blocks), and the FIX sits right under it in the
+                      // `expansion` — an `Inset` (a FORM surface, never a Callout, which is an
+                      // ARIA alert) with the editor for each gap, saved onto the record in
+                      // place. 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.
                       const missing = missingOf(f);
                       const checked = chosenForms.has(f.id);
-                      const filling = missing.length > 0 && openFill.has(f.id);
                       return (
                         <ChecklistRow
                           key={f.id}
                           control={<CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />}
-                          meta={missing.length > 0 && !filling ? (
-                            <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
-                              <Icon name="circle-alert" size={12} color={colors.amber[500]} />
-                              <Text size="xs" color={checked ? "warning" : "muted"}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
+                          meta={missing.length > 0 ? (
+                            <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 5 }}>
+                              <Icon name="circle-alert" size={13} color={checked ? colors.amber[500] : colors.zinc[400]} />
+                              <Text size="xs" color={checked ? "warning" : "muted"} style={{ flexShrink: 1 }}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
                             </View>
                           ) : undefined}
-                          expansion={filling ? (
-                            <View style={{ backgroundColor: colors.zinc[50], borderRadius: 10, padding: 14, gap: 12, maxWidth: 460 }}>
+                          expansion={checked && missing.length > 0 ? (
+                            <Inset>
                               <Text size="xs" color="muted">These values save onto the order and unlock the form.</Text>
                               {missing.map((k) => (
                                 <FormTextInput
@@ -2237,31 +2210,18 @@ export function TplRecord() {
                                   accessibilityLabel={NEEDS[k].label}
                                 />
                               ))}
-                              <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8 }}>
-                                {/* secondary — the section keeps ONE primary
-                                    (Create); disabled while a draft is empty */}
-                                <Button title="Cancel" color="muted" onPress={() => toggleFillOpen(f.id)} />
+                              <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
                                 <Button
                                   title="Save fields"
                                   color="secondary"
-                                  disabled={missing.some((k) => !(fillDrafts[k] ?? "").trim())}
-                                  onPress={() => { saveNeeds(missing); toggleFillOpen(f.id); }}
+                                  disabled={missing.every((k) => !(fillDrafts[k] ?? "").trim())}
+                                  onPress={() => saveNeeds(missing)}
                                 />
                               </View>
-                            </View>
+                            </Inset>
                           ) : undefined}
                         >
-                          <View style={{ flexDirection: "row", alignItems: "center", columnGap: 12, rowGap: 2, flexWrap: "wrap" }}>
-                            <Text size="sm" style={{ flexShrink: 1 }}>{f.label}</Text>
-                            {/* the trigger hides while ITS panel is open —
-                                the panel's Cancel is the closer; a toggle
-                                verb above an open editor is noise */}
-                            {missing.length > 0 && !filling ? (
-                              <TextLink size="xs" onPress={() => toggleFillOpen(f.id)} style={{ color: colors.blue[600] }}>
-                                Add missing fields
-                              </TextLink>
-                            ) : null}
-                          </View>
+                          <Text size="sm" style={{ flexShrink: 1 }}>{f.label}</Text>
                         </ChecklistRow>
                       );
                     })}
@@ -2291,11 +2251,10 @@ export function TplRecord() {
             </Subsection>
             <Subsection>
               <View style={{ gap: 12 }}>
-                {/* the CONSEQUENCE, co-located, once (the gating law's
-                    degraded-but-valid case — Create stays ENABLED and the
-                    press confirms; the repair lives in the rows' fill
-                    panels above). An empty pick stays silently disabled —
-                    self-evident. */}
+                {/* the CONSEQUENCE, co-located, once — the gating law's degraded-but-valid
+                    case (Create stays ENABLED, missing fields print blank, the press
+                    confirms); the REPAIR lives co-located in each not-ready row's fill above.
+                    An empty pick stays silently disabled — self-evident. */}
                 {blockingNeeds.length > 0 ? (
                   <Callout tone="warning">
                     <CalloutText>
@@ -2443,41 +2402,25 @@ export function TplRecord() {
           {siblings.length > 0 ? (
             <View style={{ gap: 16 }}>
               {siblings.map((sb) => (
-                <PressableRow
+                <LinkedRecordBox
                   key={sb.id}
-                  onPress={() => setSiblingOpen(sb.id)}
-                  style={{ flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingVertical: 16, gap: 12 }}
-                >
-                  <BoxDoor label={`${sb.code} — details`} onPress={() => setSiblingOpen(sb.id)} />
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                      <View style={{ width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-                        <Icon name="file-text" size={17} color={colors.zinc[600]} />
-                      </View>
-                      <View style={{ flex: 1, minWidth: 0 }}>
-                        <Text size="sm" weight="medium" numberOfLines={1}>{sb.code}</Text>
-                        <Text size="xs" color="muted">{`${sb.desk} record`}</Text>
-                      </View>
-                    </View>
-                    <View style={{ gap: 6 }}>
-                      {[
-                        { label: "Assignee", value: sb.assignee || "—" },
-                        { label: "Created", value: sb.at },
-                        { label: "Note", value: sb.note || "—" },
-                      ].map((f) => (
-                        <View key={f.label} style={{ flexDirection: "row", gap: 10 }}>
-                          <Text size="sm" color="muted" style={{ width: 80 }}>{f.label}</Text>
-                          <Text size="sm" style={{ flex: 1 }}>{f.value}</Text>
-                        </View>
-                      ))}
-                    </View>
-                  {/* the action row, INSIDE the box, the go-to verb on the
-                      RIGHT (the box itself = details; nothing destructive
-                      here — the handoff mark stays); zIndex lifts it above
-                      the door's hit area */}
-                  <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, justifyContent: "flex-end", zIndex: 1 }}>
-                    <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the sibling's page */ }} />
-                  </View>
-                </PressableRow>
+                  icon="file-text"
+                  name={sb.code}
+                  subtitle={`${sb.desk} record`}
+                  facts={[
+                    { label: "Assignee", value: sb.assignee || "—" },
+                    { label: "Created", value: sb.at },
+                    { label: "Note", value: sb.note || "—" },
+                  ]}
+                  doorLabel={`${sb.code} — details`}
+                  onOpen={() => setSiblingOpen(sb.id)}
+                  actions={
+                    <>
+                      <View style={{ flex: 1 }} />
+                      <Button title="Open record" color="secondary" onPress={() => { /* a real app navigates to the sibling's page */ }} />
+                    </>
+                  }
+                />
               ))}
             </View>
           ) : null}

package/examples/tpl_task_board.tsx

@@ -16,7 +16,6 @@ import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
 import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineSelect } from "@lotics/ui/inline_select";
-import { Select } from "@lotics/ui/select";
 import { TextInputField } from "@lotics/ui/text_input_field";
 import { ActionMenu } from "@lotics/ui/action_menu";
 import { Alert } from "@lotics/ui/alert";
@@ -25,7 +24,7 @@ import { Popover, PopoverTrigger, PopoverContent } from "@lotics/ui/popover";
 import { FilesEditor } from "@lotics/ui/files_editor";
 import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { DataGrid, gridRowStyle, type DataGridColumn, type DataGridGroup } from "@lotics/ui/data_grid";
-import { CONTROL_RADIUS, HOVER_BORDER } from "@lotics/ui/control_surface";
+import { CONTROL_RADIUS } from "@lotics/ui/control_surface";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Composer } from "@lotics/ui/composer";
 import { AgentRun, type AgentRunItem } from "@lotics/ui/agent_run";
@@ -265,10 +264,10 @@ export function TplTaskBoard() {
   }
 
   const propertyCols: DataGridColumn<Task>[] = [
-    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect background="transparent" members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} onClear={() => patch(t.id, { ownerId: null })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
-    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker background="transparent" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} onClear={() => patch(t.id, { due: null })} placeholder="No date" accessibilityLabel="Due date" /> },
-    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect background="transparent" value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
-    { key: "tags", label: "Tags", width: 168, cell: (t) => <Select multi searchable allowCustom value={t.tags.map((tag) => tag.value)} onValueChange={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" /> },
+    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect variant="cell" members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} onClear={() => patch(t.id, { ownerId: null })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
+    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker variant="cell" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} onClear={() => patch(t.id, { due: null })} placeholder="No date" accessibilityLabel="Due date" /> },
+    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect variant="cell" value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
+    { key: "tags", label: "Tags", width: 168, cell: (t) => <InlineSelect multi searchable allowCustom variant="cell" value={t.tags.map((tag) => tag.value)} onSave={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" /> },
   ];
   const filesCol: DataGridColumn<Task> = {
     key: "files", label: "Files", width: 100, sortable: false,
@@ -295,7 +294,7 @@ export function TplTaskBoard() {
   const visibleProps = propertyCols.filter((c) => c.key !== groupBy);
   const addCols = [...visibleProps, filesCol, actionCol, menuCol];
   const columns: DataGridColumn<Task>[] = [
-    { key: "title", label: "Task", sortable: true, cell: (t) => <InlineTextInput background="transparent" value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
+    { key: "title", label: "Task", sortable: true, cell: (t) => <InlineTextInput variant="cell" value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
     ...addCols,
   ];
 
@@ -436,12 +435,12 @@ function TaskProposal({ proposal, onEdit }: { proposal: Proposal; onEdit: (id: s
     <View style={{ gap: 10 }}>
       <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
         <View style={{ flex: 1 }}>
-          <InlineTextInput background="transparent" value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
+          <InlineTextInput variant="cell" value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
         </View>
         <View style={{ paddingTop: 10 }}><Confidence level={proposal.confidence} /></View>
       </View>
       <View style={{ width: 220 }}>
-        <InlineDatePicker background="transparent" value={proposal.due} optionalTime onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
+        <InlineDatePicker variant="cell" value={proposal.due} optionalTime onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
       </View>
       <View style={styles.source}><Text size="xs" color="muted">{proposal.source}</Text></View>
     </View>
@@ -528,10 +527,10 @@ function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns
   // Files / action / ⋯ act on a task that already exists, so the add row leaves
   // those columns empty — the widths are still reserved so the columns stay aligned.
   const editor = (key: string) =>
-    key === "assignee" ? <InlineMemberSelect background="transparent" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
-    : key === "due" ? <InlineDatePicker background="transparent" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
-    : key === "status" ? <InlineSelect background="transparent" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
-    : key === "tags" ? <Select multi searchable allowCustom value={tags.map((tag) => tag.value)} onValueChange={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" />
+    key === "assignee" ? <InlineMemberSelect variant="cell" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
+    : key === "due" ? <InlineDatePicker variant="cell" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
+    : key === "status" ? <InlineSelect variant="cell" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
+    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="cell" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
     : null;
 
   return (
@@ -556,18 +555,17 @@ const styles = StyleSheet.create({
   ring: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
   input: { borderWidth: 0, backgroundColor: "transparent" },
   addField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
-  // Match the inline-editor cells' resting box (INLINE_CONTROL_HEIGHT = 40) so the
-  // files field lines up with the others — and that height affords a larger thumbnail.
-  // Hover = the control-surface BORDER reveal, the same language as the
-  // inline-editor cells beside these — never a background wash of its own.
-  clip: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, borderWidth: 1, borderColor: "transparent", cursor: "pointer" },
-  clipHover: { borderColor: HOVER_BORDER },
+  // Match the CELL height (40) so the files field lines up with the others — and that
+  // height affords a larger thumbnail. Hover = the background-tint WASH (zinc-100), the
+  // standard CELL language (same as the variant="cell" editors beside these).
+  clip: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, cursor: "pointer" },
+  clipHover: { backgroundColor: colors.zinc[100] },
   clipPreview: { flexDirection: "row", alignItems: "center", gap: 6 },
   summary: { flexDirection: "row", alignItems: "center", gap: 4 },
   summaryDot: { width: 8, height: 8, borderRadius: 999 },
   result: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40 },
-  // Fills the cell (height + width) so the link's hit area matches the inline cells.
-  action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, borderWidth: 1, borderColor: "transparent", cursor: "pointer" },
-  actionHover: { borderColor: HOVER_BORDER },
+  // Fills the cell (height + width) so the link's hit area matches the cells; wash hover.
+  action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, cursor: "pointer" },
+  actionHover: { backgroundColor: colors.zinc[100] },
   source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "12.1.1",
+  "version": "13.7.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -36,7 +36,6 @@
     "./use_selection": "./src/use_selection.ts",
     "./use_section_nav": "./src/use_section_nav.ts",
     "./ledger": "./src/ledger.tsx",
-    "./inline_tag_select": "./src/inline_tag_select.tsx",
     "./use_selection_mode": "./src/use_selection_mode.ts",
     "./file_thumbnail_grid": "./src/file_thumbnail_grid.tsx",
     "./uploading_thumbnail": "./src/uploading_thumbnail.tsx",
@@ -120,6 +119,8 @@
     "./card_select_item": "./src/card_select_item.tsx",
     "./badge": "./src/badge.tsx",
     "./callout": "./src/callout.tsx",
+    "./inset": "./src/inset.tsx",
+    "./linked_record_box": "./src/linked_record_box.tsx",
     "./inline_edit": "./src/inline_edit.tsx",
     "./inline_static": "./src/inline_static.tsx",
     "./inline_text_input": "./src/inline_text_input.tsx",