@seed-design/stackflow 1.1.17 → 1.1.19

package/lib/components/AppScreen/AppScreen.cjs

@@ -12,6 +12,7 @@ const createStyleContext = require('../../utils/createStyleContext.cjs');
 const AppBar = require('../AppBar/AppBar.cjs');
 const useTopActivity = require('../../primitive/private/useTopActivity.cjs');
 const react = require('@stackflow/react');
+const appBar = require('@seed-design/css/recipes/app-bar');
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext.createStyleContext(appScreen.appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -24,12 +25,16 @@ const AppScreenRoot = React.forwardRef((props, ref) => {
     ...variantProps,
     transitionStyle: react.useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
+  const [appBarVariantProps] = React.useMemo(
+    () => appBar.appBar.splitVariantProps(variantProps),
+    [variantProps]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
     AppBar.AppBarPropsProvider,
     {
       value: React.useMemo(
-        () => ({ ...variantProps, transitionStyle }),
-        [variantProps, transitionStyle]
+        () => ({ ...appBarVariantProps, transitionStyle }),
+        [appBarVariantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         AppScreen.AppScreenRoot,

package/lib/components/AppScreen/AppScreen.js

@@ -8,6 +8,7 @@ import { createStyleContext } from '../../utils/createStyleContext.js';
 import { AppBarPropsProvider } from '../AppBar/AppBar.js';
 import { useTopActivity } from '../../primitive/private/useTopActivity.js';
 import { useActivity } from '@stackflow/react';
+import { appBar } from '@seed-design/css/recipes/app-bar';
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -20,12 +21,16 @@ const AppScreenRoot = forwardRef((props, ref) => {
     ...variantProps,
     transitionStyle: useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
+  const [appBarVariantProps] = useMemo(
+    () => appBar.splitVariantProps(variantProps),
+    [variantProps]
+  );
   return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
     AppBarPropsProvider,
     {
       value: useMemo(
-        () => ({ ...variantProps, transitionStyle }),
-        [variantProps, transitionStyle]
+        () => ({ ...appBarVariantProps, transitionStyle }),
+        [appBarVariantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsx(
         AppScreenRoot$1,

package/lib/plugin.cjs

@@ -9,8 +9,9 @@ const GlobalInteraction = require('./primitive/GlobalInteraction/GlobalInteracti
 
 const seedPlugin = (options) => () => ({
   key: "seed-design",
-  wrapStack({ stack }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AppScreen.AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalInteraction.GlobalInteraction, { children: stack.render() }) });
+  wrapStack({ stack, initialContext }) {
+    const resolved = typeof options === "function" ? options({ initialContext }) : options;
+    return /* @__PURE__ */ jsxRuntime.jsx(AppScreen.AppScreenPropsProvider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx(GlobalInteraction.GlobalInteraction, { children: stack.render() }) });
   }
 });
 

package/lib/plugin.d.ts

@@ -2,4 +2,6 @@ import { StackflowReactPlugin } from '@stackflow/react';
 export interface SeedPluginOptions {
     theme: "android" | "cupertino";
 }
-export declare const seedPlugin: (options: SeedPluginOptions) => StackflowReactPlugin;
+export declare const seedPlugin: (options: SeedPluginOptions | ((args: {
+    initialContext?: any;
+}) => SeedPluginOptions)) => StackflowReactPlugin;

package/lib/plugin.js

@@ -5,8 +5,9 @@ import { GlobalInteraction } from './primitive/GlobalInteraction/GlobalInteracti
 
 const seedPlugin = (options) => () => ({
   key: "seed-design",
-  wrapStack({ stack }) {
-    return /* @__PURE__ */ jsx(AppScreenPropsProvider, { value: options, children: /* @__PURE__ */ jsx(GlobalInteraction, { children: stack.render() }) });
+  wrapStack({ stack, initialContext }) {
+    const resolved = typeof options === "function" ? options({ initialContext }) : options;
+    return /* @__PURE__ */ jsx(AppScreenPropsProvider, { value: resolved, children: /* @__PURE__ */ jsx(GlobalInteraction, { children: stack.render() }) });
   }
 });
 

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -53,7 +53,7 @@ function useGlobalInteraction() {
       );
       const moveSwipeBack = React.useCallback(
         ({ x, t }) => {
-          const displacement = x - swipeBackContextRef.current.x0;
+          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
           const displacementRatio = displacement / window.innerWidth;
           const velocity = displacement / (t - swipeBackContextRef.current.t0);
           setSwipeBackContext({

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -49,7 +49,7 @@ function useGlobalInteraction() {
       );
       const moveSwipeBack = useCallback(
         ({ x, t }) => {
-          const displacement = x - swipeBackContextRef.current.x0;
+          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
           const displacementRatio = displacement / window.innerWidth;
           const velocity = displacement / (t - swipeBackContextRef.current.t0);
           setSwipeBackContext({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "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.3",
+    "@seed-design/css": "1.2.6",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",

package/src/components/AppScreen/AppScreen.tsx

@@ -6,6 +6,7 @@ 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);
 
@@ -36,12 +37,17 @@ export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((pro
       : (topActivityTransitionStyle as NonNullable<AppScreenVariantProps["transitionStyle"]>),
   });
 
+  const [appBarVariantProps] = useMemo(
+    () => appBar.splitVariantProps(variantProps),
+    [variantProps],
+  );
+
   return (
     <ClassNamesProvider value={classNames}>
       <AppBarPropsProvider
         value={useMemo(
-          () => ({ ...variantProps, transitionStyle }),
-          [variantProps, transitionStyle],
+          () => ({ ...appBarVariantProps, transitionStyle }),
+          [appBarVariantProps, transitionStyle],
         )}
       >
         <AppScreenPrimitive.Root

package/src/plugin.tsx

@@ -7,12 +7,19 @@ export interface SeedPluginOptions {
 }
 
 export const seedPlugin =
-  (options: SeedPluginOptions): StackflowReactPlugin =>
+  (
+    options:
+      | SeedPluginOptions
+      // biome-ignore lint/suspicious/noExplicitAny: matches upstream @stackflow/react's `initialContext: any`
+      | ((args: { initialContext?: any }) => SeedPluginOptions),
+  ): StackflowReactPlugin =>
   () => ({
     key: "seed-design",
-    wrapStack({ stack }) {
+    wrapStack({ stack, initialContext }) {
+      const resolved = typeof options === "function" ? options({ initialContext }) : options;
+
       return (
-        <AppScreenPropsProvider value={options}>
+        <AppScreenPropsProvider value={resolved}>
           <GlobalInteraction>{stack.render()}</GlobalInteraction>
         </AppScreenPropsProvider>
       );

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -96,7 +96,7 @@ export function useGlobalInteraction() {
 
       const moveSwipeBack = useCallback(
         ({ x, t }: MoveSwipeBackProps) => {
-          const displacement = x - swipeBackContextRef.current.x0;
+          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
           const displacementRatio = displacement / window.innerWidth;
           const velocity = displacement / (t - swipeBackContextRef.current.t0);
           setSwipeBackContext({