ilha 0.11.1 → 0.12.1

package/dist/index.js

@@ -1,6 +1,8 @@
-import { computed, effect, endBatch, setActiveSub, signal, startBatch } from "alien-signals";
+import { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, serializeServerManifest, setJsxRuntimeBridge, setServerActionBinder } from "./internal.js";
+import { effect as effect$1, endBatch, setActiveSub, signal, startBatch } from "alien-signals";
 
 //#region src/index.ts
+const __DEV__ = false;
 const MAX_SNAPSHOT_CHARS = 262144;
 const MAX_SNAPSHOT_DEPTH = 32;
 function exceedsMaxDepth(value, depth) {
@@ -94,8 +96,8 @@ function extractSlotPropsAttr(root, slotId) {
 const SLOT_TAG_NAME_RE = /^[a-z][a-z0-9-]*$/i;
 function assertValidSlotTagName(tag) {
 	const trimmed = tag.trim();
-	if (trimmed.length === 0) throw new Error("island.as() requires a non-empty HTML tag name.");
-	if (!SLOT_TAG_NAME_RE.test(trimmed)) throw new Error(`island.as() tag must be a valid HTML element name (got "${tag}"). Use names like "span", "div", or "li".`);
+	if (trimmed.length === 0) throw new Error("The { as } option requires a non-empty HTML tag name.");
+	if (!SLOT_TAG_NAME_RE.test(trimmed)) throw new Error(`The { as } option tag must be a valid HTML element name (got "${tag}"). Use names like "span", "div", or "li".`);
 	return trimmed.toLowerCase();
 }
 function getIslandSlotTag(island) {
@@ -134,11 +136,18 @@ function slotPropsForAttr(props, captureActions = false) {
 		if (key === "children") continue;
 		const value = props[key];
 		if (typeof value === "function") {
-			const action = captureActions ? captureHandlerActions(value) : void 0;
-			if (action) (out ??= {})[key] = {
-				__ilha: "action",
-				...action
-			};
+			const id = captureActions && !isRawHtmlValue(value) ? actionManifestId(value) : void 0;
+			if (id) {
+				const a = actionBoundArgs(value);
+				(out ??= {})[key] = Array.isArray(a) ? {
+					__ilha: "action",
+					k: id,
+					a
+				} : {
+					__ilha: "action",
+					k: id
+				};
+			}
 			continue;
 		}
 		if (typeof value === "symbol") continue;
@@ -188,32 +197,10 @@ function reviveSlotPropValue(value) {
 	for (const key of Object.keys(obj)) out[key] = reviveSlotPropValue(obj[key]);
 	return out;
 }
-/**
-* Exact legacy shape produced when RawHtml lost its brand under JSON.stringify:
-* a plain object with a single own key `value` that is a string.
-*/
-function isLegacyRawHtmlBlob(value) {
-	if (!value || typeof value !== "object" || isRawHtmlValue(value)) return false;
-	if (Object.getPrototypeOf(value) !== Object.prototype) return false;
-	const keys = Object.keys(value);
-	return keys.length === 1 && keys[0] === "value" && typeof value.value === "string";
-}
-/** Revive attr-parsed props (RawHtml tags). Children stay as plain data if present. */
+/** Revive attr-parsed props, restoring tagged `__ilha:raw` RawHtml values. */
 function reviveSlotProps(props) {
 	if (typeof props !== "object" || props === null || Array.isArray(props)) return {};
-	const out = reviveSlotPropValue(props);
-	if ("children" in out) out.children = reviveLegacyChildren(out.children);
-	return out;
-}
-function reviveLegacyChildren(children) {
-	if (!Array.isArray(children)) {
-		if (isLegacyRawHtmlBlob(children)) return makeRawHtml(children.value);
-		return reviveSlotPropValue(children);
-	}
-	return children.map((child) => {
-		if (isLegacyRawHtmlBlob(child)) return makeRawHtml(child.value);
-		return reviveSlotPropValue(child);
-	});
+	return reviveSlotPropValue(props);
 }
 /** Serialized form of slot props, matching the decoded `data-ilha-props` attr. */
 function serializeSlotProps(props) {
@@ -328,7 +315,7 @@ function morphChildren(fromParent, toParent) {
 				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
 				continue;
 			}
-			if (fromEl.hasAttribute(LEAVING_ATTR)) {
+			if (fromEl.hasAttribute(SLOT_ATTR) && !fromEl.isConnected) {
 				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
 				continue;
 			}
@@ -460,6 +447,70 @@ const ESC = {
 function escapeHtml(value) {
 	return String(value).replace(/[&<>"']/g, (c) => ESC[c]);
 }
+const SAFE_CSS_PROP_RE = /^(-{2}[a-zA-Z][a-zA-Z0-9-]*|-?[a-zA-Z][a-zA-Z0-9-]*)$/;
+const URL_ATTRS = /* @__PURE__ */ new Set([
+	"href",
+	"src",
+	"srcset",
+	"imagesrcset",
+	"action",
+	"formaction",
+	"cite",
+	"data",
+	"poster"
+]);
+const SAFE_DATA_IMAGE_RE = /^data:image\/(png|jpe?g|gif|webp|avif)[;,]/i;
+const UNSAFE_SCHEME_RE = /^(?:javascript|vbscript):/i;
+const DATA_IMAGE_CONTEXTS = /* @__PURE__ */ new Set([
+	"img:src",
+	"source:srcset",
+	"link:imagesrcset"
+]);
+function normalizeUrl(value) {
+	return value.replace(/[\u0000-\u0020]/g, "");
+}
+function checkUrl(normalized, allowDataImage) {
+	if (UNSAFE_SCHEME_RE.test(normalized)) return false;
+	if (/^data:/i.test(normalized)) return allowDataImage && SAFE_DATA_IMAGE_RE.test(normalized);
+	return true;
+}
+/** Strict single-URL check — all data: URLs rejected. */
+function isSafeUrl(value) {
+	return checkUrl(normalizeUrl(value), false);
+}
+/** Element- and attribute-aware URL policy for rendered attributes.
+* `srcset`/`imagesrcset` validate each comma-separated candidate URL. */
+function isSafeUrlAttrValue(tagName, attrName, value) {
+	const attr = attrName.toLowerCase();
+	const allowDataImage = DATA_IMAGE_CONTEXTS.has(`${tagName.toLowerCase()}:${attr}`) && !attr.startsWith("srcset") && attr !== "imagesrcset";
+	if (/^(?:srcset|imagesrcset)$/i.test(attr)) return value.split(",").every((candidate) => {
+		const url = candidate.trim().split(/\s+/)[0] ?? "";
+		return url === "" || checkUrl(normalizeUrl(url), false);
+	});
+	return checkUrl(normalizeUrl(value), allowDataImage);
+}
+function isUrlAttributeName(name) {
+	const lower = name.toLowerCase();
+	return URL_ATTRS.has(lower) || /:(href|src|srcset|imagesrcset|action|formaction|cite|data|poster)$/.test(lower);
+}
+function isPlainObject(v) {
+	return v !== null && typeof v === "object" && Object.getPrototypeOf(v) === Object.prototype;
+}
+function serializeStyle(value) {
+	return Object.entries(value).map(([k, v]) => {
+		if (!SAFE_CSS_PROP_RE.test(k)) return "";
+		const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		const str = String(v);
+		if (/[<>{};]/.test(str) || /expression\(/i.test(str) || /javascript:/i.test(str)) return "";
+		return `${prop}:${str}`;
+	}).filter(Boolean).join(";");
+}
+function serializeScriptJson(value) {
+	return JSON.stringify(value).replace(/</g, "\\u003C");
+}
+function escapeStyleText(text) {
+	return text.replace(/</g, "\\3C ");
+}
 function dedentString(str) {
 	if (str.length === 0 || str[0] !== "\n") return str;
 	const lines = str.split("\n");
@@ -474,17 +525,8 @@ const SIGNAL_ACCESSOR = Symbol.for("ilha.signalAccessor");
 const ISLAND = Symbol.for("ilha.island");
 const ISLAND_CALL = Symbol.for("ilha.islandCall");
 const ASTRO_RENDERER_GLOBAL = Symbol.for("ilha.astroRenderer");
-/** @internal Internal hook used by a parent's mountSlots to mount a child island and
-* retain a handle to push updated props into it on subsequent parent
-* re-renders. Not part of the public surface. */
-const ISLAND_MOUNT_INTERNAL = Symbol.for("ilha.islandMountInternal");
 const ISLAND_SLOT_TAG = Symbol.for("ilha.islandSlotTag");
 const ISLAND_CLIENT_REF = Symbol.for("ilha.clientRef");
-/** @internal Live mount handles keyed by host element. Lets @ilha/router adopt
-* islands hydrated by `ilha.mount()` (whose handles it never saw) and push new
-* loader props into them in place instead of remounting. Entries are removed
-* on unmount. Not part of the public surface. */
-const ISLAND_MOUNT_HANDLES = /* @__PURE__ */ new WeakMap();
 /** @internal Sync re-render of an island from a state snapshot. Attached by
 * render(); used by server-frame endpoints to produce HTML for streamed
 * updates without a live mount. Not part of the public surface. */
@@ -493,61 +535,148 @@ const ISLAND_RENDER_STATE = Symbol.for("ilha.renderState");
 * provided map. Used by emitIslandSlot so nested server islands ship their
 * interactive surface alongside their inlined HTML. */
 const ISLAND_SSR_MANIFEST = Symbol.for("ilha.ssrManifest");
-function manifestTemplatePrefix(manifest) {
-	if (manifest.size === 0) return "";
-	const json = escapeHtml(JSON.stringify(Object.fromEntries(manifest)));
-	return `<template ${ACTIONS_ATTR}='${json}'></template>`;
-}
 const SLOT_ATTR = "data-ilha-slot";
-/** Marks a slot host whose child island is mid leave-transition: it has been
-* unmounted (and its slot id stripped) but stays connected so the leave
-* animation can paint. The morph replaces such elements instead of matching
-* or mutating them. */
-const LEAVING_ATTR = "data-ilha-leaving";
 const PROPS_ATTR = "data-ilha-props";
 const CLIENT_REF_ATTR = "data-ilha-client-ref";
 const STATE_ATTR = "data-ilha-state";
-const CSS_ATTR = "data-ilha-css";
-/** Hydration manifest mapping `${type}:${index}` event-sentinel pairs to the
-* action keys that own them. Emitted by hydratable(); lets server-owned
-* islands (whose render fn never ships to the client) reconnect their
-* interactive surface. */
-const ACTIONS_ATTR = "data-ilha-actions";
-function buildScopedStyle(css) {
-	const safeCss = css.replace(/<\/style/gi, "<\\/style");
-	return `<style ${CSS_ATTR}>@scope (:scope) to ([data-ilha]){${safeCss}}</style>`;
-}
-/** Marks SSR action stubs so event registration never capture-invokes them
-* (invoking the real action body during render would run its side effects). */
-const SSR_ACTION_STUB = Symbol.for("ilha.ssrActionStub");
-const captureStack = [];
+function normalizeElseOutput(value) {
+	if (value == null || value === false) return value;
+	return Array.isArray(value) ? value : [value];
+}
+function createEachResult(items, mapFn) {
+	const mapped = items.length === 0 ? [] : items.map(mapFn);
+	const result = mapped;
+	Object.defineProperty(result, "else", {
+		value(fallback) {
+			if (items.length === 0) return normalizeElseOutput(typeof fallback === "function" ? fallback(items) : fallback);
+			return mapped;
+		},
+		enumerable: false
+	});
+	return result;
+}
+function createEachBuilder(items) {
+	return {
+		key(keyFn) {
+			return { as(mapFn) {
+				return createEachResult(items, (item, index) => mapFn(item, index, keyFn(item, index)));
+			} };
+		},
+		as(mapFn) {
+			return createEachResult(items, mapFn);
+		}
+	};
+}
 /**
-* Invoke a forwarding closure once against sentinel arguments so any
-* `action.x(...)` call inside it is RECORDED, not executed. Returns the first
-* recorded call, or undefined when the closure throws or calls no action.
+* Svelte-style `{#each}` helper for mapping collections to rendered output
+* with an optional empty fallback.
+*
+* @example — plain list (empty → [])
+* each(items).as((item) => html`<li>${item.name}</li>`)
 *
-* ponytail: the closure body really executes once per manifest render (SSR
-* and every frame) — only the action call is intercepted. Handlers must be
-* pure "call one action" thunks; side effects before/around the action call
-* run server-side on every frame. Upgrade path: static-scan the closure
-* instead of invoking it.
+* @example — keyed list feeding island.key(), with empty fallback
+* each(items)
+*   .key((item) => item.id)
+*   .as((item, _i, id) => Row.key(id)({ item }))
+*   .else(() => html`<EmptyState />`)
 */
-function captureHandlerActions(handler) {
-	const frame = [];
-	captureStack.push(frame);
-	try {
-		const result = handler({
-			preventDefault: () => {},
-			stopPropagation: () => {},
-			stopImmediatePropagation: () => {},
-			persist: () => {}
-		}, { signal: new AbortController().signal });
-		Promise.resolve(result).catch(() => {});
-	} catch {} finally {
-		captureStack.pop();
-	}
-	return frame[0];
+function each(items) {
+	if (typeof items === "function") throw new TypeError("[ilha] each() expected an array but received a function. Call accessors first (each(state.items())) or pass a snapshot from a reactive render.");
+	return createEachBuilder(Array.isArray(items) ? items : []);
+}
+/** Marks SSR action stubs so event registration can recognize action
+* references without ever invoking them (executing a handler body during
+* render would run its side effects server-side). Symbol.for brands keep
+* this recognizable across duplicate ilha copies and external action
+* implementations (e.g. oxidejs) in the same realm. */
+const SSR_ACTION_STUB = Symbol.for("ilha.ssrActionStub");
+const ACTION_MANIFEST_ID = Symbol.for("ilha.actionManifestId");
+const ACTION_BOUND_ARGS = Symbol.for("ilha.actionBoundArgs");
+/** Serialized size ceiling for `.with()` payloads (JSON chars). */
+const MAX_BOUND_ARGS_CHARS = 8192;
+/** Manifest id for a brand-recognized action reference, else undefined.
+* Anything that isn't a branded action stub is rejected outright — event
+* handlers are never executed during SSR to discover what they call. */
+function actionManifestId(fn) {
+	if (typeof fn !== "function" || !(SSR_ACTION_STUB in fn)) return void 0;
+	return fn[ACTION_MANIFEST_ID];
+}
+/** Bound args recorded by `.with()` on an action reference, else undefined. */
+function actionBoundArgs(fn) {
+	if (typeof fn !== "function" || !(ACTION_BOUND_ARGS in fn)) return void 0;
+	const args = fn[ACTION_BOUND_ARGS];
+	return Array.isArray(args) ? args : void 0;
+}
+/** Attach `.with(...args)` to an action accessor. Returns an explicit,
+* serializable action REFERENCE — never a closure to inspect or probe.
+* Arguments are validated JSON-safe at bind time; the hydration manifest
+* stores `{ actionId, args }` directly and the client RPC path sends them
+* only after a real user event. On the client, calling the bound reference
+* invokes the accessor with the bound payload. */
+/** Keys that must never appear in a bound payload — they become dangerous
+* if an RPC handler or downstream library merges the object into another. */
+const UNSAFE_KEYS = /* @__PURE__ */ new Set([
+	"__proto__",
+	"constructor",
+	"prototype"
+]);
+/** Strict JSON-safety validator: accept, or throw — never transform.
+* Rejects undefined, functions, symbols, bigint, non-finite numbers,
+* Dates/custom prototypes/Map/Set, circular values, and unsafe keys so a
+* bound payload is byte-identical to what the author wrote. */
+function assertJsonSafe(value, seen = /* @__PURE__ */ new WeakSet()) {
+	if (value === null) return;
+	switch (typeof value) {
+		case "string":
+		case "boolean": return;
+		case "number":
+			if (Number.isFinite(value)) return;
+			throw new TypeError("with() rejects non-finite numbers.");
+		case "object": break;
+		default: throw new TypeError(`with() rejects ${typeof value} values.`);
+	}
+	if (seen.has(value)) throw new TypeError("with() rejects circular values.");
+	seen.add(value);
+	if (Array.isArray(value)) {
+		for (const item of value) assertJsonSafe(item, seen);
+		return;
+	}
+	if (Object.getPrototypeOf(value) !== Object.prototype) throw new TypeError("with() accepts plain objects only.");
+	for (const [key, child] of Object.entries(value)) {
+		if (UNSAFE_KEYS.has(key)) throw new TypeError(`with() rejects unsafe key "${key}".`);
+		assertJsonSafe(child, seen);
+	}
+}
+/** Deep-clone an already-validated JSON-safe value. */
+function cloneJsonSafe(value) {
+	return structuredClone(value);
+}
+function attachWith(accessor) {
+	Object.defineProperty(accessor, "with", {
+		enumerable: false,
+		value: (...args) => {
+			for (const arg of args) assertJsonSafe(arg);
+			const serialized = cloneJsonSafe(args);
+			if (JSON.stringify(serialized).length > MAX_BOUND_ARGS_CHARS) throw new RangeError(`with() payload exceeds ${MAX_BOUND_ARGS_CHARS} JSON characters.`);
+			const manifestId = actionManifestId(accessor);
+			const bound = (...runtimeArgs) => {
+				return accessor(serialized.length > 0 ? serialized.length === 1 ? serialized[0] : serialized : runtimeArgs.length === 1 ? runtimeArgs[0] : runtimeArgs);
+			};
+			const brand = bound;
+			brand[SSR_ACTION_STUB] = true;
+			brand[ACTION_MANIFEST_ID] = manifestId;
+			brand[ACTION_BOUND_ARGS] = serialized;
+			return bound;
+		}
+	});
 }
+setServerActionBinder(function bindExternalAction(fn, manifestId) {
+	const action = fn;
+	action[SSR_ACTION_STUB] = true;
+	action[ACTION_MANIFEST_ID] = manifestId;
+	attachWith(action);
+	return action;
+});
 const RENDER_CTX_STACK = Symbol.for("ilha.renderCtxStack");
 function renderCtxStack() {
 	const g = globalThis;
@@ -605,8 +734,8 @@ function emitIslandSlot({ island, props, key }) {
 		try {
 			const manifest = /* @__PURE__ */ new Map();
 			const ssrWithManifest = island[ISLAND_SSR_MANIFEST];
-			const result = ssrWithManifest ? ssrWithManifest(props, manifest) : island(props);
-			const prefix = () => manifestTemplatePrefix(manifest);
+			const result = ssrWithManifest ? ssrWithManifest(props, manifest) : island.toStringAsync(props);
+			const prefix = () => serializeServerManifest(manifest);
 			if (result instanceof Promise) {
 				ctx.pending.set(id, result.then(String).then((html) => prefix() + html));
 				return wrapIslandSlotHtml({
@@ -656,7 +785,7 @@ function resolveSignalSetter(read, value) {
 function markSignalAccessor(fn) {
 	fn[SIGNAL_ACCESSOR] = true;
 	const accessor = fn;
-	accessor.select = (selector) => createSelectAccessor(accessor, selector);
+	accessor.select = ((...args) => createSelectAccessor(accessor, args));
 	return accessor;
 }
 function isSignalAccessor(v) {
@@ -731,22 +860,27 @@ function trackSelectPath(rootState, selector) {
 	selector(track(rootState));
 	return path;
 }
-function createSelectAccessor(root, selector) {
-	const path = trackSelectPath(root(), selector);
-	const selected = selector(root());
-	const resolved = path.length === 0 ? root() : getAtPath(root(), path);
-	if (!Object.is(selected, resolved)) throw new Error("select(): selector must only traverse nested properties or array indexes — derived or transformed values are not supported.");
+function createSelectAccessor(root, input) {
+	const selector = typeof input[0] === "function" ? input[0] : void 0;
+	let path;
+	if (selector) {
+		path = trackSelectPath(root(), selector);
+		const selected = selector(root());
+		const resolved = path.length === 0 ? root() : getAtPath(root(), path);
+		if (!Object.is(selected, resolved)) throw new Error("select(): selector must only traverse nested properties or array indexes — derived or transformed values are not supported.");
+	} else path = input;
+	const read = (from) => selector ? path.length === 0 ? selector(from) : getAtPath(from, path) : getAtPath(from, path);
 	return markSignalAccessor((...args) => {
-		if (args.length === 0) return path.length === 0 ? selector(root()) : getAtPath(root(), path);
+		if (args.length === 0) return read(root());
 		const previousRoot = root();
-		const previousSelected = path.length === 0 ? selector(previousRoot) : getAtPath(previousRoot, path);
+		const previousSelected = read(previousRoot);
 		const value = resolveSignalSetter(() => previousSelected, args[0]);
-		const next = path.length === 0 ? value : setAtPath({
+		const next = path.length === 0 && selector ? value : setAtPath({
 			object: previousRoot,
 			path,
 			value
 		});
-		if (!Object.is(previousRoot, next)) root((() => next));
+		if (!Object.is(previousRoot, next)) root(() => next);
 	});
 }
 function ilhaRaw(value) {
@@ -755,14 +889,37 @@ function ilhaRaw(value) {
 		value
 	};
 }
-function ilhaCss(strings, ...values) {
-	if (typeof strings === "string") return strings;
-	let result = "";
-	for (let i = 0; i < strings.length; i++) {
-		result += strings[i];
-		if (i < values.length) result += String(values[i]);
-	}
-	return result;
+/**
+* Serialize a JSON-safe value into executable `<script>` content safely. `<`
+* is escaped as `\u003C`, so a value can never close the script block or open
+* the `<!--` escape hatch. Use it for script-element data:
+*
+* ```ts
+* html`<script>const d = ${json(payload)};<\/script>`
+* ```
+*
+* Like `raw()`, `json()` is for element *content* only — interpolating it into
+* an attribute is author error. It does not protect against values that are
+* not valid JSON (functions, symbols, undefined, cyclic objects are dropped
+* or throw, matching `JSON.stringify`).
+*/
+function json(value) {
+	return ilhaRaw(serializeScriptJson(value));
+}
+/**
+* Escape text for a `<style>` element body. `<` becomes the CSS hex escape
+* `\3C `, so the value can never close the style block or open the `<!--`
+* escape hatch while surviving CSS parsing:
+*
+* ```ts
+* html`<style>${css(cssSource)}</style>`
+* ```
+*
+* Like `raw()`, `css()` is for element *content* only — interpolating it into
+* an attribute is author error.
+*/
+function css(value) {
+	return ilhaRaw(escapeStyleText(value));
 }
 function interpolateValue(v) {
 	if (v == null || v === true || v === false) return "";
@@ -788,21 +945,31 @@ function interpolateValue(v) {
 const BIND_VALID_KINDS = /* @__PURE__ */ new Set([
 	"value",
 	"checked",
-	"valueAsNumber",
-	"valueAsDate",
 	"files",
 	"open",
 	"group",
 	"this"
 ]);
 const BIND_PREFIX_RE = /\bbind:([a-zA-Z]+)\s*=\s*("|')?$/;
-const EVENT_PREFIX_RE = /(?:^|\s)on([a-z][a-z0-9-]*)(?::([a-z][a-z0-9-]*))?\s*=\s*("|')?$/;
+const EVENT_PREFIX_RE = /(?:^|\s)on([a-zA-Z][a-zA-Z0-9-]*)(?::([a-zA-Z][a-zA-Z0-9-]*))?\s*=\s*("|')?$/;
 const NATIVE_EVENT_MODIFIERS = /* @__PURE__ */ new Set([
 	"abortable",
 	"once",
 	"capture",
 	"passive"
 ]);
+const FULL_VALUE_ATTR_RE = /(?:^|\s)([a-zA-Z_:][a-zA-Z0-9:._-]*)\s*=\s*("|')?$/;
+const UNQUOTED_HAZARD_RE = /[\s=]|`/;
+function resolveTemplateValue(v) {
+	if (isSignalAccessor(v)) return v();
+	if (typeof v === "function") return v();
+	return v;
+}
+function openTagName(source, index) {
+	const open = source.lastIndexOf("<", index);
+	if (open === -1) return "element";
+	return (source.slice(open).match(/^<\s*([a-zA-Z][a-zA-Z0-9:._-]*)/)?.[1] ?? "element").toLowerCase();
+}
 function isEventAttributePosition(source, index) {
 	let open = -1;
 	let quote = null;
@@ -837,14 +1004,6 @@ function findTagCloseIndex(chunk, initialQuote) {
 		quote
 	};
 }
-function formatDateForInput(d) {
-	if (d instanceof Date) {
-		if (isNaN(d.getTime())) return "";
-		const pad = (n) => String(n).padStart(2, "0");
-		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-	}
-	return "";
-}
 function extractElementStaticValue(prefix) {
 	const lastOpen = prefix.lastIndexOf("<");
 	if (lastOpen === -1) return null;
@@ -864,8 +1023,6 @@ function emitBindSSR({ kind, index, accessor, prefixForStaticPeek }) {
 	}
 	switch (kind) {
 		case "value": return [` value="${escapeHtml(v ?? "")}"`, spec];
-		case "valueAsNumber": return [` value="${escapeHtml(v == null ? "" : String(v))}"`, spec];
-		case "valueAsDate": return [` value="${escapeHtml(formatDateForInput(v))}"`, spec];
 		case "checked": return [v ? ` checked` : ``, spec];
 		case "open": return [v ? ` open` : ``, spec];
 		case "files": return [``, spec];
@@ -910,24 +1067,29 @@ function ilhaHtml(strings, ...values) {
 		const value = values[i];
 		const eventMatch = chunk.match(EVENT_PREFIX_RE);
 		const eventMatchStart = eventMatch ? chunk.length - eventMatch[0].length : -1;
+		if (!eventMatch && typeof value === "function") {
+			const ambiguous = chunk.match(/(?:^|\s)on([a-zA-Z][a-zA-Z0-9-]*)(?::[a-zA-Z][a-zA-Z0-9-]*)?\s*=\s*(?:(?:"[^"]*)|(?:'[^']*)|(?:[^\s"'=<>`]+))$/);
+			const start = ambiguous ? chunk.length - ambiguous[0].length : -1;
+			if (ambiguous && isEventAttributePosition(result + chunk, result.length + start)) throw new Error(`[ilha] on${ambiguous[1]} handler must occupy the entire attribute value. Write on${ambiguous[1]}=\${handler}.`);
+		}
 		const eventAttributeFragment = eventMatch !== null && chunk.slice(0, eventMatchStart).trim() === "";
 		if (eventMatch && (eventAttributeFragment || isEventAttributePosition(result + chunk, result.length + eventMatchStart))) {
-			const eventName = eventMatch[1];
-			const rawModifier = eventMatch[2];
-			const modifier = NATIVE_EVENT_MODIFIERS.has(rawModifier) ? rawModifier : void 0;
+			const eventName = eventMatch[1].toLowerCase();
+			const rawModifier = eventMatch[2]?.toLowerCase();
+			const modifier = rawModifier !== void 0 && NATIVE_EVENT_MODIFIERS.has(rawModifier) ? rawModifier : void 0;
 			const openQuote = eventMatch[3] ?? null;
+			const nextChunk = strings[i + 1] ?? "";
+			if (!(openQuote ? nextChunk.startsWith(openQuote) : /^(?:\s|\/?>|$)/.test(nextChunk))) throw new Error(`[ilha] on${eventName} handler must occupy the entire attribute value. Write on${eventName}=\${handler}.`);
 			const cleanPrefix = chunk.slice(0, eventMatchStart).replace(/\s+$/, "");
-			const isActionStub = typeof value === "function" && SSR_ACTION_STUB in value;
-			const capture = ctx?.manifest && typeof value === "function" && !isActionStub ? captureHandlerActions(value) : void 0;
 			result += cleanPrefix;
+			typeof value === "function" && SSR_ACTION_STUB in value;
 			if (ctx && typeof value === "function") {
 				const index = ctx.events.length;
 				if (rawModifier && !modifier) {} else {
 					ctx.events.push({
 						type: eventName,
 						handler: value,
-						modifier,
-						capture
+						modifier
 					});
 					pendingEventSpecs += (pendingEventSpecs ? "," : "") + `${eventName}:${index}`;
 				}
@@ -968,6 +1130,72 @@ function ilhaHtml(strings, ...values) {
 			if (openQuote) stripLeadingQuote = openQuote;
 			continue;
 		}
+		const attrMatch = chunk.match(FULL_VALUE_ATTR_RE);
+		if (attrMatch && isEventAttributePosition(result + chunk, result.length + attrMatch.index)) {
+			const attrName = attrMatch[1];
+			const openQuote = attrMatch[2] ?? null;
+			if (openQuote) stripLeadingQuote = openQuote;
+			const cleanPrefix = chunk.slice(0, attrMatch.index).replace(/\s+$/, "");
+			if (attrName.length > 2 && /^on/i.test(attrName)) {
+				result += cleanPrefix;
+				continue;
+			}
+			if (attrName.toLowerCase() === "srcdoc") {
+				result += cleanPrefix;
+				continue;
+			}
+			if (isIsland(value) || isIslandCall(value)) {
+				stripLeadingQuote = null;
+				result += chunk + interpolateValue(value);
+				continue;
+			}
+			if (isUrlAttributeName(attrName)) {
+				if (isRawHtml(value)) {
+					result += cleanPrefix + ` ${attrName}="${value.value}"`;
+					continue;
+				}
+				const resolved = resolveTemplateValue(value);
+				if (resolved == null || resolved === false) {
+					result += cleanPrefix;
+					continue;
+				}
+				const url = String(resolved);
+				if (!isSafeUrlAttrValue(openTagName(result + chunk, result.length + attrMatch.index), attrName, url)) {
+					result += cleanPrefix;
+					continue;
+				}
+				const quotedUrl = openQuote !== null || UNQUOTED_HAZARD_RE.test(url);
+				result += cleanPrefix + ` ${attrName}=` + (quotedUrl ? `"${escapeHtml(url)}"` : escapeHtml(url));
+				continue;
+			}
+			if (attrName.toLowerCase() === "style") {
+				if (!isRawHtml(value)) {
+					const resolved = resolveTemplateValue(value);
+					if (isPlainObject(resolved)) {
+						result += cleanPrefix + ` style="${escapeHtml(serializeStyle(resolved))}"`;
+						continue;
+					}
+				}
+			}
+			if (isRawHtml(value)) {
+				stripLeadingQuote = null;
+				result += chunk + interpolateValue(value);
+				continue;
+			}
+			const resolved = resolveTemplateValue(value);
+			if (resolved == null || resolved === false) {
+				result += cleanPrefix;
+				continue;
+			}
+			if (resolved === true) {
+				result += cleanPrefix + ` ${attrName}`;
+				continue;
+			}
+			const generic = String(resolved);
+			if (openQuote !== null || UNQUOTED_HAZARD_RE.test(generic)) result += cleanPrefix + ` ${attrName}="${escapeHtml(generic)}"`;
+			else result += cleanPrefix + ` ${attrName}=${escapeHtml(generic)}`;
+			continue;
+		}
 		result += chunk + interpolateValue(value);
 	}
 	if (pendingBindSpecs !== "") result += ` data-ilha-bind="${pendingBindSpecs}"`;
@@ -988,10 +1216,10 @@ const contextRegistry = /* @__PURE__ */ new Map();
 function ilhaContextFn(key, initial) {
 	if (contextRegistry.has(key)) return contextRegistry.get(key);
 	const s = signal(initial);
-	const accessor = (...args) => {
+	const accessor = markSignalAccessor((...args) => {
 		if (args.length === 0) return s();
 		s(resolveSignalSetter(() => s(), args[0]));
-	};
+	});
 	contextRegistry.set(key, accessor);
 	return accessor;
 }
@@ -1007,16 +1235,11 @@ const ilhaContext = Object.assign(ilhaContextFn, {
 });
 /**
 * Create a free-standing reactive signal that lives outside any island.
-* Useful for sharing state across islands without prop drilling, or for
-* binding form inputs to module-level state via the `bind:value=${signal}`
-* template syntax.
-*
-* The returned accessor is a getter when called with no arguments and a
-* setter when called with one. Reading it inside a `.derived()`, `.effect()`,
-* or `.render()` automatically subscribes the surrounding reactive scope —
-* so when the signal changes, dependents re-run as if it were local state.
+* Internal: used by state()'s slot-drift fallback. The public way to create
+* free-standing shared state is `context(key, initial)`.
 */
 function ilhaSignal(initial) {
+	if (currentFrame()?.creating && __DEV__);
 	const s = signal(initial);
 	return markSignalAccessor((...args) => {
 		if (args.length === 0) return s();
@@ -1024,25 +1247,6 @@ function ilhaSignal(initial) {
 	});
 }
 /**
-* Create a free-standing read-only reactive value derived from other signals.
-* The computation is lazy and cached: `fn` re-runs only when a signal it read
-* changed and the computed is read again. Reading it inside a `.derived()`,
-* `.effect()`, `.render()`, or top-level `effect()` subscribes that scope —
-* dependents re-run when the computed's value changes.
-*
-* ```ts
-* const items = ilha.signal([1, 2, 3]);
-* const total = ilha.computed(() => items().reduce((a, b) => a + b, 0));
-* ```
-*/
-function ilhaComputed(fn) {
-	const c = computed(fn);
-	return markSignalAccessor((...args) => {
-		if (args.length > 0) return;
-		return c();
-	});
-}
-/**
 * Run a free-standing reactive effect outside any island. `fn` runs once
 * immediately and again whenever a signal it read changes. It may return a
 * cleanup function, invoked before each re-run and on stop. Signal writes
@@ -1067,7 +1271,7 @@ function ilhaEffect(fn) {
 			cleanup = void 0;
 		}
 	};
-	const stop = effect(() => {
+	const stop = effect$1(() => {
 		runCleanup();
 		startBatch();
 		try {
@@ -1115,6 +1319,74 @@ function batch(fn) {
 		endBatch();
 	}
 }
+/**
+* Keep a standalone signal in sync with persistent storage:
+*
+* 1. On call, reads `key` and writes the stored value into the signal.
+* 2. Subscribes to the signal and writes its value back on every change.
+* 3. Optionally mirrors writes from other tabs (`storage` events).
+*
+* No-op on the server (returns an inert unsubscribe). Call the returned
+* unsubscribe to stop syncing.
+*
+* ```ts
+* const cart = signal([] as string[]);
+* persist(cart, "cart");
+* ```
+*/
+function persist(accessor, key, options = {}) {
+	if (typeof window === "undefined") return () => {};
+	const storage = options.storage ?? window.localStorage;
+	const serialize = options.serialize ?? JSON.stringify;
+	const deserialize = options.deserialize ?? ((raw) => {
+		try {
+			return JSON.parse(raw);
+		} catch {
+			return null;
+		}
+	});
+	const label = `[ilha] persist("${key}")`;
+	const applyRaw = (raw) => {
+		if (raw == null) return;
+		try {
+			const value = deserialize(raw);
+			if (value !== null) {
+				const prevSub = setActiveSub(void 0);
+				try {
+					accessor(() => value);
+				} finally {
+					setActiveSub(prevSub);
+				}
+			}
+		} catch (err) {
+			console.error(`${label}: failed to restore`, err);
+		}
+	};
+	try {
+		applyRaw(storage.getItem(key));
+	} catch (err) {
+		console.error(`${label}: failed to read storage`, err);
+	}
+	const stopEffect = ilhaEffect(() => {
+		try {
+			storage.setItem(key, serialize(accessor()));
+		} catch (err) {
+			console.error(`${label}: failed to write storage`, err);
+		}
+	});
+	let onStorage = null;
+	if (options.crossTab !== false && storage === window.localStorage) {
+		onStorage = (e) => {
+			if (e.key !== key) return;
+			applyRaw(e.newValue);
+		};
+		window.addEventListener("storage", onStorage);
+	}
+	return () => {
+		stopEffect();
+		if (onStorage) window.removeEventListener("storage", onStorage);
+	};
+}
 function createDerivedAccessor(read, write) {
 	const accessor = markSignalAccessor((...args) => {
 		if (args.length > 0) {
@@ -1135,333 +1407,60 @@ function defaultDerivedAccessor() {
 		error: void 0
 	}));
 }
-function buildDerivedAccessors(envelopes) {
-	const accessors = /* @__PURE__ */ new Map();
-	for (const [key, envelope] of Object.entries(envelopes)) accessors.set(key, createDerivedAccessor(() => envelope, (value) => {
-		envelope.loading = false;
-		envelope.value = value;
-		envelope.error = void 0;
-	}));
-	return new Proxy({}, { get(_, key) {
-		if (typeof key !== "string") return void 0;
-		return accessors.get(key) ?? defaultDerivedAccessor();
-	} });
-}
-const ILHA_QUERY = Symbol.for("ilha.store.query");
-const ILHA_QUERY_RUN = Symbol.for("ilha.store.query.run");
-const ILHA_QUERY_PENDING = Symbol.for("ilha.store.query.pending");
-const ILHA_QUERY_STACK = Symbol.for("ilha.store.query.stack");
-function queryCaptureStack() {
-	const g = globalThis;
-	let stack = g[ILHA_QUERY_STACK];
-	if (!stack) {
-		stack = [];
-		g[ILHA_QUERY_STACK] = stack;
-	}
-	return stack;
-}
-function isQueryCall(value) {
-	return value !== null && typeof value === "object" && ILHA_QUERY in value;
-}
-function resolveQueryCall(result, captureSlot) {
-	const pending = globalThis[ILHA_QUERY_PENDING];
-	globalThis[ILHA_QUERY_PENDING] = void 0;
-	return captureSlot.queryCall ?? pending ?? (isQueryCall(result) ? result : void 0);
-}
-function runBrandedQuery(queryCall, abortSignal, env) {
-	const writeEnv = (next) => {
-		if (abortSignal.aborted) return;
-		const prevSub = setActiveSub(void 0);
-		env(next);
-		setActiveSub(prevSub);
-	};
-	const run = queryCall[ILHA_QUERY_RUN];
-	if (typeof run !== "function") {
-		writeEnv({
-			loading: false,
-			value: void 0,
-			error: /* @__PURE__ */ new Error("[@ilha] branded query is missing a callable runner")
-		});
-		return;
-	}
-	try {
-		run.call(queryCall, abortSignal, {
-			onResult: (value) => {
-				writeEnv({
-					loading: false,
-					value,
-					error: void 0
-				});
-			},
-			onError: (err) => {
-				writeEnv({
-					loading: false,
-					value: void 0,
-					error: err
-				});
-			},
-			onFetchStart: () => {
-				const prevSub = setActiveSub(void 0);
-				env({
-					loading: true,
-					value: env().value,
-					error: void 0
-				});
-				setActiveSub(prevSub);
-			}
-		});
-	} catch (err) {
-		writeEnv({
-			loading: false,
-			value: void 0,
-			error: err instanceof Error ? err : new Error(String(err))
+const BIND_SENTINEL_ATTR = "data-ilha-bind";
+const EVENT_SENTINEL_ATTR = "data-ilha-on";
+function parseBindSentinel(value) {
+	const out = [];
+	for (const part of value.split(",")) {
+		const [kind, idx] = part.split(":");
+		if (!kind || !idx) continue;
+		const i = Number(idx);
+		if (!Number.isInteger(i) || i < 0) continue;
+		out.push({
+			kind,
+			index: i
 		});
 	}
+	return out;
 }
-function createDerivedProxy({ entries, state, input, derivedSnapshot }) {
-	const envelopes = /* @__PURE__ */ new Map();
-	for (const entry of entries) {
-		let initialEnvelope;
-		if (derivedSnapshot != null && entry.key in derivedSnapshot) initialEnvelope = { ...derivedSnapshot[entry.key] };
-		else if (entry.fn.constructor.name === "AsyncFunction" || entry.fn.constructor.name === "AsyncGeneratorFunction") initialEnvelope = {
-			loading: true,
-			value: void 0,
-			error: void 0
+function resolveBindOps(el, kind) {
+	const input = el;
+	switch (kind) {
+		case "value": return {
+			event: el.tagName === "SELECT" ? "change" : "input",
+			read: (el) => el.value,
+			write: (el, v) => el.value = v == null ? "" : String(v)
 		};
-		else {
-			const ac = new AbortController();
-			const captureSlot = {};
-			const stack = queryCaptureStack();
-			globalThis[ILHA_QUERY_PENDING] = void 0;
-			stack.push(captureSlot);
-			try {
-				const result = entry.fn({
-					state,
-					input,
-					signal: ac.signal
-				});
-				if (resolveQueryCall(result, captureSlot)) initialEnvelope = {
-					loading: true,
-					value: void 0,
-					error: void 0
-				};
-				else if (result instanceof Promise) {
-					initialEnvelope = {
-						loading: true,
-						value: void 0,
-						error: void 0
-					};
-					result.catch(() => {});
-				} else initialEnvelope = {
-					loading: false,
-					value: result,
-					error: void 0
-				};
-			} catch (err) {
-				globalThis[ILHA_QUERY_PENDING] = void 0;
-				initialEnvelope = {
-					loading: false,
-					value: void 0,
-					error: err instanceof Error ? err : new Error(String(err))
-				};
-			} finally {
-				stack.pop();
-				ac.abort();
-			}
-		}
-		const env = signal(initialEnvelope);
-		envelopes.set(entry.key, env);
-	}
-	const accessors = /* @__PURE__ */ new Map();
-	for (const entry of entries) {
-		const env = envelopes.get(entry.key);
-		accessors.set(entry.key, createDerivedAccessor(() => env(), (value) => {
-			const prevSub = setActiveSub(void 0);
-			env({
-				loading: false,
-				value,
-				error: void 0
-			});
-			setActiveSub(prevSub);
-		}));
-	}
-	const proxy = new Proxy({}, { get(_, key) {
-		if (typeof key !== "string") return void 0;
-		return accessors.get(key) ?? defaultDerivedAccessor();
-	} });
-	const setup = () => {
-		const stops = [];
-		for (const entry of entries) {
-			const env = envelopes.get(entry.key);
-			let ac = new AbortController();
-			let skipFirst = derivedSnapshot != null && entry.key in derivedSnapshot;
-			const stopEffect = effect(() => {
-				ac.abort();
-				ac = new AbortController();
-				const currentAc = ac;
-				let result;
-				const captureSlot = {};
-				const stack = queryCaptureStack();
-				globalThis[ILHA_QUERY_PENDING] = void 0;
-				stack.push(captureSlot);
-				try {
-					result = entry.fn({
-						state,
-						input,
-						signal: currentAc.signal
-					});
-				} catch (err) {
-					globalThis[ILHA_QUERY_PENDING] = void 0;
-					if (skipFirst) {
-						skipFirst = false;
-						return;
-					}
-					const prevSub = setActiveSub(void 0);
-					env({
-						loading: false,
-						value: void 0,
-						error: err instanceof Error ? err : new Error(String(err))
-					});
-					setActiveSub(prevSub);
-					return;
-				} finally {
-					stack.pop();
-				}
-				const queryCall = resolveQueryCall(result, captureSlot);
-				if (skipFirst) {
-					skipFirst = false;
-					if (result instanceof Promise) result.catch(() => {});
-					return;
-				}
-				if (queryCall) {
-					runBrandedQuery(queryCall, currentAc.signal, env);
-					return;
-				}
-				if (!(result instanceof Promise)) {
-					const prevSub = setActiveSub(void 0);
-					env({
-						loading: false,
-						value: result,
-						error: void 0
-					});
-					setActiveSub(prevSub);
-					return;
-				}
-				const prevSub = setActiveSub(void 0);
-				const prevVal = env();
-				env({
-					loading: true,
-					value: prevVal.value,
-					error: void 0
-				});
-				setActiveSub(prevSub);
-				result.then((value) => {
-					if (currentAc.signal.aborted) return;
-					if (isQueryCall(value)) {
-						runBrandedQuery(value, currentAc.signal, env);
-						return;
-					}
-					const latePending = globalThis[ILHA_QUERY_PENDING];
-					globalThis[ILHA_QUERY_PENDING] = void 0;
-					if (latePending) {
-						runBrandedQuery(latePending, currentAc.signal, env);
-						return;
-					}
-					env({
-						loading: false,
-						value,
-						error: void 0
-					});
-				}).catch((err) => {
-					if (currentAc.signal.aborted) return;
-					env({
-						loading: false,
-						value: void 0,
-						error: err instanceof Error ? err : new Error(String(err))
-					});
-				});
-			});
-			stops.push(() => {
-				stopEffect();
-				ac.abort();
-			});
-		}
-		return () => stops.forEach((s) => s());
-	};
-	return {
-		proxy,
-		setup
-	};
-}
-const BIND_SENTINEL_ATTR = "data-ilha-bind";
-const EVENT_SENTINEL_ATTR = "data-ilha-on";
-function parseBindSentinel(value) {
-	const out = [];
-	for (const part of value.split(",")) {
-		const [kind, idx] = part.split(":");
-		if (!kind || !idx) continue;
-		const i = Number(idx);
-		if (!Number.isInteger(i) || i < 0) continue;
-		out.push({
-			kind,
-			index: i
-		});
-	}
-	return out;
-}
-function resolveBindOps(el, kind) {
-	const input = el;
-	switch (kind) {
-		case "value": return {
-			event: el.tagName === "SELECT" ? "change" : "input",
-			read: (el) => el.value,
-			write: (el, v) => el.value = v == null ? "" : String(v)
-		};
-		case "valueAsNumber": return {
-			event: "input",
-			read: (el) => {
-				const n = el.valueAsNumber;
-				return Number.isNaN(n) ? null : n;
-			},
-			write: (el, v) => el.value = v == null || Number.isNaN(v) ? "" : String(v)
-		};
-		case "valueAsDate": return {
-			event: "input",
-			read: (el) => el.valueAsDate,
-			write: (el, v) => {
-				el.value = formatDateForInput(v);
-			}
-		};
-		case "checked": return {
-			event: "change",
-			read: (el) => el.checked,
-			write: (el, v) => el.checked = Boolean(v)
-		};
-		case "files": return {
-			event: "change",
-			read: (el) => el.files,
-			write: () => {}
-		};
-		case "open": return {
-			event: "toggle",
-			read: (el) => el.open,
-			write: (el, v) => el.open = Boolean(v)
-		};
-		case "this": return {
-			event: null,
-			read: () => void 0,
-			write: () => {}
-		};
-		case "group": {
-			const isCheckbox = input.type === "checkbox";
-			return {
-				event: "change",
-				read: (el) => {
-					const i = el;
-					if (isCheckbox) return {
-						__ilhaGroup: true,
-						value: i.value,
-						checked: i.checked
+		case "checked": return {
+			event: "change",
+			read: (el) => el.checked,
+			write: (el, v) => el.checked = Boolean(v)
+		};
+		case "files": return {
+			event: "change",
+			read: (el) => el.files,
+			write: () => {}
+		};
+		case "open": return {
+			event: "toggle",
+			read: (el) => el.open,
+			write: (el, v) => el.open = Boolean(v)
+		};
+		case "this": return {
+			event: null,
+			read: () => void 0,
+			write: () => {}
+		};
+		case "group": {
+			const isCheckbox = input.type === "checkbox";
+			return {
+				event: "change",
+				read: (el) => {
+					const i = el;
+					if (isCheckbox) return {
+						__ilhaGroup: true,
+						value: i.value,
+						checked: i.checked
 					};
 					return i.checked ? i.value : void 0;
 				},
@@ -1520,7 +1519,7 @@ function applyJsxEvents({ host, records, reportError, unmountSignal, onceFired }
 					invocationController?.abort();
 					invocationController = new AbortController();
 				}
-				const signal = invocationController ? anySignal([listenerController.signal, invocationController.signal]) : listenerController.signal;
+				const signal = invocationController ? AbortSignal.any([listenerController.signal, invocationController.signal]) : listenerController.signal;
 				let result;
 				startBatch();
 				try {
@@ -1619,47 +1618,6 @@ function applyTemplateBindings(host, binds, phase = "all") {
 	}
 	return () => cleanups.forEach((c) => c());
 }
-function parseOnArgs(selectorOrCombined) {
-	const atIdx = selectorOrCombined.lastIndexOf("@");
-	const selector = atIdx === -1 ? "" : selectorOrCombined.slice(0, atIdx);
-	const parts = (atIdx === -1 ? selectorOrCombined : selectorOrCombined.slice(atIdx + 1)).split(":");
-	const eventType = parts[0];
-	const modifiers = new Set(parts.slice(1));
-	return {
-		selector,
-		eventType,
-		options: {
-			once: modifiers.has("once"),
-			capture: modifiers.has("capture"),
-			passive: modifiers.has("passive")
-		},
-		abortable: modifiers.has("abortable")
-	};
-}
-/**
-* Combine multiple AbortSignals into one that aborts when any input aborts.
-* Uses native AbortSignal.any when available, falls back to a manual chain
-* otherwise (for older runtimes).
-*/
-function anySignal(signals) {
-	if (typeof AbortSignal.any === "function") return AbortSignal.any(signals);
-	const controller = new AbortController();
-	const cleanups = [];
-	for (const s of signals) {
-		if (s.aborted) {
-			controller.abort(s.reason);
-			cleanups.forEach((c) => c());
-			return controller.signal;
-		}
-		const handler = () => controller.abort(s.reason);
-		s.addEventListener("abort", handler, { once: true });
-		cleanups.push(() => s.removeEventListener("abort", handler));
-	}
-	if (!controller.signal.aborted) controller.signal.addEventListener("abort", () => {
-		cleanups.forEach((c) => c());
-	});
-	return controller.signal;
-}
 const globalErrorHandlers = /* @__PURE__ */ new Set();
 function reportToGlobal(error, source) {
 	if (globalErrorHandlers.size === 0) return false;
@@ -1672,9 +1630,7 @@ function reportToGlobal(error, source) {
 }
 /**
 * Register a global error handler invoked when any island reports an error
-* (from .on, .effect, .onMount, or transitions) and has no local .onError()
-* handler. Returns an unsubscribe function. Islands with their own .onError()
-* are handled locally and do not reach the global sink.
+* and has no local onError() handler. Returns an unsubscribe function.
 */
 function onUncaughtError(fn) {
 	globalErrorHandlers.add(fn);
@@ -1682,1238 +1638,1256 @@ function onUncaughtError(fn) {
 		globalErrorHandlers.delete(fn);
 	};
 }
-var IlhaBuilder = class IlhaBuilder {
-	_cfg;
-	constructor(cfg) {
-		this._cfg = cfg;
-	}
-	input(initialOrSchema) {
-		let schema = null;
-		let defaultInput = null;
-		if (initialOrSchema !== void 0) {
-			if (isStandardSchema(initialOrSchema)) schema = initialOrSchema;
-			else defaultInput = initialOrSchema;
-		}
-		return new IlhaBuilder({
-			schema,
-			defaultInput,
-			states: [],
-			streams: [],
-			deriveds: [],
-			actions: [],
-			ons: [],
-			effects: [],
-			onMounts: [],
-			onErrors: [],
-			transition: null,
-			css: null,
-			as: null
-		});
-	}
-	as(tag) {
-		return new IlhaBuilder({
-			...this._cfg,
-			as: assertValidSlotTagName(tag)
-		});
-	}
-	state(key, init) {
-		const cfg = this._cfg;
-		return new IlhaBuilder({
-			...cfg,
-			states: [...cfg.states, {
-				key,
-				init
-			}]
-		});
-	}
-	stream(key, fn) {
-		const cfg = this._cfg;
-		const states = cfg.states.some((entry) => entry.key === key) ? cfg.states : [...cfg.states, {
-			key,
-			init: void 0
-		}];
-		return new IlhaBuilder({
-			...cfg,
-			states,
-			streams: [...cfg.streams.filter((entry) => entry.key !== key), {
-				key,
-				fn
-			}]
-		});
-	}
-	derived(key, fn) {
-		const cfg = this._cfg;
-		return new IlhaBuilder({
-			...cfg,
-			deriveds: [...cfg.deriveds, {
-				key,
-				fn
-			}]
-		});
+const FRAME_STACK = Symbol.for("ilha.primitiveFrameStack");
+function frameStack() {
+	const g = globalThis;
+	return g[FRAME_STACK] ??= [];
+}
+function currentFrame() {
+	const stack = frameStack();
+	return stack[stack.length - 1];
+}
+function withFrame(frame, fn) {
+	frameStack().push(frame);
+	try {
+		return fn();
+	} finally {
+		frameStack().pop();
 	}
-	action(key, fn) {
-		return new IlhaBuilder({
-			...this._cfg,
-			actions: [...this._cfg.actions, {
-				key,
-				fn
-			}]
-		});
+}
+function freshFrame(options) {
+	return {
+		slots: [],
+		cursor: 0,
+		creating: true,
+		ssr: options?.ssr ?? false,
+		instance: options?.instance ?? null,
+		stateIndex: 0,
+		derivedIndex: 0,
+		actionIndex: 0,
+		pendingDerived: options?.ssr ? [] : null,
+		actionManifest: options?.ssr ? /* @__PURE__ */ new Map() : null
+	};
+}
+const PRIMITIVE_NAMES = {
+	state: "state",
+	derived: "derived",
+	action: "action",
+	effect: "effect",
+	once: "effect.once",
+	error: "onError"
+};
+/** Reserve the next slot for a primitive call. Throws outside an island
+* render; warns in dev on hook count/kind drift during re-renders. */
+function acquireSlot(kind) {
+	const frame = currentFrame();
+	if (!frame) throw new Error(`[ilha] ${PRIMITIVE_NAMES[kind]}() called outside an island render. Primitives are only valid while an island component (or a plain component owned by one) is rendering.`);
+	const index = frame.cursor++;
+	if (frame.creating) return void 0;
+	const existing = frame.slots[index];
+	return existing && existing.kind === kind ? existing : void 0;
+}
+/**
+* Declare island-local reactive state at this call position. The initializer
+* applies only when the instance is created — later renders reuse the same
+* underlying signal, so prop-driven initializers never reset user state.
+*
+* A function argument is treated as a lazy initializer:
+*   const count = state(() => expensiveInitialValue());
+* To store a function VALUE, return it from the updater wrapper on write:
+*   setCallback(() => nextCallback);
+*/
+function state(init) {
+	const frame = currentFrame();
+	const existing = acquireSlot("state");
+	if (existing) return existing.acc;
+	const f = frame;
+	if (!f.creating) return ilhaSignal(void 0);
+	const index = f.stateIndex++;
+	const snap = f.ssr ? void 0 : f.instance?.stateSnapshot?.s?.[index];
+	const initial = snap === void 0 ? typeof init === "function" ? init() : init : snap;
+	const s = signal(initial);
+	const acc = markSignalAccessor((...args) => {
+		if (args.length === 0) return s();
+		const next = resolveSignalSetter(() => s(), args[0]);
+		s(next);
+	});
+	f.slots[f.cursor - 1] = {
+		kind: "state",
+		acc
+	};
+	return acc;
+}
+/** True for async iterables (incl. async generators). */
+function isAsyncIterable(value) {
+	return value !== null && typeof value[Symbol.asyncIterator] === "function";
+}
+/**
+* Declare derived state at this call position: synchronous computations,
+* Promises, or async generators. Reads track their dependencies; async work
+* races latest-run-wins and aborts stale runs through `ctx.signal`.
+*/
+function derived(fn) {
+	const frame = currentFrame();
+	const existing = acquireSlot("derived");
+	const f = frame;
+	if (existing) {
+		const slot = existing;
+		slot.fn = fn;
+		if (f.ssr && !f.creating && !slot.ssrAsync) {
+			const ac = new AbortController();
+			const prevSub = setActiveSub(void 0);
+			try {
+				const result = slot.fn({ signal: ac.signal });
+				if (!(result instanceof Promise) && !isAsyncIterable(result)) slot.env({
+					loading: false,
+					value: result,
+					error: void 0
+				});
+			} catch (err) {
+				slot.env({
+					loading: false,
+					value: void 0,
+					error: err instanceof Error ? err : new Error(String(err))
+				});
+			} finally {
+				setActiveSub(prevSub);
+			}
+		}
+		return slot.acc;
 	}
-	on(selectorOrCombined, handler) {
-		const parsed = parseOnArgs(selectorOrCombined);
-		return new IlhaBuilder({
-			...this._cfg,
-			ons: [...this._cfg.ons, {
-				selector: parsed.selector,
-				event: parsed.eventType,
-				options: parsed.options,
-				abortable: parsed.abortable,
-				handler
-			}]
-		});
+	if (!f.creating) return defaultDerivedAccessor();
+	const index = f.derivedIndex++;
+	const env = signal({
+		loading: false,
+		value: void 0,
+		error: void 0
+	});
+	let fromSnapshot = false;
+	if (!f.ssr) {
+		const snap = f.instance?.stateSnapshot?.d?.[index];
+		if (snap) {
+			env({ ...snap });
+			fromSnapshot = true;
+		}
 	}
-	effect(fn) {
-		return new IlhaBuilder({
-			...this._cfg,
-			effects: [...this._cfg.effects, { fn }]
+	const accessor = createDerivedAccessor(() => env(), (value) => {
+		const prevSub = setActiveSub(void 0);
+		try {
+			env({
+				loading: false,
+				value,
+				error: void 0
+			});
+		} finally {
+			setActiveSub(prevSub);
+		}
+	});
+	const slot = {
+		kind: "derived",
+		env,
+		acc: accessor,
+		fn,
+		ssrAsync: false,
+		fromSnapshot
+	};
+	if (f.ssr) {
+		const ac = new AbortController();
+		const prevSub = setActiveSub(void 0);
+		let result;
+		let threw = false;
+		let syncError;
+		try {
+			result = slot.fn({ signal: ac.signal });
+		} catch (err) {
+			threw = true;
+			syncError = err;
+		} finally {
+			setActiveSub(prevSub);
+		}
+		let pull = null;
+		if (threw) env({
+			loading: false,
+			value: void 0,
+			error: syncError instanceof Error ? syncError : new Error(String(syncError))
 		});
-	}
-	onMount(fn) {
-		return new IlhaBuilder({
-			...this._cfg,
-			onMounts: [...this._cfg.onMounts, { fn }]
+		else if (result instanceof Promise) {
+			env({
+				loading: true,
+				value: void 0,
+				error: void 0
+			});
+			pull = result.then((value) => env({
+				loading: false,
+				value,
+				error: void 0
+			}), (err) => env({
+				loading: false,
+				value: void 0,
+				error: err instanceof Error ? err : new Error(String(err))
+			}));
+			result.catch(() => {});
+		} else if (isAsyncIterable(result)) {
+			env({
+				loading: true,
+				value: void 0,
+				error: void 0
+			});
+			const iterable = result;
+			pull = (async () => {
+				const it = iterable[Symbol.asyncIterator]();
+				try {
+					const first = await it.next();
+					env({
+						loading: false,
+						value: first.done ? void 0 : first.value,
+						error: void 0
+					});
+				} finally {
+					await it.return?.(void 0);
+				}
+			})();
+		} else env({
+			loading: false,
+			value: result,
+			error: void 0
 		});
-	}
-	onError(fn) {
-		return new IlhaBuilder({
-			...this._cfg,
-			onErrors: [...this._cfg.onErrors, { fn }]
+		slot.ssrAsync = pull !== null;
+		if (pull) f.pendingDerived.push({
+			index,
+			promise: pull.catch(() => {})
 		});
 	}
-	transition(opts) {
-		return new IlhaBuilder({
-			...this._cfg,
-			transition: opts
+	f.slots[f.cursor - 1] = slot;
+	return accessor;
+}
+/**
+* Declare a reactive operation at this call position. Use plain functions
+* for ordinary operations; action() adds pending/data/error tracking,
+* concurrent-invocation bookkeeping, and lifecycle cancellation.
+*/
+function action(fn) {
+	const frame = currentFrame();
+	const existing = acquireSlot("action");
+	const f = frame;
+	if (existing) return existing.acc;
+	if (!f.creating) {
+		const noop = (() => {});
+		Object.defineProperties(noop, {
+			pending: { get: () => false },
+			data: { get: () => void 0 },
+			error: { get: () => void 0 }
 		});
-	}
-	css(strings, ...values) {
-		let source;
-		if (typeof strings === "string") source = strings;
-		else {
-			let result = "";
-			for (let i = 0; i < strings.length; i++) {
-				result += strings[i];
-				if (i < values.length) result += String(values[i]);
+		attachWith(noop);
+		return noop;
+	}
+	const manifestId = `a${f.actionIndex++}`;
+	if (f.ssr) {
+		const invoke = (..._callArgs) => {};
+		invoke[SSR_ACTION_STUB] = true;
+		invoke[ACTION_MANIFEST_ID] = manifestId;
+		Object.defineProperties(invoke, {
+			pending: {
+				get: () => false,
+				enumerable: true
+			},
+			data: {
+				get: () => void 0,
+				enumerable: true
+			},
+			error: {
+				get: () => void 0,
+				enumerable: true
 			}
-			source = result;
-		}
-		return new IlhaBuilder({
-			...this._cfg,
-			css: source
 		});
-	}
-	render(fn) {
-		const { schema, defaultInput, states, streams, deriveds, actions, ons, effects, onMounts, onErrors, transition, css: cssSource, as: slotAs } = this._cfg;
-		const stylePrefix = cssSource == null ? "" : buildScopedStyle(cssSource);
-		const configuredSlotTag = slotAs ?? "div";
-		function resolveInput(props) {
-			const merged = {
-				...defaultInput ?? {},
-				...props ?? {}
-			};
-			if (!schema) return merged;
-			return validateSchema(schema, merged);
-		}
-		function renderWithCtx({ render, liveHost, asyncChildren, manifest }) {
-			const ctx = pushRenderCtx(liveHost, asyncChildren, manifest);
-			try {
-				const html = unwrapHtml(render());
-				const slots = ctx.slots;
-				const binds = ctx.binds;
-				const events = ctx.events;
-				if (ctx.pending && ctx.pending.size > 0) {
-					const pending = ctx.pending;
-					return (async () => {
-						return {
-							html: await resolveAsyncChildren(html, pending),
-							slots,
-							binds,
-							events
-						};
-					})();
-				}
-				return {
-					html,
-					slots,
-					binds,
-					events
-				};
-			} finally {
-				popRenderCtx();
-			}
+		f.actionManifest.set(invoke, manifestId);
+		f.slots[f.cursor - 1] = {
+			kind: "action",
+			acc: invoke,
+			fn
+		};
+		const ssrAccessor = invoke;
+		attachWith(ssrAccessor);
+		return ssrAccessor;
+	}
+	const instance = f.instance;
+	const envelope = signal({
+		pending: 0,
+		data: void 0,
+		error: void 0
+	});
+	const readEnvelope = () => untrack(() => envelope());
+	let latestRun = 0;
+	const invoke = (payload) => {
+		if (currentRenderCtx()) return;
+		if (instance.disposed) return;
+		const run = ++latestRun;
+		const runSignal = instance.unmountController.signal;
+		let result;
+		let isAsync = false;
+		startBatch();
+		try {
+			result = slot.fn(payload, { signal: runSignal });
+			isAsync = result != null && typeof result.then === "function";
+			const current = readEnvelope();
+			envelope(isAsync ? {
+				pending: current.pending + 1,
+				data: current.data,
+				error: void 0
+			} : {
+				pending: current.pending,
+				data: result,
+				error: void 0
+			});
+		} catch (error) {
+			const normalized = error instanceof Error ? error : new Error(String(error));
+			envelope({
+				pending: readEnvelope().pending,
+				data: void 0,
+				error: normalized
+			});
+			instance.reportError(normalized, "action");
+			return;
+		} finally {
+			endBatch();
 		}
-		function buildPlainState(input) {
-			const state = {};
-			for (const entry of states) {
-				const value = typeof entry.init === "function" ? entry.init(input) : entry.init;
-				const accessor = markSignalAccessor((...args) => {
-					if (args.length === 0) return value;
+		if (!isAsync) return;
+		Promise.resolve(result).then((data) => {
+			if (instance.disposed || runSignal.aborted || run !== latestRun) return;
+			const value = readEnvelope();
+			envelope({
+				pending: value.pending,
+				data,
+				error: void 0
+			});
+		}).catch((error) => {
+			if (instance.disposed || runSignal.aborted || error?.name === "AbortError") return;
+			const normalized = error instanceof Error ? error : new Error(String(error));
+			if (run === latestRun) {
+				const value = readEnvelope();
+				envelope({
+					pending: value.pending,
+					data: void 0,
+					error: normalized
 				});
-				state[entry.key] = accessor;
 			}
-			return state;
+			instance.reportError(normalized, "action");
+		}).finally(() => {
+			if (instance.disposed) return;
+			const value = readEnvelope();
+			envelope({
+				...value,
+				pending: Math.max(0, value.pending - 1)
+			});
+		});
+	};
+	const slot = {
+		kind: "action",
+		acc: invoke,
+		fn
+	};
+	Object.defineProperties(invoke, {
+		pending: {
+			get: () => envelope().pending > 0,
+			enumerable: true
+		},
+		data: {
+			get: () => envelope().data,
+			enumerable: true
+		},
+		error: {
+			get: () => envelope().error,
+			enumerable: true
 		}
-		function buildSignalState(input, snapshot) {
-			const state = {};
-			for (const entry of states) {
-				const initial = snapshot && entry.key in snapshot ? snapshot[entry.key] : typeof entry.init === "function" ? entry.init(input) : entry.init;
-				const s = signal(initial);
-				const accessor = markSignalAccessor((...args) => {
-					if (args.length === 0) return s();
-					s(resolveSignalSetter(() => s(), args[0]));
-				});
-				state[entry.key] = accessor;
+	});
+	f.slots[f.cursor - 1] = slot;
+	instance.actionIds.set(slot.acc, manifestId);
+	const clientAccessor = invoke;
+	clientAccessor[ACTION_MANIFEST_ID] = manifestId;
+	attachWith(clientAccessor);
+	return clientAccessor;
+}
+/**
+* Reactive side effect. Inside an island render, registers an ordered effect
+* slot that tracks signals read in the body, reruns on change, cleans up
+* before rerun and on unmount, and is client-only. Outside an island render,
+* behaves as the standalone reactive effect and returns a stop function.
+*
+* @returns Inside an island render, `void` (an effect slot is registered and
+* cleaned up automatically). At module scope, a stop function that disposes
+* the effect and runs its final cleanup. The union return type is deliberate:
+* the same call shape cannot be discriminated at the call site.
+*/
+const effect = Object.assign((fn) => {
+	const frame = currentFrame();
+	if (!frame) {
+		let cleanup;
+		let controller = null;
+		const runCleanup = () => {
+			if (typeof cleanup === "function") {
+				try {
+					cleanup();
+				} catch (err) {
+					console.error(err);
+				}
+				cleanup = void 0;
 			}
-			return state;
-		}
-		function buildSsrActions() {
-			const out = {};
-			const lookup = /* @__PURE__ */ new Map();
-			for (const entry of actions) {
-				const invoke = (...callArgs) => {
-					const frame = captureStack[captureStack.length - 1];
-					if (frame) {
-						if (!frame.some((r) => r.k === entry.key)) frame.push({
-							k: entry.key,
-							a: callArgs
-						});
-						return;
-					}
-				};
-				invoke[SSR_ACTION_STUB] = true;
-				Object.defineProperties(invoke, {
-					pending: {
-						get: () => false,
-						enumerable: true
-					},
-					data: {
-						get: () => void 0,
-						enumerable: true
-					},
-					error: {
-						get: () => void 0,
-						enumerable: true
-					}
-				});
-				out[entry.key] = invoke;
-				lookup.set(invoke, entry.key);
+		};
+		const stop = ilhaEffect(() => {
+			runCleanup();
+			if (controller) controller.abort();
+			controller = new AbortController();
+			startBatch();
+			try {
+				cleanup = fn({ signal: controller.signal });
+			} catch (err) {
+				console.error(err);
+			} finally {
+				endBatch();
+			}
+		});
+		return () => {
+			stop();
+			runCleanup();
+			controller?.abort();
+		};
+	}
+	const existing = acquireSlot("effect");
+	if (existing) {
+		existing.fn = fn;
+		return;
+	}
+	if (!frame.creating) return;
+	frame.slots[frame.cursor - 1] = {
+		kind: "effect",
+		fn
+	};
+}, { once(fn) {
+	if (acquireSlot("once")) return;
+	const f = currentFrame();
+	if (!f) throw new Error("[ilha] effect.once() called outside an island render. It registers per-instance setup and is only valid while an island component is rendering.");
+	if (!f.creating) return;
+	f.slots[f.cursor - 1] = {
+		kind: "once",
+		fn
+	};
+} });
+/**
+* Register an error handler slot for this island. Handlers run in
+* declaration order; state, derived values, actions, and props should be
+* accessed through lexical closure rather than the context object.
+*/
+function onError(fn) {
+	if (!currentFrame()) throw new Error("[ilha] onError() called outside an island render. Register it while an island component is rendering.");
+	const existing = acquireSlot("error");
+	if (existing) {
+		existing.fn = fn;
+		return;
+	}
+	const f = currentFrame();
+	if (!f || !f.creating) return;
+	f.slots[f.cursor - 1] = {
+		kind: "error",
+		fn
+	};
+}
+function parseStateSnapshot(raw) {
+	const parsed = safeParseSnapshot(raw, STATE_ATTR);
+	if (parsed === void 0) return void 0;
+	const rec = parsed;
+	if (rec["v"] !== 2) return;
+	const out = { skipOnce: rec["_skipOnMount"] === true };
+	if (Array.isArray(rec["s"])) {
+		stripUnsafeKeys(rec["s"]);
+		out.s = rec["s"];
+	}
+	if (Array.isArray(rec["d"])) {
+		stripUnsafeKeys(rec["d"]);
+		out.d = rec["d"].map((entry) => {
+			const e = entry ?? {};
+			const errorValue = e.error;
+			return {
+				loading: e.loading === true,
+				value: e.value,
+				error: errorValue == null ? void 0 : errorValue instanceof Error ? errorValue : new Error(String(errorValue))
+			};
+		});
+	}
+	return out;
+}
+const ilha = ((...args) => {
+	let schema = null;
+	let component;
+	let options;
+	const first = args[0];
+	const second = args[1];
+	if (isStandardSchema(first)) {
+		schema = first;
+		component = second;
+		options = args[2];
+	} else {
+		component = first;
+		options = second;
+	}
+	if (typeof component !== "function") throw new Error("[ilha] ilha() requires a component function.");
+	const configuredSlotTag = options?.as === void 0 ? "div" : assertValidSlotTagName(options.as);
+	function resolveInput(props) {
+		const merged = { ...props };
+		if (!schema) return merged;
+		return validateSchema(schema, merged);
+	}
+	function renderWithCtx({ render, liveHost, asyncChildren, manifest }) {
+		const ctx = pushRenderCtx(liveHost, asyncChildren, manifest);
+		try {
+			const html = unwrapHtml(render());
+			const slots = ctx.slots;
+			const binds = ctx.binds;
+			const events = ctx.events;
+			if (ctx.pending && ctx.pending.size > 0) {
+				const pending = ctx.pending;
+				return (async () => {
+					return {
+						html: await resolveAsyncChildren(html, pending),
+						slots,
+						binds,
+						events
+					};
+				})();
 			}
 			return {
-				action: out,
-				lookup
+				html,
+				slots,
+				binds,
+				events
 			};
+		} finally {
+			popRenderCtx();
 		}
-		function renderToString(props, sync = false, streamOut, eventsOut, stateOverride, forceAsyncChildren = false) {
-			const input = resolveInput(props);
-			const state = buildSignalState(input, stateOverride);
-			const { action, lookup: actionLookup } = buildSsrActions();
-			const recordEventsManifest = (events) => {
-				if (!eventsOut || events.length === 0) return;
-				events.forEach((record, index) => {
-					if (record.capture) {
-						eventsOut.set(`${record.type}:${index}`, record.capture);
-						return;
-					}
-					const key = actionLookup.get(record.handler);
-					if (key) eventsOut.set(`${record.type}:${index}`, key);
+	}
+	/** Invoke the component inside the given frame + render context. */
+	function runInFrame(frame, props) {
+		return () => withFrame(frame, () => component(props));
+	}
+	function recordEventsManifest(eventsOut, events, frame) {
+		if (!eventsOut || events.length === 0) return;
+		events.forEach((record, index) => {
+			const id = frame.actionManifest?.get(record.handler) ?? actionManifestId(record.handler);
+			if (!id) return;
+			const args = actionBoundArgs(record.handler);
+			eventsOut.set(`${record.type}:${index}`, Array.isArray(args) ? {
+				k: id,
+				a: args
+			} : id);
+		});
+	}
+	function renderToString(props, sync = false, eventsOut, forceAsyncChildren = false) {
+		const input = resolveInput(props);
+		const frame = freshFrame({ ssr: true });
+		const first = forceAsyncChildren ? renderWithCtx({
+			render: runInFrame(frame, input),
+			asyncChildren: true,
+			manifest: eventsOut !== void 0
+		}) : renderWithCtx({
+			render: runInFrame(frame, input),
+			manifest: eventsOut !== void 0
+		});
+		const finish = (firstHtml) => firstHtml.html;
+		const needsAsync = forceAsyncChildren || (frame.pendingDerived?.length ?? 0) > 0;
+		if (first instanceof Promise) return first.then((out) => {
+			recordEventsManifest(eventsOut, out.events, frame);
+			return needsAsync ? awaitPending(out) : out.html;
+		});
+		recordEventsManifest(eventsOut, first.events, frame);
+		if (!needsAsync || sync) {
+			if (sync && (frame.pendingDerived?.length ?? 0) > 0 && __DEV__);
+			return finish(first);
+		}
+		return awaitPending(first);
+		function awaitPending(out) {
+			const pendings = frame.pendingDerived ?? [];
+			if (pendings.length === 0) return Promise.resolve(out.html);
+			return Promise.all(pendings.map((p) => p.promise)).then(() => {
+				frame.creating = false;
+				frame.cursor = 0;
+				const second = forceAsyncChildren ? renderWithCtx({
+					render: runInFrame(frame, input),
+					asyncChildren: true,
+					manifest: eventsOut !== void 0
+				}) : renderWithCtx({
+					render: runInFrame(frame, input),
+					manifest: eventsOut !== void 0
 				});
-			};
-			const pullStreamInitials = async (streamOut) => {
-				for (const entry of streams) {
-					const controller = new AbortController();
-					try {
-						const gen = await entry.fn({
-							input,
-							signal: controller.signal
-						});
-						const first = await gen.next();
-						controller.abort();
-						await gen.return?.(void 0);
-						if (first.done) continue;
-						if (streamOut) streamOut[entry.key] = first.value;
-						const prevSub = setActiveSub(void 0);
-						try {
-							const setter = state[entry.key];
-							setter?.(first.value);
-						} finally {
-							setActiveSub(prevSub);
-						}
-					} catch {}
-				}
-			};
-			const computeDerivedResults = () => deriveds.map((entry) => {
+				const done = (o) => {
+					recordEventsManifest(eventsOut, o.events, frame);
+					return o.html;
+				};
+				return second instanceof Promise ? second.then(done) : done(second);
+			});
+		}
+	}
+	function mountIsland(host, props) {
+		return mountIslandInternal(host, props).unmount;
+	}
+	function mountIslandInternal(host, props) {
+		if (props === void 0) {
+			const rawProps = host.getAttribute(PROPS_ATTR);
+			if (rawProps) {
+				const parsed = safeParseSnapshot(rawProps, PROPS_ATTR);
+				if (parsed !== void 0) props = reviveSlotProps(parsed);
+			}
+		}
+		const inputSignal = signal(resolveInput(props));
+		const derivedPropsVersion = signal(0);
+		const input = new Proxy({}, {
+			get(_t, key) {
+				return inputSignal()[key];
+			},
+			has(_t, key) {
+				return key in inputSignal();
+			},
+			ownKeys() {
 				const prevSub = setActiveSub(void 0);
 				try {
-					return {
-						key: entry.key,
-						result: entry.fn({
-							state,
-							input,
-							signal: new AbortController().signal
-						})
-					};
-				} catch (err) {
-					return {
-						key: entry.key,
-						result: Promise.reject(err)
-					};
+					return Reflect.ownKeys(inputSignal());
 				} finally {
 					setActiveSub(prevSub);
 				}
-			});
-			if (!sync && (streams.length > 0 || forceAsyncChildren)) return pullStreamInitials(streamOut).then(() => renderToStringTail());
-			return renderToStringTail();
-			function renderToStringTail() {
-				const results = computeDerivedResults();
-				if (!(forceAsyncChildren || results.some((r) => r.result instanceof Promise)) || sync) {
-					const envelopes = {};
-					for (const r of results) if (r.result instanceof Promise) envelopes[r.key] = {
-						loading: true,
-						value: void 0,
-						error: void 0
-					};
-					else envelopes[r.key] = {
-						loading: false,
-						value: r.result,
-						error: void 0
-					};
-					const derived = buildDerivedAccessors(envelopes);
-					const prevSub = setActiveSub(void 0);
-					try {
-						const { html, events } = renderWithCtx({
-							render: () => fn({
-								state,
-								derived,
-								action,
-								input
-							}),
-							manifest: eventsOut !== void 0
-						});
-						recordEventsManifest(events);
-						return stylePrefix + html;
-					} finally {
-						setActiveSub(prevSub);
-					}
+			},
+			getOwnPropertyDescriptor(_t, key) {
+				const prevSub = setActiveSub(void 0);
+				try {
+					return Reflect.getOwnPropertyDescriptor(inputSignal(), key);
+				} finally {
+					setActiveSub(prevSub);
 				}
-				return Promise.all(results.map(async (r) => {
-					try {
-						return {
-							key: r.key,
-							envelope: {
-								loading: false,
-								value: await Promise.resolve(r.result),
-								error: void 0
-							}
-						};
-					} catch (err) {
-						return {
-							key: r.key,
-							envelope: {
-								loading: false,
-								value: void 0,
-								error: err instanceof Error ? err : new Error(String(err))
-							}
-						};
-					}
-				})).then(async (resolved) => {
-					const envelopes = {};
-					for (const r of resolved) envelopes[r.key] = r.envelope;
-					const derived = buildDerivedAccessors(envelopes);
-					const prevSub = setActiveSub(void 0);
-					try {
-						const { html, events } = await renderWithCtx({
-							render: () => fn({
-								state,
-								derived,
-								action,
-								input
-							}),
-							asyncChildren: true,
-							manifest: eventsOut !== void 0
-						});
-						recordEventsManifest(events);
-						return stylePrefix + html;
-					} finally {
-						setActiveSub(prevSub);
-					}
+			}
+		});
+		const snapshotRaw = host.getAttribute(STATE_ATTR);
+		const snapshot = snapshotRaw ? parseStateSnapshot(snapshotRaw) : void 0;
+		const hydrated = snapshot != null;
+		const shouldSkipOnce = snapshot?.skipOnce === true;
+		const cleanups = [];
+		const unmountController = new AbortController();
+		cleanups.push(() => unmountController.abort());
+		const errorSlots = [];
+		const reportError = (err, source) => {
+			const error = err instanceof Error ? err : new Error(String(err));
+			if (errorSlots.length === 0) {
+				if (!reportToGlobal(error, source)) console.error(error);
+				return;
+			}
+			for (const slot of errorSlots) try {
+				slot.fn({
+					error,
+					source,
+					host
 				});
+			} catch (handlerErr) {
+				console.error(handlerErr);
 			}
+		};
+		const instance = {
+			host,
+			inputSignal,
+			input,
+			unmountController,
+			cleanups,
+			reportError,
+			actionIds: /* @__PURE__ */ new Map(),
+			stateSnapshot: snapshot ? {
+				s: snapshot.s,
+				d: snapshot.d
+			} : void 0,
+			hydrated,
+			disposed: false,
+			frame: null
+		};
+		cleanups.push(() => {
+			instance.disposed = true;
+		});
+		const frame = freshFrame({
+			ssr: false,
+			instance
+		});
+		instance.frame = frame;
+		const mountedSlots = /* @__PURE__ */ new Map();
+		function teardownMountedSlot(id, entry) {
+			mountedSlots.delete(id);
+			entry.el.remove();
+			entry.unmount();
 		}
-		function mountIsland(host, props) {
-			return mountIslandInternal(host, props).unmount;
+		function slotBelongsToHost(candidate) {
+			let el = candidate.parentElement;
+			while (el && el !== host) {
+				if (el.hasAttribute(SLOT_ATTR) || el.hasAttribute("data-ilha")) return false;
+				el = el.parentElement;
+			}
+			return el === host;
 		}
-		function mountIslandInternal(host, props) {
-			if (props === void 0) {
-				const rawProps = host.getAttribute(PROPS_ATTR);
-				if (rawProps) {
-					const parsed = safeParseSnapshot(rawProps, PROPS_ATTR);
-					if (parsed !== void 0) props = reviveSlotProps(parsed);
-				}
+		function buildSlotIndex() {
+			const index = /* @__PURE__ */ new Map();
+			for (const candidate of host.querySelectorAll(`[${SLOT_ATTR}]`)) {
+				const id = candidate.getAttribute(SLOT_ATTR);
+				if (id === null || index.has(id)) continue;
+				if (slotBelongsToHost(candidate)) index.set(id, candidate);
 			}
-			const inputSignal = signal(resolveInput(props));
-			const input = new Proxy({}, {
-				get(_t, key) {
-					return inputSignal()[key];
-				},
-				has(_t, key) {
-					return key in inputSignal();
-				},
-				ownKeys() {
-					const prevSub = setActiveSub(void 0);
-					try {
-						return Reflect.ownKeys(inputSignal());
-					} finally {
-						setActiveSub(prevSub);
-					}
-				},
-				getOwnPropertyDescriptor(_t, key) {
-					const prevSub = setActiveSub(void 0);
-					try {
-						return Reflect.getOwnPropertyDescriptor(inputSignal(), key);
-					} finally {
-						setActiveSub(prevSub);
-					}
-				}
-			});
-			let snapshotRaw;
-			const rawState = host.getAttribute(STATE_ATTR);
-			if (rawState) {
-				const parsed = safeParseSnapshot(rawState, STATE_ATTR);
-				if (parsed !== void 0) snapshotRaw = parsed;
+			return index;
+		}
+		function pushUpdatedProps(nextSlots) {
+			for (const [id, entry] of mountedSlots) {
+				const next = nextSlots.get(id);
+				if (next) entry.updateProps(next.props);
 			}
-			const stateSnapshot = snapshotRaw ? Object.fromEntries(Object.entries(snapshotRaw).filter(([k]) => k !== "_derived" && k !== "_skipOnMount" && k !== "_streams")) : void 0;
-			const derivedSnapshotRaw = snapshotRaw?._derived;
-			let derivedSnapshot;
-			if (derivedSnapshotRaw) {
-				derivedSnapshot = {};
-				for (const [k, v] of Object.entries(derivedSnapshotRaw)) if (v.error && !(v.error instanceof Error)) derivedSnapshot[k] = {
-					...v,
-					error: new Error(String(v.error))
-				};
-				else derivedSnapshot[k] = v;
+		}
+		function mountSlots(slotMap) {
+			for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) teardownMountedSlot(id, entry);
+			for (const [id, entry] of mountedSlots) {
+				const next = slotMap.get(id);
+				if (next && next.island !== entry.island) teardownMountedSlot(id, entry);
 			}
-			const hydrated = snapshotRaw != null;
-			const snapshotHasIslandState = stateSnapshot != null && Object.keys(stateSnapshot).length > 0;
-			const shouldSkipOnMount = hydrated && snapshotRaw?.["_skipOnMount"] === true && snapshotHasIslandState;
-			const state = buildSignalState(input, stateSnapshot);
-			const cleanups = [];
-			const unmountController = new AbortController();
-			cleanups.push(() => unmountController.abort());
-			const { proxy: derived, setup: setupDerived } = createDerivedProxy({
-				entries: deriveds,
-				state,
-				input,
-				derivedSnapshot
-			});
-			let stopDerived = () => {};
-			let action = {};
-			function reportError(err, source) {
-				const error = err instanceof Error ? err : new Error(String(err));
-				if (onErrors.length === 0) {
-					if (!reportToGlobal(error, source)) console.error(error);
-					return;
-				}
-				for (const entry of onErrors) try {
-					entry.fn({
-						error,
-						source,
-						state,
-						derived,
-						action,
-						input,
-						host
-					});
-				} catch (handlerErr) {
-					console.error(handlerErr);
+			let slotIndex = null;
+			for (const [id, { island: childIsland, props: childProps }] of slotMap) {
+				const existing = mountedSlots.get(id);
+				if (existing) {
+					existing.updateProps(childProps);
+					continue;
 				}
-			}
-			const actionEntries = actions;
-			const actionObject = {};
-			let disposed = false;
-			cleanups.push(() => {
-				disposed = true;
-			});
-			for (const entry of actionEntries) {
-				const envelope = signal({
-					pending: 0,
-					data: void 0,
-					error: void 0
-				});
-				const readEnvelope = () => untrack(() => envelope());
-				let latestRun = 0;
-				const invoke = (props) => {
-					if (currentRenderCtx()) return;
-					if (disposed) return;
-					const run = ++latestRun;
-					const runSignal = unmountController.signal;
-					const ctx = {
-						state,
-						derived,
-						input,
-						host,
-						signal: runSignal
-					};
-					let result;
-					let isAsync = false;
-					startBatch();
-					try {
-						result = entry.fn(props, ctx);
-						isAsync = result != null && typeof result.then === "function";
-						const current = readEnvelope();
-						envelope(isAsync ? {
-							pending: current.pending + 1,
-							data: current.data,
-							error: void 0
-						} : {
-							pending: current.pending,
-							data: result,
-							error: void 0
-						});
-					} catch (error) {
-						const normalized = error instanceof Error ? error : new Error(String(error));
-						envelope({
-							pending: readEnvelope().pending,
-							data: void 0,
-							error: normalized
-						});
-						reportError(normalized, "action");
-						return;
-					} finally {
-						endBatch();
-					}
-					if (!isAsync) return;
-					Promise.resolve(result).then((data) => {
-						if (disposed || runSignal.aborted || run !== latestRun) return;
-						const value = readEnvelope();
-						envelope({
-							pending: value.pending,
-							data,
-							error: void 0
-						});
-					}).catch((error) => {
-						if (disposed || runSignal.aborted || error?.name === "AbortError") return;
-						const normalized = error instanceof Error ? error : new Error(String(error));
-						if (run === latestRun) {
-							const value = readEnvelope();
-							envelope({
-								pending: value.pending,
-								data: void 0,
-								error: normalized
-							});
-						}
-						reportError(normalized, "action");
-					}).finally(() => {
-						if (disposed) return;
-						const value = readEnvelope();
-						envelope({
-							...value,
-							pending: Math.max(0, value.pending - 1)
-						});
-					});
-				};
-				Object.defineProperties(invoke, {
-					pending: {
-						get: () => envelope().pending > 0,
-						enumerable: true
-					},
-					data: {
-						get: () => envelope().data,
-						enumerable: true
-					},
-					error: {
-						get: () => envelope().error,
-						enumerable: true
+				if (slotIndex === null) slotIndex = buildSlotIndex();
+				const slotEl = slotIndex.get(id) ?? null;
+				if (!slotEl) continue;
+				let slotProps = childProps;
+				if (slotProps === void 0) {
+					const rawProps = slotEl.getAttribute(PROPS_ATTR) ?? slotEl.getAttribute("data-props");
+					if (rawProps) {
+						const parsed = safeParseSnapshot(rawProps, `props on [${SLOT_ATTR}="${id}"]`);
+						if (parsed !== void 0) slotProps = reviveSlotProps(parsed);
 					}
-				});
-				actionObject[entry.key] = invoke;
-			}
-			action = actionObject;
-			if (transition?.enter) try {
-				const result = transition.enter(host);
-				if (result instanceof Promise) result.catch((err) => reportError(err, "transition"));
-			} catch (err) {
-				reportError(err, "transition");
-			}
-			const mountedSlots = /* @__PURE__ */ new Map();
-			const leavingSlots = /* @__PURE__ */ new Map();
-			function teardownMountedSlot(id, entry) {
-				mountedSlots.delete(id);
-				const token = Symbol();
-				const result = entry.unmount();
-				const remove = (stub) => {
-					const leaving = leavingSlots.get(id);
-					if (!leaving || leaving.token !== token) return;
-					leaving.el.remove();
-					stub?.remove();
-					leavingSlots.delete(id);
-				};
-				if (result instanceof Promise) {
-					entry.el.removeAttribute(SLOT_ATTR);
-					entry.el.setAttribute(LEAVING_ATTR, "");
-					leavingSlots.set(id, {
-						el: entry.el,
-						token
-					});
-					return result.finally(() => remove());
-				}
-				entry.el.remove();
-			}
-			function slotBelongsToHost(candidate) {
-				let el = candidate.parentElement;
-				while (el && el !== host) {
-					if (el.hasAttribute(SLOT_ATTR) || el.hasAttribute("data-ilha")) return false;
-					el = el.parentElement;
-				}
-				return el === host;
-			}
-			function buildSlotIndex() {
-				const leavingEls = new Set([...leavingSlots.values()].map((l) => l.el));
-				const index = /* @__PURE__ */ new Map();
-				for (const candidate of host.querySelectorAll(`[${SLOT_ATTR}]`)) {
-					if (leavingEls.has(candidate)) continue;
-					const id = candidate.getAttribute(SLOT_ATTR);
-					if (id === null || index.has(id)) continue;
-					if (slotBelongsToHost(candidate)) index.set(id, candidate);
 				}
-				return index;
-			}
-			/** Push live props from a fresh slot map into already-mounted children. */
-			function pushUpdatedProps(nextSlots) {
-				for (const [id, entry] of mountedSlots) {
-					const next = nextSlots.get(id);
-					if (next) entry.updateProps(next.props);
+				const prevSub = setActiveSub(void 0);
+				let handle;
+				try {
+					const internal = childIsland[ISLAND_MOUNT_INTERNAL];
+					handle = internal ? internal(slotEl, slotProps) : {
+						unmount: childIsland.mount(slotEl, slotProps),
+						updateProps: () => {}
+					};
+				} finally {
+					setActiveSub(prevSub);
 				}
+				mountedSlots.set(id, {
+					el: slotEl,
+					island: childIsland,
+					...handle
+				});
 			}
-			function mountSlots(slotMap) {
-				for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) teardownMountedSlot(id, entry);
-				for (const [id, entry] of mountedSlots) {
-					const next = slotMap.get(id);
-					if (next && next.island !== entry.island) teardownMountedSlot(id, entry);
-				}
-				let slotIndex = null;
-				for (const [id, { island: childIsland, props }] of slotMap) {
-					const existing = mountedSlots.get(id);
-					if (existing) {
-						existing.updateProps(props);
-						continue;
-					}
-					if (slotIndex === null) slotIndex = buildSlotIndex();
-					const slotEl = slotIndex.get(id) ?? null;
-					if (!slotEl) continue;
-					let slotProps = props;
-					if (slotProps === void 0) {
-						const rawProps = slotEl.getAttribute(PROPS_ATTR) ?? slotEl.getAttribute("data-props");
-						if (rawProps) {
-							const parsed = safeParseSnapshot(rawProps, `props on [${SLOT_ATTR}="${id}"]`);
-							if (parsed !== void 0) slotProps = reviveSlotProps(parsed);
-						}
-					}
-					const prevSub = setActiveSub(void 0);
-					let handle;
-					try {
-						const internal = childIsland[ISLAND_MOUNT_INTERNAL];
-						handle = internal ? internal(slotEl, slotProps) : {
-							unmount: childIsland.mount(slotEl, slotProps),
-							updateProps: () => {}
-						};
-					} finally {
-						setActiveSub(prevSub);
+		}
+		const nativeOnceFired = /* @__PURE__ */ new WeakMap();
+		let stopJsxEvents = () => {};
+		let stopBindings = () => {};
+		/** Register derived scopes before the render effect so source updates
+		* settle derived envelopes before a render can consume them. */
+		function startDerivedScopes() {
+			for (const slot of frame.slots) if (slot.kind === "derived") startDerivedScope(slot);
+		}
+		/** Register side-effecting scopes after the render effect so prop-change
+		* renders refresh their closures before those scopes execute. */
+		function startEffectScopes() {
+			for (const slot of frame.slots) if (slot.kind === "effect") startEffectScope(slot);
+			else if (slot.kind === "once") startOnceScope(slot);
+			else if (slot.kind === "error") errorSlots.push(slot);
+		}
+		function startDerivedScope(slot) {
+			let ac = new AbortController();
+			let skipFirst = slot.fromSnapshot;
+			const stopScope = effect$1(() => {
+				ac.abort();
+				ac = new AbortController();
+				const currentAc = ac;
+				derivedPropsVersion();
+				let result;
+				try {
+					result = slot.fn({ signal: currentAc.signal });
+				} catch (err) {
+					if (skipFirst) {
+						skipFirst = false;
+						return;
 					}
-					mountedSlots.set(id, {
-						el: slotEl,
-						island: childIsland,
-						...handle
+					writeEnvelope(currentAc, {
+						loading: false,
+						value: void 0,
+						error: err instanceof Error ? err : new Error(String(err))
 					});
+					return;
 				}
-			}
-			const listeners = [];
-			const firedOnce = /* @__PURE__ */ new Set();
-			const invocationControllers = /* @__PURE__ */ new WeakMap();
-			function attachListeners() {
-				for (const entry of ons) {
-					if (entry.options.once && firedOnce.has(entry)) continue;
-					let targets;
-					try {
-						targets = entry.selector === "" ? [host] : Array.from(host.querySelectorAll(entry.selector)).filter((element) => templateElementBelongsToHost(host, element));
-					} catch {
-						continue;
-					}
-					targets.forEach((listenerTarget) => {
-						const listener = (event) => {
-							if (entry.options.once) {
-								firedOnce.add(entry);
-								for (const l of listeners.filter((l) => l.entry === entry)) l.target.removeEventListener(l.type, l.fn, l.options);
-								listeners.splice(0, listeners.length, ...listeners.filter((l) => l.entry !== entry));
-							}
-							const eventTarget = event.target instanceof Element ? event.target : listenerTarget;
-							const handlerTarget = entry.selector === "" ? eventTarget : listenerTarget;
-							let handlerSignal;
-							if (entry.abortable) {
-								let entryMap = invocationControllers.get(entry);
-								if (!entryMap) {
-									entryMap = /* @__PURE__ */ new WeakMap();
-									invocationControllers.set(entry, entryMap);
-								}
-								const prev = entryMap.get(listenerTarget);
-								if (prev) prev.abort();
-								const invocationController = new AbortController();
-								entryMap.set(listenerTarget, invocationController);
-								handlerSignal = anySignal([unmountController.signal, invocationController.signal]);
-							} else handlerSignal = unmountController.signal;
-							let result;
-							startBatch();
-							try {
-								result = entry.handler({
-									state,
-									derived,
-									action,
-									input,
-									host,
-									target: handlerTarget,
-									event,
-									signal: handlerSignal
-								});
-							} catch (err) {
-								reportError(err, "on");
-								endBatch();
-								return;
-							}
-							endBatch();
-							if (result instanceof Promise) result.catch((err) => {
-								if (err && err.name === "AbortError") return;
-								reportError(err, "on");
-							});
-						};
-						const opts = {
-							...entry.options,
-							once: false
-						};
-						listenerTarget.addEventListener(entry.event, listener, opts);
-						listeners.push({
-							target: listenerTarget,
-							type: entry.event,
-							fn: listener,
-							options: opts,
-							entry
-						});
-					});
+				if (skipFirst) {
+					skipFirst = false;
+					if (result instanceof Promise) result.catch(() => {});
+					return;
 				}
-			}
-			function detachListeners() {
-				for (const l of listeners) l.target.removeEventListener(l.type, l.fn, l.options);
-				listeners.length = 0;
-			}
-			function invokeOnMounts() {
-				for (const entry of onMounts) {
-					const prevSub = setActiveSub(void 0);
-					let userCleanup;
-					try {
-						userCleanup = entry.fn({
-							state,
-							derived,
-							action,
-							input,
-							host,
-							hydrated,
-							signal: unmountController.signal
+				if (!(result instanceof Promise)) {
+					if (isAsyncIterable(result)) {
+						const iterable = result;
+						writeEnvelope(currentAc, {
+							loading: true,
+							value: readEnv().value,
+							error: void 0
 						});
-					} catch (err) {
-						reportError(err, "mount");
-					} finally {
-						setActiveSub(prevSub);
-					}
-					if (userCleanup) {
-						const teardown = userCleanup;
-						cleanups.push(() => {
+						(async () => {
 							try {
-								teardown();
+								for await (const value of iterable) if (writeEnvelope(currentAc, {
+									loading: false,
+									value,
+									error: void 0
+								})) break;
 							} catch (err) {
-								reportError(err, "mount");
+								writeEnvelope(currentAc, {
+									loading: false,
+									value: void 0,
+									error: err instanceof Error ? err : new Error(String(err))
+								});
 							}
-						});
+						})();
+						return;
 					}
+					writeEnvelope(currentAc, {
+						loading: false,
+						value: result,
+						error: void 0
+					});
+					return;
 				}
-			}
-			const preserveSSRDom = hydrated && host.childNodes.length > 0;
-			if (hydrated && onMounts.length > 0 && !shouldSkipOnMount) invokeOnMounts();
-			const nativeOnceFired = /* @__PURE__ */ new WeakMap();
-			const initial = renderWithCtx({
-				render: () => fn({
-					state,
-					derived,
-					action,
-					input
-				}),
-				liveHost: preserveSSRDom ? host : void 0
+				writeEnvelope(currentAc, {
+					loading: true,
+					value: readEnv().value,
+					error: void 0
+				});
+				result.then((value) => {
+					writeEnvelope(currentAc, {
+						loading: false,
+						value,
+						error: void 0
+					});
+				}).catch((err) => {
+					writeEnvelope(currentAc, {
+						loading: false,
+						value: void 0,
+						error: err instanceof Error ? err : new Error(String(err))
+					});
+				});
 			});
-			if (!preserveSSRDom) host.innerHTML = stylePrefix + initial.html;
-			const stopInitialBindingReflection = applyTemplateBindings(host, initial.binds, "reflect");
-			let stopBindings = stopInitialBindingReflection;
-			cleanups.push(() => stopBindings());
-			let stopJsxEvents = applyJsxEvents({
-				host,
-				records: initial.events,
-				reportError: (error) => reportError(error, "on"),
-				unmountSignal: unmountController.signal,
-				onceFired: nativeOnceFired
+			cleanups.push(() => {
+				stopScope();
+				ac.abort();
 			});
-			cleanups.push(() => stopJsxEvents());
-			mountSlots(initial.slots);
-			cleanups.push(() => mountedSlots.forEach((entry) => entry.unmount()));
-			attachListeners();
-			if (!hydrated && onMounts.length > 0) invokeOnMounts();
-			const stopInitialBindingListeners = applyTemplateBindings(host, initial.binds, "listen");
-			stopBindings = () => {
-				stopInitialBindingListeners();
-				stopInitialBindingReflection();
-			};
-			for (const entry of effects) {
-				let userCleanup;
-				let runController = null;
-				const stopEffect = effect(() => {
-					if (userCleanup) {
-						try {
-							userCleanup();
-						} catch (err) {
-							reportError(err, "effect");
-						}
-						userCleanup = void 0;
-					}
-					if (runController) runController.abort();
-					runController = new AbortController();
-					const runSignal = anySignal([unmountController.signal, runController.signal]);
-					startBatch();
+			function readEnv() {
+				const prevSub = setActiveSub(void 0);
+				try {
+					return slot.env();
+				} finally {
+					setActiveSub(prevSub);
+				}
+			}
+			function writeEnvelope(ac, patch) {
+				if (ac.signal.aborted) return true;
+				const prevSub = setActiveSub(void 0);
+				try {
+					slot.env(patch);
+				} finally {
+					setActiveSub(prevSub);
+				}
+				return false;
+			}
+		}
+		function startEffectScope(slot) {
+			let userCleanup;
+			let runController = null;
+			const stopScope = effect$1(() => {
+				if (userCleanup) {
 					try {
-						userCleanup = entry.fn({
-							state,
-							derived,
-							action,
-							input,
-							host,
-							signal: runSignal
-						});
-					} catch (err) {
-						reportError(err, "effect");
-					} finally {
-						endBatch();
-					}
-				});
-				cleanups.push(() => {
-					stopEffect();
-					if (userCleanup) try {
 						userCleanup();
 					} catch (err) {
 						reportError(err, "effect");
 					}
-					if (runController) runController.abort();
+					userCleanup = void 0;
+				}
+				if (runController) runController.abort();
+				runController = new AbortController();
+				const runSignal = AbortSignal.any([unmountController.signal, runController.signal]);
+				inputSignal();
+				startBatch();
+				try {
+					userCleanup = slot.fn({ signal: runSignal });
+				} catch (err) {
+					reportError(err, "effect");
+				} finally {
+					endBatch();
+				}
+			});
+			cleanups.push(() => {
+				stopScope();
+				if (userCleanup) try {
+					userCleanup();
+				} catch (err) {
+					reportError(err, "effect");
+				}
+				if (runController) runController.abort();
+			});
+		}
+		function startOnceScope(slot) {
+			if (shouldSkipOnce) return;
+			const prevSub = setActiveSub(void 0);
+			let userCleanup;
+			try {
+				userCleanup = slot.fn({
+					host,
+					hydrated,
+					signal: unmountController.signal
 				});
+			} catch (err) {
+				reportError(err, "once");
+			} finally {
+				setActiveSub(prevSub);
 			}
-			stopDerived = setupDerived();
-			cleanups.push(stopDerived);
-			for (const entry of streams) {
-				let streamAborted = false;
-				const streamController = new AbortController();
-				const runStream = async () => {
+			if (userCleanup) {
+				const teardown = userCleanup;
+				cleanups.push(() => {
 					try {
-						const gen = await entry.fn({
-							input,
-							signal: streamController.signal
-						});
-						while (!streamAborted && !streamController.signal.aborted) {
-							const { done, value } = await gen.next();
-							if (streamAborted || streamController.signal.aborted || done) break;
-							const prevSub = setActiveSub(void 0);
-							try {
-								const setter = state[entry.key];
-								setter?.(value);
-							} finally {
-								setActiveSub(prevSub);
-							}
-						}
+						teardown();
 					} catch (err) {
-						if (!streamAborted && !streamController.signal.aborted && err?.name !== "AbortError") reportError(err, "stream");
+						reportError(err, "once");
 					}
-				};
-				runStream();
-				cleanups.push(() => {
-					streamAborted = true;
-					streamController.abort();
 				});
 			}
-			let initialized = false;
-			const initialRenderedHtml = initial.html;
-			let lastRendered = null;
-			let renderEpoch = 0;
-			const stopRender = effect(() => {
-				const epoch = ++renderEpoch;
-				const { html: rendered, slots: newSlotMap, binds: newBinds, events: newEvents } = renderWithCtx({
-					render: () => fn({
-						state,
-						derived,
-						action,
-						input
-					}),
-					liveHost: host
-				});
-				stopJsxEvents();
-				stopJsxEvents = applyJsxEvents({
-					host,
-					records: newEvents,
-					reportError: (error) => reportError(error, "on"),
-					unmountSignal: unmountController.signal,
-					onceFired: nativeOnceFired
-				});
-				const html = stylePrefix + rendered;
-				if (!initialized) {
-					initialized = true;
-					if (preserveSSRDom) {
-						pushUpdatedProps(newSlotMap);
-						if (rendered === initialRenderedHtml) {
-							lastRendered = rendered;
-							return;
-						}
-					}
+		}
+		const preserveSSRDom = hydrated && host.childNodes.length > 0;
+		const initial = renderWithCtx({
+			render: runInFrame(frame, input),
+			liveHost: preserveSSRDom ? host : void 0
+		});
+		if (!preserveSSRDom) host.innerHTML = initial.html;
+		const stopInitialBindingReflection = applyTemplateBindings(host, initial.binds, "reflect");
+		let stopInitialBindingListeners = null;
+		stopBindings = stopInitialBindingReflection;
+		cleanups.push(() => stopBindings());
+		stopJsxEvents = applyJsxEvents({
+			host,
+			records: initial.events,
+			reportError: (error) => reportError(error, "event"),
+			unmountSignal: unmountController.signal,
+			onceFired: nativeOnceFired
+		});
+		cleanups.push(() => stopJsxEvents());
+		mountSlots(initial.slots);
+		cleanups.push(() => mountedSlots.forEach((entry) => entry.unmount()));
+		stopInitialBindingListeners = applyTemplateBindings(host, initial.binds, "listen");
+		stopBindings = () => {
+			stopInitialBindingListeners();
+			stopInitialBindingReflection();
+		};
+		let initialized = false;
+		const initialRenderedHtml = initial.html;
+		let lastRendered = null;
+		let renderEpoch = 0;
+		const renderReactive = () => {
+			const epoch = ++renderEpoch;
+			frame.creating = false;
+			frame.cursor = 0;
+			const { html: rendered, slots: newSlotMap, binds: newBinds, events: newEvents } = renderWithCtx({
+				render: runInFrame(frame, input),
+				liveHost: host
+			});
+			stopJsxEvents();
+			stopJsxEvents = applyJsxEvents({
+				host,
+				records: newEvents,
+				reportError: (error) => reportError(error, "event"),
+				unmountSignal: unmountController.signal,
+				onceFired: nativeOnceFired
+			});
+			if (!initialized) {
+				initialized = true;
+				if (preserveSSRDom) {
+					pushUpdatedProps(newSlotMap);
 					if (rendered === initialRenderedHtml) {
 						lastRendered = rendered;
 						return;
 					}
-					if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount({
-						initialHtml: initialRenderedHtml,
-						renderedHtml: rendered,
-						slotIds: newSlotMap.keys()
-					})) {
-						pushUpdatedProps(newSlotMap);
-						return;
-					}
 				}
-				if (rendered === lastRendered && mountedSlots.size === newSlotMap.size && [...newSlotMap].every(([id, next]) => mountedSlots.get(id)?.island === next.island)) {
-					pushUpdatedProps(newSlotMap);
+				if (rendered === initialRenderedHtml) {
+					lastRendered = rendered;
 					return;
 				}
-				detachListeners();
-				stopBindings();
-				stopJsxEvents();
-				const prevMountedCount = mountedSlots.size;
-				const leavingPromises = [];
-				for (const [id, entry] of mountedSlots) if (!newSlotMap.has(id)) {
-					const r = teardownMountedSlot(id, entry);
-					if (r instanceof Promise) leavingPromises.push(r);
-				}
-				for (const [id, entry] of mountedSlots) {
-					const next = newSlotMap.get(id);
-					if (next && next.island !== entry.island) {
-						const r = teardownMountedSlot(id, entry);
-						if (r instanceof Promise) leavingPromises.push(r);
-					}
+				if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount({
+					initialHtml: initialRenderedHtml,
+					renderedHtml: rendered,
+					slotIds: newSlotMap.keys()
+				})) {
+					pushUpdatedProps(newSlotMap);
+					return;
 				}
-				const applyMorph = () => {
-					if (epoch !== renderEpoch) return;
-					if (newSlotMap.size < prevMountedCount) {
-						let divergeFrom = Infinity;
-						for (const [id, entry] of mountedSlots) {
-							if (!id.startsWith("p:")) continue;
-							const next = newSlotMap.get(id);
-							if (!next) continue;
-							const index = Number(id.slice(2));
-							if (Number.isNaN(index) || index >= divergeFrom) continue;
-							if (serializeSlotProps(next.props) !== (entry.el.getAttribute(PROPS_ATTR) ?? "")) divergeFrom = index;
-						}
-						for (const [id, entry] of mountedSlots) {
-							if (!newSlotMap.has(id)) continue;
-							if (!entry.el.isConnected) continue;
-							if (id.startsWith("p:") && Number(id.slice(2)) >= divergeFrom) teardownMountedSlot(id, entry);
-						}
+			}
+			if (rendered === lastRendered && mountedSlots.size === newSlotMap.size && [...newSlotMap].every(([id, next]) => mountedSlots.get(id)?.island === next.island)) {
+				pushUpdatedProps(newSlotMap);
+				return;
+			}
+			stopBindings();
+			stopJsxEvents();
+			const prevMountedCount = mountedSlots.size;
+			for (const [id, entry] of mountedSlots) if (!newSlotMap.has(id)) teardownMountedSlot(id, entry);
+			for (const [id, entry] of mountedSlots) {
+				const next = newSlotMap.get(id);
+				if (next && next.island !== entry.island) teardownMountedSlot(id, entry);
+			}
+			const applyMorph = () => {
+				if (epoch !== renderEpoch) return;
+				if (newSlotMap.size < prevMountedCount) {
+					let divergeFrom = Infinity;
+					for (const [id, entry] of mountedSlots) {
+						if (!id.startsWith("p:")) continue;
+						const next = newSlotMap.get(id);
+						if (!next) continue;
+						const index = Number(id.slice(2));
+						if (Number.isNaN(index) || index >= divergeFrom) continue;
+						if (serializeSlotProps(next.props) !== (entry.el.getAttribute(PROPS_ATTR) ?? "")) divergeFrom = index;
 					}
-					const tpl = document.createElement("template");
-					const morphRootTag = host.tagName.toLowerCase();
-					tpl.innerHTML = `<${morphRootTag}>${html}</${morphRootTag}>`;
-					morphInner(host, tpl.content.firstElementChild);
-					lastRendered = rendered;
-					let rehomeIndex = null;
 					for (const [id, entry] of mountedSlots) {
-						if (!newSlotMap.has(id) || entry.el.isConnected) continue;
-						rehomeIndex ??= buildSlotIndex();
-						const stub = rehomeIndex.get(id);
-						if (stub && stub !== entry.el) stub.replaceWith(entry.el);
+						if (!newSlotMap.has(id)) continue;
+						if (!entry.el.isConnected) continue;
+						if (id.startsWith("p:") && Number(id.slice(2)) >= divergeFrom) teardownMountedSlot(id, entry);
 					}
-					attachListeners();
-					stopBindings = applyTemplateBindings(host, newBinds);
-					stopJsxEvents = applyJsxEvents({
-						host,
-						records: newEvents,
-						reportError: (error) => reportError(error, "on"),
-						unmountSignal: unmountController.signal,
-						onceFired: nativeOnceFired
-					});
-					mountSlots(newSlotMap);
-				};
-				if (leavingPromises.length > 0) Promise.allSettled(leavingPromises).then((results) => {
-					for (const r of results) if (r.status === "rejected") console.error(r.reason);
-					applyMorph();
-				});
-				else applyMorph();
-			});
-			let tornDown = false;
-			const unmount = () => {
-				if (tornDown) return;
-				tornDown = true;
-				disposed = true;
-				unmountController.abort();
-				ISLAND_MOUNT_HANDLES.delete(host);
-				stopRender();
-				detachListeners();
-				const pending = [];
-				for (const [, entry] of mountedSlots) {
-					const result = entry.unmount();
-					if (result instanceof Promise) pending.push(result);
 				}
-				if (transition?.leave) try {
-					const result = transition.leave(host);
-					if (result instanceof Promise) pending.push(result);
-				} catch (err) {
-					reportError(err, "transition");
+				const tpl = document.createElement("template");
+				const morphRootTag = host.tagName.toLowerCase();
+				tpl.innerHTML = `<${morphRootTag}>${rendered}</${morphRootTag}>`;
+				morphInner(host, tpl.content.firstElementChild);
+				lastRendered = rendered;
+				let rehomeIndex = null;
+				for (const [id, entry] of mountedSlots) {
+					if (!newSlotMap.has(id) || entry.el.isConnected) continue;
+					rehomeIndex ??= buildSlotIndex();
+					const stub = rehomeIndex.get(id);
+					if (stub && stub !== entry.el) stub.replaceWith(entry.el);
 				}
-				const finish = () => {
-					for (const c of cleanups) c();
-				};
-				if (pending.length > 0) return Promise.all(pending).then(finish).catch((err) => {
-					reportError(err, "transition");
-					finish();
+				stopBindings = applyTemplateBindings(host, newBinds);
+				stopJsxEvents = applyJsxEvents({
+					host,
+					records: newEvents,
+					reportError: (error) => reportError(error, "event"),
+					unmountSignal: unmountController.signal,
+					onceFired: nativeOnceFired
 				});
-				finish();
-			};
-			const updateProps = (nextProps) => {
-				if (tornDown) return;
-				const next = resolveInput(nextProps);
-				if (shallowEqualInput(inputSignal(), next)) return;
-				inputSignal(next);
-			};
-			const handle = {
-				unmount,
-				updateProps
+				mountSlots(newSlotMap);
 			};
-			ISLAND_MOUNT_HANDLES.set(host, handle);
-			return handle;
-		}
-		/**
-		* Dual-mode island invocation:
-		* - When called inside an `html` interpolation (i.e. {@link currentRenderCtx}
-		*   is active), returns an {@link IslandCall} carrying props to be emitted
-		*   as a child slot marker; {@link interpolateValue} consumes this marker.
-		* - When called at the top level with no active render context, returns
-		*   SSR HTML via {@link renderToString} (backward-compatible public API).
-		*
-		* The declared return type omits {@link IslandCall} because TypeScript
-		* cannot narrow based on runtime stack state.
-		*/
-		const island = ((props) => {
-			if (currentRenderCtx()) return {
-				[ISLAND_CALL]: true,
-				island,
-				props,
-				key: void 0
-			};
-			return renderToString(props);
-		});
-		island.toString = (props) => renderToString(props, true);
-		island.toStringAsync = (props) => Promise.resolve(renderToString(props, false));
-		island.mount = (host, props) => mountIsland(host, props);
-		island[ISLAND_MOUNT_INTERNAL] = (host, props) => mountIslandInternal(host, props);
-		island[ISLAND_SLOT_TAG] = configuredSlotTag;
-		island[ISLAND_RENDER_STATE] = async (props) => {
-			const manifest = /* @__PURE__ */ new Map();
-			const html = await renderToString(props ?? void 0, false, void 0, manifest, void 0, true);
-			return manifestTemplatePrefix(manifest) + html;
+			applyMorph();
 		};
-		island[ISLAND_SSR_MANIFEST] = (props, eventsOut) => renderToString(props, false, void 0, eventsOut, void 0, true);
-		island.key = (key) => {
-			if (typeof key !== "string" || key.trim().length === 0) throw new Error("island.key() requires a non-empty string.");
-			if (key.includes(":")) throw new Error(`island.key() key cannot contain the slot separator ":" (got "${key}").`);
-			const keyed = ((props) => ({
-				[ISLAND_CALL]: true,
-				island,
-				props,
-				key
-			}));
-			keyed[ISLAND_CALL] = true;
-			return keyed;
+		let stopRender = effect$1(renderReactive);
+		startDerivedScopes();
+		stopRender();
+		stopRender = effect$1(renderReactive);
+		startEffectScopes();
+		let tornDown = false;
+		const unmount = () => {
+			if (tornDown) return;
+			tornDown = true;
+			instance.disposed = true;
+			unmountController.abort();
+			ISLAND_MOUNT_HANDLES.delete(host);
+			stopRender();
+			for (const [, entry] of mountedSlots) entry.unmount();
+			for (const c of cleanups) c();
 		};
-		island[ISLAND] = true;
-		const astroRendererName = globalThis[ASTRO_RENDERER_GLOBAL];
-		if (typeof astroRendererName === "string") island[Symbol.for("astro:renderer")] = astroRendererName;
-		island.define = (tagName, options) => {
-			if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") {
-				`${tagName}`;
-				return;
-			}
-			const CE_RESERVED = /* @__PURE__ */ new Set([
-				"annotation-xml",
-				"color-profile",
-				"font-face",
-				"font-face-src",
-				"font-face-uri",
-				"font-face-format",
-				"font-face-name",
-				"missing-glyph"
-			]);
-			if (typeof tagName !== "string" || !/^[a-z][a-z0-9._-]*-[a-z0-9._-]*$/.test(tagName) || CE_RESERVED.has(tagName)) {
-				`${tagName}`;
-				return;
+		const updateProps = (nextProps) => {
+			if (tornDown) return;
+			const next = resolveInput(nextProps);
+			if (shallowEqualInput(inputSignal(), next)) return;
+			inputSignal(next);
+			derivedPropsVersion(derivedPropsVersion() + 1);
+		};
+		const handle = {
+			unmount,
+			updateProps
+		};
+		ISLAND_MOUNT_HANDLES.set(host, handle);
+		return handle;
+	}
+	const island = ((props) => ({
+		[ISLAND_CALL]: true,
+		island,
+		props,
+		key: void 0
+	}));
+	island.toString = (props) => renderToString(props, true);
+	island.toStringAsync = (props) => Promise.resolve(renderToString(props, false));
+	island.mount = (host, props) => mountIsland(host, props);
+	island[ISLAND_MOUNT_INTERNAL] = (host, props) => mountIslandInternal(host, props);
+	island[ISLAND_SLOT_TAG] = configuredSlotTag;
+	island[ISLAND_RENDER_STATE] = async (props) => {
+		const manifest = /* @__PURE__ */ new Map();
+		const html = await renderToString(props ?? void 0, false, manifest, true);
+		return serializeServerManifest(manifest) + html;
+	};
+	island[ISLAND_SSR_MANIFEST] = (props, eventsOut) => renderToString(props, false, eventsOut, true);
+	island.key = (key) => {
+		if (typeof key !== "string" || key.trim().length === 0) throw new Error("island.key() requires a non-empty string.");
+		if (key.includes(":")) throw new Error(`island.key() key cannot contain the slot separator ":" (got "${key}").`);
+		const keyed = ((props) => ({
+			[ISLAND_CALL]: true,
+			island,
+			props,
+			key
+		}));
+		keyed[ISLAND_CALL] = true;
+		return keyed;
+	};
+	island[ISLAND] = true;
+	const astroRendererName = globalThis[ASTRO_RENDERER_GLOBAL];
+	if (typeof astroRendererName === "string") island[Symbol.for("astro:renderer")] = astroRendererName;
+	island.define = (tagName, options) => {
+		if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") {
+			`${tagName}`;
+			return;
+		}
+		const CE_RESERVED = /* @__PURE__ */ new Set([
+			"annotation-xml",
+			"color-profile",
+			"font-face",
+			"font-face-src",
+			"font-face-uri",
+			"font-face-format",
+			"font-face-name",
+			"missing-glyph"
+		]);
+		if (typeof tagName !== "string" || !/^[a-z][a-z0-9._-]*-[a-z0-9._-]*$/.test(tagName) || CE_RESERVED.has(tagName)) {
+			`${tagName}`;
+			return;
+		}
+		if (customElements.get(tagName)) {
+			`${tagName}`;
+			return;
+		}
+		const observe = options?.observe ?? [];
+		class IlhaIslandElement extends HTMLElement {
+			static observedAttributes = observe;
+			_handle = null;
+			_props;
+			_unmounting = false;
+			_reconnect = false;
+			get props() {
+				return this._props;
 			}
-			if (customElements.get(tagName)) {
-				`${tagName}`;
-				return;
+			set props(p) {
+				this._props = p;
+				if (this._handle && !this._unmounting) this._handle.updateProps(this._mergedProps());
 			}
-			const observe = options?.observe ?? [];
-			class IlhaIslandElement extends HTMLElement {
-				static observedAttributes = observe;
-				_handle = null;
-				_props;
-				_unmounting = false;
-				_reconnect = false;
-				get props() {
-					return this._props;
+			_mergedProps() {
+				const attrProps = {};
+				let hasAttrs = false;
+				for (const name of observe) {
+					const v = this.getAttribute(name);
+					if (v !== null) {
+						attrProps[name] = v;
+						hasAttrs = true;
+					}
 				}
-				set props(p) {
-					this._props = p;
-					if (this._handle && !this._unmounting) this._handle.updateProps(this._mergedProps());
+				if (!hasAttrs && this._props === void 0) return void 0;
+				return {
+					...attrProps,
+					...this._props
+				};
+			}
+			connectedCallback() {
+				if (this._unmounting) {
+					this._reconnect = true;
+					return;
 				}
-				_mergedProps() {
-					const attrProps = {};
-					let hasAttrs = false;
-					for (const name of observe) {
-						const v = this.getAttribute(name);
-						if (v !== null) {
-							attrProps[name] = v;
-							hasAttrs = true;
-						}
+				if (this._handle) return;
+				this._handle = mountIslandInternal(this, this._mergedProps());
+			}
+			disconnectedCallback() {
+				if (!this._handle || this._unmounting) return;
+				this._unmounting = true;
+				this._reconnect = false;
+				Promise.resolve(this._handle.unmount()).finally(() => {
+					this._handle = null;
+					this._unmounting = false;
+					if (this._reconnect) {
+						this._reconnect = false;
+						if (this.isConnected) this._handle = mountIslandInternal(this, this._mergedProps());
 					}
-					if (!hasAttrs && this._props === void 0) return void 0;
-					return {
-						...attrProps,
-						...this._props ?? {}
-					};
-				}
-				connectedCallback() {
-					if (this._unmounting) {
-						this._reconnect = true;
-						return;
+				});
+			}
+			attributeChangedCallback() {
+				if (this._handle && !this._unmounting) this._handle.updateProps(this._mergedProps());
+			}
+		}
+		customElements.define(tagName, IlhaIslandElement);
+	};
+	island.hydratable = async (props, opts) => {
+		const { name, as: rawTag = "div", snapshot = false, skipOnMount: explicitSkipOnMount } = opts;
+		const tag = assertValidSlotTagName(rawTag);
+		const resolvedProps = props ?? {};
+		const innerPromise = renderToString(resolvedProps, false, void 0, true);
+		let stateAttr = "";
+		if (snapshot !== false) {
+			const doState = snapshot === true || snapshot.state !== false;
+			const doDerived = snapshot === true || snapshot.derived !== false;
+			const doSkipOnMount = explicitSkipOnMount ?? false;
+			const snapshotData = { v: 2 };
+			const input = resolveInput(resolvedProps);
+			const probeFrame = freshFrame({ ssr: true });
+			withFrame(probeFrame, () => {
+				component(input);
+			});
+			if (doState) {
+				const states = [];
+				for (const slot of probeFrame.slots) {
+					if (slot.kind !== "state") continue;
+					const prevSub = setActiveSub(void 0);
+					try {
+						states.push(slot.acc());
+					} finally {
+						setActiveSub(prevSub);
 					}
-					if (this._handle) return;
-					this._handle = mountIslandInternal(this, this._mergedProps());
 				}
-				disconnectedCallback() {
-					if (!this._handle || this._unmounting) return;
-					this._unmounting = true;
-					this._reconnect = false;
-					Promise.resolve(this._handle.unmount()).finally(() => {
-						this._handle = null;
-						this._unmounting = false;
-						if (this._reconnect) {
-							this._reconnect = false;
-							if (this.isConnected) this._handle = mountIslandInternal(this, this._mergedProps());
-						}
+				snapshotData["s"] = states;
+			}
+			if (doDerived) {
+				const probePendings = probeFrame.pendingDerived ?? [];
+				if (probePendings.length > 0) {
+					await Promise.all(probePendings.map((p) => p.promise));
+					probeFrame.creating = false;
+					probeFrame.cursor = 0;
+					withFrame(probeFrame, () => {
+						component(input);
 					});
 				}
-				attributeChangedCallback() {
-					if (this._handle && !this._unmounting) this._handle.updateProps(this._mergedProps());
-				}
-			}
-			customElements.define(tagName, IlhaIslandElement);
-		};
-		island.hydratable = async (props, opts) => {
-			const { name, as: rawTag = "div", snapshot = false, skipOnMount: explicitSkipOnMount } = opts;
-			const tag = assertValidSlotTagName(rawTag);
-			const resolvedProps = props ?? {};
-			const streamValues = {};
-			const eventsManifest = /* @__PURE__ */ new Map();
-			const inner = await renderToString(resolvedProps, false, streamValues, eventsManifest, void 0, true);
-			const encodedProps = escapeHtml(JSON.stringify(resolvedProps));
-			let stateAttr = "";
-			if (snapshot !== false) {
-				const doState = snapshot === true || snapshot.state !== false;
-				const doDerived = snapshot === true || snapshot.derived !== false;
-				const doSkipOnMount = explicitSkipOnMount ?? (doState || doDerived);
-				const snapshotData = {};
-				const input = resolveInput(resolvedProps);
-				const plainState = buildPlainState(input);
-				const stateForDerived = { ...plainState };
-				for (const [k, v] of Object.entries(streamValues)) stateForDerived[k] = () => v;
-				if (doState) for (const entry of states) snapshotData[entry.key] = entry.key in streamValues ? streamValues[entry.key] : plainState[entry.key]();
-				if (doDerived) {
-					const derivedResults = {};
-					for (const entry of deriveds) {
-						const prevSub = setActiveSub(void 0);
-						let resultPromise;
-						let syncError;
-						let threw = false;
-						try {
-							resultPromise = entry.fn({
-								state: stateForDerived,
-								input,
-								signal: new AbortController().signal
-							});
-						} catch (err) {
-							threw = true;
-							syncError = err;
-						} finally {
-							setActiveSub(prevSub);
-						}
-						if (threw) {
-							derivedResults[entry.key] = {
-								loading: false,
-								value: void 0,
-								error: syncError instanceof Error ? syncError.message : String(syncError)
-							};
-							continue;
-						}
-						try {
-							const result = await Promise.resolve(resultPromise);
-							derivedResults[entry.key] = {
-								loading: false,
-								value: result,
-								error: void 0
-							};
-						} catch (err) {
-							derivedResults[entry.key] = {
-								loading: false,
-								value: void 0,
-								error: err instanceof Error ? err.message : String(err)
-							};
-						}
+				const derivedEntries = [];
+				for (const slot of probeFrame.slots) {
+					if (slot.kind !== "derived") continue;
+					const prevSub = setActiveSub(void 0);
+					let envelope;
+					try {
+						envelope = { ...slot.env() };
+					} finally {
+						setActiveSub(prevSub);
 					}
-					snapshotData["_derived"] = derivedResults;
+					const entry = {
+						loading: false,
+						value: envelope.value
+					};
+					if (envelope.error) entry["error"] = envelope.error.message;
+					derivedEntries.push(entry);
 				}
-				if (doSkipOnMount) snapshotData["_skipOnMount"] = true;
-				if (streams.length > 0) snapshotData["_streams"] = Object.fromEntries(streams.map((entry) => [entry.key, true]));
-				stateAttr = ` ${STATE_ATTR}='${escapeHtml(JSON.stringify(snapshotData))}'`;
+				snapshotData["d"] = derivedEntries;
 			}
-			let actionsAttr = "";
-			if (eventsManifest.size > 0) actionsAttr = ` ${ACTIONS_ATTR}='${escapeHtml(JSON.stringify(Object.fromEntries(eventsManifest)))}'`;
-			return `<${tag} data-ilha="${escapeHtml(name)}" ${PROPS_ATTR}='${encodedProps}'${stateAttr}${actionsAttr}>${inner}</${tag}>`;
-		};
-		return island;
-	}
-};
-function ilhaFrom(selector, island, props) {
-	const host = typeof selector === "string" ? document.querySelector(selector) : selector;
-	if (!host) {
-		console.warn(`[ilha] from(): element not found: ${selector}`);
-		return null;
-	}
-	return island.mount(host, props);
-}
+			if (doSkipOnMount) snapshotData["_skipOnMount"] = true;
+			stateAttr = ` ${STATE_ATTR}='${escapeHtml(JSON.stringify(snapshotData))}'`;
+		}
+		const inner = await innerPromise;
+		return `<${tag} data-ilha="${escapeHtml(name)}" ${PROPS_ATTR}='${escapeHtml(JSON.stringify(resolvedProps))}'${stateAttr}>${inner}</${tag}>`;
+	};
+	return island;
+});
 function mountAll(registry, options = {}) {
 	const root = options.root ?? document.body;
 	const lazy = options.lazy ?? false;
@@ -2959,67 +2933,27 @@ function mountAll(registry, options = {}) {
 		if (pending.length > 0) return Promise.all(pending).then(() => {});
 	} };
 }
-const rootBuilder = new IlhaBuilder({
-	schema: null,
-	defaultInput: null,
-	states: [],
-	streams: [],
-	deriveds: [],
-	actions: [],
-	ons: [],
-	effects: [],
-	onMounts: [],
-	onErrors: [],
-	transition: null,
-	css: null,
-	as: null
-});
-const callableRoot = ((fn) => rootBuilder.input().render(fn));
-Object.defineProperty(callableRoot, "_cfg", {
-	value: rootBuilder._cfg,
-	enumerable: false
-});
-for (const key of Object.getOwnPropertyNames(IlhaBuilder.prototype)) {
-	if (key === "constructor") continue;
-	const descriptor = Object.getOwnPropertyDescriptor(IlhaBuilder.prototype, key);
-	if (descriptor) Object.defineProperty(callableRoot, key, descriptor);
-}
-const ilha = Object.assign(callableRoot, {
-	html: ilhaHtml,
-	raw: ilhaRaw,
-	mount: mountAll,
-	from: ilhaFrom,
-	context: ilhaContext,
-	signal: ilhaSignal,
-	computed: ilhaComputed,
-	morph,
-	batch,
-	untrack,
-	onUncaughtError
+setJsxRuntimeBridge({
+	registerEvent({ type, handler, modifier }) {
+		const ctx = currentRenderCtx();
+		if (!ctx) return void 0;
+		SSR_ACTION_STUB in handler;
+		const index = ctx.events.length;
+		ctx.events.push({
+			type,
+			handler,
+			modifier
+		});
+		return index;
+	},
+	slot({ island, props, key }) {
+		return ilhaRaw(emitIslandSlot({
+			island,
+			props,
+			key
+		}));
+	}
 });
-/** @internal Used by the separate JSX runtime to register a native event handler. */
-function __ilhaJsxEvent({ type, handler, modifier }) {
-	const ctx = currentRenderCtx();
-	if (!ctx) return void 0;
-	const isActionStub = SSR_ACTION_STUB in handler;
-	const capture = ctx.manifest && !isActionStub ? captureHandlerActions(handler) : void 0;
-	const index = ctx.events.length;
-	ctx.events.push({
-		type,
-		handler,
-		modifier,
-		capture
-	});
-	return index;
-}
-/** @internal Used by the separate JSX runtime entry to preserve island slot composition. */
-function __ilhaJsxSlot({ island, props, key }) {
-	return ilhaRaw(emitIslandSlot({
-		island,
-		props,
-		key
-	}));
-}
 /**
 * Morph an element's children toward `html`, patching in place: surviving
 * elements keep their identity, listeners, and focus (see the morph engine).
@@ -3043,10 +2977,8 @@ function morph(host, html) {
 }
 const html = ilhaHtml;
 const raw = ilhaRaw;
-const css = ilhaCss;
 const mount = mountAll;
-const from = ilhaFrom;
 const context = ilhaContext;
 
 //#endregion
-export { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, __ilhaJsxEvent, __ilhaJsxSlot, batch, ilhaComputed as computed, context, css, ilhaEffect as effect, from, html, ilha, ilhaSignal, ilhaSignal as signal, morph, mount, onUncaughtError, raw, untrack };
+export { action, batch, context, css, derived, each, effect, html, ilha, ilhaSignal, isSafeUrl, isSafeUrlAttrValue, isUrlAttributeName, json, morph, mount, onError, onUncaughtError, persist, raw, serializeStyle, state, untrack };