@lotics/ui 11.7.3 → 11.8.0

package/AGENTS.md

@@ -25,7 +25,7 @@ doc before building any screen, **never from memory**. Exact props are the shipp
 | [docs/data_entry.md](./docs/data_entry.md) | Which editing pattern for which job — inline edit, fieldset forms, find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments, stage gates. |
 | [docs/ai_patterns.md](./docs/ai_patterns.md) | AI proposes, the human decides — composer, live run feed (`AgentRun`), review-before-apply, findings, provenance, confidence; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md). |
 | [docs/composition.md](./docs/composition.md) | The design-language contract — canvas + content column, heading altitude, banded cards, register vs inset rows, master-detail `Drawer`, view controls, color discipline, typography, whitespace. |
-| [docs/templates.md](./docs/templates.md) | The map of `examples/tpl_*.tsx` — what shape each template solves and which to start from (copy + adapt, never import). |
+| [docs/templates.md](./docs/templates.md) | The map of `examples/tpl_*.tsx` — what shape each template solves and which to start from (copy + adapt, never import) — plus the record-surface composition rules (pipeline order, static shape, decision budget). |
 
 ## Iron rules
 

package/docs/catalog.md

@@ -516,7 +516,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 ### Dates & times
 
 - **`date_picker`** — `DatePicker` (+ `DatePickerPanel`, `DatePickerLabels`): the field-form
-  date (and datetime) picker.
+  date (and datetime) picker. The trigger is the segmented, locale-ordered `DateField`
+  (typed digits auto-advance; a typed separator advances a single-digit day/month) plus the
+  calendar popover.
 - **`date_calendar`** — `Calendar`: the bare month grid — `mode="single"` or `"range"`
   (`{start,end}` — two months side by side on desktop), month/year pickers + arrows,
   localized weekday/month names via BCP-47 `locale`, `firstDayOfWeek` (default Monday),
@@ -534,11 +536,15 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `INLINE_CONTROL_HEIGHT` (40) + `inlineValueTextStyle`: the engine custom inline editors
   join through — a view ⇄ edit toggle, a draft buffer, async `onSave` with the spinner
   INSIDE the control and inline error, commit on blur (Enter saves, Escape reverts) or
-  `controls="buttons"`; `background="tint" | "transparent"` (the zinc-50 editability chip vs
+  `controls="buttons"`; KEYBOARD focus on the closed view opens edit mode with the input
+  focused (type → Tab → type — see the data-entry keyboard contract), pointer focus never
+  does; `background="tint" | "transparent"` (the zinc-50 editability chip vs
   flat for dense uniformly-editable surfaces).
 - **`inline_text_input`**, **`inline_number_input`** (`format` for currency/units),
   **`inline_select`**, **`inline_member_select`**, **`inline_date_picker`**
-  (`format="datetime"`, `optionalTime`), **`inline_time_picker`** — the Inline\* per-field
+  (`format="datetime"`, `optionalTime`; keyboard focus opens the TYPED segmented `DateField`
+  — locale field order, separator advances, Alt+ArrowDown floats the calendar; click still
+  opens the calendar popover), **`inline_time_picker`** — the Inline\* per-field
   editors; `InlineSelect`/`InlineMemberSelect` render the resting value like its option —
   `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not
   just text.
@@ -676,10 +682,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   own scroll, like `OptionList`): the anchored floating surface. **NON-MODAL**: the anchored
   popover has NO blocking overlay — the rest of the page stays interactive, and clicking another
   control both dismisses this popover AND activates that control in one click; clicking outside,
-  scrolling an ancestor, or Escape dismisses. Only the `small` (bottom-sheet) presentation is
-  modal (scrim). `PopoverContent` already insets its body 12px — put content directly in it,
-  NEVER add your own padding `View` (that double-pads); title/actions go in `PopoverHeader` /
-  `PopoverFooter`.
+  scrolling an ancestor, or Escape dismisses. Interactions inside a layer the popover opened
+  from within (a nested popover, an `Alert` confirm, a full-screen Modal like the file preview)
+  never dismiss it — clicks, scrolls, and Escape belong to that layer until it closes. Only the
+  `small` (bottom-sheet) presentation is modal (scrim). `PopoverContent` already insets its
+  body 12px — put content directly in it, NEVER add your own padding `View` (that double-pads);
+  title/actions go in `PopoverHeader` / `PopoverFooter`.
 - **`popover_nav`** — `usePopoverNav` + `PopoverScreen` + `PopoverNavHeader` — the popover's
   built-in mini-router: EVERY `Popover` provides the nav context (`navigate(route)` pushes,
   `goBack`, `currentRoute`, `canGoBack`; resets on close), `PopoverScreen route=""` is the
@@ -923,5 +931,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   input.
 - **`use_focus_ring`** — `useFocusRing`: keyboard-aware focus state for painting a control's
   own ring.
+- **`interaction_modality`** — the document-level keyboard-vs-pointer tracker behind
+  `useFocusRing` and the inline editors' focus-opens-edit: `getInteractionModality()` read
+  inside a focus handler tells a Tab-focus from a click-focus (the `:focus-visible` signal).
+- **`inline_focus`** — `shouldOpenOnFocus` + `FOCUS_OPEN_SUPPRESS_MS`: the inline
+  keyboard-entry gate — keyboard focus opens a closed editor, pointer focus never does, and
+  a programmatic focus restore inside the suppression window doesn't re-open the editor it
+  just closed.
 - **`json_panel`** — `JsonPanel` (`{title, value}`) + `stringifyData`: a labeled monospace
   panel for raw/JSON payloads (debug & developer surfaces).

package/docs/data_entry.md

@@ -29,8 +29,31 @@ in [the templates](./templates.md) (`examples/tpl_*.tsx`).
 When the whole record is editable (a detail/record screen, dense settings), don't wrap it in a
 form mode or a preview↔edit card — make each VALUE inline-editable: it reads as a value on a quiet
 chip, hover reveals the input-family border (no extra grey wash, no pencil icon that shifts
-layout), click swaps the input in **at the same height** (zero reflow, the whole point), and it
-commits on blur (Enter saves, Escape reverts) or via `controls="buttons"` (✓ primary / ✕).
+layout), click OR keyboard focus swaps the input in **at the same height** (zero reflow, the whole
+point), and it commits on blur (Enter saves, Escape reverts) or via `controls="buttons"` (✓ / ✕).
+
+### Keyboard entry — type → Tab → type
+
+Bulk entry never needs the mouse. KEYBOARD focus (Tab / Shift+Tab) landing on a closed
+input-swap editor — `InlineTextInput`, `InlineNumberInput`, `InlineTimePicker`,
+`InlineDatePicker` — opens edit mode immediately with the input focused; commit-on-blur then
+makes Tab itself the commit, so the chain is type → Tab → type with the next editor already
+open. Pointer focus never auto-opens (mousedown records "pointer" modality before focus fires
+— `interaction_modality.ts`), so the click path is exactly what it always was. When an editor
+closes while its input still holds focus (Enter/Escape), it returns focus to its resting view
+— never `<body>` — so the next Tab continues from the field.
+
+**Typed dates.** `InlineDatePicker`'s keyboard mode is the kit's segmented `DateField`: type
+the date in the locale's own field order (dd/MM/yyyy where the locale says so — pass
+`locale`), digits auto-advance, and a typed separator (`/` `.` `-`) advances a single-digit
+day/month; Enter or blur commits, Escape reverts, Alt+ArrowDown floats the calendar. The
+calendar popover stays the pointer path (click the resting value, as ever) — it is no longer
+the only path. A PARTIAL entry never commits and never clears the stored value: the field
+stays in edit mode showing the `datePicker.invalidDate` inline error until fixed or Escaped.
+
+The POPOVER editors (`InlineSelect` / `InlineMemberSelect` / `InlineTagSelect`) deliberately
+do NOT auto-open on focus — a popup opening on Tab arrival traps traversal; per the WAI-ARIA
+combobox contract they open on Enter/Space from the keyboard.
 
 One per type:
 

package/docs/templates.md

@@ -48,6 +48,47 @@ the package index is [../AGENTS.md](../AGENTS.md).
 | AI ranks answers — look-up-and-explain | `tpl_lookup` |
 | AI over a record's documents (extract / cross-check / generate) | `tpl_documents` |
 
+## Composition rules — how a record surface is assembled
+
+Laws for any screen where a record's data is edited and a primary action produces its output
+(a document, a message, an export) — `tpl_record` is the worked example.
+
+1. **Pipeline order.** Data sections run top→bottom in the order work flows (intake/scan near
+   the top when AI-driven); the OUTPUT section — the primary action plus everything that
+   configures it — comes LAST. The primary action is the output step of the pipeline, never
+   header chrome.
+2. **Static shape.** The page never changes shape from output-selection state. Conditional
+   rendering is DATA-driven only (a control appears because two stored values differ), never
+   selection-driven. Relevance is an advisory `Callout` with a jump-to-section action — warn,
+   never hide, never hard-block.
+3. **Colocation & ownership.** Every output option (selections, print/export switches) lives in
+   the output section beside its action; a per-entity selection carries its owner's name in its
+   heading. Persisted record DATA never lives there — data belongs in data sections. Misfiled
+   data announces itself as callout special-cases; the exception disappearing is the sign the
+   model is right.
+4. **Resolved state.** Controls show the EFFECTIVE state, never raw storage: a derived/suggested
+   selection renders checked; the first manual change persists the full explicit set; a
+   reset-to-auto affordance appears only in explicit mode. What's shown = what happens.
+5. **Decision budget.** Every user decision earns its place — derive it, default it, or
+   conditionally render it; ask only the underivable. Suggestions are one-tap-save chips; a
+   placeholder states the honest effective fallback (what actually happens when empty), never
+   an example that lies.
+6. **Header = identity + provenance.** Id, the key identifier, created-at. No metrics or badges
+   duplicating data a section already owns.
+7. **Destructive placement.** Solid `danger`, bottom-left after the entity's fields, ONE
+   convention page-wide, confirmed by `Alert`. Never in a heading row, never one-tap.
+8. **Create-then-refine.** An add is one click creating a draft edited in place — drafts render
+   as empty inline editors with placeholders, never as fake data. No type-a-name-then-click
+   forms.
+9. **Optimistic feedback.** Every edit echoes locally, saves in the background, reconciles on
+   refetch, reverts + surfaces on error. Silent success, loud failure — no persistent "saved"
+   chrome.
+10. **Chrome discipline.** Kit spacing scale only; ONE divider rule (between sibling blocks,
+    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
+    its consequences, not by swapping the control.
+
 ## Analytics
 
 Read-mostly screens that answer a question about a population, then open doors into the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.7.3",
+  "version": "11.8.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/date_field.tsx

@@ -25,6 +25,15 @@ export interface DateFieldProps {
   onActivate?: () => void;
   /** Fires once focus leaves the whole field. */
   onBlur?: () => void;
+  /** Focus the first segment on mount (an inline editor entered by keyboard). */
+  autoFocus?: boolean;
+  /** Escape pressed in a segment — an inline editor cancels its session. */
+  onEscape?: () => void;
+  /** Alt+ArrowDown pressed in a segment — open the calendar popover. */
+  onOpenPicker?: () => void;
+  /** Reports whether ANY part holds a partial entry (typed but not yet a
+   *  complete valid date) — an inline editor blocks its commit on it. */
+  onIncompleteChange?: (incomplete: boolean) => void;
   /** Rendered inside the border, after the segments (the calendar button). */
   rightSlot?: React.ReactNode;
   /** Ref to the frame, used to anchor the popover. */
@@ -51,12 +60,17 @@ export function DateField(props: DateFieldProps) {
     testID,
     onActivate,
     onBlur,
+    autoFocus,
+    onEscape,
+    onOpenPicker,
+    onIncompleteChange,
     rightSlot,
     triggerRef,
     style,
   } = props;
 
   const [focused, setFocused] = useState(false);
+  const incompleteParts = useRef<boolean[]>([]);
   const { hovered, hoverProps } = useHover();
   const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -89,6 +103,14 @@ export function DateField(props: DateFieldProps) {
     if (!disabled) onActivate?.();
   }, [disabled, onActivate]);
 
+  const handleIncomplete = useCallback(
+    (index: number, incomplete: boolean) => {
+      incompleteParts.current[index] = incomplete;
+      onIncompleteChange?.(incompleteParts.current.some(Boolean));
+    },
+    [onIncompleteChange],
+  );
+
   const config = useMemo(() => dateSegmentsConfig(locale ?? "en-US", hasTime), [locale, hasTime]);
 
   const isEmpty = parts.every((part) => !part);
@@ -122,9 +144,13 @@ export function DateField(props: DateFieldProps) {
               config={config}
               segmentLabels={segmentLabels}
               disabled={disabled}
+              autoFocus={autoFocus && index === 0}
               accessibilityLabel={partLabels?.[index]}
               onFocus={handleSegmentFocus}
               onBlur={handleSegmentBlur}
+              onEscape={onEscape}
+              onOpenPicker={onOpenPicker}
+              onIncompleteChange={onIncompleteChange ? (inc) => handleIncomplete(index, inc) : undefined}
             />
           </React.Fragment>
         ))}

package/src/date_picker.tsx

@@ -50,6 +50,8 @@ export interface DatePickerLabels extends SegmentLabels {
   endTime: string;
   /** Footer action: commit and close the popover. */
   done: string;
+  /** Inline error when a typed date is left incomplete/invalid (never committed). */
+  invalidDate: string;
   /** Quick action: add a time to a date-only value (`optionalTime`). */
   addTime: string;
   /** Accessible name + tooltip: drop the time, keeping the date (`optionalTime`). */

package/src/date_picker_value.test.ts

@@ -3,6 +3,7 @@ import {
   parsePart,
   partsToIso,
   parseText,
+  resolveDateCommit,
   timeText,
   splitTime,
   isoToDate,
@@ -165,3 +166,39 @@ describe("parseTimeString", () => {
     expect(parseTimeString("")).toBeNull();
   });
 });
+
+describe("resolveDateCommit — the inline editor's commit contract", () => {
+  it("a typed complete date commits the value", () => {
+    expect(
+      resolveDateCommit({ draft: "2026-03-15", value: "2026-01-01", incomplete: false, clearable: false }),
+    ).toEqual({ kind: "save", value: "2026-03-15" });
+    // …including onto an empty field.
+    expect(
+      resolveDateCommit({ draft: "2026-03-15", value: null, incomplete: false, clearable: false }),
+    ).toEqual({ kind: "save", value: "2026-03-15" });
+  });
+
+  it("a partial entry never commits and never clears the stored value", () => {
+    expect(
+      resolveDateCommit({ draft: "2026-01-01", value: "2026-01-01", incomplete: true, clearable: true }),
+    ).toEqual({ kind: "invalid" });
+  });
+
+  it("an unchanged draft exits without a write (a touched-but-equal date is not a diff)", () => {
+    expect(
+      resolveDateCommit({ draft: "2026-01-01", value: "2026-01-01", incomplete: false, clearable: true }),
+    ).toEqual({ kind: "none" });
+    expect(resolveDateCommit({ draft: "", value: null, incomplete: false, clearable: true })).toEqual({
+      kind: "none",
+    });
+  });
+
+  it("an emptied entry clears only when the field is clearable", () => {
+    expect(
+      resolveDateCommit({ draft: "", value: "2026-01-01", incomplete: false, clearable: true }),
+    ).toEqual({ kind: "clear" });
+    expect(
+      resolveDateCommit({ draft: "", value: "2026-01-01", incomplete: false, clearable: false }),
+    ).toEqual({ kind: "none" });
+  });
+});

package/src/date_picker_value.ts

@@ -123,6 +123,36 @@ export function dropTime(iso: string): string {
   return p ? partsToIso(p, false) : "";
 }
 
+/** What committing an inline date edit session should do. */
+export type InlineDateCommit =
+  | { kind: "save"; value: string }
+  | { kind: "clear" }
+  | { kind: "none" }
+  | { kind: "invalid" };
+
+/**
+ * Resolve an inline date editor's commit (blur / Enter / popover close).
+ * `draft` is the last COMPLETE value the session produced ("" when emptied);
+ * `incomplete` is true while the segments hold a partial entry (a typed day
+ * with no year). Partial input never commits and never wipes the stored value —
+ * the caller shows the error affordance and keeps the entry ("invalid"). An
+ * emptied draft clears only when the field is clearable; otherwise it reverts
+ * silently, matching the calendar's own Clear on a required date.
+ */
+export function resolveDateCommit(opts: {
+  draft: string;
+  value: string | null;
+  incomplete: boolean;
+  clearable: boolean;
+}): InlineDateCommit {
+  const { draft, value, incomplete, clearable } = opts;
+  if (incomplete) return { kind: "invalid" };
+  const stored = value ?? "";
+  if (draft === stored) return { kind: "none" };
+  if (draft === "") return clearable && stored ? { kind: "clear" } : { kind: "none" };
+  return { kind: "save", value: draft };
+}
+
 const TIME_RE = /^(\d{1,2}):(\d{2})$/;
 
 /**

package/src/date_segments.test.ts

@@ -7,6 +7,7 @@ import {
   from12h,
   typeDigit,
   incrementSegment,
+  separatorAdvances,
   setHourField,
   withDayPeriod,
   displayValue,
@@ -101,6 +102,50 @@ describe("typeDigit", () => {
   });
 });
 
+describe("typed date entry — the inline keyboard path", () => {
+  // Simulate the segment engine's typing pipeline: each keystroke flows through
+  // typeDigit in the locale's own field order; the buffer then resolves through
+  // segmentsToValue. This is the outcome contract behind "type 15/03/2026 into
+  // an inline date editor and it commits".
+  it("a typed dd/MM/yyyy date composes the committed ISO value (vi-VN order)", () => {
+    expect(fieldOrder(getDateLayout("vi-VN", false))).toEqual(["day", "month", "year"]);
+    const day = typeDigit("day", typeDigit("day", "", "1", false).text, "5", false);
+    expect(day).toEqual({ text: "15", value: 15, complete: true });
+    const month = typeDigit("month", typeDigit("month", "", "0", false).text, "3", false);
+    expect(month).toEqual({ text: "03", value: 3, complete: true });
+    let yearText = "";
+    for (const digit of ["2", "0", "2", "6"]) yearText = typeDigit("year", yearText, digit, false).text;
+    const buffer = { year: Number(yearText), month: month.value, day: day.value, hour: null, minute: null };
+    expect(segmentsToValue(buffer, false)).toBe("2026-03-15");
+  });
+
+  it("a single-digit d/M/yyyy entry advances on the separator and still commits", () => {
+    // "1/1/2026": neither "1" can auto-advance (a second digit could still
+    // fit — "12", "11") — the typed "/" is the explicit advance.
+    const day = typeDigit("day", "", "1", false);
+    expect(day.complete).toBe(false);
+    expect(separatorAdvances("/", day.text !== "")).toBe(true);
+    const month = typeDigit("month", "", "1", false);
+    expect(month.complete).toBe(false);
+    expect(separatorAdvances("/", month.text !== "")).toBe(true);
+    const buffer = { year: 2026, month: month.value, day: day.value, hour: null, minute: null };
+    expect(segmentsToValue(buffer, false)).toBe("2026-01-01");
+  });
+
+  it("separators advance only off a segment that has content", () => {
+    for (const key of ["/", ".", "-", ",", ":", " "]) {
+      expect(separatorAdvances(key, true)).toBe(true);
+      expect(separatorAdvances(key, false)).toBe(false);
+    }
+    expect(separatorAdvances("a", true)).toBe(false);
+    expect(separatorAdvances("ArrowDown", true)).toBe(false);
+  });
+
+  it("an impossible typed date never composes a value", () => {
+    expect(segmentsToValue({ year: 2026, month: 2, day: 30, hour: null, minute: null }, false)).toBeNull();
+  });
+});
+
 describe("incrementSegment", () => {
   it("wraps within range", () => {
     expect(incrementSegment("month", 12, 1, false)).toBe(1);

package/src/date_segments.ts

@@ -230,6 +230,17 @@ export function typeDigit(
   return { text, value, complete };
 }
 
+/**
+ * A typed separator ("15/3", "15.3.2026") advances to the next segment — the
+ * forgiveness that makes single-digit entry work: "1" alone can't auto-advance
+ * (it might be "12"), so the separator is the typist's explicit "done here".
+ * Only advances off a segment that HAS content (committed or in-progress);
+ * a leading separator is a no-op, matching native date inputs.
+ */
+export function separatorAdvances(key: string, segmentHasContent: boolean): boolean {
+  return segmentHasContent && (key === "/" || key === "." || key === "-" || key === "," || key === " " || key === ":");
+}
+
 /** Step a numeric segment up/down, wrapping within its range. */
 export function incrementSegment(
   type: SegmentType,

package/src/date_segments_field.tsx

@@ -21,6 +21,7 @@ import {
   fieldOrder,
   incrementSegment,
   placeholderFor,
+  separatorAdvances,
   setHourField,
   to12h,
   typeDigit,
@@ -44,6 +45,16 @@ export interface DateSegmentsProps {
   onFocus?: () => void;
   /** Fires when a segment in this group loses focus. */
   onBlur?: () => void;
+  /** Escape pressed in a segment (web) — an inline editor cancels its session. */
+  onEscape?: () => void;
+  /** Alt+ArrowDown pressed in a segment (web) — open the calendar popover
+   *  (the segment-field convention; plain ArrowDown steps the spinbutton). */
+  onOpenPicker?: () => void;
+  /** Reports whether the buffer holds a PARTIAL entry — non-empty but not yet a
+   *  complete valid date (a typed day with no year). Complete values emit
+   *  through `onChange`; an emptied buffer emits `""`; between the two, this is
+   *  the only signal — an inline editor blocks its commit on it. */
+  onIncompleteChange?: (incomplete: boolean) => void;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -127,6 +138,9 @@ export function DateSegments(props: DateSegmentsProps) {
     accessibilityLabel,
     onFocus,
     onBlur,
+    onEscape,
+    onOpenPicker,
+    onIncompleteChange,
     style,
   } = props;
 
@@ -147,27 +161,43 @@ export function DateSegments(props: DateSegmentsProps) {
 
   const lastEmitted = useRef<string>(value);
   const fieldRefs = useRef<Partial<Record<SegmentType, RNTextInput | null>>>({});
+  const lastIncomplete = useRef(false);
+
+  const reportIncomplete = useCallback(
+    (incomplete: boolean) => {
+      if (incomplete === lastIncomplete.current) return;
+      lastIncomplete.current = incomplete;
+      onIncompleteChange?.(incomplete);
+    },
+    [onIncompleteChange],
+  );
 
   useEffect(() => {
     if (value !== lastEmitted.current) {
       lastEmitted.current = value;
       setBuffer(config.toBuffer(value));
       setActiveText("");
+      // An outside value (calendar pick, parent reset) is never partial.
+      reportIncomplete(false);
     }
-  }, [value, config]);
+  }, [value, config, reportIncomplete]);
 
   const commit = useCallback(
     (next: SegmentBuffer) => {
       const out = config.toValue(next);
       if (out !== null) {
         lastEmitted.current = out;
+        reportIncomplete(false);
         onChange(out);
       } else if (config.isEmpty(next)) {
         lastEmitted.current = "";
+        reportIncomplete(false);
         onChange("");
+      } else {
+        reportIncomplete(true);
       }
     },
-    [config, onChange],
+    [config, onChange, reportIncomplete],
   );
 
   const focusField = useCallback((type: SegmentType | undefined) => {
@@ -267,12 +297,26 @@ export function DateSegments(props: DateSegmentsProps) {
 
   const handleKeyPress = useCallback(
     (type: SegmentType, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      const key = e.nativeEvent.key;
+      // On web the nativeEvent is the DOM KeyboardEvent — RN's type only carries
+      // `key`, so widen minimally at this boundary for the modifier read.
+      const native = e.nativeEvent as TextInputKeyPressEventData & { altKey?: boolean };
+      const key = native.key;
       if (/^[0-9]$/.test(key)) {
         e.preventDefault();
         handleDigit(type, key);
         return;
       }
+      // A typed separator ("15/3/2026", "14:30") advances past a segment that
+      // has content — the explicit "done" for a single-digit day/month that
+      // can't auto-advance on its own.
+      const hasContent =
+        (activeType === type && activeText !== "") || fieldNumeric(type, buffer, layout.hour12) != null;
+      if (separatorAdvances(key, hasContent)) {
+        e.preventDefault();
+        setActiveText("");
+        focusNext(type);
+        return;
+      }
       switch (key) {
         case "ArrowUp":
           e.preventDefault();
@@ -280,7 +324,16 @@ export function DateSegments(props: DateSegmentsProps) {
           break;
         case "ArrowDown":
           e.preventDefault();
-          handleStep(type, -1);
+          // Alt+ArrowDown opens the calendar (the segmented-field convention);
+          // plain ArrowDown keeps the spinbutton step.
+          if (native.altKey && onOpenPicker) onOpenPicker();
+          else handleStep(type, -1);
+          break;
+        case "Escape":
+          if (onEscape) {
+            e.preventDefault();
+            onEscape();
+          }
           break;
         case "ArrowLeft":
           e.preventDefault();
@@ -307,7 +360,7 @@ export function DateSegments(props: DateSegmentsProps) {
           }
       }
     },
-    [handleDigit, handleStep, handleBackspace, focusPrev, focusNext, setHalfDay],
+    [activeType, activeText, buffer, layout.hour12, handleDigit, handleStep, handleBackspace, focusPrev, focusNext, setHalfDay, onEscape, onOpenPicker],
   );
 
   const handleChangeText = useCallback(

package/src/file_gallery_modal.tsx

@@ -115,6 +115,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   // additionally can't hold filename + every action inline (the close button gets
   // pushed off-screen), so the remaining actions collapse into a ⋯ menu.
   const { small } = useScreenSize();
+  const locale = useLoticsLocale();
 
   const close = useCallback(() => onIndexChange(null), [onIndexChange]);
   const next = useCallback(() => {
@@ -154,7 +155,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   const file = files[activeIndex];
   if (!file) return null;
 
-  const l = { ...useLoticsLocale().gallery, ...labels };
+  const l = { ...locale.gallery, ...labels };
   const isImage = isImageMimeType(file.mimeType);
   const total = files.length;
   const rotated = rot.rotationFor(file.id) !== 0;