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

package/dist/index.js

@@ -47,9 +47,7 @@ __export(src_exports, {
   bottomSheetVars: () => vars2,
   cssVars: () => globalVars,
   modalVars: () => vars3,
-  useAppScreen: () => useAppScreen,
-  useStyleEffect: () => useStyleEffect,
-  useZIndexBase: () => useZIndexBase
+  useAppScreen: () => useAppScreen
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -132,37 +130,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
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var GlobalOptionsContext = (0, import_react.createContext)({
@@ -218,440 +185,23 @@ var basicUIPlugin = (options) => () => ({
 });
 
 // src/components/AppScreen.tsx
-var import_react9 = require("@stackflow/react");
+var import_react4 = require("@stackflow/react");
 var import_dynamic3 = require("@vanilla-extract/dynamic");
-var import_react10 = require("react");
-
-// src/hooks/useLazy.tsx
-var import_react2 = require("react");
-function useLazy(value) {
-  const [state, setState] = (0, import_react2.useState)(void 0);
-  (0, import_react2.useEffect)(() => {
-    requestNextFrame(() => {
-      setState(value);
-    });
-  }, [value]);
-  return state;
-}
-
-// src/hooks/useMaxWidth.ts
-var import_react3 = require("react");
-function useMaxWidth({
-  outerRef,
-  innerRef,
-  enable
-}) {
-  const [maxWidth, setMaxWidth] = (0, import_react3.useState)(void 0);
-  (0, import_react3.useEffect)(() => {
-    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
-var import_react4 = require("react");
-function useMounted() {
-  const [mounted, mount] = (0, import_react4.useReducer)(() => true, false);
-  (0, import_react4.useEffect)(() => {
-    mount();
-  }, []);
-  return mounted;
-}
-
-// src/hooks/useNullableActivity.ts
-var import_react5 = require("@stackflow/react");
-function useNullableActivity() {
-  return (0, import_react5.useActivity)();
-}
-
-// src/hooks/useStyleEffect.ts
-var import_react6 = require("react");
-var connections = {};
-function useStyleEffect({
-  styleName,
-  refs,
-  effect,
-  effectDeps
-}) {
-  const activity = useNullableActivity();
-  (0, import_react6.useEffect)(() => {
-    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]);
-  (0, import_react6.useEffect)(() => {
-    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
-var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
-var appScreen = (0, import_createRuntimeFn2.createRuntimeFn)({ 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 = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434o dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434p" } }, defaultVariants: {}, compoundVariants: [] });
-var exitActive = "_1dlf434c";
-var exitDone = "_1dlf434d";
-var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ 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;
-}
+var import_react5 = require("react");
+var import_react_ui_core2 = require("@stackflow/react-ui-core");
 
 // src/components/AppBar.tsx
-var import_react7 = require("@stackflow/react");
+var import_react2 = require("@stackflow/react");
 var import_dynamic2 = require("@vanilla-extract/dynamic");
-var import_react8 = require("react");
+var import_react3 = require("react");
+var import_react_ui_core = require("@stackflow/react-ui-core");
 
 // src/components/AppBar.css.ts
-var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
-var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4348 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
+var appBar = (0, import_createRuntimeFn2.createRuntimeFn)({ 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 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
+var centerMain = (0, import_createRuntimeFn2.createRuntimeFn)({ 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";
@@ -660,9 +210,21 @@ var left = "_1yk3a458 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
 var right = "_1yk3a45g dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
 var safeArea = "_1yk3a456";
 
+// src/components/AppScreen.css.ts
+var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
+var appScreen = (0, import_createRuntimeFn3.createRuntimeFn)({ 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 = (0, import_createRuntimeFn3.createRuntimeFn)({ 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 = (0, import_createRuntimeFn3.createRuntimeFn)({ 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
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var AppBar = (0, import_react8.forwardRef)(
+var AppBar = (0, import_react3.forwardRef)(
   ({
     title,
     renderLeft,
@@ -688,13 +250,13 @@ var AppBar = (0, import_react8.forwardRef)(
     onTopClick
   }, ref) => {
     var _a, _b;
-    const actions = (0, import_react7.useActions)();
-    const activity = useNullableActivity();
+    const actions = (0, import_react2.useActions)();
+    const activity = (0, import_react_ui_core.useNullableActivity)();
     const globalOptions = useGlobalOptions();
     const globalCloseButton = (_a = globalOptions.appBar) == null ? void 0 : _a.closeButton;
     const globalBackButton = (_b = globalOptions.appBar) == null ? void 0 : _b.backButton;
-    const centerRef = (0, import_react8.useRef)(null);
-    const { maxWidth } = useMaxWidth({
+    const centerRef = (0, import_react3.useRef)(null);
+    const { maxWidth } = (0, import_react_ui_core.useAppBarTitleMaxWidth)({
       outerRef: ref,
       innerRef: centerRef,
       enable: globalOptions.theme === "cupertino"
@@ -865,9 +427,11 @@ var AppBar_default = AppBar;
 
 // src/components/AppScreen.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Context = (0, import_react10.createContext)(null);
+var OFFSET_PX_ANDROID = 32;
+var OFFSET_PX_CUPERTINO = 80;
+var Context = (0, import_react5.createContext)(null);
 function useAppScreen() {
-  return (0, import_react10.useContext)(Context);
+  return (0, import_react5.useContext)(Context);
 }
 var AppScreen = ({
   backgroundColor,
@@ -880,19 +444,19 @@ var AppScreen = ({
 }) => {
   var _a;
   const globalOptions = useGlobalOptions();
-  const activity = useNullableActivity();
-  const mounted = useMounted();
-  const { pop } = (0, import_react9.useActions)();
-  const appScreenRef = (0, import_react10.useRef)(null);
-  const dimRef = (0, import_react10.useRef)(null);
-  const paperRef = (0, import_react10.useRef)(null);
-  const edgeRef = (0, import_react10.useRef)(null);
-  const appBarRef = (0, import_react10.useRef)(null);
+  const activity = (0, import_react_ui_core2.useNullableActivity)();
+  const mounted = (0, import_react_ui_core2.useMounted)();
+  const { pop } = (0, import_react4.useActions)();
+  const appScreenRef = (0, import_react5.useRef)(null);
+  const dimRef = (0, import_react5.useRef)(null);
+  const paperRef = (0, import_react5.useRef)(null);
+  const edgeRef = (0, import_react5.useRef)(null);
+  const appBarRef = (0, import_react5.useRef)(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();
+  const zIndexBase = (0, import_react_ui_core2.useZIndexBase)();
   let zIndexDim;
   let zIndexPaper;
   let zIndexEdge;
@@ -914,27 +478,55 @@ var AppScreen = ({
     }
   }
   const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
-  const lazyTransitionState = useLazy(transitionState);
-  useStyleEffectHide({
-    refs: [appScreenRef],
-    hasEffect: true
+  const lazyTransitionState = (0, import_react_ui_core2.useLazy)(transitionState);
+  (0, import_react_ui_core2.useStyleEffectHide)({
+    refs: [appScreenRef]
   });
-  useStyleEffectOffset({
+  (0, import_react_ui_core2.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({
+  (0, import_react_ui_core2.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;
@@ -949,7 +541,7 @@ var AppScreen = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Context.Provider,
     {
-      value: (0, import_react10.useMemo)(
+      value: (0, import_react5.useMemo)(
         () => ({
           scroll({ top }) {
             var _a2;
@@ -1008,20 +600,20 @@ var AppScreen = ({
               },
               activity == null ? void 0 : activity.id
             ),
-            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !swipeBackPrevented && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: edge({ hasAppBar }), ref: edgeRef })
+            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !isSwipeBackPrevented && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: edge({ hasAppBar }), ref: edgeRef })
           ]
         }
       )
     }
   );
 };
-AppScreen.displayName = "AppScreen";
 var AppScreen_default = AppScreen;
 
 // src/components/BottomSheet.tsx
-var import_react11 = require("@stackflow/react");
+var import_react6 = require("@stackflow/react");
 var import_dynamic4 = require("@vanilla-extract/dynamic");
-var import_react12 = require("react");
+var import_react7 = require("react");
+var import_react_ui_core3 = require("@stackflow/react-ui-core");
 
 // src/components/BottomSheet.css.ts
 var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1041,23 +633,23 @@ var BottomSheet = ({
   children
 }) => {
   var _a;
-  const activity = useNullableActivity();
-  const { pop } = (0, import_react11.useActions)();
-  const containerRef = (0, import_react12.useRef)(null);
-  const dimRef = (0, import_react12.useRef)(null);
-  useStyleEffect({
+  const activity = (0, import_react_ui_core3.useNullableActivity)();
+  const { pop } = (0, import_react6.useActions)();
+  const containerRef = (0, import_react7.useRef)(null);
+  const dimRef = (0, import_react7.useRef)(null);
+  (0, import_react_ui_core3.useStyleEffect)({
     styleName: "hide",
     refs: [containerRef]
   });
-  useStyleEffect({
+  (0, import_react_ui_core3.useStyleEffect)({
     styleName: "offset",
     refs: [dimRef]
   });
-  useStyleEffect({
+  (0, import_react_ui_core3.useStyleEffect)({
     styleName: "swipe-back",
     refs: [dimRef]
   });
-  const popLock = (0, import_react12.useRef)(false);
+  const popLock = (0, import_react7.useRef)(false);
   const onDimClick = (e) => {
     onOutsideClick == null ? void 0 : onOutsideClick(e);
     if (e.defaultPrevented) {
@@ -1072,14 +664,14 @@ var BottomSheet = ({
   const onPaperClick = (e) => {
     e.stopPropagation();
   };
-  const zIndexBase = useZIndexBase() + 3;
-  const zIndexPaper = useZIndexBase() + 4;
+  const zIndexBase = (0, import_react_ui_core3.useZIndexBase)() + 3;
+  const zIndexPaper = (0, import_react_ui_core3.useZIndexBase)() + 4;
   const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: container2({
-        transitionState: useLazy(transitionState)
+        transitionState: (0, import_react_ui_core3.useLazy)(transitionState)
       }),
       ref: containerRef,
       style: (0, import_dynamic4.assignInlineVars)(
@@ -1103,9 +695,10 @@ BottomSheet.displayName = "BottomSheet";
 var BottomSheet_default = BottomSheet;
 
 // src/components/Modal.tsx
-var import_react13 = require("@stackflow/react");
+var import_react8 = require("@stackflow/react");
 var import_dynamic5 = require("@vanilla-extract/dynamic");
-var import_react14 = require("react");
+var import_react9 = require("react");
+var import_react_ui_core4 = require("@stackflow/react-ui-core");
 
 // src/components/Modal.css.ts
 var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1124,23 +717,23 @@ var Modal = ({
   children
 }) => {
   var _a;
-  const activity = useNullableActivity();
-  const { pop } = (0, import_react13.useActions)();
-  const containerRef = (0, import_react14.useRef)(null);
-  const paperRef = (0, import_react14.useRef)(null);
-  useStyleEffect({
+  const activity = (0, import_react_ui_core4.useNullableActivity)();
+  const { pop } = (0, import_react8.useActions)();
+  const containerRef = (0, import_react9.useRef)(null);
+  const paperRef = (0, import_react9.useRef)(null);
+  (0, import_react_ui_core4.useStyleEffect)({
     styleName: "hide",
     refs: [containerRef]
   });
-  useStyleEffect({
+  (0, import_react_ui_core4.useStyleEffect)({
     styleName: "offset",
     refs: [paperRef]
   });
-  useStyleEffect({
+  (0, import_react_ui_core4.useStyleEffect)({
     styleName: "swipe-back",
     refs: [paperRef]
   });
-  const popLock = (0, import_react14.useRef)(false);
+  const popLock = (0, import_react9.useRef)(false);
   const onDimClick = (e) => {
     onOutsideClick == null ? void 0 : onOutsideClick(e);
     if (e.defaultPrevented) {
@@ -1155,14 +748,14 @@ var Modal = ({
   const onPaperClick = (e) => {
     e.stopPropagation();
   };
-  const zIndexBase = useZIndexBase() + 3;
-  const zIndexPaper = useZIndexBase() + 4;
+  const zIndexBase = (0, import_react_ui_core4.useZIndexBase)() + 3;
+  const zIndexPaper = (0, import_react_ui_core4.useZIndexBase)() + 4;
   const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: container3({
-        transitionState: useLazy(transitionState)
+        transitionState: (0, import_react_ui_core4.useLazy)(transitionState)
       }),
       ref: containerRef,
       style: (0, import_dynamic5.assignInlineVars)(