@lotics/ui 27.9.0 → 27.10.0

package/AGENTS.md

@@ -42,8 +42,10 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   `PipelineStage`, over `stepper`) — worked in `examples/tpl_record.tsx` § Progress, which it took
   over FROM a per-desk checklist. Rendering positions as a checklist forces every row to carry
   every control and never says where the record sits; rendering work items as a pipeline implies
-  an order that is not there. A long ladder whose stages each own one value goes dense with
-  `PipelineStage.trailing` rather than a hand-rolled title row — see `docs/catalog.md`.
+  an order that is not there. A ladder is TICKED — `PipelineStage.onToggle` makes the marker the
+  completion control (never a checkbox beside it), and the stamped date rides the title row via
+  `trailing` as a `DateStamp`: muted text, no frame, click to correct. One ladder per record,
+  never a handoff run beside a milestone run — see `docs/catalog.md`.
 - **`Badge` = STATUS only; supporting detail is the muted second line.** A type / category /
   attribute / count is not a status — it belongs under its identity as `size="xs" color="muted"`,
   never a second chip. A chip beside a name reads as its PEER (a colored one reads louder),

package/docs/catalog.md

@@ -1003,6 +1003,15 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 
 ### Tasks & checklists
 
+- **`date_stamp`** — `DateStamp`: a recorded date shown QUIETLY and correctable — small muted
+  text at rest, no frame, no icon, no control band; underlined on hover; the press opens the
+  kit's `DatePickerPanel`. For a date the SYSTEM writes and a person only occasionally
+  overrides (a milestone ticked, a status flipped). NOT `InlineDatePicker` with its surface
+  removed: that is a form FIELD — calendar icon, control band, typed `DateField`, em-dash when
+  empty — and a ladder of fields is a form with invisible borders. Reach for `InlineDatePicker`
+  when a person is expected to ENTER the date, and this when the system already knows it.
+  Empty renders a thin rule, not a placeholder; read-only (omit `onChange`) renders text alone.
+  Worked screen: `examples/tpl_record.tsx` § Progress.
 - **`check_circle`** — `CheckCircle`: the completion ring — `state="none" | "partial" | "done"`,
   springing to a filled check when done, distinct from the square checkbox; the
   task/to-do/checklist control. `partial` half-fills it, for the row that is underway but not
@@ -1261,7 +1270,24 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   one rhythm whatever the value is. An ACT still belongs in `PipelineActions`.
   Worked screen: `examples/tpl_record.tsx` § Progress — the desks (Sales → Operations →
   Accounting) ARE the stages, each owning the facts it stamps and, on the live one, the act
-  that leaves it. A `PipelineStage` is deliberately NOT pressable: its body holds the controls.
+  that leaves it. A `PipelineStage` body is deliberately NOT pressable: it holds the controls.
+  **`PipelineStage.onToggle`** is the one exception and lives on the MARKER — the node becomes a
+  pressable `CheckCircle` instead of a status dot, for a ladder the reader TICKS OFF rather than
+  only reads. Reach for it before putting a checkbox in `trailing`: that lands a second completion
+  affordance beside a ring that already looks like one, and the reader has to guess which is real.
+  **Which of the two shapes you want**: if finishing a step must capture anything beyond "it
+  happened" — who took it, a reason — it is a HANDOFF, and the act belongs in `PipelineActions`
+  with the marker only reporting. If it does not, it is a MILESTONE and the marker IS the act.
+  ONE ladder per record, never two. A rung that needs more than a tick (a dialog, an owner, a
+  reason) renders it in its BODY — the tick and the act coexist on the same stage, which is what
+  a real pipeline looks like. Splitting them into a handoff run and a milestone run puts "where
+  is this" in two places the reader has to watch together. Worked screen:
+  `examples/tpl_record.tsx` § Progress — tickable markers, the stamped date on the title row as a
+  `bare` `InlineDatePicker` (reads as text, border on hover, click to edit), and the live stage
+  still carrying its owner, its note and the act that leaves it. The date stays EDITABLE on
+  purpose: a tick always writes today, so inert text would make a ladder filled in after the
+  fact — every imported record — impossible to enter correctly. An unstamped rung shows no
+  placeholder; its empty ring already says "not yet".
 - **`stepper`** — `Stepper` + `Step` — done/current/upcoming/warning/complete progress on a
   track (horizontal) or spine (vertical); compound `<Step status>children` OR data
   `steps[]`+`current`; **navigable** via `Step.onPress` (both orientations — the whole step

package/examples/tpl_record.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useEffect, useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
 import { Button } from "@lotics/ui/button";
@@ -16,6 +16,9 @@ import { Inset } from "@lotics/ui/inset";
 import { Section, SectionHeading, SectionHeadingMeta, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { Pipeline, PipelineActions, PipelineField, PipelineNote, PipelineStage } from "@lotics/ui/pipeline";
+import { DateStamp } from "@lotics/ui/date_stamp";
+import { TextLink } from "@lotics/ui/text_link";
+import { MemberChip } from "@lotics/ui/member_chip";
 import { TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
 import { MenuButton } from "@lotics/ui/menu_button";
 import { Popover, PopoverContent } from "@lotics/ui/popover";
@@ -158,12 +161,36 @@ const DESKS: { key: Desk; label: string }[] = [
   { key: "operations", label: "Operations" },
   { key: "accounting", label: "Accounting" },
 ];
+/**
+ * The PROGRESS ladder. Not the same list as `DESKS`: a desk is a place the record
+ * SITS and owns facts (who took it, the handoff that leaves it), while most of a
+ * run is milestones that own nothing at all — they happened, on a day, and that
+ * is the whole record. A ladder built only from desks hides the majority of what
+ * a reader wants to see, and one that gives every step an owner field asks four
+ * questions nobody has answers to.
+ *
+ * `desk` marks the steps that carry facts and the handoff act. The rest are a
+ * tick and a date.
+ */
+const STEPS: { key: string; label: string; desk?: Desk }[] = [
+  { key: "sales", label: "Sales", desk: "sales" },
+  { key: "quoted", label: "Quote sent" },
+  { key: "operations", label: "Operations", desk: "operations" },
+  { key: "collected", label: "Collected" },
+  { key: "cleared", label: "Customs cleared" },
+  { key: "delivered", label: "Delivered" },
+  { key: "accounting", label: "Accounting", desk: "accounting" },
+  { key: "pod", label: "POD received" },
+];
+
 const STAGES: { key: Stage; label: string }[] = [
   ...DESKS,
   { key: "closed", label: "Closed" },
 ];
 const stageOf = (st: Stage) => STAGES.find((x) => x.key === st) ?? STAGES[0];
 
+
+
 // How long the live desk has held the record — the PipelineStage meta line.
 // Prose, derived: the date itself is the stage's own editable field.
 function heldFor(since: string): string | undefined {
@@ -1257,8 +1284,18 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   // Each desk owns two facts about its own custody: when it took the record and
   // who holds it. Stored per desk so a passed desk keeps them editable — a date
   // typed wrong must not become unreachable the moment the record moves on.
-  const [deskSince, setDeskSince] = useState<Record<Desk, string>>({ sales: "2026-06-15", operations: "", accounting: "" });
-  const [deskOwner, setDeskOwner] = useState<Record<Desk, string | null>>({ sales: "mem_01", operations: null, accounting: null });
+  const [deskSince, setDeskSince] = useState<Record<string, string>>({ sales: "2026-06-15" });
+  // Which passed stage has been opened for editing. A stage BEHIND the live one
+  // shows its facts and nothing else — the ladder is read far more often than it
+  // is corrected, and a column of live editors on history invites changing it by
+  // accident. "Edit" is the deliberate step that turns one stage back into a form.
+  //
+  // ONE key, so opening a second stage closes the first. That is the intent, not a
+  // limitation: the editors commit as you leave them, so nothing is lost by the
+  // close, and two open stages would put two versions of the same ladder on screen
+  // — one being read, one being changed — with no cue for which is which.
+  const [editingDesk, setEditingDesk] = useState("");
+  const [deskOwner, setDeskOwner] = useState<Record<string, string | null>>({ sales: "mem_01" });
 
   const customerOptions: PickerOption<string, Customer>[] = customers.map((c) => ({
     value: c.id,
@@ -1461,6 +1498,8 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
     { 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(["general", "files", "transport", "progress", "fees", "billing", "docset", "receipt", "danger"] as const);
   // ONE record, ONE page. A section is a place you SCROLL to, never a
   // destination you swap to: routing a record was tried here and lost, because
@@ -2321,31 +2360,126 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
             <SectionHeadingTitle description="One desk owns the record at a time. The live desk carries the handoff.">Progress</SectionHeadingTitle>
           </SectionHeading>
           <Pipeline accessibilityLabel="Desk handoff progress">
-            {DESKS.map((d, i) => {
-              const status: "done" | "current" | "upcoming" = i < deskIndex ? "done" : i === deskIndex ? "current" : "upcoming";
+            {/* The ladder reads its own STAMPS, and nothing else. Driving `status`
+                off the record's `stage` while the tick wrote a date left two
+                sources of truth for one position: the ring could never change
+                state, so pressing it did nothing visible — no fill, no spring, no
+                movement — which is what "the progress is broken" looks like.
+                A rung is done when IT carries a date, independently of its
+                neighbours, so any rung can be ticked and un-ticked on its own. */}
+            {STEPS.map((d, i) => {
+              const stampedAt = deskSince[d.key] ?? "";
+              const firstOpen = STEPS.findIndex((x) => !deskSince[x.key]);
+              const status: "done" | "current" | "upcoming" = stampedAt ? "done" : i === firstOpen ? "current" : "upcoming";
               const owner = deskOwner[d.key];
               return (
                 <PipelineStage
                   key={d.key}
                   status={status}
                   title={d.label}
-                  // Prose the reader can't set — how long it has sat here. The DATE
-                  // is the field below; repeating it up here would say it twice.
-                  meta={status === "current" ? heldFor(deskSince[d.key]) : undefined}
+                  // Prose the reader can't set — how long it has sat here.
+                  meta={status === "current" ? heldFor(stampedAt) : undefined}
+                  // The tick IS the stamp: pressing the ring records today, pressing
+                  // it again clears the stage. ANY ring takes a press (`Pipeline`'s
+                  // default) because this ladder is a RECORD — entering three stages
+                  // that already happened must not cost three presses plus three
+                  // date corrections.
+                  onToggle={(next) => {
+                    if (next) {
+                      // Ticking AHEAD fills the gap. A ladder is a run, not a set
+                      // of independent boxes: leaving 3 and 4 blank because someone
+                      // ticked 5 renders "done, blank, blank, done", which claims a
+                      // record reached the end without passing through the middle.
+                      // Every rung at or below the one pressed that has no stamp
+                      // gets today — the day this is being recorded, which is the
+                      // same thing a single tick already means. Each one is then
+                      // one click away from its real date, and the ones that
+                      // already carry a date are left exactly as they are.
+                      const today = new Date().toISOString().slice(0, 10);
+                      setDeskSince((prev) => {
+                        const filled = { ...prev };
+                        STEPS.slice(0, i + 1).forEach((x) => { if (!filled[x.key]) filled[x.key] = today; });
+                        return filled;
+                      });
+                      return;
+                    }
+                    // Un-ticking walks the record BACK, and everything the stages
+                    // above it recorded goes with it — their dates and the facts
+                    // they own. That is destructive and invisible from the ring,
+                    // so it is named before it happens: which stages, and that it
+                    // is their data too, not just their dates. A stage with
+                    // nothing above it needs no warning — there is nothing to lose.
+                    const above = STEPS.slice(i + 1).filter((x) => deskSince[x.key] || deskOwner[x.key]);
+                    const revert = () =>
+                      STEPS.slice(i).forEach((x) => {
+                        setDeskSince((prev) => ({ ...prev, [x.key]: "" }));
+                        setDeskOwner((prev) => ({ ...prev, [x.key]: "" }));
+                      });
+                    if (above.length === 0) { revert(); return; }
+                    Alert.alert(
+                      `Reopen ${d.label}?`,
+                      `${above.map((x) => x.label).join(" and ")} ${above.length > 1 ? "are" : "is"} recorded after it. Reopening clears their dates and everything they hold — owner included. This can't be undone.`,
+                      [
+                        { text: "Cancel", style: "cancel" },
+                        { text: "Reopen and clear", style: "destructive", onPress: revert },
+                      ],
+                    );
+                  }}
+                  // The date rides the title's own row and READS as text — `bare`
+                  // shows nothing at rest and fades its border in on hover, so the
+                  // ladder stays a column of dates to scan rather than a column of
+                  // controls, and the one that needs correcting is still one click.
+                  //
+                  // That click is how a stamp gets BACKDATED, which the tick alone
+                  // cannot do: ticking always writes today, and a ladder filled in
+                  // after the fact is full of days that already passed. Rendering
+                  // the date as inert text would have cost exactly that.
+                  //
+                  // An unstamped rung shows nothing — its empty ring already says
+                  // "not yet", and a "Not recorded" placeholder on every rung ahead
+                  // says the same thing again in more words.
+                  // What the stage HOLDS, beside its name: the date it was
+                  // stamped, and any value it owns that has actually been set.
+                  // A stage's facts are otherwise only visible once you read down
+                  // into its body, so a ladder of five says nothing but five
+                  // names — the reader has to open each to learn anything. Only
+                  // values that EXIST are shown; an empty one would print a label
+                  // with nothing after it on every rung ahead.
+                  // The stage's own line carries what is ABOUT the stage — when it
+                  // happened, and the way into changing it — while the body holds
+                  // what it CONTAINS. Edit sat under the values, which put the verb
+                  // below the thing it acts on and moved it down every time a stage
+                  // gained a field.
+                  trailing={
+                    <View style={{ flexDirection: "row", alignItems: "baseline", gap: 10 }}>
+                      <DateStamp
+                        value={stampedAt || null}
+                        onChange={(iso) => setDeskSince((prev) => ({ ...prev, [d.key]: iso }))}
+                        locale="en-GB"
+                        accessibilityLabel={"Date for " + d.label}
+                      />
+                      {/* Edit ⇄ Done, one control in one place. It is a text LINK
+                          and not a button on purpose: the inline editors commit on
+                          their own (blur, Enter, a pick), so nothing is pending when
+                          you press this — it only puts the stage back to reading.
+                          A `Button` would promise a SAVE that already happened and
+                          make a reader wonder what they lose by navigating away. */}
+                      {d.desk && status !== "upcoming" && status !== "current" ? (
+                        <Pressable
+                          onPress={() => setEditingDesk(editingDesk === d.key ? "" : d.key)}
+                          accessibilityRole="button"
+                          accessibilityLabel={`${editingDesk === d.key ? "Done editing" : "Edit"} ${d.label}`}
+                        >
+                          <TextLink size="xs">{editingDesk === d.key ? "Done" : "Edit"}</TextLink>
+                        </Pressable>
+                      ) : null}
+                    </View>
+                  }
                 >
                   {/* A reached desk owns its own facts — and keeps owning them
                       once the record has moved on. */}
-                  {i <= deskIndex ? (
-                    <>
-                      <PipelineField label="Taken on" maxWidth={200}>
-                        <InlineDatePicker
-                          value={deskSince[d.key] || null}
-                          onSave={(v) => setDeskSince((p) => ({ ...p, [d.key]: v ?? "" }))}
-                          onClear={() => setDeskSince((p) => ({ ...p, [d.key]: "" }))}
-                          placeholder="Not recorded"
-                          accessibilityLabel={`Taken on for ${d.label}`}
-                        />
-                      </PipelineField>
+                  {status !== "upcoming" && d.desk ? (
+                    status === "current" || editingDesk === d.key ? (
                       <PipelineField label="Owner" maxWidth={260}>
                         <InlineMemberSelect
                           members={TEAM}
@@ -2355,13 +2489,27 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                           accessibilityLabel={`Owner for ${d.label}`}
                         />
                       </PipelineField>
-                    </>
+                    ) : (
+                      // Read-only, but still SHOWN — and shown by whatever renders
+                      // that kind of value properly: a member as a `MemberChip`, a
+                      // select as its `Badge`. Collapsing them to muted text would
+                      // make the same fact look different depending on whether the
+                      // stage happened to be the live one, and a reader would have
+                      // to decode two renderings of one field. Only what is SET
+                      // appears; an empty field has nothing to display read-only.
+                      // No label. A label tells you what you are FILLING IN —
+                      // read-only, the value says what it is: a face and a name is
+                      // an owner, a badge is a status. Printing "Owner" over a
+                      // member chip is the field talking about itself, and down a
+                      // ladder it doubles the lines for nothing.
+                      owner ? <MemberChip name={TEAM.find((x) => x.id === owner)?.name ?? owner} size={22} /> : null
+                    )
                   ) : null}
                   {/* A condition belongs to the desk it is about. */}
                   {status === "current" && stage !== "closed" && deliverBy !== "" && new Date(deliverBy) < new Date() ? (
                     <PipelineNote tone="warning">Past the due date — chase it or move the date.</PipelineNote>
                   ) : null}
-                  {status === "current" && gate ? (
+                  {status === "current" && d.desk === stage && gate ? (
                     <PipelineActions>
                       <Button
                         title={gate.cta}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "27.9.0",
+  "version": "27.10.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -218,6 +218,7 @@
     "./page_content": "./src/page_content.tsx",
     "./page_header": "./src/page_header.tsx",
     "./date_picker": "./src/date_picker.tsx",
+    "./date_stamp": "./src/date_stamp.tsx",
     "./date_filter": "./src/date_filter.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
     "./time_picker": "./src/time_picker.tsx",

package/src/check_circle.tsx

@@ -25,7 +25,8 @@ export interface CheckCircleProps {
   onChange?: (done: boolean) => void;
   /** Fill colour when done (and the half-fill when partial). Default zinc-900. */
   color?: string;
-  /** Diameter. Default 20. */
+  /** Diameter. Default 24 — the same box `Checkbox` occupies, so the two forms of
+   *  "mark this" reserve one gutter width wherever a surface hosts either. */
   size?: number;
   disabled?: boolean;
   accessibilityLabel: string;
@@ -43,7 +44,7 @@ export interface CheckCircleProps {
  * "how far", not "which state".
  */
 export function CheckCircle(props: CheckCircleProps) {
-  const { state, onChange, color = colors.zinc[900], size = 20, disabled, accessibilityLabel } = props;
+  const { state, onChange, color = colors.zinc[900], size = 24, disabled, accessibilityLabel } = props;
   const done = state === "done";
   const v = useRef(new Animated.Value(done ? 1 : 0)).current;
   useEffect(() => {

package/src/date_stamp.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { DatePickerPanel } from "./date_picker";
+import { formatDate } from "./format_date";
+import { useLocaleTag } from "./locale";
+
+export interface DateStampProps {
+  /** ISO date, or `""`/`null` for a stamp that has not been made. */
+  value: string | null;
+  /** Commit a correction. Omit for a read-only stamp — then nothing is pressable. */
+  onChange?: (iso: string) => void;
+  /** Locale tag for the rendered date. Defaults to the kit's locale. */
+  locale?: string;
+  accessibilityLabel: string;
+}
+
+/**
+ * A recorded date, shown quietly — and correctable.
+ *
+ * The value a SYSTEM writes and a person only occasionally overrides: the day a
+ * milestone was ticked, the day a status flipped. It is a READOUT first, so at
+ * rest it is nothing but small muted text — no frame, no icon, no control band.
+ * Hovering underlines it, which is the one cue prose has to say it opens; the
+ * press opens the kit's own `DatePickerPanel`.
+ *
+ * **Why this is not `InlineDatePicker` with a variant.** That component is a
+ * form FIELD: it renders a calendar icon, sits in a control band, keeps a typed
+ * `DateField` for keyboard entry and shows an em-dash when empty — the whole
+ * anatomy of "fill me in". Stripping its surface to get this left the icon and
+ * the sizing behind, because those belong to the field, not to the frame. A
+ * ladder of fields is a form with invisible borders; a ladder of these is a list
+ * of dates you can read at a glance. Different concept, different component.
+ *
+ * Reach for `InlineDatePicker` when the date is something a person is expected
+ * to ENTER, and for this when it is something the system already knows.
+ *
+ * Empty renders NOTHING (not a dash, not a placeholder): there is no value to
+ * report, whatever named the stamp already says it has not happened, and a
+ * column of dashes is noise pretending to be data. A read-only stamp with no
+ * value therefore renders nothing at all.
+ */
+export function DateStamp(props: DateStampProps) {
+  const { value, onChange, locale, accessibilityLabel } = props;
+  const localeTag = useLocaleTag();
+  const tag = locale ?? localeTag;
+  const [hovered, setHovered] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState<string | null>(value);
+
+  const shown = value ? formatDate(value, { locale: tag }) : "";
+
+  // Read-only, or nothing to show and no way to add one: render the text alone
+  // so a caller can drop this into a column without a conditional.
+  if (!onChange) return shown ? <Text size="xs" color="muted">{shown}</Text> : null;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        // Commit on CLOSE, matching `InlineDatePicker`: a single pick and the
+        // panel's Today button both auto-close through here, so committing on
+        // change instead would fire twice and a dismissed panel would still write.
+        if (!next && draft !== value) onChange(draft ?? "");
+        if (next) setDraft(value);
+      }}
+    >
+      <PopoverTrigger>
+        <Pressable
+          onPress={() => setOpen(true)}
+          onHoverIn={() => setHovered(true)}
+          onHoverOut={() => setHovered(false)}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+        >
+          {/* The underline is a BOTTOM BORDER, not a text decoration: it can then
+              be transparent at rest and coloured on hover with no reflow, and it
+              sits under the text rather than through its descenders. */}
+          <View
+            style={{
+              borderBottomWidth: 1,
+              borderBottomColor: hovered ? colors.zinc[400] : "transparent",
+            }}
+          >
+            {/* An empty stamp still needs somewhere to press, or the only way to
+                record a date the tick got wrong is to tick and re-tick. A muted
+                calendar glyph says "a date goes here" AND looks pressable; the
+                thin rule that was here first read as a divider and invited no
+                click at all. The icon appears ONLY when there is no date — once
+                one exists the date itself is the target, and an icon beside it
+                would be chrome on every row of the ladder. */}
+            {shown ? (
+              <Text size="xs" color="muted">{shown}</Text>
+            ) : (
+              // An icon has no text baseline, so in a `baseline` row it hangs off
+              // its own bottom edge. Centring it in the label's LINE BOX is not
+              // the fix either, and that is the version that shipped looking
+              // wrong: a line box carries descender space below the baseline that
+              // an icon has no equivalent of, so the label's optical centre (its
+              // cap band) sits ~2px above the box centre. Matching box centres
+              // therefore hangs the icon low against the text every time.
+              //
+              // Measured on this row: label box 344–364, cap band ~348–358. The
+              // lift is that gap, not a taste adjustment.
+              <View style={{ height: 16, justifyContent: "center", alignSelf: "center", marginBottom: 2 }}>
+                <Icon name="calendar" size={13} color={hovered ? colors.zinc[500] : colors.zinc[400]} />
+              </View>
+            )}
+          </View>
+        </Pressable>
+      </PopoverTrigger>
+      <PopoverContent>
+        <DatePickerPanel value={draft} onValueChange={setDraft} format="date" locale={tag} onRequestClose={() => setOpen(false)} />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/locale.tsx

@@ -69,6 +69,10 @@ export interface LoticsLocale {
   /** `Ledger`: the screen-reader name of a peekable row. */
   ledger: { rowDetails: (label: string) => string };
   /** `SectionHeadingTitle`: the info-popover trigger's screen-reader name. */
+  /** `Step`/`PipelineStage`'s toggleable MARKER, when the caller names no
+   *  label of its own. A pipeline stage always passes its title, so this is the
+   *  bare-`Step` fallback. */
+  stepper: { complete: string; progress: string };
   sectionHeading: { info: string };
   /** `ErrorState`'s retry button. The kit owns the wording so "try again" is
    *  phrased identically everywhere instead of hand-written per app. */
@@ -236,6 +240,7 @@ export const en: LoticsLocale = {
   inline: { saveError: "Couldn't save. Try again.", save: "Save", cancel: "Cancel" },
   clarify: { otherPlaceholder: "Or type your own answer…", back: "Back", next: "Next", cancel: "Cancel", submit: "Submit" },
   ledger: { rowDetails: (label) => `${label} details` },
+  stepper: { complete: "Complete step", progress: "Progress" },
   sectionHeading: { info: "About this data" },
   errorState: { retry: "Try again" },
   chip: { remove: "Remove" },
@@ -396,6 +401,7 @@ export const vi: LoticsLocale = {
   inline: { saveError: "Không lưu được. Thử lại.", save: "Lưu", cancel: "Hủy" },
   clarify: { otherPlaceholder: "Hoặc nhập câu trả lời khác…", back: "Quay lại", next: "Tiếp", cancel: "Hủy", submit: "Gửi" },
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
+  stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
   sectionHeading: { info: "Giải thích dữ liệu" },
   errorState: { retry: "Thử lại" },
   chip: { remove: "Xóa" },

package/src/pipeline.tsx

@@ -2,7 +2,6 @@ import { type ReactNode } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { Stepper, Step, type StepPositional, type StepStatus } from "./stepper";
-import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 
 export interface PipelineProps {
   children?: ReactNode;
@@ -84,45 +83,69 @@ export interface PipelineStageProps extends StepPositional {
    * and pushes the whole run past a screenful; use `PipelineField` when the value
    * needs a label to be read, or when there is more than one.
    *
-   * The row is fixed at `INLINE_CONTROL_HEIGHT` whatever you put here, so the
-   * marker lines up with the title and the stages keep one rhythm down the spine.
-   * An ACT still belongs in `PipelineActions` — this is for a value.
+   * The row is a TEXT line and the value sits on the title's own baseline, so a
+   * `DateStamp` beside a stage name reads as one line about one milestone. Put a
+   * value here, never a control: an editor drags the row to a control band, the
+   * marker follows it, and the ladder stops being something you scan. An ACT
+   * belongs in `PipelineActions`.
    */
   trailing?: ReactNode;
+
   /** The stage's own body — `PipelineNote`, `PipelineField`, `PipelineActions`,
    *  or anything else. A stage with no body renders as its title alone, which is
    *  what an unreached stage should be. */
   children?: ReactNode;
+  /**
+   * Make the stage's MARKER the completion control — the node becomes a
+   * pressable ring instead of a status dot. Reach for it when the ladder is a
+   * worklist the reader ticks off, not just a readout.
+   *
+   * Without it, a caller who wants a tickable ladder puts a checkbox in
+   * `trailing`, which lands a second completion affordance beside a ring that
+   * already looks like one and reads as two controls for one fact.
+   */
+  onToggle?: (done: boolean) => void;
   accessibilityLabel?: string;
 }
 
-/** One milestone. Its title reads by STATUS — the LIVE one (`current`, or the
- *  terminal `complete`) in full ink and medium weight, everything else muted —
- *  so the eye lands on where the record sits without reading a word.
+/** One milestone. Every title reads the same — full ink, medium — because the
+ *  MARKER carries the status: filled behind, empty ahead. Emphasising one name
+ *  encoded that a second time, and muting the passed ones read as "these matter
+ *  less" about the part of the record that already happened.
  *
- *  Deliberately NOT pressable. `Step` can be (a wizard whose steps navigate),
- *  but a pipeline stage is a workspace, not a destination — its body already
- *  holds the controls, and a press target wrapping them would swallow their taps. */
+ *  The stage BODY is deliberately not a press target. `Step` can be (a wizard
+ *  whose steps navigate), but a pipeline stage is a workspace, not a destination
+ *  — its body already holds the controls, and a press target wrapping them would
+ *  swallow their taps. `onToggle` is the exception and stays on the MARKER,
+ *  which owns no other content and stops its own press. */
 export function PipelineStage(props: PipelineStageProps) {
-  const { status, title, meta, trailing, children, accessibilityLabel, ...positional } = props;
+  const { status, title, meta, trailing, children, onToggle, accessibilityLabel, ...positional } = props;
   // `complete` is the terminal stage REACHED — where a finished record sits, not
   // one it walked past. Muting it like an unreached stage leaves a completed run
   // with nothing in full ink, so the eye has no landing point and the last thing
   // that happened reads as the thing that hasn't.
-  const isLive = status === "current" || status === "complete";
+  // Every stage name reads the same: full ink, medium. The MARKER already says
+  // where the record sits — a filled ring behind, an empty one ahead — so muting
+  // the passed names said it a second time, and said it wrongly: a stage that is
+  // done is the RECORD of what happened, not something to de-emphasise. The kit
+  // makes the same argument for `CheckCircle`, which is monochrome at every
+  // position precisely so a row does not double-code its own state.
   const titleText = (
-    <Text size="sm" color={isLive ? "default" : "muted"} weight={isLive ? "medium" : "regular"}>
+    <Text size="sm" color="default" weight="medium">
       {title}
     </Text>
   );
   return (
     <Step
       status={status}
+      onToggle={onToggle}
       accessibilityLabel={accessibilityLabel ?? title}
       // The marker centres on the FIRST ROW, so it has to be told when that row
       // is a control band and not a line of text — otherwise it stays pinned to
       // the text and every title reads low by half the difference.
-      headHeight={trailing != null ? INLINE_CONTROL_HEIGHT : undefined}
+      // The row is a text line whatever rides it, so the marker centres on
+      // the text rather than on a control band that is no longer there.
+      headHeight={undefined}
       {...positional}
     >
       <View style={{ gap: 6 }}>
@@ -132,9 +155,21 @@ export function PipelineStage(props: PipelineStageProps) {
             // row height followed its content would step the marker in and out of
             // alignment down the ladder, and a badge would sit on a shorter row
             // than a date picker two stages up.
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: INLINE_CONTROL_HEIGHT }}>
-              <View style={{ flex: 1, minWidth: 0 }}>{titleText}</View>
+            // BASELINE, not centre: the value sits beside the title as prose, and
+            // two texts of different sizes centred in one row share no baseline —
+            // the smaller one floats, which is exactly what "not aligned with the
+            // label" looks like. The row also stops forcing a control band, since
+            // what rides it now is text, not an editor.
+            <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
+              {/* The title keeps its NATURAL width and the slack goes after the
+                  value, so the value sits against the label — "Booked · 16 Jun"
+                  reads as one line about one milestone. Pinning it to the row's
+                  right edge instead made a column of dates that scanned well and
+                  said nothing: the reader had to carry the label across the gap
+                  to know which milestone the date belonged to. */}
+              <View style={{ flexShrink: 1, minWidth: 0 }}>{titleText}</View>
               {trailing}
+              <View style={{ flex: 1 }} />
             </View>
           ) : (
             titleText

package/src/stepper.tsx

@@ -15,6 +15,8 @@ import { Icon } from "./icon";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
 import { AnimationFadeIn } from "./animation_fade_in";
+import { CheckCircle } from "./check_circle";
+import { useLoticsLocale } from "./locale";
 import { NODE, STEP_HEAD_TEXT_LINE, STEP_ROW_PAD, markerTopOffset } from "./stepper_layout";
 
 // A node's place in a sequence. `upcoming` = not reached (greyish); `current` =
@@ -53,6 +55,7 @@ export interface StepperProps {
  *  whole set — extend this and spread it through, never re-list the keys, or a
  *  new positional prop is dropped silently by everything but `Step`. */
 export interface StepPositional {
+  _first?: boolean;
   _last?: boolean;
   _leftFilled?: boolean;
   _rightFilled?: boolean;
@@ -65,6 +68,22 @@ export interface StepProps extends StepPositional {
    *  `active` washes the selected one (a panel can also sit beside it in vertical). */
   onPress?: () => void;
   active?: boolean;
+  /**
+   * VERTICAL only. Make the MARKER itself the completion control — the node
+   * becomes a `CheckCircle` the reader can press to finish (or reopen) the step,
+   * instead of a status dot that only reports.
+   *
+   * The alternative every caller reaches for otherwise is a checkbox parked in
+   * the row beside the marker, which puts two completion affordances on one line
+   * — a ring that looks tickable and a box that is — and asks the reader to
+   * guess which one is real. The ring already reads as "press me" at every other
+   * task surface in this kit; here it finally is.
+   *
+   * `onPress` still owns navigation, and the two compose: the ring stops its own
+   * press, so a navigable step with a toggleable marker does both without the
+   * marker's tap opening the panel.
+   */
+  onToggle?: (done: boolean) => void;
   /**
    * VERTICAL only. Height of the content's FIRST ROW — the marker centres on it.
    * Defaults to one line of `sm` text, which is what a step's first row is unless
@@ -89,6 +108,7 @@ export interface StepProps extends StepPositional {
  */
 export function Stepper(props: StepperProps) {
   const { children, steps, current, orientation = "horizontal", live = false, color = colors.zinc[700], accessibilityLabel } = props;
+  const locale = useLoticsLocale();
 
   const content: ReactNode =
     children ??
@@ -107,7 +127,7 @@ export function Stepper(props: StepperProps) {
   const items = Children.toArray(content).filter((c): c is ReactElement<StepProps> => isValidElement(c));
   const statuses = items.map((c) => c.props.status);
   const last = items.length - 1;
-  const a11y = accessibilityLabel ?? "Progress";
+  const a11y = accessibilityLabel ?? locale.stepper.progress;
   // A LIST of named positions, never `progressbar`. `progressbar` is a RANGE
   // widget — it wants valuenow/min/max, announces as indeterminate without them,
   // and its children are PRESENTATIONAL, which strips every step's label (and,
@@ -117,6 +137,7 @@ export function Stepper(props: StepperProps) {
 
   const positioned = items.map((child, i) =>
     cloneElement(child, {
+      _first: i === 0,
       _last: i === last,
       _leftFilled: i > 0 && reached(statuses[i - 1]),
       _rightFilled: i < last && reached(statuses[i]),
@@ -133,8 +154,9 @@ export function Stepper(props: StepperProps) {
 }
 
 export function Step(props: StepProps) {
-  const { status, children, onPress, active, headHeight = STEP_HEAD_TEXT_LINE, accessibilityLabel, _last, _leftFilled, _rightFilled } = props;
+  const { status, children, onPress, active, onToggle, headHeight = STEP_HEAD_TEXT_LINE, accessibilityLabel, _first, _last, _leftFilled, _rightFilled } = props;
   const { orientation, color, live } = useContext(StepperContext);
+  const locale = useLoticsLocale();
   // Each step is one `listitem`, and the live one says so with `aria-current`.
   // It goes on the ITEM, not the label: "current" is a fact about this position
   // in the sequence, and a reader jumping between list items needs it announced
@@ -183,8 +205,48 @@ export function Step(props: StepProps) {
     <View {...item}>
       <AnimationFadeIn translateY={6}>
         <View style={styles.vItem}>
-          <View style={[styles.vSpineCol, { paddingTop: markerTopOffset(headHeight) }]}>
-            <Marker status={status} color={color} live={live} />
+          <View style={styles.vSpineCol}>
+            {/* The spine is TWO segments per step, above the marker and below it,
+                because the marker does not sit at the top of its row: it centres
+                on the first content row, so there is a `markerTopOffset` band of
+                empty column above it. A single below-the-marker segment cannot
+                reach into the NEXT step's band, so the line broke at every joint
+                — ~4px under each marker (this segment's old top margin) plus the
+                next one's offset above it. Measured on the record template: 4px
+                and 3px, at every stage, which reads as dashes rather than a spine.
+                The upper segment fills that band, so the line is continuous from
+                the first marker to the last. It also replaces the column's old
+                `paddingTop`, which is why the marker lands in the same place. */}
+            <View
+              style={[
+                styles.vSpineUp,
+                { height: markerTopOffset(headHeight) },
+                // The first step has nothing above it to connect to, so its band
+                // is spacing, not line.
+                _first ? null : { backgroundColor: reached(status) ? colors.zinc[300] : colors.zinc[200] },
+              ]}
+            />
+            {onToggle ? (
+              // Sized to NODE so a toggleable step keeps the spine's rhythm — a
+              // ring a couple of pixels wider would bow the column at that row.
+              <CheckCircle
+                // `done`/`complete` only — NOT `reached`, which counts `current`
+                // too. `reached` is right for the status DOT (the step you are on
+                // is a place you have got to), but a completion RING that fills on
+                // the current step says the step is finished when it is the one
+                // still open. Every interaction then inverts on that step: the
+                // press reports "reopen" when the reader meant "finish", so
+                // pressing the next step appeared to do nothing, or to complete
+                // the whole run.
+                state={status === "done" || status === "complete" ? "done" : "none"}
+                onChange={onToggle}
+                color={color}
+                size={NODE}
+                accessibilityLabel={accessibilityLabel ?? locale.stepper.complete}
+              />
+            ) : (
+              <Marker status={status} color={color} live={live} />
+            )}
             {!_last ? <View style={[styles.vSpine, { backgroundColor: reached(status) ? colors.zinc[300] : colors.zinc[200] }]} /> : null}
           </View>
           <View style={[styles.vContent, !_last ? styles.vGap : null]}>
@@ -266,7 +328,12 @@ const styles = StyleSheet.create({
 
   vItem: { flexDirection: "row", gap: 12 },
   vSpineCol: { width: NODE, alignItems: "center" },
-  vSpine: { width: 1.5, flex: 1, minHeight: 14, borderRadius: 1, marginTop: 4 },
+  // No top margin: the segment starts AT the marker, or the line detaches from
+  // the node it is supposed to leave.
+  vSpine: { width: 1.5, flex: 1, minHeight: 14, borderRadius: 1 },
+  // The band above the marker — width matches `vSpine` so the two segments
+  // read as one line through the node.
+  vSpineUp: { width: 1.5 },
   vContent: { flex: 1 },
   vGap: { paddingBottom: 12 },
   vPress: { borderRadius: 8, marginHorizontal: -10 },

package/src/stepper_layout.ts

@@ -12,8 +12,24 @@
  * which Vitest cannot parse.
  */
 
-/** The marker disc's diameter. */
-export const NODE = 18;
+/**
+ * The marker disc's diameter — and, deliberately, `CheckCircle`'s default size.
+ *
+ * A toggleable step renders a real `CheckCircle` in this slot, so the two have to
+ * agree: at 18 the spine was SHRINKING the kit's completion ring below the size
+ * it is everywhere else, and the same control read smaller on a ladder than on a
+ * task list for no reason a reader could name. Pinning `NODE` to the ring's own
+ * size makes the geometry follow the control instead of the other way round.
+ *
+ * 24 is that size, and it is `Checkbox`'s box as well: a ring and a box are two
+ * forms of one act, they share the leading gutter on `Table` and `TaskList`, and
+ * a gutter whose width depended on which one a surface hosted is a difference no
+ * reader could name either.
+ *
+ * Every other measurement here derives from it (`markerTopOffset`, the spine
+ * column's width, the disc and its pulse), so this is the one number to change.
+ */
+export const NODE = 24;
 
 /** `vRowBox`'s vertical padding — the gap above the content's first row. */
 export const STEP_ROW_PAD = 2;

package/src/task.tsx

@@ -115,7 +115,7 @@ export type TaskDensity = keyof typeof TASK_ROW_BAND;
 const TASK_ACTION_WIDTH = 28;
 
 const TaskListContext = createContext<TaskListContextValue>({
-  controlWidth: 20,
+  controlWidth: 24,
   actionWidth: TASK_ACTION_WIDTH,
   labelWidth: DETAIL_LABEL_WIDTH,
   depth: 0,
@@ -143,8 +143,9 @@ export const TASK_TEXT_INSET = CONTROL_TEXT_INSET;
 export interface TaskListProps {
   children: ReactNode;
   /**
-   * Width of every row's leading control, which the LEFT gutter is reserved for — `CheckCircle`
-   * 20 (the default), `CheckboxInput` 24. It also sets the INDENT: everything hanging under a
+   * Width of every row's leading control, which the LEFT gutter is reserved for. Both leading
+   * controls are 24 — `CheckCircle` and `CheckboxInput` — so the default fits either, and only a
+   * custom control needs this. It also sets the INDENT: everything hanging under a
    * task — its sub-rows, a nested list — steps right by this plus the row gap. Set on the ROOT
    * list; a nested list inherits it.
    */