@seed-design/stackflow 1.1.23 → 2.0.0

package/lib/components/AppBar/AppBar.d.ts

@@ -9,10 +9,6 @@ export declare const AppBarPropsProvider: ({ children, value }: {
     value: Partial< AppBarVariant>;
 }) => import("react/jsx-runtime").JSX.Element;
 export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps, BoxBackgroundProps {
-    /**
-     * @deprecated SEED React 1.3에서 제거될 예정인 옵션입니다. 옵션 제거 이후에는 AppBar 하단 구분선이 표시되지 않습니다.
-     */
-    divider?: AppBarVariantProps["divider"];
 }
 export declare const AppBarRoot: ForwardRefExoticComponent<AppBarProps & RefAttributes<HTMLDivElement>>;
 export interface AppBarLeftProps extends AppBarPrimitive.LeftProps {

package/lib/primitive/AppScreen/AppScreen.cjs

@@ -6,6 +6,7 @@ let _seed_design_dom_utils = require("@seed-design/dom-utils");
 let _seed_design_react_primitive = require("@seed-design/react-primitive");
 let react = require("react");
 let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_focus_scope = require("@radix-ui/react-focus-scope");
 let _stackflow_react_ui_core = require("@stackflow/react-ui-core");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitive/AppScreen/AppScreen.tsx
@@ -20,12 +21,21 @@ var AppScreenRoot = (0, react.forwardRef)((props, ref) => {
 		onSwipeBackStart
 	});
 	(0, _stackflow_react_ui_core.usePreventTouchDuringTransition)({ ref: innerRef });
+	(0, react.useEffect)(() => {
+		if (api.activity?.transitionState === "enter-done") api.layerRef.current?.focus();
+	}, [api.activity?.transitionState, api.layerRef]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useAppScreenContext.AppScreenProvider, {
 		value: api,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
-			ref: (0, _radix_ui_react_compose_refs.composeRefs)(innerRef, ref),
-			"data-stackflow-component-name": "AppScreen",
-			...(0, _seed_design_dom_utils.mergeProps)(api.activityProps, otherProps)
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_focus_scope.FocusScope, {
+			asChild: true,
+			trapped: true,
+			loop: true,
+			onMountAutoFocus: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+				ref: (0, _radix_ui_react_compose_refs.composeRefs)(innerRef, ref),
+				"data-stackflow-component-name": "AppScreen",
+				...(0, _seed_design_dom_utils.mergeProps)(api.activityProps, otherProps)
+			})
 		})
 	});
 });
@@ -47,9 +57,10 @@ var AppScreenEdge = (0, react.forwardRef)((props, ref) => {
 });
 AppScreenEdge.displayName = "AppScreenEdge";
 var AppScreenLayer = (0, react.forwardRef)((props, ref) => {
-	const { layerProps } = require_useAppScreenContext.useAppScreenContext();
+	const { layerProps, layerRef } = require_useAppScreenContext.useAppScreenContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
-		ref,
+		ref: (0, _radix_ui_react_compose_refs.composeRefs)(ref, layerRef),
+		tabIndex: -1,
 		...(0, _seed_design_dom_utils.mergeProps)(layerProps, props)
 	});
 });

package/lib/primitive/AppScreen/AppScreen.js

@@ -3,8 +3,9 @@ import { useAppScreen } from "./useAppScreen.js";
 import { AppScreenProvider, useAppScreenContext } from "./useAppScreenContext.js";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive } from "@seed-design/react-primitive";
-import { forwardRef, useRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
+import { FocusScope } from "@radix-ui/react-focus-scope";
 import { usePreventTouchDuringTransition } from "@stackflow/react-ui-core";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitive/AppScreen/AppScreen.tsx
@@ -19,12 +20,21 @@ var AppScreenRoot = forwardRef((props, ref) => {
 		onSwipeBackStart
 	});
 	usePreventTouchDuringTransition({ ref: innerRef });
+	useEffect(() => {
+		if (api.activity?.transitionState === "enter-done") api.layerRef.current?.focus();
+	}, [api.activity?.transitionState, api.layerRef]);
 	return /* @__PURE__ */ jsx(AppScreenProvider, {
 		value: api,
-		children: /* @__PURE__ */ jsx(Primitive.div, {
-			ref: composeRefs(innerRef, ref),
-			"data-stackflow-component-name": "AppScreen",
-			...mergeProps(api.activityProps, otherProps)
+		children: /* @__PURE__ */ jsx(FocusScope, {
+			asChild: true,
+			trapped: true,
+			loop: true,
+			onMountAutoFocus: (e) => e.preventDefault(),
+			children: /* @__PURE__ */ jsx(Primitive.div, {
+				ref: composeRefs(innerRef, ref),
+				"data-stackflow-component-name": "AppScreen",
+				...mergeProps(api.activityProps, otherProps)
+			})
 		})
 	});
 });
@@ -46,9 +56,10 @@ var AppScreenEdge = forwardRef((props, ref) => {
 });
 AppScreenEdge.displayName = "AppScreenEdge";
 var AppScreenLayer = forwardRef((props, ref) => {
-	const { layerProps } = useAppScreenContext();
+	const { layerProps, layerRef } = useAppScreenContext();
 	return /* @__PURE__ */ jsx(Primitive.div, {
-		ref,
+		ref: composeRefs(ref, layerRef),
+		tabIndex: -1,
 		...mergeProps(layerProps, props)
 	});
 });

package/lib/primitive/AppScreen/useAppScreen.cjs

@@ -9,6 +9,7 @@ let _stackflow_react_ui_core = require("@stackflow/react-ui-core");
 //#region src/primitive/AppScreen/useAppScreen.tsx
 function useAppScreen(props) {
 	const activity = (0, _stackflow_react_ui_core.useNullableActivity)();
+	const layerRef = (0, react.useRef)(null);
 	const transitionState = activity?.transitionState ?? "enter-done";
 	const { activityProps, layerProps, edgeProps } = require_useSwipeBack.useSwipeBack(props);
 	const zIndexBase = require_useActivityZIndexBase.useActivityZIndexBase();
@@ -24,6 +25,7 @@ function useAppScreen(props) {
 	]);
 	return (0, react.useMemo)(() => ({
 		activity,
+		layerRef,
 		stateProps,
 		activityProps: (0, _seed_design_dom_utils.elementProps)({
 			"data-part": require_anatomy.appScreenAnatomy.activity,

package/lib/primitive/AppScreen/useAppScreen.d.ts

@@ -1,11 +1,12 @@
 import { UseSwipeBackProps } from '../GlobalInteraction/useSwipeBack';
 import { Activity } from '@stackflow/core';
-import { HTMLAttributes, CSSProperties, AriaRole, ReactNode, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler } from 'react';
+import { RefObject, HTMLAttributes, CSSProperties, AriaRole, ReactNode, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, InputEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, ToggleEventHandler, TransitionEventHandler } from 'react';
 export interface UseAppScreenProps extends UseSwipeBackProps {
 }
 export type UseAppScreenReturn = ReturnType<typeof useAppScreen>;
 export declare function useAppScreen(props: UseAppScreenProps): {
     activity: Activity | null;
+    layerRef: RefObject<HTMLDivElement | null>;
     stateProps: HTMLAttributes<HTMLElement>;
     activityProps: {
         slot?: string | undefined | undefined;

package/lib/primitive/AppScreen/useAppScreen.js

@@ -3,11 +3,12 @@ import { useSwipeBack } from "../GlobalInteraction/useSwipeBack.js";
 import { useActivityZIndexBase } from "../../hooks/useActivityZIndexBase.js";
 import { appScreenAnatomy } from "./anatomy.js";
 import { dataAttr, elementProps } from "@seed-design/dom-utils";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { useNullableActivity } from "@stackflow/react-ui-core";
 //#region src/primitive/AppScreen/useAppScreen.tsx
 function useAppScreen(props) {
 	const activity = useNullableActivity();
+	const layerRef = useRef(null);
 	const transitionState = activity?.transitionState ?? "enter-done";
 	const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
 	const zIndexBase = useActivityZIndexBase();
@@ -23,6 +24,7 @@ function useAppScreen(props) {
 	]);
 	return useMemo(() => ({
 		activity,
+		layerRef,
 		stateProps,
 		activityProps: elementProps({
 			"data-part": appScreenAnatomy.activity,

package/lib/primitive/GlobalInteraction/dom.cjs

@@ -82,6 +82,34 @@ function clearAllStyles(t) {
 	for (const el of all) clearStyles(el);
 }
 /**
+* Remove all leftover inline styles from the top activity once the
+* transition has settled (globalTransitionState === "idle").
+*
+* The top + behind pair model only handles the single immediately adjacent
+* behind layer. When transitions overlap (concurrent pop, swipe-back race,
+* etc.) the landing screen can get stuck with the temporary styles of a
+* "behind" or an "exiting top" — the layer stays at -30% and shifts by 1/3,
+* or the appBar root stays at opacity 0 (setPostExitPositions) and the whole
+* app bar disappears.
+*
+* At idle the top must always be in a clean default state (setIdlePositions
+* only clears the top and styles the behind), so wipe any leftover inline
+* back to the CSS defaults (layer 0%, appBar visible). The behind is left
+* untouched, and it's a no-op if already clean.
+*/
+function clearTopActivityStyles(stackEl) {
+	const t = findTransitionTargets(stackEl);
+	const topParts = [
+		t.topLayer,
+		t.topDim,
+		t.topTitle,
+		t.topAppBarRoot,
+		t.topAppBarBackground,
+		...t.topIcons
+	];
+	for (const el of topParts) clearStyles(el);
+}
+/**
 * Set idle positions after push completes.
 * Pattern: clear everything first, then set only non-default positions.
 */
@@ -139,6 +167,7 @@ function applySwipeStyles(t, displacement, ratio) {
 //#endregion
 exports.applySwipeStyles = applySwipeStyles;
 exports.clearAllStyles = clearAllStyles;
+exports.clearTopActivityStyles = clearTopActivityStyles;
 exports.findTransitionTargets = findTransitionTargets;
 exports.readTransitionStyle = readTransitionStyle;
 exports.setIdlePositions = setIdlePositions;

package/lib/primitive/GlobalInteraction/dom.d.ts

@@ -30,6 +30,23 @@ export declare function setOpacity(el: HTMLElement | null, value: string): void;
  * This is the foundation — call before setting any specific positions.
  */
 export declare function clearAllStyles(t: TransitionTargets): void;
+/**
+ * Remove all leftover inline styles from the top activity once the
+ * transition has settled (globalTransitionState === "idle").
+ *
+ * The top + behind pair model only handles the single immediately adjacent
+ * behind layer. When transitions overlap (concurrent pop, swipe-back race,
+ * etc.) the landing screen can get stuck with the temporary styles of a
+ * "behind" or an "exiting top" — the layer stays at -30% and shifts by 1/3,
+ * or the appBar root stays at opacity 0 (setPostExitPositions) and the whole
+ * app bar disappears.
+ *
+ * At idle the top must always be in a clean default state (setIdlePositions
+ * only clears the top and styles the behind), so wipe any leftover inline
+ * back to the CSS defaults (layer 0%, appBar visible). The behind is left
+ * untouched, and it's a no-op if already clean.
+ */
+export declare function clearTopActivityStyles(stackEl: HTMLElement): void;
 /**
  * Set idle positions after push completes.
  * Pattern: clear everything first, then set only non-default positions.

package/lib/primitive/GlobalInteraction/dom.js

@@ -82,6 +82,34 @@ function clearAllStyles(t) {
 	for (const el of all) clearStyles(el);
 }
 /**
+* Remove all leftover inline styles from the top activity once the
+* transition has settled (globalTransitionState === "idle").
+*
+* The top + behind pair model only handles the single immediately adjacent
+* behind layer. When transitions overlap (concurrent pop, swipe-back race,
+* etc.) the landing screen can get stuck with the temporary styles of a
+* "behind" or an "exiting top" — the layer stays at -30% and shifts by 1/3,
+* or the appBar root stays at opacity 0 (setPostExitPositions) and the whole
+* app bar disappears.
+*
+* At idle the top must always be in a clean default state (setIdlePositions
+* only clears the top and styles the behind), so wipe any leftover inline
+* back to the CSS defaults (layer 0%, appBar visible). The behind is left
+* untouched, and it's a no-op if already clean.
+*/
+function clearTopActivityStyles(stackEl) {
+	const t = findTransitionTargets(stackEl);
+	const topParts = [
+		t.topLayer,
+		t.topDim,
+		t.topTitle,
+		t.topAppBarRoot,
+		t.topAppBarBackground,
+		...t.topIcons
+	];
+	for (const el of topParts) clearStyles(el);
+}
+/**
 * Set idle positions after push completes.
 * Pattern: clear everything first, then set only non-default positions.
 */
@@ -137,4 +165,4 @@ function applySwipeStyles(t, displacement, ratio) {
 	for (const icon of t.behindIcons) setOpacity(icon, `${ratio}`);
 }
 //#endregion
-export { applySwipeStyles, clearAllStyles, findTransitionTargets, readTransitionStyle, setIdlePositions, setOpacity, setPostExitPositions, setTransform };
+export { applySwipeStyles, clearAllStyles, clearTopActivityStyles, findTransitionTargets, readTransitionStyle, setIdlePositions, setOpacity, setPostExitPositions, setTransform };

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -4,6 +4,7 @@ const require_useTopActivity = require("../private/useTopActivity.cjs");
 const require_dom = require("./dom.cjs");
 const require_animation = require("./animation.cjs");
 let react = require("react");
+let _stackflow_react = require("@stackflow/react");
 //#region src/primitive/GlobalInteraction/useGlobalInteraction.ts
 var IDLE_CONTEXT = Object.freeze({
 	x0: 0,
@@ -135,6 +136,7 @@ function useGlobalInteraction() {
 		setSwipeBackState
 	]);
 	const topActivity = require_useTopActivity.useTopActivity();
+	const stack = (0, _stackflow_react.useStack)();
 	const prevTransitionStateRef = (0, react.useRef)(topActivity.transitionState);
 	(0, react.useLayoutEffect)(() => {
 		const prev = prevTransitionStateRef.current;
@@ -183,6 +185,11 @@ function useGlobalInteraction() {
 		stopRunningAnims,
 		cancelPendingPushRAF
 	]);
+	(0, react.useLayoutEffect)(() => {
+		if (stack?.globalTransitionState !== "idle") return;
+		const stackEl = stackRef.current;
+		if (stackEl) require_dom.clearTopActivityStyles(stackEl);
+	}, [stack?.globalTransitionState]);
 	(0, react.useEffect)(() => {
 		return () => {
 			cancelPendingPushRAF();

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -1,8 +1,9 @@
 "use client";
 import { useTopActivity } from "../private/useTopActivity.js";
-import { applySwipeStyles, clearAllStyles, findTransitionTargets, readTransitionStyle, setIdlePositions, setPostExitPositions } from "./dom.js";
+import { applySwipeStyles, clearAllStyles, clearTopActivityStyles, findTransitionTargets, readTransitionStyle, setIdlePositions, setPostExitPositions } from "./dom.js";
 import { animateSwipeCancel, animateSwipeComplete, animateTransition, cancelAll, scrubAppBarBackground } from "./animation.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useStack } from "@stackflow/react";
 //#region src/primitive/GlobalInteraction/useGlobalInteraction.ts
 var IDLE_CONTEXT = Object.freeze({
 	x0: 0,
@@ -134,6 +135,7 @@ function useGlobalInteraction() {
 		setSwipeBackState
 	]);
 	const topActivity = useTopActivity();
+	const stack = useStack();
 	const prevTransitionStateRef = useRef(topActivity.transitionState);
 	useLayoutEffect(() => {
 		const prev = prevTransitionStateRef.current;
@@ -182,6 +184,11 @@ function useGlobalInteraction() {
 		stopRunningAnims,
 		cancelPendingPushRAF
 	]);
+	useLayoutEffect(() => {
+		if (stack?.globalTransitionState !== "idle") return;
+		const stackEl = stackRef.current;
+		if (stackEl) clearTopActivityStyles(stackEl);
+	}, [stack?.globalTransitionState]);
 	useEffect(() => {
 		return () => {
 			cancelPendingPushRAF();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.23",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -28,15 +28,16 @@
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-focus-scope": "^1.1.4",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
-    "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-primitive": "1.0.0",
+    "@seed-design/dom-utils": "^2.0.0",
+    "@seed-design/react-primitive": "^2.0.0",
     "@stackflow/react-ui-core": "^1.3.3",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.2.13",
+    "@seed-design/css": "2.0.0",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",
@@ -49,7 +50,7 @@
     "vite-plugin-dts": "^5.0.0"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.1.25 <1.2.0 || >=1.2.11",
+    "@seed-design/css": "^2.0.0",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "react": ">=18.0.0",

package/src/components/AppBar/AppBar.tsx

@@ -26,12 +26,7 @@ export const AppBarPropsProvider = PropsProvider;
 export interface AppBarProps
   extends AppBarVariantProps,
     AppBarPrimitive.RootProps,
-    BoxBackgroundProps {
-  /**
-   * @deprecated SEED React 1.3에서 제거될 예정인 옵션입니다. 옵션 제거 이후에는 AppBar 하단 구분선이 표시되지 않습니다.
-   */
-  divider?: AppBarVariantProps["divider"];
-}
+    BoxBackgroundProps {}
 
 export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
   const { style: boxStyle, restProps: propsWithoutBoxProps } = useBoxBackgroundProps(props);

package/src/primitive/AppScreen/AppScreen.tsx

@@ -1,8 +1,9 @@
 import { composeRefs } from "@radix-ui/react-compose-refs";
+import { FocusScope } from "@radix-ui/react-focus-scope";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { usePreventTouchDuringTransition } from "@stackflow/react-ui-core";
-import { forwardRef, useRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { useAppScreen, type UseAppScreenProps } from "./useAppScreen";
 import { AppScreenProvider, useAppScreenContext } from "./useAppScreenContext";
 
@@ -32,13 +33,29 @@ export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((pro
     ref: innerRef as React.RefObject<HTMLDivElement>,
   });
 
+  // Focus the layer once after the enter animation completes.
+  // onMountAutoFocus fires during enter-active and interrupts the CSS animation, so we
+  // defer until transitionState reaches "enter-done". This only happens once per activity
+  // lifecycle — subsequent isTop changes (e.g. upper activity pop) don't change
+  // transitionState, so the effect won't re-fire.
+  useEffect(() => {
+    if (api.activity?.transitionState === "enter-done") {
+      api.layerRef.current?.focus();
+    }
+  }, [api.activity?.transitionState, api.layerRef]);
+
   return (
     <AppScreenProvider value={api}>
-      <Primitive.div
-        ref={composeRefs(innerRef, ref)}
-        data-stackflow-component-name="AppScreen"
-        {...mergeProps(api.activityProps, otherProps)}
-      />
+      {/* onMountAutoFocus is prevented because it fires during enter-active and
+          interrupts the CSS animation. Focus is handled by the useEffect above instead,
+          which defers until transitionState reaches "enter-done". */}
+      <FocusScope asChild trapped loop onMountAutoFocus={(e) => e.preventDefault()}>
+        <Primitive.div
+          ref={composeRefs(innerRef, ref)}
+          data-stackflow-component-name="AppScreen"
+          {...mergeProps(api.activityProps, otherProps)}
+        />
+      </FocusScope>
     </AppScreenProvider>
   );
 });
@@ -65,8 +82,14 @@ AppScreenEdge.displayName = "AppScreenEdge";
 export interface AppScreenLayerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
 export const AppScreenLayer = forwardRef<HTMLDivElement, AppScreenLayerProps>((props, ref) => {
-  const { layerProps } = useAppScreenContext();
+  const { layerProps, layerRef } = useAppScreenContext();
 
-  return <Primitive.div ref={ref} {...mergeProps(layerProps, props)} />;
+  return (
+    <Primitive.div
+      ref={composeRefs(ref, layerRef)}
+      tabIndex={-1}
+      {...mergeProps(layerProps, props)}
+    />
+  );
 });
 AppScreenLayer.displayName = "AppScreenLayer";

package/src/primitive/AppScreen/useAppScreen.tsx

@@ -1,6 +1,6 @@
 import { dataAttr, elementProps } from "@seed-design/dom-utils";
 import { useNullableActivity } from "@stackflow/react-ui-core";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { type UseSwipeBackProps, useSwipeBack } from "../GlobalInteraction/useSwipeBack";
 import { useActivityZIndexBase } from "../../hooks";
 import { appScreenAnatomy } from "./anatomy";
@@ -11,6 +11,7 @@ export type UseAppScreenReturn = ReturnType<typeof useAppScreen>;
 
 export function useAppScreen(props: UseAppScreenProps) {
   const activity = useNullableActivity();
+  const layerRef = useRef<HTMLDivElement>(null);
 
   const transitionState = activity?.transitionState ?? "enter-done";
 
@@ -37,6 +38,7 @@ export function useAppScreen(props: UseAppScreenProps) {
   return useMemo(
     () => ({
       activity,
+      layerRef,
       stateProps,
       activityProps: elementProps({
         "data-part": appScreenAnatomy.activity,

package/src/primitive/GlobalInteraction/animation.ts

@@ -138,10 +138,13 @@ function collectAnimations(anims: (Animation | null)[], durationMs: number): Ani
 
 // ─── iOS Slide ──────────────────────────────────────────────────────────────
 
-interface TitleKeyframe {
+// Intersect with the DOM `Keyframe` so values of this type satisfy the
+// `[property: string]` index signature `el.animate()` expects, while still
+// guaranteeing `opacity` and `transform` are present.
+type TitleKeyframe = Keyframe & {
   opacity: string;
   transform: string;
-}
+};
 
 interface IosPositions {
   topLayer: string;

package/src/primitive/GlobalInteraction/dom.ts

@@ -127,6 +127,35 @@ export function clearAllStyles(t: TransitionTargets) {
   for (const el of all) clearStyles(el);
 }
 
+/**
+ * Remove all leftover inline styles from the top activity once the
+ * transition has settled (globalTransitionState === "idle").
+ *
+ * The top + behind pair model only handles the single immediately adjacent
+ * behind layer. When transitions overlap (concurrent pop, swipe-back race,
+ * etc.) the landing screen can get stuck with the temporary styles of a
+ * "behind" or an "exiting top" — the layer stays at -30% and shifts by 1/3,
+ * or the appBar root stays at opacity 0 (setPostExitPositions) and the whole
+ * app bar disappears.
+ *
+ * At idle the top must always be in a clean default state (setIdlePositions
+ * only clears the top and styles the behind), so wipe any leftover inline
+ * back to the CSS defaults (layer 0%, appBar visible). The behind is left
+ * untouched, and it's a no-op if already clean.
+ */
+export function clearTopActivityStyles(stackEl: HTMLElement) {
+  const t = findTransitionTargets(stackEl);
+  const topParts = [
+    t.topLayer,
+    t.topDim,
+    t.topTitle,
+    t.topAppBarRoot,
+    t.topAppBarBackground,
+    ...t.topIcons,
+  ];
+  for (const el of topParts) clearStyles(el);
+}
+
 /**
  * Set idle positions after push completes.
  * Pattern: clear everything first, then set only non-default positions.

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -1,3 +1,4 @@
+import { useStack } from "@stackflow/react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { useTopActivity } from "../private/useTopActivity";
 import {
@@ -7,6 +8,7 @@ import {
   readTransitionStyle,
   applySwipeStyles,
   clearAllStyles,
+  clearTopActivityStyles,
   setIdlePositions,
   setPostExitPositions,
 } from "./dom";
@@ -257,6 +259,7 @@ export function useGlobalInteraction() {
   }, [stopRunningAnims, stopAppBarBgScrub, setSwipeBackState]);
 
   const topActivity = useTopActivity();
+  const stack = useStack();
 
   // ── WAAPI push/pop transitions triggered by stackflow state changes ──
   const prevTransitionStateRef = useRef<string>(topActivity.transitionState);
@@ -326,6 +329,26 @@ export function useGlobalInteraction() {
     }
   }, [topActivity.transitionState, stopRunningAnims, cancelPendingPushRAF]);
 
+  // ── Settle safety-net ──
+  // The top + behind pair model only handles the single immediately adjacent
+  // behind layer. When transitions overlap (concurrent pop, swipe-back race,
+  // etc.) and end on a path the pair model didn't unwind, the landing screen
+  // can get stuck with temporary styles — the layer stays at -30% and shifts
+  // by 1/3, or the appBar root stays at opacity 0 (setPostExitPositions) and
+  // the whole app bar disappears.
+  //
+  // Guarantee: once everything settles (globalTransitionState === "idle") the
+  // 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.
+  useLayoutEffect(() => {
+    if (stack?.globalTransitionState !== "idle") return;
+    const stackEl = stackRef.current;
+    if (stackEl) {
+      clearTopActivityStyles(stackEl);
+    }
+  }, [stack?.globalTransitionState]);
+
   // Cancel any pending push rAF and running animations on unmount so
   // late-firing finished handlers can't run against a torn-down stack.
   useEffect(() => {