@farm.js/islx 0.0.8 → 0.0.9

package/dist/client.mjs

@@ -1,31 +1,7 @@
-import { a as defineClientHooks, c as setClientHooks, d as valueHeaders, i as setActionNavigator, l as createValueStore, n as decodeActionReference, o as emit, r as setActionInterceptor, s as hookEventName, t as createServerReference, u as getValueStore } from "./_chunks/actions-C-IwUCKU.mjs";
-import { C as RENDER_HEADER, I as readPostedAction, L as stripRuntimeFields } from "./_chunks/wire-QEQWBr5s.mjs";
+import { a as defineClientHooks, c as setClientHooks, d as valueHeaders, i as setActionNavigator, l as createValueStore, n as decodeActionReference, o as emit, r as setActionInterceptor, s as hookEventName, t as createServerReference, u as getValueStore } from "./_chunks/actions-DAzd4PpV.mjs";
+import { n as enhanceForms } from "./_chunks/forms-CCDY9QHC.mjs";
+import { w as RENDER_HEADER } from "./_chunks/wire-UUwZlUJZ.mjs";
 import { i as REPLAYABLE_SELECTOR, n as PENDING_INTERACTIONS, r as PREHYDRATION_SCRIPT, t as INTERACTION_EVENT } from "./_chunks/prehydration-zEYsfFxW.mjs";
-// src/client/forms.ts
-/**
-* Forms written in server components submit without reloading the page once JavaScript runs.
-* No island owns them, so nothing else would: a submit of a form that posts an action is sent as
-* a call, and the page refreshes as after any action, keeping island state. Forms inside islands
-* are React's, which handles them first.
-*/
-let enhanced = false;
-/** Starts handling server-component forms on this page. Safe to call more than once. */
-function enhanceForms() {
-	if (enhanced) return;
-	enhanced = true;
-	document.addEventListener("submit", (event) => {
-		if (event.defaultPrevented || !(event.target instanceof HTMLFormElement)) return;
-		const form = event.target;
-		const submitter = event.submitter ?? null;
-		const data = new FormData(form, submitter);
-		const posted = readPostedAction(data);
-		if (!posted) return;
-		event.preventDefault();
-		stripRuntimeFields(data);
-		form.setAttribute("aria-busy", "true");
-		createServerReference(posted.id, posted.token)(data).then(() => form.reset()).catch((error) => console.error("[islx] The form's action failed:", error)).finally(() => form.removeAttribute("aria-busy"));
-	});
-}
 // src/client/navigation.ts
 /**
 * Moving between pages without loading a new document. A click on a same-site link fetches the

package/dist/compiler.d.mts

@@ -1,4 +1,5 @@
 import { a as getActionId, i as TransformActionsResult, n as AstNode, o as hasModuleDirective, r as TransformActionsOptions, s as transformActions, t as ActionCompileError } from "./_chunks/actions-BCtIGvrP.mjs";
+import MagicString from "magic-string";
 
 // src/compiler/infer.d.ts
 interface InferOptions {
@@ -21,4 +22,15 @@ interface Inference {
 }
 /** Infers when the islands `file` exports hydrate; `code` is its source. */
 declare function inferStrategy(file: string, code: string, options: InferOptions): Inference;
-export { ActionCompileError, type AstNode, type InferOptions, type Inference, type TransformActionsOptions, type TransformActionsResult, getActionId, hasModuleDirective, inferStrategy, transformActions };
+/** The rewrite for a framework's own transform: the module's new code and map, or null. */
+declare function rewriteFormStatusImports(options: {
+  code: string;
+  id: string;
+  parse(code: string): AstNode;
+  /** The module islx's React entry resolves as. Default `@farm.js/islx/react`. */
+  from?: string;
+}): {
+  code: string;
+  map: ReturnType<MagicString["generateMap"]>;
+} | null;
+export { ActionCompileError, type AstNode, type InferOptions, type Inference, type TransformActionsOptions, type TransformActionsResult, getActionId, hasModuleDirective, inferStrategy, rewriteFormStatusImports, transformActions };

package/dist/compiler.mjs

@@ -1 +1 @@
-export { n as ActionCompileError, r as getActionId, i as hasModuleDirective, t as inferStrategy, a as transformActions } from "./_chunks/infer-BIVT5aDz.mjs";
+export { i as ActionCompileError, a as getActionId, o as hasModuleDirective, r as inferStrategy, n as rewriteFormStatusImports, s as transformActions } from "./_chunks/form-status-CRfnB7WT.mjs";

package/dist/index.d.mts

@@ -1,3 +1,3 @@
-import { A as VALUES_HEADER, C as RENDER_HEADER, D as TAG_BOUND, E as TAG, F as getTag, I as readPostedAction, L as stripRuntimeFields, M as VALUE_SCRIPT_TYPE, N as attachmentField, O as TAG_VALUE, P as formFieldName, S as REFERENCE_TAG, T as SLOT_TAG, _ as MAX_HELD_VALUES, a as BLOB_TAG, b as PROMISE_TAG, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as LAYOUTS_HEADER, h as ISLAND_ELEMENT, i as ACTION_TAG, j as VALUE_KEY_PATTERN, k as TREE_SCRIPT_TYPE, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as OBJECT_TAG, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "./_chunks/wire-Dipqh-EB.mjs";
+import { A as TAG_BOUND, B as stripRuntimeFields, C as REFERENCE_TAG, D as SLOT_TEMPLATE_ELEMENT, E as SLOT_TAG, F as VALUE_SCRIPT_TYPE, I as attachmentField, L as formFieldName, M as TREE_SCRIPT_TYPE, N as VALUES_HEADER, O as SLOT_TREE_FIELD, P as VALUE_KEY_PATTERN, R as getTag, S as PROPS_SCRIPT_TYPE, T as SLOT_ELEMENT, _ as LAYOUTS_HEADER, a as BLOB_TAG, b as PROMISE_SCRIPT_TYPE, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as ISLAND_ELEMENT, h as ID_POSITION_ATTRIBUTE, i as ACTION_TAG, j as TAG_VALUE, k as TAG, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as MAX_HELD_VALUES, w as RENDER_HEADER, x as PROMISE_TAG, y as OBJECT_TAG, z as readPostedAction } from "./_chunks/wire-1d6wqOia.mjs";
 import { a as decode, c as encodeLeaf, d as plainObject, f as tagged, i as NOT_A_VALUE, l as fromBase64, n as EncodeError, o as decodeTagged, p as toBase64, r as EncodeOptions, s as encode, t as DecodeOptions, u as needsObjectTag } from "./_chunks/codec-CK8kZp4u.mjs";
-export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, type DecodeOptions, EncodeError, type EncodeOptions, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROMISE_SCRIPT_TYPE, PROMISE_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };
+export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, type DecodeOptions, EncodeError, type EncodeOptions, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ID_POSITION_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROMISE_SCRIPT_TYPE, PROMISE_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, SLOT_TEMPLATE_ELEMENT, SLOT_TREE_FIELD, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { A as VALUES_HEADER, C as RENDER_HEADER, D as TAG_BOUND, E as TAG, F as getTag, I as readPostedAction, L as stripRuntimeFields, M as VALUE_SCRIPT_TYPE, N as attachmentField, O as TAG_VALUE, P as formFieldName, S as REFERENCE_TAG, T as SLOT_TAG, _ as MAX_HELD_VALUES, a as BLOB_TAG, b as PROMISE_TAG, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as LAYOUTS_HEADER, h as ISLAND_ELEMENT, i as ACTION_TAG, j as VALUE_KEY_PATTERN, k as TREE_SCRIPT_TYPE, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as OBJECT_TAG, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "./_chunks/wire-QEQWBr5s.mjs";
-import { a as encode, c as needsObjectTag, d as tagged, f as toBase64, i as decodeTagged, l as plainObject, n as NOT_A_VALUE, o as encodeLeaf, r as decode, s as fromBase64, t as EncodeError } from "./_chunks/codec-C8to-RQW.mjs";
-export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, EncodeError, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROMISE_SCRIPT_TYPE, PROMISE_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };
+import { A as TAG_BOUND, B as stripRuntimeFields, C as REFERENCE_TAG, D as SLOT_TEMPLATE_ELEMENT, E as SLOT_TAG, F as VALUE_SCRIPT_TYPE, I as attachmentField, L as formFieldName, M as TREE_SCRIPT_TYPE, N as VALUES_HEADER, O as SLOT_TREE_FIELD, P as VALUE_KEY_PATTERN, R as getTag, S as PROPS_SCRIPT_TYPE, T as SLOT_ELEMENT, _ as LAYOUTS_HEADER, a as BLOB_TAG, b as PROMISE_SCRIPT_TYPE, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as ISLAND_ELEMENT, h as ID_POSITION_ATTRIBUTE, i as ACTION_TAG, j as TAG_VALUE, k as TAG, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as MAX_HELD_VALUES, w as RENDER_HEADER, x as PROMISE_TAG, y as OBJECT_TAG, z as readPostedAction } from "./_chunks/wire-UUwZlUJZ.mjs";
+import { a as encode, c as needsObjectTag, d as tagged, f as toBase64, i as decodeTagged, l as plainObject, n as NOT_A_VALUE, o as encodeLeaf, r as decode, s as fromBase64, t as EncodeError } from "./_chunks/codec-DDpUvgRo.mjs";
+export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, EncodeError, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ID_POSITION_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROMISE_SCRIPT_TYPE, PROMISE_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, SLOT_TEMPLATE_ELEMENT, SLOT_TREE_FIELD, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };

package/dist/react/client.d.mts

@@ -1,5 +1,5 @@
 import { a as scheduleHydration, i as isIslandStrategy, n as IslandStrategy, r as ScheduleOptions, t as ISLAND_STRATEGIES } from "../_chunks/schedule-Dw14dW0H.mjs";
-import { m as HYDRATED_ATTRIBUTE } from "../_chunks/wire-Dipqh-EB.mjs";
+import { m as HYDRATED_ATTRIBUTE } from "../_chunks/wire-1d6wqOia.mjs";
 import { t as ValueStore } from "../_chunks/value-store-Dm-7xJ6W.mjs";
 import { a as ServerTreeLayoutOptions, c as createServerTreeLayout, g as isolateIslands, i as ServerTreeLayout, n as PAYLOAD_ONLY_ATTRIBUTE, r as ServerTreeElementOptions, s as createServerTreeElement, u as updateServerTrees, v as withinClientRoot } from "../_chunks/tree-CV13RsJv.mjs";
 import * as React from "react";

package/dist/react/client.mjs

@@ -1,9 +1,8 @@
-import { d as valueHeaders, o as emit, t as createServerReference, u as getValueStore } from "../_chunks/actions-C-IwUCKU.mjs";
-import { i as decodeTagged, n as NOT_A_VALUE, r as decode, u as setOwn } from "../_chunks/codec-C8to-RQW.mjs";
-import { F as getTag, f as FORM_STATE_SCRIPT_TYPE, h as ISLAND_ELEMENT, m as HYDRATED_ATTRIBUTE, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "../_chunks/wire-QEQWBr5s.mjs";
-import { i as getContexts, o as isolateIslands, u as withinClientRoot } from "../_chunks/island-DXAGP4FN.mjs";
-import { i as createServerTreeLayout, n as PAYLOAD_ONLY_ATTRIBUTE, o as updateServerTrees, r as createServerTreeElement } from "../_chunks/tree-BQphP23Y.mjs";
-import { n as isIslandStrategy, r as scheduleHydration, t as ISLAND_STRATEGIES } from "../_chunks/schedule-Cwn9vQL0.mjs";
+import { d as valueHeaders, o as emit, t as createServerReference, u as getValueStore } from "../_chunks/actions-DAzd4PpV.mjs";
+import { i as decodeTagged, n as NOT_A_VALUE, r as decode, u as setOwn } from "../_chunks/codec-DDpUvgRo.mjs";
+import { D as SLOT_TEMPLATE_ELEMENT, R as getTag, S as PROPS_SCRIPT_TYPE, T as SLOT_ELEMENT, b as PROMISE_SCRIPT_TYPE, f as FORM_STATE_SCRIPT_TYPE, g as ISLAND_ELEMENT, m as HYDRATED_ATTRIBUTE } from "../_chunks/wire-UUwZlUJZ.mjs";
+import { _ as atIdPosition, a as isolateIslands, d as PAYLOAD_ONLY_ATTRIBUTE, f as createServerTreeElement, g as updateServerTrees, i as getContexts, l as withinClientRoot, m as createSlotTree, p as createServerTreeLayout, v as parseIdPosition } from "../_chunks/island-viWIOM1k.mjs";
+import { n as isIslandStrategy, r as scheduleHydration, t as ISLAND_STRATEGIES } from "../_chunks/schedule-IK9_RwZC.mjs";
 import * as React from "react";
 import { hydrateRoot } from "react-dom/client";
 // src/react/hydrate.ts
@@ -39,6 +38,37 @@ function readFormState(document) {
 */
 const revivedValues = /* @__PURE__ */ new WeakMap();
 let slotsRevived = 0;
+/**
+* A slot's server HTML: inside the island where it placed the slot, or in the template after its
+* props for a slot it had not placed.
+*/
+function findSlot(container, name) {
+	for (const slot of container.querySelectorAll(SLOT_ELEMENT)) if (slot.getAttribute("name") === name) return slot;
+	const id = container.getAttribute("props");
+	for (const template of container.ownerDocument.querySelectorAll(`${SLOT_TEMPLATE_ELEMENT}[for]`)) {
+		if (template.getAttribute("for") !== id) continue;
+		for (const slot of template.content.querySelectorAll(SLOT_ELEMENT)) if (slot.getAttribute("name") === name) return slot;
+	}
+	return null;
+}
+/** Each island's slots that carry server trees, rebuilt before the island hydrates. */
+const preparedSlots = /* @__PURE__ */ new WeakMap();
+/** The names of the slots in `value` that carry server trees. */
+function collectTreeSlots(value, names, seen = /* @__PURE__ */ new Set()) {
+	if (!value || typeof value !== "object" || seen.has(value)) return;
+	seen.add(value);
+	const object = value;
+	if (object["$"] === "s" && object["t"] === 1 && typeof object["v"] === "string") {
+		names.add(object["v"]);
+		return;
+	}
+	for (const entry of Array.isArray(value) ? value : Object.values(object)) collectTreeSlots(entry, names, seen);
+}
+/** Whether `container` sits inside another island below `scope`. */
+function insideAnotherIsland(container, scope) {
+	for (let node = container.parentElement; node && node !== scope; node = node.parentElement) if (node.matches(ISLAND_SELECTOR)) return true;
+	return false;
+}
 /** Turns travelled props back into values: slots keep their server HTML, actions become callable. */
 function revive(value, container, values) {
 	if (value && typeof value === "object") {
@@ -70,11 +100,16 @@ function reviveUncached(value, container, values) {
 	if (tag === "s" && typeof object["v"] === "string") {
 		slotsRevived++;
 		const name = object["v"];
-		let html = "";
-		for (const slot of container.querySelectorAll(SLOT_ELEMENT)) if (slot.getAttribute("name") === name) {
-			html = slot.innerHTML;
-			break;
+		if (object["t"] === 1) {
+			const tree = preparedSlots.get(container)?.get(name);
+			if (tree === void 0) throw new Error(`the server tree of slot ${name} was not prepared`);
+			return React.createElement(SLOT_ELEMENT, {
+				key: name,
+				name,
+				style: { display: "contents" }
+			}, tree);
 		}
+		const html = findSlot(container, name)?.innerHTML ?? "";
 		return React.createElement(SLOT_ELEMENT, {
 			key: name,
 			name,
@@ -277,14 +312,43 @@ function createHydrationRuntime(options) {
 		}, [onCommit]);
 		return children;
 	}
-	const element = (Component, props, restore, onCommit) => {
-		const { graph } = getContexts();
-		const inner = React.createElement(Component, props);
-		return React.createElement(graph.Provider, { value: true }, React.createElement(Boundary, { onError: restore }, React.createElement(Committed, {
+	const element = (container, Component, props, restore, position, onCommit) => {
+		const { graph, container: containerContext } = getContexts();
+		const component = React.createElement(Component, props);
+		const inner = position && atIdPosition(position, component) || component;
+		return React.createElement(graph.Provider, { value: true }, React.createElement(containerContext.Provider, { value: container }, React.createElement(Boundary, { onError: restore }, React.createElement(Committed, {
 			onCommit,
 			children: options.wrap ? options.wrap(inner) : inner
-		})));
+		}))));
 	};
+	const ServerHtml = createServerHtml({
+		hydrate,
+		dispose
+	});
+	/** Rebuilds the server trees of an island's slots, loading their client modules. */
+	async function prepareSlots(container, id) {
+		const text = findPropsScript(container, id)?.textContent ?? "";
+		if (!text.includes(`"t":1`)) return;
+		let parsed = JSON.parse(text);
+		if (text.includes(`"\$":"r"`)) {
+			values.ingest(container.ownerDocument);
+			parsed = values.resolve(parsed);
+		}
+		const names = /* @__PURE__ */ new Set();
+		collectTreeSlots(parsed, names);
+		const trees = /* @__PURE__ */ new Map();
+		await Promise.all(Array.from(names, async (name) => {
+			const slot = findSlot(container, name);
+			const tree = slot && await createSlotTree(slot, name, {
+				load: options.load,
+				ServerHtml,
+				values
+			});
+			if (!tree) throw new Error(`slot ${name} has no server tree`);
+			trees.set(name, tree);
+		}));
+		preparedSlots.set(container, trees);
+	}
 	/** An island's props, with values, slots and actions revived. */
 	function readProps(container, id) {
 		const script = findPropsScript(container, id);
@@ -310,7 +374,7 @@ function createHydrationRuntime(options) {
 		if (scope instanceof Document) watchStream(scope);
 		const candidates = Array.from(scope.querySelectorAll(ISLAND_SELECTOR));
 		if (scope instanceof Element && scope.matches(ISLAND_SELECTOR)) candidates.unshift(scope);
-		const islands = candidates.filter((container) => !roots.has(container) && !pending.has(container) && !container.parentElement?.closest(ISLAND_SELECTOR) && !container.closest(STREAM_STAGING) && !awaitsStreamedContent(container));
+		const islands = candidates.filter((container) => !roots.has(container) && !pending.has(container) && !insideAnotherIsland(container, scope) && !container.closest(STREAM_STAGING) && !awaitsStreamedContent(container));
 		await Promise.all(islands.map(async (container) => {
 			const src = container.getAttribute("src");
 			const id = container.getAttribute("props");
@@ -348,7 +412,10 @@ function createHydrationRuntime(options) {
 							if (controller.signal.aborted || !container.isConnected) return;
 							const Component = module[exportName];
 							if (typeof Component !== "function" && (typeof Component !== "object" || Component === null)) throw new Error(`${src} has no export ${exportName}`);
+							await prepareSlots(container, id);
+							if (controller.signal.aborted || !container.isConnected) return;
 							const props = readProps(container, id);
+							const position = parseIdPosition(findPropsScript(container, id)?.getAttribute("ids"));
 							let failure;
 							const restore = (error) => {
 								if (failure !== void 0) return;
@@ -364,8 +431,9 @@ function createHydrationRuntime(options) {
 								strategy,
 								duration: performance.now() - scheduledAt
 							});
-							const root = hydrateRoot(container, element(Component, props, restore, onCommit), {
+							const root = hydrateRoot(container, element(container, Component, props, restore, position, onCommit), {
 								formState,
+								...position ? { identifierPrefix: position.prefix } : {},
 								onUncaughtError: restore,
 								onRecoverableError(error) {
 									if (disposing && isEarlyUpdate(error)) return;
@@ -374,6 +442,7 @@ function createHydrationRuntime(options) {
 								}
 							});
 							roots.set(container, {
+								position,
 								root,
 								Component,
 								src,
@@ -433,7 +502,7 @@ function createHydrationRuntime(options) {
 			if (!previous || !record || !id) continue;
 			try {
 				const props = readProps(container, id);
-				record.root.render(element(record.Component, props, record.restore));
+				record.root.render(element(previous, record.Component, props, record.restore, record.position));
 				record.props = props;
 				container.replaceWith(previous);
 				carried++;
@@ -454,7 +523,7 @@ function createHydrationRuntime(options) {
 				continue;
 			}
 			record.Component = Component;
-			record.root.render(element(record.Component, record.props, record.restore));
+			record.root.render(element(container, record.Component, record.props, record.restore, record.position));
 			updated++;
 		}
 		return updated;

package/dist/react/server.mjs

@@ -1,12 +1,11 @@
-import { a as encode } from "../_chunks/codec-C8to-RQW.mjs";
-import { f as FORM_STATE_SCRIPT_TYPE } from "../_chunks/wire-QEQWBr5s.mjs";
+import { a as encode } from "../_chunks/codec-DDpUvgRo.mjs";
+import { f as FORM_STATE_SCRIPT_TYPE } from "../_chunks/wire-UUwZlUJZ.mjs";
 import { RUNTIME_GLOBAL } from "../boot.mjs";
 import { r as PREHYDRATION_SCRIPT } from "../_chunks/prehydration-zEYsfFxW.mjs";
-import { i as encodeActionReference } from "../_chunks/actions-CvQ0-zjg.mjs";
+import { i as encodeActionReference } from "../_chunks/actions-DzIPDecd.mjs";
 import { t as getBuildDefaults } from "../_chunks/build-COIcs7wm.mjs";
-import { a as parseHeldValues, n as addressValues, o as selectValuesToSend, r as escapeScriptJson } from "../_chunks/values-37UIzxM0.mjs";
-import { c as setIslandServerHook, i as getContexts, l as setRenderStateResolver, n as createIsland, o as isolateIslands, r as getClientReference, s as runtimeTagged, t as IslandsProvider, u as withinClientRoot } from "../_chunks/island-DXAGP4FN.mjs";
-import { a as renderServerTree, n as PAYLOAD_ONLY_ATTRIBUTE, t as Outlet } from "../_chunks/tree-BQphP23Y.mjs";
+import { a as parseHeldValues, n as addressValues, o as selectValuesToSend, r as escapeScriptJson } from "../_chunks/values-gxhIei_m.mjs";
+import { a as isolateIslands, c as setRenderStateResolver, d as PAYLOAD_ONLY_ATTRIBUTE, h as renderServerTree, i as getContexts, l as withinClientRoot, n as createIsland, o as runtimeTagged, r as getClientReference, s as setIslandServerHook, t as IslandsProvider, u as Outlet } from "../_chunks/island-viWIOM1k.mjs";
 import * as React from "react";
 // src/react/server.ts
 /**

package/dist/react.d.mts

@@ -1,3 +1,7 @@
 import { f as IslandRenderState, g as isolateIslands, l as renderServerTree, m as createIsland, o as ServerTreeRenderOptions, p as IslandsProvider, t as Outlet, v as withinClientRoot } from "./_chunks/tree-CV13RsJv.mjs";
 import { n as IslandStrategy } from "./_chunks/schedule-Dw14dW0H.mjs";
-export { type IslandRenderState, type IslandStrategy, IslandsProvider, Outlet, type ServerTreeRenderOptions, createIsland, isolateIslands, renderServerTree, withinClientRoot };
+import * as ReactDOM from "react-dom";
+
+// src/react/form-status.d.ts
+declare function useFormStatus(): ReactDOM.FormStatus;
+export { type IslandRenderState, type IslandStrategy, IslandsProvider, Outlet, type ServerTreeRenderOptions, createIsland, isolateIslands, renderServerTree, useFormStatus, withinClientRoot };

package/dist/react.mjs

@@ -1,3 +1,22 @@
-import { n as createIsland, o as isolateIslands, t as IslandsProvider, u as withinClientRoot } from "./_chunks/island-DXAGP4FN.mjs";
-import { a as renderServerTree, t as Outlet } from "./_chunks/tree-BQphP23Y.mjs";
-export { IslandsProvider, Outlet, createIsland, isolateIslands, renderServerTree, withinClientRoot };
+import { a as isolateIslands, h as renderServerTree, i as getContexts, l as withinClientRoot, n as createIsland, t as IslandsProvider, u as Outlet } from "./_chunks/island-viWIOM1k.mjs";
+import { i as subscribeServerForms, r as getServerFormStatus, t as IDLE_FORM_STATUS } from "./_chunks/forms-CCDY9QHC.mjs";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+// src/react/form-status.ts
+/**
+* `useFormStatus` for islands. React reports the status of the React `<form>` around a component,
+* but a form written in a server component is server HTML: an island inside it is a React root of
+* its own, with no form above it, so React's hook never sees the form submit. The compiler points
+* client modules' `useFormStatus` from `react-dom` here.
+*
+* Forms do not nest, so an island inside a `<form>` element has no React form of its own around
+* its components: that server form is the one, and `enhanceForms` reports its submissions.
+* Anywhere else this is React's hook.
+*/
+function useFormStatus() {
+	const status = ReactDOM.useFormStatus();
+	const form = React.useContext(getContexts().container)?.parentElement?.closest("form") ?? null;
+	const server = React.useSyncExternalStore(subscribeServerForms, () => form ? getServerFormStatus(form) : IDLE_FORM_STATUS, () => IDLE_FORM_STATUS);
+	return form ? server : status;
+}
+export { IslandsProvider, Outlet, createIsland, isolateIslands, renderServerTree, useFormStatus, withinClientRoot };

package/dist/server.mjs

@@ -1,7 +1,7 @@
-import { a as parseHeldValues, i as hashValue, n as addressValues, o as selectValuesToSend, r as escapeScriptJson, t as VALUE_MIN_LENGTH } from "./_chunks/values-37UIzxM0.mjs";
-import { a as getActionReference, c as resolveAction, d as generateActionKey, f as sealBound, i as encodeActionReference, l as SealError, n as configureActionKeys, o as registerInlineAction, p as unsealBound, r as decodeActionReference, s as registerServerReference, t as bindInlineAction, u as createActionKeys } from "./_chunks/actions-CvQ0-zjg.mjs";
-import { a as encode, r as decode } from "./_chunks/codec-C8to-RQW.mjs";
-import { I as readPostedAction, L as stripRuntimeFields, N as attachmentField, n as ACTION_KEY_FIELD, o as BOUND_FIELD, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER } from "./_chunks/wire-QEQWBr5s.mjs";
+import { a as parseHeldValues, i as hashValue, n as addressValues, o as selectValuesToSend, r as escapeScriptJson, t as VALUE_MIN_LENGTH } from "./_chunks/values-gxhIei_m.mjs";
+import { a as getActionReference, c as resolveAction, d as generateActionKey, f as sealBound, i as encodeActionReference, l as SealError, n as configureActionKeys, o as registerInlineAction, p as unsealBound, r as decodeActionReference, s as registerServerReference, t as bindInlineAction, u as createActionKeys } from "./_chunks/actions-DzIPDecd.mjs";
+import { a as encode, r as decode } from "./_chunks/codec-DDpUvgRo.mjs";
+import { B as stripRuntimeFields, I as attachmentField, n as ACTION_KEY_FIELD, o as BOUND_FIELD, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, z as readPostedAction } from "./_chunks/wire-UUwZlUJZ.mjs";
 import { n as setBuildDefaults, t as getBuildDefaults } from "./_chunks/build-COIcs7wm.mjs";
 // src/server/hooks.ts
 const HOOKS_KEY = Symbol.for("islx.server.hooks");

package/dist/tanstack-start/server.mjs

@@ -1,6 +1,6 @@
-import { t as IslandsProvider } from "../_chunks/island-DXAGP4FN.mjs";
-import { A as VALUES_HEADER, C as RENDER_HEADER } from "../_chunks/wire-QEQWBr5s.mjs";
-import { a as parseHeldValues } from "../_chunks/values-37UIzxM0.mjs";
+import { t as IslandsProvider } from "../_chunks/island-viWIOM1k.mjs";
+import { N as VALUES_HEADER, w as RENDER_HEADER } from "../_chunks/wire-UUwZlUJZ.mjs";
+import { a as parseHeldValues } from "../_chunks/values-gxhIei_m.mjs";
 import * as React from "react";
 import { StartServer } from "@tanstack/react-start/server";
 import { createSsrStreamResponse, defineHandlerCallback, getSsrStatus, renderRouterToStream, transformReadableStreamWithRouter } from "@tanstack/react-router/ssr/server";

package/dist/tanstack-start.mjs

@@ -1,4 +1,4 @@
-import { n as ENTRY_ID, r as islx } from "./_chunks/vite-0bH_ZDys.mjs";
+import { n as ENTRY_ID, r as islx } from "./_chunks/vite-CHB6B8tP.mjs";
 import { normalizePath } from "vite";
 // src/tanstack-start/index.ts
 /**

package/dist/vite.mjs

@@ -1 +1 @@
-export { t as BOOT_ID, n as ENTRY_ID, r as default, r as islx, i as resolveDirectives, a as serializeHooks } from "./_chunks/vite-0bH_ZDys.mjs";
+export { t as BOOT_ID, n as ENTRY_ID, r as default, r as islx, i as resolveDirectives, a as serializeHooks } from "./_chunks/vite-CHB6B8tP.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm.js/islx",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A renderer-agnostic wire format for server-rendered islands: typed props, values sent once, server actions, and partial navigations.",
   "keywords": [
     "islands",