@farm.js/islx 0.0.7 → 0.0.9

package/dist/_chunks/{tree-C47p6khN.mjs → island-viWIOM1k.mjs}

@@ -1,8 +1,75 @@
-import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-C8to-RQW.mjs";
-import { M as VALUE_SCRIPT_TYPE, c as CHUNK_SCRIPT_TYPE, k as TREE_SCRIPT_TYPE, p as HTML_ELEMENT } from "./wire-QEQWBr5s.mjs";
-import { t as createServerReference, u as getValueStore } from "./actions-C-IwUCKU.mjs";
-import { a as getIslandServerHook, o as isolateIslands, r as getClientReference } from "./island-DVOr-OUw.mjs";
+import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
+import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-DDpUvgRo.mjs";
+import { D as SLOT_TEMPLATE_ELEMENT, F as VALUE_SCRIPT_TYPE, M as TREE_SCRIPT_TYPE, S as PROPS_SCRIPT_TYPE, T as SLOT_ELEMENT, b as PROMISE_SCRIPT_TYPE, c as CHUNK_SCRIPT_TYPE, g as ISLAND_ELEMENT, p as HTML_ELEMENT } from "./wire-UUwZlUJZ.mjs";
+import { t as createServerReference, u as getValueStore } from "./actions-DAzd4PpV.mjs";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
+// src/react/ids.ts
+/**
+* `useId` in islands. React derives an id from the component's position in its root: every array
+* of children on the way pushes a fork, `(slot << length) | bits`. The server renders a page as one
+* root and the browser hydrates each island as a root of its own, so without help an island's ids
+* start again in the browser, differ from its HTML, and repeat across islands.
+*
+* The server renders `[<IdProbe/>, <Component/>]` inside the island. The probe's id is the island's
+* position with one more fork, slot 1 of 2: `(1 << length) | bits`, so its highest bit gives the
+* position's length and the rest its bits. The browser rebuilds the same position with nested
+* arrays (`null` in the slots before) and renders `[null, <Component/>]` there: React then computes
+* the ids the server did, with the server's identifier prefix.
+*/
+/** Renders nothing; records the id React gives its position. */
+function IdProbe({ record }) {
+	record.id = React.useId();
+	return null;
+}
+const MAX_BITS = 30;
+const MAX_FORK_WIDTH = 11;
+/** The island's position, from the probe's id (`_<prefix>R_<tree id>_`), or null to skip. */
+function parseIdPosition(id) {
+	const match = id ? /^_(.*)R_([0-9a-v]+)_$/.exec(id) : null;
+	if (!match) return null;
+	const probe = Number.parseInt(match[2], 32);
+	if (!Number.isSafeInteger(probe) || probe < 1) return null;
+	let length = 0;
+	while (2 ** (length + 1) <= probe) length++;
+	if (length + 2 > MAX_BITS) return null;
+	return {
+		prefix: match[1],
+		bits: probe - 2 ** length,
+		length
+	};
+}
+/**
+* `content` at `position`, as the second of two children, where the server rendered the island's
+* component. Null when the position cannot be rebuilt.
+*/
+function atIdPosition(position, content) {
+	const { bits, length } = position;
+	const forks = [];
+	let start = 0;
+	for (let bit = 0; bit < length; bit++) if (Math.floor(bits / 2 ** bit) % 2 === 1) {
+		forks.push({
+			start,
+			width: bit - start + 1
+		});
+		start = bit + 1;
+	}
+	if (start < length) {
+		const last = forks.at(-1);
+		if (!last) return null;
+		last.width += length - start;
+	}
+	let node = React.createElement(React.Fragment, { key: "island" }, [null, React.createElement(React.Fragment, { key: "component" }, content)]);
+	for (let index = forks.length - 1; index >= 0; index--) {
+		const { start: from, width } = forks[index];
+		if (width > MAX_FORK_WIDTH) return null;
+		const slot = Math.floor(bits / 2 ** from) % 2 ** width;
+		const children = Array.from({ length: 2 ** (width - 1) }, () => null);
+		children[slot - 1] = node;
+		node = React.createElement(React.Fragment, { key: `fork${index}` }, children);
+	}
+	return node;
+}
 // src/react/tree.ts
 /**
 * Server trees: a page as a serialized React tree, the role React Server Components' Flight
@@ -100,7 +167,7 @@ function callServerComponent(render, props, forwardRef) {
 		slot?.set(previous);
 	}
 }
-function isThenable(value) {
+function isThenable$1(value) {
 	return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
 }
 function serverHtmlNode(state, node, key, context) {
@@ -146,7 +213,7 @@ async function resolveValue(state, value, context, seen) {
 	}
 	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 {
+	if (isThenable$1(value)) try {
 		return {
 			$: "P",
 			v: await resolveValue(state, await value, context, seen)
@@ -261,7 +328,7 @@ async function resolveElement(state, element, context) {
 		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;
+		if (isThenable$1(rendered)) rendered = await rendered;
 		const resolved = await resolveValue(state, rendered, context, /* @__PURE__ */ new Set());
 		return key === null ? resolved : {
 			$: "f",
@@ -687,4 +754,430 @@ async function createServerTreeLayout(source, scope, options) {
 		}
 	};
 }
-export { renderServerTree as a, createServerTreeLayout as i, PAYLOAD_ONLY_ATTRIBUTE as n, updateServerTrees as o, createServerTreeElement as r, Outlet as t };
+/** Whether a resolved tree needs the browser to rebuild it: it holds anything but plain HTML. */
+function needsRebuild(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Array.isArray(value)) return value.some(needsRebuild);
+	if (value.$ === "c" || value.$ === "p" || value.$ === "x" || value.$ === "a") return true;
+	return Object.values(value).some(needsRebuild);
+}
+/**
+* @internal Resolves server output passed to an island. Plain HTML renders as it is, and the
+* browser keeps it. Output holding client components (or Suspense, actions, server HTML parts)
+* renders with its payload, scoped to the slot's name, so the browser rebuilds it inside the
+* island's root: its client components are then the island's descendants and read its context,
+* as in React Server Components.
+*/
+async function renderSlotTree(element, scope, held) {
+	const hook = getIslandServerHook();
+	if (!hook) throw new Error("islx: an island rendered without @farm.js/islx/react/server");
+	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 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, scopedName(scope, 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]: scopedName(scope, id),
+				style: { display: "contents" }
+			}, isolateIslands(state.serverHtml.get(id)));
+		},
+		outlet() {
+			return null;
+		},
+		action(id) {
+			return state.actions.get(id);
+		}
+	};
+	const rendered = createTreeValue(tree, resolver);
+	if (!needsRebuild(tree)) return {
+		element: React.createElement(React.Fragment, null, rendered),
+		rebuild: false
+	};
+	const payload = encode({
+		v: 1,
+		t: tree
+	});
+	return {
+		element: React.createElement(React.Fragment, null, rendered, createTreeScript(TREE_SCRIPT_TYPE, scope, payload.json, payload.values)),
+		rebuild: true
+	};
+}
+/**
+* @internal Rebuilds a slot the server rendered with `renderSlotTree`, from `root` (the slot's
+* element, or the template holding it) after loading its client modules. Null when the slot has no
+* payload there.
+*/
+async function createSlotTree(root, scope, options) {
+	const tree = await prepareTree(root, scope, options);
+	if (!tree) return null;
+	const resolver = tree.resolver();
+	const script = createTreeScript(TREE_SCRIPT_TYPE, scope, tree.json, tree.values);
+	const build = () => React.createElement(React.Fragment, null, createTreeValue(tree.payload, resolver), script);
+	build();
+	return build();
+}
+// 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),
+			container: 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" };
+const resolvedSlots = /* @__PURE__ */ new WeakMap();
+function resolveSlots(props, elements, held) {
+	let resolved = resolvedSlots.get(props);
+	if (!resolved) {
+		resolved = Promise.all(Array.from(elements, async ([name, element]) => [name, await renderSlotTree(element, name, held)])).then((entries) => new Map(entries));
+		resolvedSlots.set(props, resolved);
+	}
+	return resolved;
+}
+/** Server output in an island, where the island placed it. */
+function Slot({ name, slots }) {
+	slots.placed.add(name);
+	return React.createElement(SLOT_ELEMENT, {
+		name,
+		style: slotStyle
+	}, slots.trees.get(name)?.element);
+}
+/**
+* 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, slots) {
+	if (isElement(value)) {
+		const name = `${prefix}${slots.next++}`;
+		const reference = {
+			["$"]: "s",
+			["v"]: name
+		};
+		runtimeTagged.add(reference);
+		slots.elements.set(name, value);
+		slots.references.set(name, reference);
+		return {
+			render: React.createElement(Slot, {
+				key: value.key ?? name,
+				name,
+				slots
+			}),
+			wire: reference
+		};
+	}
+	if (Array.isArray(value)) {
+		const parts = value.map((entry) => splitSlots(entry, prefix, slots));
+		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, slots);
+			render[key] = part.render;
+			wire[key] = part.wire;
+		}
+		return {
+			render,
+			wire
+		};
+	}
+	return {
+		render: value,
+		wire: value
+	};
+}
+const warned = /* @__PURE__ */ new Set();
+const outcomes = /* @__PURE__ */ new WeakMap();
+function settle(promise) {
+	let outcome = outcomes.get(promise);
+	if (!outcome) {
+		outcome = Promise.resolve(promise).then((value) => ({
+			ok: true,
+			value
+		}), (reason) => ({
+			ok: false,
+			reason
+		}));
+		outcomes.set(promise, outcome);
+	}
+	return outcome;
+}
+const REJECTED = "{\"e\":1}";
+/** Each promise an island received, in a boundary of its own: its outcome once it settles. */
+function promiseBoundaries(promises, label) {
+	return promises.map(({ name, promise }) => React.createElement(React.Suspense, {
+		key: name,
+		fallback: null
+	}, React.createElement(IslandPromise, {
+		name,
+		promise,
+		label
+	})));
+}
+/**
+* A promise's outcome, written when it settles. Its values are sent whether or not the page wrote
+* them already: this script may land before an earlier island's, wherever React puts it.
+*/
+function IslandPromise({ name, promise, label }) {
+	const outcome = React.use(settle(promise));
+	const state = React.useContext(getContexts().render) ?? resolveRenderState();
+	const hook = getIslandServerHook();
+	let encoded = {
+		json: REJECTED,
+		values: [],
+		promises: []
+	};
+	if (outcome.ok) try {
+		encoded = hook.encode({ v: outcome.value }, state?.held ?? null);
+	} catch (error) {
+		console.warn(`[islx] A promise passed to ${label} resolved to a value that cannot be sent to the browser: it rejects there.`, error);
+	}
+	else console.error(`[islx] A promise passed to ${label} rejected.`, outcome.reason);
+	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("script", {
+		key: "outcome",
+		type: PROMISE_SCRIPT_TYPE,
+		name,
+		dangerouslySetInnerHTML: { __html: hook.escape(encoded.json) }
+	}), ...promiseBoundaries(encoded.promises, label));
+}
+/**
+* The island's props. It renders after the island, so by then the island's id position (`ids`) is
+* known, and which of its element props it placed. The others (a closed panel, a tab not shown
+* yet) render once in a `<template>` after the props, which the browser reads them from when the
+* island shows them; a slot placed later, by a part of the island that suspended first, renders in
+* both places.
+*/
+function PropsScript({ id, ids, slots, json }) {
+	const script = React.createElement("script", {
+		key: "props",
+		type: PROPS_SCRIPT_TYPE,
+		htmlFor: id,
+		["ids"]: ids.id,
+		dangerouslySetInnerHTML: { __html: json }
+	});
+	const unplaced = [...slots.elements].filter(([name]) => !slots.placed.has(name));
+	if (unplaced.length === 0) return script;
+	return React.createElement(React.Fragment, null, script, React.createElement(SLOT_TEMPLATE_ELEMENT, {
+		key: "slots",
+		htmlFor: id
+	}, unplaced.map(([name]) => React.createElement(SLOT_ELEMENT, {
+		key: name,
+		name,
+		style: slotStyle
+	}, slots.trees.get(name)?.element))));
+}
+function isThenable(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, declared = "load", options = {}) {
+	function Island(props) {
+		const { graph, render } = getContexts();
+		const insideIsland = React.useContext(graph);
+		const state = React.useContext(render) ?? resolveRenderState();
+		if (insideIsland) return React.createElement(Component, props);
+		const id = React.useId();
+		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 strategy = declared;
+		const slots = {
+			next: 0,
+			elements: /* @__PURE__ */ new Map(),
+			references: /* @__PURE__ */ new Map(),
+			placed: /* @__PURE__ */ new Set(),
+			trees: /* @__PURE__ */ new Map()
+		};
+		const { render: renderProps, wire } = splitSlots(props, `${id}s`, slots);
+		if (slots.elements.size > 0) {
+			slots.trees = React.use(resolveSlots(props, slots.elements, state?.held ?? null));
+			for (const [name, reference] of slots.references) if (slots.trees.get(name)?.rebuild) reference["t"] = 1;
+		}
+		try {
+			if (options.inferred && slots.next > 0) strategy = "load";
+			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(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);
+		}
+		const ids = {};
+		if (strategy === "load") {
+			const defaults = getBuildDefaults();
+			if (defaults.boot && defaults.entry) ReactDOM.preloadModule?.(defaults.entry, { as: "script" });
+			for (const href of defaults.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(IdProbe, {
+			key: "ids",
+			record: ids
+		}), React.createElement(Component, {
+			...renderProps,
+			key: "component"
+		})])), React.createElement(PropsScript, {
+			key: "props",
+			id,
+			ids,
+			slots,
+			json: hook.escape(encoded.json)
+		}), ...promiseBoundaries(encoded.promises, `${exportName} (${src})`));
+	}
+	Island.displayName = `Island(${Component.displayName || Component.name || exportName})`;
+	Object.defineProperty(Island, CLIENT_REFERENCE, { value: {
+		src,
+		exportName,
+		Component
+	} });
+	return Island;
+}
+export { atIdPosition as _, isolateIslands as a, setRenderStateResolver as c, PAYLOAD_ONLY_ATTRIBUTE as d, createServerTreeElement as f, updateServerTrees as g, renderServerTree as h, getContexts as i, withinClientRoot as l, createSlotTree as m, createIsland as n, runtimeTagged as o, createServerTreeLayout as p, getClientReference as r, setIslandServerHook as s, IslandsProvider as t, Outlet as u, parseIdPosition as v };

package/dist/_chunks/{prehydration-B1GLTLdk.mjs → prehydration-zEYsfFxW.mjs}

@@ -1,7 +1,8 @@
 // src/client/prehydration.ts
 /**
 * Holding interactions that happen before the islx script has run. An inline script in the page
-* captures a click or a submit on an island that has not hydrated (it is prevented and queued),
+* captures a click or a submit on an island that has not hydrated (it is prevented and queued; a
+* click on a link only when the link stays on the page, `#…`),
 * and announces a pointerdown or a focus (which go through). The runtime then hydrates those
 * islands first and replays what was held.
 *
@@ -14,7 +15,7 @@ const INTERACTION_EVENT = "f:island-interaction";
 /** Elements whose click is held and replayed rather than merely observed. */
 const REPLAYABLE_SELECTOR = "button,[role=\"button\"],input[type=\"button\"],input[type=\"submit\"],input[type=\"reset\"]";
 /** The inline script's source (no `<script>` tag): pass it to the page's head or bootstrap. */
-const PREHYDRATION_SCRIPT = `(function(){if(window.${PENDING_INTERACTIONS})return;var q=window.${PENDING_INTERACTIONS}=[];function island(n){var i=n&&n.closest&&n.closest("f-island");return i&&!i.hasAttribute("hydrated")?i:null}function tell(t,k){document.dispatchEvent(new CustomEvent("${INTERACTION_EVENT}",{detail:{target:t,kind:k}}))}function hold(e,t,k){if(!q.some(function(p){return p.target===t})){q.push({target:t,kind:k});tell(t,k)}e.preventDefault();e.stopImmediatePropagation()}document.addEventListener("click",function(e){if(e.defaultPrevented||e.button!==0||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)return;var t=e.target&&e.target.closest&&e.target.closest(${JSON.stringify(REPLAYABLE_SELECTOR)});if(!t||t.closest("a[href]")||!island(t))return;hold(e,t,"click")},true);document.addEventListener("submit",function(e){var f=e.target;if(e.defaultPrevented||!f||f.nodeName!=="FORM"||!island(f))return;hold(e,f,"submit")},true);function seen(e){if(island(e.target))tell(e.target,null)}document.addEventListener("pointerdown",seen,true);document.addEventListener("focusin",seen,true)})();`;
+const PREHYDRATION_SCRIPT = `(function(){if(window.${PENDING_INTERACTIONS})return;var q=window.${PENDING_INTERACTIONS}=[];function island(n){var i=n&&n.closest&&n.closest("f-island");return i&&!i.hasAttribute("hydrated")?i:null}function tell(t,k){document.dispatchEvent(new CustomEvent("${INTERACTION_EVENT}",{detail:{target:t,kind:k}}))}function hold(e,t,k){if(!q.some(function(p){return p.target===t})){q.push({target:t,kind:k});tell(t,k)}e.preventDefault();e.stopImmediatePropagation()}document.addEventListener("click",function(e){if(e.defaultPrevented||e.button!==0||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)return;var n=e.target&&e.target.closest?e.target:null,a=n&&n.closest("a[href]"),t=a?(a.getAttribute("href").charAt(0)==="#"?a:null):n&&n.closest(${JSON.stringify(REPLAYABLE_SELECTOR)});if(!t||!island(t))return;hold(e,t,"click")},true);document.addEventListener("submit",function(e){var f=e.target;if(e.defaultPrevented||!f||f.nodeName!=="FORM"||!island(f))return;hold(e,f,"submit")},true);function seen(e){if(island(e.target))tell(e.target,null)}document.addEventListener("pointerdown",seen,true);document.addEventListener("focusin",seen,true)})();`;
 /** Takes the interactions the inline script held inside `container`, oldest first. */
 function takePendingInteractions(container) {
 	const queue = globalThis[PENDING_INTERACTIONS];

package/dist/_chunks/{schedule-CjoybS3b.mjs → schedule-IK9_RwZC.mjs}

@@ -1,5 +1,5 @@
-import { a as hasPendingInteraction, o as takePendingInteractions, t as INTERACTION_EVENT } from "./prehydration-B1GLTLdk.mjs";
-import { m as HYDRATED_ATTRIBUTE } from "./wire-QEQWBr5s.mjs";
+import { a as hasPendingInteraction, o as takePendingInteractions, t as INTERACTION_EVENT } from "./prehydration-zEYsfFxW.mjs";
+import { m as HYDRATED_ATTRIBUTE } from "./wire-UUwZlUJZ.mjs";
 // src/client/schedule.ts
 /**
 * When an island hydrates. Renderer-neutral: every adapter schedules through this.
@@ -24,6 +24,15 @@ function isIslandStrategy(value) {
 }
 /** Elements whose click is held and replayed rather than merely observed. */
 const REPLAYABLE = "button,[role=\"button\"],input[type=\"button\"],input[type=\"submit\"],input[type=\"reset\"]";
+/**
+* The element a click before hydration is held on: a control, or a same-page link, whose handler
+* the island may need (a table of contents marking its heading). Any other link navigates.
+*/
+function heldTarget(target) {
+	const link = target.closest("a[href]");
+	if (link) return link.getAttribute("href")?.startsWith("#") ? link : null;
+	return target.closest(REPLAYABLE);
+}
 function whenIdle(callback) {
 	const scope = window;
 	if (typeof scope.requestIdleCallback === "function") {
@@ -190,8 +199,8 @@ function scheduleHydration({ container, strategy, signal, hydrate }) {
 		};
 		const onClick = (event) => {
 			const mouse = event;
-			const target = event.target instanceof Element ? event.target.closest(REPLAYABLE) : null;
-			if (!target || !container.contains(target) || target.closest("a[href]") || mouse.button !== 0 || mouse.metaKey || mouse.altKey || mouse.ctrlKey || mouse.shiftKey) return;
+			const target = event.target instanceof Element ? heldTarget(event.target) : null;
+			if (!target || !container.contains(target) || mouse.button !== 0 || mouse.metaKey || mouse.altKey || mouse.ctrlKey || mouse.shiftKey) return;
 			hold(event, target, "click");
 		};
 		const onSubmit = (event) => {

package/dist/_chunks/{tree-B4RMU2UX.d.mts → tree-CV13RsJv.d.mts}

@@ -52,7 +52,14 @@ interface IslandRenderState {
  * 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.
  */
-declare function createIsland<P extends object>(Component: React.ComponentType<P>, src: string, exportName: string, strategy?: IslandStrategy): React.ComponentType<P>;
+declare function createIsland<P extends object>(Component: React.ComponentType<P>, src: string, exportName: string, declared?: IslandStrategy,
+/**
+ * `inferred`: the compiler inferred `declared` (`"interaction"`). A render that passes the island
+ * server output hydrates at load instead: islands inside that output would wait with it.
+ */
+options?: {
+  inferred?: boolean;
+}): React.ComponentType<P>;
 /**
  * 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.

package/dist/_chunks/{values-37UIzxM0.mjs → values-gxhIei_m.mjs}

@@ -1,5 +1,5 @@
-import { c as needsObjectTag, o as encodeLeaf } from "./codec-C8to-RQW.mjs";
-import { A as VALUES_HEADER, j as VALUE_KEY_PATTERN } from "./wire-QEQWBr5s.mjs";
+import { c as needsObjectTag, o as encodeLeaf } from "./codec-DDpUvgRo.mjs";
+import { N as VALUES_HEADER, P as VALUE_KEY_PATTERN } from "./wire-UUwZlUJZ.mjs";
 // src/server/values.ts
 /**
 * Values sent once: which parts of an island's props travel as values of their own, keyed by a