@seed-design/stackflow 0.0.0-alpha-20260414104312

package/src/components/AppBar/AppBar.tsx

@@ -0,0 +1,146 @@
+import { Slot } from "@radix-ui/react-slot";
+import { appBar, type AppBarVariantProps } from "@seed-design/css/recipes/app-bar";
+import { appBarMain, type AppBarMainVariantProps } from "@seed-design/css/recipes/app-bar-main";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { AppBar as AppBarPrimitive } from "../../primitive";
+import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { useTopActivity } from "../../primitive/private/useTopActivity";
+import { useActivity } from "@stackflow/react";
+import { useBoxBackgroundProps, type BoxBackgroundProps } from "../../utils/styled";
+
+const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } =
+  createStyleContext(appBar);
+const {
+  PropsProvider: MainPropsProvider,
+  withProvider: withMainProvider,
+  withContext: withMainContext,
+} = createStyleContext(appBarMain);
+
+export const AppBarPropsProvider = PropsProvider;
+
+export interface AppBarProps
+  extends AppBarVariantProps,
+    AppBarPrimitive.RootProps,
+    BoxBackgroundProps {}
+
+export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
+  const { style: boxStyle, restProps: propsWithoutBoxProps } = useBoxBackgroundProps(props);
+
+  const contextProps = useProps();
+  const [variantProps, otherProps] = appBar.splitVariantProps({
+    ...contextProps,
+    ...propsWithoutBoxProps,
+  });
+
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+
+  const resolvedVariantProps: AppBarVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...(useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle as NonNullable<
+        AppBarVariantProps["transitionStyle"]
+      >,
+    }),
+  };
+
+  const classNames = appBar(resolvedVariantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <MainPropsProvider value={resolvedVariantProps}>
+        <AppBarPrimitive.Root
+          ref={ref}
+          {...mergeProps({ className: classNames.root, style: boxStyle }, otherProps)}
+        />
+      </MainPropsProvider>
+    </ClassNamesProvider>
+  );
+});
+AppBarRoot.displayName = "AppBarRoot";
+
+export interface AppBarLeftProps extends AppBarPrimitive.LeftProps {}
+
+export const AppBarLeft = withContext<HTMLDivElement, AppBarLeftProps>(
+  AppBarPrimitive.Left,
+  "left",
+);
+
+export interface AppBarRightProps extends AppBarPrimitive.RightProps {}
+
+export const AppBarRight = withContext<HTMLDivElement, AppBarRightProps>(
+  AppBarPrimitive.Right,
+  "right",
+);
+
+export interface AppBarMainProps extends AppBarMainVariantProps, AppBarPrimitive.MainProps {}
+
+export const AppBarMain = withMainProvider<HTMLDivElement, AppBarMainProps>(
+  AppBarPrimitive.Main,
+  "root",
+);
+
+export interface AppBarTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const AppBarTitle = withMainContext<HTMLSpanElement, AppBarTitleProps>(
+  Primitive.span,
+  "title",
+);
+
+export interface AppBarSubtitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const AppBarSubtitle = withMainContext<HTMLSpanElement, AppBarSubtitleProps>(
+  Primitive.span,
+  "subtitle",
+);
+
+export interface AppBarIconButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const AppBarIconButton = forwardRef<HTMLButtonElement, AppBarIconButtonProps>(
+  ({ children, className, ...otherProps }, ref) => {
+    const { stateProps } = useAppBarContext();
+    const classNames = useClassNames();
+
+    return (
+      <Primitive.button
+        ref={ref}
+        type="button"
+        className={clsx(classNames.iconButton, className)}
+        {...mergeProps(stateProps, otherProps)}
+      >
+        <Slot className={classNames.icon} {...stateProps}>
+          {children}
+        </Slot>
+      </Primitive.button>
+    );
+  },
+);
+AppBarIconButton.displayName = "IconButton";
+
+export interface AppBarSlotProps extends PrimitiveProps, React.HTMLAttributes<HTMLElement> {}
+
+export const AppBarSlot = forwardRef<HTMLElement, AppBarSlotProps>(
+  ({ children, className, ...otherProps }, ref) => {
+    const { stateProps } = useAppBarContext();
+    const classNames = useClassNames();
+
+    return (
+      <Slot
+        ref={ref}
+        className={clsx(classNames.custom, className)}
+        {...mergeProps(stateProps, otherProps)}
+      >
+        {children}
+      </Slot>
+    );
+  },
+);
+AppBarSlot.displayName = "AppBarSlot";

package/src/components/AppBar/index.ts

@@ -0,0 +1,23 @@
+export {
+  AppBarIconButton,
+  AppBarLeft,
+  AppBarMain,
+  AppBarRight,
+  AppBarRoot,
+  AppBarSlot,
+  AppBarSubtitle,
+  AppBarTitle,
+} from "./AppBar";
+
+export type {
+  AppBarIconButtonProps,
+  AppBarLeftProps,
+  AppBarMainProps,
+  AppBarProps,
+  AppBarRightProps,
+  AppBarSlotProps,
+  AppBarSubtitleProps,
+  AppBarTitleProps,
+} from "./AppBar";
+
+export * as AppBar from "./AppBar.namespace";

package/src/components/AppScreen/AppScreen.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  AppScreenDim as Dim,
+  AppScreenEdge as Edge,
+  AppScreenLayer as Layer,
+  AppScreenRoot as Root,
+  AppScreenPropsProvider as PropsProvider,
+} from "./AppScreen";
+
+export type {
+  AppScreenDimProps as DimProps,
+  AppScreenEdgeProps as EdgeProps,
+  AppScreenLayerProps as LayerProps,
+  AppScreenRootProps as RootProps,
+} from "./AppScreen";

package/src/components/AppScreen/AppScreen.tsx

@@ -0,0 +1,83 @@
+import { appScreen, type AppScreenVariantProps } from "@seed-design/css/recipes/app-screen";
+import { mergeProps } from "@seed-design/dom-utils";
+import { forwardRef, useMemo } from "react";
+import { AppScreen as AppScreenPrimitive } from "../../primitive";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { AppBarPropsProvider } from "../AppBar/AppBar";
+import { useTopActivity } from "../../primitive/private/useTopActivity";
+import { useActivity } from "@stackflow/react";
+import { appBar } from "@seed-design/css/recipes/app-bar";
+
+const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
+
+export const AppScreenPropsProvider = PropsProvider;
+
+export interface AppScreenRootProps extends AppScreenVariantProps, AppScreenPrimitive.RootProps {
+  /**
+   * @default "layer"
+   */
+  tone?: "layer" | "transparent";
+}
+
+export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((props, ref) => {
+  const contextProps = useProps();
+  const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props });
+
+  // TODO: we have to implement conditional default in recipe; this is temporal workaround.
+  const transitionStyle: NonNullable<AppScreenVariantProps["transitionStyle"]> =
+    variantProps.transitionStyle ??
+    (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
+
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+
+  const classNames = appScreen({
+    ...variantProps,
+    transitionStyle: useActivity().isTop
+      ? transitionStyle
+      : (topActivityTransitionStyle as NonNullable<AppScreenVariantProps["transitionStyle"]>),
+  });
+
+  const [appBarVariantProps] = useMemo(
+    () => appBar.splitVariantProps(variantProps),
+    [variantProps],
+  );
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <AppBarPropsProvider
+        value={useMemo(
+          () => ({ ...appBarVariantProps, transitionStyle }),
+          [appBarVariantProps, transitionStyle],
+        )}
+      >
+        <AppScreenPrimitive.Root
+          ref={ref}
+          data-transition-style={transitionStyle}
+          {...mergeProps({ className: classNames.root }, otherProps)}
+        />
+      </AppBarPropsProvider>
+    </ClassNamesProvider>
+  );
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+
+export interface AppScreenDimProps extends AppScreenPrimitive.DimProps {}
+
+export const AppScreenDim = withContext<HTMLDivElement, AppScreenDimProps>(
+  AppScreenPrimitive.Dim,
+  "dim",
+);
+
+export interface AppScreenEdgeProps extends AppScreenPrimitive.EdgeProps {}
+
+export const AppScreenEdge = withContext<HTMLDivElement, AppScreenEdgeProps>(
+  AppScreenPrimitive.Edge,
+  "edge",
+);
+
+export interface AppScreenLayerProps extends AppScreenPrimitive.LayerProps {}
+
+export const AppScreenLayer = withContext<HTMLDivElement, AppScreenLayerProps>(
+  AppScreenPrimitive.Layer,
+  "layer",
+);

package/src/components/AppScreen/index.ts

@@ -0,0 +1,16 @@
+export {
+  AppScreenDim,
+  AppScreenEdge,
+  AppScreenLayer,
+  AppScreenRoot,
+  AppScreenPropsProvider,
+} from "./AppScreen";
+
+export type {
+  AppScreenDimProps,
+  AppScreenEdgeProps,
+  AppScreenLayerProps,
+  AppScreenRootProps,
+} from "./AppScreen";
+
+export * as AppScreen from "./AppScreen.namespace";

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./AppBar";
+export * from "./AppScreen";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useActivityZIndexBase } from "./useActivityZIndexBase";

package/src/hooks/useActivityZIndexBase.ts

@@ -0,0 +1,26 @@
+import { useNullableActivity } from "@stackflow/react-ui-core";
+
+interface UseActivityZIndexBaseParams {
+  /**
+   * Offset from the current activity's position in the stack.
+   *
+   * - `0` (default): Current activity's z-index base
+   * - `1`: Next activity's z-index base (common for overlay components)
+   *
+   * @default 0
+   */
+  activityOffset?: number;
+}
+
+const Z_INDEX_SPACING = 5;
+
+/**
+ * Returns the base z-index which is calculated by multiplying the activity's index by 5.
+ * This value is used to give proper z-index values to elements of AppScreen (e.g. app-bar, dim, edge, layer). See the stylesheet of AppScreen for more details.
+ * This value can be provided to layerIndex of various overlay components (e.g. AlertDialog, BottomSheet, MenuSheet) to ensure correct stacking order.
+ */
+export function useActivityZIndexBase(params?: UseActivityZIndexBaseParams): number {
+  const activity = useNullableActivity();
+
+  return ((activity?.zIndex ?? 0) + (params?.activityOffset ?? 0)) * Z_INDEX_SPACING;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { seedPlugin, type SeedPluginOptions } from "./plugin";
+
+export * from "./components";
+export * from "./hooks";
+
+export * as Primitive from "./primitive";

package/src/plugin.tsx

@@ -0,0 +1,27 @@
+import type { StackflowReactPlugin } from "@stackflow/react";
+import { AppScreenPropsProvider } from "./components";
+import { GlobalInteraction } from "./primitive";
+
+export interface SeedPluginOptions {
+  theme: "android" | "cupertino";
+}
+
+export const seedPlugin =
+  (
+    options:
+      | SeedPluginOptions
+      // biome-ignore lint/suspicious/noExplicitAny: matches upstream @stackflow/react's `initialContext: any`
+      | ((args: { initialContext?: any }) => SeedPluginOptions),
+  ): StackflowReactPlugin =>
+  () => ({
+    key: "seed-design",
+    wrapStack({ stack, initialContext }) {
+      const resolved = typeof options === "function" ? options({ initialContext }) : options;
+
+      return (
+        <AppScreenPropsProvider value={resolved}>
+          <GlobalInteraction>{stack.render()}</GlobalInteraction>
+        </AppScreenPropsProvider>
+      );
+    },
+  });

package/src/primitive/AppBar/AppBar.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  AppBarRoot as Root,
+  AppBarMain as Main,
+  AppBarLeft as Left,
+  AppBarRight as Right,
+  type AppBarRootProps as RootProps,
+  type AppBarMainProps as MainProps,
+  type AppBarLeftProps as LeftProps,
+  type AppBarRightProps as RightProps,
+} from "./AppBar";

package/src/primitive/AppBar/AppBar.tsx

@@ -0,0 +1,52 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { useAppBar, type UseAppBarProps } from "./useAppBar";
+import { AppBarProvider, useAppBarContext } from "./useAppBarContext";
+
+export interface AppBarRootProps
+  extends PrimitiveProps,
+    UseAppBarProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarRoot = forwardRef<HTMLDivElement, AppBarRootProps>((props, ref) => {
+  const { ...otherProps } = props;
+  const api = useAppBar({});
+
+  return (
+    <AppBarProvider value={api}>
+      <Primitive.div
+        ref={composeRefs(api.refs.root, ref)}
+        {...mergeProps(api.rootProps, otherProps)}
+      />
+    </AppBarProvider>
+  );
+});
+AppBarRoot.displayName = "AppBarRoot";
+
+export interface AppBarLeftProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarLeft = forwardRef<HTMLDivElement, AppBarLeftProps>((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+
+  return <Primitive.div ref={composeRefs(refs.left, ref)} {...mergeProps(stateProps, props)} />;
+});
+AppBarLeft.displayName = "AppBarLeft";
+
+export interface AppBarRightProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarRight = forwardRef<HTMLDivElement, AppBarRightProps>((props, ref) => {
+  const { refs, stateProps } = useAppBarContext();
+
+  return <Primitive.div ref={composeRefs(refs.right, ref)} {...mergeProps(stateProps, props)} />;
+});
+AppBarRight.displayName = "AppBarRight";
+
+export interface AppBarMainProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppBarMain = forwardRef<HTMLDivElement, AppBarMainProps>((props, ref) => {
+  const { stateProps } = useAppBarContext();
+
+  return <Primitive.div ref={ref} {...mergeProps(stateProps, props)} />;
+});

package/src/primitive/AppBar/index.ts

@@ -0,0 +1,12 @@
+export {
+  AppBarLeft,
+  AppBarRight,
+  AppBarRoot,
+  AppBarMain,
+  type AppBarLeftProps,
+  type AppBarRightProps,
+  type AppBarRootProps,
+  type AppBarMainProps,
+} from "./AppBar";
+
+export * as AppBar from "./AppBar.namespace";

package/src/primitive/AppBar/useAppBar.tsx

@@ -0,0 +1,42 @@
+import { elementProps } from "@seed-design/dom-utils";
+import { useMemo, useState } from "react";
+import { useAppScreenContext } from "../AppScreen";
+import { useElementOffset } from "../private/useElementOffset";
+
+// biome-ignore lint/suspicious/noEmptyInterface: intentionally empty for future extension
+export interface UseAppBarProps {}
+
+export type UseAppBarReturn = ReturnType<typeof useAppBar>;
+
+export function useAppBar(_props: UseAppBarProps) {
+  const { stateProps } = useAppScreenContext();
+
+  const [root, rootRef] = useState<HTMLElement | null>(null);
+  const [left, leftRef] = useState<HTMLElement | null>(null);
+  const [right, rightRef] = useState<HTMLElement | null>(null);
+
+  const leftOffset = useElementOffset(left);
+  const rightOffset = useElementOffset(right);
+  const centeredTitlePaddingX = root
+    ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px`
+    : "initial";
+
+  return useMemo(
+    () => ({
+      refs: {
+        root: rootRef,
+        left: leftRef,
+        right: rightRef,
+      },
+      stateProps,
+      rootProps: elementProps({
+        "data-part": "appBar",
+        ...stateProps,
+        style: {
+          "--centered-title-padding-x": centeredTitlePaddingX,
+        } as React.CSSProperties,
+      }),
+    }),
+    [stateProps, centeredTitlePaddingX],
+  );
+}

package/src/primitive/AppBar/useAppBarContext.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { UseAppBarReturn } from "./useAppBar";
+
+export interface UseAppBarContext extends UseAppBarReturn {}
+
+const AppBarContext = createContext<UseAppBarContext | null>(null);
+
+export const AppBarProvider = AppBarContext.Provider;
+
+export function useAppBarContext<T extends boolean | undefined = true>({
+  strict = true,
+}: {
+  strict?: T;
+} = {}): T extends false ? UseAppBarContext | null : UseAppBarContext {
+  const context = useContext(AppBarContext);
+  if (!context && strict) {
+    throw new Error("useAppBarContext must be used within a AppBar");
+  }
+
+  return context as UseAppBarContext;
+}

package/src/primitive/AppScreen/AppScreen.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  AppScreenDim as Dim,
+  AppScreenEdge as Edge,
+  AppScreenLayer as Layer,
+  AppScreenRoot as Root,
+  type AppScreenDimProps as DimProps,
+  type AppScreenEdgeProps as EdgeProps,
+  type AppScreenLayerProps as LayerProps,
+  type AppScreenRootProps as RootProps,
+} from "./AppScreen";

package/src/primitive/AppScreen/AppScreen.tsx

@@ -0,0 +1,72 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+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 { useAppScreen, type UseAppScreenProps } from "./useAppScreen";
+import { AppScreenProvider, useAppScreenContext } from "./useAppScreenContext";
+
+export interface AppScreenRootProps
+  extends PrimitiveProps,
+    UseAppScreenProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((props, ref) => {
+  const {
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart,
+    ...otherProps
+  } = props;
+  const innerRef = useRef<HTMLDivElement>(null);
+  const api = useAppScreen({
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart,
+  });
+  usePreventTouchDuringTransition({
+    ref: innerRef as React.RefObject<HTMLDivElement>,
+  });
+
+  return (
+    <AppScreenProvider value={api}>
+      <Primitive.div
+        ref={composeRefs(innerRef, ref)}
+        data-stackflow-component-name="AppScreen"
+        {...mergeProps(api.activityProps, otherProps)}
+      />
+    </AppScreenProvider>
+  );
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+
+export interface AppScreenDimProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppScreenDim = forwardRef<HTMLDivElement, AppScreenDimProps>((props, ref) => {
+  const { dimProps } = useAppScreenContext();
+
+  return <Primitive.div ref={ref} {...mergeProps(dimProps, props)} />;
+});
+AppScreenDim.displayName = "AppScreenDim";
+
+export interface AppScreenEdgeProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppScreenEdge = forwardRef<HTMLDivElement, AppScreenEdgeProps>((props, ref) => {
+  const { edgeProps } = useAppScreenContext();
+
+  return <Primitive.div ref={ref} {...mergeProps(edgeProps, props)} />;
+});
+AppScreenEdge.displayName = "AppScreenEdge";
+
+export interface AppScreenLayerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AppScreenLayer = forwardRef<HTMLDivElement, AppScreenLayerProps>((props, ref) => {
+  const { layerProps } = useAppScreenContext();
+
+  return <Primitive.div ref={ref} {...mergeProps(layerProps, props)} />;
+});
+AppScreenLayer.displayName = "AppScreenLayer";

package/src/primitive/AppScreen/index.ts

@@ -0,0 +1,13 @@
+export {
+  AppScreenDim,
+  AppScreenEdge,
+  AppScreenLayer,
+  AppScreenRoot,
+  type AppScreenDimProps,
+  type AppScreenEdgeProps,
+  type AppScreenLayerProps,
+  type AppScreenRootProps,
+} from "./AppScreen";
+
+export * as AppScreen from "./AppScreen.namespace";
+export { useAppScreenContext, type UseAppScreenContext } from "./useAppScreenContext";

package/src/primitive/AppScreen/useAppScreen.tsx

@@ -0,0 +1,69 @@
+import { dataAttr, elementProps } from "@seed-design/dom-utils";
+import { useNullableActivity } from "@stackflow/react-ui-core";
+import { useMemo } from "react";
+import { type UseSwipeBackProps, useSwipeBack } from "../GlobalInteraction/useSwipeBack";
+import { useActivityZIndexBase } from "../../hooks";
+
+export interface UseAppScreenProps extends UseSwipeBackProps {}
+
+export type UseAppScreenReturn = ReturnType<typeof useAppScreen>;
+
+export function useAppScreen(props: UseAppScreenProps) {
+  const activity = useNullableActivity();
+
+  const transitionState = activity?.transitionState ?? "enter-done";
+
+  const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
+
+  const zIndexBase = useActivityZIndexBase();
+  const zIndexStyle = useMemo(
+    () =>
+      ({
+        "--z-index-base": zIndexBase.toString(),
+      }) as React.CSSProperties,
+    [zIndexBase],
+  );
+
+  const stateProps = useMemo(
+    () => ({
+      "data-activity-is-top": dataAttr(activity?.isTop),
+      "data-activity-is-active": dataAttr(activity?.isActive),
+      "data-transition-state": transitionState,
+    }),
+    [transitionState, activity?.isActive, activity?.isTop],
+  ) as React.HTMLAttributes<HTMLElement>;
+
+  return useMemo(
+    () => ({
+      activity,
+      stateProps,
+      activityProps: elementProps({
+        "data-part": "activity",
+        "data-activity-type": "full-screen",
+        ...activityProps,
+        ...stateProps,
+        "data-activity-id": activity?.id,
+        style: zIndexStyle,
+        // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
+        suppressHydrationWarning: true,
+      }),
+      dimProps: elementProps({
+        "data-part": "dim",
+        ...stateProps,
+      }),
+      layerProps: elementProps({
+        "data-part": "layer",
+        ...stateProps,
+        ...layerProps,
+      }),
+      edgeProps: elementProps({
+        "data-part": "edge",
+        "aria-hidden": true,
+        tabIndex: -1,
+        ...edgeProps,
+        ...stateProps,
+      }),
+    }),
+    [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps],
+  );
+}