@stackflow/plugin-basic-ui 1.8.4 → 1.9.1-canary.0

package/dist/index.mjs

@@ -97,37 +97,6 @@ function compactMap(obj) {
   }, {});
 }
 
-// src/utils/listenOnce.ts
-function listenOnce(el, type, cb) {
-  const listener = () => {
-    el.removeEventListener(type, listener);
-    cb();
-  };
-  el.addEventListener(type, listener);
-}
-
-// src/utils/listenResize.ts
-var listenResize = (cb) => {
-  cb();
-  window.addEventListener("resize", cb);
-  return () => {
-    window.removeEventListener("resize", cb);
-  };
-};
-
-// src/utils/noop.ts
-var noop = () => {
-};
-
-// src/utils/requestNextFrame.tsx
-function requestNextFrame(cb) {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      cb();
-    });
-  });
-}
-
 // src/basicUIPlugin.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var GlobalOptionsContext = createContext({
@@ -186,437 +155,31 @@ var basicUIPlugin = (options) => () => ({
 import { useActions as useActions2 } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars3 } from "@vanilla-extract/dynamic";
 import { createContext as createContext2, useContext as useContext2, useMemo, useRef as useRef2 } from "react";
-
-// src/hooks/useLazy.tsx
-import { useEffect, useState } from "react";
-function useLazy(value) {
-  const [state, setState] = useState(void 0);
-  useEffect(() => {
-    requestNextFrame(() => {
-      setState(value);
-    });
-  }, [value]);
-  return state;
-}
-
-// src/hooks/useMaxWidth.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-function useMaxWidth({
-  outerRef,
-  innerRef,
-  enable
-}) {
-  const [maxWidth, setMaxWidth] = useState2(void 0);
-  useEffect2(() => {
-    const $outer = outerRef && "current" in outerRef && outerRef.current;
-    const $inner = innerRef.current;
-    if (!enable || !$outer || !$inner) {
-      return noop;
-    }
-    const dispose = listenResize(() => {
-      const screenWidth = $outer.clientWidth;
-      const leftWidth = $inner.offsetLeft;
-      const centerWidth = $inner.clientWidth;
-      const rightWidth = screenWidth - leftWidth - centerWidth;
-      const sideMargin = Math.max(leftWidth, rightWidth);
-      setMaxWidth(screenWidth - 2 * sideMargin);
-    });
-    return dispose;
-  });
-  return {
-    maxWidth
-  };
-}
-
-// src/hooks/useMounted.ts
-import { useEffect as useEffect3, useReducer } from "react";
-function useMounted() {
-  const [mounted, mount] = useReducer(() => true, false);
-  useEffect3(() => {
-    mount();
-  }, []);
-  return mounted;
-}
-
-// src/hooks/useNullableActivity.ts
-import { useActivity } from "@stackflow/react";
-function useNullableActivity() {
-  return useActivity();
-}
-
-// src/hooks/useStyleEffect.ts
-import { useEffect as useEffect4 } from "react";
-var connections = {};
-function useStyleEffect({
-  styleName,
-  refs,
-  effect,
-  effectDeps
-}) {
-  const activity = useNullableActivity();
-  useEffect4(() => {
-    if (!activity) {
-      return noop;
-    }
-    if (!connections[styleName]) {
-      connections[styleName] = /* @__PURE__ */ new Map();
-    }
-    connections[styleName].set(activity.zIndex, {
-      refs,
-      hasEffect: !!effect
-    });
-    return () => {
-      connections[styleName].delete(activity.zIndex);
-    };
-  }, [activity == null ? void 0 : activity.id, refs, effect]);
-  useEffect4(() => {
-    if (!activity) {
-      return noop;
-    }
-    if (!effect) {
-      return noop;
-    }
-    const refs2 = (() => {
-      let arr = [];
-      for (let i = 1; i <= activity.zIndex; i += 1) {
-        const connection = connections[styleName].get(activity.zIndex - i);
-        if (connection == null ? void 0 : connection.refs) {
-          arr = [...arr, ...connection.refs];
-        }
-        if (connection == null ? void 0 : connection.hasEffect) {
-          break;
-        }
-      }
-      return arr;
-    })();
-    const cleanup = effect({
-      activityTransitionState: activity.transitionState,
-      refs: refs2
-    });
-    return () => {
-      cleanup == null ? void 0 : cleanup();
-    };
-  }, [activity == null ? void 0 : activity.transitionState, ...effectDeps != null ? effectDeps : []]);
-}
-
-// src/hooks/useStyleEffectHide.ts
-function useStyleEffectHide({
-  refs,
-  hasEffect
-}) {
-  useStyleEffect({
-    styleName: "hide",
-    refs,
-    effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
-      const cleanup = () => {
-        refs2.forEach((ref) => {
-          if (!ref.current) {
-            return;
-          }
-          const $ref = ref.current;
-          $ref.style.display = "";
-        });
-      };
-      switch (activityTransitionState) {
-        case "enter-done": {
-          refs2.forEach((ref) => {
-            if (!ref.current) {
-              return;
-            }
-            const $ref = ref.current;
-            $ref.style.display = "none";
-          });
-          return () => {
-            cleanup();
-          };
-        }
-        default: {
-          cleanup();
-          return noop;
-        }
-      }
-    } : void 0
-  });
-}
-
-// src/hooks/useStyleEffectOffset.ts
-var OFFSET_PX_ANDROID = 32;
-var OFFSET_PX_CUPERTINO = 80;
-function useStyleEffectOffset({
-  refs,
-  theme,
-  activityEnterStyle,
-  hasEffect = false
-}) {
-  useStyleEffect({
-    styleName: "offset",
-    refs,
-    effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
-      let transform;
-      let opacity;
-      switch (theme) {
-        case "cupertino": {
-          transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
-          opacity = "1";
-          break;
-        }
-        default: {
-          transform = activityEnterStyle === "slideInLeft" ? "translate3d(-50%, 0, 0)" : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
-          opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
-          break;
-        }
-      }
-      const cleanup = () => {
-        requestNextFrame(() => {
-          refs2.forEach((ref) => {
-            if (!ref.current) {
-              return;
-            }
-            const $el = ref.current;
-            $el.style.transform = "";
-            $el.style.opacity = "";
-            listenOnce($el, "transitionend", () => {
-              $el.style.transition = "";
-            });
-          });
-        });
-      };
-      switch (activityTransitionState) {
-        case "enter-active":
-        case "enter-done": {
-          refs2.forEach((ref) => {
-            if (!ref.current) {
-              return;
-            }
-            ref.current.style.transition = globalVars.computedTransitionDuration;
-            ref.current.style.transform = transform;
-            ref.current.style.opacity = opacity;
-          });
-          switch (activityTransitionState) {
-            case "enter-done":
-              return () => {
-                cleanup();
-              };
-            default:
-              return noop;
-          }
-        }
-        case "exit-active":
-        case "exit-done": {
-          requestNextFrame(() => {
-            cleanup();
-          });
-          return noop;
-        }
-        default: {
-          return noop;
-        }
-      }
-    } : void 0
-  });
-}
-
-// src/components/AppScreen.css.ts
-import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
-var appScreen = _7a4682({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1dlf434a", "enter-done": "_1dlf434b", "exit-active": "_1dlf434c", "exit-done": "_1dlf434d" } }, defaultVariants: {}, compoundVariants: [] });
-var dim = "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4349";
-var edge = _7a4682({ defaultClassName: "_1dlf434o dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434p" } }, defaultVariants: {}, compoundVariants: [] });
-var exitActive = "_1dlf434c";
-var exitDone = "_1dlf434d";
-var paper = _7a4682({ defaultClassName: "_1dlf434k dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4348 _1dlf4349", variantClassNames: { hasAppBar: { true: "_1dlf434l dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434m" }, activityEnterStyle: { slideInLeft: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
-var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { topMargin: "var(--_1dlf4345)", center: { mainWidth: "var(--_1dlf4346)" } } };
-
-// src/hooks/useStyleEffectSwipeBack.ts
-function useStyleEffectSwipeBack({
-  theme,
-  dimRef,
-  edgeRef,
-  paperRef,
-  hasEffect,
-  prevented,
-  onSwiped
-}) {
-  useStyleEffect({
-    styleName: "swipe-back",
-    refs: [paperRef],
-    effect: hasEffect ? ({ refs }) => {
-      if (theme !== "cupertino") {
-        return noop;
-      }
-      if (!dimRef.current || !edgeRef.current || !paperRef.current) {
-        return noop;
-      }
-      const $dim = dimRef.current;
-      const $edge = edgeRef.current;
-      const $paper = paperRef.current;
-      let x0 = null;
-      let t0 = null;
-      let x = null;
-      let cachedRefs = [];
-      const resetState = () => {
-        x0 = null;
-        t0 = null;
-        x = null;
-        cachedRefs = [];
-      };
-      let _rAFLock = false;
-      function movePaper(dx) {
-        if (!_rAFLock) {
-          _rAFLock = true;
-          requestAnimationFrame(() => {
-            const p = dx / $paper.clientWidth;
-            $dim.style.opacity = `${1 - p}`;
-            $dim.style.transition = "0s";
-            $paper.style.overflowY = "hidden";
-            $paper.style.transform = `translate3d(${dx}px, 0, 0)`;
-            $paper.style.transition = "0s";
-            refs.forEach((ref) => {
-              var _a;
-              if (!ref.current) {
-                return;
-              }
-              ref.current.style.transform = `translate3d(${-1 * (1 - p) * OFFSET_PX_CUPERTINO}px, 0, 0)`;
-              ref.current.style.transition = "0s";
-              if (((_a = ref.current.parentElement) == null ? void 0 : _a.style.display) === "none") {
-                ref.current.parentElement.style.display = "block";
-              }
-            });
-            _rAFLock = false;
-          });
-        }
-      }
-      function resetPaper({ swiped }) {
-        return new Promise((resolve) => {
-          requestAnimationFrame(() => {
-            $dim.style.opacity = `${swiped ? 0 : 1}`;
-            $dim.style.transition = globalVars.transitionDuration;
-            $paper.style.overflowY = "hidden";
-            $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
-            $paper.style.transition = globalVars.transitionDuration;
-            refs.forEach((ref) => {
-              if (!ref.current) {
-                return;
-              }
-              ref.current.style.transition = globalVars.transitionDuration;
-              ref.current.style.transform = `translate3d(${swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`}, 0, 0)`;
-            });
-            const _cachedRefs = [...cachedRefs];
-            resolve();
-            listenOnce($paper, "transitionend", () => {
-              var _a, _b;
-              const _swiped = swiped || ((_a = $paper.parentElement) == null ? void 0 : _a.classList.contains(
-                exitActive
-              )) || ((_b = $paper.parentElement) == null ? void 0 : _b.classList.contains(
-                exitDone
-              ));
-              $dim.style.opacity = "";
-              $paper.style.overflowY = "";
-              $paper.style.transform = "";
-              refs.forEach((ref, i) => {
-                if (!ref.current) {
-                  return;
-                }
-                const _cachedRef = _cachedRefs[i];
-                if (_swiped) {
-                  ref.current.style.transition = "";
-                  ref.current.style.transform = "";
-                  if (ref.current.parentElement) {
-                    ref.current.parentElement.style.display = "";
-                  }
-                } else if (_cachedRef) {
-                  ref.current.style.transition = _cachedRef.style.transition;
-                  ref.current.style.transform = _cachedRef.style.transform;
-                  if (ref.current.parentElement && _cachedRef.parentElement) {
-                    ref.current.parentElement.style.display = _cachedRef.parentElement.style.display;
-                  }
-                }
-              });
-            });
-          });
-        });
-      }
-      const onTouchStart = (e) => {
-        var _a;
-        const { activeElement } = document;
-        (_a = activeElement == null ? void 0 : activeElement.blur) == null ? void 0 : _a.call(activeElement);
-        x0 = x = e.touches[0].clientX;
-        t0 = Date.now();
-        cachedRefs = refs.map((ref) => {
-          if (!ref.current) {
-            return {
-              style: {
-                transform: "",
-                transition: ""
-              }
-            };
-          }
-          return {
-            style: {
-              transform: ref.current.style.transform,
-              transition: ref.current.style.transition
-            },
-            parentElement: ref.current.parentElement ? {
-              style: {
-                display: ref.current.parentElement.style.display
-              }
-            } : void 0
-          };
-        });
-      };
-      const onTouchMove = (e) => {
-        if (!x0) {
-          resetState();
-          return;
-        }
-        x = e.touches[0].clientX;
-        movePaper(x - x0);
-      };
-      const onTouchEnd = () => {
-        if (!x0 || !t0 || !x) {
-          resetState();
-          return;
-        }
-        const t = Date.now();
-        const v = (x - x0) / (t - t0);
-        const swiped = v > 1 || x / $paper.clientWidth > 0.4;
-        if (swiped) {
-          onSwiped == null ? void 0 : onSwiped();
-        }
-        Promise.resolve().then(() => resetPaper({ swiped })).then(() => resetState());
-      };
-      $edge.addEventListener("touchstart", onTouchStart, { passive: true });
-      $edge.addEventListener("touchmove", onTouchMove, { passive: true });
-      $edge.addEventListener("touchend", onTouchEnd, { passive: true });
-      $edge.addEventListener("touchcancel", onTouchEnd, { passive: true });
-      return () => {
-        $edge.removeEventListener("touchstart", onTouchStart);
-        $edge.removeEventListener("touchmove", onTouchMove);
-        $edge.removeEventListener("touchend", onTouchEnd);
-        $edge.removeEventListener("touchcancel", onTouchEnd);
-      };
-    } : void 0,
-    effectDeps: [prevented]
-  });
-}
-
-// src/hooks/useZIndexBase.ts
-function useZIndexBase() {
-  var _a;
-  const activity = useNullableActivity();
-  return ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
-}
+import {
+  useLazy,
+  useMounted,
+  useNullableActivity as useNullableActivity2,
+  useStyleEffectHide,
+  useStyleEffectOffset,
+  useStyleEffectSwipeBack,
+  useZIndexBase
+} from "@stackflow/react-ui-core";
 
 // src/components/AppBar.tsx
 import { useActions } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
 import { forwardRef, useRef } from "react";
+import {
+  useAppBarTitleMaxWidth,
+  useNullableActivity
+} from "@stackflow/react-ui-core";
 
 // src/components/AppBar.css.ts
-import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
-var appBar = _7a4683({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4348 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
+import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var appBar = _7a4682({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4348 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
 var backButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
 var center = "dhthxq9 dhthxq7 dhthxq8 _1yk3a450";
-var centerMain = _7a4683({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
+var centerMain = _7a4682({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
 var centerMainEdge = "_1yk3a45e dhthxqi dhthxq4 dhthxq2 dhthxqf";
 var centerText = "_1yk3a45f dhthxqc dhthxqd dhthxq0";
 var closeButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
@@ -625,6 +188,18 @@ var left = "_1yk3a458 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
 var right = "_1yk3a45g dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
 var safeArea = "_1yk3a456";
 
+// src/components/AppScreen.css.ts
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+var appScreen = _7a4683({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1dlf434a", "enter-done": "_1dlf434b", "exit-active": "_1dlf434c", "exit-done": "_1dlf434d" } }, defaultVariants: {}, compoundVariants: [] });
+var dim = "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4349";
+var edge = _7a4683({ defaultClassName: "_1dlf434o dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434p" } }, defaultVariants: {}, compoundVariants: [] });
+var enterActive = "_1dlf434a";
+var enterDone = "_1dlf434b";
+var exitActive = "_1dlf434c";
+var exitDone = "_1dlf434d";
+var paper = _7a4683({ defaultClassName: "_1dlf434k dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4348 _1dlf4349", variantClassNames: { hasAppBar: { true: "_1dlf434l dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434m" }, activityEnterStyle: { slideInLeft: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
+var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { topMargin: "var(--_1dlf4345)", center: { mainWidth: "var(--_1dlf4346)" } } };
+
 // src/components/AppBar.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var AppBar = forwardRef(
@@ -659,7 +234,7 @@ var AppBar = forwardRef(
     const globalCloseButton = (_a = globalOptions.appBar) == null ? void 0 : _a.closeButton;
     const globalBackButton = (_b = globalOptions.appBar) == null ? void 0 : _b.backButton;
     const centerRef = useRef(null);
-    const { maxWidth } = useMaxWidth({
+    const { maxWidth } = useAppBarTitleMaxWidth({
       outerRef: ref,
       innerRef: centerRef,
       enable: globalOptions.theme === "cupertino"
@@ -830,6 +405,8 @@ var AppBar_default = AppBar;
 
 // src/components/AppScreen.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var OFFSET_PX_ANDROID = 32;
+var OFFSET_PX_CUPERTINO = 80;
 var Context = createContext2(null);
 function useAppScreen() {
   return useContext2(Context);
@@ -845,7 +422,7 @@ var AppScreen = ({
 }) => {
   var _a;
   const globalOptions = useGlobalOptions();
-  const activity = useNullableActivity();
+  const activity = useNullableActivity2();
   const mounted = useMounted();
   const { pop } = useActions2();
   const appScreenRef = useRef2(null);
@@ -855,7 +432,7 @@ var AppScreen = ({
   const appBarRef = useRef2(null);
   const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
   const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
-  const swipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
+  const isSwipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
   const hasAppBar = !!appBar2;
   const zIndexBase = useZIndexBase();
   let zIndexDim;
@@ -881,25 +458,53 @@ var AppScreen = ({
   const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   const lazyTransitionState = useLazy(transitionState);
   useStyleEffectHide({
-    refs: [appScreenRef],
-    hasEffect: true
+    refs: [appScreenRef]
   });
   useStyleEffectOffset({
     refs: globalOptions.theme === "cupertino" || activityEnterStyle === "slideInLeft" ? [paperRef] : [paperRef, appBarRef],
-    theme: globalOptions.theme,
-    activityEnterStyle,
+    offsetStyles: globalOptions.theme === "cupertino" ? {
+      transform: `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`,
+      opacity: "1"
+    } : activityEnterStyle === "slideInLeft" ? {
+      transform: "translate3d(-50%, 0, 0)",
+      opacity: "0"
+    } : {
+      transform: `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`,
+      opacity: "1"
+    },
+    transitionDuration: globalVars.computedTransitionDuration,
     hasEffect: modalPresentationStyle !== "fullScreen"
   });
   useStyleEffectSwipeBack({
     dimRef,
     edgeRef,
     paperRef,
-    theme: globalOptions.theme,
-    prevented: swipeBackPrevented,
+    offset: OFFSET_PX_CUPERTINO,
+    transitionDuration: globalVars.transitionDuration,
+    preventSwipeBack: isSwipeBackPrevented || globalOptions.theme !== "cupertino",
+    getActivityTransitionState() {
+      const $paper = paperRef.current;
+      const $appScreen = $paper == null ? void 0 : $paper.parentElement;
+      if (!$appScreen) {
+        return null;
+      }
+      if ($appScreen.classList.contains(enterActive)) {
+        return "enter-active";
+      }
+      if ($appScreen.classList.contains(enterDone)) {
+        return "enter-done";
+      }
+      if ($appScreen.classList.contains(exitActive)) {
+        return "exit-active";
+      }
+      if ($appScreen.classList.contains(exitDone)) {
+        return "exit-done";
+      }
+      return null;
+    },
     onSwiped() {
       pop();
-    },
-    hasEffect: true
+    }
   });
   const onAppBarTopClick = (e) => {
     var _a2, _b;
@@ -973,20 +578,25 @@ var AppScreen = ({
               },
               activity == null ? void 0 : activity.id
             ),
-            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !swipeBackPrevented && /* @__PURE__ */ jsx5("div", { className: edge({ hasAppBar }), ref: edgeRef })
+            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !isSwipeBackPrevented && /* @__PURE__ */ jsx5("div", { className: edge({ hasAppBar }), ref: edgeRef })
           ]
         }
       )
     }
   );
 };
-AppScreen.displayName = "AppScreen";
 var AppScreen_default = AppScreen;
 
 // src/components/BottomSheet.tsx
 import { useActions as useActions3 } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars4 } from "@vanilla-extract/dynamic";
 import { useRef as useRef3 } from "react";
+import {
+  useLazy as useLazy2,
+  useNullableActivity as useNullableActivity3,
+  useStyleEffect,
+  useZIndexBase as useZIndexBase2
+} from "@stackflow/react-ui-core";
 
 // src/components/BottomSheet.css.ts
 import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -1006,7 +616,7 @@ var BottomSheet = ({
   children
 }) => {
   var _a;
-  const activity = useNullableActivity();
+  const activity = useNullableActivity3();
   const { pop } = useActions3();
   const containerRef = useRef3(null);
   const dimRef = useRef3(null);
@@ -1037,14 +647,14 @@ var BottomSheet = ({
   const onPaperClick = (e) => {
     e.stopPropagation();
   };
-  const zIndexBase = useZIndexBase() + 3;
-  const zIndexPaper = useZIndexBase() + 4;
+  const zIndexBase = useZIndexBase2() + 3;
+  const zIndexPaper = useZIndexBase2() + 4;
   const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   return /* @__PURE__ */ jsx6(
     "div",
     {
       className: container2({
-        transitionState: useLazy(transitionState)
+        transitionState: useLazy2(transitionState)
       }),
       ref: containerRef,
       style: assignInlineVars4(
@@ -1071,6 +681,12 @@ var BottomSheet_default = BottomSheet;
 import { useActions as useActions4 } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars5 } from "@vanilla-extract/dynamic";
 import { useRef as useRef4 } from "react";
+import {
+  useLazy as useLazy3,
+  useNullableActivity as useNullableActivity4,
+  useStyleEffect as useStyleEffect2,
+  useZIndexBase as useZIndexBase3
+} from "@stackflow/react-ui-core";
 
 // src/components/Modal.css.ts
 import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -1089,19 +705,19 @@ var Modal = ({
   children
 }) => {
   var _a;
-  const activity = useNullableActivity();
+  const activity = useNullableActivity4();
   const { pop } = useActions4();
   const containerRef = useRef4(null);
   const paperRef = useRef4(null);
-  useStyleEffect({
+  useStyleEffect2({
     styleName: "hide",
     refs: [containerRef]
   });
-  useStyleEffect({
+  useStyleEffect2({
     styleName: "offset",
     refs: [paperRef]
   });
-  useStyleEffect({
+  useStyleEffect2({
     styleName: "swipe-back",
     refs: [paperRef]
   });
@@ -1120,14 +736,14 @@ var Modal = ({
   const onPaperClick = (e) => {
     e.stopPropagation();
   };
-  const zIndexBase = useZIndexBase() + 3;
-  const zIndexPaper = useZIndexBase() + 4;
+  const zIndexBase = useZIndexBase3() + 3;
+  const zIndexPaper = useZIndexBase3() + 4;
   const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   return /* @__PURE__ */ jsx7(
     "div",
     {
       className: container3({
-        transitionState: useLazy(transitionState)
+        transitionState: useLazy3(transitionState)
       }),
       ref: containerRef,
       style: assignInlineVars5(
@@ -1160,8 +776,6 @@ export {
   vars2 as bottomSheetVars,
   globalVars as cssVars,
   vars3 as modalVars,
-  useAppScreen,
-  useStyleEffect,
-  useZIndexBase
+  useAppScreen
 };
 //# sourceMappingURL=index.mjs.map