@lotics/ui 24.0.0 → 24.0.2

package/MIGRATION.md

@@ -139,10 +139,10 @@ Porting, by what the slot held:
 
 // AFTER — a value in a row, in whatever section the reference belongs to.
 // It wears the field surface, carries its go-to verb INSIDE, and peeks its
-// facts on press; detach lives in the peek. `tpl_record`'s `ReferenceValue`
-// is the worked composition.
+// facts on press; detach lives in the peek. `ReferenceField` is the kit
+// primitive; `tpl_record` § General is the worked composition.
 <DetailRow label="Customer">
-  <ReferenceValue name={c.name} code={c.code} facts={…} onOpen={open} onRemove={detach} />
+  <ReferenceField name={c.name} code={c.code} facts={…} openLabel={`Open ${c.name}`} onOpen={open} onRemove={detach} />
 </DetailRow>
 ```
 

package/docs/catalog.md

@@ -825,7 +825,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   like the editors above and below it), whose press opens a PEEK of that record's facts.
   `name` + optional `code` + `facts` (label/value pairs) + `onOpen`/`openLabel` and an
   optional `onRemove`. The verbs live INSIDE the peek, never on the field: `Open` goes to
-  the referenced record's own page, `Remove` detaches. The value is a `TextLink` marker
+  the referenced record's own page, `Remove` detaches — both come from the locale pack
+  (`referenceField.open` / `.remove`), while `openLabel` stays a prop because it names the
+  DESTINATION for a screen reader, which only the caller knows. The value is a `TextLink` marker
   (underlined, neutral) because the press opens a summary rather than navigating. A
   reference is a FIELD, not a section — one pointer to one other row never earns a heading
   and a rail entry. Worked example: [`tpl_record`](../examples/tpl_record.tsx) § General
@@ -1051,7 +1053,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   rail item is navigation, never a selected option);
   section wrappers must be DIRECT children of the ScrollView content. The highlight and the
   jump both re-measure the live DOM on web, so content loading in above a section never
-  strands them. On NARROW containers
+  strands them. Reaching the END of the scroll activates the LAST key regardless of offsets —
+  a final section shorter than the viewport never scrolls its top past the trigger line, so
+  without that it could never be the active one. On NARROW containers
   the rail becomes a PINNED bar naming the CURRENT section that opens a full-page
   section-picker `Modal` — never a horizontal tab strip. Worked example:
   [`tpl_record`](../examples/tpl_record.tsx).

package/package.json

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

package/src/locale.tsx

@@ -37,6 +37,11 @@ export interface LoticsLocale {
   pagination: Required<PaginationLabels>;
   /** `SortHeader` a11y prefix + asc/desc suffixes. */
   sortHeader: Required<SortHeaderLabels>;
+  /** `ReferenceField`'s peek footer — the go-to and detach verbs. `openLabel`
+   *  stays a per-instance PROP because it names the DESTINATION ("Open
+   *  customer"), which is a11y text only a caller knows; these two are the
+   *  VISIBLE chrome, which the pack owns. */
+  referenceField: { open: string; remove: string };
   /** `OptionList` (and everything built on it — `Select`, `Combobox`, the
    *  in-cell editors): the select-all/deselect-all links, the empty state, the
    *  internal search-field placeholder, and the `Combobox` recents header. */
@@ -215,6 +220,7 @@ export const en: LoticsLocale = {
     ascending: ", ascending",
     descending: ", descending",
   },
+  referenceField: { open: "Open", remove: "Remove" },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
   datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
@@ -373,6 +379,7 @@ export const vi: LoticsLocale = {
     ascending: " (tăng dần)",
     descending: " (giảm dần)",
   },
+  referenceField: { open: "Mở", remove: "Gỡ" },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
   datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },

package/src/reference_field.tsx

@@ -9,6 +9,7 @@ import { DialogSectionHeadingTitle } from "./section_heading";
 import { Text } from "./text";
 import { TextButton } from "./text_button";
 import { TextLink } from "./text_link";
+import { useLoticsLocale } from "./locale";
 
 /**
  * A REFERENCE to another record, rendered as a FIELD VALUE.
@@ -63,6 +64,9 @@ export interface ReferenceFieldProps {
 
 export function ReferenceField(props: ReferenceFieldProps) {
   const { name, code, facts, accessibilityLabel, onOpen, openLabel, onRemove } = props;
+  // The peek's two verbs are the component's OWN chrome, so they come from the
+  // pack — hardcoding them shipped "Open"/"Remove" into every localized app.
+  const t = useLoticsLocale().referenceField;
   const anchor = useRef<View>(null);
   const [peekOpen, setPeekOpen] = useState(false);
   return (
@@ -159,13 +163,13 @@ export function ReferenceField(props: ReferenceFieldProps) {
               // the quiet/destructive verb at text weight beside a filled primary.
               // No icon: an ✕ beside "Remove" says it twice, and the glyph alone
               // made this read as the popover's dismiss rather than a decision.
-              <TextButton color="danger" onPress={() => { setPeekOpen(false); onRemove(); }}>Remove</TextButton>
+              <TextButton color="danger" onPress={() => { setPeekOpen(false); onRemove(); }}>{t.remove}</TextButton>
             ) : null}
             <View style={{ flex: 1 }} />
             {/* `openLabel` names the DESTINATION ("Open customer"): a page carries
                 four of these peeks, and four buttons announcing a bare "Open"
                 are four controls a screen reader cannot tell apart. */}
-            <Button title="Open" color="secondary" accessibilityLabel={openLabel} onPress={() => { setPeekOpen(false); onOpen(); }} />
+            <Button title={t.open} color="secondary" accessibilityLabel={openLabel} onPress={() => { setPeekOpen(false); onOpen(); }} />
           </View>
         </View>
       </PopoverContent>

package/src/use_section_nav.ts

@@ -14,6 +14,14 @@ export interface SectionNavHandle<K extends string> {
   onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
 }
 
+/**
+ * How close to the content's end still counts as "at the end". Fractional
+ * scroll offsets (zoom, hi-dpi, momentum) land a pixel or two short of the
+ * exact bottom, and a strict equality would drop the rule on the frame that
+ * matters most — the one the reader stops on.
+ */
+const END_SLACK = 2;
+
 /**
  * Scroll-spy for a LONG record surface with a left outline rail: one scrolling
  * page whose sections register their offsets, a rail of `MenuButton`s that
@@ -39,6 +47,10 @@ export interface SectionNavHandle<K extends string> {
  * grid, a late-loading table) can never stale either. On native there is no
  * re-measure — content above should settle before precision matters
  * (`onLayout` won't refire on a pure position shift).
+ *
+ * The LAST key is active whenever the scroll reaches the end, regardless of
+ * offsets: a final section shorter than the viewport never scrolls its top past
+ * the trigger line, so without that rule the rail can never point at it.
  */
 export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): SectionNavHandle<K> {
   const scrollRef = useRef<ScrollView>(null);
@@ -93,13 +105,31 @@ export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): Sec
     scrollRef.current?.scrollTo({ y: Math.max(0, y - 12), animated: true });
   };
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const y = e.nativeEvent.contentOffset.y + 80;
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+    const y = contentOffset.y + 80;
     const offsets = measure();
     let cur: K = keys[0];
     for (const k of keys) {
       const sy = offsets[k];
       if (sy != null && sy <= y) cur = k;
     }
+    // THE LAST SECTION IS OTHERWISE UNREACHABLE. A section opening within one
+    // viewport of the content's end can never scroll its top past the trigger
+    // line: at maximum scroll `y` is `contentHeight - viewportHeight + 80`,
+    // which is still ABOVE it, so the rule above pins the rail to the section
+    // before it and the reader watches the wrong item stay lit while they read.
+    // A trailing spacer would "fix" it by making every record end in blank
+    // space, which is paying in layout for an arithmetic problem.
+    //
+    // At the end of the scroll there is nothing left to disambiguate — the
+    // reader is as deep into the last section as the page permits — so the end
+    // of the scroll IS the last section. Guarded on both measurements being
+    // present: RN gives them on every scroll event, but a caller synthesising
+    // one cannot be assumed to, and without them "at the end" is unknowable.
+    if (layoutMeasurement != null && contentSize != null) {
+      const remaining = contentSize.height - (contentOffset.y + layoutMeasurement.height);
+      if (remaining <= END_SLACK) cur = keys[keys.length - 1];
+    }
     if (cur !== activeKey) setActiveKey(cur);
   };
   return { scrollRef, activeKey, register, jumpTo, onScroll };