@swiftbrowser/react 0.21.0 → 0.25.0

package/README.md

@@ -239,7 +239,11 @@ Italic, Underline) comes back into the text. A `selection` binding, on a
 plain or an attributed editor, gets the viewer's selection in UTF-16
 offsets, so a Bold button can set `AttributedText.settingAttributes(text,
 start, end, { bold: true })` on it; a selection the app sets moves the
-caret (when the app focuses the editor, if it is not focused).
+caret (when the app focuses the editor, if it is not focused). A text the
+app sets that is not the echo of what the viewer typed (another person's
+edit) keeps the caret in place: the app's `selection` is applied even when
+its numbers did not change, and without one the caret is moved past the
+change.
 `.scrollDisabled` makes an editor as tall as its lines, for one in a
 scrolling page:
 
@@ -979,6 +983,43 @@ side and provided again inside:
 The list must be the same on every render of that component (each entry is
 read with a hook). Props, callbacks and external stores need no bridging.
 
+### Another root's tree, drawn here
+
+`RemoteTree` draws a tree that another SwiftUI root produces, wherever that
+root runs: a sandboxed script, a worker, another JavaScript runtime, a
+server. The other side renders with this package as usual, into a root made
+with `remote: true`, and sends the ops it gets to a `RemoteRoot` here; the
+`RemoteRoot` keeps a mirror of the elements and `RemoteTree` draws them as
+elements of this tree, so they lay out, scroll and animate with the rest and
+work on the web and natively alike. Events the renderer sends them go back
+to the other root, synchronously when the other root is in the same thread:
+
+```tsx
+// Here: the host.
+const remote = createRemoteRoot();
+remote.onEvent((event) => sandbox.dispatch(event));          // taps, text, toggles… for the child's elements
+remote.onEnvironment((environment) => sandbox.setEnvironment(environment));
+sandbox.onOps((ops) => remote.applyOps(ops));                  // the child's render passes
+<NavigationStack>
+  <RemoteTree root={remote} />
+</NavigationStack>
+
+// There: the child (the same package, its own React).
+const root = createSwiftUIRoot((ops) => send(ops), { remote: true });
+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`).
+
 ## How it works
 
 - `src/host/`: a [react-reconciler](https://www.npmjs.com/package/react-reconciler)

package/dist/components/remoteTree.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `RemoteTree`: another root's tree drawn here. The child root (made with
+ * `createSwiftUIRoot(sink, { remote: true })` wherever it runs) sends its
+ * ops to a `RemoteRoot`'s `applyOps`; this component draws the mirror as
+ * host elements, so the child's views take part in this tree's layout, its
+ * 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).
+ */
+import { type ReactNode } from 'react';
+import type { RemoteRoot } from '../host/remote';
+export interface RemoteTreeProps {
+    root: RemoteRoot;
+}
+export declare function RemoteTree({ root }: RemoteTreeProps): ReactNode;
+//# sourceMappingURL=remoteTree.d.ts.map

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

@@ -0,0 +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"}

package/dist/host/instance.d.ts

@@ -11,10 +11,20 @@ export type EventType = RendererEvent['type'];
 export type EventOf<K extends EventType> = Extract<RendererEvent, {
     type: K;
 }>;
-/** The renderer's events an element answers, by type. */
+/**
+ * The renderer's events an element answers, by type. `'*'` takes every
+ * event addressed to the element that no typed handler took: a mirrored
+ * element (`RemoteTree`) forwards them all to the root that drew it.
+ */
 export type EventHandlers = {
     [K in EventType]?: (event: EventOf<K>) => void;
+} & {
+    '*'?: (event: AddressedEvent) => void;
 };
+/** An event the renderer addresses to one element. */
+export type AddressedEvent = Extract<RendererEvent, {
+    id: number;
+}>;
 /**
  * Where a virtual element acts: the nearest enclosing `navscreen` or `sheet`
  * element, or the root container.

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

@@ -1 +1 @@
-{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/host/instance.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAC/E,yDAAyD;AACzD,MAAM,MAAM,aAAa,GAAG;KAAG,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI;CAAE,CAAC;AAE/E;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,SAAS,UAAU,CAAC;AACjC;;;;GAIG;AACH,eAAO,MAAM,UAAU,WAAW,CAAC;AAEnC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,0EAA0E;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,EAAE,EAAE,aAAa,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,yEAAyE;IACzE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,wDAAwD;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC/C,eAAe,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,iBAAiB,EAAE,QAAQ,EAAE,CAAC;CAC/B;AAED,wCAAwC;AACxC,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,CAAC,CAAC;IACN,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/host/instance.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,aAAa,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAC/E;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;KAAG,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI;CAAE,GAAG;IAAE,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;CAAE,CAAC;AAE3H,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,aAAa,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,SAAS,UAAU,CAAC;AACjC;;;;GAIG;AACH,eAAO,MAAM,UAAU,WAAW,CAAC;AAEnC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,0EAA0E;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,EAAE,EAAE,aAAa,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,yEAAyE;IACzE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,wDAAwD;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC/C,eAAe,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,iBAAiB,EAAE,QAAQ,EAAE,CAAC;CAC/B;AAED,wCAAwC;AACxC,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,CAAC,CAAC;IACN,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,iBAAiB,EAAE,QAAQ,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC"}

package/dist/host/remote.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A tree drawn by another root. `createRemoteRoot` keeps a mirror of the
+ * elements a second SwiftUI root emits (one in a sandbox, a worker, another
+ * runtime: anything that produces the ops protocol), and `RemoteTree` draws
+ * the mirror as host elements inside a host tree, forwarding the events the
+ * renderer sends those elements back to the root that owns them. Everything
+ * stays synchronous: a tap mirrored to the child runs its handler, the
+ * child's pass re-enters `applyOps`, and the host's own pass draws the result
+ * before the tap returns.
+ */
+import type { Op, RendererEvent } from '@swiftbrowser/web/src/protocol';
+import type { Environment } from '../environment';
+import type { EventHandlers } from './instance';
+import type { HostTree } from './tree';
+/** An element of the child's tree as the mirror holds it. */
+export interface MirrorNode {
+    id: number;
+    kind: string;
+    props: Record<string, unknown>;
+    children: MirrorNode[];
+    parent: MirrorNode | null;
+}
+export interface RemoteRoot {
+    /** The child root's ops, one pass at a time (each ending in `commit`). */
+    applyOps(ops: readonly Op[]): void;
+    /** Where the events for the child's elements go: its root's `dispatch`. */
+    onEvent(handler: (event: RendererEvent) => void): void;
+    /** Where the host's environment goes: its root's `setEnvironment`. */
+    onEnvironment(handler: (environment: Environment) => void): void;
+    /** An event for the child (by the child's element id, or unaddressed). */
+    dispatch(event: RendererEvent): void;
+    setEnvironment(environment: Environment): void;
+    /** For `useSyncExternalStore`: the version moves on every `commit`. */
+    subscribe(listener: () => void): () => void;
+    getVersion(): number;
+    /** The mirror: element 0, whose children are the child's top-level elements (hoisted sheets and alerts last). */
+    readonly root: MirrorNode;
+    /** 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. */
+    handlersFor(id: number): EventHandlers;
+    /** `RemoteTree` names the tree it draws into, so a child's animated pass animates that tree's. */
+    attach(tree: HostTree | null): void;
+    /** Forget the mirror and the handlers; the child root is the caller's to unmount. */
+    dispose(): void;
+}
+export declare function createRemoteRoot(): RemoteRoot;
+//# sourceMappingURL=remote.d.ts.map

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

@@ -0,0 +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"}

package/dist/host/root.d.ts

@@ -7,7 +7,7 @@
 import type { Animation, ColorScheme, DynamicTypeSize, Op, RendererEvent } from '@swiftbrowser/web/src/protocol';
 import { type ReactNode } from 'react';
 import { type Environment } from '../environment';
-import { type OpsSink } from './tree';
+import { HostTree, type HostTreeOptions, type OpsSink } from './tree';
 export interface SwiftUIRoot {
     /** Render (or re-render) the tree; the ops of the pass reach the sink before this returns. */
     render(element: ReactNode): void;
@@ -17,7 +17,14 @@ export interface SwiftUIRoot {
     /** The device environment the tree reads through `useColorScheme` and friends. */
     setEnvironment(environment: Partial<Environment>): void;
 }
-export declare function createSwiftUIRoot(sink: OpsSink): SwiftUIRoot;
+/** The tree a component renders into (`RemoteTree` stamps a child's animation on it). */
+export declare const HostTreeContext: import("react").Context<HostTree | null>;
+export type SwiftUIRootOptions = HostTreeOptions;
+/**
+ * A root whose ops reach `sink`. `remote: true` for a tree another root
+ * draws through `RemoteTree` (`createRemoteRoot`), rather than a renderer.
+ */
+export declare function createSwiftUIRoot(sink: OpsSink, options?: SwiftUIRootOptions): SwiftUIRoot;
 export type { ColorScheme, DynamicTypeSize, Op };
 /**
  * Registers the reconciler with the React DevTools hook (`__REACT_DEVTOOLS_GLOBAL_HOOK__`)
@@ -36,6 +43,17 @@ export interface WithAnimationOptions {
      */
     completionCriteria?: AnimationCompletionCriteria;
 }
+/**
+ * Stamps one tree's next `commit` with an animation (and a completion, whose
+ * serial is answered), without a body: for a pass another root animated,
+ * drawn here by `RemoteTree`. The stamp waits for the tree's next flush,
+ * however late React runs it; `withAnimation` clears its stamps as its body
+ * returns.
+ */
+export declare function stampNextCommit(tree: HostTree, animation: Animation, completion?: {
+    criteria: AnimationCompletionCriteria;
+    callback: () => void;
+}): number;
 /**
  * `withAnimation { }`: the state changes `body` makes render in one pass whose
  * `commit` carries the animation, so the renderer animates every frame and

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

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/host/root.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACjH,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEvE,OAAO,EAAY,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,8FAA8F;IAC9F,MAAM,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,OAAO,IAAI,IAAI,CAAC;IAChB,oEAAoE;IACpE,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,kFAAkF;IAClF,cAAc,CAAC,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACzD;AAMD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,OAAO,GAAG,WAAW,CAgD5D;AAED,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;AAEjD;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED,6EAA6E;AAC7E,MAAM,MAAM,2BAA2B,GAAG,mBAAmB,GAAG,SAAS,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;AAID;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,CAAC;AAC9G,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,CAAC;AAC7I,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/host/root.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACjH,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtE,MAAM,WAAW,WAAW;IAC1B,8FAA8F;IAC9F,MAAM,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,OAAO,IAAI,IAAI,CAAC;IAChB,oEAAoE;IACpE,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,kFAAkF;IAClF,cAAc,CAAC,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACzD;AAMD,yFAAyF;AACzF,eAAO,MAAM,eAAe,0CAAuC,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAgD9F;AAED,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;AAEjD;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED,6EAA6E;AAC7E,MAAM,MAAM,2BAA2B,GAAG,mBAAmB,GAAG,SAAS,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;AAID;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE;IAAE,QAAQ,EAAE,2BAA2B,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAE,GAAG,MAAM,CAM1J;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,CAAC;AAC9G,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,CAAC;AAC7I,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC"}

package/dist/host/tree.d.ts

@@ -8,8 +8,19 @@
 import type { Animation, Op, RendererEvent } from '@swiftbrowser/web/src/protocol';
 import { type HostProps, type Instance, type RootNode } from './instance';
 export type OpsSink = (ops: Op[]) => void;
+export interface HostTreeOptions {
+    /**
+     * The tree is drawn by another root (`RemoteTree`), not a renderer: a
+     * preference with no screen to take it goes to the root instead of being
+     * dropped, and the root's props are sent whole as `update` of element 0
+     * (a renderer takes only `colorScheme` there), so the host can lift them
+     * to the screen it draws the tree in.
+     */
+    remote?: boolean;
+}
 export declare class HostTree {
     private readonly sink;
+    private readonly options;
     readonly root: RootNode;
     private nextId;
     /** Emitted elements by id, for event dispatch. */
@@ -24,11 +35,14 @@ export declare class HostTree {
         serial: number;
         criteria: 'logicallyComplete' | 'removed';
         callback: () => void;
+        whenNothingDrawn?: boolean;
     } | undefined;
     private readonly completions;
     /** The root's `colorScheme` last sent (`.preferredColorScheme`); undefined while none was. */
     private committedColorScheme;
-    constructor(sink: OpsSink);
+    /** Remote: the root's props last sent. */
+    private committedRootProps;
+    constructor(sink: OpsSink, options?: HostTreeOptions);
     createInstance(props: HostProps): Instance;
     updateInstance(instance: Instance, next: HostProps): void;
     /** Emit the ops for everything that changed since the last commit. */

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

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/host/tree.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAY,EAAE,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC7F,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAEhH,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,KAAK,IAAI,CAAC;AAqC1C,qBAAa,QAAQ;IAgBP,OAAO,CAAC,QAAQ,CAAC,IAAI;IAfjC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAgE;IACvF,OAAO,CAAC,MAAM,CAAK;IACnB,kDAAkD;IAClD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA+B;IACpD,OAAO,CAAC,aAAa,CAAuB;IAC5C,4EAA4E;IAC5E,OAAO,CAAC,OAAO,CAAgB;IAC/B,qDAAqD;IACrD,gBAAgB,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,8IAA8I;IAC9I,iBAAiB,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,mBAAmB,GAAG,SAAS,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,SAAS,CAAC;IACnH,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiC;IAC7D,8FAA8F;IAC9F,OAAO,CAAC,oBAAoB,CAAsC;gBAErC,IAAI,EAAE,OAAO;IAE1C,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ;IAgB1C,cAAc,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAoBzD,sEAAsE;IACtE,MAAM,IAAI,IAAI;IAKd,KAAK,IAAI,EAAE,EAAE;IAwHb,qEAAqE;IACrE,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIzC,mEAAmE;IACnE,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CAgBrC;AAED,+CAA+C;AAC/C,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAazD"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/host/tree.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAY,EAAE,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC7F,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAEhH,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,KAAK,IAAI,CAAC;AAE1C,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqCD,qBAAa,QAAQ;IAmBjB,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,OAAO;IAnB1B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAgE;IACvF,OAAO,CAAC,MAAM,CAAK;IACnB,kDAAkD;IAClD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA+B;IACpD,OAAO,CAAC,aAAa,CAAuB;IAC5C,4EAA4E;IAC5E,OAAO,CAAC,OAAO,CAAgB;IAC/B,qDAAqD;IACrD,gBAAgB,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,8IAA8I;IAC9I,iBAAiB,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,mBAAmB,GAAG,SAAS,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS,CAAC;IAC/I,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiC;IAC7D,8FAA8F;IAC9F,OAAO,CAAC,oBAAoB,CAAsC;IAClE,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAA+B;gBAGtC,IAAI,EAAE,OAAO,EACb,OAAO,GAAE,eAAoB;IAGhD,cAAc,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ;IAgB1C,cAAc,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAoBzD,sEAAsE;IACtE,MAAM,IAAI,IAAI;IAKd,KAAK,IAAI,EAAE,EAAE;IAoIb,qEAAqE;IACrE,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIzC,mEAAmE;IACnE,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CAgBrC;AAED,+CAA+C;AAC/C,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAazD"}

package/dist/index.d.ts

@@ -3,7 +3,10 @@
  * SwiftBrowser's render ops; `createSwiftUIRoot` hands them to the renderer
  * of @swiftbrowser/web, which draws them with its iOS layout engine.
  */
-export { createSwiftUIRoot, injectIntoDevTools, withAnimation, type AnimationCompletionCriteria, type SwiftUIRoot, type WithAnimationOptions } from './host/root';
+export { createSwiftUIRoot, injectIntoDevTools, withAnimation, type AnimationCompletionCriteria, type SwiftUIRoot, type SwiftUIRootOptions, type WithAnimationOptions } from './host/root';
+export { createRemoteRoot, type MirrorNode, type RemoteRoot } from './host/remote';
+export { RemoteTree, type RemoteTreeProps } from './components/remoteTree';
+export type { Op, RendererEvent } from '@swiftbrowser/web/src/protocol';
 export { mount, type MountOptions, type Mounted } from './mount';
 export { SwiftUIView, type SwiftUIViewProps } from './island';
 export { useContextBridge } from './bridge';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, createElement, useSyncExternalStore, useRef, useLayoutEffect, useState, Children, useEffect, isValidElement, Fragment, useId, cloneElement, useCallback } from "react";
+import { createContext, useContext, createElement, useSyncExternalStore, useLayoutEffect, Fragment, useRef, useState, Children, useEffect, isValidElement, useId, cloneElement, useCallback } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
@@ -207,10 +207,12 @@ function inheritTitleModes(screens, effective) {
   }
 }
 class HostTree {
-  constructor(sink) {
+  constructor(sink, options = {}) {
     this.sink = sink;
+    this.options = options;
   }
   sink;
+  options;
   root = { id: 0, kind: "root", children: [], committedChildren: [] };
   nextId = 1;
   /** Emitted elements by id, for event dispatch. */
@@ -225,6 +227,8 @@ class HostTree {
   completions = /* @__PURE__ */ new Map();
   /** The root's `colorScheme` last sent (`.preferredColorScheme`); undefined while none was. */
   committedColorScheme;
+  /** Remote: the root's props last sent. */
+  committedRootProps = {};
   createInstance(props) {
     return {
       id: this.nextId++,
@@ -273,7 +277,7 @@ class HostTree {
     const visit = (child, sink, ctx) => {
       if (child.hidden) return;
       if (child.kind === PREF_KIND) {
-        const target = child.target === "root" || child.target === void 0 ? this.root : ctx[child.target];
+        const target = child.target === "root" || child.target === void 0 ? this.root : ctx[child.target] ?? (this.options.remote ? this.root : void 0);
         const entry2 = target ? effective.get(target) : void 0;
         if (entry2) Object.assign(entry2.props, child.props);
         return;
@@ -287,8 +291,8 @@ class HostTree {
       const entry = { props: { ...child.props }, children: [], hoisted: [] };
       effective.set(child, entry);
       sink.push(child);
-      const next2 = child.kind === "navscreen" ? { ...ctx, navscreen: child } : child.kind === "sheet" ? { ...ctx, sheet: child } : ctx;
-      for (const grandchild of child.children) visit(grandchild, entry.children, next2);
+      const next = child.kind === "navscreen" ? { ...ctx, navscreen: child } : child.kind === "sheet" ? { ...ctx, sheet: child } : ctx;
+      for (const grandchild of child.children) visit(grandchild, entry.children, next);
     };
     for (const child of this.root.children) visit(child, rootEffective.children, {});
     for (const entry of effective.values()) {
@@ -347,13 +351,23 @@ class HostTree {
     for (const id of this.retired) ops.push({ op: "remove", id });
     this.retired = [];
     this.committedLive = live;
-    const scheme = rootEffective.props["colorScheme"];
-    const next = scheme === void 0 ? this.committedColorScheme === void 0 ? void 0 : null : scheme;
-    if (next !== void 0 && next !== this.committedColorScheme) {
-      ops.push({ op: "update", id: 0, props: { colorScheme: next } });
-      this.committedColorScheme = next === null ? void 0 : next;
+    if (this.options.remote) {
+      if (!deepEqual(rootEffective.props, this.committedRootProps)) {
+        ops.push({ op: "update", id: 0, props: rootEffective.props });
+        this.committedRootProps = rootEffective.props;
+      }
+    } else {
+      const scheme = rootEffective.props["colorScheme"];
+      const next = scheme === void 0 ? this.committedColorScheme === void 0 ? void 0 : null : scheme;
+      if (next !== void 0 && next !== this.committedColorScheme) {
+        ops.push({ op: "update", id: 0, props: { colorScheme: next } });
+        this.committedColorScheme = next === null ? void 0 : next;
+      }
+    }
+    if (ops.length === 0) {
+      if (completion?.whenNothingDrawn) completion.callback();
+      return ops;
     }
-    if (ops.length === 0) return ops;
     const commit = { op: "commit" };
     if (animation) commit.animation = animation;
     if (completion) {
@@ -382,7 +396,7 @@ class HostTree {
     }
     if (!("id" in event)) return;
     const instance = this.live.get(event.id);
-    const handler = instance?.on?.[event.type];
+    const handler = instance?.on?.[event.type] ?? instance?.on?.["*"];
     handler?.(event);
   }
 }
@@ -402,8 +416,9 @@ function deepEqual(a, b) {
 }
 const DEFAULT_ENVIRONMENT = { colorScheme: "light", dynamicTypeSize: "large", horizontalSizeClass: "compact", scenePhase: "active" };
 const roots = /* @__PURE__ */ new Set();
-function createSwiftUIRoot(sink) {
-  const tree = new HostTree(sink);
+const HostTreeContext = createContext(null);
+function createSwiftUIRoot(sink, options = {}) {
+  const tree = new HostTree(sink, options);
   roots.add(tree);
   const container = reconciler.createContainer(
     tree,
@@ -424,7 +439,7 @@ function createSwiftUIRoot(sink) {
   let environment = DEFAULT_ENVIRONMENT;
   let current = null;
   const update = () => {
-    reconciler.updateContainerSync(createElement(EnvironmentProvider, { value: environment }, current), container, null, null);
+    reconciler.updateContainerSync(createElement(HostTreeContext.Provider, { value: tree }, createElement(EnvironmentProvider, { value: environment }, current)), container, null, null);
     reconciler.flushSyncWork();
   };
   return {
@@ -450,6 +465,13 @@ function injectIntoDevTools() {
   return reconciler.injectIntoDevTools() === true;
 }
 let nextCompletionSerial = 1;
+function stampNextCommit(tree, animation, completion) {
+  tree.pendingAnimation = animation;
+  if (!completion) return 0;
+  const serial = nextCompletionSerial++;
+  tree.pendingCompletion = { serial, criteria: completion.criteria, callback: completion.callback, whenNothingDrawn: true };
+  return serial;
+}
 function withAnimation(first, second, third, fourth) {
   const animation = typeof first === "function" ? { type: "default" } : first ?? { type: "default" };
   let body;
@@ -482,6 +504,176 @@ function withAnimation(first, second, third, fourth) {
     if (completion && !committed) completion();
   }
 }
+function createRemoteRoot() {
+  const root = { id: 0, kind: "root", props: {}, children: [], parent: null };
+  const nodes = /* @__PURE__ */ new Map([[0, root]]);
+  const handlers = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let version = 0;
+  let rootProps = {};
+  let eventHandler;
+  let environmentHandler;
+  let lastEnvironment;
+  let hostTree = null;
+  const detach2 = (node) => {
+    if (!node.parent) return;
+    const siblings = node.parent.children;
+    const at = siblings.indexOf(node);
+    if (at >= 0) siblings.splice(at, 1);
+    node.parent = null;
+  };
+  const forget = (node) => {
+    nodes.delete(node.id);
+    handlers.delete(node.id);
+    for (const child of node.children) forget(child);
+  };
+  const notify2 = () => {
+    version += 1;
+    for (const listener of listeners) listener();
+  };
+  const remote = {
+    applyOps(ops) {
+      let commit = null;
+      for (const op of ops) {
+        switch (op.op) {
+          case "create": {
+            if (nodes.has(op.id)) throw new Error(`remote tree: element ${op.id} created twice`);
+            nodes.set(op.id, { id: op.id, kind: op.kind, props: op.props, children: [], parent: null });
+            break;
+          }
+          case "update": {
+            if (op.id === 0) {
+              rootProps = op.props;
+              break;
+            }
+            const node = nodes.get(op.id);
+            if (!node) throw new Error(`remote tree: update of unknown element ${op.id}`);
+            node.props = op.props;
+            break;
+          }
+          case "insert": {
+            const node = nodes.get(op.id);
+            const parent = nodes.get(op.parent);
+            if (!node || !parent) throw new Error(`remote tree: insert of ${op.id} into ${op.parent}: unknown element`);
+            detach2(node);
+            parent.children.splice(op.index, 0, node);
+            node.parent = parent;
+            break;
+          }
+          case "remove": {
+            const node = nodes.get(op.id);
+            if (!node) break;
+            detach2(node);
+            forget(node);
+            break;
+          }
+          case "commit":
+            commit = op;
+            break;
+        }
+      }
+      if (!commit) return;
+      const { animation, completion, completionCriteria } = commit;
+      const answer = completion === void 0 ? void 0 : () => remote.dispatch({ type: "animationcomplete", serial: completion });
+      if (animation && hostTree) {
+        stampNextCommit(hostTree, animation, answer && { criteria: completionCriteria ?? "logicallyComplete", callback: answer });
+        notify2();
+        return;
+      }
+      notify2();
+      answer?.();
+    },
+    onEvent(handler) {
+      eventHandler = handler;
+    },
+    onEnvironment(handler) {
+      environmentHandler = handler;
+      if (lastEnvironment) handler(lastEnvironment);
+    },
+    dispatch(event) {
+      eventHandler?.(event);
+    },
+    setEnvironment(environment) {
+      if (lastEnvironment && lastEnvironment.colorScheme === environment.colorScheme && lastEnvironment.dynamicTypeSize === environment.dynamicTypeSize && lastEnvironment.horizontalSizeClass === environment.horizontalSizeClass && lastEnvironment.scenePhase === environment.scenePhase)
+        return;
+      lastEnvironment = environment;
+      environmentHandler?.(environment);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getVersion: () => version,
+    get root() {
+      return root;
+    },
+    get rootProps() {
+      return rootProps;
+    },
+    attach(tree) {
+      hostTree = tree;
+    },
+    handlersFor(id) {
+      let on = handlers.get(id);
+      if (!on) {
+        on = { "*": (event) => remote.dispatch({ ...event, id }) };
+        handlers.set(id, on);
+      }
+      return on;
+    },
+    dispose() {
+      root.children = [];
+      nodes.clear();
+      nodes.set(0, root);
+      handlers.clear();
+      listeners.clear();
+      eventHandler = void 0;
+      environmentHandler = void 0;
+      hostTree = null;
+    }
+  };
+  return remote;
+}
+function sb(kind, props, on, children, target) {
+  const hostProps = { kind };
+  if (props) hostProps.props = props;
+  if (on) hostProps.on = on;
+  if (target) hostProps.target = target;
+  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
+}
+const SCREEN_PROPS = ["title", "displayMode", "toolbarRole", "navigationBarHidden", "bottomBarHidden", "statusBarHidden"];
+function renderNode(root, node) {
+  if (node.kind === "host") return null;
+  const children = node.children.length ? node.children.map((child) => renderNode(root, child)) : void 0;
+  return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), children));
+}
+function RemoteTree({ root }) {
+  useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
+  const environment = useContext(EnvironmentContext);
+  const tree = useContext(HostTreeContext);
+  useLayoutEffect(() => {
+    root.attach(tree);
+    return () => root.attach(null);
+  }, [root, tree]);
+  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")));
+  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);
+    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);
+  }
+  return createElement(Fragment, null, ...out);
+}
 const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
 function rgb(r2, g, b, a = 1) {
   return { r: r2, g, b, a };
@@ -1021,13 +1213,6 @@ function readBinding(value, onChange) {
   return [value, onChange ?? (() => {
   })];
 }
-function sb(kind, props, on, children, target) {
-  const hostProps = { kind };
-  if (props) hostProps.props = props;
-  if (on) hostProps.on = on;
-  if (target) hostProps.target = target;
-  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
-}
 const CoordinateSpacesContext = createContext({});
 function useCoordinateSpaces() {
   return useContext(CoordinateSpacesContext);
@@ -6948,6 +7133,7 @@ export {
   RadialGradient,
   Rectangle,
   RegisteredView,
+  RemoteTree,
   ResponseStream,
   RoundedRectangle,
   Row,
@@ -6993,6 +7179,7 @@ export {
   color,
   configureSignInWithApple,
   createFileManager,
+  createRemoteRoot,
   createSwiftUIRoot,
   exportFile,
   fileManager,