ilha 0.5.0 → 0.6.1

package/dist/index.d.ts

@@ -51,10 +51,19 @@ interface IslandCall {
 interface MarkedSignalAccessor<T> {
   (): T;
   (...args: [value: T]): void;
+  select<S>(selector: (state: T) => S): MarkedSignalAccessor<S>;
   [SIGNAL_ACCESSOR]: true;
 }
 declare function ilhaRaw(value: string): RawHtml;
 declare function ilhaCss(strings: TemplateStringsArray | string, ...values: (string | number)[]): string;
+type JsxChild = unknown;
+type JsxProps = Record<string, unknown> | null | undefined;
+type JsxType = string | ((props: Record<string, unknown>) => unknown);
+declare function ilhaJsx(type: JsxType, props: JsxProps, maybeKey?: JsxChild | string | number, ...restChildren: JsxChild[]): RawHtml;
+declare function ilhaFragment(props: {
+  children?: JsxChild;
+} | null, ...children: JsxChild[]): RawHtml;
+declare function ilhaJsxDEV(type: JsxType, props: JsxProps, maybeKey?: string | number, _source?: unknown, _self?: unknown): RawHtml;
 declare function ilhaHtml(strings: TemplateStringsArray, ...values: unknown[]): RawHtml;
 type ContextSignal<T> = {
   (): T;
@@ -72,7 +81,7 @@ declare function ilhaContext<T>(key: string, initial: T): ContextSignal<T>;
  * or `.render()` automatically subscribes the surrounding reactive scope —
  * so when the signal changes, dependents re-run as if it were local state.
  */
-declare function ilhaSignal<T>(initial: T): ExternalSignal<T>;
+declare function ilhaSignal<T>(initial: T): SignalAccessor<T>;
 /**
  * Run `fn` with reactive tracking suspended. Reading signals inside `fn`
  * returns their current value without subscribing the surrounding scope.
@@ -107,10 +116,7 @@ interface DerivedEntry<TInput, TStateMap extends Record<string, unknown>> {
   fn: DerivedFn<TInput, TStateMap, unknown>;
 }
 type IslandDerived<TDerivedMap extends Record<string, unknown>> = { readonly [K in keyof TDerivedMap]: DerivedValue<TDerivedMap[K]> };
-interface ExternalSignal<T = unknown> {
-  (): T;
-  (value: T): void;
-}
+type ExternalSignal<T = unknown> = SignalAccessor<T>;
 type SignalAccessor<T> = MarkedSignalAccessor<T>;
 type MergeState<TStateMap extends Record<string, unknown>, K extends string, V> = Omit<TStateMap, K> & Record<K, V>;
 type IslandState<TStateMap extends Record<string, unknown>> = { readonly [K in keyof TStateMap]-?: SignalAccessor<TStateMap[K]> };
@@ -235,7 +241,7 @@ interface MountOptions {
   lazy?: boolean;
 }
 interface MountResult {
-  unmount: () => void;
+  unmount: () => void | Promise<void>;
 }
 interface BuilderConfig<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown>> {
   schema: StandardSchemaV1 | null;
@@ -269,6 +275,10 @@ declare function mountAll(registry: IslandRegistry, options?: MountOptions): Mou
 declare const ilha: IlhaBuilder<Record<string, unknown>, Record<never, never>, Record<never, never>> & {
   html: typeof ilhaHtml;
   raw: typeof ilhaRaw;
+  jsx: typeof ilhaJsx;
+  jsxs: typeof ilhaJsx;
+  jsxDEV: typeof ilhaJsxDEV;
+  Fragment: typeof ilhaFragment;
   mount: typeof mountAll;
   from: typeof ilhaFrom;
   context: typeof ilhaContext;
@@ -278,9 +288,13 @@ declare const ilha: IlhaBuilder<Record<string, unknown>, Record<never, never>, R
 };
 declare const html: typeof ilhaHtml;
 declare const raw: typeof ilhaRaw;
+declare const jsx: typeof ilhaJsx;
+declare const jsxs: typeof ilhaJsx;
+declare const jsxDEV: typeof ilhaJsxDEV;
+declare const Fragment: typeof ilhaFragment;
 declare const css: typeof ilhaCss;
 declare const mount: typeof mountAll;
 declare const from: typeof ilhaFrom;
 declare const context: typeof ilhaContext;
 //#endregion
-export { DerivedValue, ErrorContext, ErrorSource, ExternalSignal, HandlerContext, HandlerContextFor, HydratableOptions, ISLAND_MOUNT_INTERNAL, Island, IslandDerived, IslandState, KeyedIsland, MountOptions, MountResult, OnMountContext, RawHtml, SignalAccessor, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, mount, raw, untrack };
+export { DerivedValue, ErrorContext, ErrorSource, ExternalSignal, Fragment, HandlerContext, HandlerContextFor, HydratableOptions, ISLAND_MOUNT_INTERNAL, Island, IslandDerived, IslandState, KeyedIsland, MountOptions, MountResult, OnMountContext, RawHtml, SignalAccessor, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, jsx, jsxDEV, jsxs, mount, raw, untrack };

package/dist/index.js

@@ -16,9 +16,76 @@ function shallowEqualInput(a, b) {
 	}
 	return true;
 }
+function extractDirectChildSlotIdsInOrder(html) {
+	if (typeof document === "undefined") return [];
+	const tpl = document.createElement("template");
+	tpl.innerHTML = html;
+	const root = tpl.content;
+	const ids = [];
+	for (const el of root.querySelectorAll("[data-ilha-slot]")) {
+		if (!(el instanceof Element)) continue;
+		let parent = el.parentElement ?? el.parentNode;
+		let nested = false;
+		while (parent && parent !== root) {
+			if (parent instanceof Element && parent.hasAttribute("data-ilha-slot")) {
+				nested = true;
+				break;
+			}
+			parent = parent instanceof Element ? parent.parentElement ?? parent.parentNode : parent.parentNode;
+		}
+		if (!nested) ids.push(el.getAttribute("data-ilha-slot"));
+	}
+	return ids;
+}
+function extractSlotPropsAttr(html, slotId) {
+	const escaped = slotId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const withProps = new RegExp(`<div\\s[^>]*data-ilha-slot="${escaped}"[^>]*data-ilha-props='([^']*)'`);
+	const m = html.match(withProps);
+	if (m) return m[1];
+	const withoutProps = new RegExp(`<div\\s[^>]*data-ilha-slot="${escaped}"`);
+	return html.match(withoutProps) ? "" : null;
+}
+function isStableInlineSlotMount(initialHtml, renderedHtml, slotIds) {
+	const initialOrder = extractDirectChildSlotIdsInOrder(initialHtml);
+	const renderedOrder = extractDirectChildSlotIdsInOrder(renderedHtml);
+	if (initialOrder.length !== renderedOrder.length || initialOrder.some((id, i) => id !== renderedOrder[i])) return false;
+	for (const id of slotIds) {
+		const initialProps = extractSlotPropsAttr(initialHtml, id);
+		const renderedProps = extractSlotPropsAttr(renderedHtml, id);
+		if (initialProps === null || renderedProps === null) return false;
+		if (initialProps !== renderedProps) return false;
+	}
+	return true;
+}
+function serializeSlotProps(props) {
+	return props === void 0 ? "" : JSON.stringify(props);
+}
+const MORPH_CONTROLLER_SLOT_SELECTOR = "[data-slot]";
+const MORPH_CONTROLLER_ATTRS = new Set([
+	"data-checked",
+	"data-unchecked",
+	"data-indeterminate",
+	"aria-checked",
+	"data-open",
+	"data-closed",
+	"data-state",
+	"aria-expanded",
+	"aria-hidden",
+	"data-selected",
+	"data-panel-open"
+]);
+function shouldPreserveMorphAttr(el, name) {
+	return el.matches(MORPH_CONTROLLER_SLOT_SELECTOR) && MORPH_CONTROLLER_ATTRS.has(name);
+}
 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);
+	for (const { name, value } of to.attributes) {
+		if (shouldPreserveMorphAttr(from, name)) continue;
+		if (from.getAttribute(name) !== value) from.setAttribute(name, value);
+	}
+	for (const { name } of Array.from(from.attributes)) {
+		if (shouldPreserveMorphAttr(from, name)) continue;
+		if (!to.hasAttribute(name)) from.removeAttribute(name);
+	}
 }
 function morphChildren(fromParent, toParent) {
 	const fromNodes = Array.from(fromParent.childNodes);
@@ -88,14 +155,14 @@ function dedentString(str) {
 	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("ilha.raw");
-const SIGNAL_ACCESSOR = Symbol("ilha.signalAccessor");
-const ISLAND = Symbol("ilha.island");
-const ISLAND_CALL = Symbol("ilha.islandCall");
+const RAW = Symbol.for("ilha.raw");
+const SIGNAL_ACCESSOR = Symbol.for("ilha.signalAccessor");
+const ISLAND = Symbol.for("ilha.island");
+const ISLAND_CALL = Symbol.for("ilha.islandCall");
 /** @internal Internal hook used by a parent's mountSlots to mount a child island and
 * retain a handle to push updated props into it on subsequent parent
 * re-renders. Not part of the public surface. */
-const ISLAND_MOUNT_INTERNAL = Symbol("ilha.islandMountInternal");
+const ISLAND_MOUNT_INTERNAL = Symbol.for("ilha.islandMountInternal");
 const SLOT_ATTR = "data-ilha-slot";
 const PROPS_ATTR = "data-ilha-props";
 const STATE_ATTR = "data-ilha-state";
@@ -122,10 +189,19 @@ function currentRenderCtx() {
 	return renderCtxStack[renderCtxStack.length - 1];
 }
 function isIsland(v) {
-	return typeof v === "function" && ISLAND in v;
+	if (typeof v !== "function") return false;
+	if (ISLAND in v) return true;
+	return Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.island");
 }
 function isIslandCall(v) {
-	return (typeof v === "object" || typeof v === "function") && v !== null && ISLAND_CALL in v;
+	if (v == null || typeof v !== "object" && typeof v !== "function") return false;
+	if (ISLAND_CALL in v) return true;
+	if (Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.islandCall")) return true;
+	if (typeof v === "object" && "island" in v) {
+		const island = v.island;
+		return typeof island === "function" && (ISLAND in island || Object.getOwnPropertySymbols(island).some((s) => s.description === "ilha.island"));
+	}
+	return false;
 }
 function emitIslandSlot(island, props, key) {
 	const ctx = currentRenderCtx();
@@ -171,10 +247,86 @@ async function resolveAsyncChildren(html, ctx) {
 }
 function markSignalAccessor(fn) {
 	fn[SIGNAL_ACCESSOR] = true;
-	return fn;
+	const accessor = fn;
+	accessor.select = (selector) => createSelectAccessor(accessor, selector);
+	return accessor;
 }
 function isSignalAccessor(v) {
-	return typeof v === "function" && SIGNAL_ACCESSOR in v;
+	if (typeof v !== "function") return false;
+	if (SIGNAL_ACCESSOR in v) return true;
+	return Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.signalAccessor");
+}
+function getAtPath(obj, path) {
+	let cur = obj;
+	for (const seg of path) {
+		if (cur == null) return void 0;
+		cur = cur[seg];
+	}
+	return cur;
+}
+function setAtPath(obj, path, value) {
+	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);
+		if (Object.is(next, updated)) return obj;
+		const copy = obj.slice();
+		copy[idx] = updated;
+		return copy;
+	}
+	if (obj !== null && typeof obj === "object") {
+		const record = obj;
+		const key = String(head);
+		const next = record[key];
+		const updated = rest.length === 0 ? value : setAtPath(next, rest, value);
+		if (rest.length === 0) {
+			if (Object.is(next, value)) return obj;
+		} else if (Object.is(next, updated)) return obj;
+		return {
+			...record,
+			[key]: updated
+		};
+	}
+	return rest.length === 0 ? value : setAtPath(void 0, rest, value);
+}
+function toPathSegment(prop) {
+	if (typeof prop === "symbol") return null;
+	if (prop === "length") return null;
+	if (/^\d+$/.test(prop)) return Number(prop);
+	return prop;
+}
+function trackSelectPath(rootState, selector) {
+	const path = [];
+	const track = (value) => {
+		if (value === null || typeof value !== "object" && typeof value !== "function") return value;
+		return new Proxy(value, { get(target, prop, receiver) {
+			const seg = toPathSegment(prop);
+			if (seg != null) path.push(seg);
+			const next = Reflect.get(target, prop, receiver);
+			return seg != null && next !== null && typeof next === "object" ? track(next) : next;
+		} });
+	};
+	selector(track(rootState));
+	return path;
+}
+function createSelectAccessor(root, selector) {
+	const path = trackSelectPath(root(), selector);
+	const selected = selector(root());
+	const resolved = path.length === 0 ? root() : getAtPath(root(), path);
+	if (!Object.is(selected, resolved)) {
+		const msg = "select(): selector must only traverse nested properties or array indexes — derived or transformed values are not supported.";
+		if (__DEV__) warn(msg);
+		throw new Error(msg);
+	}
+	if (__DEV__ && path.length === 0) warn("select(): selector did not traverse nested state — bind writes may replace the entire root value.");
+	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);
+	});
 }
 function ilhaRaw(value) {
 	return {
@@ -191,10 +343,143 @@ function ilhaCss(strings, ...values) {
 	}
 	return result;
 }
+const SAFE_NAME_RE = /^[A-Za-z_:][A-Za-z0-9:._-]*$/;
+const SAFE_BIND_LOCAL_RE = /^[A-Za-z][A-Za-z0-9]*$/;
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const SAFE_CSS_PROP_RE = /^(-{2}[a-zA-Z][a-zA-Z0-9-]*|-?[a-zA-Z][a-zA-Z0-9-]*)$/;
+const URL_ATTRS = new Set([
+	"href",
+	"src",
+	"action",
+	"formaction",
+	"cite",
+	"data",
+	"poster"
+]);
+const SAFE_URL_RE = /^(?!javascript:|data:text\/html|data:text\/xml|data:application\/xhtml\+xml|data:image\/svg|vbscript:)/i;
+function normalizeClass(value) {
+	if (Array.isArray(value)) return value.filter(Boolean).join(" ");
+	if (value && typeof value === "object") return Object.entries(value).filter(([, enabled]) => Boolean(enabled)).map(([name]) => name).join(" ");
+	return String(value);
+}
+function normalizeJsxChildren(props, children) {
+	const propChildren = props && "children" in props ? props.children : void 0;
+	return (children.length > 0 ? children : propChildren === void 0 ? [] : [propChildren]).flat(1);
+}
+function normalizeJsxSlotKey(raw) {
+	const key = String(raw);
+	if (key.trim().length === 0) throw new Error("jsx key requires a non-empty string.");
+	if (key.includes(":")) throw new Error(`jsx key cannot contain the slot separator ":" (got "${key}").`);
+	return key;
+}
+/** React-style `key` (props or 3rd jsx arg) on island components → `k:{key}` slot ids. */
+function extractJsxSlotKey(props, keyArg) {
+	const fromProps = props?.key;
+	const raw = keyArg ?? (typeof fromProps === "string" || typeof fromProps === "number" ? fromProps : void 0);
+	if (raw == null) return void 0;
+	return normalizeJsxSlotKey(raw);
+}
+function serializeStyle(value) {
+	return Object.entries(value).map(([k, v]) => {
+		if (!SAFE_CSS_PROP_RE.test(k)) return "";
+		const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+		let safeV = String(v).replace(/["<>{};]/g, "");
+		if (/expression\(/i.test(safeV) || /^javascript:/i.test(safeV)) return "";
+		return `${prop}:${safeV}`;
+	}).filter(Boolean).join(";");
+}
+function pushJsxAttr(chunks, values, name, value) {
+	if (value == null || value === false || name === "children" || name === "key") return;
+	if (name === "__proto__" || name === "constructor" || name === "prototype") return;
+	if (name.startsWith("bind:")) {
+		const [prefix, localName, ...rest] = name.split(":");
+		if (prefix !== "bind" || rest.length > 0 || !localName || !SAFE_BIND_LOCAL_RE.test(localName)) return;
+		if (!isSignalAccessor(value)) return;
+		const safeName = `${prefix}:${localName}`;
+		chunks[chunks.length - 1] += ` ${safeName}=`;
+		values.push(value);
+		chunks.push("");
+		return;
+	}
+	if (!SAFE_NAME_RE.test(name)) return;
+	let safeName = name;
+	if (safeName === "className") safeName = "class";
+	if (safeName === "htmlFor") safeName = "for";
+	if (safeName.startsWith("on")) return;
+	if (safeName === "class") value = normalizeClass(value);
+	if (safeName === "style" && value && typeof value === "object") value = serializeStyle(value);
+	if ((URL_ATTRS.has(safeName) || /:(href|src|action|formaction|cite|data|poster)$/.test(safeName)) && typeof value === "string" && !SAFE_URL_RE.test(value.trim())) return;
+	if (value === true) {
+		chunks[chunks.length - 1] += ` ${safeName}`;
+		return;
+	}
+	chunks[chunks.length - 1] += ` ${safeName}="`;
+	values.push(value);
+	chunks.push("\"");
+}
+function renderJsxElement(type, props, children) {
+	const chunks = [`<${type}`];
+	const values = [];
+	if (props) for (const [name, value] of Object.entries(props)) pushJsxAttr(chunks, values, name, value);
+	chunks[chunks.length - 1] += ">";
+	if (!VOID_ELEMENTS.has(type)) {
+		for (const child of children) {
+			values.push(child);
+			chunks.push("");
+		}
+		chunks[chunks.length - 1] += `</${type}>`;
+	} else if (children.length > 0 && __DEV__) warn(`Void element <${type}> should not have children. They will be ignored.`);
+	return ilhaHtml(chunks, ...values);
+}
+function ilhaJsx(type, props, maybeKey, ...restChildren) {
+	const hasKeyArg = typeof maybeKey === "string" || typeof maybeKey === "number";
+	const keyFromArg = hasKeyArg ? maybeKey : void 0;
+	const normalizedChildren = normalizeJsxChildren(props, hasKeyArg || maybeKey === void 0 ? restChildren : [maybeKey, ...restChildren]);
+	if (typeof type === "function") {
+		const slotKey = extractJsxSlotKey(props, typeof keyFromArg === "string" || typeof keyFromArg === "number" ? keyFromArg : void 0);
+		const componentProps = {
+			...props ?? {},
+			...normalizedChildren.length > 0 ? { children: normalizedChildren } : {}
+		};
+		delete componentProps["key"];
+		const out = type(Object.keys(componentProps).length ? componentProps : {});
+		if (isIslandCall(out)) {
+			if (slotKey !== void 0) out.key = slotKey;
+			return ilhaHtml`${out}`;
+		}
+		if (isRawHtml(out)) return out;
+		if (typeof out === "string" && isIsland(type)) return ilhaRaw(emitIslandSlot(type, componentProps, slotKey));
+		if (typeof out === "string") return ilhaHtml`${out}`;
+		return ilhaHtml`${out}`;
+	}
+	return renderJsxElement(type, props, normalizedChildren);
+}
+function ilhaFragment(props, ...children) {
+	const normalizedChildren = normalizeJsxChildren(props, children);
+	return ilhaHtml(["", ...normalizedChildren.map(() => "")], ...normalizedChildren);
+}
+function ilhaJsxDEV(type, props, maybeKey, _source, _self) {
+	return ilhaJsx(type, props, maybeKey);
+}
 function interpolateValue(v) {
-	if (v == null) return "";
+	if (v == null || v === true || v === false) return "";
 	if (Array.isArray(v)) return v.map(interpolateValue).join("");
-	if (typeof v === "object" && RAW in v) return v.value;
+	if (isRawHtml(v)) return v.value;
 	if (isIslandCall(v)) {
 		const call = typeof v === "function" ? v() : v;
 		return emitIslandSlot(call.island, call.props, call.key);
@@ -216,7 +501,11 @@ const BIND_VALID_KINDS = new Set([
 ]);
 const BIND_PREFIX_RE = /\bbind:([a-zA-Z]+)\s*=\s*("|')?$/;
 function formatDateForInput(d) {
-	if (d instanceof Date && !isNaN(d.getTime())) {
+	if (d instanceof Date) {
+		if (isNaN(d.getTime())) {
+			if (__DEV__) warn("bind:valueAsDate received an invalid Date object — value attribute will be empty.");
+			return "";
+		}
 		const pad = (n) => String(n).padStart(2, "0");
 		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 	}
@@ -316,8 +605,15 @@ function ilhaHtml(strings, ...values) {
 		value: dedentString(result)
 	};
 }
+/** Duck-type RawHtml — works across duplicate `ilha` bundles (distinct RAW symbols). */
+function isRawHtml(v) {
+	if (typeof v !== "object" || v === null || !("value" in v)) return false;
+	if (typeof v.value !== "string") return false;
+	if (RAW in v) return true;
+	return Object.getOwnPropertySymbols(v).some((s) => s.description === "ilha.raw");
+}
 function unwrapHtml(v) {
-	return typeof v === "object" && RAW in v ? v.value : v;
+	return isRawHtml(v) ? v.value : v;
 }
 const contextRegistry = /* @__PURE__ */ new Map();
 function ilhaContext(key, initial) {
@@ -1045,10 +1341,38 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				}
 			}
 			const mountedSlots = /* @__PURE__ */ new Map();
+			const leavingSlots = /* @__PURE__ */ new Map();
+			function teardownMountedSlot(id, entry) {
+				mountedSlots.delete(id);
+				const token = Symbol();
+				const result = entry.unmount();
+				const remove = (stub) => {
+					const leaving = leavingSlots.get(id);
+					if (!leaving || leaving.token !== token) return;
+					leaving.el.remove();
+					stub?.remove();
+					leavingSlots.delete(id);
+				};
+				if (result instanceof Promise) {
+					let stub;
+					if (entry.el.isConnected) {
+						stub = document.createElement("div");
+						stub.setAttribute(SLOT_ATTR, id);
+						entry.el.replaceWith(stub);
+					}
+					leavingSlots.set(id, {
+						el: entry.el,
+						token
+					});
+					result.finally(() => remove(stub));
+				} else entry.el.remove();
+			}
 			function findSlot(id) {
+				const leavingEls = new Set([...leavingSlots.values()].map((l) => l.el));
 				const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id.replace(/["\\]/g, "\\$&");
 				const candidates = host.querySelectorAll(`[${SLOT_ATTR}="${escaped}"]`);
 				for (const candidate of candidates) {
+					if (leavingEls.has(candidate)) continue;
 					let el = candidate;
 					while (el && el !== host) {
 						if (el.hasAttribute("data-ilha")) break;
@@ -1059,10 +1383,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				return null;
 			}
 			function mountSlots(slotMap) {
-				for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) {
-					entry.unmount();
-					mountedSlots.delete(id);
-				}
+				for (const [id, entry] of mountedSlots) if (!slotMap.has(id)) teardownMountedSlot(id, entry);
 				for (const [id, { island: childIsland, props }] of slotMap) {
 					const existing = mountedSlots.get(id);
 					if (existing) {
@@ -1113,6 +1434,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 								listeners.splice(0, listeners.length, ...listeners.filter((l) => l.entry !== entry));
 							}
 							const eventTarget = event.target instanceof Element ? event.target : listenerTarget;
+							const handlerTarget = entry.selector === "" ? eventTarget : listenerTarget;
 							let handlerSignal;
 							if (entry.abortable) {
 								let entryMap = invocationControllers.get(entry);
@@ -1134,7 +1456,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 									derived,
 									input,
 									host,
-									target: eventTarget,
+									target: handlerTarget,
 									event,
 									signal: handlerSignal
 								});
@@ -1175,11 +1497,11 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				input
 			}), hasExistingContent ? host : void 0);
 			if (!hasExistingContent) host.innerHTML = stylePrefix + initial.html;
-			attachListeners();
 			let stopBindings = applyTemplateBindings(host, initial.binds);
 			cleanups.push(() => stopBindings());
 			mountSlots(initial.slots);
 			cleanups.push(() => mountedSlots.forEach((entry) => entry.unmount()));
+			attachListeners();
 			if (!shouldSkipOnMount) for (const entry of onMounts) {
 				const prevSub = setActiveSub(void 0);
 				let userCleanup;
@@ -1249,19 +1571,34 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				if (!initialized) {
 					initialized = true;
 					if (rendered === initialRenderedHtml) return;
+					if (mountedSlots.size > 0 && mountedSlots.size === newSlotMap.size && [...newSlotMap.keys()].every((id) => mountedSlots.has(id)) && isStableInlineSlotMount(initialRenderedHtml, rendered, newSlotMap.keys())) return;
 				}
 				detachListeners();
 				stopBindings();
+				const prevMountedCount = mountedSlots.size;
+				const removedSlotIds = [];
 				for (const [id, entry] of mountedSlots) if (!newSlotMap.has(id)) {
-					entry.unmount();
-					mountedSlots.delete(id);
+					teardownMountedSlot(id, entry);
+					removedSlotIds.push(id);
+				}
+				for (const id of removedSlotIds) {
+					if (leavingSlots.has(id)) continue;
+					const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(id) : id.replace(/["\\]/g, "\\$&");
+					for (const el of host.querySelectorAll(`[${SLOT_ATTR}="${escaped}"]`)) el.remove();
 				}
 				const preserved = /* @__PURE__ */ new Map();
+				const listShrunk = newSlotMap.size < prevMountedCount;
 				for (const [id, entry] of mountedSlots) {
 					if (!newSlotMap.has(id)) continue;
 					if (!entry.el.isConnected) continue;
+					if (listShrunk && id.startsWith("p:")) {
+						teardownMountedSlot(id, entry);
+						continue;
+					}
 					const stub = document.createElement("div");
 					stub.setAttribute(SLOT_ATTR, id);
+					const incomingProps = serializeSlotProps(newSlotMap.get(id)?.props);
+					if (incomingProps !== "") stub.setAttribute(PROPS_ATTR, incomingProps);
 					entry.el.replaceWith(stub);
 					preserved.set(id, entry.el);
 				}
@@ -1284,16 +1621,23 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 				if (__DEV__ && _mountedHosts) _mountedHosts.delete(host);
 				stopRender();
 				detachListeners();
+				const pending = [];
+				for (const [, entry] of mountedSlots) {
+					const result = entry.unmount();
+					if (result instanceof Promise) pending.push(result);
+				}
 				if (transition?.leave) {
 					const result = transition.leave(host);
-					if (result instanceof Promise) {
-						result.then(() => {
-							for (const c of cleanups) c();
-						}).catch(console.error);
-						return;
-					}
+					if (result instanceof Promise) pending.push(result);
 				}
-				for (const c of cleanups) c();
+				const finish = () => {
+					for (const c of cleanups) c();
+				};
+				if (pending.length > 0) return Promise.all(pending).then(finish).catch((err) => {
+					console.error(err);
+					finish();
+				});
+				finish();
 			};
 			const updateProps = (nextProps) => {
 				if (tornDown) return;
@@ -1453,7 +1797,14 @@ function mountAll(registry, options = {}) {
 			io.disconnect();
 		});
 	} else els.forEach(activateEl);
-	return { unmount: () => unmounts.forEach((u) => u()) };
+	return { unmount: () => {
+		const pending = [];
+		for (const u of unmounts) {
+			const result = u();
+			if (result instanceof Promise) pending.push(result);
+		}
+		if (pending.length > 0) return Promise.all(pending).then(() => {});
+	} };
 }
 const rootBuilder = new IlhaBuilder({
 	schema: null,
@@ -1469,6 +1820,10 @@ const rootBuilder = new IlhaBuilder({
 const ilha = Object.assign(rootBuilder, {
 	html: ilhaHtml,
 	raw: ilhaRaw,
+	jsx: ilhaJsx,
+	jsxs: ilhaJsx,
+	jsxDEV: ilhaJsxDEV,
+	Fragment: ilhaFragment,
 	mount: mountAll,
 	from: ilhaFrom,
 	context: ilhaContext,
@@ -1478,9 +1833,13 @@ const ilha = Object.assign(rootBuilder, {
 });
 const html = ilhaHtml;
 const raw = ilhaRaw;
+const jsx = ilhaJsx;
+const jsxs = ilhaJsx;
+const jsxDEV = ilhaJsxDEV;
+const Fragment = ilhaFragment;
 const css = ilhaCss;
 const mount = mountAll;
 const from = ilhaFrom;
 const context = ilhaContext;
 //#endregion
-export { ISLAND_MOUNT_INTERNAL, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, mount, raw, untrack };
+export { Fragment, ISLAND_MOUNT_INTERNAL, batch, context, css, ilha as default, from, html, ilhaSignal, ilhaSignal as signal, jsx, jsxDEV, jsxs, mount, raw, untrack };

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1,3 @@
+import { Fragment, jsxDEV } from "./index.js";
+import { t as JSX } from "./jsx-types-DSrM2NdI.js";
+export { Fragment, type JSX, jsxDEV };

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsxDEV } from "./index.js";
+export { Fragment, jsxDEV };

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,3 @@
+import { Fragment, jsx, jsxs } from "./index.js";
+import { t as JSX } from "./jsx-types-DSrM2NdI.js";
+export { Fragment, type JSX, jsx, jsxs };

package/dist/jsx-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxs } from "./index.js";
+export { Fragment, jsx, jsxs };

package/dist/jsx-types-DSrM2NdI.d.ts

@@ -0,0 +1,26 @@
+import { RawHtml } from "./index.js";
+
+//#region src/jsx-types.d.ts
+declare namespace JSX {
+  type Child = unknown;
+  type ElementType = string | ((props: any) => any);
+  interface Element extends RawHtml {}
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  interface IntrinsicAttributes {
+    key?: string | number;
+  }
+  type IntrinsicElementProps = {
+    children?: Child;
+    class?: string | unknown[] | Record<string, boolean>;
+    className?: string | unknown[] | Record<string, boolean>;
+    htmlFor?: string;
+    [name: string]: unknown;
+  };
+  interface IntrinsicElements {
+    [name: string]: IntrinsicElementProps;
+  }
+}
+//#endregion
+export { JSX as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
@@ -19,6 +19,14 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx-dev-runtime.js"
     }
   },
   "scripts": {