@lotics/ui 11.0.0 → 11.1.0

package/package.json

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

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;