ilha 0.12.0 → 0.13.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, serializeServerManifest, setJsxRuntimeBridge } from "./internal.js";
+import { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, __ilhaJsxEvent, serializeServerManifest, setJsxRuntimeBridge, setServerActionBinder, setTemplateRenderer } from "./internal.js";
 import { effect as effect$1, endBatch, setActiveSub, signal, startBatch } from "alien-signals";
 
 //#region src/index.ts
@@ -511,15 +511,6 @@ function serializeScriptJson(value) {
 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");
-	while (lines.length && lines[0].trim() === "") lines.shift();
-	while (lines.length && lines[lines.length - 1].trim() === "") lines.pop();
-	if (!lines.length) return "";
-	const indent = Math.min(...lines.filter((l) => l.trim() !== "").map((l) => l.match(/^(\s*)/)[1].length));
-	return lines.map((l) => l.slice(indent)).join("\n");
-}
 const RAW = Symbol.for("ilha.raw");
 const SIGNAL_ACCESSOR = Symbol.for("ilha.signalAccessor");
 const ISLAND = Symbol.for("ilha.island");
@@ -592,7 +583,7 @@ function each(items) {
 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 `.withArgs()` payloads (JSON chars). */
+/** 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
@@ -601,13 +592,13 @@ function actionManifestId(fn) {
 	if (typeof fn !== "function" || !(SSR_ACTION_STUB in fn)) return void 0;
 	return fn[ACTION_MANIFEST_ID];
 }
-/** Bound args recorded by `.withArgs()` on an action reference, else undefined. */
+/** 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 `.withArgs(...args)` to an action accessor. Returns an explicit,
+/** 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
@@ -631,19 +622,19 @@ function assertJsonSafe(value, seen = /* @__PURE__ */ new WeakSet()) {
 		case "boolean": return;
 		case "number":
 			if (Number.isFinite(value)) return;
-			throw new TypeError("withArgs() rejects non-finite numbers.");
+			throw new TypeError("with() rejects non-finite numbers.");
 		case "object": break;
-		default: throw new TypeError(`withArgs() rejects ${typeof value} values.`);
+		default: throw new TypeError(`with() rejects ${typeof value} values.`);
 	}
-	if (seen.has(value)) throw new TypeError("withArgs() rejects circular 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("withArgs() accepts plain objects only.");
+	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(`withArgs() rejects unsafe key "${key}".`);
+		if (UNSAFE_KEYS.has(key)) throw new TypeError(`with() rejects unsafe key "${key}".`);
 		assertJsonSafe(child, seen);
 	}
 }
@@ -651,13 +642,13 @@ function assertJsonSafe(value, seen = /* @__PURE__ */ new WeakSet()) {
 function cloneJsonSafe(value) {
 	return structuredClone(value);
 }
-function attachWithArgs(accessor) {
-	Object.defineProperty(accessor, "withArgs", {
+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(`withArgs() payload exceeds ${MAX_BOUND_ARGS_CHARS} JSON characters.`);
+			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);
@@ -670,6 +661,13 @@ function attachWithArgs(accessor) {
 		}
 	});
 }
+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;
@@ -766,18 +764,18 @@ 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;
+function markSignalAccessor(read, write) {
+	read[SIGNAL_ACCESSOR] = true;
+	const accessor = read;
+	accessor.set = (value) => write(value);
+	accessor.update = (fn) => {
+		const prevSub = setActiveSub(void 0);
+		try {
+			write(fn(read()));
+		} finally {
+			setActiveSub(prevSub);
+		}
+	};
 	accessor.select = ((...args) => createSelectAccessor(accessor, args));
 	return accessor;
 }
@@ -863,17 +861,14 @@ function createSelectAccessor(root, input) {
 		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 read(root());
+	return markSignalAccessor(() => read(root()), (value) => {
 		const previousRoot = root();
-		const previousSelected = read(previousRoot);
-		const value = resolveSignalSetter(() => previousSelected, args[0]);
 		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.set(next);
 	});
 }
 function ilhaRaw(value) {
@@ -943,70 +938,18 @@ const BIND_VALID_KINDS = /* @__PURE__ */ new Set([
 	"group",
 	"this"
 ]);
-const BIND_PREFIX_RE = /\bbind:([a-zA-Z]+)\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;
-	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++) {
-		const ch = chunk[i];
-		if (quote !== null) {
-			if (ch === quote) quote = null;
-		} else if (ch === "\"" || ch === "'") quote = ch;
-		else if (ch === ">") return {
-			index: i,
-			quote
-		};
-	}
-	return {
-		index: -1,
-		quote
-	};
-}
-function extractElementStaticValue(prefix) {
-	const lastOpen = prefix.lastIndexOf("<");
-	if (lastOpen === -1) return null;
-	const tagPrefix = prefix.slice(lastOpen);
-	if (tagPrefix.includes(">")) return null;
-	const m = tagPrefix.match(/\bvalue\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+))/);
-	if (!m) return null;
-	return m[2] ?? m[3] ?? m[4] ?? null;
-}
-function emitBindSSR({ kind, index, accessor, prefixForStaticPeek }) {
+function emitBindSSR({ kind, index, accessor, optionValue }) {
 	const spec = `${kind}:${index}`;
 	let v;
 	try {
@@ -1020,183 +963,494 @@ function emitBindSSR({ kind, index, accessor, prefixForStaticPeek }) {
 		case "open": return [v ? ` open` : ``, spec];
 		case "files": return [``, spec];
 		case "this": return [``, spec];
-		case "group": {
-			const optionValue = extractElementStaticValue(prefixForStaticPeek);
+		case "group":
 			if (optionValue == null) return [``, spec];
 			return [(Array.isArray(v) ? v.map(String).includes(optionValue) : v != null && String(v) === optionValue) ? ` checked` : ``, spec];
-		}
 	}
 }
-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++) {
-		let chunk = strings[i];
-		if (stripLeadingQuote !== null) {
-			if (chunk.startsWith(stripLeadingQuote)) chunk = chunk.slice(1);
-			stripLeadingQuote = null;
-		}
-		if (pendingBindSpecs !== "" || pendingEventSpecs !== "") {
-			const { index: gtIdx, quote } = findTagCloseIndex(chunk, pendingQuote);
-			if (gtIdx === -1) pendingQuote = quote;
-			else {
-				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;
-			}
+const TEMPLATE_ATTRIBUTE = Symbol.for("ilha.templateAttribute");
+const TEMPLATE_PARTS = Symbol.for("ilha.templateParts");
+const TEMPLATE_SLOT_START = "ilha:";
+const TEMPLATE_SLOT_END = ":";
+const TEMPLATE_SLOT_RE = /\uE000ilha:(\d+):\uE001/g;
+const templateBlueprintCache = /* @__PURE__ */ new WeakMap();
+const TEMPLATE_PARSE_VOID_TAGS = /* @__PURE__ */ new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const TEMPLATE_PARSE_RAW_TEXT_TAGS = /* @__PURE__ */ new Set([
+	"script",
+	"style",
+	"textarea",
+	"title"
+]);
+function templateSkipWs(s, i) {
+	while (i < s.length && /[\t\n\f\r ]/.test(s[i])) i++;
+	return i;
+}
+function templateAsciiLower(source) {
+	return source.replace(/[A-Z]/g, (char) => String.fromCharCode(char.charCodeAt(0) + 32));
+}
+function templateClosingTagAt(lower, index, tag) {
+	const prefix = `</${tag}`;
+	if (!lower.startsWith(prefix, index)) return false;
+	const boundary = lower[index + prefix.length];
+	return boundary === ">" || boundary === "/" || /[\t\n\f\r ]/.test(boundary ?? "");
+}
+function templateFindClosingTag(lower, tag, from) {
+	const needle = `</${tag}`;
+	let index = lower.indexOf(needle, from);
+	while (index !== -1) {
+		if (templateClosingTagAt(lower, index, tag)) return index;
+		index = lower.indexOf(needle, index + 1);
+	}
+	return -1;
+}
+function templateParseFragment(source) {
+	const children = [];
+	templateParseNodes(source, templateAsciiLower(source), 0, null, children);
+	return {
+		nodeName: "#document-fragment",
+		childNodes: children
+	};
+}
+function templateParseNodes(s, lower, i, stop, out) {
+	while (i < s.length) {
+		if (stop && templateClosingTagAt(lower, i, stop)) {
+			const gt = s.indexOf(">", i);
+			return gt === -1 ? s.length : gt + 1;
 		}
-		if (i >= values.length) {
-			result += chunk;
+		if (s.startsWith("<!--", i)) {
+			const end = s.indexOf("-->", i + 4);
+			const close = end === -1 ? s.length : end + 3;
+			out.push({
+				nodeName: "#comment",
+				data: s.slice(i + 4, end === -1 ? s.length : end)
+			});
+			i = close;
 			continue;
 		}
-		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}.`);
+		if (stop === null && s[i] === "<" && s[i + 1] === "/") {
+			const gt = s.indexOf(">", i);
+			i = gt === -1 ? s.length : gt + 1;
+			continue;
 		}
-		const eventAttributeFragment = eventMatch !== null && chunk.slice(0, eventMatchStart).trim() === "";
-		if (eventMatch && (eventAttributeFragment || isEventAttributePosition(result + chunk, result.length + eventMatchStart))) {
-			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+$/, "");
-			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
-					});
-					pendingEventSpecs += (pendingEventSpecs ? "," : "") + `${eventName}:${index}`;
+		if (s[i] === "<" && /[A-Za-z]/.test(s[i + 1] ?? "")) {
+			const start = i;
+			i++;
+			const tagStart = i;
+			while (i < s.length && /[A-Za-z0-9:-]/.test(s[i])) i++;
+			const tagOrig = s.slice(tagStart, i);
+			const tag = tagOrig.toLowerCase();
+			const attrs = [];
+			const attrLocs = {};
+			i = templateSkipWs(s, i);
+			while (i < s.length && s[i] !== ">" && s[i] !== "/") {
+				const attrStart = i;
+				while (i < s.length && /[^\s=>/]/.test(s[i])) i++;
+				const rawName = s.slice(attrStart, i);
+				if (!rawName) break;
+				const name = rawName;
+				i = templateSkipWs(s, i);
+				let value = "";
+				if (s[i] === "=") {
+					i++;
+					i = templateSkipWs(s, i);
+					if (s[i] === "\"" || s[i] === "'") {
+						const q = s[i];
+						i++;
+						const vs = i;
+						while (i < s.length && s[i] !== q) i++;
+						value = s.slice(vs, i);
+						if (s[i] === q) i++;
+					} else {
+						const vs = i;
+						while (i < s.length && /[^\s>]/.test(s[i])) {
+							if (s[i] === "/") {
+								let j = i + 1;
+								while (j < s.length && /\s/.test(s[j])) j++;
+								if (j >= s.length || s[j] === ">") break;
+							}
+							i++;
+						}
+						value = s.slice(vs, i);
+					}
 				}
+				attrs.push({
+					name,
+					value
+				});
+				attrLocs[name] = {
+					startOffset: attrStart,
+					endOffset: i
+				};
+				i = templateSkipWs(s, i);
+			}
+			if (s[i] === "/") {
+				i++;
+				i = templateSkipWs(s, i);
 			}
-			if (openQuote) stripLeadingQuote = openQuote;
+			if (s[i] === ">") i++;
+			const el = {
+				nodeName: tagOrig,
+				tagName: tagOrig,
+				attrs,
+				childNodes: [],
+				sourceCodeLocation: {
+					attrs: attrLocs,
+					startTag: {
+						startOffset: start,
+						endOffset: i
+					}
+				}
+			};
+			if (!TEMPLATE_PARSE_VOID_TAGS.has(tag)) {
+				if (TEMPLATE_PARSE_RAW_TEXT_TAGS.has(tag)) {
+					const ci = templateFindClosingTag(lower, tag, i);
+					const textEnd = ci === -1 ? s.length : ci;
+					if (textEnd > i) el.childNodes.push({
+						nodeName: "#text",
+						value: s.slice(i, textEnd)
+					});
+					i = ci === -1 ? s.length : s.indexOf(">", ci) === -1 ? s.length : s.indexOf(">", ci) + 1;
+				} else i = templateParseNodes(s, lower, i, tag, el.childNodes);
+			}
+			out.push(el);
 			continue;
 		}
-		const m = chunk.match(BIND_PREFIX_RE);
-		if (m && isSignalAccessor(value)) {
-			const name = m[1];
-			const openQuote = m[2] ?? null;
-			if (!BIND_VALID_KINDS.has(name)) {
-				result += chunk + interpolateValue(value);
-				continue;
+		const next = s.indexOf("<", i);
+		const end = next === -1 ? s.length : next;
+		if (end > i) {
+			out.push({
+				nodeName: "#text",
+				value: s.slice(i, end)
+			});
+			i = end;
+			continue;
+		}
+		out.push({
+			nodeName: "#text",
+			value: s[i]
+		});
+		i++;
+	}
+	return i;
+}
+function templateSegments(value) {
+	const out = [];
+	let offset = 0;
+	for (const match of value.matchAll(TEMPLATE_SLOT_RE)) {
+		if (match.index > offset) out.push(value.slice(offset, match.index));
+		out.push({ slot: Number(match[1]) });
+		offset = match.index + match[0].length;
+	}
+	if (offset < value.length) out.push(value.slice(offset));
+	return out;
+}
+function templateBlueprint(node, source) {
+	if (node.nodeName === "#text") return {
+		kind: "text",
+		value: templateSegments(node.value)
+	};
+	if (node.nodeName === "#comment") return {
+		kind: "comment",
+		value: templateSegments(node.data)
+	};
+	if (node.nodeName === "#document-fragment") return {
+		kind: "fragment",
+		children: node.childNodes.map((child) => templateBlueprint(child, source)).filter(Boolean)
+	};
+	if (typeof node.tagName === "string") {
+		const props = {};
+		for (const attr of node.attrs ?? []) {
+			const location = node.sourceCodeLocation?.attrs?.[attr.name];
+			const sourceAttr = location ? source.slice(location.startOffset, location.endOffset) : attr.name;
+			const parts = templateSegments(attr.value);
+			parts.quoted = /=\s*["']/.test(sourceAttr);
+			parts.bare = !sourceAttr.includes("=");
+			props[attr.name] = parts;
+		}
+		return {
+			kind: "element",
+			tag: node.tagName,
+			props,
+			children: (node.childNodes ?? []).map((child) => templateBlueprint(child, source)).filter(Boolean),
+			selfClosing: node.sourceCodeLocation?.startTag ? /\/\s*>$/.test(source.slice(node.sourceCodeLocation.startTag.startOffset, node.sourceCodeLocation.startTag.endOffset)) : false
+		};
+	}
+	return null;
+}
+function templateCompile(strings) {
+	let source = strings[0] ?? "";
+	for (let i = 0; i < strings.length - 1; i++) source += `${TEMPLATE_SLOT_START}${i}${TEMPLATE_SLOT_END}${strings[i + 1] ?? ""}`;
+	return templateBlueprint(templateParseFragment(source), source) ?? {
+		kind: "fragment",
+		children: []
+	};
+}
+function templateBindSegments(parts, values) {
+	let value;
+	if (parts.length === 1 && typeof parts[0] !== "string") value = values[parts[0].slot];
+	else if (parts.some((part) => typeof part !== "string")) value = {
+		[TEMPLATE_PARTS]: true,
+		values: parts.map((part) => typeof part === "string" ? part : values[part.slot])
+	};
+	else value = parts.join("");
+	return {
+		[TEMPLATE_ATTRIBUTE]: true,
+		value,
+		quoted: parts.quoted ?? true,
+		bare: parts.bare ?? false
+	};
+}
+function templateBind(node, values) {
+	if (node.kind === "text") {
+		const out = [];
+		for (const part of node.value) if (typeof part === "string") {
+			if (part) out.push({
+				kind: "text",
+				value: part
+			});
+		} else out.push({
+			kind: "dynamic",
+			value: values[part.slot]
+		});
+		return out;
+	}
+	if (node.kind === "comment") {
+		const parts = node.value;
+		if (parts.length === 1 && typeof parts[0] === "string") return {
+			kind: "comment",
+			value: parts[0]
+		};
+		if (parts.every((part) => typeof part === "string")) return {
+			kind: "comment",
+			value: parts.join("")
+		};
+		return {
+			kind: "comment",
+			value: {
+				[TEMPLATE_PARTS]: true,
+				values: parts.map((part) => typeof part === "string" ? part : values[part.slot])
 			}
+		};
+	}
+	if (node.kind === "element") {
+		const props = {};
+		for (const [name, parts] of Object.entries(node.props)) props[name] = templateBindSegments(parts, values);
+		return {
+			kind: "element",
+			tag: node.tag,
+			props,
+			children: node.children.flatMap((child) => templateBind(child, values)),
+			selfClosing: node.selfClosing
+		};
+	}
+	return {
+		kind: "fragment",
+		children: node.children.flatMap((child) => templateBind(child, values))
+	};
+}
+function htmlTemplate(strings, values) {
+	let compiled = templateBlueprintCache.get(strings);
+	if (!compiled) {
+		compiled = templateCompile(strings);
+		templateBlueprintCache.set(strings, compiled);
+	}
+	const result = templateBind(compiled, values);
+	return Array.isArray(result) ? {
+		kind: "fragment",
+		children: result
+	} : result;
+}
+function templateAttribute(value) {
+	return value && typeof value === "object" && TEMPLATE_ATTRIBUTE in value ? value : null;
+}
+function templateParts(value) {
+	return value && typeof value === "object" && TEMPLATE_PARTS in value ? value.values : null;
+}
+const TEMPLATE_ATTRIBUTE_ALIASES = {
+	className: "class",
+	htmlFor: "for",
+	acceptCharset: "accept-charset",
+	httpEquiv: "http-equiv",
+	accentHeight: "accent-height",
+	alignmentBaseline: "alignment-baseline",
+	baselineShift: "baseline-shift",
+	clipPath: "clip-path",
+	clipRule: "clip-rule",
+	dominantBaseline: "dominant-baseline",
+	fillOpacity: "fill-opacity",
+	fillRule: "fill-rule",
+	floodColor: "flood-color",
+	floodOpacity: "flood-opacity",
+	fontFamily: "font-family",
+	fontSize: "font-size",
+	fontStyle: "font-style",
+	fontWeight: "font-weight",
+	markerEnd: "marker-end",
+	markerMid: "marker-mid",
+	markerStart: "marker-start",
+	stopColor: "stop-color",
+	stopOpacity: "stop-opacity",
+	strokeDasharray: "stroke-dasharray",
+	strokeDashoffset: "stroke-dashoffset",
+	strokeLinecap: "stroke-linecap",
+	strokeLinejoin: "stroke-linejoin",
+	strokeMiterlimit: "stroke-miterlimit",
+	strokeOpacity: "stroke-opacity",
+	strokeWidth: "stroke-width",
+	textAnchor: "text-anchor",
+	vectorEffect: "vector-effect",
+	xlinkHref: "xlink:href"
+};
+const TEMPLATE_VOID_ELEMENTS = /* @__PURE__ */ new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const TEMPLATE_STRING_BOOLEANS = /* @__PURE__ */ new Set([
+	"contenteditable",
+	"draggable",
+	"spellcheck"
+]);
+const TEMPLATE_SAFE_NAME = /^[A-Za-z_:][A-Za-z0-9:._-]*$/;
+const TEMPLATE_EVENT = /^on([a-z][a-z0-9-]*)(?::([a-z][a-z0-9-]*))?$/;
+function normalizeTemplateClass(value) {
+	if (Array.isArray(value)) return value.filter(Boolean).join(" ");
+	if (isPlainObject(value)) return Object.entries(value).filter(([, enabled]) => Boolean(enabled)).map(([name]) => name).join(" ");
+	return String(value);
+}
+function resolvedAttrText(rawSourceValue) {
+	const attribute = templateAttribute(rawSourceValue);
+	const sourceValue = attribute ? attribute.value : rawSourceValue;
+	if (sourceValue == null) return null;
+	const parts = templateParts(sourceValue);
+	const value = parts ? parts.map((part) => resolveTemplateValue(part) ?? "").join("") : resolveTemplateValue(sourceValue);
+	if (value == null || value === false) return null;
+	return String(value);
+}
+function renderTemplateElement(node) {
+	const ctx = currentRenderCtx();
+	let attrs = "";
+	const eventSpecs = [];
+	const bindSpecs = [];
+	for (const [sourceName, rawSourceValue] of Object.entries(node.props)) {
+		const attribute = templateAttribute(rawSourceValue);
+		const sourceValue = attribute ? attribute.value : rawSourceValue;
+		if (sourceName === "children" || sourceName === "key" || sourceValue == null) continue;
+		if (sourceName === "__proto__" || sourceName === "constructor" || sourceName === "prototype") continue;
+		const name = TEMPLATE_ATTRIBUTE_ALIASES[sourceName] ?? (/^on[A-Z]/.test(sourceName) ? sourceName.toLowerCase() : sourceName);
+		if (!TEMPLATE_SAFE_NAME.test(name)) continue;
+		if (name.startsWith("bind:")) {
+			const kind = name.slice(5);
+			if (!BIND_VALID_KINDS.has(kind) || !isSignalAccessor(sourceValue)) continue;
 			if (!ctx) {
-				const stripped = chunk.slice(0, chunk.length - m[0].length);
-				const quote = openQuote ?? "\"";
-				result += stripped + name + "=" + quote + interpolateValue(value) + quote;
-				if (openQuote) stripLeadingQuote = openQuote;
+				const value = sourceValue();
+				if (kind === "value") attrs += ` value="${escapeHtml(value ?? "")}"`;
+				else if ((kind === "checked" || kind === "open") && value) attrs += ` ${kind}`;
 				continue;
 			}
-			const matchStart = chunk.length - m[0].length;
-			const cleanPrefix = chunk.slice(0, matchStart).replace(/\s+$/, "");
 			const index = ctx.binds.length;
 			ctx.binds.push({
-				kind: name,
-				accessor: value
+				kind,
+				accessor: sourceValue
 			});
-			const [valueAttrs, spec] = emitBindSSR({
-				kind: name,
+			const [reflected, spec] = emitBindSSR({
+				kind,
 				index,
-				accessor: value,
-				prefixForStaticPeek: cleanPrefix
+				accessor: sourceValue,
+				optionValue: resolvedAttrText(node.props.value)
 			});
-			result += cleanPrefix + valueAttrs;
-			pendingBindSpecs += (pendingBindSpecs ? "," : "") + spec;
-			if (openQuote) stripLeadingQuote = openQuote;
+			attrs += reflected;
+			bindSpecs.push(spec);
 			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)}`;
+		if (/^on/i.test(name)) {
+			const match = TEMPLATE_EVENT.exec(name.toLowerCase());
+			if (templateParts(sourceValue)?.some((part) => typeof part === "function")) throw new Error(`[ilha] ${name} handler must occupy the entire attribute value. Write ${name}=\${handler}.`);
+			if (!match || typeof sourceValue !== "function") continue;
+			const eventName = match[1];
+			const rawModifier = match[2];
+			const modifier = rawModifier !== void 0 && NATIVE_EVENT_MODIFIERS.has(rawModifier) ? rawModifier : void 0;
+			if (rawModifier && !modifier) continue;
+			const index = __ilhaJsxEvent({
+				type: eventName,
+				handler: sourceValue,
+				modifier
+			});
+			if (index !== void 0) eventSpecs.push(`${eventName}:${index}`);
+			continue;
+		}
+		const lower = name.toLowerCase();
+		if (lower === "srcdoc") continue;
+		const parts = templateParts(sourceValue);
+		let value = parts ? parts.map((part) => resolveTemplateValue(part) ?? "").join("") : resolveTemplateValue(sourceValue);
+		if ((lower.startsWith("aria-") || TEMPLATE_STRING_BOOLEANS.has(lower)) && typeof value === "boolean") value = String(value);
+		if (lower === "class" && !isRawHtml(value)) value = normalizeTemplateClass(value);
+		const structuredStyle = lower === "style" && isPlainObject(value) && !isRawHtml(value);
+		if (structuredStyle) value = serializeStyle(value);
+		if (isUrlAttributeName(lower) && !isRawHtml(value) && !isSafeUrlAttrValue(node.tag, lower, String(value))) continue;
+		if (value === false || value == null) continue;
+		if (attribute?.bare && value === "" || value === true && !TEMPLATE_STRING_BOOLEANS.has(lower) && !lower.startsWith("aria-")) {
+			attrs += ` ${name}`;
 			continue;
 		}
-		result += chunk + interpolateValue(value);
+		const text = isRawHtml(value) ? value.value : String(value);
+		const escaped = isRawHtml(value) ? text : escapeHtml(text);
+		attrs += attribute && !attribute.quoted && !structuredStyle && !/[\s"'`=<>]/.test(text) ? ` ${name}=${escaped}` : ` ${name}="${escaped}"`;
+	}
+	const key = node.props.key;
+	if (key != null && node.props["data-key"] == null) attrs += ` data-key="${escapeHtml(key)}"`;
+	if (bindSpecs.length) attrs += ` data-ilha-bind="${bindSpecs.join(",")}"`;
+	if (eventSpecs.length) attrs += ` data-ilha-on="${eventSpecs.join(",")}"`;
+	if (TEMPLATE_VOID_ELEMENTS.has(node.tag.toLowerCase())) return `<${node.tag}${attrs}${node.selfClosing ? " /" : ""}>`;
+	return `<${node.tag}${attrs}>${node.children.map((child) => renderTemplateNode(child, node.tag)).join("")}</${node.tag}>`;
+}
+function renderTemplateNode(node, parentTag) {
+	switch (node.kind) {
+		case "fragment": return node.children.map((child) => renderTemplateNode(child, parentTag)).join("");
+		case "element": return renderTemplateElement(node);
+		case "dynamic": return interpolateValue(node.value);
+		case "comment": {
+			const parts = templateParts(node.value);
+			return `<!--${(parts ? parts.map((part) => resolveTemplateValue(part) ?? "").join("") : String(node.value)).replace(/--/g, "- -")}-->`;
+		}
+		case "text": {
+			const parent = parentTag?.toLowerCase();
+			return parent === "script" || parent === "style" ? node.value : escapeHtml(node.value);
+		}
 	}
-	if (pendingBindSpecs !== "") result += ` data-ilha-bind="${pendingBindSpecs}"`;
-	if (pendingEventSpecs !== "") result += ` data-ilha-on="${pendingEventSpecs}"`;
-	return {
-		[RAW]: true,
-		value: dedentString(result)
-	};
+}
+function renderTemplate(node) {
+	return ilhaRaw(renderTemplateNode(node));
+}
+setTemplateRenderer(renderTemplate);
+function ilhaHtml(strings, ...values) {
+	return renderTemplate(htmlTemplate(strings, values));
 }
 function isRawHtml(v) {
 	if (typeof v !== "object" || v === null) return false;
@@ -1209,9 +1463,8 @@ const contextRegistry = /* @__PURE__ */ new Map();
 function ilhaContextFn(key, initial) {
 	if (contextRegistry.has(key)) return contextRegistry.get(key);
 	const s = signal(initial);
-	const accessor = markSignalAccessor((...args) => {
-		if (args.length === 0) return s();
-		s(resolveSignalSetter(() => s(), args[0]));
+	const accessor = markSignalAccessor(() => s(), (next) => {
+		s(next);
 	});
 	contextRegistry.set(key, accessor);
 	return accessor;
@@ -1234,9 +1487,8 @@ const ilhaContext = Object.assign(ilhaContextFn, {
 function ilhaSignal(initial) {
 	if (currentFrame()?.creating && __DEV__);
 	const s = signal(initial);
-	return markSignalAccessor((...args) => {
-		if (args.length === 0) return s();
-		s(resolveSignalSetter(() => s(), args[0]));
+	return markSignalAccessor(() => s(), (next) => {
+		s(next);
 	});
 }
 /**
@@ -1346,7 +1598,7 @@ function persist(accessor, key, options = {}) {
 			if (value !== null) {
 				const prevSub = setActiveSub(void 0);
 				try {
-					accessor(() => value);
+					accessor.set(value);
 				} finally {
 					setActiveSub(prevSub);
 				}
@@ -1381,12 +1633,8 @@ function persist(accessor, key, options = {}) {
 	};
 }
 function createDerivedAccessor(read, write) {
-	const accessor = markSignalAccessor((...args) => {
-		if (args.length > 0) {
-			if (write) write(args[0]);
-			return;
-		}
-		return read().value;
+	const accessor = markSignalAccessor(() => read().value, (value) => {
+		if (write) write(value);
 	});
 	return new Proxy(accessor, { get(target, prop, receiver) {
 		if (prop === "loading" || prop === "value" || prop === "error") return read()[prop];
@@ -1556,8 +1804,8 @@ function applyTemplateBindings(host, binds, phase = "all") {
 			const accessor = record.accessor;
 			if (spec.kind === "this") {
 				if (phase !== "listen") {
-					accessor(el);
-					cleanups.push(() => accessor(null));
+					accessor.set(el);
+					cleanups.push(() => accessor.set(null));
 				}
 				continue;
 			}
@@ -1585,7 +1833,7 @@ function applyTemplateBindings(host, binds, phase = "all") {
 							}
 							arr.push(coercedVal);
 						} else if (!groupRead.checked && idx !== -1) arr.splice(idx, 1);
-						accessor(arr);
+						accessor.set(arr);
 						return;
 					}
 					const currentVal = accessor();
@@ -1594,7 +1842,7 @@ function applyTemplateBindings(host, binds, phase = "all") {
 						const n = Number(groupRead);
 						coerced = Number.isNaN(n) ? 0 : n;
 					} else if (typeof currentVal === "boolean") coerced = Boolean(groupRead);
-					accessor(coerced);
+					accessor.set(coerced);
 					return;
 				}
 				const currentVal = accessor();
@@ -1603,7 +1851,7 @@ function applyTemplateBindings(host, binds, phase = "all") {
 					const n = Number(raw);
 					value = Number.isNaN(n) ? 0 : n;
 				} else if (typeof currentVal === "boolean") value = Boolean(raw);
-				accessor(value);
+				accessor.set(value);
 			};
 			el.addEventListener(event, listener);
 			cleanups.push(() => el.removeEventListener(event, listener));
@@ -1687,8 +1935,8 @@ function acquireSlot(kind) {
 *
 * 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);
+* To store a function VALUE, pass it to `.set`:
+*   onSave.set(nextCallback);
 */
 function state(init) {
 	const frame = currentFrame();
@@ -1700,9 +1948,7 @@ function state(init) {
 	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]);
+	const acc = markSignalAccessor(() => s(), (next) => {
 		s(next);
 	});
 	f.slots[f.cursor - 1] = {
@@ -1871,7 +2117,7 @@ function action(fn) {
 			data: { get: () => void 0 },
 			error: { get: () => void 0 }
 		});
-		attachWithArgs(noop);
+		attachWith(noop);
 		return noop;
 	}
 	const manifestId = `a${f.actionIndex++}`;
@@ -1900,7 +2146,7 @@ function action(fn) {
 			fn
 		};
 		const ssrAccessor = invoke;
-		attachWithArgs(ssrAccessor);
+		attachWith(ssrAccessor);
 		return ssrAccessor;
 	}
 	const instance = f.instance;
@@ -1997,7 +2243,7 @@ function action(fn) {
 	instance.actionIds.set(slot.acc, manifestId);
 	const clientAccessor = invoke;
 	clientAccessor[ACTION_MANIFEST_ID] = manifestId;
-	attachWithArgs(clientAccessor);
+	attachWith(clientAccessor);
 	return clientAccessor;
 }
 /**
@@ -2824,7 +3070,7 @@ const ilha = ((...args) => {
 		if (snapshot !== false) {
 			const doState = snapshot === true || snapshot.state !== false;
 			const doDerived = snapshot === true || snapshot.derived !== false;
-			const doSkipOnMount = explicitSkipOnMount ?? (doState || doDerived);
+			const doSkipOnMount = explicitSkipOnMount ?? false;
 			const snapshotData = { v: 2 };
 			const input = resolveInput(resolvedProps);
 			const probeFrame = freshFrame({ ssr: true });
@@ -2974,4 +3220,4 @@ const mount = mountAll;
 const context = ilhaContext;
 
 //#endregion
-export { action, batch, context, css, derived, each, effect, html, ilha, ilhaSignal, isSafeUrl, isSafeUrlAttrValue, isUrlAttributeName, json, morph, mount, onError, onUncaughtError, persist, raw, serializeStyle, state, untrack };
+export { action, batch, context, css, derived, each, effect, html, ilha, isSafeUrl, isSafeUrlAttrValue, isUrlAttributeName, json, morph, mount, onError, onUncaughtError, persist, raw, serializeStyle, state, untrack };