@seed-design/stackflow 0.0.0-alpha-20260504105015 → 0.0.0-alpha-20260622094810

package/lib/components/AppBar/AppBar.cjs

@@ -1,5 +1,6 @@
 "use client";
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_anatomy = require("../../primitive/AppBar/anatomy.cjs");
 const require_useAppBarContext = require("../../primitive/AppBar/useAppBarContext.cjs");
 const require_AppBar = require("../../primitive/AppBar/AppBar.cjs");
 const require_useTopActivity = require("../../primitive/private/useTopActivity.cjs");
@@ -32,16 +33,22 @@ var AppBarRoot = (0, react.forwardRef)((props, ref) => {
 		...(0, _stackflow_react.useActivity)().isTop === false && { transitionStyle: topActivityTransitionStyle }
 	};
 	const classNames = (0, _seed_design_css_recipes_app_bar.appBar)(resolvedVariantProps);
+	const { children, ...restProps } = otherProps;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassNamesProvider, {
 		value: classNames,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MainPropsProvider, {
 			value: resolvedVariantProps,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppBar.AppBarRoot, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AppBar.AppBarRoot, {
 				ref,
 				...(0, _seed_design_dom_utils.mergeProps)({
 					className: classNames.root,
 					style: boxStyle
-				}, otherProps)
+				}, restProps),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-hidden": true,
+					"data-part": require_anatomy.appBarAnatomy.background,
+					className: classNames.background
+				}), children]
 			})
 		})
 	});
@@ -62,6 +69,7 @@ var AppBarIconButton = (0, react.forwardRef)(({ children, className, ...otherPro
 		...(0, _seed_design_dom_utils.mergeProps)(stateProps, otherProps),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
 			className: classNames.icon,
+			"data-part": require_anatomy.appBarAnatomy.icon,
 			...stateProps,
 			children
 		})
@@ -73,6 +81,7 @@ var AppBarSlot = (0, react.forwardRef)(({ children, className, ...otherProps },
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
 		ref,
 		className: (0, clsx.default)(useClassNames().custom, className),
+		"data-part": require_anatomy.appBarAnatomy.custom,
 		...(0, _seed_design_dom_utils.mergeProps)(stateProps, otherProps),
 		children
 	});

package/lib/components/AppBar/AppBar.js

@@ -1,4 +1,5 @@
 "use client";
+import { appBarAnatomy } from "../../primitive/AppBar/anatomy.js";
 import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext.js";
 import { AppBarLeft as AppBarLeft$1, AppBarMain as AppBarMain$1, AppBarRight as AppBarRight$1, AppBarRoot as AppBarRoot$1 } from "../../primitive/AppBar/AppBar.js";
 import { useTopActivity } from "../../primitive/private/useTopActivity.js";
@@ -11,7 +12,7 @@ import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useActivity } from "@stackflow/react";
 //#region src/components/AppBar/AppBar.tsx
 var { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext(appBar);
@@ -30,16 +31,22 @@ var AppBarRoot = forwardRef((props, ref) => {
 		...useActivity().isTop === false && { transitionStyle: topActivityTransitionStyle }
 	};
 	const classNames = appBar(resolvedVariantProps);
+	const { children, ...restProps } = otherProps;
 	return /* @__PURE__ */ jsx(ClassNamesProvider, {
 		value: classNames,
 		children: /* @__PURE__ */ jsx(MainPropsProvider, {
 			value: resolvedVariantProps,
-			children: /* @__PURE__ */ jsx(AppBarRoot$1, {
+			children: /* @__PURE__ */ jsxs(AppBarRoot$1, {
 				ref,
 				...mergeProps({
 					className: classNames.root,
 					style: boxStyle
-				}, otherProps)
+				}, restProps),
+				children: [/* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					"data-part": appBarAnatomy.background,
+					className: classNames.background
+				}), children]
 			})
 		})
 	});
@@ -60,6 +67,7 @@ var AppBarIconButton = forwardRef(({ children, className, ...otherProps }, ref)
 		...mergeProps(stateProps, otherProps),
 		children: /* @__PURE__ */ jsx(Slot, {
 			className: classNames.icon,
+			"data-part": appBarAnatomy.icon,
 			...stateProps,
 			children
 		})
@@ -71,6 +79,7 @@ var AppBarSlot = forwardRef(({ children, className, ...otherProps }, ref) => {
 	return /* @__PURE__ */ jsx(Slot, {
 		ref,
 		className: clsx(useClassNames().custom, className),
+		"data-part": appBarAnatomy.custom,
 		...mergeProps(stateProps, otherProps),
 		children
 	});

package/lib/primitive/AppBar/AppBar.cjs

@@ -1,5 +1,6 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
+const require_anatomy = require("./anatomy.cjs");
 const require_useAppBar = require("./useAppBar.cjs");
 const require_useAppBarContext = require("./useAppBarContext.cjs");
 let _seed_design_dom_utils = require("@seed-design/dom-utils");
@@ -40,6 +41,7 @@ var AppBarMain = (0, react.forwardRef)((props, ref) => {
 	const { stateProps } = require_useAppBarContext.useAppBarContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
 		ref,
+		"data-part": require_anatomy.appBarAnatomy.main,
 		...(0, _seed_design_dom_utils.mergeProps)(stateProps, props)
 	});
 });

package/lib/primitive/AppBar/AppBar.js

@@ -1,4 +1,5 @@
 "use client";
+import { appBarAnatomy } from "./anatomy.js";
 import { useAppBar } from "./useAppBar.js";
 import { AppBarProvider, useAppBarContext } from "./useAppBarContext.js";
 import { mergeProps } from "@seed-design/dom-utils";
@@ -39,6 +40,7 @@ var AppBarMain = forwardRef((props, ref) => {
 	const { stateProps } = useAppBarContext();
 	return /* @__PURE__ */ jsx(Primitive.div, {
 		ref,
+		"data-part": appBarAnatomy.main,
 		...mergeProps(stateProps, props)
 	});
 });

package/lib/primitive/AppBar/anatomy.cjs

@@ -0,0 +1,18 @@
+"use client";
+//#region src/primitive/AppBar/anatomy.ts
+/**
+* Parts of the AppBar anatomy.
+*
+* Each value is the literal `data-part` attribute placed on the rendered DOM.
+* Consumers in the styled layer and in GlobalInteraction/dom.ts import from
+* here to keep markup and DOM queries in sync.
+*/
+var appBarAnatomy = {
+	root: "appBar",
+	background: "appBarBackground",
+	main: "appBarMain",
+	icon: "appBarIcon",
+	custom: "appBarCustom"
+};
+//#endregion
+exports.appBarAnatomy = appBarAnatomy;

package/lib/primitive/AppBar/anatomy.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Parts of the AppBar anatomy.
+ *
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
+ * Consumers in the styled layer and in GlobalInteraction/dom.ts import from
+ * here to keep markup and DOM queries in sync.
+ */
+export declare const appBarAnatomy: {
+    readonly root: "appBar";
+    readonly background: "appBarBackground";
+    readonly main: "appBarMain";
+    readonly icon: "appBarIcon";
+    readonly custom: "appBarCustom";
+};
+export type AppBarPart = (typeof appBarAnatomy)[keyof typeof appBarAnatomy];

package/lib/primitive/AppBar/anatomy.js

@@ -0,0 +1,18 @@
+"use client";
+//#region src/primitive/AppBar/anatomy.ts
+/**
+* Parts of the AppBar anatomy.
+*
+* Each value is the literal `data-part` attribute placed on the rendered DOM.
+* Consumers in the styled layer and in GlobalInteraction/dom.ts import from
+* here to keep markup and DOM queries in sync.
+*/
+var appBarAnatomy = {
+	root: "appBar",
+	background: "appBarBackground",
+	main: "appBarMain",
+	icon: "appBarIcon",
+	custom: "appBarCustom"
+};
+//#endregion
+export { appBarAnatomy };

package/lib/primitive/AppBar/useAppBar.cjs

@@ -1,6 +1,7 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_useAppScreenContext = require("../AppScreen/useAppScreenContext.cjs");
+const require_anatomy = require("./anatomy.cjs");
 const require_useElementOffset = require("../private/useElementOffset.cjs");
 let _seed_design_dom_utils = require("@seed-design/dom-utils");
 let react = require("react");
@@ -21,7 +22,7 @@ function useAppBar(_props) {
 		},
 		stateProps,
 		rootProps: (0, _seed_design_dom_utils.elementProps)({
-			"data-part": "appBar",
+			"data-part": require_anatomy.appBarAnatomy.root,
 			...stateProps,
 			style: { "--centered-title-padding-x": centeredTitlePaddingX }
 		})

package/lib/primitive/AppBar/useAppBar.js

@@ -1,5 +1,6 @@
 "use client";
 import { useAppScreenContext } from "../AppScreen/useAppScreenContext.js";
+import { appBarAnatomy } from "./anatomy.js";
 import { useElementOffset } from "../private/useElementOffset.js";
 import { elementProps } from "@seed-design/dom-utils";
 import { useMemo, useState } from "react";
@@ -20,7 +21,7 @@ function useAppBar(_props) {
 		},
 		stateProps,
 		rootProps: elementProps({
-			"data-part": "appBar",
+			"data-part": appBarAnatomy.root,
 			...stateProps,
 			style: { "--centered-title-padding-x": centeredTitlePaddingX }
 		})

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/anatomy.cjs

@@ -0,0 +1,17 @@
+"use client";
+//#region src/primitive/AppScreen/anatomy.ts
+/**
+* Parts of the AppScreen anatomy.
+*
+* Each value is the literal `data-part` attribute placed on the rendered DOM.
+* Consumers in GlobalInteraction/dom.ts import from here to keep markup and
+* DOM queries in sync.
+*/
+var appScreenAnatomy = {
+	activity: "activity",
+	dim: "dim",
+	layer: "layer",
+	edge: "edge"
+};
+//#endregion
+exports.appScreenAnatomy = appScreenAnatomy;

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

@@ -0,0 +1,14 @@
+/**
+ * Parts of the AppScreen anatomy.
+ *
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
+ * Consumers in GlobalInteraction/dom.ts import from here to keep markup and
+ * DOM queries in sync.
+ */
+export declare const appScreenAnatomy: {
+    readonly activity: "activity";
+    readonly dim: "dim";
+    readonly layer: "layer";
+    readonly edge: "edge";
+};
+export type AppScreenPart = (typeof appScreenAnatomy)[keyof typeof appScreenAnatomy];

package/lib/primitive/AppScreen/anatomy.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/primitive/AppScreen/anatomy.ts
+/**
+* Parts of the AppScreen anatomy.
+*
+* Each value is the literal `data-part` attribute placed on the rendered DOM.
+* Consumers in GlobalInteraction/dom.ts import from here to keep markup and
+* DOM queries in sync.
+*/
+var appScreenAnatomy = {
+	activity: "activity",
+	dim: "dim",
+	layer: "layer",
+	edge: "edge"
+};
+//#endregion
+export { appScreenAnatomy };

package/lib/primitive/AppScreen/useAppScreen.cjs

@@ -2,12 +2,14 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_useSwipeBack = require("../GlobalInteraction/useSwipeBack.cjs");
 const require_useActivityZIndexBase = require("../../hooks/useActivityZIndexBase.cjs");
+const require_anatomy = require("./anatomy.cjs");
 let _seed_design_dom_utils = require("@seed-design/dom-utils");
 let react = require("react");
 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();
@@ -23,9 +25,10 @@ function useAppScreen(props) {
 	]);
 	return (0, react.useMemo)(() => ({
 		activity,
+		layerRef,
 		stateProps,
 		activityProps: (0, _seed_design_dom_utils.elementProps)({
-			"data-part": "activity",
+			"data-part": require_anatomy.appScreenAnatomy.activity,
 			"data-activity-type": "full-screen",
 			...activityProps,
 			...stateProps,
@@ -34,16 +37,16 @@ function useAppScreen(props) {
 			suppressHydrationWarning: true
 		}),
 		dimProps: (0, _seed_design_dom_utils.elementProps)({
-			"data-part": "dim",
+			"data-part": require_anatomy.appScreenAnatomy.dim,
 			...stateProps
 		}),
 		layerProps: (0, _seed_design_dom_utils.elementProps)({
-			"data-part": "layer",
+			"data-part": require_anatomy.appScreenAnatomy.layer,
 			...stateProps,
 			...layerProps
 		}),
 		edgeProps: (0, _seed_design_dom_utils.elementProps)({
-			"data-part": "edge",
+			"data-part": require_anatomy.appScreenAnatomy.edge,
 			"aria-hidden": true,
 			tabIndex: -1,
 			...edgeProps,

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

@@ -1,12 +1,14 @@
 "use client";
 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();
@@ -22,9 +24,10 @@ function useAppScreen(props) {
 	]);
 	return useMemo(() => ({
 		activity,
+		layerRef,
 		stateProps,
 		activityProps: elementProps({
-			"data-part": "activity",
+			"data-part": appScreenAnatomy.activity,
 			"data-activity-type": "full-screen",
 			...activityProps,
 			...stateProps,
@@ -33,16 +36,16 @@ function useAppScreen(props) {
 			suppressHydrationWarning: true
 		}),
 		dimProps: elementProps({
-			"data-part": "dim",
+			"data-part": appScreenAnatomy.dim,
 			...stateProps
 		}),
 		layerProps: elementProps({
-			"data-part": "layer",
+			"data-part": appScreenAnatomy.layer,
 			...stateProps,
 			...layerProps
 		}),
 		edgeProps: elementProps({
-			"data-part": "edge",
+			"data-part": appScreenAnatomy.edge,
 			"aria-hidden": true,
 			tabIndex: -1,
 			...edgeProps,