@expressive/dom 0.8.1 → 0.9.0

package/dist/index.js

@@ -5,89 +5,23 @@ import { Component, Context, Model, has, map, unbind } from "@expressive/mvc";
 import { watch } from "@expressive/mvc/observable";
 import { Fragment as Fragment$1 } from "@expressive/mvc/jsx-runtime";
 
-//#region src/style/css.ts
-const unitless = /* @__PURE__ */ new Map();
-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$1(property) {
-	let known = unitless.get(property);
-	if (known === void 0) {
-		probe ||= document.createElement("div").style;
-		probe[property] = "";
-		probe[property] = 1;
-		unitless.set(property, known = Boolean(probe[property]));
-	}
-	return known;
-}
-function sized(property, value) {
-	if (Array.isArray(value)) return value.map((entry) => sized(property, entry));
-	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 `size` shorthand.
-*/
-const css = {
-	"*": (value, key) => ({ [key]: sized(key, value) }),
-	size: (value) => Array.isArray(value) ? {
-		width: value[0],
-		height: value[1]
-	} : {
-		width: value,
-		height: value
-	}
-};
-
-//#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;
 let emitter;
-let rendered = false;
 function registerAppearance(type, enter) {
 	registrations.set(type, enter);
 }
-function registerAppearanceRoot(factory) {
-	root = factory;
-}
 function registerEmitter(emit) {
 	emitter = emit;
 }
 function emitClass(block, depth, document) {
 	return emitter(block, depth, document);
 }
-function appearanceRoot() {
-	rendered = true;
-	return root?.();
-}
-/** Has anything rendered yet - global registration is closed after it has. */
-function appearanceSealed() {
-	return rendered;
-}
-function enterAppearance(parent, type, key) {
+function enterAppearance(type, key) {
 	const chain = [];
+	let parent;
 	let current = type;
 	while (current && current !== Function.prototype) {
 		const enter = registrations.get(current);
@@ -120,9 +54,7 @@ const contexts = /* @__PURE__ */ new WeakMap();
 const rootScopes = /* @__PURE__ */ new WeakMap();
 const STYLES = Symbol("@expressive/dom.styles");
 const entered = /* @__PURE__ */ new WeakSet();
-const globals = [];
-let globalContext;
-function createStyleScope(parent, value, label, defines) {
+function createStyleScope(parent, value, label, pack) {
 	if (!isObject(value)) return parent;
 	const cache = parent?.children || rootScopes;
 	const cached = cache.get(value);
@@ -132,56 +64,59 @@ function createStyleScope(parent, value, label, defines) {
 	const base = {};
 	const scopeLabel = label || parent?.label || "style";
 	const root = { name: scopeLabel };
+	const macros = pack ? Object.create(parent?.macros || null) : parent?.macros || Object.create(null);
 	for (const key of Object.keys(value)) {
-		const entry = value[key];
+		const entry = flatten(value[key], 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().`);
+			if (!isObject(entry)) throw new Error(`Rule "${key}" must be an object. Macros are defined on a Style class.`);
 			const name = key.slice(1);
 			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;
+		} else if (isCondition(key) && isObject(entry)) base[key] = merge(base[key], lift(root, split(key).map((when) => [when]), entry, own, source));
+		else if (pack && typeof entry == "function") macros[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 before = parent ? parent.local : [];
+	const local = [...before, ...own.filter((name) => !before.includes(name))];
 	const rules = Object.create(parent?.rules || null);
 	const labels = Object.create(parent?.labels || null);
 	for (const name of own) {
 		const rule = source[name];
 		const inherited = parent?.rules[name];
-		rules[name] = isObject(inherited) && isObject(rule) && (defines || inherited !== parent.globals?.rules[name]) ? mergeRule(inherited, rule) : rule;
+		rules[name] = inherited ? 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,
+		macros,
 		own: base,
+		pack: pack || parent?.pack,
 		routes: /* @__PURE__ */ new Map(),
 		rules
 	};
-	if (defines) scope.globals = scope;
 	if (root.group) ownGroups.set(scope, root.group);
 	cache.set(value, scope);
 	return scope;
 }
+function lift(frame, paths, body, own, source) {
+	const rest = {};
+	for (const key of Object.keys(body)) {
+		const entry = flatten(body[key], key);
+		if (key[0] == "_") {
+			const name = key.slice(1);
+			if (!own.includes(name)) own.push(name);
+			for (const path of paths) source[name] = merge(source[name], path.reduceRight((rule, when) => ({ [hoist(frame, when)]: rule }), entry));
+		} else if (isCondition(key) && isObject(entry)) rest[key] = lift(frame, paths.flatMap((path) => split(key).map((when) => [...path, when])), entry, own, source);
+		else rest[key] = entry;
+	}
+	return rest;
+}
 function createContext(scope) {
 	const cached = contexts.get(scope);
 	if (cached) return cached;
@@ -195,12 +130,12 @@ function createContext(scope) {
 	contexts.set(scope, context);
 	return context;
 }
-function extendContext(parent, maps, label, defines) {
+function extendContext(parent, maps, label, pack) {
 	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);
+		scope = createStyleScope(scope, map, label, pack);
 		Object.assign(base, mergeRule(base, scope.own));
 		const own = ownGroups.get(scope);
 		if (own) anchors.add(own);
@@ -215,16 +150,16 @@ function baseToken(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 blocks = [...toBlocks(expansion, frame, -.5), ...anchors || []];
 	const appearance = {};
 	if (blocks.length) appearance.blocks = blocks;
 	if (expansion.classes.length) appearance.classes = expansion.classes;
 	return createAppearanceToken(appearance);
 }
-function style$1(type, rules) {
+function style$1(type, rules, pack) {
 	if (entered.has(type)) throw new Error("Cannot add styles after a component has rendered.");
 	if (!Object.hasOwn(type, STYLES)) {
-		const label = type.displayName || type.name;
+		const name = label(type);
 		Object.defineProperty(type, STYLES, {
 			configurable: true,
 			value: {
@@ -233,29 +168,26 @@ function style$1(type, rules) {
 			}
 		});
 		registerAppearance(type, (parent, key) => {
-			const { own, subs } = type[STYLES];
+			const { own, pack, subs } = type[STYLES];
 			entered.add(type);
-			if (!key) return extendContext(parent, own, label);
-			return subs[key] ? extendContext(parent, subs[key], `${label}_${key}`) : parent;
+			const maps = key ? subs[key] : own;
+			if (!maps) return parent;
+			if (pack && (parent?.scope)?.pack !== pack) parent = extendContext(parent, pack.layers, name, pack);
+			return extendContext(parent, maps, key ? `${name}_${key}` : name);
 		});
 	}
-	const { own, subs } = type[STYLES];
+	const styles = type[STYLES];
 	const rest = {};
+	if (pack && styles.pack && styles.pack !== pack) throw new Error(`"${label(type)}" is already styled by another Style class.`);
+	styles.pack ||= pack;
 	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]);
+		const body = flatten(rules[key], key);
+		if (!isObject(body)) throw new Error(`Subcomponent "${key}" must be an object.`);
+		(styles.subs[key.slice(1)] ||= []).push(body);
 	} else rest[key] = rules[key];
-	own.push(rest);
+	styles.own.push(rest);
 	return type;
 }
-function macro$1(rules) {
-	for (const key of Object.keys(rules)) if (key[0] != "_" && key[0] != "$" && typeof rules[key] != "function") throw new Error(`Macro "${key}" must be a function. Use "_${key}" to register a rule.`);
-	if (appearanceSealed()) throw new Error("Cannot add macros after rendering has started.");
-	globals.push(rules);
-	globalContext = void 0;
-	registerAppearanceRoot(() => globalContext ||= extendContext(void 0, globals, "global", true));
-	return rules;
-}
 function createAppearanceRoute(scope, props, tag) {
 	if (!scope) return void 0;
 	const keys = Object.keys(props).filter((key) => key.startsWith("_")).sort();
@@ -264,14 +196,11 @@ function createAppearanceRoute(scope, props, tag) {
 	if (cached) return cached;
 	const present = new Set(keys.map((key) => key.slice(1)));
 	const flags = [];
-	for (const name of scope.names) {
-		if (!present.has(name) || name == tag) continue;
-		if (isObject(scope.rules[name])) flags.push(name);
-	}
+	for (const name of scope.local) if (present.has(name) && name != tag) flags.push(name);
 	const route = {
 		flags,
 		scope,
-		tag: tag && isObject(scope.rules[tag]) ? tag : void 0
+		tag: tag && scope.rules[tag] ? tag : void 0
 	};
 	scope.routes.set(id, route);
 	return route;
@@ -282,7 +211,7 @@ 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) expandShadowed(route.scope, name, parts);
+	for (const name of names) parts.push(expandRule(route.scope, name));
 	const blocks = parts.flatMap((part) => part.blocks);
 	const classes = parts.flatMap((part) => part.classes);
 	let child = route.scope;
@@ -299,7 +228,7 @@ function expandRule(scope, name) {
 	if (!expansion) {
 		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));
+		expansion.blocks = toBlocks(expansion, frame, scope.local.indexOf(name));
 		scope.expansions.set(name, expansion);
 	}
 	return expansion;
@@ -336,17 +265,6 @@ function hoist(frame, 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());
@@ -354,9 +272,9 @@ function handlers(scope, name) {
 	if (!chain) {
 		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);
+			for (let macros = scope.macros; macros; macros = Object.getPrototypeOf(macros)) {
+				const own = Object.getOwnPropertyDescriptor(macros, key);
+				if (own) chain.push(own.value);
 			}
 			if (key == name) chain.named = chain.length;
 		}
@@ -384,7 +302,8 @@ function expand(scope, value, depths, frame) {
 			value.forEach((entry) => walk(entry, depths));
 			return;
 		}
-		for (const [name, entry] of Object.entries(value)) {
+		for (const [name, raw] of Object.entries(value)) {
+			const entry = flatten(raw, name);
 			if (name[0] == "_") {
 				if (isObject(entry)) nested[name] = merge(nested[name], entry);
 				continue;
@@ -455,9 +374,27 @@ function mergeRule(left, right) {
 		...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]);
+	for (const key of Object.keys(right)) {
+		if (key[0] != "_" && !isCondition(key)) continue;
+		const before = flatten(left[key], key);
+		const after = flatten(right[key], key);
+		if (isObject(before) && isObject(after)) output[key] = mergeRule(before, after);
+	}
+	return output;
+}
+function flatten(value, key) {
+	if (!Array.isArray(value) || key[0] != "_" && !isCondition(key)) return value;
+	let output = {};
+	for (const entry of value) {
+		const map = flatten(entry, key);
+		if (isObject(map)) output = mergeRule(output, map);
+		else if (isPresent(map)) return map;
+	}
 	return output;
 }
+function label(type) {
+	return type.displayName || type.name;
+}
 function isPresent(value) {
 	return value !== false && value !== null && value !== void 0;
 }
@@ -486,17 +423,56 @@ function applyDeclarations(style, declarations, previous = {}) {
 
 //#endregion
 //#region src/style/stylesheet.ts
+/**
+* Base class for a macro pack. Each method is a macro, layered over the class
+* it extends; `'*'` handles any key no macro owns.
+*/
+var Style = class {
+	/** The `style()` for this pack, created once per class. */
+	static use() {
+		let apply = bound.get(this);
+		if (!apply) {
+			let pack;
+			let built = false;
+			apply = (type, ...maps) => {
+				if (!built) {
+					pack = layers(this);
+					built = true;
+				}
+				return register(type, maps, pack);
+			};
+			bound.set(this, apply);
+		}
+		return apply;
+	}
+};
 const sheets = /* @__PURE__ */ new WeakMap();
+const bound = /* @__PURE__ */ new WeakMap();
 let groups = 0;
 function style(type, ...maps) {
-	for (const rules of maps) if (rules) style$1(type, rules);
+	return register(type, maps);
+}
+function register(type, maps, pack) {
+	for (const rules of maps) if (rules) style$1(type, rules, pack);
 	registerEmitter(emit);
 	return type;
 }
-function macro(rules) {
-	macro$1(rules);
-	registerEmitter(emit);
-	return rules;
+function layers(type) {
+	const instance = new type();
+	const maps = [];
+	const [field] = Object.keys(instance);
+	if (field) throw new Error(`Field "${field}" on ${type.name} is reserved. Define macros as methods.`);
+	for (let proto = type.prototype; proto !== Style.prototype; proto = Object.getPrototypeOf(proto)) {
+		const map = {};
+		for (const key of Object.getOwnPropertyNames(proto)) {
+			if (key == "constructor") continue;
+			const { value } = Object.getOwnPropertyDescriptor(proto, key);
+			if (typeof value != "function" || key[0] == "_" || key[0] == "$") throw new Error(`"${key}" on ${type.name} must be a method with a bare name.`);
+			map[key] = value.bind(instance);
+		}
+		maps.unshift(map);
+	}
+	return maps.length ? { layers: maps } : void 0;
 }
 function emit(block, depth, document) {
 	let sheet = sheets.get(document);
@@ -556,6 +532,80 @@ function serialize(document, declarations) {
 	return value.cssText;
 }
 
+//#endregion
+//#region src/style/css.ts
+const unitless = /* @__PURE__ */ new Map();
+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$1(property) {
+	let known = unitless.get(property);
+	if (known === void 0) {
+		probe ||= document.createElement("div").style;
+		probe[property] = "";
+		probe[property] = 1;
+		unitless.set(property, known = Boolean(probe[property]));
+	}
+	return known;
+}
+function sized(property, value) {
+	if (Array.isArray(value)) return value.map((entry) => sized(property, entry));
+	return typeof value == "number" && value !== 0 && !bare$1(property) ? `${value}px` : value;
+}
+/**
+* Web macro pack - pixel units for numbers and the `size` shorthand. Extend
+* it, or use it as is with `Css.use()`.
+*/
+var Css = class extends Style {
+	"*"(value, key) {
+		return { [key]: sized(key, value) };
+	}
+	size(value) {
+		return Array.isArray(value) ? {
+			width: value[0],
+			height: value[1]
+		} : {
+			width: value,
+			height: value
+		};
+	}
+};
+
+//#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
+const order = [
+	"minWidth",
+	"maxWidth",
+	"minHeight",
+	"maxHeight",
+	"orientation",
+	"hover",
+	"pointer",
+	"prefersColorScheme",
+	"prefersReducedMotion"
+];
+function media(query) {
+	const features = [];
+	for (const key of order) {
+		const value = query[key];
+		if (value === void 0) continue;
+		const feature = key.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+		features.push(`(${feature}: ${typeof value == "number" ? `${value}px` : value})`);
+	}
+	return `@media ${features.join(" and ")}`;
+}
+
 //#endregion
 //#region src/render/commits.ts
 const DETACHED = /* @__PURE__ */ new WeakMap();
@@ -672,7 +722,6 @@ function componentProps(type, props, appearance) {
 	return {
 		appearance: {
 			author,
-			context: value.context,
 			entries,
 			lexical: value.context || context
 		},
@@ -711,8 +760,6 @@ function claim(element, appearance, resolved, className, value) {
 		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);
@@ -720,14 +767,10 @@ function claim(element, appearance, resolved, className, value) {
 	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,
+		context: resolved?.context || appearance?.context,
 		declarations: collected.declarations
 	};
 }
@@ -880,10 +923,9 @@ function renderedAppearance(fiber) {
 		hops: hops + 1,
 		style
 	}));
-	const inherited = fiber.appearance?.context || appearanceRoot();
 	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({
+	const context = sub ? enterAppearance(latest(sub.owner.constructor), sub.key) : enterAppearance(latest(fiber.type));
+	if (context?.base) entries.push({
 		hops: 0,
 		style: context.base
 	});
@@ -1378,7 +1420,7 @@ function mountOwnedComponent(value, parent, before, context, boundary, appearanc
 }
 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 childContext = context.push(instance, owned ? () => instance.set(null) : void 0);
 	const element = owned ? props : {};
 	const { fallback } = instance;
 	const ownBoundary = fallback !== void 0 && fallback !== false || element.catch || instance.catch ? {
@@ -1471,7 +1513,6 @@ function rerun(fiber, run) {
 }
 function unmountComponent(fiber) {
 	fiber.childContext?.pop();
-	if (fiber.owned && !fiber.instance.get(null)) fiber.instance.set(null);
 }
 function renderable(value) {
 	return value instanceof Component;
@@ -1562,13 +1603,7 @@ function render(node, container) {
 	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);
-		});
+		pass(() => reconcile(fiber, node, context, void 0, void 0));
 	} catch (error) {
 		unmountFiber(fiber);
 		context.pop();
@@ -1630,5 +1665,5 @@ function attempt(fiber, passive, render) {
 }
 
 //#endregion
-export { Fragment, Portal, createElement, css, em, macro, media, px, rem, render, style };
+export { Css, Fragment, Portal, Style, createElement, em, media, px, rem, render, style };
 //# sourceMappingURL=index.js.map