@tangle-network/ui 11.40.1 → 11.40.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.40.2
+
+### Patch Changes
+
+- c22e1b3: PageShell `measure="settings"` re-centres the phone section strip only when the current link changes. Scrolling or tapping an arrow to the first or last section now sticks instead of snapping back to the current link.
+
 ## 11.40.1
 
 ### Patch Changes

package/dist/primitives/page-shell.js

@@ -6,27 +6,44 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Centre the current link of a horizontally scrolling nav, so the links on
 * both sides show that the strip scrolls. It moves the strip, never the page.
+* It centres when the current link changes (or first becomes reachable), never
+* on scroll, arrow taps or re-renders that keep the same current link, so a
+* user who scrolls to the first or last section stays there. Resize and font
+* swaps re-centre only until the user first scrolls the strip.
 */
 function useCurrentLinkInView(ref, enabled) {
 	React.useEffect(() => {
 		const nav = ref.current;
 		if (!enabled || !nav) return;
-		const reveal = () => {
+		let centredKey = null;
+		let userScrolled = false;
+		const reveal = (layoutOnly) => {
 			if (nav.scrollWidth <= nav.clientWidth) return;
 			const current = nav.querySelector("[aria-current=\"page\"]");
 			if (!current) return;
+			const key = current.getAttribute("href") ?? current.textContent ?? "";
+			if (key !== centredKey) userScrolled = false;
+			else if (!layoutOnly || userScrolled) return;
+			centredKey = key;
 			const strip = nav.getBoundingClientRect();
 			const link = current.getBoundingClientRect();
 			nav.scrollLeft += link.left + link.width / 2 - (strip.left + strip.width / 2);
 		};
+		const onUser = () => {
+			userScrolled = true;
+		};
+		nav.addEventListener("pointerdown", onUser, { passive: true });
+		nav.addEventListener("touchstart", onUser, { passive: true });
+		nav.addEventListener("wheel", onUser, { passive: true });
+		nav.addEventListener("keydown", onUser);
 		let live = true;
-		reveal();
+		reveal(false);
 		document.fonts?.ready.then(() => {
-			if (live) reveal();
+			if (live) reveal(true);
 		});
-		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => reveal(true));
 		resize?.observe(nav);
-		const links = new MutationObserver(reveal);
+		const links = new MutationObserver(() => reveal(false));
 		links.observe(nav, {
 			subtree: true,
 			childList: true,
@@ -38,6 +55,10 @@ function useCurrentLinkInView(ref, enabled) {
 			live = false;
 			resize?.disconnect();
 			links.disconnect();
+			nav.removeEventListener("pointerdown", onUser);
+			nav.removeEventListener("touchstart", onUser);
+			nav.removeEventListener("wheel", onUser);
+			nav.removeEventListener("keydown", onUser);
 		};
 	}, [ref, enabled]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.40.1",
+  "version": "11.40.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -165,7 +165,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.26.0",
+    "@tangle-network/brand": "^1.26.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/page-shell.tsx

@@ -30,34 +30,53 @@ export interface PageShellProps {
 /**
  * Centre the current link of a horizontally scrolling nav, so the links on
  * both sides show that the strip scrolls. It moves the strip, never the page.
+ * It centres when the current link changes (or first becomes reachable), never
+ * on scroll, arrow taps or re-renders that keep the same current link, so a
+ * user who scrolls to the first or last section stays there. Resize and font
+ * swaps re-centre only until the user first scrolls the strip.
  */
 function useCurrentLinkInView(ref: React.RefObject<HTMLElement | null>, enabled: boolean) {
   React.useEffect(() => {
     const nav = ref.current;
     if (!enabled || !nav) return;
-    const reveal = () => {
+    let centredKey: string | null = null;
+    let userScrolled = false;
+    const reveal = (layoutOnly: boolean) => {
       if (nav.scrollWidth <= nav.clientWidth) return;
       const current = nav.querySelector<HTMLElement>('[aria-current="page"]');
       if (!current) return;
+      const key = current.getAttribute("href") ?? current.textContent ?? "";
+      if (key !== centredKey) userScrolled = false;
+      else if (!layoutOnly || userScrolled) return;
+      centredKey = key;
       const strip = nav.getBoundingClientRect();
       const link = current.getBoundingClientRect();
       nav.scrollLeft += link.left + link.width / 2 - (strip.left + strip.width / 2);
     };
+    const onUser = () => { userScrolled = true; };
+    nav.addEventListener("pointerdown", onUser, { passive: true });
+    nav.addEventListener("touchstart", onUser, { passive: true });
+    nav.addEventListener("wheel", onUser, { passive: true });
+    nav.addEventListener("keydown", onUser);
     let live = true;
-    reveal();
+    reveal(false);
     // A web font swap widens the tabs without resizing the strip, so the
     // resize observer alone would leave the current tab where it was.
-    void document.fonts?.ready.then(() => { if (live) reveal(); });
-    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+    void document.fonts?.ready.then(() => { if (live) reveal(true); });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => reveal(true));
     resize?.observe(nav);
-    // Links that a caller replaces (sections loaded later, a count that
-    // changes) move the current tab as surely as a new aria-current does.
-    const links = new MutationObserver(reveal);
+    // Links that a caller replaces (sections loaded later, a new aria-current)
+    // can change the current link; the same current link is left where it is.
+    const links = new MutationObserver(() => reveal(false));
     links.observe(nav, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["aria-current"] });
     return () => {
       live = false;
       resize?.disconnect();
       links.disconnect();
+      nav.removeEventListener("pointerdown", onUser);
+      nav.removeEventListener("touchstart", onUser);
+      nav.removeEventListener("wheel", onUser);
+      nav.removeEventListener("keydown", onUser);
     };
   }, [ref, enabled]);
 }