@lotics/ui 22.2.0 → 23.0.0

package/docs/templates.md

@@ -92,15 +92,23 @@ Laws for any screen where a record's data is edited and a primary action produce
    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.
-8. **Destructive placement.** Solid `danger`, bottom-left after the entity's fields, ONE
+8. **Action placement — a verb goes where its effect lands.** Value verbs on the value
+   (`InlineButton`), row verbs on the row, an ADD below the list it extends (primary, left —
+   where the new row will appear, and primary in the `EmptyState` too: one verb, one weight),
+   a committing act in its own row at the section's end,
+   deletion in the `DangerZone`. Section headings carry identity and view controls only; an Add
+   in the heading sits above what it extends and competes with the title. A committing act rides
+   an empty-label `DetailRow` so it lands on the CONTROL column — never right-floated, which
+   aligns to nothing (only overlay footers right-align).
+9. **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.
-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.
-10. **Optimistic feedback.** Every edit echoes locally, saves in the background, reconciles on
+10. **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.
+11. **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,
+12. **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
@@ -114,10 +122,10 @@ records behind each number.
 ### `tpl_dashboard` — the executive overview
 
 One screen answering "how is this period going, where is it stuck, who pays the bills".
-Bands: header + period · `KPIStrip` · a revenue chart (`BarChart`, emerald = money) beside
-the pipeline (`StackedProgressBar`, blue = pipeline) · a **Needs attention** `Accordion`
+Bands: header + period, `KPIStrip`, a revenue chart (`BarChart`, emerald = money) beside
+the pipeline (`StackedProgressBar`, blue = pipeline), a **Needs attention** `Accordion`
 (icon + label + count `Badge`; expanding opens the records behind the count, each row
-carrying its domain `⋯ ActionMenu`) · top customers (`Avatar` + revenue + margin badge; the
+carrying its domain `⋯ ActionMenu`), top customers (`Avatar` + revenue + margin badge; the
 name `Peek`s the dossier). Also exercises the wider chart family (`LineChart`, `PieChart`,
 `RingGauge`, `Sparkline`, `TrendFooter`, `Funnel`) and `DateRangeFilterField` — the date
 filter actually filters the KPI datasets. Start here for any "state of the operation"
@@ -138,8 +146,8 @@ carry meaning, one `ColorName` per state, no hand-picked hex.
 
 Continuous monitoring of hundreds of live units (machines, gates, sensors). Three bands
 answer the three ops questions in order: `KPIStrip` + `StatusGrid` = "is everything OK right
-now?" (scan for red; the `StatusLegend` drills a state) · an exceptions rail = "where do I
-look first?" (severity, then longest unresolved) · a `Heatmap` = "when/where does it
+now?" (scan for red; the `StatusLegend` drills a state), an exceptions rail = "where do I
+look first?" (severity, then longest unresolved), a `Heatmap` = "when/where does it
 cluster?" (pressing a cell explains the day). Cells and exception rows open the SAME
 sequenced unit `Drawer` (with a `Timeline` of the unit's events). One semantic color
 reference per state — every weight (grid cell, legend dot, drawer badge) derives from that
@@ -192,10 +200,12 @@ screens — register, per-row action, gated selection, and act-on-many in one. T
   record-workspace anatomy section by section:
   - **Details `DetailTable`** showing every inline field type — text, `InlineMemberSelect`,
     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.
+    and `InlineStatic` + a System badge for read-only values. It is also the worked example of
+    where a VERB goes: Phone → Call and Due → Today are both `InlineButton`s in the field's
+    `actions` (on the surface, disabled while empty) — the date editor included, since a field
+    anchors its overlay to its own box; the System badge, not being a verb, sits beside its value.
   - **Linked records** — the customer's other records as `ListItem`s (title + description at
-    the column edge, badge · amount · chevron); pressing one PUSHES an **editable** workspace
+    the column edge, badge, amount, chevron); pressing one PUSHES an **editable** workspace
     for that record inside the drawer via the hosted `ScreenRouter` — while `canGoBack` the
     drawer header swaps to a back button + the pushed id and the ◀ ▶ sequencer hides; back
     pops with scroll preserved.
@@ -223,7 +233,7 @@ screens — register, per-row action, gated selection, and act-on-many in one. T
   analysis surfaced (described options, one custom-answer slot; its Cancel/Back/Next/Submit
   live in the `DialogFooter` — `ClarifyWizardScope` wraps the Dialog, `ClarifyWizardActions`
   rides the footer) → the IMPORT stream CREATES the records and the dialog ends on the RESULT
-  LIST — one hand-rolled result row per record (outcome mark · what landed · key figures —
+  LIST — one hand-rolled result row per record (outcome mark, what landed, key figures —
   the anatomy in ai_patterns §the one law; secondary "Done" to dismiss) — the one law's
   creation branch
   (ai_patterns.md): no review gate on a create, the register IS the review, correction uses
@@ -249,7 +259,7 @@ progress, and a short-pick exception that flags-and-advances without stalling, e
 Apply ONE source across MANY targets until the remainder is zero (cash application,
 stock-to-orders, budget distribution). The inverse of a batch builder: batch SUMS parts up to
 a total; allocation SPLITS a fixed total DOWN with a remainder that must hit zero. The
-`RemainderMeter` is the spine — under (left on account) · exact (apply) · over (blocked).
+`RemainderMeter` is the spine — under (left on account), exact (apply), over (blocked).
 Oldest-first auto-allocates; each `AllocationRow` can be filled or typed.
 
 ### `tpl_record` — THE record surface
@@ -260,16 +270,16 @@ left panel as the bare circular `BackButton`). First paint is a `Skeleton` MIRRO
 layout, never a spinner. It absorbed the old order-form, inline-record, intake, settings,
 billing, and quick-capture templates. Top → bottom:
 
-- A MINIMAL header: `RecordSummary` (title · subtitle ONLY — no stage chip, no metric; Progress
-  carries the desk, Handoff carries what it created, money lives in Billing), then the record's
+- A MINIMAL header: `RecordSummary` (title, subtitle ONLY — no stage chip, no metric; Progress
+  carries the desk, money lives in Billing), then the record's
   ATTENTION state as a co-located `Callout` (e.g. overdue — record-scoped state reads here;
-  field-scoped state stays on its field), then a quiet `SummaryLine` (desk · documents
-  · to collect).
+  field-scoped state stays on its field), then a quiet `SummaryLine` (desk, documents
+ , to collect).
 - **GENERAL — the MAIN details, FIRST in the rail**; every later section is supplementary.
   A `SubsectionStack` (space-only beat) of a headingless LEAD group (the key facts) plus
   named groups (e.g. Order / Fulfilment / System — system identifiers get a HOME, not a
-  per-row badge). Every group's `DetailTable` repeats the same `labelWidth`/`trailingWidth`
-  so the grid aligns through the groups. The FIELD-ANNOTATION vocabulary is the worked
+  per-row badge). Every group's `DetailTable` repeats the same `labelWidth` so the grid
+  aligns through the groups. The FIELD-ANNOTATION vocabulary is the worked
   example here: `description` (persistent, under the value, incl. a deliberately LONG one)
   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
@@ -281,7 +291,10 @@ billing, and quick-capture templates. Top → bottom:
   field renders only while its parent value makes it real (no disabled ghost rows).
   Radio/checkbox/search are PERSISTENT controls — the control is the best display;
   prose-shaped values stay inline editors.
-- **Comments** — a coworker's note is the first thing read on a shared record: `CommentList`
+- **Comments — a docked PANEL, not a section.** It is about the whole record, so it has no place
+  in a top-to-bottom read and no rail entry: it pins in the page's RIGHT gutter (the column the
+  outline rail's balance already reserved), scrolling inside itself so a long thread never
+  lengthens the record, and collapses onto the pinned bar's right on narrow. `CommentList`
   (author-only edit/delete; attachments as a pressable `FileGrid` → gallery preview; a
   file-capable edit form injected via `renderEditForm`) + THE kit `Composer` (attach via
   `actionsButton`, staged files in its `files` slot) — never a bespoke comment box.
@@ -295,7 +308,7 @@ billing, and quick-capture templates. Top → bottom:
   handoff shape for the rules; for a record that genuinely needs a CHECKLIST, the task-list
   grammar is worked in `tpl_item_list`.
 - **Documents** — the Agents "Document desk" pattern (this template is its worked example —
-  see the Agents chapter below): the register `Table` (search · Add files) whose selection
+  see the Agents chapter below): the register `Table` (search, Add files) whose selection
   feeds the `FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI).
   The template is the worked example of the THREE-way, WHOLE-SURFACE file intake: the Add-files
   CTA plus a `<FileDropTarget … paste disabled={aiOpen}>` wrapping the ENTIRE section stack (not
@@ -308,32 +321,43 @@ billing, and quick-capture templates. Top → bottom:
   fills it as a real thumbnail, a document centers its badge in it — never a bare `FileBadge`
   (mixed footprints misalign the identity column). The desk holds what ARRIVES; generation
   lives in the Document set OUTPUT section below.
-- **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).
+- **Customer — a REFERENCE, and therefore one of General's field rows**, not a section of its
+  own (see [composition.md's reference law](./composition.md)). It wears the inline editor's
+  resting surface with an `InlineButton` **Open** inside it; pressing the surface PEEKS the
+  facts, and the peek's footer carries detach LEFT / Open RIGHT — so the row itself shows no
+  destructive verb at all. The tax-ID problem that gates invoicing is the row's `warning`, not
+  a floating `Callout`. Transport's three party rows are the same shape repeated, which is where
+  it earns itself: N references as field rows scan as one list, where N cards would be a wall.
+  Empty state = the find-or-create `Combobox` in the same value slot, custom row → the create
+  `Dialog` (tax ID + Fetch; its field errors ride `DetailRow error`, not a loose line).
+  **Reference (the buyer's own) is the `actions` worked example**: its `Copy` is an
+  `InlineButton` ON the field, passed unconditionally and `disabled` while empty — not in the
+  row's `trailing`, and not conditional, which would resize the field as you type.
 - **Fees — the DETAILED money ledger** (both directions), distinct from Billing's invoice
-  documents: a `SummaryLine` (collected · to collect · to pay, warning-toned when overdue) →
-  a `priority`-annotated register `Table` (Fee · Type · Party · Amount · Status — status in
+  documents: a `SummaryLine` (collected, to collect, to pay, warning-toned when overdue) →
+  a `priority`-annotated register `Table` (Fee, Type, Party, Amount, Status — status in
   plain ink, danger only when overdue) → EVERY row opens a right-docked entity `Drawer`
   (◀ ▶ + position stepping) with all fields inline-editable and a confirmed Remove in the
   `DrawerFooter`. "Add fee" is create-then-refine: a blank fee opens straight in the drawer.
-- **Billing** — every group a `Subsection` on ONE beat: per-invoice bands (charge chips with
-  ghost list prices + one-tap "Standard …" fill, "How paid…" selects), the collect band
-  (owns the total + the receipt), the deposit. THE ACTION-GATING LAW is the worked example:
-  a not-ready Issue is DISABLED and the reason is a co-located `Callout` at the gate's
-  scope, once — a band-local problem (charged line missing its method) in the band, a broken
-  record premise (no customer / invalid tax ID) at the section top; self-evident empties
-  stay silent, and NEVER prose beside a CTA. Issuing gates on record premises only — never
-  silently on stage. It is also the worked example of **an irreversible action taking an ID,
-  not a captured object**: `onIssue(inv.key)` with the invoice resolved where the confirm
-  renders, so the quoted total is the one that will be billed even when the press was held
-  for a charge cell's write (data_entry.md § Inline edit).
+- **Billing — a REGISTER, the same shape as Fees.** Both sections are a list of money items
+  where each item has detail and a per-item act, so both are a compact `Table` whose row opens
+  its FULL detail in a right-docked `Drawer` (◀ ▶ step the invoices) — the drill-down law.
+  It was three inline bands stacked, each with its own charge table, callout and action row,
+  plus two more bands after them: five subsections and four primaries in one section, which is
+  what made the area read as spread. A row now carries title, lines, total, a DERIVED state
+  `Badge`, the issued ref; the charge editors (ghost list prices with one-tap "Standard …"
+  fill, "How paid…" selects) live in the drawer with the lines they bill, and the section ends
+  with ONE summary (`SummaryLine`: to collect, deposit, issued) and ONE action row.
+  THE ACTION-GATING LAW is still the worked example: a not-ready Issue is DISABLED and the
+  reason is a co-located `Callout` at the gate's SCOPE, once — an invoice's own inconsistency
+  (a charged line with no method) in its drawer, a broken record premise (no customer / invalid
+  tax ID) at the section top; self-evident empties stay silent, and NEVER prose beside a CTA.
+  Issuing gates on record premises only — never silently on stage. Issue sits in the DRAWER's
+  footer, which is the one place a CTA right-aligns (an overlay footer; on the page it would
+  ride the control column). It is also the worked example of **an irreversible action taking an
+  ID, not a captured object** — the confirm re-resolves the invoice from its key, so the quoted
+  total is the one that will be billed even when the press was held for a charge cell's write
+  (data_entry.md § Inline edit).
 - **Document set — the OUTPUT desk, the last WORK section** (the composition rules' output
   law worked on the record surface: the top is intake, the bottom produces on demand).
   Forms group PER PARTY on the `SubsectionStack` beat — each party a `SubsectionHeading` +
@@ -374,17 +398,11 @@ billing, and quick-capture templates. Top → bottom:
   a label-left capture form (auto-stamped date/receipt-no, record-prefilled fields, the
   right input each) whose CTA and produced `FileRow` ride an empty-label `DetailRow` — the
   form-action alignment law (data_entry.md), worked.
-- **Activity — the audit trail**: a `Timeline` (32px discs, 40px rows) of every change —
-  who and when — with DRILL-DOWN `details` (a field change carries its From → To diff, a
-  document entry a pressable `FileRow` → preview) and LIVE appends from the surface's real
-  actions (issue, fees, handoff).
-- **Handoff — ONCE.** Handing off CREATES the next desk's record on ITS table and links it
-  here: the dialog collects the receiver (`MemberSelect`, confirm disabled until chosen) +
-  an optional note; confirm writes the trail mark and the SIBLING record, shown as the same
-  linked-record box (its drawer holds the reference info + Open record + **Recall**). After
-  the handoff there is NO further CTA — the act to leave the NEW desk rides that desk's stage
-  in Progress, and this section shows only what the handoff produced (with an empty state when
-  it has produced nothing yet).
+- **No Activity or Handoff section.** Progress owns both: it says where the record SITS and
+  carries the act that moves it, so a second section repeating the handoff — and a `Timeline` of
+  every change beside it — were two more places to look for one answer. What that costs is
+  explicit: the sibling record a handoff creates has no home on this surface, and there is no
+  audit trail. Both belong on the Progress stage that produced them if an app needs them back.
 
   Recall is the undo: confirmed, it withdraws the sibling, clears the custody stamp that
   handoff wrote, and returns the record to the desk BEFORE it — one step, never a jump to the
@@ -437,8 +455,8 @@ divorced from the state that gated it. A stage says the position outright, and t
 stage it belongs to. Reach for a checklist only when the rows are genuinely N independent
 tickable items (`TaskList`); a record's own progress is a pipeline.
 
-Built on the `Pipeline` compound (`Pipeline` · `PipelineStage` · `PipelineField` ·
-`PipelineNote` · `PipelineActions`), which composes over `Stepper` — `Stepper` renders POSITION,
+Built on the `Pipeline` compound (`Pipeline`, `PipelineStage`, `PipelineField`,
+`PipelineNote`, `PipelineActions`), which composes over `Stepper` — `Stepper` renders POSITION,
 this adds the anatomy that turns a position into a workspace.
 
 Three rules the anatomy holds, each learned from getting it wrong:
@@ -466,9 +484,9 @@ and tickable in any order are a `tpl_task_board`, not a pipeline.
 
 ### `tpl_task_board` — the columns shape
 
-The manager's board: a search · group-by · filter toolbar over a grouped, sortable grid of
-LIVE editable cells — assignee/due/status/tags ALL via `Inline*` editors in **`variant="cell"`**
-(`InlineMemberSelect` · `InlineDatePicker` · `InlineSelect`, and tags an `InlineSelect multi
+The manager's board: a search, group-by, filter toolbar over a grouped, sortable grid of
+LIVE editable cells — assignee/due/status/tags ALL via `Inline*` editors in **`variant="bare"`**
+(`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,
@@ -483,8 +501,8 @@ grouped sections, and the aligned rows. It demonstrates:
   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 **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
+  (`zinc-100`) — the ROW's own hover language, distinct from the field frame a `bare` editor
+  fades in on its own hover. (The row washes; the field's edge draws — the two
   hover languages, one per surface.)
 - Per-group add rows that pre-set the group's field (align with the exported `gridRowStyle`),
   and a Draft-from-notes CTA.
@@ -532,8 +550,8 @@ week so the copied screen is evergreen.
 
 ### `tpl_attendance` — the attendance desk
 
-Who is in, who is late, who is out, plus the weekly per-person grid. Header + month `Picker`
-· `KPIStrip` (the four counts) · `Tabs` Today / This week. "Today" = one banded roster
+Who is in, who is late, who is out, plus the weekly per-person grid. Header + month `Picker`,
+`KPIStrip` (the four counts), `Tabs` Today / This week. "Today" = one banded roster
 `Card` — each row press-opens the person's workspace `Drawer` (◀ ▶ sequencing) and carries a
 `⋯ ActionMenu` with the day's quick fixes. "This week" = per-person `Accordion` rows: day
 markers expanding to the day-by-day detail in place. Presence is one accent; badge colors
@@ -587,8 +605,8 @@ phase runs inside a `FollowScroll` (swapped back to `DialogScrollArea` on the ph
 so review opens at the top):
 
 - **Extract** (read the documents, fill the record) — the open `ChangeFields` review: ONE
-  `Change` section per record whose body stacks a `ChangeField` per proposed value (label ·
-  the − band when replacing · the editable + value). **Editing IS the review**; an add has no
+  `Change` section per record whose body stacks a `ChangeField` per proposed value (label,
+  the − band when replacing, the editable + value). **Editing IS the review**; an add has no
   before, a removal is the − band alone, and a conflict shows the read-only outcome band over
   candidate rows + a type-another-value third option. Proposed line items arrive as
   `ChangeRecord` cards; Keep-all + one outcome-named Apply commit.

package/examples/tpl_allocate.tsx

@@ -11,13 +11,13 @@ import { RemainderMeter } from "@lotics/ui/remainder_meter";
 import { formatMoney } from "@lotics/ui/format_money";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Allocation / split — apply ONE source across MANY targets until the
+// Template, Allocation / split — apply ONE source across MANY targets until the
 // remainder is zero. Here: cash application — a received payment spread across a
 // customer's open invoices (the same shape serves stock-to-orders, landed-cost,
 // budget distribution). The inverse of the batch builder: batch SUMS parts up to
 // a total; allocation SPLITS a fixed total DOWN, with a remainder that must hit
-// zero. The RemainderMeter is the spine — under (left on account) · exact (apply)
-// · over (blocked). Oldest-first auto-allocates; each row can be filled or typed.
+// zero. The RemainderMeter is the spine — under (left on account), exact (apply),
+// over (blocked). Oldest-first auto-allocates; each row can be filled or typed.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface Invoice {
@@ -77,7 +77,7 @@ export function TplAllocate() {
             <View style={{ gap: 2, flexGrow: 1, flexBasis: 220 }}>
               <Text size="xs" color="muted" weight="medium">Payment received</Text>
               <Text size="xxxl" weight="semibold" tabular>{formatMoney(PAYMENT.amount)}</Text>
-              <Text size="sm" color="muted">{`${PAYMENT.from} · ref ${PAYMENT.ref} · ${PAYMENT.date}`}</Text>
+              <Text size="sm" color="muted">{`${PAYMENT.from}, ref ${PAYMENT.ref}, ${PAYMENT.date}`}</Text>
             </View>
             <View style={{ gap: 10, flexGrow: 1, flexBasis: 300 }}>
               <RemainderMeter total={PAYMENT.amount} allocated={allocated} format={formatMoney} />
@@ -92,7 +92,7 @@ export function TplAllocate() {
         {/* the targets — the open invoices, each absorbing part of the payment */}
         <View>
           <View style={{ paddingHorizontal: 20, paddingVertical: 12 }}>
-            <Text size="xs" color="muted" weight="medium">{`Open invoices · ${INVOICES.length}`}</Text>
+            <Text size="xs" color="muted" weight="medium">{`Open invoices (${INVOICES.length})`}</Text>
           </View>
           <Divider />
           {INVOICES.map((inv, i) => (

package/examples/tpl_attendance.tsx

@@ -17,11 +17,11 @@ import { Picker } from "@lotics/ui/picker";
 import { Tabs } from "@lotics/ui/tabs";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Attendance. The daily attendance desk: who is in, who
+// Template, Attendance. The daily attendance desk: who is in, who
 // is late, who is out, plus the weekly per-person grid. Emerald = presence;
 // badge colors carry the status meaning (amber late / red absent / blue leave).
 //
-// Grammar: zinc-50 canvas · header + month Picker · KPIStrip (four counts) ·
+// Grammar: zinc-50 canvas, header + month Picker, KPIStrip (four counts),
 // Tabs Today / This week. "Today" = one banded roster Card — each row
 // press-opens the employee workspace Drawer (◀ ▶ sequencing) and carries a
 // ⋯ ActionMenu with the day's quick fixes. "This week" = per-person Accordion

package/examples/tpl_calendar.tsx

@@ -19,12 +19,12 @@ import {
 } from "@lotics/ui/calendar";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Calendar — the delivery/schedule desk. One real
+// Template, Calendar — the delivery/schedule desk. One real
 // CalendarView (week grid) over the current week's deliveries / reconciliations /
 // customer visits, then a "Today" agenda card listing today's three slots.
 //
-// Grammar: zinc-50 canvas · header band (title + week label + Today) ·
-// calendar card at a real height · agenda card of pressable rows. Every slot
+// Grammar: zinc-50 canvas, header band (title + week label + Today),
+// calendar card at a real height, agenda card of pressable rows. Every slot
 // is a door: press (grid event or agenda row) opens the sequenced workspace
 // Drawer; agenda rows also carry the ⋯ quick-actions menu. Event colors carry
 // meaning: blue = delivery, emerald = reconciliation, amber = customer.
@@ -141,8 +141,8 @@ const SLOT_ACTIONS = [
 // Compact slot workspace — identity + key facts + the two real actions.
 function SlotWorkspace({ e }: { e: CalendarEvent<AgendaMeta> }) {
   const thoiGian = e.allDay
-    ? `${fmtDate(e.start)} – ${e.end ? fmtDate(e.end) : ""} · all day`
-    : `${fmtDate(e.start)} · ${fmtTime(e.start)} – ${e.end ? fmtTime(e.end) : ""}`;
+    ? `${fmtDate(e.start)} – ${e.end ? fmtDate(e.end) : ""} (all day)`
+    : `${fmtDate(e.start)}, ${fmtTime(e.start)} – ${e.end ? fmtTime(e.end) : ""}`;
   const rows: [string, React.ReactNode][] = [
     ["Time", <Text key="tg" size="sm" tabular>{thoiGian}</Text>],
     ...(e.data
@@ -236,7 +236,7 @@ export function TplCalendar() {
         <Card style={{ padding: 0 }}>
           <CardHeader>
             <CardHeaderTitle>Today</CardHeaderTitle>
-            <CardHeaderMeta>{`${todayLabel} · ${todayEvents.length} slots`}</CardHeaderMeta>
+            <CardHeaderMeta>{`${todayLabel} (${todayEvents.length} slots)`}</CardHeaderMeta>
           </CardHeader>
           <View style={{ paddingHorizontal: 16, paddingVertical: 6 }}>
             {todayEvents.map((e) => (

package/examples/tpl_dashboard.tsx

@@ -36,15 +36,15 @@ import { Funnel } from "@lotics/ui/funnel";
 import { formatMoney } from "@lotics/ui/format_money";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Dashboard — the executive operations dashboard. One
+// Template, Dashboard — the executive operations dashboard. One
 // screen that answers "how is this month going, where is it stuck, who pays
 // the bills".
 //
-// Bands: header + period badge · KPI strip (KPIStrip) · revenue by
+// Bands: header + period badge, KPI strip (KPIStrip), revenue by
 // month (BarChart, emerald = money) next to the sales pipeline
-// (StackedProgressBar, blue = pipeline) · Needs attention (Accordion rows —
+// (StackedProgressBar, blue = pipeline), Needs attention (Accordion rows —
 // icon + label + count Badge; expanding opens the records behind the
-// count, each record carries its domain ⋯ ActionMenu) · Top customers
+// count, each record carries its domain ⋯ ActionMenu), Top customers
 // (Avatar + revenue + margin badge; the name Peeks the dossier).
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -78,19 +78,19 @@ const KY_DU_LIEU: Record<
     doanhThu: 986_000_000, doanhThuTrend: -6, doanhThuCaption: "Mar: ₫1.05B",
     bienLai: 16.8, bienLaiTrend: -1, bienLaiCaption: "Mar: 17.4%",
     donDangXuLy: 31, donCaption: "2 orders past delivery date",
-    congNo: 512_000_000, congNoCaption: "8 customers overdue · up 4%",
+    congNo: 512_000_000, congNoCaption: "8 customers overdue, up 4%",
   },
   "2026-05": {
     doanhThu: 1_152_000_000, doanhThuTrend: 17, doanhThuCaption: "Apr: ₫986M",
     bienLai: 17.1, bienLaiTrend: 2, bienLaiCaption: "Apr: 16.8%",
     donDangXuLy: 34, donCaption: "3 orders past delivery date",
-    congNo: 449_000_000, congNoCaption: "5 customers overdue · down 12%",
+    congNo: 449_000_000, congNoCaption: "5 customers overdue, down 12%",
   },
   "2026-06": {
     doanhThu: 1_284_000_000, doanhThuTrend: 11, doanhThuCaption: "May: ₫1.15B",
     bienLai: 18.4, bienLaiTrend: 1, bienLaiCaption: "May: 17.1%",
     donDangXuLy: 37, donCaption: "4 orders past delivery date",
-    congNo: 486_000_000, congNoCaption: "6 customers overdue · up 8%",
+    congNo: 486_000_000, congNoCaption: "6 customers overdue, up 8%",
   },
 };
 const KY_CUOI = "2026-06";
@@ -329,7 +329,7 @@ export function TplDashboard() {
           ]}
         />
 
-        {/* chart row 1: revenue by month (BarChart + TrendFooter) · margin trend (LineChart) */}
+        {/* chart row 1: revenue by month (BarChart + TrendFooter), margin trend (LineChart) */}
         <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch" }}>
           <Card style={{ padding: 0, flex: 3 }}>
             <CardHeader>
@@ -364,7 +364,7 @@ export function TplDashboard() {
           </Card>
         </View>
 
-        {/* chart row 2: pipeline funnel · revenue mix · on-time delivery */}
+        {/* chart row 2: pipeline funnel, revenue mix, on-time delivery */}
         <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch" }}>
           <Card style={{ padding: 0, flex: 3 }}>
             <CardHeader>

package/examples/tpl_dieline.tsx

@@ -24,7 +24,7 @@ const MOCK_PHOTO: DisplayFile = {
 };
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · AI design canvas (the carton "dieline" app) — the FLAGSHIP shape:
+// Template, AI design canvas (the carton "dieline" app) — the FLAGSHIP shape:
 // the page IS the design. The dieline fills the centre, a FLOATING composer sits
 // at the bottom, and a pinned PARAMS PANEL (a hand-composed label/value field-card
 // in live-edit mode) floats at the centre-right. Empty → drop a photo in the
@@ -248,7 +248,7 @@ function ParamsPanel({ dims, onEditParam, onDownload }: { dims: Dims; onEditPara
       <View style={panel.header}>
         <View style={{ flex: 1, gap: 1 }}>
           <Text size="sm" weight="semibold">Parameters</Text>
-          {open ? <Text size="xs" color="muted">FEFCO 0201 · B-flute</Text> : null}
+          {open ? <Text size="xs" color="muted">FEFCO 0201, B-flute</Text> : null}
         </View>
         <IconButton icon={open ? "minus" : "plus"} accessibilityLabel={open ? "Minimize parameters" : "Expand parameters"} onPress={() => setOpen((o) => !o)} />
       </View>