ilha 0.0.1 → 0.2.0

package/dist/index.js

@@ -1,15 +1,74 @@
 import { effect, setActiveSub, signal } from "alien-signals";
 //#region src/index.ts
+const __DEV__ = typeof process !== "undefined" ? process.env?.["NODE_ENV"] !== "production" : true;
+function warn(msg) {
+	if (__DEV__) console.warn(`[ilha] ${msg}`);
+}
+function syncAttributes(from, to) {
+	for (const { name, value } of to.attributes) if (from.getAttribute(name) !== value) from.setAttribute(name, value);
+	for (const { name } of Array.from(from.attributes)) if (!to.hasAttribute(name)) from.removeAttribute(name);
+}
+function morphChildren(fromParent, toParent) {
+	const fromNodes = Array.from(fromParent.childNodes);
+	const toNodes = Array.from(toParent.childNodes);
+	for (let i = fromNodes.length - 1; i >= toNodes.length; i--) fromNodes[i].remove();
+	for (let i = 0; i < toNodes.length; i++) {
+		const toNode = toNodes[i];
+		const fromNode = fromNodes[i];
+		if (!fromNode) {
+			fromParent.appendChild(toNode.cloneNode(true));
+			continue;
+		}
+		if (fromNode.nodeType !== toNode.nodeType) {
+			fromParent.replaceChild(toNode.cloneNode(true), fromNode);
+			continue;
+		}
+		if (fromNode.nodeType === 3 || fromNode.nodeType === 8) {
+			if (fromNode.nodeValue !== toNode.nodeValue) fromNode.nodeValue = toNode.nodeValue;
+			continue;
+		}
+		if (fromNode.nodeType === 1) {
+			const fromEl = fromNode;
+			const toEl = toNode;
+			if (fromEl.localName !== toEl.localName || fromEl.namespaceURI !== toEl.namespaceURI) {
+				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
+				continue;
+			}
+			if (fromEl.localName === "input" && fromEl.type !== toEl.type) {
+				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
+				continue;
+			}
+			syncAttributes(fromEl, toEl);
+			if (fromEl.localName === "textarea") {
+				const newText = toEl.textContent ?? "";
+				if (fromEl.textContent !== newText) fromEl.textContent = newText;
+				fromEl.value = fromEl.defaultValue;
+			} else morphChildren(fromEl, toEl);
+		}
+	}
+}
+function morphInner(from, to) {
+	if (from.localName !== to.localName || from.namespaceURI !== to.namespaceURI) throw new Error("[ilha] morph: elements must match");
+	morphChildren(from, to);
+}
 function validateSchema(schema, value) {
 	const result = schema["~standard"].validate(value);
 	if (result instanceof Promise) throw new Error("[ilha] Async schemas are not supported.");
 	if (result.issues) throw new Error(`[ilha] Validation failed:\n${result.issues.map((i) => `  - ${i.message}`).join("\n")}`);
 	return result.value;
 }
+const ESC = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
 function escapeHtml(value) {
-	return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+	return String(value).replace(/[&<>"']/g, (c) => ESC[c]);
 }
 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();
@@ -21,8 +80,12 @@ const RAW = Symbol("ilha.raw");
 const SLOT_ACCESSOR = Symbol("ilha.slotAccessor");
 const SIGNAL_ACCESSOR = Symbol("ilha.signalAccessor");
 const SLOT_ATTR = "data-ilha-slot";
-const SLOT_PROPS_ATTR = "data-ilha-props";
+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}}</style>`;
+}
 function makeSlotAccessor(render) {
 	const fn = (props) => ({
 		[RAW]: true,
@@ -48,21 +111,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;
+}
+function interpolateValue(v) {
+	if (v == null) return "";
+	if (Array.isArray(v)) return v.map(interpolateValue).join("");
+	if (typeof v === "object" && RAW in v) return v.value;
+	if (isSlotAccessor(v)) return v.toString();
+	if (isSignalAccessor(v)) return escapeHtml(v());
+	if (typeof v === "function") return escapeHtml(v());
+	return escapeHtml(v);
+}
 function ilhaHtml(strings, ...values) {
 	let result = "";
 	for (let i = 0; i < strings.length; i++) {
 		result += strings[i];
-		if (i < values.length) {
-			const v = values[i];
-			if (v == null) continue;
-			if (typeof v === "object" && RAW in v) result += v.value;
-			else if (isSlotAccessor(v)) result += v.toString();
-			else if (isSignalAccessor(v)) result += escapeHtml(v());
-			else if (typeof v === "function") result += escapeHtml(v());
-			else result += escapeHtml(v);
-		}
+		if (i < values.length) result += interpolateValue(values[i]);
 	}
-	return dedentString(result);
+	return {
+		[RAW]: true,
+		value: dedentString(result)
+	};
+}
+function unwrapHtml(v) {
+	return typeof v === "object" && RAW in v ? v.value : v;
 }
 const contextRegistry = /* @__PURE__ */ new Map();
 function ilhaContext(key, initial) {
@@ -75,39 +154,23 @@ function ilhaContext(key, initial) {
 	contextRegistry.set(key, accessor);
 	return accessor;
 }
-function makePlainDerived(entries, state, input) {
-	const derived = {};
-	for (const entry of entries) {
-		const result = entry.fn({
-			state,
-			input,
-			signal: new AbortController().signal
-		});
-		if (result instanceof Promise) derived[entry.key] = {
-			loading: true,
-			value: void 0,
-			error: void 0
-		};
-		else derived[entry.key] = {
-			loading: false,
-			value: result,
-			error: void 0
-		};
-	}
-	return derived;
-}
-function buildDerivedSignals(entries, state, input) {
+function buildDerivedSignals(entries, state, input, derivedSnapshot) {
 	const envelopes = /* @__PURE__ */ new Map();
 	const stops = [];
 	for (const entry of entries) {
-		const env = signal({
+		const env = signal(derivedSnapshot?.[entry.key] ?? {
 			loading: true,
 			value: void 0,
 			error: void 0
 		});
 		envelopes.set(entry.key, env);
 		let ac = new AbortController();
+		let skipFirst = derivedSnapshot != null && entry.key in derivedSnapshot;
 		const stopEffect = effect(() => {
+			if (skipFirst) {
+				skipFirst = false;
+				return;
+			}
 			ac.abort();
 			ac = new AbortController();
 			const currentAc = ac;
@@ -184,8 +247,7 @@ function resolveBindConfig(el) {
 			return input.checked ? input.value : void 0;
 		},
 		write: (el, v) => {
-			const input = el;
-			input.checked = String(v ?? "") === input.value;
+			el.checked = String(v ?? "") === el.value;
 		}
 	};
 	if (tag === "input" && type === "number") return {
@@ -201,15 +263,15 @@ function resolveBindConfig(el) {
 		write: (el, v) => el.value = String(v ?? "")
 	};
 }
-function applyBindings(el, bindings, state) {
+function applyBindings(host, bindings, state) {
 	const cleanups = [];
 	for (const binding of bindings) {
-		const targets = binding.selector === "" ? [el] : Array.from(el.querySelectorAll(binding.selector));
+		const accessor = typeof binding.target === "function" ? binding.target : state[binding.target];
+		const targets = binding.selector === "" ? [host] : Array.from(host.querySelectorAll(binding.selector));
+		if (__DEV__ && binding.selector !== "" && targets.length === 0) warn(`bind(): selector "${binding.selector}" matched no elements inside the island host. Check that the element exists in your render output.`);
 		for (const target of targets) {
 			const { event, read, write } = resolveBindConfig(target);
-			const accessor = state[binding.stateKey];
-			const input = target;
-			const isRadio = input.tagName.toLowerCase() === "input" && input.type?.toLowerCase() === "radio";
+			const isRadio = target.tagName.toLowerCase() === "input" && target.type?.toLowerCase() === "radio";
 			write(target, accessor());
 			const listener = () => {
 				const raw = read(target);
@@ -229,112 +291,148 @@ function applyBindings(el, bindings, state) {
 	}
 	return () => cleanups.forEach((c) => c());
 }
-function parseOnArgs(selectorOrCombined, callbackOrEventType) {
-	let selector;
-	let rawEvent;
-	if (typeof callbackOrEventType === "function") {
-		const atIdx = selectorOrCombined.lastIndexOf("@");
-		if (atIdx === -1) {
-			selector = "";
-			rawEvent = selectorOrCombined.startsWith("@") ? selectorOrCombined.slice(1) : selectorOrCombined;
-		} else {
-			selector = selectorOrCombined.slice(0, atIdx);
-			rawEvent = selectorOrCombined.slice(atIdx + 1);
-		}
-	} else {
-		selector = selectorOrCombined;
-		rawEvent = callbackOrEventType;
-	}
-	const parts = rawEvent.split(":");
+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));
-	const options = {
-		once: modifiers.has("once"),
-		capture: modifiers.has("capture"),
-		passive: modifiers.has("passive")
-	};
 	return {
 		selector,
 		eventType,
-		options
+		options: {
+			once: modifiers.has("once"),
+			capture: modifiers.has("capture"),
+			passive: modifiers.has("passive")
+		}
 	};
 }
+const _mountedHosts = __DEV__ ? /* @__PURE__ */ new WeakSet() : null;
 var IlhaBuilder = class IlhaBuilder {
-	constructor(_schema, _states, _deriveds, _ons, _effects, _slots, _transition, _binds) {
-		this._schema = _schema;
-		this._states = _states;
-		this._deriveds = _deriveds;
-		this._ons = _ons;
-		this._effects = _effects;
-		this._slots = _slots;
-		this._transition = _transition;
-		this._binds = _binds;
+	_cfg;
+	constructor(cfg) {
+		this._cfg = cfg;
 	}
 	input(schema) {
-		return new IlhaBuilder(schema, [], [], [], [], {}, null, []);
+		return new IlhaBuilder({
+			schema,
+			states: [],
+			deriveds: [],
+			ons: [],
+			effects: [],
+			onMounts: [],
+			slots: {},
+			transition: null,
+			binds: [],
+			css: null
+		});
 	}
 	state(key, init) {
-		return new IlhaBuilder(this._schema, [...this._states, {
-			key,
-			init
-		}], this._deriveds, this._ons, this._effects, this._slots, this._transition, this._binds);
+		const cfg = this._cfg;
+		return new IlhaBuilder({
+			...cfg,
+			states: [...cfg.states, {
+				key,
+				init
+			}]
+		});
 	}
 	derived(key, fn) {
-		return new IlhaBuilder(this._schema, this._states, [...this._deriveds, {
-			key,
-			fn
-		}], this._ons, this._effects, this._slots, this._transition, this._binds);
+		const cfg = this._cfg;
+		return new IlhaBuilder({
+			...cfg,
+			deriveds: [...cfg.deriveds, {
+				key,
+				fn
+			}]
+		});
 	}
-	bind(selector, stateKey) {
-		return new IlhaBuilder(this._schema, this._states, this._deriveds, this._ons, this._effects, this._slots, this._transition, [...this._binds, {
-			selector,
-			stateKey
-		}]);
+	bind(selector, target) {
+		return new IlhaBuilder({
+			...this._cfg,
+			binds: [...this._cfg.binds, {
+				selector,
+				target
+			}]
+		});
 	}
-	on(selectorOrCombined, callbackOrEventType, handler) {
-		const parsed = parseOnArgs(selectorOrCombined, callbackOrEventType);
-		const resolvedHandler = typeof callbackOrEventType === "function" ? callbackOrEventType : handler;
-		return new IlhaBuilder(this._schema, this._states, this._deriveds, [...this._ons, {
-			selector: parsed.selector,
-			event: parsed.eventType,
-			options: parsed.options,
-			handler: resolvedHandler
-		}], this._effects, this._slots, this._transition, this._binds);
+	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,
+				handler
+			}]
+		});
 	}
 	effect(fn) {
-		return new IlhaBuilder(this._schema, this._states, this._deriveds, this._ons, [...this._effects, { fn }], this._slots, this._transition, this._binds);
+		return new IlhaBuilder({
+			...this._cfg,
+			effects: [...this._cfg.effects, { fn }]
+		});
+	}
+	onMount(fn) {
+		return new IlhaBuilder({
+			...this._cfg,
+			onMounts: [...this._cfg.onMounts, { fn }]
+		});
 	}
 	slot(name, island) {
-		return new IlhaBuilder(this._schema, this._states, this._deriveds, this._ons, this._effects, {
-			...this._slots,
-			[name]: island
-		}, this._transition, this._binds);
+		return new IlhaBuilder({
+			...this._cfg,
+			slots: {
+				...this._cfg.slots,
+				[name]: island
+			}
+		});
 	}
 	transition(opts) {
-		return new IlhaBuilder(this._schema, this._states, this._deriveds, this._ons, this._effects, this._slots, opts, this._binds);
+		return new IlhaBuilder({
+			...this._cfg,
+			transition: opts
+		});
+	}
+	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]);
+			}
+			source = result;
+		}
+		if (__DEV__ && this._cfg.css !== null) warn("css(): called more than once on the same builder chain. The previous stylesheet has been discarded. Compose styles into a single .css() call instead.");
+		return new IlhaBuilder({
+			...this._cfg,
+			css: source
+		});
 	}
 	render(fn) {
-		const schema = this._schema;
-		const states = this._states;
-		const deriveds = this._deriveds;
-		const ons = this._ons;
-		const effects = this._effects;
-		const slotDefs = this._slots;
-		const transition = this._transition;
-		const binds = this._binds;
+		const { schema, states, deriveds, ons, effects, onMounts, slots: slotDefs, transition, binds, css: cssSource } = this._cfg;
+		const stylePrefix = cssSource != null ? buildScopedStyle(cssSource) : "";
 		function resolveInput(props) {
 			const value = props ?? {};
 			if (!schema) return value;
 			return validateSchema(schema, value);
 		}
-		function makeSlotsProxy(ssr) {
+		function makeSlotsProxy(ssr, host) {
 			return new Proxy({}, { get(_, prop) {
 				const name = String(prop);
 				if (!slotDefs[name]) return makeSlotAccessor(() => "");
-				if (ssr) return makeSlotAccessor((props) => slotDefs[name].toString(props));
+				if (ssr) return makeSlotAccessor((props) => {
+					const json = props ? ` ${PROPS_ATTR}='${escapeHtml(JSON.stringify(props))}'` : "";
+					return `<div ${SLOT_ATTR}="${escapeHtml(name)}"${json}>${slotDefs[name].toString(props)}</div>`;
+				});
 				return makeSlotAccessor((props) => {
-					const json = props ? ` data-props='${escapeHtml(JSON.stringify(props))}'` : "";
-					return `<div data-ilha-slot="${escapeHtml(name)}"${json}></div>`;
+					const liveSlot = host?.querySelector(`[${SLOT_ATTR}="${escapeHtml(name)}"]`);
+					if (liveSlot) return liveSlot.outerHTML;
+					const json = props ? ` ${PROPS_ATTR}='${escapeHtml(JSON.stringify(props))}'` : "";
+					return `<div ${SLOT_ATTR}="${escapeHtml(name)}"${json}></div>`;
 				});
 			} });
 		}
@@ -361,7 +459,7 @@ var IlhaBuilder = class IlhaBuilder {
 			}
 			return state;
 		}
-		function renderToString(props) {
+		function renderToString(props, sync = false) {
 			const input = resolveInput(props);
 			const state = buildPlainState(input);
 			const slots = makeSlotsProxy(true);
@@ -382,19 +480,24 @@ var IlhaBuilder = class IlhaBuilder {
 					};
 				}
 			});
-			if (!results.some((r) => r.result instanceof Promise)) {
+			if (!results.some((r) => r.result instanceof Promise) || sync) {
 				const derived = {};
-				for (const r of results) derived[r.key] = {
+				for (const r of results) if (r.result instanceof Promise) derived[r.key] = {
+					loading: true,
+					value: void 0,
+					error: void 0
+				};
+				else derived[r.key] = {
 					loading: false,
 					value: r.result,
 					error: void 0
 				};
-				return fn({
+				return stylePrefix + unwrapHtml(fn({
 					state,
 					derived,
 					input,
 					slots
-				});
+				}));
 			}
 			return Promise.all(results.map(async (r) => {
 				try {
@@ -419,54 +522,82 @@ var IlhaBuilder = class IlhaBuilder {
 			})).then((resolved) => {
 				const derived = {};
 				for (const r of resolved) derived[r.key] = r.envelope;
-				return fn({
+				return stylePrefix + unwrapHtml(fn({
 					state,
 					derived,
 					input,
 					slots
-				});
-			});
-		}
-		function renderToStringSyncOnly(props) {
-			const input = resolveInput(props);
-			const state = buildPlainState(input);
-			const slots = makeSlotsProxy(true);
-			return fn({
-				state,
-				derived: makePlainDerived(deriveds, state, input),
-				input,
-				slots
+				}));
 			});
 		}
-		function mountIsland(el, props) {
+		function mountIsland(host, props) {
+			if (__DEV__ && _mountedHosts) {
+				if (_mountedHosts.has(host)) {
+					warn(`mount(): this element is already mounted. Call the previous unmount() first to avoid memory leaks and duplicate event listeners.
+Element: ${host.outerHTML.slice(0, 120)}`);
+					return () => {};
+				}
+				_mountedHosts.add(host);
+			}
+			if (props === void 0) {
+				const rawProps = host.getAttribute(PROPS_ATTR);
+				if (rawProps) try {
+					props = JSON.parse(rawProps);
+				} catch {
+					warn("Failed to parse data-ilha-props — invalid JSON, falling back to empty props.");
+				}
+			}
 			const input = resolveInput(props);
-			let snapshot;
-			const rawState = el.getAttribute(STATE_ATTR);
+			let snapshotRaw;
+			const rawState = host.getAttribute(STATE_ATTR);
 			if (rawState) try {
-				snapshot = JSON.parse(rawState);
+				snapshotRaw = JSON.parse(rawState);
 			} catch {
-				console.warn("[ilha] Failed to parse data-ilha-state");
+				warn("Failed to parse data-ilha-state — invalid JSON, snapshot ignored.");
+			}
+			const stateSnapshot = snapshotRaw ? Object.fromEntries(Object.entries(snapshotRaw).filter(([k]) => k !== "_derived" && k !== "_skipOnMount")) : 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;
 			}
-			const state = buildSignalState(input, snapshot);
+			const hydrated = snapshotRaw != null;
+			const shouldSkipOnMount = hydrated && snapshotRaw?.["_skipOnMount"] === true;
+			const state = buildSignalState(input, stateSnapshot);
 			const cleanups = [];
 			if (transition?.enter) {
-				const result = transition.enter(el);
+				const result = transition.enter(host);
 				if (result instanceof Promise) result.catch(console.error);
 			}
-			const { proxy: derived, stop: stopDerived } = buildDerivedSignals(deriveds, state, input);
+			const { proxy: derived, stop: stopDerived } = buildDerivedSignals(deriveds, state, input, derivedSnapshot);
 			cleanups.push(stopDerived);
+			const slotCleanups = /* @__PURE__ */ new Map();
 			const slotEls = /* @__PURE__ */ new Map();
-			function snapshotSlots() {
-				slotEls.clear();
-				for (const name of Object.keys(slotDefs)) {
-					const existing = el.querySelector(`[${SLOT_ATTR}="${name}"]`);
-					if (existing) slotEls.set(name, existing);
-				}
-			}
-			function restoreSlots() {
-				for (const [name, slotEl] of slotEls) {
-					const placeholder = el.querySelector(`[${SLOT_ATTR}="${name}"]`);
-					if (placeholder) placeholder.replaceWith(slotEl);
+			function mountSlots() {
+				for (const [name, childIsland] of Object.entries(slotDefs)) {
+					const slotEl = host.querySelector(`[${SLOT_ATTR}="${name}"]`);
+					if (!slotEl) continue;
+					if (slotEls.get(name) === slotEl) continue;
+					slotEls.set(name, slotEl);
+					slotCleanups.get(name)?.();
+					let slotProps;
+					const rawProps = slotEl.getAttribute(PROPS_ATTR) ?? slotEl.getAttribute("data-props");
+					if (rawProps) try {
+						slotProps = JSON.parse(rawProps);
+					} catch {
+						warn(`Failed to parse props on [${SLOT_ATTR}="${name}"] — invalid JSON ignored.`);
+					}
+					const prevSub = setActiveSub(void 0);
+					try {
+						slotCleanups.set(name, childIsland.mount(slotEl, slotProps));
+					} finally {
+						setActiveSub(prevSub);
+					}
 				}
 			}
 			const listeners = [];
@@ -474,17 +605,22 @@ var IlhaBuilder = class IlhaBuilder {
 			function attachListeners() {
 				for (const entry of ons) {
 					if (entry.options.once && firedOnce.has(entry)) continue;
-					(entry.selector === "" ? [el] : Array.from(el.querySelectorAll(entry.selector))).forEach((target) => {
+					const targets = entry.selector === "" ? [host] : Array.from(host.querySelectorAll(entry.selector));
+					if (__DEV__ && entry.selector !== "" && targets.length === 0) warn(`on(): selector "${entry.selector}" matched no elements at mount time. If the element is rendered later, this is expected — otherwise check your selector.`);
+					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 result = entry.handler({
 								state,
+								derived,
 								input,
-								el,
+								host,
+								target: eventTarget,
 								event
 							});
 							if (result instanceof Promise) result.catch(console.error);
@@ -493,9 +629,9 @@ var IlhaBuilder = class IlhaBuilder {
 							...entry.options,
 							once: false
 						};
-						target.addEventListener(entry.event, listener, opts);
+						listenerTarget.addEventListener(entry.event, listener, opts);
 						listeners.push({
-							target,
+							target: listenerTarget,
 							type: entry.event,
 							fn: listener,
 							options: opts,
@@ -508,54 +644,54 @@ var IlhaBuilder = class IlhaBuilder {
 				for (const l of listeners) l.target.removeEventListener(l.type, l.fn, l.options);
 				listeners.length = 0;
 			}
-			const slots = makeSlotsProxy(false);
-			el.innerHTML = fn({
+			const slots = makeSlotsProxy(false, host);
+			if (!(hydrated && host.childNodes.length > 0)) host.innerHTML = stylePrefix + unwrapHtml(fn({
 				state,
 				derived,
 				input,
 				slots
-			});
+			}));
 			attachListeners();
-			let stopBindings = applyBindings(el, binds, state);
+			let stopBindings = applyBindings(host, binds, state);
 			cleanups.push(() => stopBindings());
-			for (const [name, childIsland] of Object.entries(slotDefs)) {
-				const slotEl = el.querySelector(`[${SLOT_ATTR}="${name}"]`);
-				if (!slotEl) continue;
-				slotEls.set(name, slotEl);
-				let slotProps;
-				const ilhaProps = slotEl.getAttribute(SLOT_PROPS_ATTR);
-				const dataProps = slotEl.getAttribute("data-props");
-				if (ilhaProps) try {
-					slotProps = JSON.parse(ilhaProps);
-				} catch {
-					console.warn(`[ilha] Failed to parse ${SLOT_PROPS_ATTR} on [${SLOT_ATTR}="${name}"]`);
-				}
-				else if (dataProps) try {
-					slotProps = JSON.parse(dataProps);
-				} catch {
-					console.warn(`[ilha] Failed to parse data-props on [${SLOT_ATTR}="${name}"]`);
+			mountSlots();
+			cleanups.push(() => slotCleanups.forEach((unmount) => unmount()));
+			if (!shouldSkipOnMount) for (const entry of onMounts) {
+				const prevSub = setActiveSub(void 0);
+				let userCleanup;
+				try {
+					userCleanup = entry.fn({
+						state,
+						derived,
+						input,
+						host,
+						hydrated
+					});
+				} finally {
+					setActiveSub(prevSub);
 				}
-				cleanups.push(childIsland.mount(slotEl, slotProps));
+				if (userCleanup) cleanups.push(userCleanup);
 			}
 			let initialized = false;
 			const stopRender = effect(() => {
-				const html = fn({
+				const html = stylePrefix + unwrapHtml(fn({
 					state,
 					derived,
 					input,
 					slots
-				});
+				}));
 				if (!initialized) {
 					initialized = true;
 					return;
 				}
-				snapshotSlots();
 				detachListeners();
 				stopBindings();
-				el.innerHTML = html;
-				restoreSlots();
+				const tpl = document.createElement("template");
+				tpl.innerHTML = `<div>${html}</div>`;
+				morphInner(host, tpl.content.firstElementChild);
 				attachListeners();
-				stopBindings = applyBindings(el, binds, state);
+				stopBindings = applyBindings(host, binds, state);
+				mountSlots();
 			});
 			cleanups.push(stopRender);
 			cleanups.push(detachListeners);
@@ -569,7 +705,7 @@ var IlhaBuilder = class IlhaBuilder {
 					userCleanup = entry.fn({
 						state,
 						input,
-						el
+						host
 					});
 				});
 				cleanups.push(() => {
@@ -577,9 +713,13 @@ var IlhaBuilder = class IlhaBuilder {
 					if (userCleanup) userCleanup();
 				});
 			}
+			let tornDown = false;
 			return () => {
+				if (tornDown) return;
+				tornDown = true;
+				if (__DEV__ && _mountedHosts) _mountedHosts.delete(host);
 				if (transition?.leave) {
-					const result = transition.leave(el);
+					const result = transition.leave(host);
 					if (result instanceof Promise) {
 						result.then(() => cleanups.forEach((c) => c())).catch(console.error);
 						return;
@@ -591,57 +731,111 @@ var IlhaBuilder = class IlhaBuilder {
 		const island = function(props) {
 			return renderToString(props);
 		};
-		island.toString = (props) => renderToStringSyncOnly(props);
-		island.mount = (el, props) => mountIsland(el, props);
+		island.toString = (props) => renderToString(props, true);
+		island.mount = (host, props) => mountIsland(host, props);
+		island.hydratable = async (props, opts) => {
+			const { name, as: tag = "div", snapshot = false, skipOnMount: explicitSkipOnMount } = opts;
+			const resolvedProps = props ?? {};
+			const inner = await renderToString(resolvedProps);
+			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);
+				if (doState) for (const entry of states) snapshotData[entry.key] = plainState[entry.key]();
+				if (doDerived) {
+					const derivedResults = {};
+					for (const entry of deriveds) try {
+						const result = await Promise.resolve(entry.fn({
+							state: plainState,
+							input,
+							signal: new AbortController().signal
+						}));
+						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)
+						};
+					}
+					snapshotData["_derived"] = derivedResults;
+				}
+				if (doSkipOnMount) snapshotData["_skipOnMount"] = true;
+				stateAttr = ` ${STATE_ATTR}='${escapeHtml(JSON.stringify(snapshotData))}'`;
+			}
+			return `<${tag} data-ilha="${escapeHtml(name)}" ${PROPS_ATTR}='${encodedProps}'${stateAttr}>${inner}</${tag}>`;
+		};
 		return island;
 	}
 };
 function ilhaFrom(selector, island, props) {
-	const el = typeof selector === "string" ? document.querySelector(selector) : selector;
-	if (!el) {
+	const host = typeof selector === "string" ? document.querySelector(selector) : selector;
+	if (!host) {
 		console.warn(`[ilha] from(): element not found: ${selector}`);
 		return null;
 	}
-	return island.mount(el, props);
+	return island.mount(host, props);
 }
 function mountAll(registry, options = {}) {
 	const root = options.root ?? document.body;
 	const lazy = options.lazy ?? false;
-	const hydrate = options.hydrate ?? false;
 	const unmounts = [];
-	function activateEl(el) {
-		const name = el.getAttribute("data-ilha");
+	function activateEl(host) {
+		const name = host.getAttribute("data-ilha");
 		if (!name) return;
 		const island = registry[name];
-		if (!island) return;
+		if (!island) {
+			warn(`mount(): no island registered under the name "${name}". Available names: [${Object.keys(registry).join(", ")}]. Check the data-ilha attribute on the element.`);
+			return;
+		}
 		let props = {};
-		const rawProps = el.getAttribute("data-props");
+		const rawProps = host.getAttribute(PROPS_ATTR);
 		if (rawProps) try {
 			props = JSON.parse(rawProps);
 		} catch {
-			console.warn(`[ilha] Failed to parse data-props on [data-ilha="${name}"]`);
+			warn(`Failed to parse ${PROPS_ATTR} on [data-ilha="${name}"] — invalid JSON ignored.`);
 		}
-		if (hydrate) {
-			const snapshot = el.innerHTML;
-			const unmount = island.mount(el, props);
-			if (!el.innerHTML) el.innerHTML = snapshot;
-			unmounts.push(unmount);
-		} else unmounts.push(island.mount(el, props));
+		unmounts.push(island.mount(host, props));
 	}
 	const els = Array.from(root.querySelectorAll("[data-ilha]"));
 	if (lazy && typeof IntersectionObserver !== "undefined") {
+		let disposed = false;
 		const io = new IntersectionObserver((entries) => {
+			if (disposed) return;
 			for (const entry of entries) if (entry.isIntersecting) {
 				activateEl(entry.target);
 				io.unobserve(entry.target);
 			}
 		});
 		els.forEach((el) => io.observe(el));
-		unmounts.push(() => io.disconnect());
+		unmounts.push(() => {
+			disposed = true;
+			io.disconnect();
+		});
 	} else els.forEach(activateEl);
 	return { unmount: () => unmounts.forEach((u) => u()) };
 }
-const rootBuilder = new IlhaBuilder(null, [], [], [], [], {}, null, []);
+const rootBuilder = new IlhaBuilder({
+	schema: null,
+	states: [],
+	deriveds: [],
+	ons: [],
+	effects: [],
+	onMounts: [],
+	slots: {},
+	transition: null,
+	binds: [],
+	css: null
+});
 const ilha = Object.assign(rootBuilder, {
 	html: ilhaHtml,
 	raw: ilhaRaw,
@@ -649,10 +843,20 @@ const ilha = Object.assign(rootBuilder, {
 	from: ilhaFrom,
 	context: ilhaContext
 });
+function type(coerce) {
+	return { "~standard": {
+		version: 1,
+		vendor: "ilha",
+		validate(value) {
+			return { value: coerce ? coerce(value) : value };
+		}
+	} };
+}
 const html = ilhaHtml;
 const raw = ilhaRaw;
+const css = ilhaCss;
 const mount = mountAll;
 const from = ilhaFrom;
 const context = ilhaContext;
 //#endregion
-export { context, ilha as default, from, html, mount, raw };
+export { context, css, ilha as default, from, html, mount, raw, type };