@lotics/ui 27.15.0 → 27.15.2

package/docs/catalog.md

@@ -1056,6 +1056,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   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.
+  `onChange` fires on CLOSE, not on each pick — one commit per visit, and a dismissed panel
+  still writes whatever was picked in it, which is what makes a single tap enough.
   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

package/docs/composition.md

@@ -471,9 +471,19 @@ All view controls are 40px tall (`CONTROL_HEIGHT`), `sm` labels, in ONE wrapping
 
 ## Commit & feedback surfaces
 
-- **Footer actions align RIGHT.** `PopoverFooter`/`DialogFooter` default `align="end"`;
-  `DrawerFooter` is right-aligned by construction. Commit at the right edge, secondary to its
-  left. Never left-flow a Save/Submit.
+- **A form's COMMIT sits with its fields, never in the footer.** The button submitting a set of
+  inputs goes directly beneath the last one it commits, `alignSelf="flex-start"` — the same left
+  edge the user just filled (data_entry.md's form-action alignment law, which holds inside an
+  overlay too). A footer commit is separated from what it commits by the width of the surface and
+  reads as belonging to the dialog rather than the fields. A **`Reset` travels with the `Save` it
+  undoes** — same draft, same row, secondary to the commit's left; splitting the pair across two
+  surfaces breaks one decision in half. A dialog whose only actions are a commit and its reset has
+  **no footer at all**.
+- **The footer carries SURFACE actions**: `Cancel`/`Close`/`Done` (dismissal), `Back`
+  (navigation) — verbs about the overlay, with no field group to sit beside. `PopoverFooter`/
+  `DialogFooter` default `align="end"`; `DrawerFooter` is right-aligned by construction. Primary
+  at the right edge, secondary to its left. A confirm dialog (no fields) is all surface: its
+  buttons ARE the dialog, and they belong in the footer.
 - **Empty result**: `<EmptyState message hint? icon? action?>` — never a bare muted Text.
 - **Inline status**: `<Callout tone="info|success|warning|error|neutral">` — compound (like
   Card): compose `CalloutTitle`/`CalloutText`/`CalloutActions` inside. `Callout` is INLINE;

package/docs/data_entry.md

@@ -36,11 +36,13 @@ shows in the resting row too; the `data` generic types option payloads). A DEPEN
 renders only while its parent value makes it real — never a disabled ghost row. Worked rows:
 `tpl_record`'s Classification group.
 
-**The form-action alignment law.** On an open page, a label-left form's action row rides the
-form's OWN GRID — an empty-label `DetailRow` puts the CTA (and what it produces) exactly on
-the CONTROL COLUMN, the same left edge the user just filled, and inherits stacked mode on
-narrow containers. A right-floated button aligns to nothing; only OVERLAY footers
-(`DialogFooter`/`DrawerFooter`) right-align. Worked: `tpl_record`'s Delivery receipt.
+**The form-action alignment law.** A label-left form's action row rides the form's OWN GRID —
+an empty-label `DetailRow` puts the CTA (and what it produces) exactly on the CONTROL COLUMN,
+the same left edge the user just filled, and inherits stacked mode on narrow containers. A
+right-floated button aligns to nothing. Worked: `tpl_record`'s Delivery receipt.
+
+**This holds inside an overlay too.** A dialog's commit sits under the last field it commits,
+not in the footer — see [composition.md §Commit & feedback surfaces](./composition.md).
 
 ### A dialog is a draft — use `FormField`, never an `Inline*` editor
 

package/package.json

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

package/src/date_stamp.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Pressable, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
@@ -50,6 +50,10 @@ export function DateStamp(props: DateStampProps) {
   const [hovered, setHovered] = useState(false);
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<string | null>(value);
+  // The panel emits its pick and asks to close in the SAME event, so a commit
+  // that read `draft` off render state would still see the value the pick just
+  // replaced. This is what the close path reads instead.
+  const picked = useRef<string | null>(value);
 
   const shown = value ? formatDate(value, { locale: tag }) : "";
 
@@ -57,21 +61,34 @@ export function DateStamp(props: DateStampProps) {
   // so a caller can drop this into a column without a conditional.
   if (!onChange) return shown ? <Text size="xs" color="muted">{shown}</Text> : null;
 
+  // Commit on CLOSE, matching `InlineDatePicker`: a single pick and the panel's
+  // Today button both auto-close, so committing on CHANGE instead would fire
+  // twice and a dismissed panel would still write.
+  //
+  // It has to be THIS function rather than `onOpenChange`, and every close has to
+  // route through it: a day press closes the panel via `onRequestClose`, which
+  // never reaches `onOpenChange`, so a commit living there is skipped by the one
+  // path this component exists for — picking a date. The popover shuts, the
+  // correction is discarded, and nothing says so. A stamp that silently drops the
+  // correction is worse than a read-only one.
+  const commit = () => {
+    setOpen(false);
+    if (picked.current !== value) onChange(picked.current ?? "");
+  };
+  const reopen = () => {
+    picked.current = value;
+    setDraft(value);
+    setOpen(true);
+  };
+
   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);
-      }}
+      onOpenChange={(next) => { if (next) reopen(); else commit(); }}
     >
       <PopoverTrigger>
         <Pressable
-          onPress={() => setOpen(true)}
+          onPress={reopen}
           onHoverIn={() => setHovered(true)}
           onHoverOut={() => setHovered(false)}
           accessibilityRole="button"
@@ -114,7 +131,13 @@ export function DateStamp(props: DateStampProps) {
         </Pressable>
       </PopoverTrigger>
       <PopoverContent>
-        <DatePickerPanel value={draft} onValueChange={setDraft} format="date" locale={tag} onRequestClose={() => setOpen(false)} />
+        <DatePickerPanel
+          value={draft}
+          onValueChange={(iso) => { picked.current = iso; setDraft(iso); }}
+          format="date"
+          locale={tag}
+          onRequestClose={commit}
+        />
       </PopoverContent>
     </Popover>
   );