@lotics/ui 11.0.0 → 11.2.0

package/AGENTS.md

@@ -233,7 +233,10 @@ value · trailing laid out like a TABLE: `labelWidth` / `trailingWidth` /
 need) holding `DetailRow`s — set `trailingWidth` when ANY row carries a
 trailing action/badge, so EVERY row reserves the column and one row's
 `Copy` button never makes its editor narrower than its neighbours'. An editor AT REST sits
-on a zinc-50 chip — THE editability affordance: users see what's editable without hovering.
+on a zinc-50 chip — THE editability affordance: users see what's editable without hovering; the
+picker-opening editors (`InlineSelect`/`InlineDatePicker`/`InlineTimePicker`) additionally carry a
+rest glyph (chevron / calendar / clock) marking them tappable pickers without hover — the
+touch-critical cue plain text/number fields don't get.
 `background="transparent"` opts a field out of the chip — for DENSE, uniformly-editable
 surfaces (a task list/board where EVERY cell edits: the chip repeated everywhere is noise and
 distinguishes nothing; hover/focus still reveal the input). Keep the chip wherever editable and
@@ -1062,7 +1065,7 @@ check_circle (CheckCircle — the completion ring: an empty ring that springs to
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·
 sort_header · table · data_grid (DataGrid — the inline-managed grouped table: a grouped, sortable grid of LIVE inline-editor cells (`columns[].cell` → ANY field) + optional per-row `leading` (a CheckCircle) + `renderGroupFooter` (per-group add, align with the exported `gridRowStyle`) + `labels` (localize the sort-header a11y via `SortHeaderLabels`). Owns header/sections/rows; consumer owns data + sort/group/filter/collapse state + toolbar. Renders ALL rows — MODERATE data; 10k+ → the paginated `Table` register. Example: `tpl_task_board`) · pagination · accordion · 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 is the tap target) + `active` to wash the selected one, so it doubles as a section/phase switcher; the guided-run / agent-feed primitive — subsumes the old StepList) ·
-step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · modal (Modal + ModalHeader + ModalBody + ModalFooter — the full-bleed, edge-to-edge takeover: an OPAQUE surface that COVERS THE WHOLE SCREEN, so unlike Dialog (centered card WITH scrim) and Drawer (docked panel WITH scrim) there is nothing behind it to dim — NO scrim, NO backdrop. Lays children as a flex column: a pinned ModalHeader (eyebrow/title + an actions slot + close), a flex:1 scrolling ModalBody, a pinned ModalFooter (the commit bar, same chrome as DialogFooter/DrawerFooter). Reach for it for a focused capture / multi-step wizard / a console the user steps INTO, where surrounding chrome is a distraction; pick Dialog when the surface is a card the user can see context around) · screen_router (ScreenRouter + Screen + useScreenRouter — the SCREENS compound: a flat navigation stack (`navigate("/case/:id")` pushes, `goBack` pops, `canGoBack`, route `params`; stacked screens stay mounted `display:none` so scroll survives the round trip). Dialog BAKES a router in (`<Dialog><Screen route="">…`); ANY other container hosts the standalone `<ScreenRouter>` — and it wraps AROUND the container so the CHROME can read the stack: a Drawer drilling into a LINKED record swaps its header to a BACK IconButton + the pushed record's id while `canGoBack` (sequence ◀ ▶ hides — stepping the root from inside a linked record disorients), and the pushed `<Screen route="/case/:id">` is a REAL editable workspace with its own footer CTAs. Key the router by record id so stepping ◀ ▶ resets the stack. Worked example: `tpl_item_list` drawer) · popover · 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 root and screens render conditionally (unmounted when inactive — no scroll preservation), `PopoverNavHeader` is the title row whose back chevron auto-appears while `canGoBack` (`right` slot, `backLabel`). For a multi-screen menu inside ONE popover (an avatar/settings menu drilling into a sub-panel); route PATTERNS, `params`, and stacked-alive screens are `screen_router`'s job. Distinct from `Popover`'s plain `PopoverHeader` children container) · tooltip ·
+step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · modal (Modal + ModalHeader + ModalBody + ModalFooter — the full-bleed, edge-to-edge takeover: an OPAQUE surface that COVERS THE WHOLE SCREEN, so unlike Dialog (centered card WITH scrim) and Drawer (docked panel WITH scrim) there is nothing behind it to dim — NO scrim, NO backdrop. Lays children as a flex column: a pinned ModalHeader (eyebrow/title + an actions slot + close), a flex:1 scrolling ModalBody, a pinned ModalFooter (the commit bar, same chrome as DialogFooter/DrawerFooter). Reach for it for a focused capture / multi-step wizard / a console the user steps INTO, where surrounding chrome is a distraction; pick Dialog when the surface is a card the user can see context around) · screen_router (ScreenRouter + Screen + useScreenRouter — the SCREENS compound: a flat navigation stack (`navigate("/case/:id")` pushes, `goBack` pops, `canGoBack`, route `params`; stacked screens stay mounted `display:none` so scroll survives the round trip). Dialog BAKES a router in (`<Dialog><Screen route="">…`); ANY other container hosts the standalone `<ScreenRouter>` — and it wraps AROUND the container so the CHROME can read the stack: a Drawer drilling into a LINKED record swaps its header to a BACK IconButton + the pushed record's id while `canGoBack` (sequence ◀ ▶ hides — stepping the root from inside a linked record disorients), and the pushed `<Screen route="/case/:id">` is a REAL editable workspace with its own footer CTAs. Key the router by record id so stepping ◀ ▶ resets the stack. Worked example: `tpl_item_list` drawer) · popover (Popover + PopoverTrigger + PopoverContent — **PopoverContent already insets its body 12px; put content directly in it, NEVER add your own padding View (that double-pads). Title/actions via 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 root and screens render conditionally (unmounted when inactive — no scroll preservation), `PopoverNavHeader` is the title row whose back chevron auto-appears while `canGoBack` (`right` slot, `backLabel`). For a multi-screen menu inside ONE popover (an avatar/settings menu drilling into a sub-panel); route PATTERNS, `params`, and stacked-alive screens are `screen_router`'s job. Distinct from `Popover`'s plain `PopoverHeader` children container) · tooltip ·
 alert · peek · empty_state · completion_state · callout (Callout · CalloutTitle ·
 CalloutText · CalloutActions) · kpi_card · kpi_strip · summary_line (SummaryLine — the light inline summary of a register/list's FILTERED view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band) · metric · trend_chip · sparkline ·
 bar_chart · line_chart · pie_chart · ring_gauge · progress_bar · stacked_progress_bar · breakdown ·

package/package.json

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

package/src/icon.tsx

@@ -40,6 +40,7 @@ import Box from "lucide-react-native/dist/esm/icons/box";
 import Brackets from "lucide-react-native/dist/esm/icons/brackets";
 import Calculator from "lucide-react-native/dist/esm/icons/calculator";
 import Calendar from "lucide-react-native/dist/esm/icons/calendar";
+import CalendarClock from "lucide-react-native/dist/esm/icons/calendar-clock";
 import CalendarOff from "lucide-react-native/dist/esm/icons/calendar-off";
 import Camera from "lucide-react-native/dist/esm/icons/camera";
 import Check from "lucide-react-native/dist/esm/icons/check";
@@ -234,6 +235,7 @@ const iconComponents = {
   brackets: Brackets,
   calculator: Calculator,
   calendar: Calendar,
+  "calendar-clock": CalendarClock,
   "calendar-off": CalendarOff,
   camera: Camera,
   check: Check,

package/src/inline_date_picker.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { 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";
@@ -91,7 +92,10 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
             disabled={disabled}
             active={open && !disabled}
             accessibilityLabel={accessibilityLabel}
-            trailing={saving ? <ActivityIndicator size={16} color={colors.zinc[400]} /> : undefined}
+            // A rest affordance (like the select's chevron): a calendar glyph marks
+            // the field as a tappable date control even when empty — no hover / pointer
+            // cursor needed, so it reads as interactive on touch.
+            trailing={saving ? <ActivityIndicator size={16} color={colors.zinc[400]} /> : <Icon name={format === "datetime" ? "calendar-clock" : "calendar"} size={18} color={colors.zinc[400]} />}
           />
         </PopoverTrigger>
         <PopoverContent>

package/src/inline_edit.tsx

@@ -112,6 +112,10 @@ interface InlineEditFrameProps {
   struck?: boolean;
   /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
   background?: InlineEditBackground;
+  /** Right-aligned rest affordance shown in VIEW mode (e.g. a clock for a time
+   *  field) — a hover-independent cue the field opens a picker. Omit for plain
+   *  text/number inputs (typing IS the affordance). */
+  affordance?: ReactNode;
 }
 
 interface InlineEditViewProps {
@@ -204,6 +208,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     accessibilityLabel,
     struck,
     background,
+    affordance,
   } = props;
 
   if (!editing) {
@@ -216,6 +221,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
         struck={struck}
+        trailing={affordance}
       />
     );
   }

package/src/inline_time_picker.tsx

@@ -1,5 +1,7 @@
 import { useCallback } from "react";
 import type { KeyboardEvent } from "react";
+import { Icon } from "./icon";
+import { colors } from "./colors";
 import { TimePicker } from "./time_picker";
 import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
@@ -53,6 +55,7 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
       error={edit.error}
       disabled={disabled}
       accessibilityLabel={accessibilityLabel}
+      affordance={<Icon name="clock" size={18} color={colors.zinc[400]} />}
     >
       <TimePicker
         value={edit.draft}

package/src/use_section_nav.ts

@@ -31,20 +31,40 @@ export interface SectionNavHandle<K extends string> {
  *
  * Contract: every key's section stays MOUNTED (an unmounted section leaves its
  * last offset registered — conditional sections belong inside an always-mounted
- * wrapper that carries the `onLayout`), and offsets refresh only when a
- * section's own layout changes — react-native-web's `onLayout` won't refire on
- * a pure position shift, so content above the sections should settle before
- * precision matters.
+ * wrapper that carries the `onLayout`). On WEB, `jumpTo` re-measures the live
+ * DOM position, so async content growing ABOVE a section (a photo grid, a
+ * late-loading table) can never stale a jump; the cached offsets only drive
+ * the scroll-spy highlight, which self-corrects as jumps refresh them. On
+ * native there is no re-measure — content above should settle before precision
+ * matters (`onLayout` won't refire on a pure position shift).
  */
 export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): SectionNavHandle<K> {
   const scrollRef = useRef<ScrollView>(null);
   const sectionY = useRef<Partial<Record<K, number>>>({});
+  // The registered wrapper's DOM node (web only) — RN-web's layout event
+  // exposes it as `nativeEvent.target`, which lets jumpTo re-measure live.
+  const sectionEl = useRef<Partial<Record<K, Element>>>({});
   const [activeKey, setActiveKey] = useState<K>(keys[0]);
   const register = (key: K) => (e: LayoutChangeEvent) => {
     sectionY.current[key] = e.nativeEvent.layout.y;
+    const target: unknown = (e.nativeEvent as { target?: unknown }).target;
+    if (typeof Element !== "undefined" && target instanceof Element) sectionEl.current[key] = target;
+  };
+  /** The section's CURRENT content-relative offset — measured live on web
+   *  (immune to async content shifting the page), cached `layout.y` otherwise. */
+  const currentY = (key: K): number => {
+    const el = sectionEl.current[key];
+    const sv = scrollRef.current as (ScrollView & { getScrollableNode?: () => unknown }) | null;
+    const sc = typeof sv?.getScrollableNode === "function" ? sv.getScrollableNode() : null;
+    if (typeof Element !== "undefined" && el instanceof Element && sc instanceof Element) {
+      const y = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop;
+      sectionY.current[key] = y; // refresh the spy's cache while we're here
+      return y;
+    }
+    return sectionY.current[key] ?? 0;
   };
   const jumpTo = (key: K) => {
-    scrollRef.current?.scrollTo({ y: Math.max(0, (sectionY.current[key] ?? 0) - 12), animated: true });
+    scrollRef.current?.scrollTo({ y: Math.max(0, currentY(key) - 12), animated: true });
   };
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     const y = e.nativeEvent.contentOffset.y + 80;