ilha 0.9.5 → 0.10.0

package/dist/index.js

@@ -11,7 +11,7 @@ function exceedsMaxDepth(value, depth) {
 		return false;
 	}
 	for (const key in value) {
-		if (!Object.prototype.hasOwnProperty.call(value, key)) continue;
+		if (!Object.hasOwn(value, key)) continue;
 		if (exceedsMaxDepth(value[key], depth + 1)) return true;
 	}
 	return false;
@@ -60,7 +60,7 @@ function shallowEqualInput(a, b) {
 	const bk = Object.keys(b);
 	if (ak.length !== bk.length) return false;
 	for (const k of ak) {
-		if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+		if (!Object.hasOwn(b, k)) return false;
 		if (!Object.is(a[k], b[k])) return false;
 	}
 	return true;
@@ -103,10 +103,10 @@ function getIslandSlotTag(island) {
 	if (typeof tag === "string" && tag.length > 0) return tag;
 	return "div";
 }
-function wrapIslandSlotHtml(tag, id, propsAttr, inner) {
+function wrapIslandSlotHtml({ tag, id, propsAttr, inner }) {
 	return `<${tag} ${SLOT_ATTR}="${escapeHtml(id)}"${propsAttr}>${inner}</${tag}>`;
 }
-function isStableInlineSlotMount(initialHtml, renderedHtml, slotIds) {
+function isStableInlineSlotMount({ initialHtml, renderedHtml, slotIds }) {
 	if (typeof document === "undefined") return false;
 	const initialRoot = parseHtmlFragment(initialHtml);
 	const renderedRoot = parseHtmlFragment(renderedHtml);
@@ -485,7 +485,8 @@ const PROPS_ATTR = "data-ilha-props";
 const STATE_ATTR = "data-ilha-state";
 const CSS_ATTR = "data-ilha-css";
 function buildScopedStyle(css) {
-	return `<style ${CSS_ATTR}>@scope (:scope) to ([data-ilha]){${css.replace(/<\/style/gi, "<\\/style")}}</style>`;
+	const safeCss = css.replace(/<\/style/gi, "<\\/style");
+	return `<style ${CSS_ATTR}>@scope (:scope) to ([data-ilha]){${safeCss}}</style>`;
 }
 const RENDER_CTX_STACK = Symbol.for("ilha.renderCtxStack");
 function renderCtxStack() {
@@ -498,7 +499,8 @@ function pushRenderCtx(liveHost, asyncChildren) {
 		positional: 0,
 		liveHost,
 		pending: asyncChildren ? /* @__PURE__ */ new Map() : void 0,
-		binds: []
+		binds: [],
+		events: []
 	};
 	renderCtxStack().push(ctx);
 	return ctx;
@@ -518,7 +520,7 @@ function isIslandCall(v) {
 	if (ISLAND_CALL in v) return true;
 	return typeof v === "object" && "island" in v && isIsland(v.island);
 }
-function emitIslandSlot(island, props, key) {
+function emitIslandSlot({ island, props, key }) {
 	const ctx = currentRenderCtx();
 	let id;
 	if (key !== void 0) id = `k:${key}`;
@@ -530,22 +532,42 @@ function emitIslandSlot(island, props, key) {
 	const slotTag = getIslandSlotTag(island);
 	const attrProps = slotPropsForAttr(props);
 	const propsAttr = attrProps ? ` ${PROPS_ATTR}='${escapeHtml(JSON.stringify(attrProps))}'` : "";
-	if (ctx?.liveHost) return wrapIslandSlotHtml(slotTag, id, propsAttr, "");
+	if (ctx?.liveHost) return wrapIslandSlotHtml({
+		tag: slotTag,
+		id,
+		propsAttr,
+		inner: ""
+	});
 	if (ctx?.pending) {
 		popRenderCtx();
 		try {
 			const result = island(props);
 			if (result instanceof Promise) {
 				ctx.pending.set(id, result.then(String));
-				return wrapIslandSlotHtml(slotTag, id, propsAttr, asyncSlotMarker(id));
+				return wrapIslandSlotHtml({
+					tag: slotTag,
+					id,
+					propsAttr,
+					inner: asyncSlotMarker(id)
+				});
 			}
-			return wrapIslandSlotHtml(slotTag, id, propsAttr, String(result));
+			return wrapIslandSlotHtml({
+				tag: slotTag,
+				id,
+				propsAttr,
+				inner: String(result)
+			});
 		} finally {
 			renderCtxStack().push(ctx);
 		}
 	}
 	const inner = island.toString(props);
-	return wrapIslandSlotHtml(slotTag, id, propsAttr, inner);
+	return wrapIslandSlotHtml({
+		tag: slotTag,
+		id,
+		propsAttr,
+		inner
+	});
 }
 function asyncSlotMarker(id) {
 	return `<!--ilha-async:${escapeHtml(id)}-->`;
@@ -557,6 +579,15 @@ async function resolveAsyncChildren(html, pending) {
 	}
 	return html;
 }
+function resolveSignalSetter(read, value) {
+	if (typeof value !== "function") return value;
+	const prevSub = setActiveSub(void 0);
+	try {
+		return value(read());
+	} finally {
+		setActiveSub(prevSub);
+	}
+}
 function markSignalAccessor(fn) {
 	fn[SIGNAL_ACCESSOR] = true;
 	const accessor = fn;
@@ -574,14 +605,19 @@ function getAtPath(obj, path) {
 	}
 	return cur;
 }
-function setAtPath(obj, path, value) {
+function setAtPath({ object, path, value }) {
+	const obj = object;
 	if (path.length === 0) return value;
 	const [head, ...rest] = path;
 	if (Array.isArray(obj)) {
 		const idx = head;
 		if (idx < 0 || idx >= obj.length) return obj;
 		const next = obj[idx];
-		const updated = rest.length === 0 ? value : setAtPath(next, rest, value);
+		const updated = rest.length === 0 ? value : setAtPath({
+			object: next,
+			path: rest,
+			value
+		});
 		if (Object.is(next, updated)) return obj;
 		const copy = obj.slice();
 		copy[idx] = updated;
@@ -591,7 +627,11 @@ function setAtPath(obj, path, value) {
 		const record = obj;
 		const key = String(head);
 		const next = record[key];
-		const updated = rest.length === 0 ? value : setAtPath(next, rest, value);
+		const updated = rest.length === 0 ? value : setAtPath({
+			object: next,
+			path: rest,
+			value
+		});
 		if (rest.length === 0) {
 			if (Object.is(next, value)) return obj;
 		} else if (Object.is(next, updated)) return obj;
@@ -600,7 +640,11 @@ function setAtPath(obj, path, value) {
 			[key]: updated
 		};
 	}
-	return rest.length === 0 ? value : setAtPath(void 0, rest, value);
+	return rest.length === 0 ? value : setAtPath({
+		object: void 0,
+		path: rest,
+		value
+	});
 }
 function toPathSegment(prop) {
 	if (typeof prop === "symbol") return null;
@@ -629,8 +673,15 @@ function createSelectAccessor(root, selector) {
 	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.");
 	return markSignalAccessor((...args) => {
 		if (args.length === 0) return path.length === 0 ? selector(root()) : getAtPath(root(), path);
-		const next = path.length === 0 ? args[0] : setAtPath(root(), path, args[0]);
-		if (!Object.is(root(), next)) root(next);
+		const previousRoot = root();
+		const previousSelected = path.length === 0 ? selector(previousRoot) : getAtPath(previousRoot, path);
+		const value = resolveSignalSetter(() => previousSelected, args[0]);
+		const next = path.length === 0 ? value : setAtPath({
+			object: previousRoot,
+			path,
+			value
+		});
+		if (!Object.is(previousRoot, next)) root((() => next));
 	});
 }
 function ilhaRaw(value) {
@@ -654,9 +705,17 @@ function interpolateValue(v) {
 	if (isRawHtml(v)) return v.value;
 	if (isIslandCall(v)) {
 		const call = typeof v === "function" ? v() : v;
-		return emitIslandSlot(call.island, call.props, call.key);
+		return emitIslandSlot({
+			island: call.island,
+			props: call.props,
+			key: call.key
+		});
 	}
-	if (isIsland(v)) return emitIslandSlot(v, void 0, void 0);
+	if (isIsland(v)) return emitIslandSlot({
+		island: v,
+		props: void 0,
+		key: void 0
+	});
 	if (isSignalAccessor(v)) return escapeHtml(v());
 	if (typeof v === "function") return escapeHtml(v());
 	return escapeHtml(v);
@@ -672,6 +731,30 @@ const BIND_VALID_KINDS = /* @__PURE__ */ new Set([
 	"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 NATIVE_EVENT_MODIFIERS = /* @__PURE__ */ new Set([
+	"abortable",
+	"once",
+	"capture",
+	"passive"
+]);
+function isEventAttributePosition(source, index) {
+	let open = -1;
+	let quote = null;
+	for (let i = 0; i < index; i++) {
+		const char = source[i];
+		if (open === -1) {
+			if (char === "<") open = i;
+			continue;
+		}
+		if (quote) {
+			if (char === quote) quote = null;
+		} else if (char === "\"" || char === "'") quote = char;
+		else if (char === ">") open = -1;
+	}
+	if (open === -1 || quote !== null) return false;
+	return !/^\s*[!/?]/.test(source.slice(open + 1, index));
+}
 function findTagCloseIndex(chunk, initialQuote) {
 	let quote = initialQuote;
 	for (let i = 0; i < chunk.length; i++) {
@@ -706,7 +789,7 @@ function extractElementStaticValue(prefix) {
 	if (!m) return null;
 	return m[2] ?? m[3] ?? m[4] ?? null;
 }
-function emitBindSSR(kind, index, accessor, prefixForStaticPeek) {
+function emitBindSSR({ kind, index, accessor, prefixForStaticPeek }) {
 	const spec = `${kind}:${index}`;
 	let v;
 	try {
@@ -733,6 +816,7 @@ function ilhaHtml(strings, ...values) {
 	let result = "";
 	let stripLeadingQuote = null;
 	let pendingBindSpecs = "";
+	let pendingEventSpecs = "";
 	let pendingQuote = null;
 	const ctx = currentRenderCtx();
 	for (let i = 0; i < strings.length; i++) {
@@ -741,11 +825,15 @@ function ilhaHtml(strings, ...values) {
 			if (chunk.startsWith(stripLeadingQuote)) chunk = chunk.slice(1);
 			stripLeadingQuote = null;
 		}
-		if (pendingBindSpecs !== "") {
+		if (pendingBindSpecs !== "" || pendingEventSpecs !== "") {
 			const { index: gtIdx, quote } = findTagCloseIndex(chunk, pendingQuote);
 			if (gtIdx !== -1) {
-				chunk = chunk.slice(0, gtIdx).replace(/\s*\/\s*$/, "") + ` data-ilha-bind="${pendingBindSpecs}">` + chunk.slice(gtIdx + 1);
+				const head = chunk.slice(0, gtIdx).replace(/\s*\/\s*$/, "");
+				const bindAttr = pendingBindSpecs ? ` data-ilha-bind="${pendingBindSpecs}"` : "";
+				const eventAttr = pendingEventSpecs ? ` data-ilha-on="${pendingEventSpecs}"` : "";
+				chunk = head + bindAttr + eventAttr + ">" + chunk.slice(gtIdx + 1);
 				pendingBindSpecs = "";
+				pendingEventSpecs = "";
 				pendingQuote = null;
 			} else pendingQuote = quote;
 		}
@@ -754,6 +842,29 @@ function ilhaHtml(strings, ...values) {
 			continue;
 		}
 		const value = values[i];
+		const eventMatch = chunk.match(EVENT_PREFIX_RE);
+		if (eventMatch && isEventAttributePosition(result + chunk, result.length + chunk.length - eventMatch[0].length)) {
+			const eventName = eventMatch[1];
+			const rawModifier = eventMatch[2];
+			const modifier = NATIVE_EVENT_MODIFIERS.has(rawModifier) ? rawModifier : void 0;
+			const openQuote = eventMatch[3] ?? null;
+			const matchStart = chunk.length - eventMatch[0].length;
+			const cleanPrefix = chunk.slice(0, matchStart).replace(/\s+$/, "");
+			result += cleanPrefix;
+			if (ctx && typeof value === "function") {
+				const index = ctx.events.length;
+				if (rawModifier && !modifier) {} else {
+					ctx.events.push({
+						type: eventName,
+						handler: value,
+						modifier
+					});
+					pendingEventSpecs += (pendingEventSpecs ? "," : "") + `${eventName}:${index}`;
+				}
+			}
+			if (openQuote) stripLeadingQuote = openQuote;
+			continue;
+		}
 		const m = chunk.match(BIND_PREFIX_RE);
 		if (m && isSignalAccessor(value)) {
 			const name = m[1];
@@ -776,7 +887,12 @@ function ilhaHtml(strings, ...values) {
 				kind: name,
 				accessor: value
 			});
-			const [valueAttrs, spec] = emitBindSSR(name, index, value, cleanPrefix);
+			const [valueAttrs, spec] = emitBindSSR({
+				kind: name,
+				index,
+				accessor: value,
+				prefixForStaticPeek: cleanPrefix
+			});
 			result += cleanPrefix + valueAttrs;
 			pendingBindSpecs += (pendingBindSpecs ? "," : "") + spec;
 			if (openQuote) stripLeadingQuote = openQuote;
@@ -785,6 +901,7 @@ function ilhaHtml(strings, ...values) {
 		result += chunk + interpolateValue(value);
 	}
 	if (pendingBindSpecs !== "") result += ` data-ilha-bind="${pendingBindSpecs}"`;
+	if (pendingEventSpecs !== "") result += ` data-ilha-on="${pendingEventSpecs}"`;
 	return {
 		[RAW]: true,
 		value: dedentString(result)
@@ -803,7 +920,7 @@ function ilhaContextFn(key, initial) {
 	const s = signal(initial);
 	const accessor = (...args) => {
 		if (args.length === 0) return s();
-		s(args[0]);
+		s(resolveSignalSetter(() => s(), args[0]));
 	};
 	contextRegistry.set(key, accessor);
 	return accessor;
@@ -833,7 +950,7 @@ function ilhaSignal(initial) {
 	const s = signal(initial);
 	return markSignalAccessor((...args) => {
 		if (args.length === 0) return s();
-		s(args[0]);
+		s(resolveSignalSetter(() => s(), args[0]));
 	});
 }
 /**
@@ -960,7 +1077,7 @@ function buildDerivedAccessors(envelopes) {
 		return accessors.get(key) ?? defaultDerivedAccessor();
 	} });
 }
-function createDerivedProxy(entries, state, input, derivedSnapshot) {
+function createDerivedProxy({ entries, state, input, derivedSnapshot }) {
 	const envelopes = /* @__PURE__ */ new Map();
 	for (const entry of entries) {
 		let initialEnvelope;
@@ -1067,9 +1184,10 @@ function createDerivedProxy(entries, state, input, derivedSnapshot) {
 					return;
 				}
 				const prevSub = setActiveSub(void 0);
+				const prevVal = env();
 				env({
 					loading: true,
-					value: env().value,
+					value: prevVal.value,
 					error: void 0
 				});
 				setActiveSub(prevSub);
@@ -1102,6 +1220,7 @@ function createDerivedProxy(entries, state, input, derivedSnapshot) {
 	};
 }
 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(",")) {
@@ -1181,12 +1300,86 @@ function resolveBindOps(el, kind) {
 		}
 	}
 }
+function templateElementBelongsToHost(host, candidate) {
+	if (candidate === host) return true;
+	let current = candidate;
+	while (current && current !== host) {
+		if (current.hasAttribute(SLOT_ATTR) || current.hasAttribute("data-ilha")) return false;
+		current = current.parentElement;
+	}
+	return current === host;
+}
+function applyJsxEvents({ host, records, reportError, unmountSignal, onceFired }) {
+	if (records.length === 0) return () => {};
+	const cleanups = [];
+	const elements = [];
+	if (host.hasAttribute(EVENT_SENTINEL_ATTR)) elements.push(host);
+	elements.push(...Array.from(host.querySelectorAll(`[${EVENT_SENTINEL_ATTR}]`)).filter((element) => templateElementBelongsToHost(host, element)));
+	for (const el of elements) {
+		const sentinel = el.getAttribute(EVENT_SENTINEL_ATTR) ?? "";
+		for (const part of sentinel.split(",")) {
+			const separator = part.lastIndexOf(":");
+			if (separator < 1) continue;
+			const type = part.slice(0, separator);
+			const index = Number(part.slice(separator + 1));
+			if (!Number.isInteger(index) || index < 0) continue;
+			const record = records[index];
+			if (!record || record.type !== type) continue;
+			if (record.modifier === "once" && onceFired.get(el)?.has(type)) continue;
+			const listenerController = new AbortController();
+			let invocationController;
+			const options = {
+				once: record.modifier === "once",
+				capture: record.modifier === "capture",
+				passive: record.modifier === "passive"
+			};
+			const reportHandlerError = (error) => {
+				if (error?.name !== "AbortError") reportError(error);
+			};
+			const listener = (event) => {
+				if (record.modifier === "once") {
+					let fired = onceFired.get(el);
+					if (!fired) onceFired.set(el, fired = /* @__PURE__ */ new Set());
+					fired.add(type);
+				}
+				if (record.modifier === "abortable") {
+					invocationController?.abort();
+					invocationController = new AbortController();
+				}
+				const signal = invocationController ? anySignal([listenerController.signal, invocationController.signal]) : listenerController.signal;
+				let result;
+				startBatch();
+				try {
+					result = record.handler(event, { signal });
+				} catch (error) {
+					reportHandlerError(error);
+					return;
+				} finally {
+					endBatch();
+				}
+				if (result != null && typeof result.then === "function") Promise.resolve(result).catch(reportHandlerError);
+			};
+			const stop = () => {
+				listenerController.abort();
+				invocationController?.abort();
+				el.removeEventListener(type, listener, options);
+			};
+			el.addEventListener(type, listener, options);
+			unmountSignal.addEventListener("abort", stop, { once: true });
+			cleanups.push(() => {
+				unmountSignal.removeEventListener("abort", stop);
+				stop();
+			});
+		}
+	}
+	return () => cleanups.forEach((cleanup) => cleanup());
+}
 function applyTemplateBindings(host, binds) {
 	if (binds.length === 0) return () => {};
 	const cleanups = [];
 	const elements = [];
 	if (host.hasAttribute(BIND_SENTINEL_ATTR)) elements.push(host);
-	for (const el of host.querySelectorAll(`[${BIND_SENTINEL_ATTR}]`)) elements.push(el);
+	for (const el of host.querySelectorAll(`[${BIND_SENTINEL_ATTR}]`)) if (templateElementBelongsToHost(host, el)) elements.push(el);
 	for (const el of elements) {
 		const specs = parseBindSentinel(el.getAttribute(BIND_SENTINEL_ATTR));
 		for (const spec of specs) {
@@ -1328,6 +1521,7 @@ var IlhaBuilder = class IlhaBuilder {
 			defaultInput,
 			states: [],
 			deriveds: [],
+			actions: [],
 			ons: [],
 			effects: [],
 			onMounts: [],
@@ -1363,6 +1557,15 @@ var IlhaBuilder = class IlhaBuilder {
 			}]
 		});
 	}
+	action(key, fn) {
+		return new IlhaBuilder({
+			...this._cfg,
+			actions: [...this._cfg.actions, {
+				key,
+				fn
+			}]
+		});
+	}
 	on(selectorOrCombined, handler) {
 		const parsed = parseOnArgs(selectorOrCombined);
 		return new IlhaBuilder({
@@ -1417,7 +1620,7 @@ var IlhaBuilder = class IlhaBuilder {
 		});
 	}
 	render(fn) {
-		const { schema, defaultInput, states, deriveds, ons, effects, onMounts, onErrors, transition, css: cssSource, as: slotAs } = this._cfg;
+		const { schema, defaultInput, states, 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) {
@@ -1428,26 +1631,29 @@ var IlhaBuilder = class IlhaBuilder {
 			if (!schema) return merged;
 			return validateSchema(schema, merged);
 		}
-		function renderWithCtx(fn, liveHost, asyncChildren) {
+		function renderWithCtx({ render, liveHost, asyncChildren }) {
 			const ctx = pushRenderCtx(liveHost, asyncChildren);
 			try {
-				const html = unwrapHtml(fn());
+				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
+							binds,
+							events
 						};
 					})();
 				}
 				return {
 					html,
 					slots,
-					binds
+					binds,
+					events
 				};
 			} finally {
 				popRenderCtx();
@@ -1470,12 +1676,34 @@ var IlhaBuilder = class IlhaBuilder {
 				const s = signal(snapshot && entry.key in snapshot ? snapshot[entry.key] : typeof entry.init === "function" ? entry.init(input) : entry.init);
 				const accessor = markSignalAccessor((...args) => {
 					if (args.length === 0) return s();
-					s(args[0]);
+					s(resolveSignalSetter(() => s(), args[0]));
 				});
 				state[entry.key] = accessor;
 			}
 			return state;
 		}
+		function buildSsrActions() {
+			const out = {};
+			for (const entry of actions) {
+				const invoke = () => {};
+				Object.defineProperties(invoke, {
+					pending: {
+						get: () => false,
+						enumerable: true
+					},
+					data: {
+						get: () => void 0,
+						enumerable: true
+					},
+					error: {
+						get: () => void 0,
+						enumerable: true
+					}
+				});
+				out[entry.key] = invoke;
+			}
+			return out;
+		}
 		/** Detached host for SSR setup hooks; must not be `{}` (Areia/components call host.matches). */
 		function createSsrOnMountHost() {
 			if (typeof document !== "undefined") return document.createElement("div");
@@ -1491,18 +1719,19 @@ var IlhaBuilder = class IlhaBuilder {
 			return stub;
 		}
 		/** Run .onMount() before top-level SSR only (seed module/external state from `input`). */
-		function runOnMountForRender(input, state, derived) {
+		function runOnMountForRender({ input, state, derived, action }) {
 			if (onMounts.length === 0) return;
 			if (currentRenderCtx()) return;
 			const host = createSsrOnMountHost();
 			const ssrCleanups = [];
 			for (const entry of onMounts) {
 				const prevSub = setActiveSub(void 0);
-				let userCleanup = void 0;
+				let userCleanup;
 				try {
 					userCleanup = entry.fn({
 						state,
 						derived,
+						action,
 						input,
 						host,
 						hydrated: false
@@ -1517,6 +1746,7 @@ var IlhaBuilder = class IlhaBuilder {
 							source: "mount",
 							state,
 							derived,
+							action,
 							input,
 							host
 						});
@@ -1540,6 +1770,7 @@ var IlhaBuilder = class IlhaBuilder {
 		function renderToString(props, sync = false) {
 			const input = resolveInput(props);
 			const state = buildSignalState(input);
+			const action = buildSsrActions();
 			const results = deriveds.map((entry) => {
 				const prevSub = setActiveSub(void 0);
 				try {
@@ -1573,14 +1804,20 @@ var IlhaBuilder = class IlhaBuilder {
 					error: void 0
 				};
 				const derived = buildDerivedAccessors(envelopes);
-				if (!currentRenderCtx()) runOnMountForRender(input, state, derived);
+				if (!currentRenderCtx()) runOnMountForRender({
+					input,
+					state,
+					derived,
+					action
+				});
 				const prevSub = setActiveSub(void 0);
 				try {
-					const { html } = renderWithCtx(() => fn({
+					const { html } = renderWithCtx({ render: () => fn({
 						state,
 						derived,
+						action,
 						input
-					}));
+					}) });
 					return stylePrefix + html;
 				} finally {
 					setActiveSub(prevSub);
@@ -1610,14 +1847,23 @@ var IlhaBuilder = class IlhaBuilder {
 				const envelopes = {};
 				for (const r of resolved) envelopes[r.key] = r.envelope;
 				const derived = buildDerivedAccessors(envelopes);
-				if (!currentRenderCtx()) runOnMountForRender(input, state, derived);
+				if (!currentRenderCtx()) runOnMountForRender({
+					input,
+					state,
+					derived,
+					action
+				});
 				const prevSub = setActiveSub(void 0);
 				try {
-					const { html } = await renderWithCtx(() => fn({
-						state,
-						derived,
-						input
-					}), void 0, true);
+					const { html } = await renderWithCtx({
+						render: () => fn({
+							state,
+							derived,
+							action,
+							input
+						}),
+						asyncChildren: true
+					});
 					return stylePrefix + html;
 				} finally {
 					setActiveSub(prevSub);
@@ -1684,8 +1930,14 @@ var IlhaBuilder = class IlhaBuilder {
 			const cleanups = [];
 			const unmountController = new AbortController();
 			cleanups.push(() => unmountController.abort());
-			const { proxy: derived, setup: setupDerived } = createDerivedProxy(deriveds, state, input, derivedSnapshot);
+			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) {
@@ -1698,6 +1950,7 @@ var IlhaBuilder = class IlhaBuilder {
 						source,
 						state,
 						derived,
+						action,
 						input,
 						host
 					});
@@ -1705,6 +1958,107 @@ var IlhaBuilder = class IlhaBuilder {
 					console.error(handlerErr);
 				}
 			}
+			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
+					}
+				});
+				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"));
@@ -1809,7 +2163,13 @@ var IlhaBuilder = class IlhaBuilder {
 			function attachListeners() {
 				for (const entry of ons) {
 					if (entry.options.once && firedOnce.has(entry)) continue;
-					(entry.selector === "" ? [host] : Array.from(host.querySelectorAll(entry.selector))).forEach((listenerTarget) => {
+					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);
@@ -1837,6 +2197,7 @@ var IlhaBuilder = class IlhaBuilder {
 								result = entry.handler({
 									state,
 									derived,
+									action,
 									input,
 									host,
 									target: handlerTarget,
@@ -1876,11 +2237,12 @@ var IlhaBuilder = class IlhaBuilder {
 			function invokeOnMounts() {
 				for (const entry of onMounts) {
 					const prevSub = setActiveSub(void 0);
-					let userCleanup = void 0;
+					let userCleanup;
 					try {
 						userCleanup = entry.fn({
 							state,
 							derived,
+							action,
 							input,
 							host,
 							hydrated
@@ -1904,14 +2266,27 @@ var IlhaBuilder = class IlhaBuilder {
 			}
 			const preserveSSRDom = hydrated && host.childNodes.length > 0;
 			if (hydrated && onMounts.length > 0 && !shouldSkipOnMount) invokeOnMounts();
-			const initial = renderWithCtx(() => fn({
-				state,
-				derived,
-				input
-			}), preserveSSRDom ? host : void 0);
+			const nativeOnceFired = /* @__PURE__ */ new WeakMap();
+			const initial = renderWithCtx({
+				render: () => fn({
+					state,
+					derived,
+					action,
+					input
+				}),
+				liveHost: preserveSSRDom ? host : void 0
+			});
 			if (!preserveSSRDom) host.innerHTML = stylePrefix + initial.html;
 			let stopBindings = applyTemplateBindings(host, initial.binds);
 			cleanups.push(() => stopBindings());
+			let stopJsxEvents = applyJsxEvents({
+				host,
+				records: initial.events,
+				reportError: (error) => reportError(error, "on"),
+				unmountSignal: unmountController.signal,
+				onceFired: nativeOnceFired
+			});
+			cleanups.push(() => stopJsxEvents());
 			mountSlots(initial.slots);
 			cleanups.push(() => mountedSlots.forEach((entry) => entry.unmount()));
 			attachListeners();
@@ -1936,6 +2311,7 @@ var IlhaBuilder = class IlhaBuilder {
 						userCleanup = entry.fn({
 							state,
 							derived,
+							action,
 							input,
 							host,
 							signal: runSignal
@@ -1964,11 +2340,23 @@ var IlhaBuilder = class IlhaBuilder {
 			let renderEpoch = 0;
 			const stopRender = effect(() => {
 				const epoch = ++renderEpoch;
-				const { html: rendered, slots: newSlotMap, binds: newBinds } = renderWithCtx(() => fn({
-					state,
-					derived,
-					input
-				}), host);
+				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;
@@ -1983,7 +2371,11 @@ var IlhaBuilder = class IlhaBuilder {
 						lastRendered = rendered;
 						return;
 					}
-					if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount(initialRenderedHtml, rendered, newSlotMap.keys())) {
+					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;
 					}
@@ -1994,6 +2386,7 @@ var IlhaBuilder = class IlhaBuilder {
 				}
 				detachListeners();
 				stopBindings();
+				stopJsxEvents();
 				const prevMountedCount = mountedSlots.size;
 				const leavingPromises = [];
 				for (const [id, entry] of mountedSlots) if (!newSlotMap.has(id)) {
@@ -2039,6 +2432,13 @@ var IlhaBuilder = class IlhaBuilder {
 					}
 					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) => {
@@ -2051,6 +2451,8 @@ var IlhaBuilder = class IlhaBuilder {
 			const unmount = () => {
 				if (tornDown) return;
 				tornDown = true;
+				disposed = true;
+				unmountController.abort();
 				ISLAND_MOUNT_HANDLES.delete(host);
 				stopRender();
 				detachListeners();
@@ -2098,7 +2500,7 @@ var IlhaBuilder = class IlhaBuilder {
 		* The declared return type omits {@link IslandCall} because TypeScript
 		* cannot narrow based on runtime stack state.
 		*/
-		const island = function(props) {
+		const island = ((props) => {
 			if (currentRenderCtx()) return {
 				[ISLAND_CALL]: true,
 				island,
@@ -2106,7 +2508,7 @@ var IlhaBuilder = class IlhaBuilder {
 				key: void 0
 			};
 			return renderToString(props);
-		};
+		});
 		island.toString = (props) => renderToString(props, true);
 		island.mount = (host, props) => mountIsland(host, props);
 		island[ISLAND_MOUNT_INTERNAL] = (host, props) => mountIslandInternal(host, props);
@@ -2329,6 +2731,7 @@ const rootBuilder = new IlhaBuilder({
 	defaultInput: null,
 	states: [],
 	deriveds: [],
+	actions: [],
 	ons: [],
 	effects: [],
 	onMounts: [],
@@ -2337,7 +2740,17 @@ const rootBuilder = new IlhaBuilder({
 	css: null,
 	as: null
 });
-const ilha = Object.assign(rootBuilder, {
+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,
@@ -2349,9 +2762,25 @@ const ilha = Object.assign(rootBuilder, {
 	untrack,
 	onUncaughtError
 });
+/** @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 index = ctx.events.length;
+	ctx.events.push({
+		type,
+		handler,
+		modifier
+	});
+	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));
+function __ilhaJsxSlot({ island, props, key }) {
+	return ilhaRaw(emitIslandSlot({
+		island,
+		props,
+		key
+	}));
 }
 const html = ilhaHtml;
 const raw = ilhaRaw;
@@ -2361,4 +2790,4 @@ const from = ilhaFrom;
 const context = ilhaContext;
 
 //#endregion
-export { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, __ilhaJsxSlot, batch, ilhaComputed as computed, context, css, ilha as default, ilhaEffect as effect, from, html, ilhaSignal, ilhaSignal as signal, mount, onUncaughtError, raw, untrack };
+export { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, __ilhaJsxEvent, __ilhaJsxSlot, batch, ilhaComputed as computed, context, css, ilha as default, ilhaEffect as effect, from, html, ilhaSignal, ilhaSignal as signal, mount, onUncaughtError, raw, untrack };