@swiftbrowser/react 0.25.0 → 0.26.0

package/README.md

@@ -1010,15 +1010,27 @@ root.render(<Counter />);
 receive((event) => root.dispatch(event));
 ```
 
-The child is one screen: its top-level views are drawn in place; what it
-would put on a screen of its own joins the screen `RemoteTree` sits in
-(`navigationTitle`, `toolbar`, `searchable`, `toolbarVisibility`), and its
-`sheet`s and `alert`s are presented over the host's root. A pass the child
-made in `withAnimation` animates here too, and the child's completion runs
-when the host's animation ends. Not yet: a `NavigationStack` inside the
-child (its screens do not become pushes of the host's stack), `Host`
-elements (their DOM lives in the child's page, which has none here), and
-the ops a loader answers (`request`, `swiftdata`, `defaults`).
+The child's top-level views are drawn in place; what it would put on a
+screen of its own joins the screen `RemoteTree` sits in (`navigationTitle`,
+`toolbar`, `searchable`, `toolbarVisibility`), and its `sheet`s and `alert`s
+are presented over the host's root. A pass the child made in `withAnimation`
+animates here too, and the child's completion runs when the host's animation
+ends.
+
+A `NavigationStack` in the child becomes the host's, when `RemoteTree` sits
+in one: the child's root screen is drawn in place, and every screen the
+child pushes (`NavigationLink`, its `path`) is pushed on the host's stack,
+with the child's title, display mode, toolbar and search field on it. The
+child's path stays the truth: a push or pop there (`dismiss` included)
+pushes or pops the host's screens, and a pop in the host (the back button,
+the swipe, a tap on an earlier screen in the bar) pops the child's path to
+the same place. The host's path holds the child's screens as pushed views,
+so a bound `path` sees them; a screen the host pushes over them stays until
+the child's stack moves. Outside a host stack the child's stack is drawn as
+its own. Only the child's first stack is mapped (one in a sheet presents in
+the sheet), and not yet: `NavigationSplitView` in the child, `Host` elements
+(their DOM lives in the child's page, which has none here), and the ops a
+loader answers (`request`, `swiftdata`, `defaults`).
 
 ## How it works
 

package/dist/components/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/components/navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG5D,OAAO,EAA4C,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAM5F,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,OAAO,EAAE,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,KAAK,IAAI,CAAC;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,CAMtE;AA0DD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA4BpE"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/components/navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAG5D,OAAO,EAA4C,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAM5F,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,OAAO,EAAE,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,KAAK,IAAI,CAAC;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,CAMtE;AA8DD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CA4BpE"}

package/dist/components/remoteTree.d.ts

@@ -6,6 +6,16 @@
  * screen and its renderer, web or native alike. What a child hoists to its
  * root for lack of a screen of its own joins this tree's enclosing screen
  * (a title, a toolbar, a search field) or root (a sheet, an alert).
+ *
+ * A child's `NavigationStack` becomes this tree's: inside a host stack, the
+ * child's root screen is drawn in place (its title and toolbar on the host's
+ * screen) and each screen the child pushes is pushed onto the host's stack,
+ * so the child's screens slide in, get the host's back button and swipe,
+ * and show in its bar like the host's own. The child's path stays the
+ * truth: a push or pop in the child pushes or pops the host's screens, and
+ * a pop in the host (back, swipe, a tap on an earlier screen) is sent to the
+ * child as the renderer would send it (a `tap` on the popped screen), which
+ * pops the child's path.
  */
 import { type ReactNode } from 'react';
 import type { RemoteRoot } from '../host/remote';

package/dist/components/remoteTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remoteTree.d.ts","sourceRoot":"","sources":["../../src/components/remoteTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA8E,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnH,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI7D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;CAClB;AAYD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,GAAG,SAAS,CAyB/D"}
+{"version":3,"file":"remoteTree.d.ts","sourceRoot":"","sources":["../../src/components/remoteTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAsF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3H,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;CAClB;AA+DD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,GAAG,SAAS,CA6D/D"}

package/dist/host/remote.d.ts

@@ -35,6 +35,8 @@ export interface RemoteRoot {
     getVersion(): number;
     /** The mirror: element 0, whose children are the child's top-level elements (hoisted sheets and alerts last). */
     readonly root: MirrorNode;
+    /** The mirrored element with that id (the child's own id), if it is there. */
+    node(id: number): MirrorNode | undefined;
     /** What the child's root carries (a title with no screen of its own, a color scheme); `update` of element 0. */
     readonly rootProps: Record<string, unknown>;
     /** The handlers a mirrored element gets: every event forwarded to the child under the child's id. */

package/dist/host/remote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../src/host/remote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAa,EAAE,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,6DAA6D;AAC7D,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE,GAAG,IAAI,CAAC;IACnC,2EAA2E;IAC3E,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,IAAI,CAAC;IACvD,sEAAsE;IACtE,aAAa,CAAC,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACjE,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/C,uEAAuE;IACvE,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,UAAU,IAAI,MAAM,CAAC;IACrB,iHAAiH;IACjH,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,gHAAgH;IAChH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,qGAAqG;IACrG,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC;IACvC,kGAAkG;IAClG,MAAM,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,gBAAgB,IAAI,UAAU,CA+I7C"}
+{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../src/host/remote.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAa,EAAE,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,6DAA6D;AAC7D,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE,GAAG,IAAI,CAAC;IACnC,2EAA2E;IAC3E,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,IAAI,CAAC;IACvD,sEAAsE;IACtE,aAAa,CAAC,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACjE,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/C,uEAAuE;IACvE,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,UAAU,IAAI,MAAM,CAAC;IACrB,iHAAiH;IACjH,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,gHAAgH;IAChH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,qGAAqG;IACrG,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC;IACvC,kGAAkG;IAClG,MAAM,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,gBAAgB,IAAI,UAAU,CAkJ7C"}

package/dist/index.js

@@ -1,13 +1,13 @@
-import { createContext, useContext, createElement, useSyncExternalStore, useLayoutEffect, Fragment, useRef, useState, Children, useEffect, isValidElement, useId, cloneElement, useCallback } from "react";
+import { createContext, useContext, createElement, useSyncExternalStore, useLayoutEffect, useRef, Fragment, useState, Children, useEffect, isValidElement, useId, cloneElement, useCallback } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
 import { BrowserHistory } from "@swiftbrowser/web/src/browserHistory";
 import { watchKeyboard } from "@swiftbrowser/web/src/deviceMode";
 import { browserEnvironment, exportFiles, loadableURL, performHostRequest } from "@swiftbrowser/web/src/hostRequests";
 import { Renderer } from "@swiftbrowser/web/src/renderer";
 import { currentScenePhase, watchScenePhase } from "@swiftbrowser/web/src/scenePhase";
-import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
 import { configureSignInWithApple } from "@swiftbrowser/web/src/appleSignIn";
 import { fileURL } from "@swiftbrowser/web/src/files";
@@ -583,6 +583,9 @@ function createRemoteRoot() {
       notify2();
       answer?.();
     },
+    node(id) {
+      return nodes.get(id);
+    },
     onEvent(handler) {
       eventHandler = handler;
     },
@@ -643,16 +646,67 @@ function sb(kind, props, on, children, target) {
   if (target) hostProps.target = target;
   return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
 }
+const NavigationContext = createContext(null);
+const ScreenDepthContext = createContext(0);
+function useScreenDepth() {
+  return useContext(ScreenDepthContext);
+}
+function useNavigation() {
+  return useContext(NavigationContext);
+}
+function RegisterDestination({ destination }) {
+  const navigation = useContext(NavigationContext);
+  navigation?.registerDestination(destination);
+  return null;
+}
 const SCREEN_PROPS = ["title", "displayMode", "toolbarRole", "navigationBarHidden", "bottomBarHidden", "statusBarHidden"];
-function renderNode(root, node) {
+function screenPrefs(props, key) {
+  const picked = {};
+  for (const name of SCREEN_PROPS) if (name in props) picked[name] = props[name];
+  if (picked["title"] === "") delete picked["title"];
+  if (picked["displayMode"] === "automatic") delete picked["displayMode"];
+  return Object.keys(picked).length ? createElement(Fragment, { key }, sb(PREF_KIND, picked, void 0, void 0, "navscreen")) : null;
+}
+function findStack(node) {
+  for (const child of node.children) {
+    if (child.kind === "sheet" || child.kind === "alert") continue;
+    if (child.kind === "navstack") return child;
+    const found = findStack(child);
+    if (found) return found;
+  }
+  return null;
+}
+const screensOf = (stack) => stack ? stack.children.filter((child) => child.kind === "navscreen") : [];
+function renderNode(root, node, stack) {
   if (node.kind === "host") return null;
-  const children = node.children.length ? node.children.map((child) => renderNode(root, child)) : void 0;
+  if (node === stack) {
+    const first = screensOf(stack)[0];
+    return createElement(Fragment, { key: node.id }, first ? renderScreen(root, first, stack) : null);
+  }
+  const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack)) : void 0;
   return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), children));
 }
+function renderScreen(root, screen, stack) {
+  const out = [screenPrefs(screen.props, "$screen")];
+  for (const child of screen.children) {
+    const drawn = renderNode(root, child, stack);
+    if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
+    else out.push(drawn);
+  }
+  return createElement(Fragment, null, ...out);
+}
+function RemoteScreen({ root, id }) {
+  useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
+  const screen = root.node(id);
+  if (!screen?.parent) return null;
+  return renderScreen(root, screen, findStack(root.root));
+}
 function RemoteTree({ root }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const environment = useContext(EnvironmentContext);
   const tree = useContext(HostTreeContext);
+  const navigation = useNavigation();
+  const depth = useScreenDepth();
   useLayoutEffect(() => {
     root.attach(tree);
     return () => root.attach(null);
@@ -660,14 +714,42 @@ function RemoteTree({ root }) {
   useLayoutEffect(() => {
     root.setEnvironment(environment);
   }, [root, environment]);
-  const out = [];
-  const screen = {};
-  for (const key of SCREEN_PROPS) if (key in root.rootProps) screen[key] = root.rootProps[key];
-  if (Object.keys(screen).length) out.push(createElement(Fragment, { key: "$screen" }, sb(PREF_KIND, screen, void 0, void 0, "navscreen")));
+  const stack = navigation ? findStack(root.root) : null;
+  const pushed = screensOf(stack).slice(1);
+  const values = useRef(/* @__PURE__ */ new Map());
+  const ours = useRef(/* @__PURE__ */ new WeakSet());
+  const lastPushed = useRef([]);
+  const valueFor = (id) => {
+    let value = values.current.get(id);
+    if (!value) {
+      value = { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id }) };
+      values.current.set(id, value);
+      ours.current.add(value);
+    }
+    return value;
+  };
+  useLayoutEffect(() => {
+    if (!navigation) return;
+    const ids = pushed.map((screen) => screen.id);
+    const wanted = ids.map(valueFor);
+    for (const id of values.current.keys()) if (!ids.includes(id)) values.current.delete(id);
+    const tail = navigation.path.slice(depth);
+    let shown = 0;
+    while (shown < tail.length && typeof tail[shown] === "object" && tail[shown] !== null && ours.current.has(tail[shown])) shown += 1;
+    const childMoved = ids.length !== lastPushed.current.length || ids.some((id, i) => id !== lastPushed.current[i]);
+    lastPushed.current = ids;
+    if (!childMoved && shown < wanted.length && tail.slice(0, shown).every((value, i) => value === wanted[i])) {
+      root.dispatch({ type: "tap", id: pushed[shown].id });
+      return;
+    }
+    if (shown === wanted.length && wanted.every((value, i) => tail[i] === value)) return;
+    navigation.setPath([...navigation.path.slice(0, depth), ...wanted]);
+  });
+  const out = [screenPrefs(root.rootProps, "$root")];
   if ("colorScheme" in root.rootProps)
     out.push(createElement(Fragment, { key: "$scheme" }, sb(PREF_KIND, { colorScheme: root.rootProps["colorScheme"] }, void 0, void 0, "root")));
   for (const child of root.root.children) {
-    const drawn = renderNode(root, child);
+    const drawn = renderNode(root, child, stack);
     if (child.kind === "sheet" || child.kind === "alert") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "root")));
     else if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
     else out.push(drawn);
@@ -905,15 +987,6 @@ function mount(screen, element, options = {}) {
   };
   return mounted;
 }
-const NavigationContext = createContext(null);
-function useNavigation() {
-  return useContext(NavigationContext);
-}
-function RegisterDestination({ destination }) {
-  const navigation = useContext(NavigationContext);
-  navigation?.registerDestination(destination);
-  return null;
-}
 const EMPTY = { canUndo: false, canRedo: false, undoActionName: "", redoActionName: "" };
 const defaultSchedule = (close) => {
   if (typeof queueMicrotask === "function") queueMicrotask(close);
@@ -1967,12 +2040,14 @@ function OwnStack(props) {
   const context = {
     push: (value) => setPath([...path, value]),
     pop: () => setPath(path.slice(0, -1)),
+    path,
+    setPath: (next) => setPath(next),
     registerDestination: (builder) => {
       destination.current = builder;
     }
   };
   const screens = [
-    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, own.children) }, "root")
+    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: 0, children: own.children })) }, "root")
   ];
   path.forEach((value, index) => {
     const pop = () => setPath(path.slice(0, index));
@@ -1981,7 +2056,7 @@ function OwnStack(props) {
         "navscreen",
         { title: "", displayMode: "automatic", depth: index + 1 },
         { tap: pop },
-        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) })
+        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: index + 1, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) }) })
       ) }, index + 1)
     );
   });