@sigmela/router 0.7.2 → 0.9.0

package/dist/index.js

@@ -236,15 +236,52 @@ function useSheetDragEngine({
     targetRef
   ]);
 }
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return false;
+    }
+    return window.matchMedia(query).matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(query);
+    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);
+  }, [query]);
+  return matches;
+}
+function useMinWidth(minWidth) {
+  return useMediaQuery(`(min-width: ${minWidth}px)`);
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 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;
+var SIDE_PANEL_TWEEN = { duration: 0.3, ease: [0.22, 0.61, 0.36, 1] };
+var INSTANT = { duration: 0 };
 function closeTargetY(surface, target) {
   if (target === "viewport") return window.innerHeight + 32;
   return (surface?.getBoundingClientRect().height || window.innerHeight) + 32;
 }
+function closeTargetX(surface, currentX) {
+  if (!surface) return window.innerWidth;
+  const left = surface.getBoundingClientRect().left - currentX;
+  return Math.max(0, window.innerWidth - left) + 32;
+}
 function SheetSurface({
   children,
   open,
@@ -263,15 +300,20 @@ function SheetSurface({
   scrollElement,
   ariaLabel,
   shell = "mobile-contained",
-  closeTarget = "surface"
+  closeTarget = "surface",
+  edge = "bottom"
 }) {
   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);
+  const edgeRef = useRef(edge);
+  const enteredRef = useRef(false);
+  const y = useMotionValue(edge === "bottom" ? window.innerHeight : 0);
+  const x = useMotionValue(edge === "right" ? window.innerWidth : 0);
   removeRef.current = onExitComplete;
+  edgeRef.current = edge;
   requestCloseRef.current = onRequestClose;
   usePageScrollLock(true);
   const requestClose = useCallback(
@@ -286,10 +328,18 @@ function SheetSurface({
     (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);
+      const reduced = prefersReducedMotion();
+      let controls;
+      if (edgeRef.current === "right") {
+        x.stop();
+        const target = closeTargetX(surfaceRef.current, x.get());
+        controls = animate(x, target, reduced ? INSTANT : SIDE_PANEL_TWEEN);
+      } else {
+        const target = closeTargetY(surfaceRef.current, closeTarget);
+        y.stop();
+        y.set(Math.max(0, offset));
+        controls = animate(y, target, SHEET_SPRING);
+      }
       void controls.finished.then(
         () => {
           removeRef.current();
@@ -299,25 +349,55 @@ function SheetSurface({
         }
       );
     },
-    [closeTarget, y]
+    [closeTarget, x, 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]);
+    if (enteredRef.current) {
+      x.stop();
+      y.stop();
+      x.set(0);
+      y.set(0);
+      return;
+    }
+    let controls;
+    if (edge === "right") {
+      y.set(0);
+      x.set(closeTargetX(surfaceRef.current, 0));
+      controls = animate(x, 0, prefersReducedMotion() ? INSTANT : SIDE_PANEL_TWEEN);
+    } else {
+      x.set(0);
+      y.set(window.innerHeight);
+      controls = animate(y, 0, SHEET_SPRING);
+    }
+    let cancelled = false;
+    void controls.finished.then(
+      () => {
+        if (!cancelled) enteredRef.current = true;
+      },
+      () => {
+      }
+    );
+    return () => {
+      cancelled = true;
+      controls.stop();
+    };
+  }, [closeWithAnimation, edge, open, x, y]);
   useEffect(() => {
-    if (!canDismiss) return;
+    if (!canDismiss || !open) return;
     const handler = (event) => {
-      if (event.key === "Escape") requestClose();
+      if (event.key !== "Escape") return;
+      const higherSurface = Array.from(
+        document.querySelectorAll(".router-overlay-shell")
+      ).some((shell2) => Number(shell2.style.zIndex) > zIndex);
+      if (!higherSurface) requestClose();
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [canDismiss, requestClose]);
+  }, [canDismiss, open, requestClose, zIndex]);
   const shouldStartDrag = useCallback(
     (update) => update.totalY > 0 && sheetScrollAtTop(scrollElement ?? null),
     [scrollElement]
@@ -347,7 +427,7 @@ function SheetSurface({
   );
   useSheetDragEngine({
     targetRef: surfaceRef,
-    enabled: swipeToClose && canDismiss,
+    enabled: swipeToClose && canDismiss && edge === "bottom",
     minDragDistance: DRAG_START_DISTANCE,
     ignoreStartTarget: sheetDragStartsInTextInput,
     shouldStart: shouldStartDrag,
@@ -383,7 +463,7 @@ function SheetSurface({
       {
         ref: surfaceRef,
         className: surfaceClassName,
-        style: { ...surfaceStyle, y },
+        style: { ...surfaceStyle, x, y },
         role: "dialog",
         "aria-modal": "true",
         "aria-label": ariaLabel,
@@ -441,6 +521,7 @@ function OverlayContentScope({
 function useOverlayContentKey() {
   return useContext(OverlayContentKeyContext);
 }
+var DESKTOP_MIN_WIDTH = 640;
 var ModalContext = createContext(null);
 function useModalContext() {
   const ctx = useContext(ModalContext);
@@ -505,7 +586,15 @@ function ModalFrame({
   const options = activeRegistration?.options;
   const swipeToClose = options?.swipeToClose ?? true;
   const ariaLabel = options?.ariaLabel;
-  const isContentSized = contentSized || options?.presentation === "content";
+  const isDesktop = useMinWidth(DESKTOP_MIN_WIDTH);
+  const isRightPanel = isDesktop && options?.presentation === "right";
+  const isContentSized = !isRightPanel && (contentSized || options?.presentation === "content");
+  const surfaceClassName = [
+    "router-modal-surface",
+    isContentSized && "router-modal-surface--content-sized",
+    isRightPanel && "router-modal-surface--right",
+    !isRightPanel && options?.size === "wide" && "router-modal-surface--wide"
+  ].filter(Boolean).join(" ");
   const requestClose = useCallback(() => {
     onRequestClose();
   }, [onRequestClose]);
@@ -525,11 +614,16 @@ function ModalFrame({
       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" : ""}`,
+      shellClassName: `router-modal-shell${isRightPanel ? " router-modal-shell--right" : ""}`,
+      surfaceClassName,
+      surfaceStyle: {
+        "--router-modal-width": options?.width ? `${options.width}px` : void 0,
+        "--router-modal-height": options?.height ? `${options.height}px` : void 0
+      },
       scrollElement: swipeTarget,
       ariaLabel,
       closeTarget: isContentSized ? "surface" : "viewport",
+      edge: isRightPanel ? "right" : "bottom",
       children
     }
   ) });
@@ -539,14 +633,16 @@ function ModalRoot({
   swipeToClose = true,
   ariaLabel,
   size = "regular",
+  width,
+  height,
   presentation = "fullscreen"
 }) {
   const { setOptions } = useModalContext();
   const contentKey = useOverlayContentKey();
   useLayoutEffect(() => {
-    setOptions(contentKey, { swipeToClose, ariaLabel, size, presentation });
+    setOptions(contentKey, { swipeToClose, ariaLabel, size, width, height, presentation });
     return () => setOptions(contentKey, null);
-  }, [ariaLabel, contentKey, presentation, setOptions, size, swipeToClose]);
+  }, [ariaLabel, contentKey, height, presentation, setOptions, size, swipeToClose, width]);
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function ModalHeader({
@@ -941,7 +1037,7 @@ 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") {
+  if (typeof value.splitViewId !== "string" || typeof value.detailPathId !== "string" || typeof value.detailDepth !== "number" || value.operation !== "selection" && value.operation !== "push" && value.operation !== "replace" && value.operation !== "pop") {
     return void 0;
   }
   return {
@@ -994,7 +1090,7 @@ function historyNavigationKeyFromState(state) {
 function historyCommitFromState(state) {
   if (isRecord(state)) {
     const commit = state[HISTORY_COMMIT_KEY];
-    if (commit === "sync" || commit === "replace") return commit;
+    if (commit === "sync" || commit === "replace" || commit === "pop") return commit;
   }
   return "push";
 }
@@ -1119,6 +1215,7 @@ function splitRouteChildren(children) {
   const routeChildren = [];
   const nonRouteChildren = [];
   for (const child of childArray) {
+    if (child == null || typeof child === "boolean") continue;
     if (isStackRouteElement(child)) {
       routeChildren.push(child);
     } else {
@@ -1506,7 +1603,8 @@ function compileStackRoutes(children, parentPath, parentId = "root", inheritedGu
               container: descriptor.container,
               childRoute,
               drawerAside: isTabBar ? void 0 : props.aside,
-              drawerFooter: isTabBar ? void 0 : props.footer
+              drawerFooter: isTabBar ? void 0 : props.footer,
+              drawerDesktopCollapsible: isTabBar ? void 0 : props.desktopCollapsible
             };
             if (isTabBar && tabs) {
               containerRoute.tabBar = {
@@ -1622,8 +1720,8 @@ function stateForSplitNavigationTarget(state, targetMatch, action) {
     } : {
       splitViewId: origin.splitViewId,
       detailPathId: origin.detailPathId,
-      detailDepth: action === "navigate" ? origin.detailDepth + 1 : origin.detailDepth,
-      operation: action === "navigate" ? "push" : "replace"
+      detailDepth: action === "navigate" ? origin.detailDepth + 1 : action === "pop" ? Math.max(0, origin.detailDepth - 1) : origin.detailDepth,
+      operation: action === "navigate" ? "push" : action
     }
   );
   next[SPLIT_NAVIGATION_KEY] = metadata;
@@ -1987,30 +2085,6 @@ function pathnameForRouteContext(route, 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;
 }
@@ -2099,6 +2173,12 @@ function useRouter() {
           ...options,
           state: stateWithSplitNavigationOrigin(options.state, splitPaneOrigin)
         });
+      },
+      popTo: (to, options = {}) => {
+        router.popTo(to, {
+          ...options,
+          state: stateWithSplitNavigationOrigin(options.state, splitPaneOrigin)
+        });
       }
     };
   }, [router, splitPaneOrigin]);
@@ -2118,7 +2198,6 @@ function useCurrentModal() {
   return current;
 }
 function DefaultSplitViewLayout({
-  children,
   primary,
   secondary,
   isWide,
@@ -2135,8 +2214,15 @@ function DefaultSplitViewLayout({
       "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
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sigmela-split-view__primary",
+            style: !isWide && secondary ? { display: "none" } : void 0,
+            children: primary
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "sigmela-split-view__secondary", children: secondary })
       ]
     }
   );
@@ -2161,88 +2247,119 @@ function DefaultDrawerLayout({
       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
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "sigmela-drawer",
+      "data-drawer-open": drawer?.isOpen ? "true" : "false",
+      "data-drawer-collapsed": drawer?.isCollapsed ? "true" : "false",
+      "data-drawer-desktop": drawer?.desktopCollapsible,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            className: "sigmela-drawer__sidebar",
+            inert: drawer?.isMobile && !drawer.isOpen ? true : void 0,
+            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",
+                      "aria-label": node.label,
+                      title: drawer?.isCollapsed ? node.label : void 0,
+                      "data-active": node.id === activeItem ? "true" : void 0,
+                      onClick: () => onItemChange?.(node.id),
+                      children: [
+                        node.icon || drawer?.isCollapsed ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", "aria-hidden": "true", children: node.icon ?? node.label.slice(0, 1) }) : 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-label": node.label,
+                      title: drawer?.isCollapsed ? node.label : void 0,
+                      "aria-controls": itemsId,
+                      "aria-expanded": isExpanded,
+                      onClick: () => {
+                        if (drawer?.isCollapsed) drawer.open();
+                        toggleGroup(node.id);
+                      },
+                      children: [
+                        node.icon || drawer?.isCollapsed ? /* @__PURE__ */ jsx("span", { className: "sigmela-drawer__item-icon", "aria-hidden": "true", children: node.icon ?? node.label.slice(0, 1) }) : 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",
+            tabIndex: drawer?.isMobile && drawer.isOpen ? 0 : -1,
+            onClick: drawer?.close
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "main",
+          {
+            className: "sigmela-drawer__main",
+            inert: drawer?.isMobile && drawer.isOpen ? true : void 0,
+            children
+          }
+        ),
+        aside ? /* @__PURE__ */ jsx("aside", { className: "sigmela-drawer__assistant", children: aside }) : null
+      ]
+    }
+  );
 }
 function FrozenPaneRouteContent({
   route,
@@ -2568,7 +2685,7 @@ function SplitViewRouteContent({
       fallback: splitView.primaryRoute.fallback ?? fallback
     }
   ) });
-  const secondary = splitView.secondaryRoute ? /* @__PURE__ */ jsx(SplitPaneNavigationContext.Provider, { value: secondaryNavigationOrigin, children: isWide ? /* @__PURE__ */ jsx(
+  const secondary = splitView.secondaryRoute ? /* @__PURE__ */ jsx(SplitPaneNavigationContext.Provider, { value: secondaryNavigationOrigin, children: /* @__PURE__ */ jsx(
     RouteStackViewport,
     {
       route: splitView.secondaryRoute,
@@ -2577,13 +2694,6 @@ function SplitViewRouteContent({
       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 = {
@@ -2614,13 +2724,44 @@ 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 isMobile = !useMinWidth(641);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [desktopCollapsed, setDesktopCollapsed] = useState(false);
+  const desktopCollapsible = route.drawerDesktopCollapsible ?? "offcanvas";
+  const isCollapsed = !isMobile && desktopCollapsed;
+  const isOpen = isMobile ? mobileOpen : !desktopCollapsed;
+  const open = useCallback(() => {
+    if (isMobile) setMobileOpen(true);
+    else setDesktopCollapsed(false);
+  }, [isMobile]);
+  const close = useCallback(() => {
+    if (isMobile) setMobileOpen(false);
+    else setDesktopCollapsed(true);
+  }, [isMobile]);
+  const toggle = useCallback(() => {
+    if (isMobile) setMobileOpen((value) => !value);
+    else setDesktopCollapsed((value) => !value);
+  }, [isMobile]);
+  useEffect(() => setMobileOpen(false), [isMobile, props.pathname]);
+  useEffect(() => {
+    if (!isMobile || !mobileOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented) setMobileOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isMobile, mobileOpen]);
   const drawerApi = useMemo(
-    () => ({ isOpen, open, close, toggle }),
-    [close, isOpen, open, toggle]
+    () => ({
+      isOpen,
+      isMobile,
+      isCollapsed,
+      desktopCollapsible,
+      open,
+      close,
+      toggle
+    }),
+    [close, isOpen, isMobile, isCollapsed, desktopCollapsible, open, toggle]
   );
   const childFallback = route.childRoute?.fallback ?? route.fallback ?? null;
   const drawer = route.drawer;
@@ -2640,7 +2781,7 @@ function DrawerRouteContent({
     if (item && normalizedPath(item.path) !== props.pathname) {
       navigateWithHistoryIndex(item.path);
     }
-    close();
+    setMobileOpen(false);
   } : void 0;
   const layoutProps = {
     children: content,
@@ -2909,6 +3050,13 @@ function resolveStackChange(prev, snapshot) {
     };
   }
   const direction = resolveDirection(top, snapshot);
+  if (snapshot.historyCommit === "pop" && snapshot.splitPane === "secondary") {
+    const existingIndex2 = existingStackEntryIndexForSnapshot(prev, snapshot);
+    return {
+      entries: existingIndex2 !== -1 && existingIndex2 < prev.length - 1 ? entriesRevealingSnapshot(prev, existingIndex2, snapshot) : [createEntry(snapshot, "back", true)],
+      direction: "back"
+    };
+  }
   if (isExplicitStackReplace(top, snapshot)) {
     return {
       entries: replaceActiveStackEntry(prev, top.id, snapshot, direction, true),
@@ -2970,6 +3118,10 @@ function visibleEntriesForSnapshot(entries, snapshot) {
       (entry) => entry.id === top.id ? mergeEntrySnapshot(entry, snapshot) : entry
     );
   }
+  if (snapshot.historyCommit === "pop" && snapshot.splitPane === "secondary") {
+    const existingIndex2 = existingStackEntryIndexForSnapshot(entries, snapshot);
+    return existingIndex2 !== -1 && existingIndex2 < entries.length - 1 ? entriesRevealingSnapshot(entries, existingIndex2, snapshot) : [createEntry(snapshot, "back", true)];
+  }
   if (isExplicitStackReplace(top, snapshot)) {
     return replaceActiveStackEntry(
       entries,
@@ -3640,6 +3792,20 @@ function RouterRuntime({
     },
     [pushModalEntry, updateActiveModalFlow]
   );
+  const popTo = useCallback((to, options = {}) => {
+    const { compiledRoutes: compiledRoutes2, pathname: pathname2, parser } = navigationScopeRef.current;
+    const target = parseNavigationTarget(to, pathname2);
+    const pushMatch = matchStackRouteByPresentation(
+      compiledRoutes2,
+      parser,
+      target.pathname,
+      PUSH_PRESENTATIONS
+    );
+    navigateWithHistoryIndex(to, {
+      commit: "pop",
+      state: stateForSplitNavigationTarget(options.state, pushMatch, "pop")
+    });
+  }, []);
   const goBack = useCallback(() => {
     if (goBackTopModal()) return true;
     const activeEntry = visibleActiveEntryRef.current;
@@ -3686,11 +3852,12 @@ function RouterRuntime({
     () => ({
       navigate,
       replace,
+      popTo,
       close: closeModal,
       closeAll: closeAllModals,
       goBack
     }),
-    [closeAllModals, closeModal, goBack, navigate, replace]
+    [closeAllModals, closeModal, goBack, navigate, popTo, replace]
   );
   useEffect(() => {
     if (visibleActiveEntry) {
@@ -3762,6 +3929,8 @@ function RouterRuntime({
               "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: /* @__PURE__ */ jsx(FrozenStackEntry, { entry, fallback: fallbackNode }) })
             },