@seed-design/stackflow 1.1.24 → 1.1.26

package/lib/primitive/AppBar/useAppBar.cjs

@@ -13,7 +13,9 @@ function useAppBar(_props) {
 	const [right, rightRef] = (0, react.useState)(null);
 	const leftOffset = require_useElementOffset.useElementOffset(left);
 	const rightOffset = require_useElementOffset.useElementOffset(right);
-	const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` : "initial";
+	const extents = [leftOffset?.fromLeft, rightOffset?.fromRight].filter((extent) => extent !== void 0);
+	const areaExtent = extents.length > 0 ? `${Math.max(...extents)}px` : "initial";
+	const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromParentLeft ?? 0, rightOffset?.fromParentRight ?? 0)}px` : "initial";
 	return (0, react.useMemo)(() => ({
 		refs: {
 			root: rootRef,
@@ -24,9 +26,16 @@ function useAppBar(_props) {
 		rootProps: (0, _seed_design_dom_utils.elementProps)({
 			"data-part": require_anatomy.appBarAnatomy.root,
 			...stateProps,
-			style: { "--centered-title-padding-x": centeredTitlePaddingX }
+			style: {
+				"--app-bar-area-extent": areaExtent,
+				"--centered-title-padding-x": centeredTitlePaddingX
+			}
 		})
-	}), [stateProps, centeredTitlePaddingX]);
+	}), [
+		stateProps,
+		areaExtent,
+		centeredTitlePaddingX
+	]);
 }
 //#endregion
 exports.useAppBar = useAppBar;

package/lib/primitive/AppBar/useAppBar.js

@@ -12,7 +12,9 @@ function useAppBar(_props) {
 	const [right, rightRef] = useState(null);
 	const leftOffset = useElementOffset(left);
 	const rightOffset = useElementOffset(right);
-	const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` : "initial";
+	const extents = [leftOffset?.fromLeft, rightOffset?.fromRight].filter((extent) => extent !== void 0);
+	const areaExtent = extents.length > 0 ? `${Math.max(...extents)}px` : "initial";
+	const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromParentLeft ?? 0, rightOffset?.fromParentRight ?? 0)}px` : "initial";
 	return useMemo(() => ({
 		refs: {
 			root: rootRef,
@@ -23,9 +25,16 @@ function useAppBar(_props) {
 		rootProps: elementProps({
 			"data-part": appBarAnatomy.root,
 			...stateProps,
-			style: { "--centered-title-padding-x": centeredTitlePaddingX }
+			style: {
+				"--app-bar-area-extent": areaExtent,
+				"--centered-title-padding-x": centeredTitlePaddingX
+			}
 		})
-	}), [stateProps, centeredTitlePaddingX]);
+	}), [
+		stateProps,
+		areaExtent,
+		centeredTitlePaddingX
+	]);
 }
 //#endregion
 export { useAppBar };

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -185,11 +185,12 @@ function useGlobalInteraction() {
 		stopRunningAnims,
 		cancelPendingPushRAF
 	]);
+	const topActivityId = stack?.activities.find((activity) => activity.isTop)?.id;
 	(0, react.useLayoutEffect)(() => {
 		if (stack?.globalTransitionState !== "idle") return;
 		const stackEl = stackRef.current;
 		if (stackEl) require_dom.clearTopActivityStyles(stackEl);
-	}, [stack?.globalTransitionState]);
+	}, [stack?.globalTransitionState, topActivityId]);
 	(0, react.useEffect)(() => {
 		return () => {
 			cancelPendingPushRAF();

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -184,11 +184,12 @@ function useGlobalInteraction() {
 		stopRunningAnims,
 		cancelPendingPushRAF
 	]);
+	const topActivityId = stack?.activities.find((activity) => activity.isTop)?.id;
 	useLayoutEffect(() => {
 		if (stack?.globalTransitionState !== "idle") return;
 		const stackEl = stackRef.current;
 		if (stackEl) clearTopActivityStyles(stackEl);
-	}, [stack?.globalTransitionState]);
+	}, [stack?.globalTransitionState, topActivityId]);
 	useEffect(() => {
 		return () => {
 			cancelPendingPushRAF();

package/lib/primitive/private/useElementOffset.cjs

@@ -4,6 +4,18 @@ let react = require("react");
 react = require_runtime.__toESM(react);
 //#region src/primitive/private/useElementOffset.ts
 var useLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function measure(element) {
+	const parent = element.offsetParent ?? document.body;
+	const { paddingLeft, paddingRight } = getComputedStyle(parent);
+	const fromParentLeft = element.offsetLeft + element.offsetWidth;
+	const fromParentRight = parent.clientWidth - element.offsetLeft;
+	return {
+		fromLeft: fromParentLeft - Number.parseFloat(paddingLeft),
+		fromRight: fromParentRight - Number.parseFloat(paddingRight),
+		fromParentLeft,
+		fromParentRight
+	};
+}
 function useElementOffset(element) {
 	const [offset, setOffset] = react.useState(void 0);
 	useLayoutEffect(() => {
@@ -11,20 +23,10 @@ function useElementOffset(element) {
 			setOffset(void 0);
 			return;
 		}
-		if (element) {
-			setOffset({
-				fromLeft: element.offsetLeft + element.offsetWidth,
-				fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-			});
-			const resizeObserver = new ResizeObserver(() => {
-				setOffset({
-					fromLeft: element.offsetLeft + element.offsetWidth,
-					fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-				});
-			});
-			resizeObserver.observe(element);
-			return () => resizeObserver.unobserve(element);
-		}
+		setOffset(measure(element));
+		const resizeObserver = new ResizeObserver(() => setOffset(measure(element)));
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
 	}, [element]);
 	return offset;
 }

package/lib/primitive/private/useElementOffset.d.ts

@@ -1,4 +1,6 @@
 export declare function useElementOffset(element: HTMLElement | null): {
     fromLeft: number;
     fromRight: number;
+    fromParentLeft: number;
+    fromParentRight: number;
 } | undefined;

package/lib/primitive/private/useElementOffset.js

@@ -2,6 +2,18 @@
 import * as React from "react";
 //#region src/primitive/private/useElementOffset.ts
 var useLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function measure(element) {
+	const parent = element.offsetParent ?? document.body;
+	const { paddingLeft, paddingRight } = getComputedStyle(parent);
+	const fromParentLeft = element.offsetLeft + element.offsetWidth;
+	const fromParentRight = parent.clientWidth - element.offsetLeft;
+	return {
+		fromLeft: fromParentLeft - Number.parseFloat(paddingLeft),
+		fromRight: fromParentRight - Number.parseFloat(paddingRight),
+		fromParentLeft,
+		fromParentRight
+	};
+}
 function useElementOffset(element) {
 	const [offset, setOffset] = React.useState(void 0);
 	useLayoutEffect$1(() => {
@@ -9,20 +21,10 @@ function useElementOffset(element) {
 			setOffset(void 0);
 			return;
 		}
-		if (element) {
-			setOffset({
-				fromLeft: element.offsetLeft + element.offsetWidth,
-				fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-			});
-			const resizeObserver = new ResizeObserver(() => {
-				setOffset({
-					fromLeft: element.offsetLeft + element.offsetWidth,
-					fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-				});
-			});
-			resizeObserver.observe(element);
-			return () => resizeObserver.unobserve(element);
-		}
+		setOffset(measure(element));
+		const resizeObserver = new ResizeObserver(() => setOffset(measure(element)));
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
 	}, [element]);
 	return offset;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,7 +36,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.2.16",
+    "@seed-design/css": "1.2.20",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",

package/src/primitive/AppBar/useAppBar.tsx

@@ -18,8 +18,14 @@ export function useAppBar(_props: UseAppBarProps) {
 
   const leftOffset = useElementOffset(left);
   const rightOffset = useElementOffset(right);
+  const extents = [leftOffset?.fromLeft, rightOffset?.fromRight].filter(
+    (extent) => extent !== undefined,
+  );
+  // `initial` leaves the variable unset, which the recipe reads as having no area to clear.
+  const areaExtent = extents.length > 0 ? `${Math.max(...extents)}px` : "initial";
+  // Read by `@seed-design/css` <= 1.2.19 in place of `--app-bar-area-extent`.
   const centeredTitlePaddingX = root
-    ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px`
+    ? `${Math.max(leftOffset?.fromParentLeft ?? 0, rightOffset?.fromParentRight ?? 0)}px`
     : "initial";
 
   return useMemo(
@@ -34,10 +40,11 @@ export function useAppBar(_props: UseAppBarProps) {
         "data-part": appBarAnatomy.root,
         ...stateProps,
         style: {
+          "--app-bar-area-extent": areaExtent,
           "--centered-title-padding-x": centeredTitlePaddingX,
         } as React.CSSProperties,
       }),
     }),
-    [stateProps, centeredTitlePaddingX],
+    [stateProps, areaExtent, centeredTitlePaddingX],
   );
 }

package/src/primitive/GlobalInteraction/useGlobalInteraction.test.tsx

@@ -0,0 +1,159 @@
+import { aggregate, makeEvent, type DomainEvent, type Stack } from "@stackflow/core";
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
+import { appBarAnatomy } from "../AppBar/anatomy";
+import { appScreenAnatomy } from "../AppScreen/anatomy";
+
+// `useGlobalInteraction` (and the `useTopActivity` it calls) only consume
+// `useStack` from @stackflow/react. Mocking just that lets the test feed real
+// Stack snapshots — built by @stackflow/core's own reducer — without pulling in
+// a renderer plugin. Registered before the dynamic import below so the hook
+// picks it up.
+let currentStack: Stack;
+mock.module("@stackflow/react", () => ({ useStack: () => currentStack }));
+
+const { useGlobalInteraction } = await import("./useGlobalInteraction");
+const { findTransitionTargets, setIdlePositions } = await import("./dom");
+
+// happy-dom ships no WAAPI. A `finished` that never settles models an
+// animation that is still in flight, which is all these tests need.
+Element.prototype.animate = (() => ({
+  finished: new Promise<void>(() => {}),
+  cancel() {},
+})) as Element["animate"];
+
+// ─── Real stack snapshots ───────────────────────────────────────────────────
+
+const T0 = 1_000_000;
+const TRANSITION_DURATION = 350;
+
+/** Zero-padded so the reducer's lexicographic sort by id matches insertion order. */
+function evt<T extends DomainEvent["name"]>(
+  seq: number,
+  name: T,
+  params: Omit<Extract<DomainEvent, { name: T }>, "id" | "name" | "eventDate">,
+) {
+  return makeEvent(name, {
+    ...params,
+    id: String(seq).padStart(4, "0"),
+    eventDate: T0 + seq,
+  });
+}
+
+const BASE_EVENTS: DomainEvent[] = [
+  evt(1, "Initialized", { transitionDuration: TRANSITION_DURATION }),
+  evt(2, "ActivityRegistered", { activityName: "Screen" }),
+  evt(3, "Pushed", { activityId: "a1", activityName: "Screen", activityParams: {} }),
+  evt(4, "Pushed", { activityId: "a2", activityName: "Screen", activityParams: {} }),
+];
+
+/** Far enough past every eventDate that both pushes have settled. */
+const SETTLED_AT = T0 + TRANSITION_DURATION * 10;
+
+const POP_SEQ = 5;
+
+function stackAfter(...extraEvents: DomainEvent[]): Stack {
+  return aggregate([...BASE_EVENTS, ...extraEvents], SETTLED_AT);
+}
+
+/** `pop({ animate: false })` — stackflow maps it to `skipExitActiveState`. */
+const POP_WITHOUT_ANIMATION = evt(POP_SEQ, "Popped", { skipExitActiveState: true });
+
+/** A plain animated `pop()`, still mid-flight at `SETTLED_AT`. */
+const POP_WITH_ANIMATION = makeEvent("Popped", {
+  id: String(POP_SEQ).padStart(4, "0"),
+  eventDate: SETTLED_AT,
+});
+
+// ─── Harness ────────────────────────────────────────────────────────────────
+
+function ActivityMarkup({ id, isTop }: { id: string; isTop: boolean }) {
+  return (
+    <section
+      data-part={appScreenAnatomy.activity}
+      data-activity-id={id}
+      data-transition-style="slideFromRightIOS"
+      {...(isTop ? { "data-activity-is-top": "" } : {})}
+    >
+      <div data-part={appScreenAnatomy.layer} data-testid={`${id}-layer`} />
+      <div data-part={appScreenAnatomy.dim} />
+      <div data-part={appBarAnatomy.root}>
+        <div data-part={appBarAnatomy.background} />
+        <div data-part={appBarAnatomy.main} data-testid={`${id}-title`} />
+        <div data-part={appBarAnatomy.icon} data-testid={`${id}-icon`} />
+      </div>
+    </section>
+  );
+}
+
+function Harness() {
+  const { stackRef } = useGlobalInteraction();
+
+  // Mirrors the core's `visibleActivities` filter — exit-done is unmounted.
+  const visible = currentStack.activities.filter((a) => a.transitionState !== "exit-done");
+
+  return (
+    <div ref={stackRef} data-testid="stack">
+      {visible.map((activity) => (
+        <ActivityMarkup key={activity.id} id={activity.id} isTop={activity.isTop} />
+      ))}
+    </div>
+  );
+}
+
+// ─── Tests ──────────────────────────────────────────────────────────────────
+
+describe("useGlobalInteraction — settle safety-net", () => {
+  beforeEach(() => {
+    currentStack = stackAfter();
+  });
+
+  it("leaves the behind layer pinned at its idle offset while a2 is on top", () => {
+    // Premise check: a settled push is idle, with a2 on top.
+    expect(currentStack.globalTransitionState).toBe("idle");
+    expect(currentStack.activities.find((a) => a.isTop)?.id).toBe("a2");
+
+    const { getByTestId, rerender } = render(<Harness />);
+
+    // Exactly what the push's finished handler leaves behind.
+    setIdlePositions(findTransitionTargets(getByTestId("stack")), "slideFromRightIOS");
+    rerender(<Harness />);
+
+    expect(getByTestId("a1-layer").style.transform).toBe("translate3d(-30%, 0, 0)");
+  });
+
+  it("clears the landing activity when pop({ animate: false }) skips exit-active", () => {
+    const { getByTestId, rerender } = render(<Harness />);
+    setIdlePositions(findTransitionTargets(getByTestId("stack")), "slideFromRightIOS");
+
+    currentStack = stackAfter(POP_WITHOUT_ANIMATION);
+
+    // Premise: the transition state machine never moves — a1 just becomes top.
+    expect(currentStack.globalTransitionState).toBe("idle");
+    expect(currentStack.activities.find((a) => a.isTop)?.id).toBe("a1");
+
+    rerender(<Harness />);
+
+    expect(getByTestId("a1-layer").style.transform).toBe("");
+    expect(getByTestId("a1-title").style.transform).toBe("");
+    expect(getByTestId("a1-title").style.opacity).toBe("");
+    expect(getByTestId("a1-icon").style.opacity).toBe("");
+  });
+
+  it("does not touch inline styles while a transition is still in flight", () => {
+    const { getByTestId, rerender } = render(<Harness />);
+    setIdlePositions(findTransitionTargets(getByTestId("stack")), "slideFromRightIOS");
+
+    currentStack = stackAfter(POP_WITH_ANIMATION);
+
+    // Premise: an animated pop parks a2 in exit-active, so the stack is loading.
+    expect(currentStack.globalTransitionState).toBe("loading");
+    expect(currentStack.activities.find((a) => a.id === "a2")?.transitionState).toBe("exit-active");
+
+    rerender(<Harness />);
+
+    // The WAAPI pop animation owns the unwind from here — the safety-net must
+    // stay out of the way until everything settles.
+    expect(getByTestId("a1-layer").style.transform).toBe("translate3d(-30%, 0, 0)");
+  });
+});

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -341,13 +341,22 @@ export function useGlobalInteraction() {
   // top must always be in a clean default state. Wipe all leftover inline
   // styles from the top activity — the behind is left untouched (stays at
   // -30%), this only runs at idle, and it's a no-op if already clean.
+  //
+  // Keyed on the top activity too, not just globalTransitionState: an
+  // `animate: false` navigation makes the core skip the enter-active /
+  // exit-active phase entirely, so globalTransitionState never leaves "idle"
+  // and a state-only dependency would never re-run. That is how a behind
+  // layer became the top while still pinned at -30%.
+  const topActivityId = stack?.activities.find((activity) => activity.isTop)?.id;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: topActivityId is a trigger, not a value read here — clearTopActivityStyles re-queries the DOM
   useLayoutEffect(() => {
     if (stack?.globalTransitionState !== "idle") return;
     const stackEl = stackRef.current;
     if (stackEl) {
       clearTopActivityStyles(stackEl);
     }
-  }, [stack?.globalTransitionState]);
+  }, [stack?.globalTransitionState, topActivityId]);
 
   // Cancel any pending push rAF and running animations on unmount so
   // late-firing finished handlers can't run against a torn-down stack.

package/src/primitive/private/useElementOffset.ts

@@ -2,10 +2,27 @@ import * as React from "react";
 
 const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 
+// `fromLeft`/`fromRight` are measured from the offset parent's content edges: the parent's padding
+// carries the safe-area insets, which can move to the other side (a 180° rotation) without resizing
+// anything, so a value that included the padding would go stale with no resize to trigger a
+// re-measure. The padding-edge pair is what `@seed-design/css` <= 1.2.19 reads, where the parent's
+// padding holds no inset.
+function measure(element: HTMLElement) {
+  const parent = element.offsetParent ?? document.body;
+  const { paddingLeft, paddingRight } = getComputedStyle(parent);
+  const fromParentLeft = element.offsetLeft + element.offsetWidth;
+  const fromParentRight = parent.clientWidth - element.offsetLeft;
+
+  return {
+    fromLeft: fromParentLeft - Number.parseFloat(paddingLeft),
+    fromRight: fromParentRight - Number.parseFloat(paddingRight),
+    fromParentLeft,
+    fromParentRight,
+  };
+}
+
 export function useElementOffset(element: HTMLElement | null) {
-  const [offset, setOffset] = React.useState<{ fromLeft: number; fromRight: number } | undefined>(
-    undefined,
-  );
+  const [offset, setOffset] = React.useState<ReturnType<typeof measure> | undefined>(undefined);
 
   useLayoutEffect(() => {
     if (!element) {
@@ -13,24 +30,13 @@ export function useElementOffset(element: HTMLElement | null) {
       return;
     }
 
-    if (element) {
-      // provide as early as possible
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft,
-      });
-
-      const resizeObserver = new ResizeObserver(() => {
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
+    // provide as early as possible
+    setOffset(measure(element));
 
-        setOffset({ fromLeft, fromRight });
-      });
+    const resizeObserver = new ResizeObserver(() => setOffset(measure(element)));
+    resizeObserver.observe(element);
 
-      resizeObserver.observe(element);
-
-      return () => resizeObserver.unobserve(element);
-    }
+    return () => resizeObserver.disconnect();
   }, [element]);
 
   return offset;