@farm.js/islx 0.0.0-stage → 0.0.2

package/dist/_chunks/tree-BDB5VEao.mjs

@@ -0,0 +1,777 @@
+import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-DqfVYKsx.mjs";
+import { A as VALUE_SCRIPT_TYPE, D as TREE_SCRIPT_TYPE, S as SLOT_ELEMENT, c as CHUNK_SCRIPT_TYPE, h as ISLAND_ELEMENT, p as HTML_ELEMENT, y as PROPS_SCRIPT_TYPE } from "./wire-CXOodE06.mjs";
+import { l as getValueStore, t as createServerReference } from "./actions-2sTj0A2T.mjs";
+import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+// src/react/island.ts
+/**
+* A client component, as the server renders it: its HTML inside `<f-island>`, and its props in
+* a script after it. Shared by the server and the browser: inside a hydrating island, a nested
+* client component is part of that island's React tree, not an island of its own.
+*
+* The compiler wraps every export of a `"use client"` module with `createIsland` in the server
+* build. The browser build keeps the module as it is.
+*/
+const CLIENT_REFERENCE = Symbol.for("islx.react.client-reference");
+/** The module export an island component renders, or undefined for any other type. */
+function getClientReference(type) {
+	if (!type || typeof type !== "function" && typeof type !== "object") return void 0;
+	return type[CLIENT_REFERENCE];
+}
+/**
+* Makes `element`'s client components part of the React root around it (a layout that hydrates
+* as one root), instead of islands of their own.
+*/
+function withinClientRoot(element) {
+	return React.createElement(getContexts().graph.Provider, { value: true }, element);
+}
+/**
+* Starts islands again below a `withinClientRoot`: the page a hydrating layout keeps as server
+* HTML renders its client components as islands of their own.
+*/
+function isolateIslands(element) {
+	return React.createElement(getContexts().graph.Provider, { value: false }, element);
+}
+const RENDER_STATE_RESOLVER = Symbol.for("islx.react.render-state");
+/**
+* For a framework that knows the request being rendered without React context (a request store):
+* returns the render's settings when no `IslandsProvider` or `renderToStream` gave them. Keep the
+* same `sent` set for the whole response.
+*/
+function setRenderStateResolver(resolve) {
+	globalThis[RENDER_STATE_RESOLVER] = resolve;
+}
+function resolveRenderState() {
+	const resolve = globalThis[RENDER_STATE_RESOLVER];
+	return resolve ? resolve() : null;
+}
+/**
+* Gives islands a render's settings when the framework renders the page itself (not through
+* `renderToStream`): which values the browser holds, and which this render already wrote.
+*/
+function IslandsProvider({ held = null, children }) {
+	const state = React.useMemo(() => ({
+		held: held && held.size > 0 ? held : null,
+		sent: /* @__PURE__ */ new Set()
+	}), [held]);
+	return React.createElement(getContexts().render.Provider, { value: state }, children);
+}
+const SERVER_HOOK = Symbol.for("islx.react.server");
+/** @internal */
+function getIslandServerHook() {
+	return globalThis[SERVER_HOOK];
+}
+/** @internal */
+function setIslandServerHook(hook) {
+	globalThis[SERVER_HOOK] = hook;
+}
+/** Tagged objects the runtime made (slots), as opposed to app data with a "$" key. */
+const runtimeTagged = /* @__PURE__ */ new WeakSet();
+const CONTEXTS = Symbol.for("islx.react.contexts");
+/** @internal */
+function getContexts() {
+	const scope = globalThis;
+	const all = scope[CONTEXTS] ??= /* @__PURE__ */ new WeakMap();
+	let contexts = all.get(React.createElement);
+	if (!contexts) {
+		contexts = {
+			graph: React.createContext(false),
+			render: React.createContext(null)
+		};
+		all.set(React.createElement, contexts);
+	}
+	return contexts;
+}
+function isElement(value) {
+	const type = value?.$$typeof;
+	return type === Symbol.for("react.transitional.element") || type === Symbol.for("react.element");
+}
+const slotStyle = { display: "contents" };
+/**
+* Splits props into what renders on the server and what travels: server output passed to an
+* island (`children`, or any element prop) renders once inside `<f-slot>`, and travels as a
+* reference to it, so the browser reads its HTML from the page instead of receiving it twice.
+*/
+function splitSlots(value, prefix, counter) {
+	if (isElement(value)) {
+		const name = `${prefix}${counter.next++}`;
+		const reference = {
+			["$"]: "s",
+			["v"]: name
+		};
+		runtimeTagged.add(reference);
+		return {
+			render: React.createElement(SLOT_ELEMENT, {
+				key: value.key ?? name,
+				name,
+				style: slotStyle
+			}, value),
+			wire: reference
+		};
+	}
+	if (Array.isArray(value)) {
+		const parts = value.map((entry) => splitSlots(entry, prefix, counter));
+		return {
+			render: parts.map((part) => part.render),
+			wire: parts.map((part) => part.wire)
+		};
+	}
+	if (value && typeof value === "object") {
+		const prototype = Object.getPrototypeOf(value);
+		if (prototype !== Object.prototype && prototype !== null) return {
+			render: value,
+			wire: value
+		};
+		const render = {};
+		const wire = {};
+		for (const [key, entry] of Object.entries(value)) {
+			const part = splitSlots(entry, prefix, counter);
+			render[key] = part.render;
+			wire[key] = part.wire;
+		}
+		return {
+			render,
+			wire
+		};
+	}
+	return {
+		render: value,
+		wire: value
+	};
+}
+const warned = /* @__PURE__ */ new Set();
+function isThenable$1(value) {
+	return !!value && typeof value.then === "function";
+}
+/**
+* Wraps a client component so the server renders it as an island. `src` is the module the browser
+* imports, `exportName` the component's export there.
+*/
+function createIsland(Component, src, exportName, strategy = "load") {
+	function Island(props) {
+		const { graph, render } = getContexts();
+		const insideIsland = React.useContext(graph);
+		const state = React.useContext(render) ?? resolveRenderState();
+		const id = React.useId();
+		if (insideIsland) return React.createElement(Component, props);
+		const hook = getIslandServerHook();
+		if (!hook) throw new Error("islx: an island rendered on a server that did not import @farm.js/islx/react/server");
+		let encoded;
+		let renderProps;
+		try {
+			const { render: rendered, wire } = splitSlots(props, `${id}s`, { next: 0 });
+			renderProps = rendered;
+			const skip = state ? /* @__PURE__ */ new Set([...state.held ?? [], ...state.sent]) : null;
+			encoded = hook.encode(wire, skip);
+			for (const value of encoded.values) state?.sent.add(value.key);
+		} catch (error) {
+			if (isThenable$1(error)) throw error;
+			const message = error instanceof Error ? error.message : String(error);
+			const key = `${src}#${exportName}:${message}`;
+			if (!warned.has(key)) {
+				warned.add(key);
+				console.warn(`[islx] ${exportName} (${src}) was rendered without hydration: its props cannot be sent to the browser. ${message}`);
+			}
+			return React.createElement(Component, props);
+		}
+		if (strategy === "load") for (const href of getBuildDefaults().modules?.[src] ?? []) ReactDOM.preloadModule?.(href, { as: "script" });
+		return React.createElement(React.Fragment, null, ...encoded.values.map((value) => React.createElement("script", {
+			key: value.key,
+			type: VALUE_SCRIPT_TYPE,
+			name: value.key,
+			dangerouslySetInnerHTML: { __html: hook.escape(value.json) }
+		})), React.createElement(ISLAND_ELEMENT, {
+			key: "island",
+			src,
+			export: exportName,
+			props: id,
+			strategy,
+			style: slotStyle
+		}, React.createElement(graph.Provider, { value: true }, React.createElement(Component, renderProps))), React.createElement("script", {
+			key: "props",
+			type: PROPS_SCRIPT_TYPE,
+			htmlFor: id,
+			dangerouslySetInnerHTML: { __html: hook.escape(encoded.json) }
+		}));
+	}
+	Island.displayName = `Island(${Component.displayName || Component.name || exportName})`;
+	Object.defineProperty(Island, CLIENT_REFERENCE, { value: {
+		src,
+		exportName,
+		Component
+	} });
+	return Island;
+}
+// src/react/tree.ts
+/**
+* Server trees: a page as a serialized React tree, the role React Server Components' Flight
+* payload has, for pages under a layout that hydrates as one React root.
+*
+* A page that cannot hydrate (it is async, or it reads server data) used to keep its client
+* components as islands of their own, which cannot read the layout's context. Instead the server
+* resolves the page into host elements and client-component references, renders that tree, and
+* embeds it as JSON (`<script type="f/tree">`). The browser rebuilds the same tree inside the
+* layout's root, so the page's client components hydrate as the layout's descendants.
+*
+* Anything the resolver cannot represent (a server component that calls hooks, a class component,
+* a client component whose props do not serialize, an unknown element type) renders as server
+* HTML inside `<f-html>`, whose own client components hydrate as islands.
+*/
+const MEMO_TYPE = Symbol.for("react.memo");
+const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+/** The element around server HTML a tree cannot represent; its `name` is the HTML's id. */
+const SERVER_HTML_TAG = HTML_ELEMENT;
+/**
+* Marks a navigation response that carries only the page's payload. The browser rebuilds such a
+* page in its layout's React root and never shows its HTML, so the server leaves the HTML out.
+*/
+const PAYLOAD_ONLY_ATTRIBUTE = "partial";
+const SERVER_HTML_ATTRIBUTE = "name";
+const PARSER_SENSITIVE_TAGS = /* @__PURE__ */ new Set([
+	"caption",
+	"colgroup",
+	"datalist",
+	"head",
+	"html",
+	"iframe",
+	"math",
+	"noscript",
+	"optgroup",
+	"option",
+	"script",
+	"select",
+	"style",
+	"svg",
+	"table",
+	"tbody",
+	"td",
+	"template",
+	"textarea",
+	"tfoot",
+	"th",
+	"thead",
+	"title",
+	"tr"
+]);
+/** Thrown where the resolver cannot represent a node; the node then renders as server HTML. */
+var UnsupportedNode = class extends Error {};
+/** An unsupported node inside a parser-sensitive element; its outermost such ancestor wraps. */
+var UnsupportedInParserSensitiveElement = class extends Error {};
+function getHooksDispatcherSlot() {
+	const runtime = React;
+	const react19 = runtime.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+	if (react19 && "H" in react19) return {
+		get: () => react19.H,
+		set: (value) => {
+			react19.H = value;
+		}
+	};
+	const react18 = runtime.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher;
+	if (react18) return {
+		get: () => react18.current,
+		set: (value) => {
+			react18.current = value;
+		}
+	};
+	return null;
+}
+const unsupportedHooksDispatcher = /* @__PURE__ */ new Proxy({}, { get(_target, name) {
+	return () => {
+		throw new UnsupportedNode(`calls ${String(name)}()`);
+	};
+} });
+function callServerComponent(render, props, forwardRef) {
+	const slot = getHooksDispatcherSlot();
+	const previous = slot?.get();
+	slot?.set(unsupportedHooksDispatcher);
+	try {
+		return forwardRef ? render(props, null) : render(props);
+	} finally {
+		slot?.set(previous);
+	}
+}
+function isThenable(value) {
+	return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
+function serverHtmlNode(state, node, key, context) {
+	if (context.parserSensitive) throw new UnsupportedInParserSensitiveElement();
+	const id = state.nextId++;
+	state.serverHtml.set(id, node);
+	return key === null ? {
+		$: "x",
+		i: id
+	} : {
+		$: "x",
+		i: id,
+		k: String(key)
+	};
+}
+async function resolveProps(state, props, context, host) {
+	const entries = await Promise.all(Object.entries(props).map(async ([name, value]) => {
+		if (value === void 0 && host) return null;
+		if (name === "ref") {
+			if (value === null) return null;
+			throw new UnsupportedNode("receives a ref");
+		}
+		if (host && typeof value === "function") throw new UnsupportedNode(`passes a function to <${String(name)}>`);
+		return [name, await resolveValue(state, value, context, /* @__PURE__ */ new Set())];
+	}));
+	return Object.fromEntries(entries.filter((entry) => entry !== null));
+}
+async function resolveValue(state, value, context, seen) {
+	const leaf = encodeLeaf(value);
+	if (leaf) return leaf;
+	if (value === null) return null;
+	if (typeof value === "string" || typeof value === "boolean") return value;
+	if (typeof value === "number") return Number.isFinite(value) ? value : {
+		$: "n",
+		v: String(value)
+	};
+	if (typeof value === "function") {
+		const reference = getIslandServerHook()?.action(value);
+		if (reference) {
+			state.actions.set(reference.v, value);
+			return reference;
+		}
+	}
+	if (typeof value !== "object") throw new UnsupportedNode(`passes a ${typeof value} value`);
+	if (React.isValidElement(value)) return resolveElement(state, value, context);
+	if (isThenable(value)) try {
+		return {
+			$: "P",
+			v: await resolveValue(state, await value, context, seen)
+		};
+	} catch (error) {
+		if (error instanceof UnsupportedInParserSensitiveElement) throw error;
+		throw new UnsupportedNode("passes a promise that does not resolve to a serializable value");
+	}
+	if (seen.has(value)) throw new UnsupportedNode("passes a circular value");
+	seen.add(value);
+	try {
+		if (Array.isArray(value)) return await Promise.all(value.map((entry) => resolveValue(state, entry, context, seen)));
+		if (value instanceof Map) return {
+			$: "M",
+			v: await resolveValue(state, Array.from(value), context, seen)
+		};
+		if (value instanceof Set) return {
+			$: "S",
+			v: await resolveValue(state, Array.from(value), context, seen)
+		};
+		const prototype = Object.getPrototypeOf(value);
+		if (prototype !== Object.prototype && prototype !== null) throw new UnsupportedNode("passes a class instance");
+		const entries = await Promise.all(Object.entries(value).map(async ([name, entry]) => [name, await resolveValue(state, entry, context, seen)]));
+		const object = Object.fromEntries(entries);
+		return Object.prototype.hasOwnProperty.call(object, "$") ? {
+			$: "o",
+			v: object
+		} : object;
+	} finally {
+		seen.delete(value);
+	}
+}
+async function resolveElement(state, element, context) {
+	const key = element.key === null || element.key === void 0 ? null : String(element.key);
+	const withKey = (node) => key === null ? node : {
+		...node,
+		k: key
+	};
+	let type = element.type;
+	const props = element.props ?? {};
+	try {
+		if (typeof type === "string") {
+			const parserSensitive = context.parserSensitive || PARSER_SENSITIVE_TAGS.has(type);
+			try {
+				const { children, ...rest } = props;
+				const resolved = await resolveProps(state, rest, context, true);
+				if (children !== void 0) resolved.children = await resolveValue(state, children, { parserSensitive }, /* @__PURE__ */ new Set());
+				return withKey({
+					$: "h",
+					t: type,
+					p: resolved
+				});
+			} catch (error) {
+				if (error instanceof UnsupportedInParserSensitiveElement && !context.parserSensitive) return serverHtmlNode(state, element, key, context);
+				throw error;
+			}
+		}
+		if (type === React.Fragment || type === React.StrictMode) return withKey({
+			$: "f",
+			c: await resolveValue(state, props.children, context, /* @__PURE__ */ new Set())
+		});
+		if (type === React.Suspense) {
+			const id = state.nextId++;
+			const fallback = await resolveValue(state, props.fallback, context, /* @__PURE__ */ new Set());
+			const encoded = resolveValue(state, props.children, context, /* @__PURE__ */ new Set()).catch((error) => {
+				if (error instanceof UnsupportedNode) return serverHtmlNode(state, React.createElement(React.Fragment, null, props.children), null, { parserSensitive: false });
+				throw error;
+			});
+			encoded.catch(() => {});
+			state.chunks.set(id, { encoded });
+			return withKey({
+				$: "p",
+				f: fallback,
+				i: id
+			});
+		}
+		const clientReference = getClientReference(type);
+		if (clientReference) {
+			const { children, ...rest } = props;
+			const resolved = await resolveProps(state, rest, context, false);
+			if (children !== void 0) resolved.children = await resolveValue(state, children, context, /* @__PURE__ */ new Set());
+			state.components.set(`${clientReference.src}#${clientReference.exportName}`, clientReference.Component);
+			return withKey({
+				$: "c",
+				r: clientReference.src,
+				e: clientReference.exportName,
+				p: resolved
+			});
+		}
+		let forwardRef = false;
+		while (type && typeof type === "object") {
+			const typeOf = type.$$typeof;
+			if (typeOf === MEMO_TYPE) {
+				type = type.type;
+				if (getClientReference(type)) return resolveElement(state, React.createElement(type, {
+					...props,
+					key: element.key
+				}), context);
+				continue;
+			}
+			if (typeOf === FORWARD_REF_TYPE) {
+				type = type.render;
+				forwardRef = true;
+				break;
+			}
+			throw new UnsupportedNode("is not a function component");
+		}
+		if (typeof type !== "function") throw new UnsupportedNode("is not a function component");
+		if (type.prototype?.isReactComponent) throw new UnsupportedNode("is a class component");
+		let rendered = callServerComponent(type, props, forwardRef);
+		if (isThenable(rendered)) rendered = await rendered;
+		const resolved = await resolveValue(state, rendered, context, /* @__PURE__ */ new Set());
+		return key === null ? resolved : {
+			$: "f",
+			k: key,
+			c: resolved
+		};
+	} catch (error) {
+		if (error instanceof UnsupportedNode) return serverHtmlNode(state, element, key, context);
+		throw error;
+	}
+}
+const chunkComponents = /* @__PURE__ */ new WeakMap();
+function getChunkComponent() {
+	const existing = chunkComponents.get(React.createElement);
+	if (existing) return existing;
+	function ServerTreeChunk({ chunk }) {
+		if (chunk.status === "fulfilled") return chunk.value;
+		if (chunk.status === "rejected") throw chunk.reason;
+		return React.use(chunk.promise);
+	}
+	chunkComponents.set(React.createElement, ServerTreeChunk);
+	return ServerTreeChunk;
+}
+function fulfilledThenable(value) {
+	const promise = Promise.resolve(value);
+	promise.status = "fulfilled";
+	promise.value = value;
+	return promise;
+}
+function createTreeChildren(children, resolver) {
+	if (children === void 0) return [];
+	const node = createTreeValue(children, resolver);
+	return Array.isArray(children) ? node : [node];
+}
+function createTreeProps(props, resolver, key) {
+	const { children, ...rest } = props;
+	const created = {};
+	for (const [name, value] of Object.entries(rest)) created[name] = createTreeValue(value, resolver);
+	if (typeof key === "string") created.key = key;
+	return {
+		props: created,
+		children: createTreeChildren(children, resolver)
+	};
+}
+function createTreeValue(value, resolver) {
+	if (value === null || typeof value !== "object") return value;
+	if (Array.isArray(value)) return value.map((entry) => createTreeValue(entry, resolver));
+	switch (value.$) {
+		case "h": {
+			const { props, children } = createTreeProps(value.p, resolver, value.k);
+			return React.createElement(value.t, props, ...children);
+		}
+		case "c": {
+			const { props, children } = createTreeProps(value.p, resolver, value.k);
+			return React.createElement(resolver.component(value.r, value.e), props, ...children);
+		}
+		case "f": return React.createElement(React.Fragment, typeof value.k === "string" ? { key: value.k } : null, ...createTreeChildren(value.c, resolver));
+		case "p": return React.createElement(React.Suspense, {
+			...typeof value.k === "string" ? { key: value.k } : {},
+			fallback: createTreeValue(value.f, resolver)
+		}, React.createElement(getChunkComponent(), { chunk: resolver.chunk(value.i) }));
+		case "x": return resolver.serverHtml(value.i, typeof value.k === "string" ? value.k : null);
+		case "n": return Number(value.v);
+		case "a": return resolver.action(value.v, typeof value.b === "string" ? value.b : void 0);
+		case "P": return fulfilledThenable(createTreeValue(value.v, resolver));
+		case "o": {
+			const object = value.v;
+			return Object.fromEntries(Object.entries(object).map(([name, entry]) => [name, createTreeValue(entry, resolver)]));
+		}
+		default:
+			if (value.$ !== void 0) {
+				const decoded = decodeTagged(value, (child) => createTreeValue(child, resolver));
+				if (decoded !== NOT_A_VALUE) return decoded;
+			}
+			return Object.fromEntries(Object.entries(value).map(([name, entry]) => [name, createTreeValue(entry, resolver)]));
+	}
+}
+function createTreeScript(type, name, json, values = [], attributes = {}) {
+	const script = React.createElement("script", {
+		type,
+		...name ? { name } : {},
+		...attributes,
+		dangerouslySetInnerHTML: { __html: json }
+	});
+	if (values.length === 0) return script;
+	return React.createElement(React.Fragment, null, ...values.map(([valueKey, valueJson]) => React.createElement("script", {
+		key: valueKey,
+		type: VALUE_SCRIPT_TYPE,
+		name: valueKey,
+		dangerouslySetInnerHTML: { __html: valueJson }
+	})), script);
+}
+function createTreePage(tree, json, resolver, key, values = []) {
+	return React.createElement(React.Fragment, key === void 0 ? null : { key }, createTreeValue(tree, resolver), createTreeScript(TREE_SCRIPT_TYPE, "", json, values));
+}
+/** The value scripts the server sent right before a payload script. */
+function readTreeValueScripts(script) {
+	const values = [];
+	for (let node = script.previousElementSibling; node?.tagName === "SCRIPT" && node.getAttribute("type") === "f/value"; node = node.previousElementSibling) values.unshift([node.getAttribute("name") ?? "", node.textContent ?? ""]);
+	return values;
+}
+/**
+* The page as a navigation the browser renders itself receives it: its payload, every chunk's
+* payload, and the server HTML parts, with none of the HTML the payload rebuilds. Waits for every
+* chunk, since a navigation reads the whole response anyway. Returns null when a chunk failed,
+* so the page renders as usual and its error boundaries apply.
+*/
+async function createPayloadOnlyPage(state, payload, encode, resolver) {
+	const chunks = /* @__PURE__ */ new Map();
+	for (let pending = [...state.chunks.keys()]; pending.length > 0;) {
+		const settled = await Promise.allSettled(pending.map(async (id) => [id, await state.chunks.get(id).encoded]));
+		for (const result of settled) {
+			if (result.status === "rejected") return null;
+			chunks.set(result.value[0], result.value[1]);
+		}
+		pending = [...state.chunks.keys()].filter((id) => !chunks.has(id));
+	}
+	return React.createElement(React.Fragment, null, ...Array.from(state.serverHtml.keys(), (id) => resolver.serverHtml(id, `h${id}`)), React.createElement(React.Fragment, { key: "payload" }, createTreeScript(TREE_SCRIPT_TYPE, "", payload.json, payload.values, { [PAYLOAD_ONLY_ATTRIBUTE]: "" })), ...Array.from(chunks, ([id, encoded]) => {
+		const chunk = encode({ t: encoded });
+		return React.createElement(React.Fragment, { key: `c${id}` }, createTreeScript(CHUNK_SCRIPT_TYPE, String(id), chunk.json, chunk.values));
+	}));
+}
+/**
+* Resolves a server page and returns what renders in its place: the resolved tree and its
+* payload. Errors from the page's own code (a framework's redirect or not-found) propagate
+* unchanged. Suspense children resolve concurrently and stream as React renders them.
+* Needs `@farm.js/islx/react/server` imported (large values and actions are encoded there).
+*/
+async function renderServerTree(element, options = {}) {
+	const hook = getIslandServerHook();
+	if (!hook) throw new Error("islx: renderServerTree needs @farm.js/islx/react/server imported");
+	const isolate = options.isolate ?? isolateIslands;
+	const state = {
+		nextId: 0,
+		components: /* @__PURE__ */ new Map(),
+		serverHtml: /* @__PURE__ */ new Map(),
+		chunks: /* @__PURE__ */ new Map(),
+		actions: /* @__PURE__ */ new Map()
+	};
+	const tree = await resolveValue(state, element, { parserSensitive: false }, /* @__PURE__ */ new Set());
+	const held = options.held && options.held.size > 0 ? options.held : null;
+	const encode = (payload) => {
+		const addressed = hook.address(payload, held);
+		return {
+			json: hook.escape(addressed.json),
+			values: addressed.values.map((value) => [value.key, hook.escape(value.json)])
+		};
+	};
+	const resolver = {
+		component(reference, exportName) {
+			const Component = state.components.get(`${reference}#${exportName}`);
+			if (!Component) throw new Error(`client reference ${reference}#${exportName} was not resolved`);
+			return Component;
+		},
+		chunk(id) {
+			const entry = state.chunks.get(id);
+			if (entry.chunk) return entry.chunk;
+			const chunk = {
+				status: "pending",
+				promise: entry.encoded.then((encoded) => {
+					const payload = encode({ t: encoded });
+					chunk.value = React.createElement(React.Fragment, null, createTreeValue(encoded, resolver), createTreeScript(CHUNK_SCRIPT_TYPE, String(id), payload.json, payload.values));
+					chunk.status = "fulfilled";
+					return chunk.value;
+				}, (error) => {
+					chunk.status = "rejected";
+					chunk.reason = error;
+					throw error;
+				})
+			};
+			chunk.promise.catch(() => {});
+			entry.chunk = chunk;
+			return chunk;
+		},
+		serverHtml(id, key) {
+			return React.createElement(SERVER_HTML_TAG, {
+				...key === null ? {} : { key },
+				[SERVER_HTML_ATTRIBUTE]: String(id),
+				style: { display: "contents" }
+			}, isolate(state.serverHtml.get(id)));
+		},
+		action(id) {
+			return state.actions.get(id);
+		}
+	};
+	const payload = encode({
+		v: 1,
+		t: tree
+	});
+	const page = options.payloadOnly && await createPayloadOnlyPage(state, payload, encode, resolver) || createTreePage(tree, payload.json, resolver, void 0, payload.values);
+	return React.createElement(function ServerTreePage() {
+		return page;
+	});
+}
+function collectReferences(value, references) {
+	if (value === null || typeof value !== "object") return;
+	if (Array.isArray(value)) {
+		for (const entry of value) collectReferences(entry, references);
+		return;
+	}
+	if (value.$ === "c") references.add(`${value.r}#${value.e}`);
+	for (const entry of Object.values(value)) collectReferences(entry, references);
+}
+const TREE_UPDATES = Symbol.for("islx.react.tree-updates");
+function treeListeners() {
+	const scope = globalThis;
+	return scope[TREE_UPDATES] ??= /* @__PURE__ */ new Set();
+}
+/** Re-renders mounted server trees that render a hot-updated client module. */
+function updateServerTrees(src, module) {
+	let updated = 0;
+	for (const listener of treeListeners()) if (listener(src, module)) updated++;
+	return updated;
+}
+function parseHtml(html) {
+	const template = document.createElement("template");
+	template.innerHTML = html;
+	return template.content;
+}
+function exportOf(module, src, exportName) {
+	const Component = module[exportName];
+	if (typeof Component !== "function" && (typeof Component !== "object" || Component === null)) throw new Error(`${src} has no export ${exportName}`);
+	return Component;
+}
+/**
+* Rebuilds a server-tree page in the browser from its server HTML (an element, or the HTML of a
+* navigation), after loading its client modules. Returns null for a page without a tree.
+*/
+async function createServerTreeElement(source, options) {
+	const values = options.values ?? getValueStore();
+	const root = typeof source === "string" ? parseHtml(source) : source;
+	const script = root.querySelector(`script[type="${TREE_SCRIPT_TYPE}"]`);
+	if (!script) return null;
+	const json = script.textContent ?? "";
+	let ingested = false;
+	const parsePayload = (text) => {
+		const parsed = JSON.parse(text);
+		if (!text.includes(`"\$":"r"`)) return parsed;
+		if (!ingested) {
+			values.ingest(root);
+			ingested = true;
+		}
+		return values.resolve(parsed);
+	};
+	const payload = parsePayload(json);
+	if (payload.v !== 1) throw new Error("unsupported server tree payload version");
+	const scripts = readTreeValueScripts(script);
+	const chunks = /* @__PURE__ */ new Map();
+	for (const chunkScript of root.querySelectorAll(`script[type="${CHUNK_SCRIPT_TYPE}"]`)) {
+		const chunkJson = chunkScript.textContent ?? "";
+		chunks.set(Number(chunkScript.getAttribute("name")), {
+			tree: parsePayload(chunkJson).t,
+			json: chunkJson,
+			values: readTreeValueScripts(chunkScript)
+		});
+	}
+	const references = /* @__PURE__ */ new Set();
+	collectReferences(payload.t, references);
+	for (const chunk of chunks.values()) collectReferences(chunk.tree, references);
+	const components = /* @__PURE__ */ new Map();
+	await Promise.all(Array.from(references, async (key) => {
+		const separator = key.lastIndexOf("#");
+		const src = key.slice(0, separator);
+		components.set(key, exportOf(await options.load(src), src, key.slice(separator + 1)));
+	}));
+	const serverHtml = /* @__PURE__ */ new Map();
+	for (const container of root.querySelectorAll(`${SERVER_HTML_TAG}[${SERVER_HTML_ATTRIBUTE}]`)) serverHtml.set(Number(container.getAttribute(SERVER_HTML_ATTRIBUTE)), container.innerHTML);
+	const resolver = {
+		component(reference, exportName) {
+			const Component = components.get(`${reference}#${exportName}`);
+			if (!Component) throw new Error(`client reference ${reference}#${exportName} was not loaded`);
+			return Component;
+		},
+		chunk(id) {
+			const chunk = chunks.get(id);
+			if (!chunk) throw new Error(`server tree chunk ${id} was not found`);
+			const value = React.createElement(React.Fragment, null, createTreeValue(chunk.tree, resolver), createTreeScript(CHUNK_SCRIPT_TYPE, String(id), chunk.json, chunk.values));
+			return {
+				status: "fulfilled",
+				value,
+				promise: Promise.resolve(value)
+			};
+		},
+		serverHtml(id, key) {
+			const html = serverHtml.get(id);
+			if (html === void 0) throw new Error(`server HTML ${id} was not found`);
+			return React.createElement(options.ServerHtml, {
+				...key === null ? {} : { key },
+				as: SERVER_HTML_TAG,
+				[SERVER_HTML_ATTRIBUTE]: String(id),
+				style: { display: "contents" },
+				suppressHydrationWarning: true,
+				dangerouslySetInnerHTML: { __html: html }
+			});
+		},
+		action(id, sealed) {
+			return createServerReference(id, sealed);
+		}
+	};
+	const build = () => createTreePage(payload.t, json, resolver, void 0, scripts);
+	build();
+	function ServerTreePage() {
+		const [, setVersion] = React.useState(0);
+		React.useEffect(() => {
+			const listener = (src, module) => {
+				let changed = false;
+				for (const key of components.keys()) {
+					const separator = key.lastIndexOf("#");
+					if (key.slice(0, separator) !== src) continue;
+					components.set(key, exportOf(module, src, key.slice(separator + 1)));
+					changed = true;
+				}
+				if (changed) setVersion((version) => version + 1);
+				return changed;
+			};
+			const listeners = treeListeners();
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}, []);
+		return build();
+	}
+	return React.createElement(ServerTreePage, options.key === void 0 ? null : { key: options.key });
+}
+export { IslandsProvider as a, getContexts as c, setIslandServerHook as d, setRenderStateResolver as f, updateServerTrees as i, isolateIslands as l, createServerTreeElement as n, createIsland as o, withinClientRoot as p, renderServerTree as r, getClientReference as s, PAYLOAD_ONLY_ATTRIBUTE as t, runtimeTagged as u };