@swiftbrowser/react 0.28.5 → 0.28.7

package/README.md

@@ -332,7 +332,9 @@ own would add a second entry for the same screen). When the app pops on its
 own (the bar's back button), the renderer's step back is asynchronous and
 the app's `replaceState` for what it shows now runs before it lands; the
 renderer sets that URL again on the entry it arrives at, so the address bar
-follows either back button.
+follows either back button. A reload keeps the entry it was on, and its URL,
+while the app restores the screens it shows (ten seconds at most), rather
+than stepping back to an older entry at the first commit.
 On a phone, a `fill` island follows the on-screen keyboard (`keyboard`,
 on by default for `fill`, or `mount(..., { keyboard: true })`): its height
 becomes a bottom inset, so a field, a bottom search field or a chat's
@@ -1198,7 +1200,11 @@ iPadOS's Settings and Files drill their sidebars. A back past the child's
 root shows the host's sidebar again, and the child's comes back when
 `options.shown` goes true anew or `options.generation` changes (the app
 chosen again); a back out of a screen the child pushed in its sidebar pops
-the child's sidebar stack. In a compact width the child's split view is a
+the child's sidebar stack. `options.rootBackButtonHidden` leaves the child's
+sidebar root without a back button (`navigationBarBackButtonHidden`), for a
+host that offers its way out in the detail instead, so the two columns
+never each show a back; the hook answers whether the child's sidebar shows
+on the host's now, for the host to show that way out while it does. In a compact width the child's split view is a
 stack rooted at its sidebar, mapped as any stack, and the hook keeps nothing
 on the host's path. The host's sidebar `NavigationStack` is the split
 view's column stack when it is the `sidebar` prop itself:

package/dist/components/remoteTree.d.ts

@@ -63,6 +63,13 @@ export interface RemoteSidebarOptions {
     generation?: unknown;
     /** As `RemoteTree`'s `elements`: the host's views for the child's own element kinds. */
     elements?: Readonly<Record<string, HostElementRenderer>>;
+    /**
+     * The child's sidebar root without a back button: the host offers the way
+     * out elsewhere (a back in its detail that leaves the app), so the two
+     * columns never show a back each. Screens the child pushes in its sidebar
+     * keep theirs.
+     */
+    rootBackButtonHidden?: boolean;
 }
 /**
  * The child's sidebar, pushed on the host's own sidebar stack: the screens
@@ -76,8 +83,9 @@ export interface RemoteSidebarOptions {
  * its sidebar pops the child's sidebar stack, as a pop in the host's stack
  * pops the child's. Nothing while the child has no split view (a compact
  * width, where its sidebar is the root screen of the stack `RemoteTree`
- * maps), or while `root` is null.
+ * maps), or while `root` is null. Answers whether the child's sidebar is
+ * wanted on the host's sidebar now, so the host can offer its way out.
  */
-export declare function useRemoteSidebar(root: RemoteRoot | null, path: readonly unknown[], setPath: (path: readonly unknown[]) => void, options?: RemoteSidebarOptions): void;
+export declare function useRemoteSidebar(root: RemoteRoot | null, path: readonly unknown[], setPath: (path: readonly unknown[]) => void, options?: RemoteSidebarOptions): boolean;
 export declare function RemoteTree({ root, initialPath, elements }: RemoteTreeProps): ReactNode;
 //# sourceMappingURL=remoteTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"remoteTree.d.ts","sourceRoot":"","sources":["../../src/components/remoteTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAGH,OAAO,EAAsF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3H,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAM7D,gIAAgI;AAChI,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;AAE/G,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IACzD;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;CAClC;AAwFD;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA0BD,MAAM,WAAW,oBAAoB;IACnC,wHAAwH;IACxH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oHAAoH;IACpH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;CAC1D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,KAAK,IAAI,EAAE,OAAO,GAAE,oBAAyB,GAAG,IAAI,CAqCzK;AAqBD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,SAAS,CA+DtF"}
+{"version":3,"file":"remoteTree.d.ts","sourceRoot":"","sources":["../../src/components/remoteTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAGH,OAAO,EAAsF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3H,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAM7D,gIAAgI;AAChI,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;AAE/G,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IACzD;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;CAClC;AA0FD;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA2BD,MAAM,WAAW,oBAAoB;IACnC,wHAAwH;IACxH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oHAAoH;IACpH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IACzD;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,KAAK,IAAI,EAAE,OAAO,GAAE,oBAAyB,GAAG,OAAO,CAwC5K;AAqBD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,SAAS,CA+DtF"}

package/dist/index.js

@@ -977,7 +977,7 @@ function RegisterDestination({ destination }) {
   navigation?.registerDestination(destination);
   return null;
 }
-const SCREEN_PROPS = ["title", "subtitle", "displayMode", "toolbarRole", "navigationBarHidden", "bottomBarHidden", "statusBarHidden"];
+const SCREEN_PROPS = ["title", "subtitle", "displayMode", "toolbarRole", "navigationBarHidden", "bottomBarHidden", "statusBarHidden", "backButtonHidden"];
 function screenPrefs(props, key) {
   const picked = {};
   for (const name of SCREEN_PROPS) if (name in props) picked[name] = props[name];
@@ -1023,8 +1023,9 @@ function renderSheet(root, node, stack, inherited, elements) {
   const children = node.children.map((child) => renderNode(root, child, stack, elements));
   return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), replayStyles(inherited, children)));
 }
-function renderScreen(root, screen, stack, elements) {
+function renderScreen(root, screen, stack, elements, hostPrefs) {
   const out = [screenPrefs(screen.props, "$screen")];
+  if (hostPrefs) out.push(createElement(Fragment, { key: "$host" }, sb(PREF_KIND, hostPrefs, void 0, void 0, "navscreen")));
   for (const child of screen.children) {
     const drawn = renderNode(root, child, stack, elements);
     if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
@@ -1032,21 +1033,22 @@ function renderScreen(root, screen, stack, elements) {
   }
   return createElement(Fragment, null, ...out);
 }
-function RemoteScreen({ root, id, elements }) {
+function RemoteScreen({ root, id, elements, hostPrefs }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const screen = root.node(id);
   if (!screen?.parent) return null;
-  return renderScreen(root, screen, findStack(root.root), elements);
+  return renderScreen(root, screen, findStack(root.root), elements, hostPrefs);
 }
 function useScreenValues(root, elements) {
   const values = useRef(/* @__PURE__ */ new Map());
   const ours = useRef(/* @__PURE__ */ new WeakSet());
   const keyOf2 = (screen) => `${screen.id}:${JSON.stringify(screen.props["route"] ?? null)}`;
-  const valueFor = (screen) => {
+  const valueFor = (screen, hostPrefs) => {
     const key = keyOf2(screen);
     let value = values.current.get(key);
     if (!value) {
-      value = "route" in screen.props ? { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }), route: screen.props["route"] } : { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }) };
+      const view = /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements, ...hostPrefs ? { hostPrefs } : {} });
+      value = "route" in screen.props ? { view, route: screen.props["route"] } : { view };
       values.current.set(key, value);
       ours.current.add(value);
     }
@@ -1072,7 +1074,8 @@ function useRemoteSidebar(root, path, setPath, options = {}) {
     if (last.current.root !== root || !last.current.shown && shown || last.current.generation !== options.generation) dismissed.current = false;
     last.current = { root, shown, generation: options.generation };
     const keys = screens.map(keyOf2);
-    const wanted = shown && !dismissed.current ? screens.map(valueFor) : [];
+    const rootPrefs = options.rootBackButtonHidden ? { backButtonHidden: true } : void 0;
+    const wanted = shown && !dismissed.current ? screens.map((screen, i) => valueFor(screen, i === 0 ? rootPrefs : void 0)) : [];
     forget(keys);
     const hosts = path.filter((value) => !isOurs(value));
     const mine = path.filter(isOurs);
@@ -1092,6 +1095,7 @@ function useRemoteSidebar(root, path, setPath, options = {}) {
     lastMine.current = wanted.length;
     setPath([...hosts, ...wanted]);
   });
+  return shown && screens.length > 0 && !dismissed.current;
 }
 const noSubscribe = () => () => {
 };
@@ -1147,7 +1151,7 @@ function RemoteTree({ root, initialPath, elements }) {
   useLayoutEffect(() => {
     if (!navigation) return;
     const keys = pushed.map(keyOf2);
-    const wanted = pushed.map(valueFor);
+    const wanted = pushed.map((screen) => valueFor(screen));
     forget(keys);
     const tail = navigation.path.slice(depth);
     let shown = 0;
@@ -2958,6 +2962,7 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "toolbarRole",
   "toolbarVisibility",
   "statusBarHidden",
+  "navigationBarBackButtonHidden",
   "toolbar",
   "searchable",
   "navigationDestination",
@@ -3413,6 +3418,9 @@ function apply(key, value, node, sides) {
     case "statusBarHidden":
       sides.push(sb(PREF_KIND, { statusBarHidden: Boolean(value) }, void 0, void 0, "navscreen"));
       return node;
+    case "navigationBarBackButtonHidden":
+      sides.push(sb(PREF_KIND, { backButtonHidden: Boolean(value) }, void 0, void 0, "navscreen"));
+      return node;
     case "toolbar":
       sides.push(sb(HOIST_KIND, void 0, void 0, value, "navscreen"));
       return node;
@@ -3727,9 +3735,12 @@ function decidePlatform(width, media = matchesMedia) {
 function matchesMedia(query) {
   return typeof matchMedia === "function" && matchMedia(query).matches;
 }
+function pageRoot(root) {
+  return { ...root, render: (element) => root.render(createElement(LazyWindowContext.Provider, { value: true }, element)) };
+}
 function mount(screen, element, options = {}) {
   let renderer = null;
-  const root = createSwiftUIRoot((ops) => renderer?.applyOps(ops));
+  const root = pageRoot(createSwiftUIRoot((ops) => renderer?.applyOps(ops)));
   renderer = new Renderer(screen, (event) => root.dispatch(event));
   renderer.fileDrops = "reference";
   const measurer = (text, font2, width2) => renderer.measureText(text, font2, width2);
@@ -3776,7 +3787,7 @@ function mount(screen, element, options = {}) {
   }) : null;
   observer?.observe(screen);
   const stopScenePhase = typeof document !== "undefined" ? watchScenePhase((scenePhase) => root.setEnvironment({ scenePhase })) : null;
-  root.render(createElement(LazyWindowContext.Provider, { value: true }, element));
+  root.render(element);
   const mounted = {
     root,
     renderer,