ilha 0.6.0 → 0.7.0

package/README.md

@@ -121,11 +121,11 @@ ilha
   .render(({ derived }) => {
     if (derived.user.loading) return `<p>Loading…</p>`;
     if (derived.user.error) return `<p>Error: ${derived.user.error.message}</p>`;
-    return `<p>${derived.user.value.name}</p>`;
+    return `<p>${derived.user().name}</p>`;
   });
 ```
 
-Each derived value exposes `{ loading, value, error }`.
+Read with `derived.name()` like state. Each accessor also exposes `loading`, `value`, and `error` for async work. Write `derived.name(value)` for optimistic UI.
 
 ---
 
@@ -239,12 +239,15 @@ The handler receives an `EffectContext`:
 ```ts
 {
   state: IslandState;
+  derived: IslandDerived;
   input: TInput;
   host: Element;
   signal: AbortSignal; // aborts when the effect re-runs OR the island unmounts
 }
 ```
 
+Reading `derived.name()` subscribes the effect. Writing `derived.name(value)` does not — use writes for optimistic UI without pinning the effect to every derived update.
+
 **Cancelling async work with `ctx.signal`** — unlike `.on()`, race-cancellation is the **default** behaviour for effects (no opt-in modifier needed) because dependency changes invariably make the previous run stale. Pass `signal` to async work to bail out of stale invocations without needing a manual cleanup function:
 
 ```ts

package/dist/index.d.ts

@@ -51,6 +51,7 @@ 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;
@@ -58,11 +59,11 @@ declare function ilhaCss(strings: TemplateStringsArray | string, ...values: (str
 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, ...children: JsxChild[]): RawHtml;
+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): 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;
@@ -80,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.
@@ -104,6 +105,13 @@ interface DerivedValue<T> {
   value: T | undefined;
   error: Error | undefined;
 }
+type DerivedAccessor<T> = {
+  readonly loading: boolean;
+  readonly value: T | undefined;
+  readonly error: Error | undefined;
+  (): T | undefined;
+  (value: T): void;
+};
 type DerivedFnContext<TInput, TStateMap extends Record<string, unknown>> = {
   state: IslandState<TStateMap>;
   input: TInput;
@@ -114,11 +122,8 @@ interface DerivedEntry<TInput, TStateMap extends Record<string, unknown>> {
   key: string;
   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 IslandDerived<TDerivedMap extends Record<string, unknown>> = { readonly [K in keyof TDerivedMap]: DerivedAccessor<TDerivedMap[K]> };
+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]> };
@@ -149,8 +154,9 @@ type RenderContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMa
   derived: IslandDerived<TDerivedMap>;
   input: TInput;
 };
-type EffectContext<TInput, TStateMap extends Record<string, unknown>> = {
+type EffectContext<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown> = Record<never, never>> = {
   state: IslandState<TStateMap>;
+  derived: IslandDerived<TDerivedMap>;
   input: TInput;
   host: Element;
   /**
@@ -213,8 +219,8 @@ interface OnEntry<TInput, TStateMap extends Record<string, unknown>, TDerivedMap
   abortable: boolean;
   handler: (ctx: HandlerContext<TInput, TStateMap, TDerivedMap>) => void | Promise<void>;
 }
-interface EffectEntry<TInput, TStateMap extends Record<string, unknown>> {
-  fn: (ctx: EffectContext<TInput, TStateMap>) => (() => void) | void;
+interface EffectEntry<TInput, TStateMap extends Record<string, unknown>, TDerivedMap extends Record<string, unknown>> {
+  fn: (ctx: EffectContext<TInput, TStateMap, TDerivedMap>) => (() => void) | void;
 }
 /** Where the error originated. `"on"` covers sync throws and async rejections
  *  from `.on()` handlers; `"effect"` covers sync throws from `.effect()` runs
@@ -243,14 +249,14 @@ 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;
   states: StateEntry<TInput>[];
   deriveds: DerivedEntry<TInput, TStateMap>[];
   ons: OnEntry<TInput, TStateMap, TDerivedMap>[];
-  effects: EffectEntry<TInput, TStateMap>[];
+  effects: EffectEntry<TInput, TStateMap, TDerivedMap>[];
   onMounts: OnMountEntry<TInput, TStateMap, TDerivedMap>[];
   onErrors: OnErrorEntry<TInput, TStateMap, TDerivedMap>[];
   transition: TransitionOptions | null;
@@ -264,7 +270,7 @@ declare class IlhaBuilder<TInput extends Record<string, unknown>, TStateMap exte
   state<V = undefined, K extends string = string>(key: K, init?: StateInit<TInput, V> | undefined): IlhaBuilder<TInput, MergeState<TStateMap, K, V>, TDerivedMap>;
   derived<K extends string, V>(key: K, fn: DerivedFn<TInput, TStateMap, V>): IlhaBuilder<TInput, TStateMap, TDerivedMap & Record<K, V>>;
   on<S extends string>(selectorOrCombined: S, handler: (ctx: S extends `${string}@${infer E}:${string}` ? HandlerContextFor<TInput, TStateMap, E, TDerivedMap> : S extends `${string}@${infer E}` ? HandlerContextFor<TInput, TStateMap, E, TDerivedMap> : HandlerContext<TInput, TStateMap, TDerivedMap>) => void | Promise<void>): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
-  effect(fn: (ctx: EffectContext<TInput, TStateMap>) => (() => void) | void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
+  effect(fn: (ctx: EffectContext<TInput, TStateMap, TDerivedMap>) => (() => void) | void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
   onMount(fn: (ctx: OnMountContext<TInput, TStateMap, TDerivedMap>) => (() => void) | void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
   onError(fn: (ctx: ErrorContext<TInput, TStateMap, TDerivedMap>) => void): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
   transition(opts: TransitionOptions): IlhaBuilder<TInput, TStateMap, TDerivedMap>;
@@ -299,4 +305,4 @@ declare const mount: typeof mountAll;
 declare const from: typeof ilhaFrom;
 declare const context: typeof ilhaContext;
 //#endregion
-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 };
+export { DerivedAccessor, DerivedValue, EffectContext, 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 {
@@ -229,6 +381,19 @@ 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 "";
@@ -281,17 +446,25 @@ function renderJsxElement(type, props, children) {
 	} 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, ...children) {
-	const normalizedChildren = normalizeJsxChildren(props, children);
+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}`;
-		if (out && typeof out === "object" && RAW in out) return out;
 		return ilhaHtml`${out}`;
 	}
 	return renderJsxElement(type, props, normalizedChildren);
@@ -300,13 +473,13 @@ function ilhaFragment(props, ...children) {
 	const normalizedChildren = normalizeJsxChildren(props, children);
 	return ilhaHtml(["", ...normalizedChildren.map(() => "")], ...normalizedChildren);
 }
-function ilhaJsxDEV(type, props) {
-	return ilhaJsx(type, props);
+function ilhaJsxDEV(type, props, maybeKey, _source, _self) {
+	return ilhaJsx(type, props, maybeKey);
 }
 function interpolateValue(v) {
 	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);
@@ -432,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) {
@@ -496,6 +676,38 @@ function batch(fn) {
 		endBatch();
 	}
 }
+function createDerivedAccessor(read, write) {
+	const accessor = markSignalAccessor((...args) => {
+		if (args.length > 0) {
+			if (write) write(args[0]);
+			else if (__DEV__) warn("derived values are read-only");
+			return;
+		}
+		return read().value;
+	});
+	return new Proxy(accessor, { get(target, prop, receiver) {
+		if (prop === "loading" || prop === "value" || prop === "error") return read()[prop];
+		return Reflect.get(target, prop, receiver);
+	} });
+}
+function defaultDerivedAccessor() {
+	return createDerivedAccessor(() => ({
+		loading: false,
+		value: void 0,
+		error: void 0
+	}));
+}
+function buildDerivedAccessors(envelopes) {
+	const accessors = /* @__PURE__ */ new Map();
+	for (const [key, envelope] of Object.entries(envelopes)) accessors.set(key, createDerivedAccessor(() => envelope, (value) => {
+		envelope.loading = false;
+		envelope.value = value;
+		envelope.error = void 0;
+	}));
+	return new Proxy({}, { get(_, key) {
+		return accessors.get(key) ?? defaultDerivedAccessor();
+	} });
+}
 function createDerivedProxy(entries, state, input, derivedSnapshot) {
 	const envelopes = /* @__PURE__ */ new Map();
 	for (const entry of entries) {
@@ -539,14 +751,21 @@ function createDerivedProxy(entries, state, input, derivedSnapshot) {
 		const env = signal(initialEnvelope);
 		envelopes.set(entry.key, env);
 	}
+	const accessors = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const env = envelopes.get(entry.key);
+		accessors.set(entry.key, createDerivedAccessor(() => env(), (value) => {
+			const prevSub = setActiveSub(void 0);
+			env({
+				loading: false,
+				value,
+				error: void 0
+			});
+			setActiveSub(prevSub);
+		}));
+	}
 	const proxy = new Proxy({}, { get(_, key) {
-		const env = envelopes.get(key);
-		if (!env) return {
-			loading: false,
-			value: void 0,
-			error: void 0
-		};
-		return env();
+		return accessors.get(key) ?? defaultDerivedAccessor();
 	} });
 	const setup = () => {
 		const stops = [];
@@ -1003,17 +1222,18 @@ var IlhaBuilder = class IlhaBuilder {
 				}
 			});
 			if (!results.some((r) => r.result instanceof Promise) || sync) {
-				const derived = {};
-				for (const r of results) if (r.result instanceof Promise) derived[r.key] = {
+				const envelopes = {};
+				for (const r of results) if (r.result instanceof Promise) envelopes[r.key] = {
 					loading: true,
 					value: void 0,
 					error: void 0
 				};
-				else derived[r.key] = {
+				else envelopes[r.key] = {
 					loading: false,
 					value: r.result,
 					error: void 0
 				};
+				const derived = buildDerivedAccessors(envelopes);
 				const prevSub = setActiveSub(void 0);
 				try {
 					const { html } = renderWithCtx(() => fn({
@@ -1047,8 +1267,9 @@ var IlhaBuilder = class IlhaBuilder {
 					};
 				}
 			})).then(async (resolved) => {
-				const derived = {};
-				for (const r of resolved) derived[r.key] = r.envelope;
+				const envelopes = {};
+				for (const r of resolved) envelopes[r.key] = r.envelope;
+				const derived = buildDerivedAccessors(envelopes);
 				const prevSub = setActiveSub(void 0);
 				try {
 					const { html } = await renderWithCtx(() => fn({
@@ -1161,10 +1382,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;
@@ -1175,10 +1424,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) {
@@ -1229,6 +1475,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);
@@ -1250,7 +1497,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 									derived,
 									input,
 									host,
-									target: eventTarget,
+									target: handlerTarget,
 									event,
 									signal: handlerSignal
 								});
@@ -1291,11 +1538,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;
@@ -1331,6 +1578,7 @@ Element: ${host.outerHTML.slice(0, 120)}`);
 					try {
 						userCleanup = entry.fn({
 							state,
+							derived,
 							input,
 							host,
 							signal: runSignal
@@ -1365,19 +1613,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);
 				}
@@ -1400,16 +1663,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;
@@ -1569,7 +1839,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A tiny, framework-free island architecture library",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",