@sigmela/router 0.3.7 → 0.5.0

package/dist/index.js

@@ -0,0 +1,3696 @@
+import { createContext, memo, useMemo, Suspense, useCallback, useLayoutEffect, createElement, useState, useRef, useEffect, useContext, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import { useTransitionMap } from 'react-transition-state';
+import { Router as Router$1, useLocation, useSearch, useRouter as useRouter$1, matchRoute } from 'wouter';
+import { navigate, useHistoryState as useHistoryState$1 } from 'wouter/use-browser-location';
+import { useMotionValue, animate, motion } from 'motion/react';
+import { disableScroll, enableScroll } from '@fluejs/noscroll';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import './router.css';
+
+// src/Router.tsx
+var pageScrollLockCount = 0;
+function getPageScrollElement() {
+  return document.querySelector(
+    ".screen-stack > .screen-stack-item.phase-active > .stack-screen-container"
+  ) ?? document.getElementById("root");
+}
+function usePageScrollLock(active) {
+  useEffect(() => {
+    const scrollEl = getPageScrollElement();
+    if (!scrollEl) return;
+    pageScrollLockCount += 1;
+    if (pageScrollLockCount === 1) {
+      disableScroll(scrollEl);
+    }
+    return () => {
+      pageScrollLockCount = Math.max(0, pageScrollLockCount - 1);
+      if (pageScrollLockCount === 0) {
+        enableScroll(scrollEl);
+      }
+    };
+  }, [active]);
+}
+var SHEET_DRAG_EPS = 0.5;
+var SHEET_DRAG_START_DISTANCE = 2;
+function sheetScrollAtTop(el) {
+  return !el || el.scrollTop <= SHEET_DRAG_EPS;
+}
+function sheetDragStartsInInteractiveControl(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(
+    target.closest(
+      'button,a,input,textarea,select,[role="button"],[data-sheet-drag-ignore="true"]'
+    )
+  );
+}
+function sheetDragStartsInTextInput(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(
+    target.closest(
+      'input,textarea,select,[contenteditable="true"],[data-sheet-drag-ignore="true"]'
+    )
+  );
+}
+function useSheetDragEngine({
+  targetRef,
+  enabled,
+  minDragDistance = SHEET_DRAG_START_DISTANCE,
+  ignoreStartTarget,
+  shouldStart,
+  onStart,
+  onMove,
+  onEnd,
+  suppressClickOnDrag = false
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const target = targetRef.current;
+    if (!target) return;
+    const drag = {
+      active: false,
+      tracking: false,
+      pointerId: -1,
+      startY: 0,
+      lastY: 0,
+      lastT: 0,
+      velocityY: 0,
+      lastClientY: 0,
+      lastTotalY: 0
+    };
+    let suppressNextClick = false;
+    let clearSuppressClickTimer = 0;
+    const clearSuppressNextClick = () => {
+      suppressNextClick = false;
+      if (clearSuppressClickTimer) {
+        window.clearTimeout(clearSuppressClickTimer);
+        clearSuppressClickTimer = 0;
+      }
+    };
+    const scheduleSuppressClickClear = () => {
+      if (!suppressClickOnDrag) return;
+      if (clearSuppressClickTimer) window.clearTimeout(clearSuppressClickTimer);
+      clearSuppressClickTimer = window.setTimeout(() => {
+        suppressNextClick = false;
+        clearSuppressClickTimer = 0;
+      }, 350);
+    };
+    const beginTracking = (clientY) => {
+      drag.active = false;
+      drag.tracking = true;
+      drag.pointerId = -1;
+      drag.startY = clientY;
+      drag.lastY = clientY;
+      drag.lastT = performance.now();
+      drag.velocityY = 0;
+      drag.lastClientY = clientY;
+      drag.lastTotalY = 0;
+    };
+    const resetTracking = () => {
+      drag.active = false;
+      drag.tracking = false;
+      drag.pointerId = -1;
+      drag.velocityY = 0;
+      drag.lastTotalY = 0;
+    };
+    const makeUpdate = (clientY, event, now) => {
+      const deltaY = clientY - drag.lastY;
+      const totalY = clientY - drag.startY;
+      const dt = Math.max(1, now - drag.lastT);
+      const velocityY = deltaY / dt * 1e3;
+      return { clientY, deltaY, totalY, velocityY, event };
+    };
+    const updateTracking = (clientY, event) => {
+      if (!drag.tracking) return;
+      const now = performance.now();
+      const update = makeUpdate(clientY, event, now);
+      drag.lastClientY = clientY;
+      drag.lastTotalY = update.totalY;
+      if (!drag.active) {
+        if (Math.abs(update.totalY) <= minDragDistance) {
+          drag.lastY = clientY;
+          drag.lastT = now;
+          return;
+        }
+        if (!shouldStart(update)) {
+          drag.lastY = clientY;
+          drag.lastT = now;
+          return;
+        }
+        drag.active = true;
+        if (suppressClickOnDrag) suppressNextClick = true;
+        if (event instanceof PointerEvent) {
+          try {
+            target.setPointerCapture(event.pointerId);
+          } catch {
+          }
+        }
+        onStart(update);
+      }
+      if (event.cancelable) event.preventDefault();
+      drag.velocityY = update.velocityY;
+      onMove(update);
+      drag.lastY = clientY;
+      drag.lastT = now;
+    };
+    const finishTracking = (event) => {
+      if (!drag.tracking) return;
+      const now = performance.now();
+      const update = makeUpdate(drag.lastClientY, event, now);
+      const wasActive = drag.active;
+      if (event instanceof PointerEvent) {
+        try {
+          target.releasePointerCapture(event.pointerId);
+        } catch {
+        }
+      }
+      const velocityY = drag.velocityY || update.velocityY;
+      resetTracking();
+      if (!wasActive) return;
+      if (event.cancelable) event.preventDefault();
+      scheduleSuppressClickClear();
+      onEnd({ ...update, velocityY });
+    };
+    const onTouchStart = (event) => {
+      if (event.touches.length !== 1 || ignoreStartTarget?.(event.target)) {
+        resetTracking();
+        return;
+      }
+      beginTracking(event.touches[0]?.clientY ?? 0);
+    };
+    const onTouchMove = (event) => {
+      if (event.touches.length !== 1) return;
+      updateTracking(event.touches[0]?.clientY ?? drag.lastY, event);
+    };
+    const onPointerDown = (event) => {
+      if (event.pointerType === "touch" || !event.isPrimary || event.button !== 0 || ignoreStartTarget?.(event.target)) {
+        resetTracking();
+        return;
+      }
+      beginTracking(event.clientY);
+      drag.pointerId = event.pointerId;
+    };
+    const onPointerMove = (event) => {
+      if (!drag.tracking || drag.pointerId !== event.pointerId) return;
+      updateTracking(event.clientY, event);
+    };
+    const onPointerEnd = (event) => {
+      if (!drag.tracking || drag.pointerId !== event.pointerId) return;
+      finishTracking(event);
+    };
+    const onClickCapture = (event) => {
+      if (!suppressNextClick) return;
+      clearSuppressNextClick();
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    target.addEventListener("touchstart", onTouchStart, { passive: true });
+    target.addEventListener("touchmove", onTouchMove, { passive: false });
+    target.addEventListener("touchend", finishTracking, { passive: false });
+    target.addEventListener("touchcancel", finishTracking, { passive: false });
+    target.addEventListener("pointerdown", onPointerDown);
+    target.addEventListener("pointermove", onPointerMove, { passive: false });
+    target.addEventListener("pointerup", onPointerEnd);
+    target.addEventListener("pointercancel", onPointerEnd);
+    if (suppressClickOnDrag) target.addEventListener("click", onClickCapture, true);
+    return () => {
+      target.removeEventListener("touchstart", onTouchStart);
+      target.removeEventListener("touchmove", onTouchMove);
+      target.removeEventListener("touchend", finishTracking);
+      target.removeEventListener("touchcancel", finishTracking);
+      target.removeEventListener("pointerdown", onPointerDown);
+      target.removeEventListener("pointermove", onPointerMove);
+      target.removeEventListener("pointerup", onPointerEnd);
+      target.removeEventListener("pointercancel", onPointerEnd);
+      if (suppressClickOnDrag) target.removeEventListener("click", onClickCapture, true);
+      if (clearSuppressClickTimer) window.clearTimeout(clearSuppressClickTimer);
+    };
+  }, [
+    enabled,
+    ignoreStartTarget,
+    minDragDistance,
+    onEnd,
+    onMove,
+    onStart,
+    shouldStart,
+    suppressClickOnDrag,
+    targetRef
+  ]);
+}
+var SHEET_SPRING = { type: "spring", bounce: 0, duration: 0.38 };
+var CLOSE_DISTANCE = 112;
+var CLOSE_VELOCITY = 850;
+var DRAG_START_DISTANCE = 6;
+var PROJECT_VELOCITY_FACTOR = 0.18;
+function closeTargetY(surface, target) {
+  if (target === "viewport") return window.innerHeight + 32;
+  return (surface?.getBoundingClientRect().height || window.innerHeight) + 32;
+}
+function SheetSurface({
+  children,
+  open,
+  onRequestClose,
+  onExitComplete,
+  zIndex,
+  mode,
+  canDismiss = true,
+  swipeToClose = true,
+  backdrop = false,
+  backdropClassName,
+  backdropStyle,
+  shellClassName,
+  surfaceClassName,
+  surfaceStyle,
+  scrollElement,
+  ariaLabel,
+  shell = "mobile-contained",
+  closeTarget = "surface"
+}) {
+  const surfaceRef = useRef(null);
+  const removeRef = useRef(onExitComplete);
+  const requestCloseRef = useRef(onRequestClose);
+  const closingOffsetRef = useRef(0);
+  const closingRef = useRef(false);
+  const y = useMotionValue(window.innerHeight);
+  removeRef.current = onExitComplete;
+  requestCloseRef.current = onRequestClose;
+  usePageScrollLock(true);
+  const requestClose = useCallback(
+    (offset = 0) => {
+      if (!canDismiss || closingRef.current) return;
+      closingOffsetRef.current = offset;
+      requestCloseRef.current();
+    },
+    [canDismiss]
+  );
+  const closeWithAnimation = useCallback(
+    (offset = 0) => {
+      if (closingRef.current) return;
+      closingRef.current = true;
+      const target = closeTargetY(surfaceRef.current, closeTarget);
+      y.stop();
+      y.set(Math.max(0, offset));
+      const controls = animate(y, target, SHEET_SPRING);
+      void controls.finished.then(
+        () => {
+          removeRef.current();
+        },
+        () => {
+          closingRef.current = false;
+        }
+      );
+    },
+    [closeTarget, y]
+  );
+  useEffect(() => {
+    if (!open) {
+      closeWithAnimation(closingOffsetRef.current);
+      return;
+    }
+    y.set(window.innerHeight);
+    const controls = animate(y, 0, SHEET_SPRING);
+    return () => controls.stop();
+  }, [closeWithAnimation, open, y]);
+  useEffect(() => {
+    if (!canDismiss) return;
+    const handler = (event) => {
+      if (event.key === "Escape") requestClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [canDismiss, requestClose]);
+  const shouldStartDrag = useCallback(
+    (update) => update.totalY > 0 && sheetScrollAtTop(scrollElement ?? null),
+    [scrollElement]
+  );
+  const handleDragStart = useCallback(() => {
+    y.stop();
+  }, [y]);
+  const handleDragMove = useCallback(
+    (update) => {
+      y.set(Math.max(0, y.get() + update.deltaY));
+    },
+    [y]
+  );
+  const handleDragEnd = useCallback(
+    (update) => {
+      const offset = y.get();
+      const projected = offset + update.velocityY * PROJECT_VELOCITY_FACTOR;
+      if (projected > CLOSE_DISTANCE || update.velocityY > CLOSE_VELOCITY) {
+        requestClose(offset);
+        return;
+      }
+      y.stop();
+      void animate(y, 0, SHEET_SPRING).finished.catch(() => {
+      });
+    },
+    [requestClose, y]
+  );
+  useSheetDragEngine({
+    targetRef: surfaceRef,
+    enabled: swipeToClose && canDismiss,
+    minDragDistance: DRAG_START_DISTANCE,
+    ignoreStartTarget: sheetDragStartsInTextInput,
+    shouldStart: shouldStartDrag,
+    onStart: handleDragStart,
+    onMove: handleDragMove,
+    onEnd: handleDragEnd,
+    suppressClickOnDrag: true
+  });
+  const baseShellClassName = mode === "fullscreen" ? "router-overlay-shell router-overlay-shell--fullscreen" : "router-overlay-shell router-overlay-shell--content";
+  const overlayShellClassName = shellClassName ? `${baseShellClassName} ${shellClassName}` : baseShellClassName;
+  const shellStyle = useMemo(
+    () => ({
+      zIndex
+    }),
+    [zIndex]
+  );
+  const node = /* @__PURE__ */ jsxs("div", { className: overlayShellClassName, "data-router-shell": shell, style: shellStyle, children: [
+    backdrop ? /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        type: "button",
+        "aria-label": "Close",
+        className: `pointer-events-auto absolute inset-0 border-0 p-0 ${backdropClassName ?? ""}`,
+        style: backdropStyle,
+        initial: { opacity: 0 },
+        animate: { opacity: open ? 1 : 0 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        onClick: () => requestClose()
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: surfaceRef,
+        className: surfaceClassName,
+        style: { ...surfaceStyle, y },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        children
+      }
+    )
+  ] });
+  return node;
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.75 4.75L13.25 13.25M13.25 4.75L4.75 13.25",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "2.2"
+    }
+  ) });
+}
+function RouterCloseButton({
+  onPress,
+  disabled,
+  tone = "default",
+  ariaLabel = "Close"
+}) {
+  const toneClass = tone === "light" ? " router-close-button--light" : "";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      className: `router-close-button router-close-button-circle${toneClass}`,
+      disabled,
+      onClick: onPress,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `router-close-button-inner router-close-button-circle${toneClass}`, children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "router-close-button-blur router-close-button-circle", children: [
+          /* @__PURE__ */ jsx("div", { className: "router-close-mask-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "router-close-mask-2", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: "router-close-mask-3", "aria-hidden": "true" })
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_OVERLAY_CONTENT_KEY = "router-overlay-content:default";
+var OverlayContentKeyContext = createContext(DEFAULT_OVERLAY_CONTENT_KEY);
+function OverlayContentScope({
+  contentKey,
+  children
+}) {
+  return /* @__PURE__ */ jsx(OverlayContentKeyContext.Provider, { value: contentKey, children });
+}
+function useOverlayContentKey() {
+  return useContext(OverlayContentKeyContext);
+}
+var ModalContext = createContext(null);
+function useModalContext() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("Modal sub-components must be rendered inside <Modal>");
+  }
+  return ctx;
+}
+function useModalSwipeTarget() {
+  const { setSwipeTarget } = useModalContext();
+  const contentKey = useOverlayContentKey();
+  return useCallback(
+    (el) => setSwipeTarget(contentKey, el),
+    [contentKey, setSwipeTarget]
+  );
+}
+function ModalFrame({
+  children,
+  open,
+  onRequestClose,
+  onExitComplete,
+  zIndex,
+  shell = "mobile-contained",
+  contentSized = false,
+  activeContentKey = DEFAULT_OVERLAY_CONTENT_KEY
+}) {
+  const [registrations, setRegistrations] = useState(() => /* @__PURE__ */ new Map());
+  const setSwipeTarget = useCallback(
+    (contentKey, swipeTarget2) => {
+      setRegistrations((current) => {
+        const registration = current.get(contentKey);
+        if ((registration?.swipeTarget ?? null) === swipeTarget2) return current;
+        const next = new Map(current);
+        if (!swipeTarget2 && !registration?.options) {
+          next.delete(contentKey);
+        } else {
+          next.set(contentKey, { ...registration, swipeTarget: swipeTarget2 });
+        }
+        return next;
+      });
+    },
+    []
+  );
+  const setOptions = useCallback((contentKey, options2) => {
+    setRegistrations((current) => {
+      const registration = current.get(contentKey);
+      if (registration?.options === options2) return current;
+      const next = new Map(current);
+      if (!options2 && !registration?.swipeTarget) {
+        next.delete(contentKey);
+      } else {
+        next.set(contentKey, {
+          ...registration,
+          options: options2 ?? void 0
+        });
+      }
+      return next;
+    });
+  }, []);
+  const activeRegistration = registrations.get(activeContentKey);
+  const swipeTarget = activeRegistration?.swipeTarget ?? null;
+  const options = activeRegistration?.options;
+  const swipeToClose = options?.swipeToClose ?? true;
+  const ariaLabel = options?.ariaLabel;
+  const isContentSized = contentSized || options?.presentation === "content";
+  const requestClose = useCallback(() => {
+    onRequestClose();
+  }, [onRequestClose]);
+  const contextValue = useMemo(
+    () => ({ setSwipeTarget, requestClose, setOptions }),
+    [requestClose, setOptions, setSwipeTarget]
+  );
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    SheetSurface,
+    {
+      open,
+      onRequestClose: requestClose,
+      onExitComplete,
+      zIndex,
+      mode: "fullscreen",
+      swipeToClose,
+      shell,
+      backdrop: true,
+      backdropClassName: `router-modal-backdrop${isContentSized ? " router-modal-backdrop--transparent" : ""}`,
+      shellClassName: "router-modal-shell",
+      surfaceClassName: `router-modal-surface${isContentSized ? " router-modal-surface--content-sized" : ""}${options?.size === "wide" ? " router-modal-surface--wide" : ""}`,
+      scrollElement: swipeTarget,
+      ariaLabel,
+      closeTarget: isContentSized ? "surface" : "viewport",
+      children
+    }
+  ) });
+}
+function ModalRoot({
+  children,
+  swipeToClose = true,
+  ariaLabel,
+  size = "regular",
+  presentation = "fullscreen"
+}) {
+  const { setOptions } = useModalContext();
+  const contentKey = useOverlayContentKey();
+  useLayoutEffect(() => {
+    setOptions(contentKey, { swipeToClose, ariaLabel, size, presentation });
+    return () => setOptions(contentKey, null);
+  }, [ariaLabel, contentKey, presentation, setOptions, size, swipeToClose]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function ModalHeader({
+  title,
+  leftAction,
+  rightAction,
+  hideCloseButton,
+  sticky = true
+}) {
+  const { requestClose } = useModalContext();
+  const headerClassName = `router-modal-header${sticky ? " router-modal-header--sticky" : ""}`;
+  return /* @__PURE__ */ jsxs("div", { className: headerClassName, children: [
+    /* @__PURE__ */ jsx("div", { className: "router-modal-header-side", children: leftAction }),
+    /* @__PURE__ */ jsx("h2", { className: "router-modal-title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "router-modal-header-side router-modal-header-side--trailing", children: rightAction ?? (hideCloseButton ? null : /* @__PURE__ */ jsx(RouterCloseButton, { onPress: requestClose })) })
+  ] });
+}
+function ModalContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: `router-modal-content ${className ?? ""}`, children });
+}
+function ModalScrollView({ children, className, style }) {
+  const setSwipeTarget = useModalSwipeTarget();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setSwipeTarget,
+      className: `router-scroll router-modal-scroll-view ${className ?? ""}`,
+      style,
+      children
+    }
+  );
+}
+function ModalFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `router-modal-footer ${className ?? ""}`,
+      children: /* @__PURE__ */ jsx("div", { className: "router-modal-footer-content", children })
+    }
+  );
+}
+var Modal = Object.assign(ModalRoot, {
+  Header: ModalHeader,
+  Content: ModalContent,
+  ScrollView: ModalScrollView,
+  Footer: ModalFooter
+});
+var SheetContext = createContext(null);
+function useSheetContext() {
+  const ctx = useContext(SheetContext);
+  if (!ctx) {
+    throw new Error("Sheet sub-components must be rendered inside <Sheet>");
+  }
+  return ctx;
+}
+function SheetFrame({
+  children,
+  open,
+  onRequestClose,
+  onExitComplete,
+  zIndex,
+  shell = "mobile-contained",
+  activeContentKey = DEFAULT_OVERLAY_CONTENT_KEY
+}) {
+  const [frameScrollElement, setFrameScrollElement] = useState(null);
+  const [registrations, setRegistrations] = useState(() => /* @__PURE__ */ new Map());
+  const setScrollElement = useCallback(
+    (contentKey, scrollElement2) => {
+      setRegistrations((current) => {
+        const registration = current.get(contentKey);
+        if ((registration?.scrollElement ?? null) === scrollElement2) return current;
+        const next = new Map(current);
+        if (!scrollElement2 && !registration?.options) {
+          next.delete(contentKey);
+        } else {
+          next.set(contentKey, { ...registration, scrollElement: scrollElement2 });
+        }
+        return next;
+      });
+    },
+    []
+  );
+  const setOptions = useCallback((contentKey, options2) => {
+    setRegistrations((current) => {
+      const registration = current.get(contentKey);
+      if (registration?.options === options2) return current;
+      const next = new Map(current);
+      if (!options2 && !registration?.scrollElement) {
+        next.delete(contentKey);
+      } else {
+        next.set(contentKey, {
+          ...registration,
+          options: options2 ?? void 0
+        });
+      }
+      return next;
+    });
+  }, []);
+  const activeRegistration = registrations.get(activeContentKey);
+  const scrollElement = activeRegistration?.scrollElement ?? frameScrollElement;
+  const options = activeRegistration?.options;
+  const disableDismiss = options?.disableDismiss ?? false;
+  const customRequestClose = options?.onRequestClose;
+  const variant = options?.variant ?? "detached";
+  const presentation = options?.presentation ?? "content";
+  const fullscreen = presentation === "fullscreen";
+  const requestClose = useCallback(() => {
+    if (disableDismiss) return;
+    if (customRequestClose) {
+      customRequestClose();
+      return;
+    }
+    onRequestClose();
+  }, [customRequestClose, disableDismiss, onRequestClose]);
+  const contextValue = useMemo(
+    () => ({
+      setScrollElement,
+      close: requestClose,
+      canClose: !disableDismiss,
+      variant,
+      presentation,
+      setOptions
+    }),
+    [
+      requestClose,
+      disableDismiss,
+      presentation,
+      setScrollElement,
+      setOptions,
+      variant
+    ]
+  );
+  const surfaceStyle = useMemo(
+    () => fullscreen ? {
+      backgroundColor: "var(--router-bg)",
+      borderRadius: "33px 33px 0 0",
+      boxShadow: "var(--router-card-shadow)",
+      color: "var(--router-text)",
+      overflow: "hidden",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: "100%",
+      maxWidth: "var(--router-container)",
+      height: "calc(100dvh - env(safe-area-inset-top, 0px))",
+      maxHeight: "none",
+      marginInline: "auto"
+    } : variant === "detached" ? {
+      backgroundColor: "var(--router-bg)",
+      borderRadius: "28px 28px 32px 32px",
+      boxShadow: "var(--router-card-shadow)",
+      color: "var(--router-text)",
+      overflow: "hidden",
+      // Centered onto the app column with the same 8px gutter on every detached edge.
+      bottom: 8,
+      left: 8,
+      right: 8,
+      width: "auto",
+      maxWidth: "calc(var(--router-container) - 16px)",
+      marginInline: "auto",
+      maxHeight: "calc(100dvh - 32px - env(safe-area-inset-top, 0px))"
+    } : {
+      backgroundColor: "var(--router-bg)",
+      borderTop: "1px solid var(--router-line)",
+      borderRadius: "28px 28px 0 0",
+      boxShadow: "var(--router-card-shadow)",
+      color: "var(--router-text)",
+      // Centered onto the app column, full column width.
+      left: 0,
+      right: 0,
+      maxWidth: "var(--router-container)",
+      marginInline: "auto",
+      bottom: 0,
+      maxHeight: "calc(100dvh - env(safe-area-inset-top, 0px))"
+    },
+    [fullscreen, variant]
+  );
+  const backdropStyle = useMemo(
+    () => shell === "desktop-fullscreen" ? {
+      background: "var(--router-scrim)",
+      left: 0,
+      right: 0
+    } : {
+      background: "var(--router-scrim)",
+      left: 0,
+      right: 0,
+      maxWidth: "var(--router-container)",
+      marginInline: "auto"
+    },
+    [shell]
+  );
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    SheetSurface,
+    {
+      open,
+      onRequestClose: requestClose,
+      onExitComplete,
+      zIndex,
+      mode: "content",
+      canDismiss: !disableDismiss,
+      shell,
+      backdrop: true,
+      backdropStyle,
+      surfaceClassName: "router-sheet-surface",
+      surfaceStyle,
+      scrollElement,
+      closeTarget: fullscreen ? "viewport" : "surface",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setFrameScrollElement,
+          className: `router-scroll router-sheet-frame-scroll${fullscreen ? " router-sheet-frame-scroll--fullscreen" : ""}`,
+          children
+        }
+      )
+    }
+  ) });
+}
+function SheetRoot({
+  children,
+  disableDismiss,
+  onRequestClose,
+  variant = "detached",
+  presentation = "content"
+}) {
+  const { setOptions } = useSheetContext();
+  const contentKey = useOverlayContentKey();
+  useLayoutEffect(() => {
+    setOptions(contentKey, {
+      disableDismiss,
+      onRequestClose,
+      variant,
+      presentation
+    });
+    return () => setOptions(contentKey, null);
+  }, [
+    contentKey,
+    disableDismiss,
+    onRequestClose,
+    presentation,
+    setOptions,
+    variant
+  ]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function SheetHeader({
+  title,
+  leftAction,
+  rightAction,
+  hideCloseButton,
+  sticky = true,
+  align = "start"
+}) {
+  const { close, canClose, presentation } = useSheetContext();
+  const headerBaseClassName = presentation === "fullscreen" ? "router-modal-header" : "router-sheet-header";
+  const headerClassName = `${headerBaseClassName}${sticky ? ` ${headerBaseClassName}--sticky` : ""}`;
+  const titleClassName = `router-sheet-title${align === "center" ? " router-sheet-title--center" : ""}`;
+  return /* @__PURE__ */ jsxs("div", { className: headerClassName, children: [
+    leftAction != null && /* @__PURE__ */ jsx("div", { className: "router-sheet-header-side", children: leftAction }),
+    title && /* @__PURE__ */ jsx("h2", { className: titleClassName, children: title }),
+    !title && /* @__PURE__ */ jsx("div", { className: "router-sheet-header-spacer" }),
+    /* @__PURE__ */ jsx("div", { className: "router-sheet-header-side router-sheet-header-side--trailing", children: rightAction ?? (hideCloseButton ? null : /* @__PURE__ */ jsx(RouterCloseButton, { onPress: close, disabled: !canClose })) })
+  ] });
+}
+function SheetContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: `router-sheet-content ${className ?? ""}`, children });
+}
+function SheetScrollView({ children, className, style }) {
+  const { setScrollElement } = useSheetContext();
+  const contentKey = useOverlayContentKey();
+  const setScopedScrollElement = useCallback(
+    (el) => setScrollElement(contentKey, el),
+    [contentKey, setScrollElement]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setScopedScrollElement,
+      className: `router-scroll router-sheet-scroll-view ${className ?? ""}`,
+      style,
+      children
+    }
+  );
+}
+function SheetFooter({ children, className }) {
+  const { variant } = useSheetContext();
+  const variantClassName = variant === "detached" ? "router-sheet-footer--detached" : "router-sheet-footer--attached";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `router-sheet-footer ${variantClassName} ${className ?? ""}`,
+      children
+    }
+  );
+}
+var Sheet = Object.assign(SheetRoot, {
+  Header: SheetHeader,
+  Content: SheetContent,
+  ScrollView: SheetScrollView,
+  Footer: SheetFooter
+});
+
+// src/navigationHistory.ts
+var MAX_HISTORY_LENGTH = 64;
+function sameLocation(left, right) {
+  return left.stackKey === right.stackKey && left.pathname === right.pathname;
+}
+function sameScreenRoute(left, right) {
+  return left.stackKey === right.stackKey && left.route.id === right.route.id && left.presentation === right.presentation;
+}
+function latestSnapshots(history) {
+  return history.length > MAX_HISTORY_LENGTH ? history.slice(history.length - MAX_HISTORY_LENGTH) : history;
+}
+function updateSnapshotHistory(history, snapshot) {
+  const browserIndex = history.findIndex(
+    (entry) => entry.historyIndex === snapshot.historyIndex
+  );
+  const locationIndex = history.findIndex((entry) => sameLocation(entry, snapshot));
+  if (snapshot.historyCommit === "replace" && browserIndex !== -1) {
+    return latestSnapshots([...history.slice(0, browserIndex), snapshot]);
+  }
+  if (locationIndex !== -1 && locationIndex !== browserIndex) {
+    return latestSnapshots([...history.slice(0, locationIndex), snapshot]);
+  }
+  if (browserIndex !== -1) {
+    return latestSnapshots([...history.slice(0, browserIndex), snapshot]);
+  }
+  const active = history[history.length - 1];
+  if (active && sameScreenRoute(active, snapshot) && snapshot.splitNavigation?.operation !== "push") {
+    return latestSnapshots([...history.slice(0, -1), snapshot]);
+  }
+  const insertIndex = history.findIndex(
+    (entry) => entry.historyIndex > snapshot.historyIndex
+  );
+  const next = insertIndex === -1 ? [...history, snapshot] : [...history.slice(0, insertIndex), snapshot];
+  return latestSnapshots(next);
+}
+function previousSnapshotFromHistory(history, snapshot) {
+  if (!snapshot) return void 0;
+  const currentIndex = history.findIndex(
+    (entry) => entry.historyIndex === snapshot.historyIndex
+  );
+  if (currentIndex <= 0) return void 0;
+  return history[currentIndex - 1];
+}
+
+// src/utils/id.ts
+function createRouterId() {
+  if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
+    const value = Math.floor(Math.random() * 16);
+    const nibble = char === "x" ? value : value & 3 | 8;
+    return nibble.toString(16);
+  });
+}
+var STACK_ROUTE_KIND = /* @__PURE__ */ Symbol.for("sigmela.stack.route.kind");
+var HISTORY_INDEX_KEY = "__sigmela_idx";
+var SPLIT_NAVIGATION_KEY = "__sigmela_split_navigation";
+var SPLIT_NAVIGATION_ORIGIN_KEY = "__sigmela_split_navigation_origin";
+var ROUTE_TRANSITION_MS = 300;
+var OVERLAY_STACK_BASE_Z = 60;
+var DEFAULT_SPLIT_MIN_WIDTH = 640;
+var DEFAULT_SPLIT_PRIMARY_MAX_WIDTH = 390;
+var DEFAULT_SPLIT_SECONDARY_MIN_WIDTH = 360;
+var RouterRouteContext = createContext(null);
+var RouterActionsContext = createContext(null);
+var SplitPaneNavigationContext = createContext(null);
+var RouterDrawerContext = createContext(null);
+var CurrentModalContext = createContext(null);
+var REACT_COMPONENT_TYPE_SYMBOLS = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.lazy"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+var HISTORY_NAVIGATION_KEY = "__sigmela_nav";
+var HISTORY_COMMIT_KEY = "__sigmela_commit";
+var DEFAULT_SHEET_FALLBACK = /* @__PURE__ */ jsx("div", { className: "min-h-[160px]" });
+function splitViewWideMinWidth(minWidth, primaryMaxWidth, secondaryMinWidth = DEFAULT_SPLIT_SECONDARY_MIN_WIDTH) {
+  return Math.max(minWidth, primaryMaxWidth + secondaryMinWidth);
+}
+function isRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function mutableHistoryState(state) {
+  if (isRecord(state)) return { ...state };
+  if (state == null) return {};
+  return { value: state };
+}
+function splitNavigationFromState(state) {
+  if (!isRecord(state)) return void 0;
+  const value = state[SPLIT_NAVIGATION_KEY];
+  if (!isRecord(value)) return void 0;
+  if (typeof value.splitViewId !== "string" || typeof value.detailPathId !== "string" || typeof value.detailDepth !== "number" || value.operation !== "selection" && value.operation !== "push" && value.operation !== "replace") {
+    return void 0;
+  }
+  return {
+    splitViewId: value.splitViewId,
+    detailPathId: value.detailPathId,
+    detailDepth: value.detailDepth,
+    operation: value.operation
+  };
+}
+function splitNavigationOriginFromState(state) {
+  if (!isRecord(state)) return void 0;
+  const value = state[SPLIT_NAVIGATION_ORIGIN_KEY];
+  if (!isRecord(value)) return void 0;
+  if (typeof value.splitViewId !== "string" || value.pane !== "primary" && value.pane !== "secondary" || typeof value.detailPathId !== "string" || typeof value.detailDepth !== "number") {
+    return void 0;
+  }
+  return {
+    splitViewId: value.splitViewId,
+    pane: value.pane,
+    detailPathId: value.detailPathId,
+    detailDepth: value.detailDepth
+  };
+}
+function stateWithSplitNavigationOrigin(state, origin) {
+  const next = mutableHistoryState(state);
+  next[SPLIT_NAVIGATION_ORIGIN_KEY] = origin;
+  return next;
+}
+function stateWithoutSplitNavigation(state) {
+  const next = mutableHistoryState(state);
+  delete next[SPLIT_NAVIGATION_KEY];
+  delete next[SPLIT_NAVIGATION_ORIGIN_KEY];
+  return next;
+}
+function historyIndexFromState(state) {
+  if (isRecord(state) && typeof state[HISTORY_INDEX_KEY] === "number") {
+    return state[HISTORY_INDEX_KEY];
+  }
+  if (isRecord(state) && typeof state.idx === "number") {
+    return state.idx;
+  }
+  return 0;
+}
+function historyNavigationKeyFromState(state) {
+  if (isRecord(state) && typeof state[HISTORY_NAVIGATION_KEY] === "string") {
+    return state[HISTORY_NAVIGATION_KEY];
+  }
+  return null;
+}
+function historyCommitFromState(state) {
+  if (isRecord(state)) {
+    const commit = state[HISTORY_COMMIT_KEY];
+    if (commit === "sync" || commit === "replace") return commit;
+  }
+  return "push";
+}
+function stateWithHistoryIndex(state, index, navigationKey = createRouterId(), commit = "push") {
+  const next = isRecord(state) ? { ...state } : state == null ? {} : { value: state };
+  next[HISTORY_INDEX_KEY] = index;
+  next[HISTORY_NAVIGATION_KEY] = navigationKey;
+  next[HISTORY_COMMIT_KEY] = commit;
+  return next;
+}
+function navigateWithHistoryIndex(to, options = {}) {
+  const { commit = "push", ...navigationOptions } = options;
+  const currentState = window.history.state;
+  const currentIndex = historyIndexFromState(currentState);
+  const isSyncCommit = commit === "sync";
+  const replacesBrowserEntry = commit !== "push";
+  const nextIndex = replacesBrowserEntry ? currentIndex : currentIndex + 1;
+  const currentNavigationKey = historyNavigationKeyFromState(currentState);
+  const nextNavigationKey = isSyncCommit ? historyNavigationKeyFromState(options.state) ?? currentNavigationKey ?? createRouterId() : replacesBrowserEntry ? currentNavigationKey ?? createRouterId() : createRouterId();
+  navigate(to, {
+    ...navigationOptions,
+    replace: replacesBrowserEntry,
+    state: stateWithHistoryIndex(options.state, nextIndex, nextNavigationKey, commit)
+  });
+}
+function ensureInitialHistoryIndex() {
+  const currentState = window.history.state;
+  const hasIndex = isRecord(currentState) && typeof currentState[HISTORY_INDEX_KEY] === "number";
+  const currentNavigationKey = historyNavigationKeyFromState(currentState);
+  if (hasIndex && currentNavigationKey) return;
+  window.history.replaceState(
+    stateWithHistoryIndex(
+      currentState,
+      historyIndexFromState(currentState),
+      currentNavigationKey ?? createRouterId()
+    ),
+    "",
+    window.location.href
+  );
+}
+function normalizedPath(pathname) {
+  if (pathname === "/") return "/";
+  return pathname.replace(/\/+$/, "") || "/";
+}
+function routeDepth(pathname) {
+  const path = normalizedPath(pathname);
+  if (path === "/") return 0;
+  return path.split("/").filter(Boolean).length;
+}
+function joinRoutePath(parentPath, childPath) {
+  if (childPath == null || childPath === "") return parentPath;
+  if (childPath === "*") return "*";
+  if (childPath.startsWith("/")) return normalizedPath(childPath);
+  if (!parentPath || parentPath === "/") return normalizedPath(`/${childPath}`);
+  return normalizedPath(`${parentPath}/${childPath}`);
+}
+function routeComponent(presentation, container) {
+  return Object.assign(
+    function RouterRouteComponent(_props) {
+      return null;
+    },
+    { [STACK_ROUTE_KIND]: { presentation, container } }
+  );
+}
+function routeDescriptorFromElement(element) {
+  const type = element.type;
+  const descriptor = type[STACK_ROUTE_KIND];
+  if (!descriptor) return null;
+  if (typeof descriptor === "string") return { presentation: descriptor };
+  return descriptor;
+}
+function isStackRouteElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node) != null;
+}
+function isTabBarItemElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "tabbar-item";
+}
+function isDrawerItemElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "drawer-item";
+}
+function isDrawerGroupElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "drawer-group";
+}
+function isDrawerSectionElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "drawer-section";
+}
+function isSplitPrimaryElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "split-primary";
+}
+function isSplitSecondaryElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "split-secondary";
+}
+function isProtectedElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "protected";
+}
+function isRedirectElement(node) {
+  return isValidElement(node) && routeDescriptorFromElement(node)?.container === "redirect";
+}
+function isElementType(value) {
+  if (isValidElement(value)) return false;
+  if (typeof value === "function") return true;
+  if (typeof value !== "object" || value === null) return false;
+  const reactType = value.$$typeof;
+  return reactType ? REACT_COMPONENT_TYPE_SYMBOLS.has(reactType) : false;
+}
+function flattenRouteNodes(children) {
+  const result = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === Fragment$1) {
+      result.push(...flattenRouteNodes(child.props.children));
+      return;
+    }
+    result.push(child);
+  });
+  return result;
+}
+function splitRouteChildren(children) {
+  if (typeof children === "function") {
+    return { routeChildren: [], renderChildren: children };
+  }
+  const childArray = flattenRouteNodes(children);
+  const routeChildren = [];
+  const nonRouteChildren = [];
+  for (const child of childArray) {
+    if (isStackRouteElement(child)) {
+      routeChildren.push(child);
+    } else {
+      nonRouteChildren.push(child);
+    }
+  }
+  if (routeChildren.length === 0) {
+    return { routeChildren, renderChildren: children };
+  }
+  return {
+    routeChildren,
+    renderChildren: nonRouteChildren.length > 0 ? nonRouteChildren : void 0
+  };
+}
+function drawerItemFromElement(element, parentPath) {
+  const itemPath = joinRoutePath(parentPath, element.props.path) ?? "/";
+  return {
+    type: "item",
+    id: element.props.id ?? normalizedPath(itemPath),
+    path: itemPath,
+    label: element.props.label,
+    icon: element.props.icon,
+    badge: element.props.badge,
+    hidden: element.props.hidden
+  };
+}
+function collectDrawerNavigation(routeChildren, parentPath, parentId) {
+  const nodes = [];
+  const entries = [];
+  routeChildren.forEach((child, index) => {
+    if (isDrawerSectionElement(child)) {
+      nodes.push({
+        type: "section",
+        id: child.props.id ?? `${parentId}/drawer-section-${index}`,
+        title: child.props.title,
+        hidden: child.props.hidden
+      });
+      return;
+    }
+    if (isDrawerItemElement(child)) {
+      const item = drawerItemFromElement(child, parentPath);
+      nodes.push(item);
+      entries.push({ element: child, item });
+      return;
+    }
+    if (!isDrawerGroupElement(child)) return;
+    const groupChildren = splitRouteChildren(child.props.children).routeChildren;
+    const groupEntries = groupChildren.filter(isDrawerItemElement).map((element) => {
+      const item = drawerItemFromElement(element, parentPath);
+      return { element, item };
+    });
+    if (groupEntries.length === 0) return;
+    nodes.push({
+      type: "group",
+      id: child.props.id ?? `${parentId}/drawer-group-${index}`,
+      label: child.props.label,
+      icon: child.props.icon,
+      chevron: child.props.chevron,
+      hidden: child.props.hidden,
+      items: groupEntries.map((entry) => entry.item)
+    });
+    entries.push(...groupEntries);
+  });
+  return { nodes, entries };
+}
+function compiledRouteFromProps(props, path, routeId, presentation, animation, renderChildren, inheritedGuards) {
+  const elementType = props.element !== void 0 && isElementType(props.element) ? props.element : void 0;
+  const elementNode = props.element !== void 0 && !elementType ? props.element : void 0;
+  const hasRenderable = props.element !== void 0 || props.component !== void 0 || renderChildren !== void 0;
+  if (!hasRenderable) return null;
+  return {
+    id: routeId,
+    path,
+    presentation,
+    animation,
+    overlayLayout: props.overlayLayout,
+    guards: inheritedGuards,
+    stackKey: props.stackKey,
+    fallback: props.fallback,
+    element: elementNode,
+    elementType,
+    component: props.component,
+    layout: props.layout,
+    render: typeof renderChildren === "function" ? renderChildren : void 0,
+    childrenNode: typeof renderChildren === "function" ? void 0 : renderChildren
+  };
+}
+function compileStackRoutes(children, parentPath, parentId = "root", inheritedGuards = []) {
+  const routes = [];
+  flattenRouteNodes(children).forEach((child, index) => {
+    if (!isStackRouteElement(child)) return;
+    const descriptor = routeDescriptorFromElement(child) ?? { presentation: "push" };
+    const presentation = descriptor.presentation;
+    const props = child.props;
+    const animation = props.animation ?? "push";
+    const path = joinRoutePath(parentPath, props.path);
+    const { routeChildren, renderChildren } = splitRouteChildren(props.children);
+    const routeId = props.id ?? `${parentId}/${index}:${path ?? "*"}:${presentation}`;
+    if (isRedirectElement(child)) {
+      routes.push({
+        id: routeId,
+        path,
+        presentation,
+        animation,
+        overlayLayout: props.overlayLayout,
+        redirectTo: child.props.to,
+        guards: inheritedGuards,
+        stackKey: props.stackKey,
+        fallback: props.fallback
+      });
+      return;
+    }
+    if (isProtectedElement(child)) {
+      const guard = {
+        id: props.id ?? routeId,
+        when: child.props.when,
+        redirectTo: child.props.redirectTo
+      };
+      if (routeChildren.length > 0) {
+        routes.push(
+          ...compileStackRoutes(routeChildren, path, routeId, [
+            ...inheritedGuards,
+            guard
+          ])
+        );
+      }
+      return;
+    }
+    const elementType = props.element !== void 0 && isElementType(props.element) ? props.element : void 0;
+    const elementNode = props.element !== void 0 && !elementType ? props.element : void 0;
+    const hasRenderable = props.element !== void 0 || props.component !== void 0 || renderChildren !== void 0;
+    if (isModalLikePresentation(presentation) && routeChildren.length > 0) {
+      const compiledChildren2 = compileStackRoutes(
+        routeChildren,
+        path,
+        routeId,
+        inheritedGuards
+      );
+      const nestedOverlays = compiledChildren2.filter(
+        (route) => route.presentation !== "push"
+      );
+      const flowRoutes = [];
+      const rootRoute = compiledRouteFromProps(
+        props,
+        path,
+        `${routeId}/overlay-root`,
+        "push",
+        animation,
+        renderChildren,
+        inheritedGuards
+      );
+      if (rootRoute) flowRoutes.push(rootRoute);
+      flowRoutes.push(
+        ...compiledChildren2.filter((route) => route.presentation === "push")
+      );
+      routes.push(...nestedOverlays);
+      if (flowRoutes.length === 0) return;
+      const overlayFlow = {
+        id: `${routeId}/overlay-flow`,
+        kind: presentation,
+        routes: flowRoutes
+      };
+      for (const flowRoute of flowRoutes) {
+        routes.push({
+          id: `${overlayFlow.id}:${flowRoute.id}`,
+          path: flowRoute.path,
+          presentation,
+          animation,
+          overlayLayout: props.overlayLayout,
+          redirectTo: flowRoute.redirectTo,
+          guards: flowRoute.guards,
+          stackKey: props.stackKey ?? routeId,
+          fallback: flowRoute.fallback ?? props.fallback,
+          childRoute: flowRoute,
+          overlayFlow
+        });
+      }
+      return;
+    }
+    if (descriptor.container === "splitview") {
+      const primarySlot = routeChildren.find(isSplitPrimaryElement);
+      const secondarySlot = routeChildren.find(isSplitSecondaryElement);
+      const compileSplitSlot = (slot, slotName) => {
+        if (!slot) return [];
+        const slotProps = slot.props;
+        const slotPath = joinRoutePath(path, slotProps.path);
+        const { routeChildren: slotRouteChildren, renderChildren: slotRenderChildren } = splitRouteChildren(slotProps.children);
+        const slotRouteId = slotProps.id ?? `${routeId}/${slotName}`;
+        const slotAnimation = slotProps.animation ?? "push";
+        const slotRoutes = [];
+        const slotOwnRoute = compiledRouteFromProps(
+          slotProps,
+          slotPath,
+          slotRouteId,
+          presentation,
+          slotAnimation,
+          slotRenderChildren,
+          inheritedGuards
+        );
+        if (slotOwnRoute) {
+          slotRoutes.push(slotOwnRoute);
+        }
+        if (slotRouteChildren.length > 0) {
+          slotRoutes.push(
+            ...compileStackRoutes(
+              slotRouteChildren,
+              slotPath,
+              slotRouteId,
+              inheritedGuards
+            )
+          );
+        }
+        return slotRoutes;
+      };
+      const primaryRoutes = compileSplitSlot(primarySlot, "primary");
+      const secondaryRoutes = compileSplitSlot(secondarySlot, "secondary");
+      for (const splitChildRoute of [...primaryRoutes, ...secondaryRoutes]) {
+        if (splitChildRoute.presentation !== "push") {
+          routes.push(splitChildRoute);
+        }
+      }
+      const primaryPushRoutes = primaryRoutes.filter(
+        (route) => route.presentation === "push"
+      );
+      const secondaryPushRoutes = secondaryRoutes.filter(
+        (route) => route.presentation === "push"
+      );
+      const defaultPrimaryRoute = primaryPushRoutes[0];
+      if (!defaultPrimaryRoute) {
+        return;
+      }
+      const minWidth = props.minWidth ?? DEFAULT_SPLIT_MIN_WIDTH;
+      const primaryMaxWidth = props.primaryMaxWidth ?? DEFAULT_SPLIT_PRIMARY_MAX_WIDTH;
+      const secondaryMinWidth = props.secondaryMinWidth ?? DEFAULT_SPLIT_SECONDARY_MIN_WIDTH;
+      const wideMinWidth = splitViewWideMinWidth(
+        minWidth,
+        primaryMaxWidth,
+        secondaryMinWidth
+      );
+      const splitViewLayoutId = `${routeId}/splitview`;
+      for (const primaryRoute of primaryPushRoutes) {
+        routes.push({
+          id: `${routeId}/splitview:primary:${primaryRoute.id}`,
+          path: primaryRoute.path,
+          presentation: primaryRoute.presentation,
+          animation: primaryRoute.animation,
+          overlayLayout: primaryRoute.overlayLayout,
+          guards: primaryRoute.guards,
+          stackKey: props.stackKey ?? routeId,
+          fallback: primaryRoute.fallback ?? props.fallback,
+          element: elementNode,
+          elementType,
+          component: props.component,
+          layout: props.layout,
+          render: typeof renderChildren === "function" ? renderChildren : void 0,
+          childrenNode: typeof renderChildren === "function" ? void 0 : renderChildren,
+          container: descriptor.container,
+          childRoute: primaryRoute,
+          splitView: {
+            primaryRoute,
+            secondaryRoutes: secondaryPushRoutes,
+            activePane: "primary",
+            minWidth,
+            primaryMaxWidth,
+            secondaryMinWidth,
+            wideMinWidth,
+            layoutId: splitViewLayoutId
+          }
+        });
+      }
+      for (const secondaryRoute of secondaryPushRoutes) {
+        routes.push({
+          id: `${routeId}/splitview:secondary:${secondaryRoute.id}`,
+          path: secondaryRoute.path,
+          presentation: secondaryRoute.presentation,
+          animation: secondaryRoute.animation,
+          overlayLayout: secondaryRoute.overlayLayout,
+          guards: secondaryRoute.guards,
+          stackKey: props.stackKey ?? routeId,
+          fallback: secondaryRoute.fallback ?? props.fallback,
+          element: elementNode,
+          elementType,
+          component: props.component,
+          layout: props.layout,
+          render: typeof renderChildren === "function" ? renderChildren : void 0,
+          childrenNode: typeof renderChildren === "function" ? void 0 : renderChildren,
+          container: descriptor.container,
+          childRoute: secondaryRoute,
+          splitView: {
+            primaryRoute: defaultPrimaryRoute,
+            secondaryRoute,
+            secondaryRoutes: secondaryPushRoutes,
+            activePane: "secondary",
+            minWidth,
+            primaryMaxWidth,
+            secondaryMinWidth,
+            wideMinWidth,
+            layoutId: splitViewLayoutId
+          }
+        });
+      }
+      return;
+    }
+    if (descriptor.container === "tabbar" || descriptor.container === "drawer") {
+      const isTabBar = descriptor.container === "tabbar";
+      const drawerNavigation = isTabBar ? null : collectDrawerNavigation(routeChildren, path, routeId);
+      const navigationItems = isTabBar ? routeChildren.filter(isTabBarItemElement) : drawerNavigation.entries.map((entry) => entry.element);
+      if (navigationItems.length > 0) {
+        const tabs = isTabBar ? navigationItems.map((item) => {
+          const itemPath = joinRoutePath(path, item.props.path) ?? "/";
+          return {
+            id: item.props.id ?? normalizedPath(itemPath),
+            path: itemPath,
+            label: item.props.label,
+            icon: item.props.icon
+          };
+        }) : void 0;
+        const drawerItems = drawerNavigation?.nodes;
+        navigationItems.forEach((item, itemIndex) => {
+          const itemProps = item.props;
+          const itemPath = joinRoutePath(path, itemProps.path);
+          const navigationItem = isTabBar ? tabs?.[itemIndex] : drawerNavigation?.entries[itemIndex]?.item;
+          if (!navigationItem) return;
+          const { routeChildren: itemRouteChildren, renderChildren: itemRenderChildren } = splitRouteChildren(itemProps.children);
+          const itemRouteId = itemProps.id ?? `${routeId}/${descriptor.container}-${itemIndex}:${itemPath ?? "*"}:push`;
+          const itemAnimation = itemProps.animation ?? "push";
+          const itemElementType = itemProps.element !== void 0 && isElementType(itemProps.element) ? itemProps.element : void 0;
+          const itemElementNode = itemProps.element !== void 0 && !itemElementType ? itemProps.element : void 0;
+          const itemHasRenderable = itemProps.element !== void 0 || itemProps.component !== void 0 || itemRenderChildren !== void 0;
+          const itemChildRoutes = [];
+          if (itemHasRenderable) {
+            itemChildRoutes.push({
+              id: itemRouteId,
+              path: itemPath,
+              presentation,
+              animation: itemAnimation,
+              overlayLayout: itemProps.overlayLayout,
+              guards: inheritedGuards,
+              stackKey: itemProps.stackKey,
+              fallback: itemProps.fallback,
+              element: itemElementNode,
+              elementType: itemElementType,
+              component: itemProps.component,
+              layout: itemProps.layout,
+              render: typeof itemRenderChildren === "function" ? itemRenderChildren : void 0,
+              childrenNode: typeof itemRenderChildren === "function" ? void 0 : itemRenderChildren
+            });
+          }
+          if (itemRouteChildren.length > 0) {
+            itemChildRoutes.push(
+              ...compileStackRoutes(
+                itemRouteChildren,
+                itemPath,
+                itemRouteId,
+                inheritedGuards
+              )
+            );
+          }
+          for (const childRoute of itemChildRoutes) {
+            if (childRoute.presentation !== "push") {
+              routes.push(childRoute);
+              continue;
+            }
+            const containerRoute = {
+              id: `${routeId}/${descriptor.container}:${navigationItem.id}:${childRoute.id}`,
+              path: childRoute.path,
+              presentation: childRoute.presentation,
+              animation: childRoute.animation,
+              overlayLayout: childRoute.overlayLayout,
+              guards: childRoute.guards,
+              stackKey: props.stackKey ?? routeId,
+              fallback: childRoute.fallback ?? props.fallback,
+              element: elementNode,
+              elementType,
+              component: props.component,
+              layout: props.layout,
+              render: typeof renderChildren === "function" ? renderChildren : void 0,
+              childrenNode: typeof renderChildren === "function" ? void 0 : renderChildren,
+              container: descriptor.container,
+              childRoute,
+              drawerAside: isTabBar ? void 0 : props.aside,
+              drawerFooter: isTabBar ? void 0 : props.footer
+            };
+            if (isTabBar && tabs) {
+              containerRoute.tabBar = {
+                tabs,
+                activeTab: navigationItem.id
+              };
+            } else if (!isTabBar && drawerItems) {
+              containerRoute.drawer = {
+                items: drawerItems,
+                activeItem: navigationItem.id
+              };
+            }
+            routes.push(containerRoute);
+          }
+        });
+        return;
+      }
+      const compiledChildren2 = routeChildren.length > 0 ? compileStackRoutes(routeChildren, path, routeId, inheritedGuards) : [];
+      for (const childRoute of compiledChildren2) {
+        if (childRoute.presentation !== "push") {
+          routes.push(childRoute);
+          continue;
+        }
+        routes.push({
+          id: routeId,
+          path: childRoute.path,
+          presentation,
+          animation: childRoute.animation,
+          overlayLayout: childRoute.overlayLayout,
+          guards: childRoute.guards,
+          stackKey: props.stackKey ?? routeId,
+          fallback: childRoute.fallback ?? props.fallback,
+          element: elementNode,
+          elementType,
+          component: props.component,
+          layout: props.layout,
+          render: typeof renderChildren === "function" ? renderChildren : void 0,
+          childrenNode: typeof renderChildren === "function" ? void 0 : renderChildren,
+          container: descriptor.container,
+          childRoute
+        });
+      }
+      return;
+    }
+    if (descriptor.container === "tabbar-item" || descriptor.container === "drawer-group" || descriptor.container === "drawer-section" || descriptor.container === "drawer-item" || descriptor.container === "split-primary" || descriptor.container === "split-secondary") {
+      return;
+    }
+    const compiledChildren = routeChildren.length > 0 ? compileStackRoutes(routeChildren, path, routeId, inheritedGuards) : [];
+    if (hasRenderable) {
+      routes.push({
+        id: routeId,
+        path,
+        presentation,
+        animation,
+        overlayLayout: props.overlayLayout,
+        guards: inheritedGuards,
+        stackKey: props.stackKey,
+        fallback: props.fallback,
+        element: elementNode,
+        elementType,
+        component: props.component,
+        layout: props.layout,
+        render: typeof renderChildren === "function" ? renderChildren : void 0,
+        childrenNode: typeof renderChildren === "function" ? void 0 : renderChildren
+      });
+    }
+    if (compiledChildren.length > 0) {
+      routes.push(...compiledChildren);
+    }
+  });
+  return routes;
+}
+function matchStackRouteByPresentation(routes, parser, pathname, presentations) {
+  for (const route of routes) {
+    if (!presentations.has(route.presentation)) continue;
+    const [matches, params] = matchRoute(parser, route.path ?? "*", pathname);
+    if (matches) {
+      return {
+        route,
+        params: { ...params }
+      };
+    }
+  }
+  return null;
+}
+function splitViewRouteForCompiledRoute(route) {
+  if (route?.container === "splitview" && route.splitView) return route;
+  if (route?.childRoute?.container === "splitview" && route.childRoute.splitView) {
+    return route.childRoute;
+  }
+  return void 0;
+}
+function stateForSplitNavigationTarget(state, targetMatch, action) {
+  const origin = splitNavigationOriginFromState(state);
+  if (!origin) return state;
+  const next = mutableHistoryState(state);
+  delete next[SPLIT_NAVIGATION_ORIGIN_KEY];
+  const targetSplitRoute = splitViewRouteForCompiledRoute(targetMatch?.route);
+  const targetSplit = targetSplitRoute?.splitView;
+  if (!targetSplit || targetSplit.layoutId !== origin.splitViewId || targetSplit.activePane !== "secondary") {
+    delete next[SPLIT_NAVIGATION_KEY];
+    return next;
+  }
+  const metadata = (
+    // A primary selection establishes a new detail root. Navigation initiated
+    // inside secondary continues (or explicitly replaces) that detail path.
+    origin.pane === "primary" ? {
+      splitViewId: origin.splitViewId,
+      detailPathId: createRouterId(),
+      detailDepth: 0,
+      operation: "selection"
+    } : {
+      splitViewId: origin.splitViewId,
+      detailPathId: origin.detailPathId,
+      detailDepth: action === "navigate" ? origin.detailDepth + 1 : origin.detailDepth,
+      operation: action === "navigate" ? "push" : "replace"
+    }
+  );
+  next[SPLIT_NAVIGATION_KEY] = metadata;
+  return next;
+}
+function routeRenderPropsForMatch(pathname, search, historyState, match) {
+  return {
+    params: match.params,
+    pathname: normalizedPath(pathname),
+    search,
+    historyState,
+    presentation: match.route.presentation
+  };
+}
+function resolveGuardValue(value, props) {
+  return typeof value === "function" ? value(props) : value;
+}
+function guardRedirectForMatch(match, pathname, search, historyState) {
+  const props = routeRenderPropsForMatch(pathname, search, historyState, match);
+  for (const guard of match.route.guards) {
+    if (resolveGuardValue(guard.when, props)) continue;
+    return resolveGuardValue(guard.redirectTo, props);
+  }
+  if (match.route.redirectTo) {
+    return resolveGuardValue(match.route.redirectTo, props);
+  }
+  return null;
+}
+var PUSH_PRESENTATIONS = /* @__PURE__ */ new Set(["push"]);
+var OVERLAY_PRESENTATIONS = /* @__PURE__ */ new Set(["modal", "sheet"]);
+function parseNavigationTarget(to, currentPathname) {
+  const base = `${window.location.origin}${currentPathname.startsWith("/") ? currentPathname : `/${currentPathname}`}`;
+  const url = new URL(to, base);
+  return {
+    pathname: normalizedPath(url.pathname),
+    search: url.search
+  };
+}
+function pathForRoutePattern(pattern, params) {
+  if (!pattern || pattern === "*") return null;
+  let missingParam = false;
+  const pathname = pattern.replace(/:([A-Za-z0-9_]+)/g, (_match, key) => {
+    const value = params[key];
+    if (value == null) {
+      missingParam = true;
+      return "";
+    }
+    return encodeURIComponent(String(value));
+  });
+  if (missingParam || pathname.includes("*")) return null;
+  return normalizedPath(pathname);
+}
+function resolveStackKey(match, props) {
+  const { route } = match;
+  if (typeof route.stackKey === "function") return route.stackKey(props);
+  if (typeof route.stackKey === "string") return route.stackKey;
+  return normalizedPath(props.pathname);
+}
+function stackSnapshot(pathname, search, historyState, match) {
+  const normalized = normalizedPath(pathname);
+  const historyIndex = historyIndexFromState(historyState);
+  const historyNavigationKey = historyNavigationKeyFromState(historyState) ?? `navigation-${historyIndex}`;
+  const props = routeRenderPropsForMatch(normalized, search, historyState, match);
+  const stackKey = resolveStackKey(match, props);
+  const splitNavigation = splitNavigationFromState(historyState);
+  return {
+    ...match,
+    stackKey,
+    locationKey: `${normalized}${search}:${historyIndex}:${historyNavigationKey}`,
+    historyNavigationKey,
+    pathname: normalized,
+    search,
+    historyState,
+    historyIndex,
+    historyCommit: historyCommitFromState(historyState),
+    depth: routeDepth(normalized),
+    presentation: match.route.presentation,
+    splitNavigation
+  };
+}
+function resolveDirection(previous, current) {
+  if (!previous) return "forward";
+  if (current.historyIndex < previous.historyIndex) return "back";
+  if (current.historyIndex > previous.historyIndex) return "forward";
+  if (current.depth < previous.depth) return "back";
+  return "forward";
+}
+function createEntry(snapshot, enterDirection, animateEnter) {
+  const transitionKey = animateEnter ? `${snapshot.stackKey}:${snapshot.locationKey}:${createRouterId()}` : `${snapshot.stackKey}:${snapshot.locationKey}`;
+  return {
+    ...snapshot,
+    id: transitionKey,
+    transitionKey,
+    enterDirection,
+    exitDirection: "back",
+    animateEnter
+  };
+}
+function markCommitted(entry) {
+  return entry.animateEnter ? { ...entry, animateEnter: false } : entry;
+}
+function mergeEntrySnapshot(entry, snapshot) {
+  return {
+    ...entry,
+    ...snapshot,
+    id: entry.id,
+    transitionKey: entry.transitionKey,
+    animateEnter: entry.animateEnter
+  };
+}
+function isModalLikePresentation(presentation) {
+  return presentation === "modal" || presentation === "sheet";
+}
+function isTabBarStackEntry(entry) {
+  return entry.route.container === "tabbar";
+}
+function isDrawerContainerUpdate(previous, current) {
+  return previous.stackKey === current.stackKey && previous.route.container === "drawer" && current.route.container === "drawer";
+}
+function canNavigateBackWithinDrawer(previous, current) {
+  if (!previous || !current) return false;
+  return previous.stackKey === current.stackKey && previous.route.container === "drawer" && current.route.container === "drawer" && previous.route.drawer?.activeItem === current.route.drawer?.activeItem && previous.pathname !== current.pathname;
+}
+function isTabBarContainerUpdate(previous, current) {
+  return previous.stackKey === current.stackKey && (isTabBarStackEntry(previous) || isTabBarStackEntry(current));
+}
+function stackEntryContentContainer(entry) {
+  return entry.route.childRoute?.container ?? entry.route.container;
+}
+function splitViewRouteForSnapshot(snapshot) {
+  return splitViewRouteForCompiledRoute(snapshot.route);
+}
+function activeSplitViewLayout(layoutId) {
+  if (typeof document === "undefined") return null;
+  const splitViews = document.querySelectorAll(
+    ".sigmela-split-view[data-router-split-view-id]"
+  );
+  for (const splitView of splitViews) {
+    if (splitView.dataset.routerSplitViewId !== layoutId) continue;
+    const stackScreen = splitView.closest(
+      '[data-route-stack-screen="true"]'
+    );
+    if (stackScreen?.dataset.routeStackPhase !== "active") continue;
+    const layout = splitView.dataset.layout;
+    if (layout === "wide") return true;
+    if (layout === "narrow") return false;
+  }
+  return null;
+}
+function isWideSplitViewRoute(route) {
+  const splitView = route?.splitView;
+  if (!splitView || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  const activeLayout = activeSplitViewLayout(splitView.layoutId);
+  if (activeLayout !== null) return activeLayout;
+  return window.matchMedia(`(min-width: ${splitView.wideMinWidth}px)`).matches;
+}
+function secondarySplitBackTarget(snapshot) {
+  if (!snapshot) return null;
+  const splitRoute = splitViewRouteForSnapshot(snapshot);
+  const splitView = splitRoute?.splitView;
+  if (!splitView || splitView.activePane !== "secondary") return null;
+  if (!isWideSplitViewRoute(splitRoute)) return null;
+  const currentPath = normalizedPath(snapshot.pathname);
+  const parentSecondaryRoute = (splitView.secondaryRoutes ?? []).map((route) => pathForRoutePattern(route.path, snapshot.params)).filter(
+    (path) => Boolean(path && path !== currentPath && currentPath.startsWith(`${path}/`))
+  ).sort((a, b) => routeDepth(b) - routeDepth(a))[0];
+  if (parentSecondaryRoute) return parentSecondaryRoute;
+  const target = pathForRoutePattern(splitView.primaryRoute.path, snapshot.params);
+  if (!target || target === snapshot.pathname) return null;
+  return target;
+}
+function canNavigateBackWithinSplit(previous, current) {
+  if (!previous || !current) return false;
+  const currentRoute = splitViewRouteForSnapshot(current);
+  const previousRoute = splitViewRouteForSnapshot(previous);
+  const currentSplit = currentRoute?.splitView;
+  const previousSplit = previousRoute?.splitView;
+  if (!currentSplit || currentSplit.activePane !== "secondary") return false;
+  if (!previousSplit) return false;
+  if (!isWideSplitViewRoute(currentRoute)) return false;
+  return previous.stackKey === current.stackKey && previousSplit.primaryRoute.id === currentSplit.primaryRoute.id;
+}
+function existingStackEntryIndexForSnapshot(entries, snapshot) {
+  const locationIndex = entries.findIndex(
+    (entry) => entry.locationKey === snapshot.locationKey
+  );
+  if (locationIndex !== -1) return locationIndex;
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const entry = entries[i];
+    if (entry.stackKey === snapshot.stackKey && entry.pathname === snapshot.pathname && entry.search === snapshot.search) {
+      return i;
+    }
+  }
+  return -1;
+}
+function syncTargetEntryIndex(entries, snapshot) {
+  if (snapshot.historyCommit !== "sync") return -1;
+  return entries.findIndex(
+    (entry) => entry.historyNavigationKey === snapshot.historyNavigationKey
+  );
+}
+function entriesRevealingSnapshot(entries, existingIndex, snapshot) {
+  const revealed = entries[existingIndex];
+  const base = entries.slice(0, existingIndex).map(markCommitted);
+  return [
+    ...base,
+    {
+      ...revealed,
+      ...snapshot,
+      id: revealed.id,
+      animateEnter: false,
+      enterDirection: "back"
+    }
+  ];
+}
+function previousStackEntry(entries, active) {
+  if (!active) return void 0;
+  const activeIndex = entries.findIndex((entry) => entry.id === active.id);
+  if (activeIndex <= 0) return void 0;
+  return entries[activeIndex - 1];
+}
+function previousSnapshotInDetailPath(history, current) {
+  const navigation = current.splitNavigation;
+  if (!navigation || navigation.detailDepth <= 0) return void 0;
+  const currentIndex = history.findIndex(
+    (entry) => entry.historyIndex === current.historyIndex
+  );
+  if (currentIndex <= 0) return void 0;
+  for (let index = currentIndex - 1; index >= 0; index -= 1) {
+    const candidate = history[index];
+    const candidateNavigation = candidate.splitNavigation;
+    if (candidateNavigation?.splitViewId === navigation.splitViewId && candidateNavigation.detailPathId === navigation.detailPathId && candidateNavigation.detailDepth === navigation.detailDepth - 1) {
+      return candidate;
+    }
+  }
+  return void 0;
+}
+function navigateToSnapshot(snapshot) {
+  if (!snapshot) return false;
+  navigateWithHistoryIndex(`${snapshot.pathname}${snapshot.search}`, {
+    commit: "sync",
+    state: snapshot.historyState
+  });
+  return true;
+}
+function isWideSplitInternalUpdate(previous, current) {
+  const previousRoute = splitViewRouteForSnapshot(previous);
+  const currentRoute = splitViewRouteForSnapshot(current);
+  const previousSplit = previousRoute?.splitView;
+  const currentSplit = currentRoute?.splitView;
+  if (!previousSplit || !currentSplit) return false;
+  return previous.stackKey === current.stackKey && (previousSplit.activePane === "secondary" || currentSplit.activePane === "secondary") && previousSplit.primaryRoute.id === currentSplit.primaryRoute.id && isWideSplitViewRoute(currentRoute);
+}
+function isSameScreenRouteUpdate(previous, current) {
+  return previous.stackKey === current.stackKey && previous.route.id === current.route.id && previous.presentation === current.presentation;
+}
+function shouldReplaceActiveStackEntry(previous, current) {
+  const isSecondaryPush = current.splitPane === "secondary" && current.splitNavigation?.operation === "push";
+  return !current.forcePushRouteChanges && !isSecondaryPush && isSameScreenRouteUpdate(previous, current) || isWideSplitInternalUpdate(previous, current) || isDrawerContainerUpdate(previous, current) || isTabBarContainerUpdate(previous, current);
+}
+function isExplicitStackReplace(previous, current) {
+  return current.historyCommit === "replace" && previous.historyIndex === current.historyIndex;
+}
+function replaceActiveStackEntry(entries, activeId, snapshot, direction, commitInactive) {
+  return entries.map((entry) => {
+    if (entry.id === activeId) {
+      return {
+        ...mergeEntrySnapshot(entry, snapshot),
+        enterDirection: direction
+      };
+    }
+    return commitInactive ? markCommitted(entry) : entry;
+  });
+}
+function presentationClass(presentation) {
+  return presentation;
+}
+function activeAnimationClass(entry) {
+  if (entry.presentation !== "push") return "none";
+  if (entry.route.animation === "slide_from_bottom" && entry.enterDirection !== "back") {
+    return "slide-from-bottom-enter";
+  }
+  return entry.enterDirection === "back" ? "pop-enter" : "push-enter";
+}
+function exitingAnimationClass(entry) {
+  if (entry.presentation !== "push") return "none";
+  if (entry.route.animation === "slide_from_bottom" && entry.exitDirection === "back") {
+    return "slide-from-bottom-exit";
+  }
+  return entry.exitDirection === "back" ? "pop-exit" : "push-exit";
+}
+function inactiveAnimationClass(entry, activeEntry, direction) {
+  if (entry.presentation !== "push" || activeEntry?.presentation !== "push") {
+    return "none";
+  }
+  if (activeEntry.route.animation === "slide_from_bottom") {
+    return "none";
+  }
+  return direction === "back" ? "pop-background" : "push-background";
+}
+function transitionStatusForEntry(entry, status) {
+  if (status) return status;
+  return entry.animateEnter ? "preEnter" : "entered";
+}
+function phaseForEntry(entry, activeIds, activeId) {
+  if (!activeIds.has(entry.id)) return "exiting";
+  return entry.id === activeId ? "active" : "inactive";
+}
+function animationClassForEntry(entry, phase, activeEntry, direction) {
+  if (phase === "exiting") return exitingAnimationClass(entry);
+  if (phase === "active") return activeAnimationClass(entry);
+  return inactiveAnimationClass(entry, activeEntry, direction);
+}
+function screenClassName(entry, phase, transitionStatus, animationType) {
+  return [
+    "screen-stack-item",
+    presentationClass(entry.presentation),
+    animationType,
+    `transition-${transitionStatus}`,
+    `phase-${phase}`
+  ].join(" ");
+}
+function frozenLocationHook(pathname) {
+  return () => [pathname, navigateWithHistoryIndex];
+}
+function searchParamsForSearch(search) {
+  return new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+}
+function routeContextValue(entry) {
+  return {
+    params: entry.params,
+    pathname: entry.pathname,
+    search: entry.search,
+    searchParams: searchParamsForSearch(entry.search),
+    historyState: entry.historyState,
+    presentation: entry.presentation,
+    splitPane: entry.splitPane
+  };
+}
+function routeContextValueFromProps(props) {
+  return {
+    ...props,
+    searchParams: searchParamsForSearch(props.search)
+  };
+}
+function pathnameForRouteContext(route, fallbackPathname) {
+  const routePath = route.path;
+  if (!routePath || routePath.includes(":") || routePath.includes("*")) {
+    return fallbackPathname;
+  }
+  return normalizedPath(routePath);
+}
+function useMinWidth(minWidth) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return false;
+    }
+    return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(`(min-width: ${minWidth}px)`);
+    const handleChange = (event) => setMatches(event.matches);
+    setMatches(mediaQuery.matches);
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    const mediaQueryWithListener = mediaQuery;
+    mediaQueryWithListener.addListener?.(handleChange);
+    return () => mediaQueryWithListener.removeListener?.(handleChange);
+  }, [minWidth]);
+  return matches;
+}
+function measuredElementWidth(element) {
+  return element.getBoundingClientRect().width || element.clientWidth || 0;
+}
+function widthMatchesMinWidth(width, minWidth) {
+  if (width <= 0) return null;
+  return width >= minWidth;
+}
+function useElementMinWidth(minWidth) {
+  const ref = useRef(null);
+  const viewportMatches = useMinWidth(minWidth);
+  const [elementMatches, setElementMatches] = useState(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      setElementMatches(null);
+      return;
+    }
+    const updateWidth = (width) => {
+      const nextMatches = widthMatchesMinWidth(width, minWidth);
+      setElementMatches(
+        (currentMatches) => currentMatches === nextMatches ? currentMatches : nextMatches
+      );
+    };
+    const measure = () => updateWidth(measuredElementWidth(element));
+    measure();
+    let observer = null;
+    if (typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
+      observer = new window.ResizeObserver((entries) => {
+        updateWidth(entries[0]?.contentRect.width ?? measuredElementWidth(element));
+      });
+      observer.observe(element);
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", measure);
+    }
+    return () => {
+      observer?.disconnect();
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", measure);
+      }
+    };
+  }, [minWidth]);
+  return [ref, elementMatches ?? viewportMatches];
+}
+function useRoute() {
+  const route = useContext(RouterRouteContext);
+  if (!route) {
+    throw new Error("Router route hooks must be used inside <Router>");
+  }
+  return route;
+}
+function useCurrentRoute() {
+  return useRoute();
+}
+function useParams() {
+  return useRoute().params;
+}
+function useSearchParams() {
+  return useRoute().searchParams;
+}
+function useHistoryState() {
+  return useRoute().historyState;
+}
+function useRouter() {
+  const router = useContext(RouterActionsContext);
+  const splitPaneOrigin = useContext(SplitPaneNavigationContext);
+  if (!router) {
+    throw new Error("useRouter must be used inside <Router>");
+  }
+  return useMemo(() => {
+    if (!splitPaneOrigin) return router;
+    return {
+      ...router,
+      navigate: (to, options = {}) => {
+        if (typeof to === "number") {
+          router.navigate(to, options);
+          return;
+        }
+        router.navigate(to, {
+          ...options,
+          state: stateWithSplitNavigationOrigin(options.state, splitPaneOrigin)
+        });
+      },
+      replace: (to, options = {}) => {
+        router.replace(to, {
+          ...options,
+          state: stateWithSplitNavigationOrigin(options.state, splitPaneOrigin)
+        });
+      }
+    };
+  }, [router, splitPaneOrigin]);
+}
+function useDrawer() {
+  const drawer = useContext(RouterDrawerContext);
+  if (!drawer) {
+    throw new Error("useDrawer must be used inside <Router.Drawer>");
+  }
+  return drawer;
+}
+function useCurrentModal() {
+  const current = useContext(CurrentModalContext);
+  if (!current) {
+    throw new Error("useCurrentModal called outside a Router modal/sheet entry");
+  }
+  return current;
+}
+function DefaultSplitViewLayout({
+  children,
+  primary,
+  secondary,
+  isWide,
+  primaryMaxWidth = DEFAULT_SPLIT_PRIMARY_MAX_WIDTH,
+  splitViewRef,
+  splitViewLayoutId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: splitViewRef,
+      className: "sigmela-split-view",
+      "data-layout": isWide ? "wide" : "narrow",
+      "data-router-split-view-id": splitViewLayoutId,
+      style: { "--sigmela-split-primary-max-width": `${primaryMaxWidth}px` },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sigmela-split-view__primary", children: isWide ? primary : children }),
+        isWide ? /* @__PURE__ */ jsx("div", { className: "sigmela-split-view__secondary", children: secondary }) : null
+      ]
+    }
+  );
+}
+function DefaultDrawerLayout({
+  children,
+  aside,
+  footer,
+  items = [],
+  activeItem,
+  onItemChange,
+  drawer
+}) {
+  const [expandedGroups, setExpandedGroups] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const toggleGroup = useCallback((id) => {
+    setExpandedGroups((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "sigmela-drawer", "data-drawer-open": drawer?.isOpen ? "true" : "false", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "sigmela-drawer__sidebar", children: [
+      /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__sidebar-content", children: items.filter((node) => !node.hidden).map((node) => {
+        if (node.type === "item") {
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "sigmela-drawer__item",
+              "data-active": node.id === activeItem ? "true" : void 0,
+              onClick: () => onItemChange?.(node.id),
+              children: [
+                node.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: node.icon }) : null,
+                /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: node.label }),
+                node.badge ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-badge", children: node.badge }) : null
+              ]
+            },
+            node.id
+          );
+        }
+        if (node.type === "section") {
+          return /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__section-label", children: node.title }, node.id);
+        }
+        const visibleItems = node.items.filter((item) => !item.hidden);
+        if (visibleItems.length === 0) return null;
+        const isExpanded = expandedGroups.has(node.id);
+        const itemsId = `${node.id}-drawer-items`;
+        return /* @__PURE__ */ jsxs("div", { className: "sigmela-drawer__group-container", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "sigmela-drawer__item sigmela-drawer__group-label",
+              "aria-controls": itemsId,
+              "aria-expanded": isExpanded,
+              onClick: () => toggleGroup(node.id),
+              children: [
+                node.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: node.icon }) : null,
+                /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: node.label }),
+                node.chevron ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "sigmela-drawer__group-chevron",
+                    "data-expanded": isExpanded ? "true" : void 0,
+                    "aria-hidden": "true",
+                    children: node.chevron
+                  }
+                ) : null
+              ]
+            }
+          ),
+          isExpanded ? /* @__PURE__ */ jsx("div", { id: itemsId, className: "sigmela-drawer__group-items", children: visibleItems.map((item) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "sigmela-drawer__item sigmela-drawer__subitem",
+              "data-active": item.id === activeItem ? "true" : void 0,
+              onClick: () => onItemChange?.(item.id),
+              children: [
+                item.icon ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", children: item.icon }) : null,
+                /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-label", children: item.label }),
+                item.badge ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-badge", children: item.badge }) : null
+              ]
+            },
+            item.id
+          )) }) : null
+        ] }, node.id);
+      }) }),
+      footer ? /* @__PURE__ */ jsx("div", { className: "sigmela-drawer__footer", children: footer }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sigmela-drawer__overlay",
+        "aria-label": "Close navigation",
+        onClick: drawer?.close
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: "sigmela-drawer__main", children }),
+    aside ? /* @__PURE__ */ jsx("aside", { className: "sigmela-drawer__assistant", children: aside }) : null
+  ] });
+}
+function FrozenPaneRouteContent({
+  route,
+  props,
+  fallback
+}) {
+  const hook = useMemo(() => frozenLocationHook(props.pathname), [props.pathname]);
+  const searchHook = useMemo(() => () => props.search, [props.search]);
+  const routeContext = useMemo(() => routeContextValueFromProps(props), [props]);
+  return /* @__PURE__ */ jsx(Router$1, { hook, searchHook, children: /* @__PURE__ */ jsx(RouterRouteContext.Provider, { value: routeContext, children: /* @__PURE__ */ jsx(Suspense, { fallback, children: renderRouteContent(route, props) }) }) });
+}
+function stackSnapshotForRouteProps(route, props, stackKey, forcePushRouteChanges = false) {
+  const normalized = normalizedPath(props.pathname);
+  const historyIndex = historyIndexFromState(props.historyState);
+  const historyNavigationKey = historyNavigationKeyFromState(props.historyState) ?? `navigation-${historyIndex}`;
+  const splitNavigation = splitNavigationFromState(props.historyState);
+  return {
+    route,
+    params: props.params,
+    stackKey,
+    locationKey: `${normalized}${props.search}:${historyIndex}:${historyNavigationKey}`,
+    historyNavigationKey,
+    pathname: normalized,
+    search: props.search,
+    historyState: props.historyState,
+    historyIndex,
+    historyCommit: historyCommitFromState(props.historyState),
+    depth: routeDepth(normalized),
+    presentation: route.presentation,
+    forcePushRouteChanges,
+    splitPane: props.splitPane,
+    splitNavigation
+  };
+}
+function propsForStackEntry(entry) {
+  return {
+    params: entry.params,
+    pathname: entry.pathname,
+    search: entry.search,
+    historyState: entry.historyState,
+    presentation: entry.presentation,
+    splitPane: entry.splitPane
+  };
+}
+function RouteStackViewport({
+  route,
+  props,
+  fallback,
+  stackKey,
+  className = "sigmela-split-pane-stack",
+  contentClassName,
+  scopeOverlayContent = false,
+  forcePushRouteChanges = false
+}) {
+  const snapshot = useMemo(
+    () => stackSnapshotForRouteProps(
+      route,
+      props,
+      stackKey,
+      forcePushRouteChanges
+    ),
+    [
+      props.historyState,
+      props.params,
+      props.pathname,
+      props.search,
+      props.splitPane,
+      forcePushRouteChanges,
+      route,
+      stackKey
+    ]
+  );
+  const [entries, setEntries] = useState(() => [
+    createEntry(snapshot, "forward", false)
+  ]);
+  const [heldEnterIds, setHeldEnterIds] = useState(() => /* @__PURE__ */ new Set());
+  const heldEnterIdsRef = useRef(heldEnterIds);
+  const enterHoldCleanupRef = useRef(/* @__PURE__ */ new Map());
+  const entryArchiveRef = useRef(
+    new Map(entries.map((entry) => [entry.id, entry]))
+  );
+  const { stateMap, setItem, toggle, deleteItem } = useTransitionMap({
+    timeout: ROUTE_TRANSITION_MS,
+    preEnter: true,
+    preExit: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    allowMultiple: true
+  });
+  for (const entry of entries) {
+    entryArchiveRef.current.set(entry.id, entry);
+  }
+  heldEnterIdsRef.current = heldEnterIds;
+  const releaseHeldEnter = useCallback((id) => {
+    const cleanup = enterHoldCleanupRef.current.get(id);
+    if (cleanup) cleanup();
+    enterHoldCleanupRef.current.delete(id);
+    setHeldEnterIds((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const holdEnterUntilPainted = useCallback((id, onRelease) => {
+    if (heldEnterIdsRef.current.has(id) || enterHoldCleanupRef.current.has(id)) return;
+    setHeldEnterIds((prev) => {
+      if (prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    let frame = 0;
+    let timeout = 0;
+    const cleanup = () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      if (timeout) window.clearTimeout(timeout);
+    };
+    frame = window.requestAnimationFrame(() => {
+      timeout = window.setTimeout(() => {
+        enterHoldCleanupRef.current.delete(id);
+        setHeldEnterIds((prev) => {
+          if (!prev.has(id)) return prev;
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+        onRelease();
+      }, 0);
+    });
+    enterHoldCleanupRef.current.set(id, cleanup);
+  }, []);
+  useEffect(() => {
+    return () => {
+      for (const cleanup of enterHoldCleanupRef.current.values()) cleanup();
+      enterHoldCleanupRef.current.clear();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    setEntries((prev) => {
+      const change = resolveStackChange(prev, snapshot);
+      const nextIds = new Set(change.entries.map((entry) => entry.id));
+      for (const entry of prev) {
+        if (!nextIds.has(entry.id)) {
+          entryArchiveRef.current.set(entry.id, {
+            ...entry,
+            animateEnter: false,
+            exitDirection: change.direction
+          });
+        }
+      }
+      for (const entry of change.entries) {
+        entryArchiveRef.current.set(entry.id, entry);
+      }
+      return change.entries;
+    });
+  }, [snapshot]);
+  const visibleEntries = useMemo(
+    () => visibleEntriesForSnapshot(entries, snapshot),
+    [entries, snapshot]
+  );
+  const activeIds = useMemo(() => new Set(entries.map((entry) => entry.id)), [entries]);
+  const visibleActiveIds = useMemo(
+    () => new Set(visibleEntries.map((entry) => entry.id)),
+    [visibleEntries]
+  );
+  const visibleActiveId = visibleEntries[visibleEntries.length - 1]?.id ?? null;
+  const visibleActiveEntry = visibleEntries[visibleEntries.length - 1];
+  const visibleStackDirection = visibleActiveEntry?.enterDirection ?? "forward";
+  const activeIdKey = useMemo(
+    () => entries.map((entry) => entry.id).join("|"),
+    [entries]
+  );
+  const mountedTransitionEntries = useMemo(
+    () => Array.from(stateMap.entries()).filter(([, state]) => state.isMounted),
+    [stateMap]
+  );
+  const isTransitionSettled = mountedTransitionEntries.every(
+    ([, state]) => state.isResolved
+  );
+  useLayoutEffect(() => {
+    for (const entry of entries) {
+      const state = stateMap.get(entry.id);
+      if (!state) {
+        setItem(entry.id, { initialEntered: !entry.animateEnter });
+        if (entry.animateEnter) {
+          holdEnterUntilPainted(entry.id, () => toggle(entry.id, true));
+        }
+        continue;
+      }
+      if (heldEnterIds.has(entry.id)) {
+        continue;
+      }
+      if (!state.isEnter) {
+        toggle(entry.id, true);
+      }
+    }
+    for (const [id, state] of stateMap) {
+      if (!activeIds.has(id) && state.isEnter) {
+        releaseHeldEnter(id);
+        toggle(id, false);
+      }
+    }
+  }, [
+    activeIdKey,
+    activeIds,
+    entries,
+    heldEnterIds,
+    holdEnterUntilPainted,
+    releaseHeldEnter,
+    setItem,
+    stateMap,
+    toggle
+  ]);
+  useEffect(() => {
+    const unmountedIds = Array.from(stateMap.entries()).filter(([, state]) => !state.isMounted).map(([id]) => id);
+    for (const id of unmountedIds) {
+      if (activeIds.has(id)) continue;
+      entryArchiveRef.current.delete(id);
+      releaseHeldEnter(id);
+      deleteItem(id);
+    }
+  }, [activeIds, deleteItem, releaseHeldEnter, stateMap]);
+  const renderEntries = useMemo(() => {
+    const result = [...visibleEntries];
+    const visibleIds = new Set(visibleEntries.map((entry) => entry.id));
+    for (const [id] of mountedTransitionEntries) {
+      if (visibleIds.has(id)) continue;
+      const entry = entryArchiveRef.current.get(id);
+      if (!entry) continue;
+      result.push(entry);
+    }
+    return result;
+  }, [mountedTransitionEntries, visibleEntries]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `screen-stack ${className}`,
+      "data-animation": !isTransitionSettled ? "true" : void 0,
+      style: { "--stack-transition-time": `${ROUTE_TRANSITION_MS}ms` },
+      children: renderEntries.map((entry, index) => {
+        const phase = phaseForEntry(entry, visibleActiveIds, visibleActiveId);
+        const transitionStatus = heldEnterIds.has(entry.id) ? "preEnter" : transitionStatusForEntry(entry, stateMap.get(entry.id)?.status);
+        const animationType = animationClassForEntry(
+          entry,
+          phase,
+          visibleActiveEntry,
+          visibleStackDirection
+        );
+        const zIndex = phase === "exiting" ? renderEntries.length + index + 1 : index + 1;
+        const routeContent = /* @__PURE__ */ jsx(
+          FrozenPaneRouteContent,
+          {
+            route: entry.route,
+            props: propsForStackEntry(entry),
+            fallback: entry.route.fallback ?? fallback
+          }
+        );
+        const scopedContent = scopeOverlayContent ? /* @__PURE__ */ jsx(OverlayContentScope, { contentKey: entry.historyNavigationKey, children: routeContent }) : routeContent;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-route-stack-screen": "true",
+            "data-route-stack-key": entry.stackKey,
+            "data-route-stack-route-id": entry.route.id,
+            "data-route-stack-container": entry.route.container,
+            "data-route-stack-presentation": entry.presentation,
+            "data-route-stack-phase": phase,
+            "data-route-stack-transition": transitionStatus,
+            className: screenClassName(entry, phase, transitionStatus, animationType),
+            "aria-hidden": phase === "active" ? void 0 : true,
+            inert: phase === "active" ? void 0 : true,
+            style: { zIndex },
+            children: /* @__PURE__ */ jsx("div", { className: "stack-screen-container", children: contentClassName ? /* @__PURE__ */ jsx("div", { className: contentClassName, children: scopedContent }) : scopedContent })
+          },
+          entry.id
+        );
+      })
+    }
+  );
+}
+function SplitViewRouteContent({
+  route,
+  props,
+  fallback
+}) {
+  const splitView = route.splitView;
+  const [splitViewRef, isWide] = useElementMinWidth(
+    splitView?.wideMinWidth ?? splitViewWideMinWidth(DEFAULT_SPLIT_MIN_WIDTH, DEFAULT_SPLIT_PRIMARY_MAX_WIDTH)
+  );
+  if (!splitView) {
+    return route.childRoute ? renderRouteContent(route.childRoute, props) : null;
+  }
+  const storedSplitNavigation = splitNavigationFromState(props.historyState);
+  const detailPathId = storedSplitNavigation?.splitViewId === splitView.layoutId ? storedSplitNavigation.detailPathId : `${splitView.layoutId}:default`;
+  const detailDepth = storedSplitNavigation?.splitViewId === splitView.layoutId ? storedSplitNavigation.detailDepth : 0;
+  const primaryNavigationOrigin = {
+    splitViewId: splitView.layoutId,
+    pane: "primary",
+    detailPathId,
+    detailDepth
+  };
+  const secondaryNavigationOrigin = {
+    splitViewId: splitView.layoutId,
+    pane: "secondary",
+    detailPathId,
+    detailDepth
+  };
+  const primaryProps = {
+    ...props,
+    splitPane: "primary"
+  };
+  const secondaryProps = splitView.secondaryRoute ? {
+    ...props,
+    pathname: pathnameForRouteContext(splitView.secondaryRoute, props.pathname),
+    splitPane: "secondary"
+  } : props;
+  const primary = /* @__PURE__ */ jsx(SplitPaneNavigationContext.Provider, { value: primaryNavigationOrigin, children: /* @__PURE__ */ jsx(
+    FrozenPaneRouteContent,
+    {
+      route: splitView.primaryRoute,
+      props: primaryProps,
+      fallback: splitView.primaryRoute.fallback ?? fallback
+    }
+  ) });
+  const secondary = splitView.secondaryRoute ? /* @__PURE__ */ jsx(SplitPaneNavigationContext.Provider, { value: secondaryNavigationOrigin, children: isWide ? /* @__PURE__ */ jsx(
+    RouteStackViewport,
+    {
+      route: splitView.secondaryRoute,
+      props: secondaryProps,
+      fallback: splitView.secondaryRoute.fallback ?? fallback,
+      stackKey: `${route.id}:secondary`
+    },
+    detailPathId
+  ) : /* @__PURE__ */ jsx(
+    FrozenPaneRouteContent,
+    {
+      route: splitView.secondaryRoute,
+      props: secondaryProps,
+      fallback: splitView.secondaryRoute.fallback ?? fallback
+    }
+  ) }) : null;
+  const activeContent = splitView.activePane === "secondary" && secondary ? secondary : primary;
+  const layoutProps = {
+    children: isWide ? primary : activeContent,
+    primary,
+    secondary,
+    isWide,
+    hasSecondary: Boolean(splitView.secondaryRoute),
+    minWidth: splitView.minWidth,
+    primaryMaxWidth: splitView.primaryMaxWidth,
+    secondaryMinWidth: splitView.secondaryMinWidth,
+    splitViewRef,
+    splitViewLayoutId: splitView.layoutId
+  };
+  if (route.layout) {
+    return createElement(route.layout, layoutProps);
+  }
+  if (route.component) {
+    return createElement(route.component, { ...props, ...layoutProps });
+  }
+  if (route.elementType) {
+    return createElement(route.elementType, { ...props, ...layoutProps });
+  }
+  if (route.render) return route.render(props);
+  return /* @__PURE__ */ jsx(DefaultSplitViewLayout, { ...layoutProps });
+}
+function DrawerRouteContent({
+  route,
+  props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((value) => !value), []);
+  const drawerApi = useMemo(
+    () => ({ isOpen, open, close, toggle }),
+    [close, isOpen, open, toggle]
+  );
+  const childFallback = route.childRoute?.fallback ?? route.fallback ?? null;
+  const drawer = route.drawer;
+  const activeItem = drawer?.activeItem;
+  const content = route.childRoute ? /* @__PURE__ */ jsx(
+    RouteStackViewport,
+    {
+      route: route.childRoute,
+      props,
+      fallback: childFallback,
+      stackKey: `${route.stackKey ?? route.id}:drawer:${activeItem ?? "content"}`
+    },
+    activeItem
+  ) : null;
+  const onItemChange = drawer ? (id) => {
+    const item = findDrawerItem(drawer.items, id);
+    if (item && normalizedPath(item.path) !== props.pathname) {
+      navigateWithHistoryIndex(item.path);
+    }
+    close();
+  } : void 0;
+  const layoutProps = {
+    children: content,
+    aside: route.drawerAside,
+    footer: route.drawerFooter,
+    portal: false,
+    items: drawer?.items,
+    activeItem: drawer?.activeItem,
+    onItemChange,
+    drawer: drawerApi
+  };
+  let rendered;
+  if (route.layout) {
+    rendered = createElement(route.layout, layoutProps);
+  } else if (route.component) {
+    rendered = createElement(route.component, { ...props, ...layoutProps });
+  } else if (route.elementType) {
+    rendered = createElement(route.elementType, { ...props, ...layoutProps });
+  } else if (route.render) {
+    rendered = route.render(props);
+  } else {
+    rendered = /* @__PURE__ */ jsx(DefaultDrawerLayout, { ...layoutProps });
+  }
+  return /* @__PURE__ */ jsx(RouterDrawerContext.Provider, { value: drawerApi, children: rendered });
+}
+function findDrawerItem(nodes, id) {
+  for (const node of nodes) {
+    if (node.type === "item") {
+      if (node.id === id) return node;
+      continue;
+    }
+    if (node.type === "section") continue;
+    const item = node.items.find((entry) => entry.id === id);
+    if (item) return item;
+  }
+  return void 0;
+}
+function renderRouteContent(route, props) {
+  if (route.container === "splitview" && route.splitView) {
+    return /* @__PURE__ */ jsx(
+      SplitViewRouteContent,
+      {
+        route,
+        props,
+        fallback: route.fallback ?? null
+      }
+    );
+  }
+  if (route.component) {
+    return createElement(route.component, props);
+  }
+  let content;
+  if (route.elementType) {
+    content = createElement(route.elementType, props);
+  } else if (route.render) {
+    content = route.render(props);
+  } else if (route.childrenNode !== void 0) {
+    content = route.childrenNode;
+  } else {
+    content = route.element;
+  }
+  if (!route.layout) return content;
+  return createElement(route.layout, { children: content });
+}
+function renderCompiledRoute(entry) {
+  const props = {
+    params: entry.params,
+    pathname: entry.pathname,
+    search: entry.search,
+    historyState: entry.historyState,
+    presentation: entry.presentation
+  };
+  if (entry.route.container === "drawer" && entry.route.childRoute) {
+    return /* @__PURE__ */ jsx(DrawerRouteContent, { route: entry.route, props });
+  }
+  if (entry.route.container === "tabbar" && entry.route.childRoute) {
+    const childFallback = entry.route.childRoute.fallback ?? entry.route.fallback ?? null;
+    const content = /* @__PURE__ */ jsx(Suspense, { fallback: childFallback, children: renderRouteContent(entry.route.childRoute, props) });
+    const tabBar = entry.route.tabBar;
+    const onTabChange = tabBar ? (id) => {
+      const tab = tabBar.tabs.find((item) => item.id === id);
+      if (tab && normalizedPath(tab.path) !== entry.pathname) {
+        navigateWithHistoryIndex(tab.path);
+      }
+    } : void 0;
+    const layoutProps = {
+      children: content,
+      portal: false,
+      tabs: tabBar?.tabs,
+      activeTab: tabBar?.activeTab,
+      onTabChange
+    };
+    if (entry.route.layout) {
+      return createElement(entry.route.layout, layoutProps);
+    }
+    if (entry.route.component) {
+      return createElement(entry.route.component, { ...props, ...layoutProps });
+    }
+    if (entry.route.elementType) {
+      return createElement(entry.route.elementType, { ...props, ...layoutProps });
+    }
+    if (entry.route.render) return entry.route.render(props);
+    return content;
+  }
+  return renderRouteContent(entry.route, props);
+}
+var FrozenStackEntry = memo(function FrozenStackEntry2({
+  entry,
+  fallback
+}) {
+  const hook = useMemo(() => frozenLocationHook(entry.pathname), [entry.pathname]);
+  const searchHook = useMemo(() => () => entry.search, [entry.search]);
+  const routeContext = useMemo(() => routeContextValue(entry), [entry]);
+  const suspenseFallback = entry.route.fallback ?? fallback;
+  return /* @__PURE__ */ jsx(Router$1, { hook, searchHook, children: /* @__PURE__ */ jsx(RouterRouteContext.Provider, { value: routeContext, children: /* @__PURE__ */ jsx(Suspense, { fallback: suspenseFallback, children: renderCompiledRoute(entry) }) }) });
+});
+var FrozenModalRouteEntry = memo(function FrozenModalRouteEntry2({
+  entry,
+  fallback
+}) {
+  const activeScreen = entry.flowScreens?.[entry.flowScreens.length - 1];
+  if (activeScreen) {
+    const props = {
+      params: activeScreen.params,
+      pathname: activeScreen.pathname,
+      search: activeScreen.search,
+      historyState: activeScreen.historyState,
+      presentation: "push"
+    };
+    return /* @__PURE__ */ jsx(
+      RouteStackViewport,
+      {
+        route: activeScreen.route,
+        props,
+        fallback: activeScreen.route.fallback ?? fallback,
+        stackKey: `${entry.id}:overlay-flow`,
+        className: `router-overlay-flow-stack router-overlay-flow-stack--${entry.kind}`,
+        contentClassName: "router-overlay-flow-screen",
+        scopeOverlayContent: true,
+        forcePushRouteChanges: true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FrozenModalCompiledRouteEntry,
+    {
+      entry,
+      route: entry.route,
+      fallback
+    }
+  );
+});
+var FrozenModalCompiledRouteEntry = memo(function FrozenModalCompiledRouteEntry2({
+  entry,
+  route,
+  fallback
+}) {
+  const hook = useMemo(() => frozenLocationHook(entry.pathname), [entry.pathname]);
+  const searchHook = useMemo(() => () => entry.search, [entry.search]);
+  const routeContext = useMemo(
+    () => ({
+      params: entry.params,
+      pathname: entry.pathname,
+      search: entry.search,
+      searchParams: searchParamsForSearch(entry.search),
+      historyState: entry.historyState,
+      presentation: entry.kind
+    }),
+    [entry]
+  );
+  const props = useMemo(
+    () => ({
+      params: entry.params,
+      pathname: entry.pathname,
+      search: entry.search,
+      historyState: entry.historyState,
+      presentation: entry.kind
+    }),
+    [entry]
+  );
+  const suspenseFallback = route.fallback ?? fallback;
+  const modalFallback = suspenseFallback ?? (entry.kind === "sheet" ? DEFAULT_SHEET_FALLBACK : null);
+  return /* @__PURE__ */ jsx(Router$1, { hook, searchHook, children: /* @__PURE__ */ jsx(RouterRouteContext.Provider, { value: routeContext, children: /* @__PURE__ */ jsx(Suspense, { fallback: modalFallback, children: renderRouteContent(route, props) }) }) });
+});
+function RouterModalStackHost({
+  entries,
+  close,
+  remove,
+  fallback,
+  shell
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: entries.map((entry, index) => /* @__PURE__ */ jsx(
+    RouterModalEntryHost,
+    {
+      entry,
+      index,
+      close,
+      remove,
+      fallback,
+      shell
+    },
+    entry.id
+  )) });
+}
+var RouterModalEntryHost = memo(function RouterModalEntryHost2({
+  entry,
+  index,
+  close,
+  remove,
+  fallback,
+  shell
+}) {
+  const closeSelf = useCallback(() => close(entry.id), [close, entry.id]);
+  const removeSelf = useCallback(() => remove(entry.id), [remove, entry.id]);
+  const current = useMemo(
+    () => ({
+      id: entry.id,
+      index,
+      exiting: entry.exiting,
+      close: closeSelf,
+      remove: removeSelf
+    }),
+    [entry.id, entry.exiting, index, closeSelf, removeSelf]
+  );
+  const zIndex = OVERLAY_STACK_BASE_Z + index;
+  const overlayShell = entry.route.overlayLayout ?? shell;
+  const activeContentKey = entry.flowScreens ? historyNavigationKeyFromState(entry.historyState) ?? void 0 : void 0;
+  return /* @__PURE__ */ jsx(CurrentModalContext.Provider, { value: current, children: entry.kind === "sheet" ? /* @__PURE__ */ jsx(
+    SheetFrame,
+    {
+      open: !entry.exiting,
+      onRequestClose: closeSelf,
+      onExitComplete: removeSelf,
+      zIndex,
+      shell: overlayShell,
+      activeContentKey,
+      children: /* @__PURE__ */ jsx(FrozenModalRouteEntry, { entry, fallback })
+    }
+  ) : /* @__PURE__ */ jsx(
+    ModalFrame,
+    {
+      open: !entry.exiting,
+      onRequestClose: closeSelf,
+      onExitComplete: removeSelf,
+      zIndex,
+      shell: overlayShell,
+      activeContentKey,
+      children: /* @__PURE__ */ jsx(FrozenModalRouteEntry, { entry, fallback })
+    }
+  ) });
+});
+function resolveStackChange(prev, snapshot) {
+  const top = prev[prev.length - 1];
+  if (!top) {
+    return {
+      entries: [createEntry(snapshot, "forward", false)],
+      direction: "forward"
+    };
+  }
+  if (top.locationKey === snapshot.locationKey) {
+    return {
+      entries: prev.map(
+        (entry) => entry.id === top.id ? mergeEntrySnapshot(entry, snapshot) : markCommitted(entry)
+      ),
+      direction: "forward"
+    };
+  }
+  const direction = resolveDirection(top, snapshot);
+  if (isExplicitStackReplace(top, snapshot)) {
+    return {
+      entries: replaceActiveStackEntry(prev, top.id, snapshot, direction, true),
+      direction
+    };
+  }
+  const syncTargetIndex = syncTargetEntryIndex(prev, snapshot);
+  if (syncTargetIndex !== -1 && syncTargetIndex !== prev.length - 1) {
+    return {
+      entries: entriesRevealingSnapshot(prev, syncTargetIndex, snapshot),
+      direction: "back"
+    };
+  }
+  if (shouldReplaceActiveStackEntry(top, snapshot)) {
+    return {
+      entries: replaceActiveStackEntry(prev, top.id, snapshot, direction, true),
+      direction
+    };
+  }
+  const existingIndex = existingStackEntryIndexForSnapshot(prev, snapshot);
+  const revealsExistingEntry = existingIndex !== -1;
+  const isBack = direction === "back";
+  if (isBack || revealsExistingEntry) {
+    if (!revealsExistingEntry) {
+      return {
+        entries: [createEntry(snapshot, "back", false)],
+        direction: "back"
+      };
+    }
+    const revealed = prev[existingIndex];
+    const base = prev.slice(0, existingIndex).map(markCommitted);
+    return {
+      entries: [
+        ...base,
+        {
+          ...revealed,
+          ...snapshot,
+          id: revealed.id,
+          animateEnter: false,
+          enterDirection: "back"
+        }
+      ],
+      direction: "back"
+    };
+  }
+  return {
+    entries: [...prev.map(markCommitted), createEntry(snapshot, "forward", true)],
+    direction: "forward"
+  };
+}
+function visibleEntriesForSnapshot(entries, snapshot) {
+  if (!snapshot) return entries;
+  const top = entries[entries.length - 1];
+  if (!top) {
+    return [createEntry(snapshot, "forward", false)];
+  }
+  if (top.locationKey === snapshot.locationKey) {
+    return entries.map(
+      (entry) => entry.id === top.id ? mergeEntrySnapshot(entry, snapshot) : entry
+    );
+  }
+  if (isExplicitStackReplace(top, snapshot)) {
+    return replaceActiveStackEntry(
+      entries,
+      top.id,
+      snapshot,
+      resolveDirection(top, snapshot),
+      false
+    );
+  }
+  const syncTargetIndex = syncTargetEntryIndex(entries, snapshot);
+  if (syncTargetIndex !== -1 && syncTargetIndex !== entries.length - 1) {
+    return entriesRevealingSnapshot(entries, syncTargetIndex, snapshot);
+  }
+  if (shouldReplaceActiveStackEntry(top, snapshot)) {
+    return replaceActiveStackEntry(
+      entries,
+      top.id,
+      snapshot,
+      resolveDirection(top, snapshot),
+      false
+    );
+  }
+  const direction = resolveDirection(top, snapshot);
+  const existingIndex = existingStackEntryIndexForSnapshot(entries, snapshot);
+  if (direction === "back" || existingIndex !== -1) {
+    if (existingIndex === -1) {
+      return [createEntry(snapshot, "back", false)];
+    }
+    const revealed = entries[existingIndex];
+    const base = entries.slice(0, existingIndex).map(markCommitted);
+    return [
+      ...base,
+      {
+        ...revealed,
+        ...snapshot,
+        id: revealed.id,
+        animateEnter: false,
+        enterDirection: "back"
+      }
+    ];
+  }
+  return entries;
+}
+function activeModalEntry(entries) {
+  for (let index = entries.length - 1; index >= 0; index -= 1) {
+    if (!entries[index].exiting) return entries[index];
+  }
+  return void 0;
+}
+function modalFlowScreenFromMatch(match, pathname, search, state, historyIndex, commit) {
+  const route = match.route.childRoute;
+  if (!match.route.overlayFlow || !route) return null;
+  return {
+    overlayRoute: match.route,
+    route,
+    params: match.params,
+    pathname,
+    search,
+    historyState: stateWithHistoryIndex(
+      state,
+      historyIndex,
+      createRouterId(),
+      commit
+    )
+  };
+}
+function RouterRuntime({
+  children,
+  fallback,
+  shell = "mobile-contained"
+}) {
+  const [pathname] = useLocation();
+  const search = useSearch();
+  const historyState = useHistoryState$1();
+  const wouterRouter = useRouter$1();
+  const compiledRoutes = useMemo(() => compileStackRoutes(children), [children]);
+  const runtimeChildren = useMemo(
+    () => flattenRouteNodes(children).filter((child) => !isStackRouteElement(child)),
+    [children]
+  );
+  const rawMatch = useMemo(
+    () => matchStackRouteByPresentation(
+      compiledRoutes,
+      wouterRouter.parser,
+      pathname,
+      PUSH_PRESENTATIONS
+    ),
+    [compiledRoutes, pathname, wouterRouter.parser]
+  );
+  const fallbackNode = fallback ?? null;
+  const [modalEntries, setModalEntries] = useState([]);
+  const modalEntriesRef = useRef(modalEntries);
+  const modalSeqRef = useRef(0);
+  modalEntriesRef.current = modalEntries;
+  useLayoutEffect(() => {
+    ensureInitialHistoryIndex();
+  }, []);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-router-shell", shell);
+    return () => {
+      document.documentElement.removeAttribute("data-router-shell");
+    };
+  }, [shell]);
+  const searchPath = search ? `?${search}` : "";
+  const guardRedirect = useMemo(
+    () => rawMatch ? guardRedirectForMatch(rawMatch, pathname, searchPath, historyState) : null,
+    [historyState, pathname, rawMatch, searchPath]
+  );
+  const match = guardRedirect ? null : rawMatch;
+  useLayoutEffect(() => {
+    if (!guardRedirect) return;
+    const target = parseNavigationTarget(guardRedirect, pathname);
+    if (target.pathname === normalizedPath(pathname) && target.search === searchPath) {
+      return;
+    }
+    navigateWithHistoryIndex(`${target.pathname}${target.search}`, { commit: "sync" });
+  }, [guardRedirect, pathname, searchPath]);
+  const snapshot = useMemo(() => {
+    if (!match) return null;
+    return stackSnapshot(pathname, searchPath, historyState, match);
+  }, [historyState, match, pathname, searchPath]);
+  const snapshotHistoryRef = useRef([]);
+  const [entries, setEntries] = useState(
+    () => snapshot ? [createEntry(snapshot, "forward", false)] : []
+  );
+  const [heldEnterIds, setHeldEnterIds] = useState(() => /* @__PURE__ */ new Set());
+  const heldEnterIdsRef = useRef(heldEnterIds);
+  const enterHoldCleanupRef = useRef(/* @__PURE__ */ new Map());
+  const entryArchiveRef = useRef(
+    new Map(entries.map((entry) => [entry.id, entry]))
+  );
+  const { stateMap, setItem, toggle, deleteItem } = useTransitionMap({
+    timeout: ROUTE_TRANSITION_MS,
+    preEnter: true,
+    preExit: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    allowMultiple: true
+  });
+  for (const entry of entries) {
+    entryArchiveRef.current.set(entry.id, entry);
+  }
+  const entriesRef = useRef(entries);
+  entriesRef.current = entries;
+  heldEnterIdsRef.current = heldEnterIds;
+  const releaseHeldEnter = useCallback((id) => {
+    const cleanup = enterHoldCleanupRef.current.get(id);
+    if (cleanup) cleanup();
+    enterHoldCleanupRef.current.delete(id);
+    setHeldEnterIds((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const holdEnterUntilPainted = useCallback((id, onRelease) => {
+    if (heldEnterIdsRef.current.has(id) || enterHoldCleanupRef.current.has(id)) return;
+    setHeldEnterIds((prev) => {
+      if (prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    let frame = 0;
+    let timeout = 0;
+    const cleanup = () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      if (timeout) window.clearTimeout(timeout);
+    };
+    frame = window.requestAnimationFrame(() => {
+      timeout = window.setTimeout(() => {
+        enterHoldCleanupRef.current.delete(id);
+        setHeldEnterIds((prev) => {
+          if (!prev.has(id)) return prev;
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+        onRelease();
+      }, 0);
+    });
+    enterHoldCleanupRef.current.set(id, cleanup);
+  }, []);
+  useEffect(() => {
+    return () => {
+      for (const cleanup of enterHoldCleanupRef.current.values()) cleanup();
+      enterHoldCleanupRef.current.clear();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!snapshot) return;
+    snapshotHistoryRef.current = updateSnapshotHistory(
+      snapshotHistoryRef.current,
+      snapshot
+    );
+    setEntries((prev) => {
+      const change = resolveStackChange(prev, snapshot);
+      const nextIds = new Set(change.entries.map((entry) => entry.id));
+      for (const entry of prev) {
+        if (!nextIds.has(entry.id)) {
+          entryArchiveRef.current.set(entry.id, {
+            ...entry,
+            animateEnter: false,
+            exitDirection: change.direction
+          });
+        }
+      }
+      for (const entry of change.entries) {
+        entryArchiveRef.current.set(entry.id, entry);
+      }
+      return change.entries;
+    });
+  }, [snapshot]);
+  const visibleEntries = useMemo(
+    () => visibleEntriesForSnapshot(entries, snapshot),
+    [entries, snapshot]
+  );
+  const activeIds = useMemo(() => new Set(entries.map((entry) => entry.id)), [entries]);
+  const visibleActiveIds = useMemo(
+    () => new Set(visibleEntries.map((entry) => entry.id)),
+    [visibleEntries]
+  );
+  const visibleActiveId = visibleEntries[visibleEntries.length - 1]?.id ?? null;
+  const visibleActiveEntry = visibleEntries[visibleEntries.length - 1];
+  const visibleActiveEntryRef = useRef(void 0);
+  visibleActiveEntryRef.current = visibleActiveEntry;
+  const visibleStackDirection = visibleActiveEntry?.enterDirection ?? "forward";
+  const activeIdKey = useMemo(
+    () => entries.map((entry) => entry.id).join("|"),
+    [entries]
+  );
+  const mountedTransitionEntries = useMemo(
+    () => Array.from(stateMap.entries()).filter(([, state]) => state.isMounted),
+    [stateMap]
+  );
+  const isTransitionSettled = mountedTransitionEntries.every(
+    ([, state]) => state.isResolved
+  );
+  useLayoutEffect(() => {
+    for (const entry of entries) {
+      const state = stateMap.get(entry.id);
+      if (!state) {
+        setItem(entry.id, { initialEntered: !entry.animateEnter });
+        if (entry.animateEnter) {
+          holdEnterUntilPainted(entry.id, () => toggle(entry.id, true));
+        }
+        continue;
+      }
+      if (heldEnterIds.has(entry.id)) {
+        continue;
+      }
+      if (!state.isEnter) {
+        toggle(entry.id, true);
+      }
+    }
+    for (const [id, state] of stateMap) {
+      if (!activeIds.has(id) && state.isEnter) {
+        releaseHeldEnter(id);
+        toggle(id, false);
+      }
+    }
+  }, [
+    activeIdKey,
+    activeIds,
+    entries,
+    heldEnterIds,
+    holdEnterUntilPainted,
+    releaseHeldEnter,
+    setItem,
+    stateMap,
+    toggle
+  ]);
+  useEffect(() => {
+    const unmountedIds = Array.from(stateMap.entries()).filter(([, state]) => !state.isMounted).map(([id]) => id);
+    for (const id of unmountedIds) {
+      if (activeIds.has(id)) continue;
+      entryArchiveRef.current.delete(id);
+      releaseHeldEnter(id);
+      deleteItem(id);
+    }
+  }, [activeIds, deleteItem, releaseHeldEnter, stateMap]);
+  const renderEntries = useMemo(() => {
+    const result = [...visibleEntries];
+    for (const [id] of mountedTransitionEntries) {
+      if (visibleActiveIds.has(id)) continue;
+      const entry = entryArchiveRef.current.get(id);
+      if (!entry) continue;
+      result.push(entry);
+    }
+    return result;
+  }, [visibleActiveIds, visibleEntries, mountedTransitionEntries]);
+  const removeModal = useCallback((id) => {
+    setModalEntries((prev) => prev.filter((entry) => entry.id !== id));
+  }, []);
+  const closeModal = useCallback((id) => {
+    setModalEntries((prev) => {
+      let changed = false;
+      const next = prev.map((entry) => {
+        if (entry.id !== id || entry.exiting) return entry;
+        changed = true;
+        return { ...entry, exiting: true };
+      });
+      return changed ? next : prev;
+    });
+  }, []);
+  const closeAllModals = useCallback(() => {
+    setModalEntries((prev) => {
+      let changed = false;
+      const next = prev.map((entry) => {
+        if (entry.exiting) return entry;
+        changed = true;
+        return { ...entry, exiting: true };
+      });
+      return changed ? next : prev;
+    });
+  }, []);
+  const goBackTopModal = useCallback(() => {
+    const entry = activeModalEntry(modalEntriesRef.current);
+    if (!entry) return false;
+    if (entry.flowScreens && entry.flowScreens.length > 1) {
+      setModalEntries(
+        (current) => current.map((candidate) => {
+          if (candidate.id !== entry.id || !candidate.flowScreens) return candidate;
+          const flowScreens = candidate.flowScreens.slice(0, -1);
+          const activeScreen = flowScreens[flowScreens.length - 1];
+          if (!activeScreen) return candidate;
+          return {
+            ...candidate,
+            route: activeScreen.overlayRoute,
+            params: activeScreen.params,
+            pathname: activeScreen.pathname,
+            search: activeScreen.search,
+            historyState: activeScreen.historyState,
+            flowScreens
+          };
+        })
+      );
+      return true;
+    }
+    closeModal(entry.id);
+    return true;
+  }, [closeModal]);
+  const updateActiveModalFlow = useCallback(
+    (match2, target, state, operation) => {
+      const entry = activeModalEntry(modalEntriesRef.current);
+      const flow = match2.route.overlayFlow;
+      if (!entry?.flowScreens || !flow || entry.route.overlayFlow?.id !== flow.id) {
+        return false;
+      }
+      const historyIndex = operation === "replace" ? Math.max(0, entry.flowScreens.length - 1) : entry.flowScreens.length;
+      const screen = modalFlowScreenFromMatch(
+        match2,
+        target.pathname,
+        target.search,
+        state,
+        historyIndex,
+        operation
+      );
+      if (!screen) return false;
+      setModalEntries(
+        (current) => current.map((candidate) => {
+          if (candidate.id !== entry.id || !candidate.flowScreens) return candidate;
+          const flowScreens = operation === "replace" ? [...candidate.flowScreens.slice(0, -1), screen] : [...candidate.flowScreens, screen];
+          return {
+            ...candidate,
+            route: screen.overlayRoute,
+            params: screen.params,
+            pathname: screen.pathname,
+            search: screen.search,
+            historyState: screen.historyState,
+            flowScreens
+          };
+        })
+      );
+      return true;
+    },
+    []
+  );
+  const pushModalEntry = useCallback(
+    (entry, replace2 = false) => {
+      modalSeqRef.current += 1;
+      const id = `${entry.kind}:${modalSeqRef.current}-${createRouterId()}`;
+      const nextEntry = { ...entry, id, exiting: false };
+      setModalEntries((prev) => {
+        if (replace2 && prev.length > 0) {
+          return [...prev.slice(0, -1), nextEntry];
+        }
+        return [...prev, nextEntry];
+      });
+      return id;
+    },
+    []
+  );
+  const navigate = useCallback(
+    (to, options = {}) => {
+      if (typeof to === "number") {
+        if (to < 0 && goBackTopModal()) return;
+        window.history.go(to);
+        return;
+      }
+      const target = parseNavigationTarget(to, pathname);
+      const overlayMatch = matchStackRouteByPresentation(
+        compiledRoutes,
+        wouterRouter.parser,
+        target.pathname,
+        OVERLAY_PRESENTATIONS
+      );
+      if (overlayMatch && isModalLikePresentation(overlayMatch.route.presentation)) {
+        const overlayState = stateForSplitNavigationTarget(
+          options.state,
+          null,
+          "navigate"
+        );
+        const overlayRedirect = guardRedirectForMatch(
+          overlayMatch,
+          target.pathname,
+          target.search,
+          overlayState
+        );
+        if (overlayRedirect) {
+          navigateWithHistoryIndex(overlayRedirect, { commit: "sync" });
+          return;
+        }
+        if (updateActiveModalFlow(overlayMatch, target, overlayState, "push")) {
+          return;
+        }
+        const initialFlowScreen = modalFlowScreenFromMatch(
+          overlayMatch,
+          target.pathname,
+          target.search,
+          overlayState,
+          0,
+          "push"
+        );
+        pushModalEntry({
+          kind: overlayMatch.route.presentation,
+          route: overlayMatch.route,
+          params: overlayMatch.params,
+          pathname: target.pathname,
+          search: target.search,
+          historyState: initialFlowScreen?.historyState ?? overlayState,
+          flowScreens: initialFlowScreen ? [initialFlowScreen] : void 0
+        });
+        return;
+      }
+      const pushMatch = matchStackRouteByPresentation(
+        compiledRoutes,
+        wouterRouter.parser,
+        target.pathname,
+        PUSH_PRESENTATIONS
+      );
+      navigateWithHistoryIndex(to, {
+        ...options,
+        state: stateForSplitNavigationTarget(options.state, pushMatch, "navigate")
+      });
+    },
+    [
+      compiledRoutes,
+      goBackTopModal,
+      pathname,
+      pushModalEntry,
+      updateActiveModalFlow,
+      wouterRouter.parser
+    ]
+  );
+  const replace = useCallback(
+    (to, options = {}) => {
+      const target = parseNavigationTarget(to, pathname);
+      const overlayMatch = matchStackRouteByPresentation(
+        compiledRoutes,
+        wouterRouter.parser,
+        target.pathname,
+        OVERLAY_PRESENTATIONS
+      );
+      if (overlayMatch && isModalLikePresentation(overlayMatch.route.presentation)) {
+        const overlayState = stateForSplitNavigationTarget(
+          options.state,
+          null,
+          "replace"
+        );
+        const overlayRedirect = guardRedirectForMatch(
+          overlayMatch,
+          target.pathname,
+          target.search,
+          overlayState
+        );
+        if (overlayRedirect) {
+          navigateWithHistoryIndex(overlayRedirect, {
+            commit: "replace",
+            state: options.state
+          });
+          return;
+        }
+        if (updateActiveModalFlow(overlayMatch, target, overlayState, "replace")) {
+          return;
+        }
+        const initialFlowScreen = modalFlowScreenFromMatch(
+          overlayMatch,
+          target.pathname,
+          target.search,
+          overlayState,
+          0,
+          "replace"
+        );
+        pushModalEntry(
+          {
+            kind: overlayMatch.route.presentation,
+            route: overlayMatch.route,
+            params: overlayMatch.params,
+            pathname: target.pathname,
+            search: target.search,
+            historyState: initialFlowScreen?.historyState ?? overlayState,
+            flowScreens: initialFlowScreen ? [initialFlowScreen] : void 0
+          },
+          true
+        );
+        return;
+      }
+      const pushMatch = matchStackRouteByPresentation(
+        compiledRoutes,
+        wouterRouter.parser,
+        target.pathname,
+        PUSH_PRESENTATIONS
+      );
+      navigateWithHistoryIndex(to, {
+        commit: "replace",
+        state: stateForSplitNavigationTarget(options.state, pushMatch, "replace")
+      });
+    },
+    [
+      compiledRoutes,
+      pathname,
+      pushModalEntry,
+      updateActiveModalFlow,
+      wouterRouter.parser
+    ]
+  );
+  const goBack = useCallback(() => {
+    if (goBackTopModal()) return true;
+    const activeEntry = visibleActiveEntryRef.current;
+    const activeSplitRoute = activeEntry ? splitViewRouteForSnapshot(activeEntry) : void 0;
+    const activeSplitNavigation = activeEntry?.splitNavigation;
+    if (activeEntry && activeSplitRoute?.splitView?.activePane === "secondary" && activeSplitNavigation) {
+      const previousDetailSnapshot = previousSnapshotInDetailPath(
+        snapshotHistoryRef.current,
+        activeEntry
+      );
+      if (navigateToSnapshot(previousDetailSnapshot)) return true;
+      const splitRootTarget = secondarySplitBackTarget(activeEntry);
+      if (splitRootTarget) {
+        navigateWithHistoryIndex(`${splitRootTarget}${activeEntry.search}`, {
+          commit: "sync",
+          state: stateWithoutSplitNavigation(activeEntry.historyState)
+        });
+        return true;
+      }
+    }
+    const previousSnapshot = previousSnapshotFromHistory(
+      snapshotHistoryRef.current,
+      activeEntry
+    );
+    if (canNavigateBackWithinDrawer(previousSnapshot, activeEntry)) {
+      return navigateToSnapshot(previousSnapshot);
+    }
+    const previousEntry = previousStackEntry(entriesRef.current, activeEntry);
+    if (navigateToSnapshot(previousEntry)) return true;
+    if (canNavigateBackWithinSplit(previousSnapshot, activeEntry)) {
+      return navigateToSnapshot(previousSnapshot);
+    }
+    const splitBackTarget = secondarySplitBackTarget(activeEntry);
+    if (splitBackTarget) {
+      navigateWithHistoryIndex(`${splitBackTarget}${activeEntry?.search ?? ""}`, {
+        commit: "sync",
+        state: activeEntry?.historyState
+      });
+      return true;
+    }
+    return false;
+  }, [goBackTopModal]);
+  const router = useMemo(
+    () => ({
+      navigate,
+      replace,
+      close: closeModal,
+      closeAll: closeAllModals,
+      goBack
+    }),
+    [closeAllModals, closeModal, goBack, navigate, replace]
+  );
+  useEffect(() => {
+    if (visibleActiveEntry) {
+      document.documentElement.setAttribute(
+        "data-route-stack-active-key",
+        visibleActiveEntry.stackKey
+      );
+      document.documentElement.setAttribute(
+        "data-route-stack-active-presentation",
+        visibleActiveEntry.presentation
+      );
+    }
+    return () => {
+      document.documentElement.removeAttribute("data-route-stack-active-key");
+      document.documentElement.removeAttribute("data-route-stack-active-presentation");
+    };
+  }, [visibleActiveEntry]);
+  if (guardRedirect) {
+    return /* @__PURE__ */ jsxs(RouterActionsContext.Provider, { value: router, children: [
+      runtimeChildren,
+      fallbackNode
+    ] });
+  }
+  if (!snapshot && entries.length === 0) {
+    return /* @__PURE__ */ jsxs(RouterActionsContext.Provider, { value: router, children: [
+      runtimeChildren,
+      fallbackNode,
+      /* @__PURE__ */ jsx(
+        RouterModalStackHost,
+        {
+          entries: modalEntries,
+          close: closeModal,
+          remove: removeModal,
+          fallback: fallbackNode,
+          shell
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(RouterActionsContext.Provider, { value: router, children: [
+    runtimeChildren,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "screen-stack",
+        "data-router-shell": shell,
+        "data-animation": !isTransitionSettled ? "true" : void 0,
+        style: { "--stack-transition-time": `${ROUTE_TRANSITION_MS}ms` },
+        children: renderEntries.map((entry, index) => {
+          const phase = phaseForEntry(entry, visibleActiveIds, visibleActiveId);
+          const transitionStatus = heldEnterIds.has(entry.id) ? "preEnter" : transitionStatusForEntry(entry, stateMap.get(entry.id)?.status);
+          const animationType = animationClassForEntry(
+            entry,
+            phase,
+            visibleActiveEntry,
+            visibleStackDirection
+          );
+          const zIndex = phase === "exiting" ? renderEntries.length + index + 1 : index + 1;
+          const contentContainer = stackEntryContentContainer(entry);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-route-stack-screen": "true",
+              "data-route-stack-key": entry.stackKey,
+              "data-route-stack-route-id": entry.route.id,
+              "data-route-stack-container": entry.route.container,
+              "data-route-stack-content-container": contentContainer,
+              "data-route-stack-presentation": entry.presentation,
+              "data-route-stack-phase": phase,
+              "data-route-stack-transition": transitionStatus,
+              className: screenClassName(entry, phase, transitionStatus, animationType),
+              style: { zIndex },
+              children: /* @__PURE__ */ jsx("div", { className: "stack-screen-container", children: /* @__PURE__ */ jsx(FrozenStackEntry, { entry, fallback: fallbackNode }) })
+            },
+            entry.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RouterModalStackHost,
+      {
+        entries: modalEntries,
+        close: closeModal,
+        remove: removeModal,
+        fallback: fallbackNode,
+        shell
+      }
+    )
+  ] });
+}
+function RouterRoot(props) {
+  return /* @__PURE__ */ jsx(
+    Router$1,
+    {
+      aroundNav: (_navigate, to, options) => {
+        navigateWithHistoryIndex(to, options);
+      },
+      children: /* @__PURE__ */ jsx(RouterRuntime, { ...props })
+    }
+  );
+}
+var RouterScreen = routeComponent("push");
+var RouterStack = routeComponent("push");
+var RouterModal = routeComponent("modal");
+var RouterSheet = routeComponent("sheet");
+var RouterTabBar = routeComponent("push", "tabbar");
+var RouterTabBarItem = routeComponent("push", "tabbar-item");
+var RouterDrawer = routeComponent("push", "drawer");
+var RouterDrawerGroup = routeComponent("push", "drawer-group");
+var RouterDrawerSection = routeComponent(
+  "push",
+  "drawer-section"
+);
+var RouterDrawerItem = routeComponent("push", "drawer-item");
+var RouterSplitViewPrimary = routeComponent(
+  "push",
+  "split-primary"
+);
+var RouterSplitViewSecondary = routeComponent(
+  "push",
+  "split-secondary"
+);
+var RouterSplitView = Object.assign(
+  routeComponent("push", "splitview"),
+  {
+    Primary: RouterSplitViewPrimary,
+    Secondary: RouterSplitViewSecondary
+  }
+);
+var RouterProtected = routeComponent("push", "protected");
+var RouterRedirect = routeComponent("push", "redirect");
+var Router = Object.assign(RouterRoot, {
+  Screen: RouterScreen,
+  Stack: RouterStack,
+  Redirect: RouterRedirect,
+  Modal: RouterModal,
+  Sheet: RouterSheet,
+  TabBar: RouterTabBar,
+  TabBarItem: RouterTabBarItem,
+  Drawer: RouterDrawer,
+  DrawerGroup: RouterDrawerGroup,
+  DrawerSection: RouterDrawerSection,
+  DrawerItem: RouterDrawerItem,
+  SplitView: RouterSplitView,
+  Protected: RouterProtected
+});
+
+export { Modal, ModalFrame, Router, Sheet, SheetFrame, sheetDragStartsInInteractiveControl, sheetScrollAtTop, useCurrentModal, useCurrentRoute, useDrawer, useHistoryState, useModalSwipeTarget, useParams, useRoute, useRouter, useSearchParams, useSheetDragEngine };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map