@expressive/dom 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a as untrack, c as enter, d as release, f as schedule, i as track, l as afterFlush, m as transition, n as latest, o as call, p as settle$1, r as same, s as dispose, u as claim$1 } from "./chunk-hot-a8qgv3tf.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 { a as untrack, c as enter, d as claim$1, f as release, h as transition, i as track, l as owner, m as settle$1, n as latest, o as call, p as schedule, r as same, s as dispose, u as afterFlush } from "./chunk-hot-vusv_ouU.js";
+import { a as authoring, c as isVNode, i as authorOf, l as vnode, n as PORTAL, o as childrenOf, r as Portal, s as createElement, t as Fragment } from "./chunk-vnode-BN2KOsCV.js";
 import "./jsx-runtime.js";
 import { Component, Context, Model, has, map, unbind } from "@expressive/mvc";
 import { watch } from "@expressive/mvc/observable";
@@ -12,7 +12,7 @@ let probe;
 * Does the CSSOM accept a bare number for this property? Probed once with a
 * canonical value; the answer is a property of CSS, not of the value.
 */
-function bare(property) {
+function bare$1(property) {
 	let known = unitless.get(property);
 	if (known === void 0) {
 		probe ||= document.createElement("div").style;
@@ -24,30 +24,14 @@ function bare(property) {
 }
 function sized(property, value) {
 	if (Array.isArray(value)) return value.map((entry) => sized(property, entry));
-	return typeof value == "number" && value !== 0 && !bare(property) ? `${value}px` : value;
+	return typeof value == "number" && value !== 0 && !bare$1(property) ? `${value}px` : value;
 }
 /**
 * Web macro pack. Register with `macro(css)` to opt into pixel units for
-* numbers and the axis shorthands CSS itself does not provide.
+* numbers and the `size` shorthand.
 */
 const css = {
 	"*": (value, key) => ({ [key]: sized(key, value) }),
-	mx: (value) => ({
-		marginLeft: value,
-		marginRight: value
-	}),
-	my: (value) => ({
-		marginTop: value,
-		marginBottom: value
-	}),
-	px: (value) => ({
-		paddingLeft: value,
-		paddingRight: value
-	}),
-	py: (value) => ({
-		paddingTop: value,
-		paddingBottom: value
-	}),
 	size: (value) => Array.isArray(value) ? {
 		width: value[0],
 		height: value[1]
@@ -57,8 +41,26 @@ const css = {
 	}
 };
 
+//#endregion
+//#region src/style/units.ts
+function unit(suffix) {
+	return (...values) => values.map((value) => value + suffix).join(" ");
+}
+const rem = unit("rem");
+const em = unit("em");
+const px = unit("px");
+
+//#endregion
+//#region src/style/media.ts
+function media(query) {
+	return `@media ${Object.entries(query).map(([key, value]) => {
+		return `(${key.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}: ${typeof value == "number" ? `${value}px` : value})`;
+	}).join(" and ")}`;
+}
+
 //#endregion
 //#region src/style/protocol.ts
+const SUBCOMPONENT = /^_[A-Z]/;
 const registrations = /* @__PURE__ */ new WeakMap();
 const tokens = /* @__PURE__ */ new WeakMap();
 let root;
@@ -84,7 +86,7 @@ function appearanceRoot() {
 function appearanceSealed() {
 	return rendered;
 }
-function enterAppearance(parent, type) {
+function enterAppearance(parent, type, key) {
 	const chain = [];
 	let current = type;
 	while (current && current !== Function.prototype) {
@@ -92,9 +94,12 @@ function enterAppearance(parent, type) {
 		if (enter) chain.unshift(enter);
 		current = Object.getPrototypeOf(current);
 	}
-	for (const enter of chain) parent = enter(parent);
+	for (const enter of chain) parent = enter(parent, key);
 	return parent;
 }
+function reserved(key) {
+	if (SUBCOMPONENT.test(key)) throw new Error(`"${key}" is reserved for subcomponents in style() maps.`);
+}
 function createAppearanceToken(appearance) {
 	const token = {};
 	tokens.set(token, appearance);
@@ -107,6 +112,9 @@ function appearanceToken(value) {
 //#endregion
 //#region src/style/appearance.ts
 const bases = /* @__PURE__ */ new WeakMap();
+const groups$1 = /* @__PURE__ */ new WeakMap();
+const ownGroups = /* @__PURE__ */ new WeakMap();
+const ancestors = /* @__PURE__ */ new Map();
 const chains = /* @__PURE__ */ new WeakMap();
 const contexts = /* @__PURE__ */ new WeakMap();
 const rootScopes = /* @__PURE__ */ new WeakMap();
@@ -122,42 +130,55 @@ function createStyleScope(parent, value, label, defines) {
 	const own = [];
 	const source = {};
 	const base = {};
+	const scopeLabel = label || parent?.label || "style";
+	const root = { name: scopeLabel };
 	for (const key of Object.keys(value)) {
 		const entry = value[key];
 		if (key[0] == "$") throw new Error(`Reserved key "${key}" in style map.`);
+		if (SUBCOMPONENT.test(key)) throw new Error(`Subcomponent "${key}" must be at the top of a style() map.`);
 		if (key[0] == "_") {
 			if (!isObject(entry)) throw new Error(`Rule "${key}" must be an object. Macros are defined by macro().`);
 			const name = key.slice(1);
-			own.push(name);
-			source[name] = entry;
+			if (!own.includes(name)) own.push(name);
+			source[name] = merge(source[name], entry);
+		} else if (isCondition(key) && isObject(entry)) {
+			const rest = {};
+			for (const inner of Object.keys(entry)) if (inner[0] == "_") {
+				const name = inner.slice(1);
+				if (!own.includes(name)) own.push(name);
+				for (const when of split(key)) source[name] = merge(source[name], { [hoist(root, when)]: entry[inner] });
+			} else rest[inner] = entry[inner];
+			base[key] = merge(base[key], rest);
 		} else if (defines && typeof entry == "function") {
 			own.push(key);
 			source[key] = entry;
 		} else base[key] = entry;
 	}
 	const names = parent ? [...parent.names, ...own.filter((name) => !parent.names.includes(name))] : own;
+	const before = parent && parent !== parent.globals ? parent.local : [];
+	const local = defines ? [] : [...before, ...own.filter((name) => !before.includes(name))];
 	const rules = Object.create(parent?.rules || null);
 	const labels = Object.create(parent?.labels || null);
-	const scopeLabel = label || parent?.label || "style";
 	for (const name of own) {
 		const rule = source[name];
 		const inherited = parent?.rules[name];
-		rules[name] = isObject(inherited) && isObject(rule) ? {
-			...inherited,
-			...rule
-		} : rule;
+		rules[name] = isObject(inherited) && isObject(rule) && (defines || inherited !== parent.globals?.rules[name]) ? mergeRule(inherited, rule) : rule;
 		labels[name] = scopeLabel;
 	}
 	const scope = {
 		children: /* @__PURE__ */ new WeakMap(),
 		expansions: /* @__PURE__ */ new Map(),
+		globals: parent?.globals,
 		label: scopeLabel,
 		labels,
+		local,
 		names,
 		own: base,
 		routes: /* @__PURE__ */ new Map(),
 		rules
 	};
+	if (defines) scope.globals = scope;
+	if (root.group) ownGroups.set(scope, root.group);
 	cache.set(value, scope);
 	return scope;
 }
@@ -177,40 +198,54 @@ function createContext(scope) {
 function extendContext(parent, maps, label, defines) {
 	let scope = parent?.scope;
 	const base = { ...scope && bases.get(scope) };
+	const anchors = new Set(scope && groups$1.get(scope));
 	for (const map of maps) {
 		scope = createStyleScope(scope, map, label, defines);
-		Object.assign(base, scope.own);
+		Object.assign(base, mergeRule(base, scope.own));
+		const own = ownGroups.get(scope);
+		if (own) anchors.add(own);
 	}
 	if (Object.keys(base).length) bases.set(scope, base);
+	if (anchors.size) groups$1.set(scope, [...anchors]);
 	return createContext(scope);
 }
 function baseToken(scope) {
 	const base = bases.get(scope);
-	if (!base) return void 0;
-	const expansion = expand(scope, base, /* @__PURE__ */ new Map());
+	const anchors = groups$1.get(scope);
+	if (!base && !anchors) return void 0;
+	const frame = { name: scope.label };
+	const expansion = expand(scope, base, /* @__PURE__ */ new Map(), frame);
+	const blocks = [...toBlocks(expansion, frame, shared(scope) - .5), ...anchors || []];
 	const appearance = {};
-	if (Object.keys(expansion.declarations).length) appearance.blocks = [{
-		declarations: expansion.declarations,
-		name: scope.label,
-		ordinal: -1
-	}];
+	if (blocks.length) appearance.blocks = blocks;
 	if (expansion.classes.length) appearance.classes = expansion.classes;
 	return createAppearanceToken(appearance);
 }
 function style$1(type, rules) {
 	if (entered.has(type)) throw new Error("Cannot add styles after a component has rendered.");
-	if (Object.hasOwn(type, STYLES)) type[STYLES].push(rules);
-	else {
+	if (!Object.hasOwn(type, STYLES)) {
 		const label = type.displayName || type.name;
 		Object.defineProperty(type, STYLES, {
 			configurable: true,
-			value: [rules]
+			value: {
+				own: [],
+				subs: {}
+			}
 		});
-		registerAppearance(type, (parent) => {
+		registerAppearance(type, (parent, key) => {
+			const { own, subs } = type[STYLES];
 			entered.add(type);
-			return extendContext(parent, type[STYLES], label);
+			if (!key) return extendContext(parent, own, label);
+			return subs[key] ? extendContext(parent, subs[key], `${label}_${key}`) : parent;
 		});
 	}
+	const { own, subs } = type[STYLES];
+	const rest = {};
+	for (const key of Object.keys(rules)) if (SUBCOMPONENT.test(key)) {
+		if (!isObject(rules[key])) throw new Error(`Subcomponent "${key}" must be an object.`);
+		(subs[key.slice(1)] ||= []).push(rules[key]);
+	} else rest[key] = rules[key];
+	own.push(rest);
 	return type;
 }
 function macro$1(rules) {
@@ -247,8 +282,8 @@ function resolveAppearance(scope, props, tag) {
 	const parts = [];
 	const names = route.tag ? [route.tag] : [];
 	for (const name of route.flags) if (props[`_${name}`]) names.push(name);
-	for (const name of names) parts.push(expandRule(route.scope, name));
-	const blocks = parts.flatMap((part) => part.block ? [part.block] : []);
+	for (const name of names) expandShadowed(route.scope, name, parts);
+	const blocks = parts.flatMap((part) => part.blocks);
 	const classes = parts.flatMap((part) => part.classes);
 	let child = route.scope;
 	for (const part of parts) for (const nested of part.nested) child = createStyleScope(child, nested, tag ? `${route.scope.label}_${tag}` : route.scope.label);
@@ -262,37 +297,83 @@ function resolveAppearance(scope, props, tag) {
 function expandRule(scope, name) {
 	let expansion = scope.expansions.get(name);
 	if (!expansion) {
-		expansion = expand(scope, scope.rules[name], /* @__PURE__ */ new Map());
-		if (Object.keys(expansion.declarations).length) expansion.block = {
-			declarations: expansion.declarations,
-			name: `${scope.labels[name]}_${name}`,
-			ordinal: scope.names.indexOf(name)
-		};
+		const frame = { name: `${scope.labels[name]}_${name}` };
+		expansion = expand(scope, scope.rules[name], /* @__PURE__ */ new Map(), frame);
+		expansion.blocks = toBlocks(expansion, frame, ordinal(scope, name));
 		scope.expansions.set(name, expansion);
 	}
 	return expansion;
 }
+function toBlocks({ declarations, variants }, { group, name }, ordinal) {
+	const blocks = [];
+	if (Object.keys(declarations).length) blocks.push({
+		declarations,
+		name,
+		ordinal
+	});
+	for (const { declarations, when } of variants) blocks.push({
+		declarations,
+		name,
+		ordinal: ordinal + .5 - .25 / when.length,
+		when: when.map((condition) => ancestors.get(condition) || condition)
+	});
+	if (group) blocks.push(group);
+	return blocks;
+}
+function hoist(frame, condition) {
+	if (condition[0] != ":") return condition;
+	if (condition.includes("::")) throw new Error(`Rules cannot nest inside pseudo-element "${condition}".`);
+	frame.group ||= {
+		declarations: {},
+		group: true,
+		name: frame.name,
+		ordinal: 0
+	};
+	const key = `\0${ancestors.size}`;
+	ancestors.set(key, {
+		on: frame.group,
+		state: condition
+	});
+	return key;
+}
+function shared(scope) {
+	return scope.globals ? scope.globals.names.length : 0;
+}
+function ordinal(scope, name) {
+	return scope.rules[name] === scope.globals?.rules[name] ? scope.names.indexOf(name) : shared(scope) + scope.local.indexOf(name);
+}
+function expandShadowed(scope, name, parts) {
+	const { globals } = scope;
+	if (globals && isObject(globals.rules[name]) && globals.rules[name] !== scope.rules[name]) parts.push(expandRule(globals, name));
+	parts.push(expandRule(scope, name));
+}
 function handlers(scope, name) {
 	let known = chains.get(scope);
 	if (!known) chains.set(scope, known = /* @__PURE__ */ new Map());
 	let chain = known.get(name);
 	if (!chain) {
-		chain = [];
-		for (const key of [name, "*"]) for (let rules = scope.rules; rules; rules = Object.getPrototypeOf(rules)) {
-			const own = Object.getOwnPropertyDescriptor(rules, key);
-			if (own && typeof own.value == "function") chain.push(own.value);
+		chain = Object.assign([], { named: 0 });
+		for (const key of [name, "*"]) {
+			for (let rules = scope.rules; rules; rules = Object.getPrototypeOf(rules)) {
+				const own = Object.getOwnPropertyDescriptor(rules, key);
+				if (own && typeof own.value == "function") chain.push(own.value);
+			}
+			if (key == name) chain.named = chain.length;
 		}
 		known.set(name, chain);
 	}
 	return chain;
 }
-function expand(scope, value, depths) {
+function expand(scope, value, depths, frame) {
 	const output = {
+		blocks: [],
 		classes: [],
 		declarations: {},
-		nested: []
+		nested: [],
+		variants: []
 	};
 	const nested = {};
+	const conditions = [];
 	function walk(value, depths) {
 		if (!value) return;
 		if (typeof value == "string") {
@@ -305,25 +386,78 @@ function expand(scope, value, depths) {
 		}
 		for (const [name, entry] of Object.entries(value)) {
 			if (name[0] == "_") {
-				if (isObject(entry)) nested[name] = entry;
+				if (isObject(entry)) nested[name] = merge(nested[name], entry);
+				continue;
+			}
+			if (isCondition(name)) {
+				if (isObject(entry)) conditions.push([name, entry]);
+				else if (isPresent(entry)) throw new Error(`Condition "${name}" must be an object.`);
 				continue;
 			}
 			const chain = handlers(scope, name);
 			const depth = depths.get(name) || 0;
+			if (depth && depth >= chain.named && entry === true) throw new Error(`Macro "${name}" returned itself.`);
 			if (depth < chain.length) {
 				if (isPresent(entry)) walk(chain[depth](entry === true ? void 0 : entry, name), new Map(depths).set(name, depth + 1));
 			} else output.declarations[name] = terminal(name, entry);
 		}
 	}
 	walk(value, depths);
+	for (const [key, body] of conditions) for (const when of split(key)) {
+		const inner = expand(scope, body, depths, frame);
+		if (inner.classes.length) throw new Error(`Classes are not supported inside "${when}".`);
+		for (const map of inner.nested) {
+			const key = hoist(frame, when);
+			for (const rule of Object.keys(map)) nested[rule] = merge(nested[rule], { [key]: map[rule] });
+		}
+		if (Object.keys(inner.declarations).length) output.variants.push({
+			declarations: inner.declarations,
+			when: [when]
+		});
+		for (const variant of inner.variants) output.variants.push({
+			declarations: variant.declarations,
+			when: [when, ...variant.when]
+		});
+	}
 	if (Object.keys(nested).length) output.nested.push(nested);
 	return output;
 }
 function terminal(name, value) {
 	if (Array.isArray(value)) return value.join(" ");
-	if (typeof value == "function" || isObject(value)) throw new Error(`No macro handles "${name}".`);
+	if (value === true || typeof value == "function" || isObject(value)) throw new Error(`No macro handles "${name}".`);
 	return typeof value == "number" ? String(value) : value;
 }
+function isCondition(key) {
+	return key[0] == ":" || key[0] == "@" || key[0] == "\0";
+}
+function split(key) {
+	if (key[0] != ":") return [key];
+	const parts = [];
+	let depth = 0;
+	let start = 0;
+	for (let index = 0; index < key.length; index++) {
+		const char = key[index];
+		if (char == "(") depth++;
+		else if (char == ")") depth--;
+		else if (char == "," && !depth) {
+			parts.push(key.slice(start, index).trim());
+			start = index + 1;
+		}
+	}
+	parts.push(key.slice(start).trim());
+	return parts;
+}
+function merge(left, right) {
+	return isObject(left) ? mergeRule(left, right) : right;
+}
+function mergeRule(left, right) {
+	const output = {
+		...left,
+		...right
+	};
+	for (const key of Object.keys(right)) if (isCondition(key) && isObject(left[key]) && isObject(right[key])) output[key] = mergeRule(left[key], right[key]);
+	return output;
+}
 function isPresent(value) {
 	return value !== false && value !== null && value !== void 0;
 }
@@ -353,8 +487,9 @@ function applyDeclarations(style, declarations, previous = {}) {
 //#endregion
 //#region src/style/stylesheet.ts
 const sheets = /* @__PURE__ */ new WeakMap();
-function style(type, rules) {
-	style$1(type, rules);
+let groups = 0;
+function style(type, ...maps) {
+	for (const rules of maps) if (rules) style$1(type, rules);
 	registerEmitter(emit);
 	return type;
 }
@@ -377,21 +512,40 @@ function emit(block, depth, document) {
 		};
 		sheets.set(document, sheet);
 	}
+	if (block.group) depth = 0;
 	let byDepth = sheet.emitted.get(block);
 	if (!byDepth) sheet.emitted.set(block, byDepth = /* @__PURE__ */ new Map());
 	const cached = byDepth.get(depth);
 	if (cached) return cached;
-	const css = serialize(document, block.declarations);
-	const base = (depth ? `${block.name}-d${depth}` : block.name).replace(/[^\w-]/g, "_");
+	const when = block.when || [];
+	const at = when.filter((condition) => typeof condition == "string" && condition[0] == "@");
+	const pseudo = when.filter((condition) => typeof condition == "string" && condition[0] == ":").join("");
+	const split = pseudo.indexOf("::");
+	const states = split < 0 ? pseudo : pseudo.slice(0, split);
+	const element = split < 0 ? "" : pseudo.slice(split);
+	const selector = `${when.map((condition) => typeof condition == "string" ? "" : `:where(.${emit(condition.on, 0, document)}${condition.state}) `).join("")}.%${states ? `:where(${states})` : ""}${element}`;
+	const css = block.group ? `\0${groups++}` : serialize(document, block.declarations);
+	const key = [
+		...at,
+		selector,
+		css
+	].join("\0");
+	const base = [
+		depth ? `${block.name}-d${depth}` : block.name,
+		...when.map((condition) => typeof condition == "string" ? condition : condition.on.name + condition.state),
+		...block.group ? ["group"] : []
+	].join("-").replace(/[^\w-]+/g, "_").replace(/_*(-)_*|_+$/g, "$1");
 	let name = base;
-	for (let index = 2; sheet.names.has(name) && sheet.names.get(name) !== css; index++) name = `${base}-${index}`;
+	for (let index = 2; sheet.names.has(name) && sheet.names.get(name) !== key; index++) name = `${base}-${index}`;
 	if (!sheet.names.has(name)) {
-		const { positions } = sheet;
-		let at = positions.findIndex(([d, o]) => d > depth || d == depth && o > block.ordinal);
-		if (at < 0) at = positions.length;
-		sheet.names.set(name, css);
-		positions.splice(at, 0, [depth, block.ordinal]);
-		sheet.element.sheet.insertRule(`.${name}{${css}}`, at);
+		sheet.names.set(name, key);
+		if (!block.group) {
+			const { positions } = sheet;
+			let index = positions.findIndex(([d, o]) => d > depth || d == depth && o > block.ordinal);
+			if (index < 0) index = positions.length;
+			positions.splice(index, 0, [depth, block.ordinal]);
+			sheet.element.sheet.insertRule(at.reduceRight((rule, condition) => `${condition}{${rule}}`, `${selector.replace("%", name)}{${css}}`), index);
+		}
 	}
 	byDepth.set(depth, name);
 	return name;
@@ -495,82 +649,32 @@ function removeRange(start, end) {
 	}
 }
 
-//#endregion
-//#region src/render/collection.ts
-function mountCollection(value, parent, before, context, boundary, appearance) {
-	const fiber = range("collection", parent, before, context);
-	fiber.source = value;
-	fiber.value = value;
-	fiber.boundary = boundary;
-	fiber.appearance = appearance;
-	fiber.scope = makeScope(context, (passive) => runCollection(fiber, passive));
-	let first = true;
-	fiber.release = watch(value, (current) => {
-		fiber.value = current;
-		if (!first && fiber.scope?.active) schedule(fiber.scope);
-		first = false;
-	}, void 0, transition);
-	return complete(fiber, () => {
-		runCollection(fiber, passiveRender);
-	});
-}
-function runCollection(fiber, passive) {
-	attempt(fiber, passive, () => {
-		return fiber.value.render();
-	});
-}
-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 };
-	});
-}
-
 //#endregion
 //#region src/style/claim.ts
 const tickets = /* @__PURE__ */ new WeakMap();
 function componentProps(type, props, appearance) {
 	const context = appearance?.context;
+	for (const key of Object.keys(props)) reserved(key);
 	if (!context || typeof type != "function") return {
 		appearance,
 		props
 	};
 	const value = context.resolve(props);
-	const entries = appearance.entries;
+	const { author, entries } = appearance;
 	if (!value) return {
-		appearance: { entries },
+		appearance: {
+			author,
+			entries,
+			lexical: context
+		},
 		props
 	};
 	return {
 		appearance: {
+			author,
 			context: value.context,
-			entries
+			entries,
+			lexical: value.context || context
 		},
 		props: {
 			...props,
@@ -578,6 +682,9 @@ function componentProps(type, props, appearance) {
 		}
 	};
 }
+function placed(appearance) {
+	return appearance && { entries: appearance.entries };
+}
 function door(value) {
 	const collected = {
 		classes: [],
@@ -667,11 +774,69 @@ function appendClasses(classes, value) {
 	if (typeof value == "string") classes.push(...value.split(/\s+/).filter(Boolean));
 }
 
+//#endregion
+//#region src/render/collection.ts
+function mountCollection(value, parent, before, context, boundary, appearance) {
+	const fiber = range("collection", parent, before, context);
+	fiber.source = value;
+	fiber.value = value;
+	fiber.boundary = boundary;
+	fiber.appearance = appearance;
+	fiber.scope = makeScope(context, (passive) => runCollection(fiber, passive));
+	let first = true;
+	fiber.release = watch(value, (current) => {
+		fiber.value = current;
+		if (!first && fiber.scope?.active) schedule(fiber.scope);
+		first = false;
+	}, void 0, transition);
+	return complete(fiber, () => {
+		runCollection(fiber, passiveRender);
+	});
+}
+function runCollection(fiber, passive) {
+	attempt(fiber, passive, () => {
+		return fiber.value.render();
+	});
+}
+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 };
+	});
+}
+
 //#endregion
 //#region src/render/style.ts
 let rendering;
 let touched = false;
 const observed = /* @__PURE__ */ new WeakMap();
+const bare = /* @__PURE__ */ new WeakMap();
 function observe(props) {
 	if (!("style" in props)) return props;
 	let output = observed.get(props);
@@ -700,7 +865,7 @@ function consume(fiber, render) {
 	rendering = fiber.props;
 	touched = false;
 	try {
-		const output = render();
+		const output = authoring(fiber, render);
 		fiber.consumed = touched;
 		return output;
 	} finally {
@@ -716,7 +881,8 @@ function renderedAppearance(fiber) {
 		style
 	}));
 	const inherited = fiber.appearance?.context || appearanceRoot();
-	const context = enterAppearance(inherited, latest(fiber.type));
+	const sub = owner(fiber.type);
+	const context = sub ? enterAppearance(inherited, latest(sub.owner.constructor), sub.key) : enterAppearance(inherited, latest(fiber.type));
 	if (context?.base && context !== inherited) entries.push({
 		hops: 0,
 		style: context.base
@@ -725,10 +891,27 @@ function renderedAppearance(fiber) {
 		hops: 0,
 		style
 	});
-	return entries.length || context ? {
+	if (entries.length || context) return {
+		author: fiber,
 		context,
 		entries
-	} : void 0;
+	};
+	let empty = bare.get(fiber);
+	if (!empty) bare.set(fiber, empty = {
+		author: fiber,
+		entries
+	});
+	return empty;
+}
+function authored(value, appearance) {
+	const author = authorOf(value);
+	if (!author || !appearance || author === appearance.author) return appearance;
+	for (let fiber = appearance.author; fiber; fiber = fiber.appearance?.author) if (fiber.appearance?.author === author) return {
+		author,
+		context: fiber.appearance.lexical,
+		entries: appearance.entries
+	};
+	return appearance;
 }
 
 //#endregion
@@ -784,7 +967,11 @@ function patchProps(fiber, next, appearance) {
 		...previous,
 		...next
 	})) {
-		if (key.startsWith("_") || key == "children" || key == "className" || key == "key" || key == "ref" || key == "style" || CONTROLS.includes(key)) continue;
+		if (key[0] == "_") {
+			reserved(key);
+			continue;
+		}
+		if (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]);
 	}
@@ -793,7 +980,8 @@ function patchProps(fiber, next, appearance) {
 	fiber.claimed = claimed;
 	fiber.props = next;
 	fiber.appearance = appearance;
-	if (!raw) reconcileChildren(fiber, element, null, next.children, fiber.context, fiber.boundary, claimed.context ? {
+	if (!raw) reconcileChildren(fiber, element, null, next.children, fiber.context, fiber.boundary, claimed.context || appearance?.author ? {
+		author: appearance?.author,
 		context: claimed.context,
 		entries: []
 	} : void 0);
@@ -962,7 +1150,7 @@ 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);
-			const fiber = patch(child, value, parent, before, context, boundary, appearance);
+			const fiber = patch(child, value, parent, before, context, boundary, authored(value, appearance));
 			if (fiber !== child) used.delete(child);
 			next.push(fiber);
 		}
@@ -1175,13 +1363,20 @@ function mountFunction(value, parent, before, context, boundary, appearance) {
 		run(fiber, passiveRender);
 	});
 }
+const PLACED = /* @__PURE__ */ new WeakMap();
+Component.on({ setup(self) {
+	return PLACED.get(self);
+} });
 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);
-	return mountComponent(new Type(props), parent, before, context, boundary, resolved.appearance, true, value.key, props);
+	const instance = new Type(props);
+	let place;
+	PLACED.set(instance, new Promise((resolve) => place = resolve));
+	return mountComponent(instance, parent, before, context, boundary, resolved.appearance, true, value.key, props, place);
 }
-function mountComponent(instance, parent, before, context, inherited, appearance, owned = false, key, props = instance.props) {
+function mountComponent(instance, parent, before, context, inherited, appearance, owned = false, key, props = instance.props, place) {
 	const fiber = range("component", parent, before, context);
 	const childContext = context.push(instance);
 	const element = owned ? props : {};
@@ -1224,7 +1419,7 @@ function mountComponent(instance, parent, before, context, inherited, appearance
 			run(fiber, passiveRender);
 		});
 	} finally {
-		if (owned && !fiber.dead) inserted(fiber, () => fiber.cleanup = instance.mount?.());
+		if (owned && !fiber.dead) inserted(fiber, place);
 	}
 	return fiber;
 }
@@ -1256,7 +1451,7 @@ function patchFunction(fiber, value, appearance) {
 }
 function patchComponent(fiber, value, appearance) {
 	const resolved = isVNode(value) ? componentProps(value.type, value.props, appearance) : {
-		appearance,
+		appearance: placed(appearance),
 		props: fiber.props
 	};
 	fiber.appearance = resolved.appearance;
@@ -1275,7 +1470,6 @@ function rerun(fiber, run) {
 	settle$1(fiber.scope);
 }
 function unmountComponent(fiber) {
-	if (typeof fiber.cleanup == "function") fiber.cleanup();
 	fiber.childContext?.pop();
 	if (fiber.owned && !fiber.instance.get(null)) fiber.instance.set(null);
 }
@@ -1307,7 +1501,7 @@ function mount(value, parent, before, context, boundary, appearance) {
 			children: []
 		};
 	}
-	if (renderable(value)) return mountComponent(value, parent, before, context, boundary, appearance);
+	if (renderable(value)) return mountComponent(value, parent, before, context, boundary, placed(appearance));
 	if (value instanceof Model) notRenderable(value.constructor);
 	if (isCollection(value)) return mountCollection(value, parent, before, context, boundary, appearance);
 	if (!isVNode(value)) throw new TypeError(`Cannot render ${String(value)}.`);
@@ -1436,5 +1630,5 @@ function attempt(fiber, passive, render) {
 }
 
 //#endregion
-export { Fragment, Portal, createElement, css, macro, render, style };
+export { Fragment, Portal, createElement, css, em, macro, media, px, rem, render, style };
 //# sourceMappingURL=index.js.map