@expressive/dom 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,357 +1,10 @@
-import { a as vnode, i as isVNode, n as childrenOf, r as createPortal, t as PORTAL } from "./chunk-vnode-DA7cLTKP.js";
+import { a as untrack, c as dispose, d as claim$1, f as release, h as transition, i as track, l as enter, m as settle$1, n as latest, o as call, p as schedule, r as same, s as commit, u as afterFlush } from "./chunk-hot-BAqPvKEQ.js";
+import { a as createElement, i as childrenOf, n as PORTAL, o as isVNode, r as Portal, s as vnode, t as Fragment } from "./chunk-vnode-BG1Cv8F9.js";
 import "./jsx-runtime.js";
-import { Component, Context, State, has, map, pending, unbind } from "@expressive/mvc";
+import { Component, Context, State, has, map } from "@expressive/mvc";
 import { watch } from "@expressive/mvc/observable";
-import { Fragment } from "@expressive/mvc/runtime";
+import { Fragment as Fragment$1, compose } from "@expressive/mvc/jsx-runtime";
 
-//#region src/scheduler.ts
-const urgent = /* @__PURE__ */ new Set();
-const passive = /* @__PURE__ */ new Set();
-const after = [];
-let depth$1 = 0;
-let urgentQueued = false;
-let passiveQueued = false;
-function flush(scopes) {
-	for (const scope of scopes) {
-		scopes.delete(scope);
-		scope.queued = void 0;
-		let waiting = void 0;
-		try {
-			waiting = scope.update(false);
-		} catch (error) {
-			console.error(error);
-		}
-		settle$1(scope);
-		if (!waiting) unblock(scope);
-	}
-}
-function flushUrgent() {
-	urgentQueued = false;
-	flush(urgent);
-	for (const run of after.splice(0)) run();
-}
-function afterFlush(run) {
-	after.push(run);
-	if (!urgentQueued) {
-		urgentQueued = true;
-		queueMicrotask(flushUrgent);
-	}
-}
-function flushPassive() {
-	passiveQueued = false;
-	const batch = [...passive].filter((scope) => scope.queued === "passive");
-	passive.clear();
-	for (const scope of batch) {
-		const waiting = scope.probe?.();
-		if (waiting) return defer(batch, waiting, scope);
-	}
-	batch.sort((a, b) => Number(!!b.empty?.()) - Number(!!a.empty?.()));
-	for (let index = 0; index < batch.length; index++) {
-		const scope = batch[index];
-		if (scope.queued !== "passive") continue;
-		scope.queued = void 0;
-		let waiting = void 0;
-		try {
-			waiting = scope.update(true);
-		} catch (error) {
-			console.error(error);
-		}
-		settle$1(scope);
-		if (waiting) return defer(batch.slice(index + 1), waiting, scope);
-		unblock(scope);
-	}
-}
-function defer(scopes, waiting, source) {
-	const held = scopes.filter((scope) => scope.queued === "passive");
-	for (const scope of held) {
-		scope.queued = "deferred";
-		scope.probed = void 0;
-	}
-	const resume = () => {
-		for (const scope of held) if (scope.queued === "deferred") {
-			scope.queued = void 0;
-			transition(() => schedule(scope));
-		}
-	};
-	(source.blocking ||= []).push(resume);
-	waiting.then(resume, resume);
-}
-function unblock(scope) {
-	const { blocking } = scope;
-	scope.blocking = void 0;
-	blocking?.forEach((resume) => resume());
-}
-function release(holds) {
-	holds?.forEach((held) => held());
-}
-function settle$1(scope) {
-	const { holds } = scope;
-	scope.holds = void 0;
-	release(holds);
-}
-function schedule(scope) {
-	const held = pending();
-	if (held) (scope.holds ||= []).push(held);
-	scope.probed = void 0;
-	if (!depth$1) {
-		passive.delete(scope);
-		scope.queued = "urgent";
-		urgent.add(scope);
-		if (!urgentQueued) {
-			urgentQueued = true;
-			queueMicrotask(flushUrgent);
-		}
-		return;
-	}
-	if (scope.queued && scope.queued !== "deferred") return;
-	scope.queued = "passive";
-	passive.add(scope);
-	if (!passiveQueued) {
-		passiveQueued = true;
-		setTimeout(flushPassive);
-	}
-}
-function transition(work) {
-	depth$1++;
-	try {
-		work();
-	} finally {
-		depth$1--;
-	}
-}
-function claim$1(scope) {
-	urgent.delete(scope);
-	passive.delete(scope);
-	scope.queued = void 0;
-	scope.probed = void 0;
-}
-function unschedule(scope) {
-	urgent.delete(scope);
-	passive.delete(scope);
-	scope.queued = void 0;
-	scope.probed = void 0;
-	settle$1(scope);
-	unblock(scope);
-}
-
-//#endregion
-//#region src/adapter.ts
-let current;
-let collecting;
-function enter(scope, render) {
-	const parent = current;
-	const releases = collecting;
-	const next = [];
-	current = scope;
-	collecting = next;
-	scope.childContext = scope.context;
-	scope.useIndex = 0;
-	try {
-		const output = render();
-		if (scope.kind == "function" && scope.useIndex !== scope.uses.length) throw new Error("State.use() calls must keep the same order on every function-component render.");
-		return output;
-	} finally {
-		current = parent;
-		collecting = releases;
-		scope.subscriptions.forEach((release) => release());
-		scope.subscriptions = next;
-	}
-}
-function dispose(scope) {
-	scope.active = false;
-	unschedule(scope);
-	scope.subscriptions.forEach((release) => release());
-	scope.subscriptions = [];
-	for (let i = scope.uses.length - 1; i >= 0; i--) {
-		const slot = scope.uses[i];
-		slot.release();
-		if (typeof slot.cleanup == "function") slot.cleanup();
-		slot.context.pop();
-		slot.instance.set(null);
-	}
-	scope.uses = [];
-}
-function commit(scope) {
-	for (const slot of scope.uses) if (!slot.mounted) {
-		slot.mounted = true;
-		slot.cleanup = slot.instance.mount?.();
-	}
-}
-function requireScope() {
-	if (!current) throw new Error("State.get() and State.use() may only run while @expressive/dom is rendering.");
-	return current;
-}
-function tracked(target, required) {
-	const scope = requireScope();
-	let proxy = target;
-	let first = true;
-	const release = watch(target, (next) => {
-		proxy = next;
-		if (!first && scope.active) schedule(scope);
-		first = false;
-	}, required, transition);
-	collecting.push(release);
-	return proxy;
-}
-State.get = function get(argument) {
-	const scope = requireScope();
-	const instance = scope.childContext.get(this, argument === false ? false : true);
-	if (!instance) return void 0;
-	const proxy = tracked(instance, argument === true);
-	if (typeof argument != "function") return proxy;
-	const refresh = ((action) => {
-		if (typeof action == "function") action = action();
-		schedule(scope);
-		return action instanceof Promise ? action.finally(() => schedule(scope)) : void 0;
-	});
-	return argument.call(proxy, proxy, refresh) ?? null;
-};
-State.use = function use(...args) {
-	const scope = requireScope();
-	if (scope.kind != "function") throw new Error("State.use() is only available at the top level of a function component.");
-	const index = scope.useIndex++;
-	let slot = scope.uses[index];
-	if (slot && slot.Type !== this) throw new Error("State.use() calls must keep the same order on every function-component render.");
-	if (!slot) {
-		let instance;
-		const assign = (value) => typeof value == "object" && value && instance.set(value);
-		let apply = (...values) => Promise.all(values.flat().map(assign));
-		instance = new this((self) => {
-			const own = self;
-			if (typeof own.use == "function") {
-				apply = own.use.bind(own);
-				apply(...args);
-				return;
-			}
-			return args;
-		});
-		const context = scope.childContext.push(instance);
-		slot = {
-			Type: this,
-			context,
-			instance,
-			proxy: instance,
-			release: void 0,
-			apply
-		};
-		let first = true;
-		slot.release = watch(instance, (proxy) => {
-			slot.proxy = proxy;
-			if (!first && scope.active) schedule(scope);
-			first = false;
-		}, void 0, transition);
-		slot.apply = apply;
-		scope.uses.push(slot);
-	} else slot.apply(...args);
-	scope.childContext = slot.context;
-	return slot.proxy;
-};
-Object.defineProperty(Component, "use", {
-	configurable: true,
-	value() {
-		throw new Error(`${this} is a Component - render it instead of calling use().`);
-	}
-});
-Component.on({
-	type(type) {
-		subcomponents(type.prototype);
-	},
-	before(self) {
-		subcomponents(self, true);
-	}
-});
-function subcomponents(target, configurable) {
-	for (const key of Object.getOwnPropertyNames(target)) {
-		if (!/^[A-Z]/.test(key)) continue;
-		const { value } = Object.getOwnPropertyDescriptor(target, key);
-		if (typeof value != "function") continue;
-		Object.defineProperty(target, key, {
-			configurable,
-			get() {
-				const owner = this.is;
-				let render = unbind(value);
-				const Subcomponent = (props) => render.call(tracked(owner), props);
-				Object.defineProperty(owner, key, {
-					configurable: true,
-					get: () => Subcomponent,
-					set(next) {
-						render = next;
-					}
-				});
-				return Subcomponent;
-			},
-			set(next) {
-				Object.defineProperty(this, key, {
-					value: next,
-					writable: true,
-					enumerable: true,
-					configurable: true
-				});
-				subcomponents(this, true);
-			}
-		});
-	}
-}
-
-//#endregion
-//#region src/context.ts
-function Consumer(props) {
-	return props.for.get((value) => props.children(value));
-}
-function Provider(_props) {
-	throw new Error("Provider must be rendered by @expressive/dom.");
-}
-function provide(context, props) {
-	const { for: input, is, children: _children, fallback: _fallback, name: _name, ...rest } = props;
-	const mount = [];
-	let single;
-	const solo = State.is(input) || input instanceof State;
-	context.set(input || {}, (state, owned) => {
-		if (solo) single = state;
-		is?.(state);
-		if (owned) {
-			let cleanup;
-			mount.push(() => {
-				cleanup = state.mount?.();
-			});
-			return () => cleanup?.();
-		}
-	});
-	if (solo && !single) {
-		const Type = input instanceof State ? input.constructor : input;
-		single = context.get(Type, false);
-	}
-	if (single && Object.keys(rest).length) single.set(rest);
-	return () => mount.forEach((commit) => commit());
-}
-
-//#endregion
-//#region src/lazy.ts
-function lazy(load) {
-	let pending;
-	let resolved;
-	let rejected;
-	let failed = false;
-	return function Lazy(props) {
-		if (failed) throw rejected;
-		if (resolved) return vnode(resolved, props);
-		if (!pending) pending = load().then((module) => {
-			const output = typeof module == "function" ? module : module?.default;
-			if (typeof output != "function") {
-				failed = true;
-				rejected = /* @__PURE__ */ new Error("lazy() loader resolved no component.");
-				return;
-			}
-			resolved = output;
-		}, (error) => {
-			failed = true;
-			rejected = error;
-		});
-		throw pending;
-	};
-}
-
-//#endregion
 //#region src/css.ts
 const unitless = /* @__PURE__ */ new Map();
 let probe;
@@ -457,7 +110,7 @@ const bases = /* @__PURE__ */ new WeakMap();
 const chains = /* @__PURE__ */ new WeakMap();
 const contexts = /* @__PURE__ */ new WeakMap();
 const rootScopes = /* @__PURE__ */ new WeakMap();
-const styles = /* @__PURE__ */ new WeakMap();
+const STYLES = Symbol("@expressive/dom.styles");
 const entered = /* @__PURE__ */ new WeakSet();
 const globals = [];
 let globalContext;
@@ -546,14 +199,16 @@ function baseToken(scope) {
 }
 function style$1(type, rules) {
 	if (entered.has(type)) throw new Error("Cannot add styles after a component has rendered.");
-	const maps = styles.get(type);
-	if (maps) maps.push(rules);
+	if (Object.hasOwn(type, STYLES)) type[STYLES].push(rules);
 	else {
 		const label = type.displayName || type.name;
-		styles.set(type, [rules]);
+		Object.defineProperty(type, STYLES, {
+			configurable: true,
+			value: [rules]
+		});
 		registerAppearance(type, (parent) => {
 			entered.add(type);
-			return extendContext(parent, styles.get(type), label);
+			return extendContext(parent, type[STYLES], label);
 		});
 	}
 	return type;
@@ -747,6 +402,71 @@ function serialize(document, declarations) {
 	return value.cssText;
 }
 
+//#endregion
+//#region src/loader.ts
+const LOADS = /* @__PURE__ */ new WeakMap();
+function resolve(type, props, run) {
+	const load = LOADS.get(type);
+	if (load?.resolved) return vnode(load.resolved, props);
+	if (load?.failed) {
+		LOADS.delete(type);
+		throw load.failed.error;
+	}
+	if (load) throw load.pending;
+	const output = run();
+	if (!output || typeof output.then != "function") return output;
+	const next = {};
+	LOADS.set(type, next);
+	throw next.pending = output.then((module) => {
+		const component = typeof module == "function" ? module : module?.default;
+		if (typeof component == "function") next.resolved = component;
+		else next.failed = { error: /* @__PURE__ */ new Error("Loader resolved no component.") };
+	}, (error) => {
+		next.failed = { error };
+	});
+}
+
+//#endregion
+//#region src/commits.ts
+const DETACHED = /* @__PURE__ */ new WeakMap();
+let batch;
+/** Run `run` once `fiber` is on the page: now, after the current batch, or when its detached root attaches. */
+function inserted(fiber, run) {
+	enqueue([fiber, run]);
+}
+/** A fragment whose commits wait until it attaches. */
+function fragment() {
+	const root = document.createDocumentFragment();
+	DETACHED.set(root, []);
+	return root;
+}
+function attach(root) {
+	const held = DETACHED.get(root);
+	DETACHED.delete(root);
+	held?.forEach(enqueue);
+}
+/** Defer commits made during `work` until it returns or throws. */
+function batched(work) {
+	if (batch) return work();
+	const entries = batch = [];
+	try {
+		return work();
+	} finally {
+		batch = void 0;
+		entries.forEach(deliver);
+	}
+}
+function enqueue(entry) {
+	if (batch) batch.push(entry);
+	else deliver(entry);
+}
+function deliver(entry) {
+	const [fiber, run] = entry;
+	const held = DETACHED.get(fiber.start.getRootNode());
+	if (held) held.push(entry);
+	else if (!fiber.dead) run();
+}
+
 //#endregion
 //#region src/render.ts
 const roots = /* @__PURE__ */ new WeakMap();
@@ -769,7 +489,7 @@ const focusing = [];
 const controlled = /* @__PURE__ */ new WeakMap();
 const restoring = /* @__PURE__ */ new WeakSet();
 let passiveRender = false;
-let inserting;
+let holding;
 let depth = 0;
 let settling = false;
 let rendering;
@@ -830,11 +550,17 @@ function makeScope(kind, context, update) {
 		uses: []
 	};
 }
+function park(fiber) {
+	move(fiber, fragment(), null);
+}
 function complete(fiber, work) {
 	try {
 		work();
 	} catch (error) {
-		unmountFiber(fiber);
+		if (holding && error === holding.thrown) {
+			park(fiber);
+			holding.fiber = fiber;
+		} else unmountFiber(fiber);
 		throw error;
 	}
 	return fiber;
@@ -875,21 +601,20 @@ function mount(value, parent, before, context, boundary, appearance) {
 			children: []
 		};
 	}
-	if (value instanceof Component) return mountComponent(value, parent, before, context, boundary, appearance);
+	if (renderable(value)) return mountComponent(value, parent, before, context, boundary, appearance);
 	if (isCollection(value)) return mountCollection(value, parent, before, context, boundary, appearance);
 	if (!isVNode(value)) throw new TypeError(`Cannot render ${String(value)}.`);
-	if (value.type === Fragment) return mountFragment(value, parent, before, context, boundary, appearance);
+	if (value.type === Fragment$1) return mountFragment(value, parent, before, context, boundary, appearance);
 	if (value.type === PORTAL) return mountPortal(value, parent, before, context, boundary, appearance);
-	if (value.type === Provider) return mountProvider(value, parent, before, context, boundary, appearance);
 	if (typeof value.type == "string") return mountElement(value, parent, before, context, boundary, appearance);
 	if (typeof value.type != "function") throw new Error(`Cannot render ${String(value.type)}.`);
-	if (value.type.prototype instanceof Component) return mountOwnedComponent(value, parent, before, context, boundary, appearance);
+	if (value.type.prototype instanceof State) return mountOwnedComponent(value, parent, before, context, boundary, appearance);
 	return mountFunction(value, parent, before, context, boundary, appearance);
 }
 function mountFragment(value, parent, before, context, boundary, appearance) {
 	const fiber = range("fragment", parent, before, context);
 	fiber.key = value.key;
-	fiber.type = Fragment;
+	fiber.type = Fragment$1;
 	fiber.appearance = appearance;
 	return complete(fiber, () => {
 		reconcile(fiber, value.props.children, context, boundary, appearance);
@@ -904,7 +629,11 @@ function mountFunction(value, parent, before, context, boundary, appearance) {
 	fiber.boundary = boundary;
 	fiber.appearance = resolved.appearance;
 	fiber.scope = makeScope("function", context, (passive) => runFunction(fiber, passive));
-	fiber.render = () => enter(fiber.scope, () => fiber.type(fiber.props));
+	fiber.render = () => enter(fiber.scope, () => {
+		const type = latest(fiber.type);
+		return resolve(type, fiber.props, () => call(type, fiber.props));
+	});
+	track(fiber.type, fiber.scope);
 	probing(fiber);
 	return complete(fiber, () => {
 		runFunction(fiber, passiveRender);
@@ -912,7 +641,10 @@ function mountFunction(value, parent, before, context, boundary, appearance) {
 }
 function mountOwnedComponent(value, parent, before, context, boundary, appearance) {
 	const resolved = componentProps(value.type, value.props, appearance);
-	return mountComponent(new value.type(observe(resolved.props)), parent, before, context, boundary, resolved.appearance, true, value.key);
+	const Type = value.type;
+	const props = observe(resolved.props);
+	const instance = new Type(props, Type.prototype instanceof Component ? void 0 : () => props.is?.(instance));
+	return mountComponent(instance, parent, before, context, boundary, resolved.appearance, true, value.key, props);
 }
 function runFunction(fiber, passive) {
 	const result = attempt(fiber, passive, fiber.render);
@@ -930,12 +662,19 @@ function probing(fiber) {
 		}
 	};
 }
-function mountComponent(instance, parent, before, context, inherited, appearance, owned = false, key) {
+function mountComponent(instance, parent, before, context, inherited, appearance, owned = false, key, props = instance.props) {
 	const fiber = range("component", parent, before, context);
 	const childContext = context.push(instance);
-	const ownBoundary = instance.fallback !== false || instance.catch ? {
-		catch: instance.catch?.bind(instance),
-		fallback: () => instance.fallback,
+	const element = owned ? props : {};
+	const fallback = element.fallback !== void 0 ? element.fallback : instance.fallback;
+	const ownBoundary = fallback !== void 0 && fallback !== false || element.catch || instance.catch ? {
+		catch: element.catch || instance.catch ? (error) => {
+			return (owned && fiber.props.catch || instance.catch).call(instance, error, instance);
+		} : void 0,
+		fallback: () => {
+			const placed = owned ? fiber.props.fallback : void 0;
+			return placed !== void 0 ? placed : instance.fallback;
+		},
 		owner: fiber,
 		parent: inherited
 	} : inherited;
@@ -945,11 +684,11 @@ function mountComponent(instance, parent, before, context, inherited, appearance
 	fiber.instance = instance;
 	fiber.key = owned ? key : instance.key;
 	fiber.type = instance.constructor;
-	fiber.props = instance.props;
+	fiber.props = props;
 	fiber.owned = owned;
 	fiber.appearance = appearance;
 	fiber.scope = makeScope("component", childContext, (passive) => runComponent(fiber, passive));
-	fiber.render = () => enter(fiber.scope, () => instance.render.call(fiber.value, instance.props));
+	fiber.render = () => enter(fiber.scope, () => compose.call(fiber.value, fiber.props));
 	probing(fiber);
 	let first = true;
 	let proxy = instance;
@@ -962,10 +701,13 @@ function mountComponent(instance, parent, before, context, inherited, appearance
 		first = false;
 	}, void 0, transition);
 	Object.defineProperty(fiber, "value", { get: () => proxy });
-	complete(fiber, () => {
-		runComponent(fiber, passiveRender);
-	});
-	if (owned) inserted(fiber, () => fiber.cleanup = instance.mount?.());
+	try {
+		complete(fiber, () => {
+			runComponent(fiber, passiveRender);
+		});
+	} finally {
+		if (owned && !fiber.dead) inserted(fiber, () => fiber.cleanup = instance.mount?.());
+	}
 	return fiber;
 }
 function runComponent(fiber, passive) {
@@ -995,31 +737,9 @@ function runCollection(fiber, passive) {
 		return value instanceof map.Managed ? [...value.values()] : [...value];
 	});
 }
-function mountProvider(value, parent, before, context, inherited, appearance) {
-	const fiber = range("provider", parent, before, context);
-	const childContext = new Context(context);
-	fiber.key = value.key;
-	fiber.type = Provider;
-	fiber.props = value.props;
-	fiber.appearance = appearance;
-	fiber.childContext = childContext;
-	const commit = provide(childContext, value.props);
-	const boundary = value.props.fallback !== void 0 ? {
-		fallback: () => fiber.props.fallback,
-		owner: fiber,
-		parent: inherited
-	} : inherited;
-	fiber.boundary = boundary;
-	if (boundary !== inherited) fiber.ownBoundary = boundary;
-	complete(fiber, () => {
-		reconcile(fiber, value.props.children, childContext, boundary, appearance);
-	});
-	commit();
-	return fiber;
-}
 function mountPortal(value, parent, before, context, boundary, appearance) {
 	const marker = document.createComment("portal");
-	const container = value.props.container;
+	const container = target(value.props.into, parent);
 	const portalStart = document.createComment("portal-root");
 	const portalEnd = document.createComment("/portal-root");
 	parent.insertBefore(marker, before);
@@ -1043,6 +763,14 @@ function mountPortal(value, parent, before, context, boundary, appearance) {
 		reconcilePortal(output, value.props.children, context, boundary, appearance);
 	});
 }
+function target(into, parent) {
+	if (typeof into != "string") return into;
+	const root = parent.getRootNode();
+	const found = [...document.querySelectorAll(into)];
+	if (root instanceof DocumentFragment) found.push(...root.querySelectorAll(into));
+	if (found.length != 1) throw new Error(`Portal target "${into}" ${found.length ? "is ambiguous" : "was not found"}.`);
+	return found[0];
+}
 function mountElement(value, parent, before, context, boundary, appearance) {
 	const tag = value.type;
 	let host = parent;
@@ -1085,38 +813,31 @@ function attempt(fiber, passive, render) {
 	const previous = passiveRender;
 	const scope = fiber.scope;
 	const probed = scope.probed;
+	const empty = !fiber.children.length;
 	scope.probed = void 0;
 	passiveRender ||= passive;
-	if (passive && !depth && !fiber.children.length && !fiber.stash) fiber.staging ||= document.createDocumentFragment();
-	const outer = inserting;
-	if (fiber.staging) inserting = fiber.inserted ||= [];
-	try {
-		return pass(() => {
-			try {
-				reconcile(fiber, probed ? probed.output : consume(fiber, render), scope.childContext, fiber.boundary, renderedAppearance(fiber));
-				if (fiber.staging) {
-					const queued = fiber.inserted;
-					fiber.end.parentNode.insertBefore(fiber.staging, fiber.end);
-					fiber.staging = fiber.inserted = void 0;
-					inserting = outer;
-					queued.forEach((run) => run());
-				}
-				if (!fiber.recovering) unwait(fiber);
-				fiber.retried = void 0;
-				return true;
-			} catch (thrown) {
-				return suspend(fiber, thrown, passive);
+	if (passive && !depth && empty && !fiber.stash) fiber.staging ||= fragment();
+	const run = () => pass(() => {
+		try {
+			reconcile(fiber, probed ? probed.output : consume(fiber, render), scope.childContext, fiber.boundary, renderedAppearance(fiber));
+			if (fiber.staging) {
+				fiber.end.parentNode.insertBefore(fiber.staging, fiber.end);
+				attach(fiber.staging);
+				fiber.staging = void 0;
 			}
-		});
+			if (!fiber.recovering) unwait(fiber);
+			fiber.retried = void 0;
+			return true;
+		} catch (thrown) {
+			return suspend(fiber, thrown, passive, empty);
+		}
+	});
+	try {
+		return passive ? batched(run) : run();
 	} finally {
 		passiveRender = previous;
-		inserting = outer;
 	}
 }
-function inserted(fiber, run) {
-	if (inserting) inserting.push(() => fiber.dead || run());
-	else run();
-}
 function observe(props) {
 	if (!("style" in props)) return props;
 	let output = observed.get(props);
@@ -1238,11 +959,15 @@ function moveRange(start, end, target) {
 		node = next;
 	}
 }
-function suspend(fiber, thrown, passive) {
+function suspend(fiber, thrown, passive, empty) {
 	const boundary = fiber.boundary;
 	if (isThenable(thrown)) {
 		if (!boundary) throw thrown;
-		if (passive && !fiber.children.length && depth > 1) throw thrown;
+		if (passive && empty && depth > 1) {
+			if (holding?.thrown !== thrown) holding = { thrown };
+			throw thrown;
+		}
+		holding = void 0;
 		if (!passive) wait(fiber, boundary);
 		const scope = fiber.scope;
 		let held = scope.holds;
@@ -1308,26 +1033,32 @@ function reconcileChildren(owner, parent, before, value, context, boundary, appe
 			let child = key !== null && key !== void 0 ? keyed.get(key) : old[index]?.key == null ? old[index] : void 0;
 			if (child && used.has(child)) child = void 0;
 			if (child) used.add(child);
-			next.push(patch(child, value, parent, before, context, boundary, appearance));
+			const fiber = patch(child, value, parent, before, context, boundary, appearance);
+			if (fiber !== child) used.delete(child);
+			next.push(fiber);
 		}
 	} catch (error) {
+		if (holding && error === holding.thrown) {
+			for (const fiber of next) if (!old.includes(fiber)) park(fiber);
+			if (holding.fiber) next.push(holding.fiber);
+			holding.fiber = void 0;
+		}
 		owner.children = [...next, ...old.filter((child) => !child.dead && !next.includes(child))];
 		throw error;
 	}
 	for (const child of old) if (!used.has(child)) unmountFiber(child);
 	let anchor = before;
 	for (let index = next.length - 1; index >= 0; index--) {
-		move(next[index], parent, anchor);
-		anchor = next[index].start;
+		const child = next[index];
+		const root = child.start.getRootNode();
+		move(child, parent, anchor);
+		anchor = child.start;
+		if (child.start.getRootNode() !== root) attach(root);
 	}
 	owner.children = next;
 }
 function patch(old, value, parent, before, context, boundary, appearance) {
-	if (!old || !compatible(old, value)) {
-		const next = mount(value, parent, old?.start || before, context, boundary, appearance);
-		if (old) unmountFiber(old);
-		return next;
-	}
+	if (!old || !compatible(old, value)) return mount(value, parent, old?.start || before, context, boundary, appearance);
 	if (old.ownBoundary) old.ownBoundary.parent = boundary;
 	old.boundary = old.ownBoundary || boundary;
 	if (old.kind == "collection") {
@@ -1349,28 +1080,30 @@ function patch(old, value, parent, before, context, boundary, appearance) {
 	} else if (old.kind == "function") {
 		const vnode = value;
 		const resolved = componentProps(vnode.type, vnode.props, appearance);
+		if (old.type !== vnode.type) {
+			untrack(old.type, old.scope);
+			old.type = vnode.type;
+			old.scope.hot = true;
+			track(old.type, old.scope);
+		}
 		old.appearance = resolved.appearance;
 		old.props = observe(resolved.props);
 		rerun(old, () => runFunction(old, passiveRender));
 	} else if (old.kind == "component") {
 		const resolved = isVNode(value) ? componentProps(value.type, value.props, appearance) : {
 			appearance,
-			props: old.instance.props
+			props: old.props
 		};
 		old.appearance = resolved.appearance;
 		const props = isVNode(value) ? observe(resolved.props) : resolved.props;
-		if (isVNode(value) && props !== old.instance.props) {
+		if (isVNode(value) && props !== old.props) {
+			const instance = old.instance;
 			if (passiveRender) old.applied = true;
-			old.instance.props = props;
+			if (instance instanceof Component) instance.props = props;
+			else instance.set(merge(old.props, props));
 		}
 		old.props = props;
 		rerun(old, () => runComponent(old, passiveRender));
-	} else if (old.kind == "provider") {
-		old.appearance = appearance;
-		old.props = value.props;
-		const commit = provide(old.childContext, old.props);
-		reconcile(old, old.props.children, old.childContext, old.boundary, appearance);
-		commit();
 	} else {
 		old.appearance = appearance;
 		const vnode = value;
@@ -1390,23 +1123,34 @@ function compatible(fiber, value) {
 		"number",
 		"bigint"
 	].includes(typeof value);
-	if (value instanceof Component) return fiber.kind == "component" && fiber.instance === value;
+	if (renderable(value)) return fiber.kind == "component" && fiber.instance === value;
 	if (isCollection(value)) return fiber.kind == "collection" && fiber.source === value;
 	if (!isVNode(value)) return false;
-	if (fiber.key !== value.key || fiber.type !== value.type) return false;
-	if (fiber.kind == "portal") return fiber.portalContainer === value.props.container;
+	if (fiber.key !== value.key || !same(fiber.type, value.type)) return false;
+	if (fiber.kind == "portal") return fiber.props.into === value.props.into;
 	return true;
 }
 function source(value) {
-	if (value instanceof Component) return value.is;
+	if (value instanceof State) return value.is;
 	while (isCollection(value) && isCollection(Object.getPrototypeOf(value))) value = Object.getPrototypeOf(value);
 	return value;
 }
+function renderable(value) {
+	return value instanceof State && typeof value.render == "function";
+}
+function merge(previous, next) {
+	const output = {};
+	for (const key in previous) output[key] = void 0;
+	return {
+		...output,
+		...next
+	};
+}
 function isCollection(value) {
 	return value instanceof has.List || value instanceof has.Pool || value instanceof map.Managed;
 }
 function keyOf(value) {
-	if (value instanceof Component) return value.key;
+	if (renderable(value)) return value.key;
 	return isVNode(value) ? value.key : void 0;
 }
 function move(fiber, parent, before) {
@@ -1548,7 +1292,7 @@ function renderedAppearance(fiber) {
 		style
 	}));
 	const inherited = fiber.appearance?.context || appearanceRoot();
-	const context = enterAppearance(inherited, fiber.type);
+	const context = enterAppearance(inherited, latest(fiber.type));
 	if (context?.base && context !== inherited) entries.push({
 		hops: 0,
 		style: context.base
@@ -1629,6 +1373,7 @@ function unmountFiber(fiber) {
 	for (let index = fiber.children.length - 1; index >= 0; index--) unmountFiber(fiber.children[index]);
 	if (fiber.placeholder) unmountFiber(fiber.placeholder);
 	fiber.suspended?.forEach((clear) => clear());
+	if (fiber.kind == "function") untrack(fiber.type, fiber.scope);
 	if (fiber.scope) dispose(fiber.scope);
 	fiber.release?.();
 	if (fiber.kind == "element") {
@@ -1642,8 +1387,7 @@ function unmountFiber(fiber) {
 		if (typeof fiber.cleanup == "function") fiber.cleanup();
 		fiber.childContext?.pop();
 		if (fiber.owned && !fiber.instance.get(null)) fiber.instance.set(null);
-	} else if (fiber.kind == "provider") fiber.childContext?.pop();
-	else if (fiber.kind == "portal") {
+	} else if (fiber.kind == "portal") {
 		fiber.portalStart.remove();
 		fiber.portalEnd.remove();
 	}
@@ -1660,5 +1404,5 @@ function removeRange(start, end) {
 }
 
 //#endregion
-export { Consumer, Provider, createPortal, css, lazy, macro, render, style };
+export { Fragment, Portal, createElement, css, macro, render, style };
 //# sourceMappingURL=index.js.map