@expressive/dom 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,11 +1,11 @@
-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 { 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-9LhRiwFx.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-wpCWQ_Zg.js";
 import "./jsx-runtime.js";
-import { Component, Context, State, has, map } from "@expressive/mvc";
+import { Component, Context, Model, has, map, unbind } from "@expressive/mvc";
 import { watch } from "@expressive/mvc/observable";
-import { Fragment as Fragment$1, compose } from "@expressive/mvc/jsx-runtime";
+import { Fragment as Fragment$1 } from "@expressive/mvc/jsx-runtime";
 
-//#region src/css.ts
+//#region src/style/css.ts
 const unitless = /* @__PURE__ */ new Map();
 let probe;
 /**
@@ -58,7 +58,7 @@ const css = {
 };
 
 //#endregion
-//#region src/appearance-protocol.ts
+//#region src/style/protocol.ts
 const registrations = /* @__PURE__ */ new WeakMap();
 const tokens = /* @__PURE__ */ new WeakMap();
 let root;
@@ -105,7 +105,7 @@ function appearanceToken(value) {
 }
 
 //#endregion
-//#region src/appearance.ts
+//#region src/style/appearance.ts
 const bases = /* @__PURE__ */ new WeakMap();
 const chains = /* @__PURE__ */ new WeakMap();
 const contexts = /* @__PURE__ */ new WeakMap();
@@ -332,7 +332,7 @@ function isObject(value) {
 }
 
 //#endregion
-//#region src/declarations.ts
+//#region src/style/declarations.ts
 function applyDeclarations(style, declarations, previous = {}) {
 	const target = style;
 	for (const key of Object.keys({
@@ -351,7 +351,7 @@ function applyDeclarations(style, declarations, previous = {}) {
 }
 
 //#endregion
-//#region src/stylesheet.ts
+//#region src/style/stylesheet.ts
 const sheets = /* @__PURE__ */ new WeakMap();
 function style(type, rules) {
 	style$1(type, rules);
@@ -403,31 +403,7 @@ function serialize(document, declarations) {
 }
 
 //#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
+//#region src/render/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. */
@@ -468,63 +444,7 @@ function deliver(entry) {
 }
 
 //#endregion
-//#region src/render.ts
-const roots = /* @__PURE__ */ new WeakMap();
-const SVG = "http://www.w3.org/2000/svg";
-const dirty = /* @__PURE__ */ new Set();
-const stashes = /* @__PURE__ */ new WeakMap();
-const CONTROLS = ["checked", "value"];
-const ENUMERATED = [
-	"contentEditable",
-	"contenteditable",
-	"draggable",
-	"spellcheck"
-];
-const ALIASES = {
-	autoFocus: "autofocus",
-	contentEditable: "contenteditable",
-	htmlFor: "for"
-};
-const focusing = [];
-const controlled = /* @__PURE__ */ new WeakMap();
-const restoring = /* @__PURE__ */ new WeakSet();
-let passiveRender = false;
-let holding;
-let depth = 0;
-let settling = false;
-let rendering;
-let touched = false;
-const observed = /* @__PURE__ */ new WeakMap();
-const tickets = /* @__PURE__ */ new WeakMap();
-function render(node, container) {
-	roots.get(container)?.();
-	container.replaceChildren();
-	const context = new Context(Context.root);
-	const fiber = range("fragment", container, null, context);
-	try {
-		pass(() => {
-			const appearanceContext = appearanceRoot();
-			reconcile(fiber, node, context, void 0, appearanceContext ? {
-				context: appearanceContext,
-				entries: []
-			} : void 0);
-		});
-	} catch (error) {
-		unmountFiber(fiber);
-		context.pop();
-		throw error;
-	}
-	let active = true;
-	const unmount = () => {
-		if (!active) return;
-		active = false;
-		unmountFiber(fiber);
-		context.pop();
-		roots.delete(container);
-	};
-	roots.set(container, unmount);
-	return unmount;
-}
+//#region src/render/fiber.ts
 function range(kind, parent, before, context) {
 	const start = document.createComment(kind);
 	const end = document.createComment(`/${kind}`);
@@ -550,170 +470,37 @@ function makeScope(kind, context, update) {
 		uses: []
 	};
 }
-function park(fiber) {
-	move(fiber, fragment(), null);
-}
-function complete(fiber, work) {
-	try {
-		work();
-	} catch (error) {
-		if (holding && error === holding.thrown) {
-			park(fiber);
-			holding.fiber = fiber;
-		} else unmountFiber(fiber);
-		throw error;
+function moveRange(start, end, target) {
+	let node = start;
+	while (node) {
+		const next = node.nextSibling;
+		target.appendChild(node);
+		if (node === end) break;
+		node = next;
 	}
-	return fiber;
-}
-function componentProps(type, props, appearance) {
-	const context = appearance?.context;
-	if (!context || typeof type != "function") return {
-		appearance,
-		props
-	};
-	const value = context.resolve(props);
-	const entries = appearance.entries;
-	if (!value) return {
-		appearance: { entries },
-		props
-	};
-	return {
-		appearance: {
-			context: value.context,
-			entries
-		},
-		props: {
-			...props,
-			style: [createAppearanceToken(value), props.style]
-		}
-	};
 }
-function mount(value, parent, before, context, boundary, appearance) {
-	if (typeof value == "string" || typeof value == "number" || typeof value == "bigint") {
-		const text = document.createTextNode(String(value));
-		parent.insertBefore(text, before);
-		return {
-			kind: "text",
-			value,
-			context,
-			start: text,
-			end: text,
-			children: []
-		};
+function move(fiber, parent, before) {
+	if (fiber.start.parentNode === parent && fiber.end.nextSibling === before) return;
+	let node = fiber.start;
+	while (node) {
+		const next = node.nextSibling;
+		parent.insertBefore(node, before);
+		if (node === fiber.end) break;
+		node = next;
 	}
-	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$1) return mountFragment(value, parent, before, context, boundary, appearance);
-	if (value.type === PORTAL) return mountPortal(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 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$1;
-	fiber.appearance = appearance;
-	return complete(fiber, () => {
-		reconcile(fiber, value.props.children, context, boundary, appearance);
-	});
-}
-function mountFunction(value, parent, before, context, boundary, appearance) {
-	const fiber = range("function", parent, before, context);
-	const resolved = componentProps(value.type, value.props, appearance);
-	fiber.key = value.key;
-	fiber.type = value.type;
-	fiber.props = observe(resolved.props);
-	fiber.boundary = boundary;
-	fiber.appearance = resolved.appearance;
-	fiber.scope = makeScope("function", context, (passive) => runFunction(fiber, passive));
-	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);
-	});
-}
-function mountOwnedComponent(value, parent, before, context, boundary, appearance) {
-	const resolved = componentProps(value.type, value.props, appearance);
-	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);
-	if (result === true) inserted(fiber, () => commit(fiber.scope));
-	else return result;
-}
-function probing(fiber) {
-	const scope = fiber.scope;
-	scope.empty = () => !fiber.children.length;
-	scope.probe = () => {
-		try {
-			scope.probed = { output: consume(fiber, fiber.render) };
-		} catch (thrown) {
-			if (isThenable(thrown)) return thrown;
-		}
-	};
 }
-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 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;
-	fiber.boundary = ownBoundary;
-	if (ownBoundary !== inherited) fiber.ownBoundary = ownBoundary;
-	fiber.childContext = childContext;
-	fiber.instance = instance;
-	fiber.key = owned ? key : instance.key;
-	fiber.type = instance.constructor;
-	fiber.props = props;
-	fiber.owned = owned;
-	fiber.appearance = appearance;
-	fiber.scope = makeScope("component", childContext, (passive) => runComponent(fiber, passive));
-	fiber.render = () => enter(fiber.scope, () => compose.call(fiber.value, fiber.props));
-	probing(fiber);
-	let first = true;
-	let proxy = instance;
-	fiber.release = watch(instance, (current, events) => {
-		const { applied, scope } = fiber;
-		proxy = current;
-		fiber.applied = void 0;
-		if (!first && scope.active) if (applied && events.includes("props")) transition(() => schedule(scope));
-		else schedule(scope);
-		first = false;
-	}, void 0, transition);
-	Object.defineProperty(fiber, "value", { get: () => proxy });
-	try {
-		complete(fiber, () => {
-			runComponent(fiber, passiveRender);
-		});
-	} finally {
-		if (owned && !fiber.dead) inserted(fiber, () => fiber.cleanup = instance.mount?.());
+function removeRange(start, end) {
+	let node = start;
+	while (true) {
+		const next = node.nextSibling;
+		node.remove();
+		if (node === end) break;
+		node = next;
 	}
-	return fiber;
-}
-function runComponent(fiber, passive) {
-	const result = attempt(fiber, passive, fiber.render);
-	if (result !== true) return result;
 }
+
+//#endregion
+//#region src/render/collection.ts
 function mountCollection(value, parent, before, context, boundary, appearance) {
 	const fiber = range("collection", parent, before, context);
 	fiber.source = value;
@@ -737,107 +524,159 @@ function runCollection(fiber, passive) {
 		return value instanceof map.Managed ? [...value.values()] : [...value];
 	});
 }
-function mountPortal(value, parent, before, context, boundary, appearance) {
-	const marker = document.createComment("portal");
-	const container = target(value.props.into, parent);
-	const portalStart = document.createComment("portal-root");
-	const portalEnd = document.createComment("/portal-root");
-	parent.insertBefore(marker, before);
-	container.append(portalStart, portalEnd);
-	const output = {
-		kind: "portal",
-		key: value.key,
-		type: PORTAL,
-		props: value.props,
-		context,
-		boundary,
-		appearance,
-		start: marker,
-		end: marker,
-		children: [],
-		portalContainer: container,
-		portalStart,
-		portalEnd
-	};
-	return complete(output, () => {
-		reconcilePortal(output, value.props.children, context, boundary, appearance);
+function patchCollection(fiber, appearance) {
+	if (fiber.appearance === appearance) return;
+	fiber.appearance = appearance;
+	runCollection(fiber, passiveRender);
+}
+function isCollection(value) {
+	return value instanceof has.List || value instanceof has.Pool || value instanceof map.Managed;
+}
+
+//#endregion
+//#region src/node/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 };
 	});
 }
-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];
+
+//#endregion
+//#region src/style/claim.ts
+const tickets = /* @__PURE__ */ new WeakMap();
+function componentProps(type, props, appearance) {
+	const context = appearance?.context;
+	if (!context || typeof type != "function") return {
+		appearance,
+		props
+	};
+	const value = context.resolve(props);
+	const entries = appearance.entries;
+	if (!value) return {
+		appearance: { entries },
+		props
+	};
+	return {
+		appearance: {
+			context: value.context,
+			entries
+		},
+		props: {
+			...props,
+			style: [createAppearanceToken(value), props.style]
+		}
+	};
 }
-function mountElement(value, parent, before, context, boundary, appearance) {
-	const tag = value.type;
-	let host = parent;
-	for (let owner = stashes.get(host); owner; owner = stashes.get(host)) host = owner.end.parentNode;
-	const element = (tag == "svg" || host instanceof SVGElement && host.localName != "foreignObject" ? SVG : void 0) ? document.createElementNS(SVG, tag) : document.createElement(tag);
-	const fiber = {
-		kind: "element",
-		key: value.key,
-		type: tag,
-		props: {},
-		context,
-		boundary,
-		start: element,
-		end: element,
-		children: [],
-		events: /* @__PURE__ */ new Map()
+function door(value) {
+	const collected = {
+		classes: [],
+		declarations: {},
+		tokens: []
 	};
-	parent.insertBefore(element, before);
-	complete(fiber, () => {
-		patchProps(fiber, value.props, appearance);
+	const { classes, declarations, tokens } = collected;
+	collect(value, collected, 1);
+	if (!classes.length && !tokens.length && !Object.keys(declarations).length) return void 0;
+	const key = Object.freeze({});
+	tickets.set(key, {
+		classes,
+		tokens
+	});
+	return Object.freeze({
+		...declarations,
+		[Symbol("style")]: key
 	});
-	if (value.props.autofocus || value.props.autoFocus) focusing.push(element);
-	return fiber;
 }
-function pass(work) {
-	depth++;
-	try {
-		return work();
-	} finally {
-		if (!--depth) {
-			settle();
-			focus();
+function claim(element, appearance, resolved, className, value) {
+	const collected = {
+		classes: [],
+		declarations: {},
+		tokens: []
+	};
+	const entries = appearance?.entries || [];
+	let context = appearance?.context;
+	let reach = -1;
+	if (resolved) collect(createAppearanceToken(resolved), collected, 0);
+	appendClasses(collected.classes, className);
+	collect(value, collected, 0);
+	for (let index = entries.length - 1; index >= 0; index--) collect(entries[index].style, collected, entries[index].hops);
+	for (const { appearance, doors } of collected.tokens) {
+		for (const block of appearance.blocks || []) collected.classes.push(emitClass(block, doors, element.ownerDocument));
+		if (appearance.classes) collected.classes.push(...appearance.classes);
+		if (appearance.context && doors >= reach) {
+			context = appearance.context;
+			reach = doors;
 		}
 	}
+	return {
+		className: [...new Set(collected.classes)].join(" "),
+		context,
+		declarations: collected.declarations
+	};
 }
-function focus() {
-	for (const element of focusing.splice(0)) if (element.isConnected) element.focus();
+function applyClaim(element, before, after) {
+	const previous = before || {
+		className: "",
+		declarations: {}
+	};
+	if (previous.className !== after.className) if (after.className) element.setAttribute("class", after.className);
+	else element.removeAttribute("class");
+	applyDeclarations(element.style, after.declarations, previous.declarations);
 }
-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 && 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;
+function collect(value, collected, doors) {
+	if (!value) return;
+	const token = appearanceToken(value);
+	if (token) {
+		collected.tokens.push({
+			appearance: token,
+			doors
+		});
+		Object.assign(collected.declarations, token.declarations);
+		return;
+	}
+	if (typeof value == "string") {
+		appendClasses(collected.classes, value);
+		return;
+	}
+	if (Array.isArray(value)) {
+		value.forEach((entry) => collect(entry, collected, doors));
+		return;
+	}
+	for (const symbol of Object.getOwnPropertySymbols(value)) {
+		const ticket = tickets.get(value[symbol]);
+		if (!ticket) continue;
+		collected.classes.push(...ticket.classes);
+		for (const carried of ticket.tokens) collected.tokens.push({
+			appearance: carried.appearance,
+			doors: carried.doors + doors
+		});
 	}
+	for (const key of Object.keys(value)) collected.declarations[key] = value[key];
+}
+function appendClasses(classes, value) {
+	if (typeof value == "string") classes.push(...value.split(/\s+/).filter(Boolean));
 }
+
+//#endregion
+//#region src/render/style.ts
+let rendering;
+let touched = false;
+const observed = /* @__PURE__ */ new WeakMap();
 function observe(props) {
 	if (!("style" in props)) return props;
 	let output = observed.get(props);
@@ -860,25 +699,6 @@ function observe(props) {
 	}
 	return output;
 }
-function door(value) {
-	const collected = {
-		classes: [],
-		declarations: {},
-		tokens: []
-	};
-	const { classes, declarations, tokens } = collected;
-	collect(value, collected, 1);
-	if (!classes.length && !tokens.length && !Object.keys(declarations).length) return void 0;
-	const key = Object.freeze({});
-	tickets.set(key, {
-		classes,
-		tokens
-	});
-	return Object.freeze({
-		...declarations,
-		[Symbol("style")]: key
-	});
-}
 function consume(fiber, render) {
 	const previous = rendering;
 	const read = touched;
@@ -893,136 +713,250 @@ function consume(fiber, render) {
 		touched = read;
 	}
 }
-function wait(fiber, boundary) {
-	if (fiber.waitingOn !== boundary) unwait(fiber);
-	fiber.waitingOn = boundary;
-	(boundary.waiting ||= /* @__PURE__ */ new Set()).add(fiber);
-	dirty.add(boundary);
-}
-function unwait(fiber) {
-	const boundary = fiber.waitingOn;
-	if (!boundary) return;
-	fiber.waitingOn = void 0;
-	boundary.waiting.delete(fiber);
-	if (!boundary.owner.dead) dirty.add(boundary);
-}
-function settle() {
-	if (settling) return;
-	settling = true;
-	try {
-		for (const boundary of dirty) {
-			dirty.delete(boundary);
-			const owner = boundary.owner;
-			const waiting = boundary.waiting.size > 0;
-			if (!owner.dead && waiting != !!owner.stash) waiting ? hide(owner, boundary) : reveal(owner);
-		}
-	} finally {
-		settling = false;
-	}
-}
-function hide(owner, boundary) {
-	const stash = document.createDocumentFragment();
-	for (const child of owner.children) move(child, stash, null);
-	owner.portals = portals(owner, []).map((portal) => {
-		const content = document.createDocumentFragment();
-		moveRange(portal.portalStart, portal.portalEnd, content);
-		return [portal, content];
+function renderedAppearance(fiber) {
+	if (fiber.kind != "component" && fiber.kind != "function") return fiber.appearance;
+	const style = fiber.props?.style;
+	const entries = (fiber.appearance?.entries || []).map(({ hops, style }) => ({
+		hops: hops + 1,
+		style
+	}));
+	const inherited = fiber.appearance?.context || appearanceRoot();
+	const context = enterAppearance(inherited, latest(fiber.type));
+	if (context?.base && context !== inherited) entries.push({
+		hops: 0,
+		style: context.base
 	});
-	stashes.set(stash, owner);
-	const context = owner.childContext;
-	const placeholder = range("fragment", owner.end.parentNode, owner.end, context);
-	owner.stash = stash;
-	owner.placeholder = placeholder;
-	reconcile(placeholder, boundary.fallback(), context, boundary.parent);
+	if (style && !fiber.consumed && !(fiber.instance && "style" in fiber.instance)) entries.push({
+		hops: 0,
+		style
+	});
+	return entries.length || context ? {
+		context,
+		entries
+	} : void 0;
 }
-function reveal(owner) {
-	unmountFiber(owner.placeholder);
-	owner.end.parentNode.insertBefore(owner.stash, owner.end);
-	for (const [portal, content] of owner.portals) if (!portal.dead) portal.portalContainer.append(content);
-	owner.portals = void 0;
-	owner.placeholder = void 0;
-	owner.stash = void 0;
+
+//#endregion
+//#region src/render/element.ts
+const SVG = "http://www.w3.org/2000/svg";
+const CONTROLS = ["checked", "value"];
+const ENUMERATED = [
+	"contentEditable",
+	"contenteditable",
+	"draggable",
+	"spellcheck"
+];
+const ALIASES = {
+	autoFocus: "autofocus",
+	contentEditable: "contenteditable",
+	htmlFor: "for"
+};
+const controlled = /* @__PURE__ */ new WeakMap();
+const restoring = /* @__PURE__ */ new WeakSet();
+function mountElement(value, parent, before, context, boundary, appearance) {
+	const tag = value.type;
+	const host = hostOf(parent);
+	const element = (tag == "svg" || host instanceof SVGElement && host.localName != "foreignObject" ? SVG : void 0) ? document.createElementNS(SVG, tag) : document.createElement(tag);
+	const fiber = {
+		kind: "element",
+		key: value.key,
+		type: tag,
+		props: {},
+		context,
+		boundary,
+		start: element,
+		end: element,
+		children: [],
+		events: /* @__PURE__ */ new Map()
+	};
+	parent.insertBefore(element, before);
+	complete(fiber, () => {
+		patchProps(fiber, value.props, appearance);
+	});
+	if (value.props.autofocus || value.props.autoFocus) focusing.push(element);
+	return fiber;
 }
-function portals(fiber, found) {
-	for (const child of fiber.children) {
-		if (child.kind == "portal") found.push(child);
-		portals(child, found);
+function patchProps(fiber, next, appearance) {
+	const element = fiber.start;
+	const previous = fiber.props;
+	const raw = "dangerouslySetInnerHTML" in next;
+	const resolved = appearance?.context?.resolve(next, fiber.type);
+	if (raw) {
+		for (let index = fiber.children.length - 1; index >= 0; index--) unmountFiber(fiber.children[index]);
+		fiber.children = [];
 	}
-	return found;
-}
-function moveRange(start, end, target) {
-	let node = start;
-	while (node) {
-		const next = node.nextSibling;
-		target.appendChild(node);
-		if (node === end) break;
-		node = next;
+	for (const key of Object.keys({
+		...previous,
+		...next
+	})) {
+		if (key.startsWith("_") || key == "children" || key == "className" || key == "key" || key == "ref" || key == "style" || CONTROLS.includes(key)) continue;
+		if (previous[key] === next[key]) continue;
+		patchProp(fiber, element, key, previous[key], next[key]);
 	}
-}
-function suspend(fiber, thrown, passive, empty) {
-	const boundary = fiber.boundary;
-	if (isThenable(thrown)) {
-		if (!boundary) throw thrown;
-		if (passive && empty && depth > 1) {
-			if (holding?.thrown !== thrown) holding = { thrown };
-			throw thrown;
+	const claimed = claim(element, appearance, resolved, next.className, next.style);
+	applyClaim(element, fiber.claimed, claimed);
+	fiber.claimed = claimed;
+	fiber.props = next;
+	fiber.appearance = appearance;
+	if (!raw) reconcileChildren(fiber, element, null, next.children, fiber.context, fiber.boundary, claimed.context ? {
+		context: claimed.context,
+		entries: []
+	} : void 0);
+	for (const key of CONTROLS) {
+		const value = next[key];
+		const live = element[key];
+		if (value == null || !(key in element) ? previous[key] !== value : key == "value" ? String(live) !== String(value) : live !== value) patchProp(fiber, element, key, previous[key], value);
+	}
+	if (CONTROLS.some((key) => next[key] != null)) {
+		const document = element.ownerDocument;
+		controlled.set(element, fiber);
+		if (!restoring.has(document)) {
+			restoring.add(document);
+			document.addEventListener("input", restoreTarget);
+			document.addEventListener("change", restoreTarget);
 		}
-		holding = void 0;
-		if (!passive) wait(fiber, boundary);
-		const scope = fiber.scope;
-		let held = scope.holds;
-		scope.holds = void 0;
-		const clear = () => {
-			fiber.suspended.delete(clear);
-			release(held);
-			held = void 0;
-		};
-		(fiber.suspended ||= /* @__PURE__ */ new Set()).add(clear);
-		const resume = (retry) => {
-			fiber.suspended.delete(clear);
-			if (!scope.active) return clear();
-			if (held) (scope.holds ||= []).push(...held);
-			held = void 0;
-			retry();
-		};
-		thrown.then(() => resume(() => passive ? transition(() => schedule(scope)) : schedule(scope)), (error) => resume(() => pass(() => recover(fiber, error, fiber.boundary))));
-		return thrown;
 	}
-	recover(fiber, thrown, fiber.boundary);
+	if (previous.ref !== next.ref) patchProp(fiber, element, "ref", previous.ref, next.ref);
 }
-function recover(fiber, thrown, boundary) {
-	const error = thrown instanceof Error ? thrown : new Error(String(thrown));
-	while (boundary && !boundary.catch) boundary = boundary.parent;
-	if (!boundary) throw error;
-	const handler = boundary;
-	const token = {};
-	wait(fiber, handler);
-	fiber.recovering = token;
-	Promise.resolve(handler.catch(error)).then(() => {
-		if (fiber.recovering !== token) return;
-		fiber.recovering = void 0;
-		if (!fiber.scope.active || fiber.retried) return;
-		fiber.retried = true;
-		schedule(fiber.scope);
-	}, (next) => {
-		if (fiber.recovering === token && fiber.scope.active) pass(() => recover(fiber, next, handler.parent));
-	});
+function patchProp(fiber, element, key, previous, next) {
+	if (key == "ref") {
+		applyRef(previous, null);
+		inserted(fiber, () => applyRef(next, element));
+		return;
+	}
+	if (key == "dangerouslySetInnerHTML") {
+		element.innerHTML = next?.__html || "";
+		return;
+	}
+	if (/^on[A-Z]/.test(key)) {
+		const capture = key.endsWith("Capture");
+		const lower = (capture ? key.slice(2, -7) : key.slice(2)).toLowerCase();
+		const name = lower == "doubleclick" ? "dblclick" : lower;
+		const id = `${name}:${capture}`;
+		const current = fiber.events.get(id);
+		if (current) element.removeEventListener(name, current, capture);
+		if (typeof next == "function") {
+			fiber.events.set(id, next);
+			element.addEventListener(name, next, capture);
+		} else fiber.events.delete(id);
+		return;
+	}
+	const name = ALIASES[key] || key;
+	if ((key.startsWith("aria-") || key.startsWith("data-") || ENUMERATED.includes(key)) && next != null) {
+		element.setAttribute(name, String(next));
+		return;
+	}
+	if (next === null || next === void 0 || next === false) {
+		if (key in element && typeof element[key] != "function") try {
+			const current = element[key];
+			element[key] = typeof current == "boolean" ? false : typeof current == "number" ? 0 : "";
+		} catch {}
+		element.removeAttribute(element.namespaceURI === SVG ? name.toLowerCase() : name);
+		element.removeAttribute(name);
+		return;
+	}
+	if (key in element && (element.namespaceURI !== SVG || settable(element, key))) try {
+		element[key] = next;
+		return;
+	} catch {}
+	element.setAttribute(name, next === true ? "" : String(next));
 }
-function isThenable(value) {
-	return !!value && typeof value.then == "function";
+function restoreTarget(event) {
+	const element = event.target;
+	const fiber = controlled.get(element);
+	if (fiber && event.type == settles(fiber.props, element)) queueMicrotask(() => afterFlush(() => restore(fiber)));
 }
-function reconcile(fiber, value, context, boundary, appearance) {
-	const detached = fiber.stash || fiber.staging;
-	if (detached) reconcileChildren(fiber, detached, null, value, context, boundary, appearance);
-	else reconcileChildren(fiber, fiber.end.parentNode, fiber.end, value, context, boundary, appearance);
+function settles(props, element) {
+	if (props.onInput) return "input";
+	if (props.onChange) return "change";
+	return element.type == "checkbox" || element.type == "radio" || element.localName == "select" ? "change" : "input";
 }
-function reconcilePortal(fiber, value, context, boundary, appearance) {
-	reconcileChildren(fiber, fiber.portalEnd.parentNode, fiber.portalEnd, value, context, boundary, appearance);
+function restore(fiber) {
+	const element = fiber.start;
+	for (const key of CONTROLS) {
+		const value = fiber.props[key];
+		if (value == null || fiber.dead) continue;
+		if (key == "value" ? String(element.value) !== String(value) : element[key] !== value) element[key] = value;
+	}
 }
-function reconcileChildren(owner, parent, before, value, context, boundary, appearance) {
-	const values = childrenOf(value);
-	const old = owner.children;
-	const keyed = /* @__PURE__ */ new Map();
+function settable(element, key) {
+	let target = element;
+	let descriptor;
+	while (!(descriptor = Object.getOwnPropertyDescriptor(target, key))) target = Object.getPrototypeOf(target);
+	return !!(descriptor.set || descriptor.writable);
+}
+function applyRef(ref, value) {
+	if (typeof ref == "function") ref(value);
+	else if (ref && typeof ref == "object" && "current" in ref) ref.current = value;
+}
+function unmountElement(fiber) {
+	applyRef(fiber.props?.ref, null);
+	for (const [id, listener] of fiber.events) {
+		const [name, capture] = id.split(":");
+		fiber.start.removeEventListener(name, listener, capture === "true");
+	}
+}
+
+//#endregion
+//#region src/render/portal.ts
+function mountPortal(value, parent, before, context, boundary, appearance) {
+	const marker = document.createComment("portal");
+	const container = target(value.props.into, parent);
+	const portalStart = document.createComment("portal-root");
+	const portalEnd = document.createComment("/portal-root");
+	parent.insertBefore(marker, before);
+	container.append(portalStart, portalEnd);
+	const output = {
+		kind: "portal",
+		key: value.key,
+		type: PORTAL,
+		props: value.props,
+		context,
+		boundary,
+		appearance,
+		start: marker,
+		end: marker,
+		children: [],
+		portalContainer: container,
+		portalStart,
+		portalEnd
+	};
+	return complete(output, () => {
+		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 reconcilePortal(fiber, value, context, boundary, appearance) {
+	reconcileChildren(fiber, fiber.portalEnd.parentNode, fiber.portalEnd, value, context, boundary, appearance);
+}
+function patchPortal(fiber, value, context, appearance) {
+	fiber.appearance = appearance;
+	fiber.props = value.props;
+	reconcilePortal(fiber, value.props.children, context, fiber.boundary, appearance);
+}
+function unmountPortal(fiber) {
+	fiber.portalStart.remove();
+	fiber.portalEnd.remove();
+}
+
+//#endregion
+//#region src/render/reconcile.ts
+function reconcile(fiber, value, context, boundary, appearance) {
+	const detached = fiber.stash || fiber.staging;
+	if (detached) reconcileChildren(fiber, detached, null, value, context, boundary, appearance);
+	else reconcileChildren(fiber, fiber.end.parentNode, fiber.end, value, context, boundary, appearance);
+}
+function reconcileChildren(owner, parent, before, value, context, boundary, appearance) {
+	const values = childrenOf(value);
+	const old = owner.children;
+	const keyed = /* @__PURE__ */ new Map();
 	const used = /* @__PURE__ */ new Set();
 	const next = [];
 	for (const child of old) if (child.key !== null && child.key !== void 0) keyed.set(child.key, child);
@@ -1038,11 +972,7 @@ function reconcileChildren(owner, parent, before, value, context, boundary, appe
 			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;
-		}
+		gather(error, next, old);
 		owner.children = [...next, ...old.filter((child) => !child.dead && !next.includes(child))];
 		throw error;
 	}
@@ -1061,62 +991,15 @@ function patch(old, value, parent, before, context, boundary, appearance) {
 	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") {
-		if (old.appearance !== appearance) {
-			old.appearance = appearance;
-			runCollection(old, passiveRender);
-		}
-		return old;
-	}
-	if (old.kind == "text") {
-		const next = String(value);
-		if (old.start.nodeValue !== next) old.start.nodeValue = next;
-		old.value = value;
-	} else if (old.kind == "element") patchProps(old, value.props, appearance);
-	else if (old.kind == "fragment") {
-		old.context = context;
-		old.appearance = appearance;
-		reconcile(old, value.props.children, context, old.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.props
-		};
-		old.appearance = resolved.appearance;
-		const props = isVNode(value) ? observe(resolved.props) : resolved.props;
-		if (isVNode(value) && props !== old.props) {
-			const instance = old.instance;
-			if (passiveRender) old.applied = true;
-			if (instance instanceof Component) instance.props = props;
-			else instance.set(merge(old.props, props));
-		}
-		old.props = props;
-		rerun(old, () => runComponent(old, passiveRender));
-	} else {
-		old.appearance = appearance;
-		const vnode = value;
-		old.props = vnode.props;
-		reconcilePortal(old, vnode.props.children, context, old.boundary, appearance);
-	}
+	if (old.kind == "collection") patchCollection(old, appearance);
+	else if (old.kind == "text") patchText(old, value);
+	else if (old.kind == "element") patchProps(old, value.props, appearance);
+	else if (old.kind == "fragment") patchFragment(old, value, context, appearance);
+	else if (old.kind == "function") patchFunction(old, value, appearance);
+	else if (old.kind == "component") patchComponent(old, value, appearance);
+	else patchPortal(old, value, context, appearance);
 	return old;
 }
-function rerun(fiber, run) {
-	claim$1(fiber.scope);
-	run();
-	settle$1(fiber.scope);
-}
 function compatible(fiber, value) {
 	if (fiber.kind == "text") return [
 		"string",
@@ -1131,241 +1014,352 @@ function compatible(fiber, value) {
 	return true;
 }
 function source(value) {
-	if (value instanceof State) return value.is;
+	if (value instanceof Model) 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 (renderable(value)) return value.key;
 	return isVNode(value) ? value.key : void 0;
 }
-function move(fiber, parent, before) {
-	if (fiber.start.parentNode === parent && fiber.end.nextSibling === before) return;
-	let node = fiber.start;
-	while (node) {
-		const next = node.nextSibling;
-		parent.insertBefore(node, before);
-		if (node === fiber.end) break;
-		node = next;
-	}
+
+//#endregion
+//#region src/render/suspense.ts
+const dirty = /* @__PURE__ */ new Set();
+const stashes = /* @__PURE__ */ new WeakMap();
+let holding;
+let settling = false;
+function park(fiber) {
+	move(fiber, fragment(), null);
 }
-function patchProps(fiber, next, appearance) {
-	const element = fiber.start;
-	const previous = fiber.props;
-	const raw = "dangerouslySetInnerHTML" in next;
-	const resolved = appearance?.context?.resolve(next, fiber.type);
-	if (raw) {
-		for (let index = fiber.children.length - 1; index >= 0; index--) unmountFiber(fiber.children[index]);
-		fiber.children = [];
-	}
-	for (const key of Object.keys({
-		...previous,
-		...next
-	})) {
-		if (key.startsWith("_") || key == "children" || key == "className" || key == "key" || key == "ref" || key == "style" || CONTROLS.includes(key)) continue;
-		if (previous[key] === next[key]) continue;
-		patchProp(fiber, element, key, previous[key], next[key]);
-	}
-	const claimed = claim(element, appearance, resolved, next.className, next.style);
-	applyClaim(element, fiber.claimed, claimed);
-	fiber.claimed = claimed;
-	fiber.props = next;
-	fiber.appearance = appearance;
-	if (!raw) reconcileChildren(fiber, element, null, next.children, fiber.context, fiber.boundary, claimed.context ? {
-		context: claimed.context,
-		entries: []
-	} : void 0);
-	for (const key of CONTROLS) {
-		const value = next[key];
-		const live = element[key];
-		if (value == null || !(key in element) ? previous[key] !== value : key == "value" ? String(live) !== String(value) : live !== value) patchProp(fiber, element, key, previous[key], value);
-	}
-	if (CONTROLS.some((key) => next[key] != null)) {
-		const document = element.ownerDocument;
-		controlled.set(element, fiber);
-		if (!restoring.has(document)) {
-			restoring.add(document);
-			document.addEventListener("input", restoreTarget);
-			document.addEventListener("change", restoreTarget);
+function hold(fiber, error) {
+	if (!holding || error !== holding.thrown) return false;
+	park(fiber);
+	holding.fiber = fiber;
+	return true;
+}
+function gather(error, next, old) {
+	if (!holding || error !== holding.thrown) return;
+	for (const fiber of next) if (!old.includes(fiber)) park(fiber);
+	if (holding.fiber) next.push(holding.fiber);
+	holding.fiber = void 0;
+}
+function hostOf(parent) {
+	let host = parent;
+	for (let owner = stashes.get(host); owner; owner = stashes.get(host)) host = owner.end.parentNode;
+	return host;
+}
+function wait(fiber, boundary) {
+	if (fiber.waitingOn !== boundary) unwait(fiber);
+	fiber.waitingOn = boundary;
+	(boundary.waiting ||= /* @__PURE__ */ new Set()).add(fiber);
+	dirty.add(boundary);
+}
+function unwait(fiber) {
+	const boundary = fiber.waitingOn;
+	if (!boundary) return;
+	fiber.waitingOn = void 0;
+	boundary.waiting.delete(fiber);
+	if (!boundary.owner.dead) dirty.add(boundary);
+}
+function settle() {
+	if (settling) return;
+	settling = true;
+	try {
+		for (const boundary of dirty) {
+			dirty.delete(boundary);
+			const owner = boundary.owner;
+			const waiting = boundary.waiting.size > 0;
+			if (!owner.dead && waiting != !!owner.stash) waiting ? hide(owner, boundary) : reveal(owner);
 		}
+	} finally {
+		settling = false;
 	}
-	if (previous.ref !== next.ref) patchProp(fiber, element, "ref", previous.ref, next.ref);
 }
-function patchProp(fiber, element, key, previous, next) {
-	if (key == "ref") {
-		applyRef(previous, null);
-		inserted(fiber, () => applyRef(next, element));
-		return;
-	}
-	if (key == "dangerouslySetInnerHTML") {
-		element.innerHTML = next?.__html || "";
-		return;
-	}
-	if (/^on[A-Z]/.test(key)) {
-		const capture = key.endsWith("Capture");
-		const lower = (capture ? key.slice(2, -7) : key.slice(2)).toLowerCase();
-		const name = lower == "doubleclick" ? "dblclick" : lower;
-		const id = `${name}:${capture}`;
-		const current = fiber.events.get(id);
-		if (current) element.removeEventListener(name, current, capture);
-		if (typeof next == "function") {
-			fiber.events.set(id, next);
-			element.addEventListener(name, next, capture);
-		} else fiber.events.delete(id);
-		return;
+function hide(owner, boundary) {
+	const stash = document.createDocumentFragment();
+	for (const child of owner.children) move(child, stash, null);
+	owner.portals = portals(owner, []).map((portal) => {
+		const content = document.createDocumentFragment();
+		moveRange(portal.portalStart, portal.portalEnd, content);
+		return [portal, content];
+	});
+	stashes.set(stash, owner);
+	const context = owner.childContext;
+	const placeholder = range("fragment", owner.end.parentNode, owner.end, context);
+	owner.stash = stash;
+	owner.placeholder = placeholder;
+	reconcile(placeholder, boundary.fallback(), context, boundary.parent);
+}
+function reveal(owner) {
+	unmountFiber(owner.placeholder);
+	owner.end.parentNode.insertBefore(owner.stash, owner.end);
+	for (const [portal, content] of owner.portals) if (!portal.dead) portal.portalContainer.append(content);
+	owner.portals = void 0;
+	owner.placeholder = void 0;
+	owner.stash = void 0;
+}
+function portals(fiber, found) {
+	for (const child of fiber.children) {
+		if (child.kind == "portal") found.push(child);
+		portals(child, found);
 	}
-	const name = ALIASES[key] || key;
-	if ((key.startsWith("aria-") || key.startsWith("data-") || ENUMERATED.includes(key)) && next != null) {
-		element.setAttribute(name, String(next));
-		return;
+	return found;
+}
+function suspend(fiber, thrown, passive, empty) {
+	const boundary = fiber.boundary;
+	if (isThenable(thrown)) {
+		if (!boundary) 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;
+		scope.holds = void 0;
+		const clear = () => {
+			fiber.suspended.delete(clear);
+			release(held);
+			held = void 0;
+		};
+		(fiber.suspended ||= /* @__PURE__ */ new Set()).add(clear);
+		const resume = (retry) => {
+			fiber.suspended.delete(clear);
+			if (!scope.active) return clear();
+			if (held) (scope.holds ||= []).push(...held);
+			held = void 0;
+			retry();
+		};
+		thrown.then(() => resume(() => passive ? transition(() => schedule(scope)) : schedule(scope)), (error) => resume(() => pass(() => recover(fiber, error, fiber.boundary))));
+		return thrown;
 	}
-	if (next === null || next === void 0 || next === false) {
-		if (key in element && typeof element[key] != "function") try {
-			const current = element[key];
-			element[key] = typeof current == "boolean" ? false : typeof current == "number" ? 0 : "";
-		} catch {}
-		element.removeAttribute(element.namespaceURI === SVG ? name.toLowerCase() : name);
-		element.removeAttribute(name);
-		return;
+	recover(fiber, thrown, fiber.boundary);
+}
+function recover(fiber, thrown, boundary) {
+	const error = thrown instanceof Error ? thrown : new Error(String(thrown));
+	while (boundary && !boundary.catch) boundary = boundary.parent;
+	if (!boundary) throw error;
+	const handler = boundary;
+	const token = {};
+	wait(fiber, handler);
+	fiber.recovering = token;
+	Promise.resolve(handler.catch(error)).then(() => {
+		if (fiber.recovering !== token) return;
+		fiber.recovering = void 0;
+		if (!fiber.scope.active || fiber.retried) return;
+		fiber.retried = true;
+		schedule(fiber.scope);
+	}, (next) => {
+		if (fiber.recovering === token && fiber.scope.active) pass(() => recover(fiber, next, handler.parent));
+	});
+}
+function isThenable(value) {
+	return !!value && typeof value.then == "function";
+}
+
+//#endregion
+//#region src/render/component.ts
+function mountFunction(value, parent, before, context, boundary, appearance) {
+	const fiber = range("function", parent, before, context);
+	const resolved = componentProps(value.type, value.props, appearance);
+	fiber.key = value.key;
+	fiber.type = value.type;
+	fiber.props = observe(resolved.props);
+	fiber.boundary = boundary;
+	fiber.appearance = resolved.appearance;
+	fiber.scope = makeScope("function", context, (passive) => runFunction(fiber, passive));
+	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);
+	});
+}
+function mountOwnedComponent(value, parent, before, context, boundary, appearance) {
+	const resolved = componentProps(value.type, value.props, appearance);
+	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 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 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;
+	fiber.boundary = ownBoundary;
+	if (ownBoundary !== inherited) fiber.ownBoundary = ownBoundary;
+	fiber.childContext = childContext;
+	fiber.instance = instance;
+	fiber.key = owned ? key : instance.key;
+	fiber.type = instance.constructor;
+	fiber.props = props;
+	fiber.owned = owned;
+	fiber.appearance = appearance;
+	fiber.scope = makeScope("component", childContext, (passive) => runComponent(fiber, passive));
+	fiber.render = () => enter(fiber.scope, () => {
+		const { render } = fiber.value;
+		return render ? unbind(render).call(fiber.value, fiber.props) : fiber.props.children ?? null;
+	});
+	probing(fiber);
+	let first = true;
+	let proxy = instance;
+	fiber.release = watch(instance, (current, events) => {
+		const { applied, scope } = fiber;
+		proxy = current;
+		fiber.applied = void 0;
+		if (!first && scope.active) if (applied && events.includes("props")) transition(() => schedule(scope));
+		else schedule(scope);
+		first = false;
+	}, void 0, transition);
+	Object.defineProperty(fiber, "value", { get: () => proxy });
+	try {
+		complete(fiber, () => {
+			runComponent(fiber, passiveRender);
+		});
+	} finally {
+		if (owned && !fiber.dead) inserted(fiber, () => fiber.cleanup = instance.mount?.());
 	}
-	if (key in element && (element.namespaceURI !== SVG || settable(element, key))) try {
-		element[key] = next;
-		return;
-	} catch {}
-	element.setAttribute(name, next === true ? "" : String(next));
+	return fiber;
 }
-function applyClaim(element, before, after) {
-	const previous = before || {
-		className: "",
-		declarations: {}
-	};
-	if (previous.className !== after.className) if (after.className) element.setAttribute("class", after.className);
-	else element.removeAttribute("class");
-	applyDeclarations(element.style, after.declarations, previous.declarations);
+function runFunction(fiber, passive) {
+	const result = attempt(fiber, passive, fiber.render);
+	if (result === true) inserted(fiber, () => commit(fiber.scope));
+	else return result;
 }
-function claim(element, appearance, resolved, className, value) {
-	const collected = {
-		classes: [],
-		declarations: {},
-		tokens: []
-	};
-	const entries = appearance?.entries || [];
-	let context = appearance?.context;
-	let reach = -1;
-	if (resolved) collect(createAppearanceToken(resolved), collected, 0);
-	appendClasses(collected.classes, className);
-	collect(value, collected, 0);
-	for (let index = entries.length - 1; index >= 0; index--) collect(entries[index].style, collected, entries[index].hops);
-	for (const { appearance, doors } of collected.tokens) {
-		for (const block of appearance.blocks || []) collected.classes.push(emitClass(block, doors, element.ownerDocument));
-		if (appearance.classes) collected.classes.push(...appearance.classes);
-		if (appearance.context && doors >= reach) {
-			context = appearance.context;
-			reach = doors;
+function runComponent(fiber, passive) {
+	const result = attempt(fiber, passive, fiber.render);
+	if (result !== true) return result;
+}
+function probing(fiber) {
+	const scope = fiber.scope;
+	scope.empty = () => !fiber.children.length;
+	scope.probe = () => {
+		try {
+			scope.probed = { output: consume(fiber, fiber.render) };
+		} catch (thrown) {
+			if (isThenable(thrown)) return thrown;
 		}
-	}
-	return {
-		className: [...new Set(collected.classes)].join(" "),
-		context,
-		declarations: collected.declarations
 	};
 }
-function renderedAppearance(fiber) {
-	if (fiber.kind != "component" && fiber.kind != "function") return fiber.appearance;
-	const style = fiber.props?.style;
-	const entries = (fiber.appearance?.entries || []).map(({ hops, style }) => ({
-		hops: hops + 1,
-		style
-	}));
-	const inherited = fiber.appearance?.context || appearanceRoot();
-	const context = enterAppearance(inherited, latest(fiber.type));
-	if (context?.base && context !== inherited) entries.push({
-		hops: 0,
-		style: context.base
-	});
-	if (style && !fiber.consumed && !(fiber.instance && "style" in fiber.instance)) entries.push({
-		hops: 0,
-		style
-	});
-	return entries.length || context ? {
-		context,
-		entries
-	} : void 0;
-}
-function collect(value, collected, doors) {
-	if (!value) return;
-	const token = appearanceToken(value);
-	if (token) {
-		collected.tokens.push({
-			appearance: token,
-			doors
-		});
-		Object.assign(collected.declarations, token.declarations);
-		return;
-	}
-	if (typeof value == "string") {
-		appendClasses(collected.classes, value);
-		return;
-	}
-	if (Array.isArray(value)) {
-		value.forEach((entry) => collect(entry, collected, doors));
-		return;
+function patchFunction(fiber, value, appearance) {
+	const resolved = componentProps(value.type, value.props, appearance);
+	if (fiber.type !== value.type) {
+		untrack(fiber.type, fiber.scope);
+		fiber.type = value.type;
+		fiber.scope.hot = true;
+		track(fiber.type, fiber.scope);
 	}
-	for (const symbol of Object.getOwnPropertySymbols(value)) {
-		const ticket = tickets.get(value[symbol]);
-		if (!ticket) continue;
-		collected.classes.push(...ticket.classes);
-		for (const carried of ticket.tokens) collected.tokens.push({
-			appearance: carried.appearance,
-			doors: carried.doors + doors
-		});
+	fiber.appearance = resolved.appearance;
+	fiber.props = observe(resolved.props);
+	rerun(fiber, () => runFunction(fiber, passiveRender));
+}
+function patchComponent(fiber, value, appearance) {
+	const resolved = isVNode(value) ? componentProps(value.type, value.props, appearance) : {
+		appearance,
+		props: fiber.props
+	};
+	fiber.appearance = resolved.appearance;
+	const props = isVNode(value) ? observe(resolved.props) : resolved.props;
+	if (isVNode(value) && props !== fiber.props) {
+		const instance = fiber.instance;
+		if (passiveRender) fiber.applied = true;
+		if (instance instanceof Component) instance.props = props;
+		else instance.set(merge(fiber.props, props));
 	}
-	for (const key of Object.keys(value)) collected.declarations[key] = value[key];
+	fiber.props = props;
+	rerun(fiber, () => runComponent(fiber, passiveRender));
 }
-function appendClasses(classes, value) {
-	if (typeof value == "string") classes.push(...value.split(/\s+/).filter(Boolean));
+function rerun(fiber, run) {
+	claim$1(fiber.scope);
+	run();
+	settle$1(fiber.scope);
 }
-function restoreTarget(event) {
-	const element = event.target;
-	const fiber = controlled.get(element);
-	if (fiber && event.type == settles(fiber.props, element)) queueMicrotask(() => afterFlush(() => restore(fiber)));
+function unmountComponent(fiber) {
+	if (typeof fiber.cleanup == "function") fiber.cleanup();
+	fiber.childContext?.pop();
+	if (fiber.owned && !fiber.instance.get(null)) fiber.instance.set(null);
 }
-function settles(props, element) {
-	if (props.onInput) return "input";
-	if (props.onChange) return "change";
-	return element.type == "checkbox" || element.type == "radio" || element.localName == "select" ? "change" : "input";
+function renderable(value) {
+	return value instanceof Model && typeof value.render == "function";
 }
-function restore(fiber) {
-	const element = fiber.start;
-	for (const key of CONTROLS) {
-		const value = fiber.props[key];
-		if (value == null || fiber.dead) continue;
-		if (key == "value" ? String(element.value) !== String(value) : element[key] !== value) element[key] = value;
+function merge(previous, next) {
+	const output = {};
+	for (const key in previous) output[key] = void 0;
+	return {
+		...output,
+		...next
+	};
+}
+
+//#endregion
+//#region src/render/mount.ts
+function complete(fiber, work) {
+	try {
+		work();
+	} catch (error) {
+		if (!hold(fiber, error)) unmountFiber(fiber);
+		throw error;
 	}
+	return fiber;
 }
-function settable(element, key) {
-	let target = element;
-	let descriptor;
-	while (!(descriptor = Object.getOwnPropertyDescriptor(target, key))) target = Object.getPrototypeOf(target);
-	return !!(descriptor.set || descriptor.writable);
+function mount(value, parent, before, context, boundary, appearance) {
+	if (typeof value == "string" || typeof value == "number" || typeof value == "bigint") {
+		const text = document.createTextNode(String(value));
+		parent.insertBefore(text, before);
+		return {
+			kind: "text",
+			value,
+			context,
+			start: text,
+			end: text,
+			children: []
+		};
+	}
+	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$1) return mountFragment(value, parent, before, context, boundary, appearance);
+	if (value.type === PORTAL) return mountPortal(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 Model) return mountOwnedComponent(value, parent, before, context, boundary, appearance);
+	return mountFunction(value, parent, before, context, boundary, appearance);
 }
-function applyRef(ref, value) {
-	if (typeof ref == "function") ref(value);
-	else if (ref && typeof ref == "object" && "current" in ref) ref.current = value;
+function mountFragment(value, parent, before, context, boundary, appearance) {
+	const fiber = range("fragment", parent, before, context);
+	fiber.key = value.key;
+	fiber.type = Fragment$1;
+	fiber.appearance = appearance;
+	return complete(fiber, () => {
+		reconcile(fiber, value.props.children, context, boundary, appearance);
+	});
+}
+function patchText(fiber, value) {
+	const next = String(value);
+	if (fiber.start.nodeValue !== next) fiber.start.nodeValue = next;
+	fiber.value = value;
+}
+function patchFragment(fiber, value, context, appearance) {
+	fiber.context = context;
+	fiber.appearance = appearance;
+	reconcile(fiber, value.props.children, context, fiber.boundary, appearance);
 }
 function unmountFiber(fiber) {
 	fiber.dead = true;
@@ -1376,30 +1370,88 @@ function unmountFiber(fiber) {
 	if (fiber.kind == "function") untrack(fiber.type, fiber.scope);
 	if (fiber.scope) dispose(fiber.scope);
 	fiber.release?.();
-	if (fiber.kind == "element") {
-		applyRef(fiber.props?.ref, null);
-		for (const [id, listener] of fiber.events) {
-			const [name, capture] = id.split(":");
-			fiber.start.removeEventListener(name, listener, capture === "true");
-		}
+	if (fiber.kind == "element") unmountElement(fiber);
+	else if (fiber.kind == "component") unmountComponent(fiber);
+	else if (fiber.kind == "portal") unmountPortal(fiber);
+	removeRange(fiber.start, fiber.end);
+}
+
+//#endregion
+//#region src/render/render.ts
+const roots = /* @__PURE__ */ new WeakMap();
+const focusing = [];
+let passiveRender = false;
+let depth = 0;
+function render(node, container) {
+	roots.get(container)?.();
+	container.replaceChildren();
+	const context = new Context(Context.root);
+	const fiber = range("fragment", container, null, context);
+	try {
+		pass(() => {
+			const appearanceContext = appearanceRoot();
+			reconcile(fiber, node, context, void 0, appearanceContext ? {
+				context: appearanceContext,
+				entries: []
+			} : void 0);
+		});
+	} catch (error) {
+		unmountFiber(fiber);
+		context.pop();
+		throw error;
 	}
-	if (fiber.kind == "component") {
-		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 == "portal") {
-		fiber.portalStart.remove();
-		fiber.portalEnd.remove();
+	let active = true;
+	const unmount = () => {
+		if (!active) return;
+		active = false;
+		unmountFiber(fiber);
+		context.pop();
+		roots.delete(container);
+	};
+	roots.set(container, unmount);
+	return unmount;
+}
+function pass(work) {
+	depth++;
+	try {
+		return work();
+	} finally {
+		if (!--depth) {
+			settle();
+			focus();
+		}
 	}
-	removeRange(fiber.start, fiber.end);
 }
-function removeRange(start, end) {
-	let node = start;
-	while (true) {
-		const next = node.nextSibling;
-		node.remove();
-		if (node === end) break;
-		node = next;
+function focus() {
+	for (const element of focusing.splice(0)) if (element.isConnected) element.focus();
+}
+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 && 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;
 	}
 }