@vielzeug/ore 26.11.8 → 26.11.10

package/dist/ore.js

@@ -1,4 +1,4 @@
-import { batch as e, computed as t, createScope as n, effect as r, isReactive as i, signal as a, untrack as o } from "@vielzeug/ripple";
+import { batch as e, computed as t, createScope as n, effect as r, isReactive as i, onCleanup as a, signal as o, untrack as s } from "@vielzeug/ripple";
 // src/errors.ts
 var OreError = class extends Error {
 	constructor(e, t) {
@@ -18,18 +18,20 @@ function reportRuntimeError(e, t) {
 		detail: e
 	}));
 }
-var s = {
+var c = {
 	asyncSetupUnsupported: "setup() must return an HTMLResult or null; use reactive state for asynchronous work",
 	defineDuplicate: (e) => `define('${e}') called twice: custom element already registered`,
 	defineFieldRequiresFormAssociated: (e) => `useField() requires define('${e}', { formAssociated: true })`,
 	defineRequiresTag: "define() requires a tag name",
 	eachDuplicateKey: (e, t) => `each() received duplicate key "${e}" at index ${t}`,
 	eventModifierUnknown: (e, t) => `@${e}.${t}: unknown event modifier "${t}". Supported: .stop, .prevent, .once, .capture`,
+	htmlResultReused: "html`...` result was already rendered: each result renders once. Call the template function again for another copy.",
 	injectStrictFailed: (e, t) => `injectStrict() could not resolve key "${e}" in <${t}>`,
 	invariantViolated: (e) => `invariant violated: ${e}`,
 	lifecycleOutsideSetup: "Lifecycle hooks must be called during component setup",
 	listenNullTarget: (e) => `listen() called with a null/undefined target for event "${e}": listener not attached`,
 	modelRequiresValueBinding: (e) => `model(): "${e}" must be a plain value/checked attribute binding, not a boolean attribute. Bind it as ${e}=\${model(sig)}, not ?${e}=\${model(sig)}.`,
+	notAnHtmlResult: "expected an html`...` result",
 	propBindingForbiddenName: (e) => `html\`...\`: ".${e}" is a forbidden property-binding name (prototype pollution guard)`,
 	propBindingHtmlInjectionName: (e) => `html\`...\`: ".${e}" parses raw HTML and is not a supported property binding. Sanitize untrusted content, then bind it with the unsafeHtml() directive.`,
 	propInvalidReflect: "Structured props cannot use reflect:true: use prop.json() with reflect:false",
@@ -38,30 +40,35 @@ var s = {
 	validationFailed: (e, t) => `Validation failed for <${e}>:\n${t.join("\n")}`
 };
 function invariant(e, t) {
-	if (!e) throw new OreInternalError(s.invariantViolated(t));
+	if (!e) throw new OreInternalError(c.invariantViolated(t));
 }
 // src/utils/dom.ts
-var resolveMaybeReactive = (e) => typeof e == "function" ? e() : i(e) ? e.value : e, c = /[;{}]/g, sanitizeCssToken = (e) => e.replace(c, ""), runAll = (e) => {
-	for (let t = e.length - 1; t >= 0; t--) e[t]?.();
-}, removeNodes = (e) => {
+var resolveMaybeReactive = (e) => typeof e == "function" ? e() : i(e) ? e.value : e, l = /[;{}]/g, sanitizeCssToken = (e) => e.replace(l, ""), removeNodes = (e) => {
 	for (let t of e) t.remove();
 }, createReplaceableSlot = () => {
-	let e = [], t = [];
+	let e = [], t = null, clear = () => {
+		t?.dispose(), t = null, removeNodes(e), e = [];
+	};
 	return {
-		clear() {
-			runAll(t), removeNodes(e), t = [], e = [];
-		},
+		clear,
 		get nodes() {
 			return e;
 		},
-		registerCleanup(e) {
-			t.push(e);
+		render(e) {
+			clear();
+			let r = n();
+			t = r;
+			try {
+				return r.run(e);
+			} catch (e) {
+				throw r.dispose(), t = null, e;
+			}
 		},
 		setNodes(t) {
 			e = t;
 		}
 	};
-}, l = /* @__PURE__ */ new Set([
+}, u = /* @__PURE__ */ new Set([
 	"action",
 	"cite",
 	"codebase",
@@ -73,20 +80,29 @@ var resolveMaybeReactive = (e) => typeof e == "function" ? e() : i(e) ? e.value
 	"poster",
 	"src",
 	"xlink:href"
-]), u = /^\s*(?:(?:javascript|vbscript|blob):|data:(?:[^,]*\/(?:html|svg\+xml)|application\/(?:xhtml|xml)))/i, d = /[\t\n\r]/g, f = /^[\s\p{C}]+|[\s\p{C}]+$/gu, normalizeUrlForSchemeCheck = (e) => e.replace(d, "").replace(f, ""), isDangerousUrl = (e) => u.test(normalizeUrlForSchemeCheck(e)), setAttr = (e, t, n) => {
-	let r = t.toLowerCase();
-	if (/^on[a-z]/i.test(t)) {
+]), d = /^\s*(?:(?:javascript|vbscript|blob):|data:(?:[^,]*\/(?:html|svg\+xml)|application\/(?:xhtml|xml)))/i, f = /[\t\n\r]/g, p = /^[\s\p{C}]+|[\s\p{C}]+$/gu, normalizeUrlForSchemeCheck = (e) => e.replace(f, "").replace(p, ""), isDangerousUrl = (e) => d.test(normalizeUrlForSchemeCheck(e)), m = /* @__PURE__ */ new Map(), h = 512, getAttrWritePlan = (e) => {
+	let t = m.get(e);
+	if (t) return t;
+	let n = e.toLowerCase(), r = {
+		event: /^on[a-z]/i.test(e),
+		srcdoc: n === "srcdoc",
+		url: u.has(n)
+	};
+	return m.size >= h && m.clear(), m.set(e, r), r;
+}, setAttr = (e, t, n) => {
+	let r = getAttrWritePlan(t);
+	if (r.event) {
 		`${t}${t.slice(2)}`, e.removeAttribute(t);
 		return;
 	}
-	if (r === "srcdoc" || n == null || n === !1) {
+	if (r.srcdoc || n == null || n === !1) {
 		e.removeAttribute(t);
 		return;
 	}
 	let i = n === !0 ? "true" : String(n);
-	l.has(r) && isDangerousUrl(i) ? (`${t}`, e.removeAttribute(t)) : e.setAttribute(t, i);
+	r.url && isDangerousUrl(i) ? (`${t}`, e.removeAttribute(t)) : e.setAttribute(t, i);
 }, listen = (e, t, n, r) => {
-	if (!e) return s.listenNullTarget(t), () => {};
+	if (!e) return c.listenNullTarget(t), () => {};
 	let i = n;
 	return e.addEventListener(t, i, r), () => e.removeEventListener(t, i, r);
 }, toKebab = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), cssDeclarationName = (e) => sanitizeCssToken(e.startsWith("--") ? e : toKebab(e)), cssDeclarationValue = (e) => {
@@ -100,79 +116,79 @@ var resolveMaybeReactive = (e) => typeof e == "function" ? e() : i(e) ? e.value
 		e && t.add(e);
 	}
 	return t;
-}, isStructuredValue = (e) => Array.isArray(e) || typeof e == "object" && !!e, p = null, createRuntimeContext = (e) => ({
+}, isStructuredValue = (e) => Array.isArray(e) || typeof e == "object" && !!e, g = null, createRuntimeContext = (e) => ({
 	element: e,
 	formResetCallbacks: [],
-	mountCallbacks: []
-}), m = 0, beginPendingWork = () => {
-	m++;
+	mountCallbacks: [],
+	scope: n()
+}), _ = 0, beginPendingWork = () => {
+	_++;
 	let e = !1;
 	return () => {
-		e || (e = !0, m--);
+		e || (e = !0, _--);
 	};
 }, runWithContext = (e, t) => {
-	let n = p;
-	p = e;
+	let n = g;
+	g = e;
 	try {
-		return t();
+		return e.scope.run(t);
 	} finally {
-		p = n;
+		g = n;
 	}
 }, requireSetupContext = (e) => {
-	if (p) return p;
-	throw new OreApiError(`${e}: ${s.lifecycleOutsideSetup}`);
-}, getHost = () => requireSetupContext("getHost").element, tryRegisterCleanup = (e) => p ? (r(() => e), !0) : !1, onCleanup = (e) => {
-	if (!tryRegisterCleanup(e)) throw new OreApiError(`onCleanup: ${s.lifecycleOutsideSetup}`);
+	if (g) return g;
+	throw new OreApiError(`${e}: ${c.lifecycleOutsideSetup}`);
+}, getHost = () => requireSetupContext("getHost").element, hasSetupContext = () => g !== null, onCleanup = (e) => {
+	requireSetupContext("onCleanup"), a(e);
 }, onMounted = (e) => {
 	requireSetupContext("onMounted").mountCallbacks.push(e);
 }, onFormReset = (e) => {
 	requireSetupContext("onFormReset").formResetCallbacks.push(e);
 }, watchEffect = (e) => {
-	let t = r(e), stop = () => t.dispose();
-	return tryRegisterCleanup(stop), stop;
+	requireSetupContext("watchEffect");
+	let t = r(e);
+	return () => t.dispose();
 };
 function onEvent(e, t, n, r) {
-	if (requireSetupContext("onEvent"), !e) return;
-	let i = listen(e, t, n, r);
-	tryRegisterCleanup(i) || i();
+	requireSetupContext("onEvent"), e && a(listen(e, t, n, r));
 }
 var onElement = (e, t) => watchEffect(() => {
 	let n = e.value;
 	if (n) return t(n);
-}), h = /* @__PURE__ */ new WeakMap(), buildAncestorChain = (e) => {
+}), v = /* @__PURE__ */ new WeakMap(), buildAncestorChain = (e) => {
 	let t = [], n = e;
 	for (; n;) n instanceof HTMLElement && t.push(n), n = n.parentNode ?? (n instanceof ShadowRoot ? n.host : null);
 	return t;
 }, provideOnElement = (e, t, n) => {
-	let r = h.get(e) ?? /* @__PURE__ */ new Map();
-	r.has(t) && `${e.localName}`, r.set(t, n), h.set(e, r);
+	let r = v.get(e) ?? /* @__PURE__ */ new Map();
+	r.has(t) && `${e.localName}`, r.set(t, n), v.set(e, r);
 }, provide = (e, t) => {
 	let n = requireSetupContext("provide").element;
 	provideOnElement(n, e, t), onCleanup(() => {
-		let t = h.get(n);
-		t && (t.delete(e), t.size === 0 && h.delete(n));
+		let t = v.get(n);
+		t && (t.delete(e), t.size === 0 && v.delete(n));
 	});
-}, g = Symbol("inject.not_found"), _ = /* @__PURE__ */ new WeakMap(), walkAndFind = (e, t) => {
+}, y = Symbol("inject.not_found"), b = /* @__PURE__ */ new WeakMap(), walkAndFind = (e, t) => {
 	let n = buildAncestorChain(e);
 	for (let e of n) {
-		let n = h.get(e);
+		let n = v.get(e);
 		if (n?.has(t)) return n.get(t);
 	}
-	return g;
+	return y;
 }, lookup = (e, t) => {
-	let n = _.get(e);
-	n || (n = /* @__PURE__ */ new Map(), _.set(e, n));
+	let n = b.get(e);
+	n || (n = /* @__PURE__ */ new Map(), b.set(e, n));
 	let r = t;
 	return n.has(r) || n.set(r, walkAndFind(e.element, t)), n.get(r);
 };
 function inject(e, ...t) {
 	let n = lookup(requireSetupContext("inject"), e);
-	return n === g ? t.length > 0 ? t[0] : void 0 : n;
+	return n === y ? t.length > 0 ? t[0] : void 0 : n;
 }
 var injectStrict = (e) => {
 	let t = requireSetupContext("injectStrict"), n = lookup(t, e);
-	if (n !== g) return n;
-	throw new OreApiError(s.injectStrictFailed(String(e), t.element.localName));
+	if (n !== y) return n;
+	throw new OreApiError(c.injectStrictFailed(String(e), t.element.localName));
 };
 function createContext(e) {
 	return Symbol(e);
@@ -204,7 +220,7 @@ function _stringProp(e) {
 		reflect: !0
 	};
 }
-var v = {
+var x = {
 	bool(e) {
 		return {
 			default: e ?? !1,
@@ -248,51 +264,57 @@ var v = {
 		};
 	},
 	string: _stringProp
-}, isPropDef = (e) => typeof e == "object" && !!e && "default" in e && "parse" in e;
-function normalizePropDefinition(e, t) {
-	if (!isPropDef(e)) throw new OreApiError(`Prop "${t}" must use a prop.* helper (string/number/bool/json/oneOf). Received: ${typeof e}`);
-	let n = e;
-	if (!n.parse) throw new OreApiError(`Prop "${t}" must have a parse function. Use prop.* helpers.`);
-	let r = n.reflect ?? !1;
-	if (r && isStructuredValue(n.default)) throw new OreApiError(`Prop "${t}": ${s.propInvalidReflect}`);
-	return {
-		...n,
-		reflect: r
-	};
-}
-function validatePropDefs(e) {
-	let t = [];
-	for (let [n, r] of Object.entries(e)) try {
-		normalizePropDefinition(r, n);
-	} catch (e) {
-		t.push(e instanceof Error ? e.message : String(e));
+}, describeReceived = (e) => e === null ? "null" : typeof e, checkPropDef = (e, t) => {
+	if (typeof e != "object" || !e || !("default" in e)) return `Prop "${t}" must be a PropDef ({ default, parse, reflect? }), e.g. from a prop.* helper. Received: ${describeReceived(e)}`;
+	let { parse: n, reflect: r } = e;
+	if (typeof n != "function") return `Prop "${t}" must have a parse function.`;
+	if (r && isStructuredValue(e.default)) return `Prop "${t}": ${c.propInvalidReflect}`;
+};
+function normalizePropDefs(e, t) {
+	let n = [], r = {};
+	for (let [e, i] of Object.entries(t)) {
+		let t = checkPropDef(i, e);
+		t ? n.push(t) : r[e] = {
+			...i,
+			reflect: i.reflect ?? !1
+		};
 	}
-	return t;
+	if (n.length > 0) throw new OreApiError(c.validationFailed(e, n));
+	return r;
 }
-var y = /* @__PURE__ */ new WeakMap(), getPropMeta = (e, t) => y.get(e)?.get(t), coerceIncoming = (e, t) => typeof e == "string" ? t(e) : e, registerProp = (e, t, n, r) => {
-	let i = y.get(e);
-	i || (i = /* @__PURE__ */ new Map(), y.set(e, i));
-	let { default: o, parse: s, reflect: c = !1 } = r, l = a(o), u = i.get(n), d = Object.hasOwn(e, t), f = d ? e[t] : void 0, p = {
-		parse: s,
-		reflect: c,
-		signal: l
-	};
-	return u ? l.value = u.signal.peek() : d ? (delete e[t], l.value = coerceIncoming(f, s)) : e.hasAttribute(n) && (l.value = s(e.getAttribute(n))), i.set(n, p), Object.defineProperty(e, t, {
+var S = /* @__PURE__ */ new WeakMap(), getPropMeta = (e, t) => S.get(e)?.get(t), coerceIncoming = (e, t) => typeof e == "string" ? t(e) : e, createPropMeta = (e, t, n, r) => {
+	let { default: i, parse: a, reflect: s = !1 } = r, c = e, l = o(i);
+	if (Object.hasOwn(c, t)) {
+		let e = c[t];
+		delete c[t], l.value = coerceIncoming(e, a);
+	} else e.hasAttribute(n) && (l.value = a(e.getAttribute(n)));
+	return Object.defineProperty(e, t, {
 		configurable: !0,
 		enumerable: !0,
 		get: () => l.value,
 		set: (e) => {
-			l.value = coerceIncoming(e, s);
+			l.value = coerceIncoming(e, a);
 		}
-	}), c && watchEffect(() => {
-		let t = l.value;
-		t == null ? e.removeAttribute(n) : typeof t == "boolean" ? e.toggleAttribute(n, t) : setAttr(e, n, t);
-	}), l;
+	}), {
+		parse: a,
+		reflect: s,
+		signal: l
+	};
+}, reflectProp = (e, t, n) => {
+	watchEffect(() => {
+		let r = n.value;
+		r == null ? e.removeAttribute(t) : typeof r == "boolean" ? e.toggleAttribute(t, r) : setAttr(e, t, r);
+	});
 };
 function createProps(e, t) {
-	let n = {};
-	for (let [r, i] of Object.entries(t)) n[r] = registerProp(e, r, toKebab(r), i);
-	return n;
+	let n = S.get(e);
+	n || (n = /* @__PURE__ */ new Map(), S.set(e, n));
+	let r = {};
+	for (let [i, a] of Object.entries(t)) {
+		let t = toKebab(i), o = n.get(t);
+		o || (o = createPropMeta(e, i, t, a), n.set(t, o)), o.reflect && reflectProp(e, t, o.signal), r[i] = o.signal;
+	}
+	return r;
 }
 // src/utils/brand.ts
 var makeBrand = (e) => {
@@ -301,62 +323,79 @@ var makeBrand = (e) => {
 		is,
 		stamp
 	};
-}, b = makeBrand("ore:css-result"), x = b.is, cssResultToString = function() {
+};
+// src/template/result.ts
+function ref() {
+	return o(null);
+}
+var C = makeBrand("ore:directive"), createDirectiveResult = (e) => C.stamp({ mount: e }), w = C.is, T = makeBrand("ore:html-result"), E = T.is, asCompiled = (e) => {
+	if (!E(e)) throw new OreApiError(c.notAnHtmlResult);
+	return e;
+};
+function createHtmlResult(e, t) {
+	let n = !1, claim = () => {
+		if (n) throw new OreApiError(c.htmlResultReused);
+		n = !0;
+	}, mount = (n, r) => {
+		claim();
+		let i = Array.from(e.childNodes);
+		return n.insertBefore(e, r), t(), i;
+	};
+	return T.stamp({
+		apply: t,
+		claim,
+		fragment: e,
+		mount
+	});
+}
+// src/utils/css.ts
+var D = makeBrand("ore:css-result"), O = D.is, cssResultToString = function() {
 	return this.content;
 }, css = (e, ...t) => {
 	let n = "";
 	for (let r = 0; r < e.length; r++) if (n += e[r], r < t.length) {
 		let e = t[r];
-		n += x(e) ? e.content : String(e);
+		n += O(e) ? e.content : String(e);
 	}
-	return b.stamp({
+	return D.stamp({
 		content: n.trim(),
 		toString: cssResultToString
 	});
-}, S = /* @__PURE__ */ new Map(), C = 256, loadStylesheet = (e) => {
+}, k = /* @__PURE__ */ new Map(), A = 256, loadStylesheet = (e) => {
 	if (e instanceof CSSStyleSheet) return e;
-	let t = typeof e == "string" ? e : e.content, n = S.get(t);
-	if (n) return S.delete(t), S.set(t, n), n;
+	let t = typeof e == "string" ? e : e.content, n = k.get(t);
+	if (n) return k.delete(t), k.set(t, n), n;
 	let r = new CSSStyleSheet();
 	try {
 		r.replaceSync(t);
 	} catch {
 		return r;
 	}
-	if (S.set(t, r), S.size > C) {
-		let e = S.keys().next().value;
-		e !== void 0 && S.delete(e);
+	if (k.set(t, r), k.size > A) {
+		let e = k.keys().next().value;
+		e !== void 0 && k.delete(e);
 	}
 	return r;
-}, w = {
-	SETUP_DONE: "setup_done",
-	SETUP_RUNNING: "setup_running",
-	UNINITIALIZED: "uninitialized",
-	UNMOUNTED: "unmounted"
-}, createComponentState = () => ({
-	formResetCallbacks: [],
-	generation: 0,
-	mountCallbacks: [],
-	phase: w.UNINITIALIZED,
-	scope: n(),
-	templateResult: null
-}), isPromiseLike = (e) => (typeof e == "object" || typeof e == "function") && e !== null && "then" in e && typeof e.then == "function", BaseElement = class extends HTMLElement {
+}, isPromiseLike = (e) => (typeof e == "object" || typeof e == "function") && e !== null && "then" in e && typeof e.then == "function", BaseElement = class extends HTMLElement {
 	static _definition;
 	static _normalizedPropDefs;
 	static formAssociated = !1;
 	static observedAttributes = [];
-	_component;
+	_connection = null;
+	_teardownPending = !1;
 	constructor() {
 		super();
 		let e = this.constructor._definition;
-		e?.shadow !== !1 && this.attachShadow({
+		if (e?.shadow === !1) return;
+		let t = this.attachShadow({
 			mode: "open",
 			...e?.shadow
-		}), this._component = createComponentState();
+		});
+		e?.styles?.length && (t.adoptedStyleSheets = e.styles.map(loadStylesheet));
 	}
 	connectedCallback() {
-		o(() => {
-			this._component.phase === w.UNINITIALIZED && this._runSetup(), this._init();
+		s(() => {
+			this._teardownPending ? (this._teardownPending = !1, this._scheduleMountCallbacks()) : this._connect();
 		});
 	}
 	attributeChangedCallback(e, t, n) {
@@ -364,16 +403,15 @@ var makeBrand = (e) => {
 		let r = getPropMeta(this, e);
 		if (!r) return;
 		let i = r.parse(n);
-		Object.is(o(() => r.signal.value), i) || (r.signal.value = i);
+		Object.is(s(() => r.signal.value), i) || (r.signal.value = i);
 	}
 	disconnectedCallback() {
-		this._component.generation++, this._component.phase = w.UNMOUNTED, this._resetSetupState();
-	}
-	_resetSetupState() {
-		this._component.scope.dispose(), this._component.formResetCallbacks = [], this._component.mountCallbacks = [], this._component.phase = w.UNINITIALIZED, this._component.scope = n(), this._component.templateResult = null;
+		this._teardownPending = !0, queueMicrotask(() => {
+			this._teardownPending && (this._teardownPending = !1, this._connection?.scope.dispose(), this._connection = null);
+		});
 	}
 	formResetCallback() {
-		for (let e of this._component.formResetCallbacks) try {
+		for (let e of this._connection?.formResetCallbacks ?? []) try {
 			e();
 		} catch (e) {
 			this._reportLifecycleError(e, "form-reset");
@@ -381,71 +419,46 @@ var makeBrand = (e) => {
 	}
 	_reportLifecycleError(e, t) {
 		let n = e instanceof Error ? e : Error(String(e));
-		reportRuntimeError(new OreLifecycleError(`<${this.localName}> failed during ${this._component.phase} (${t})`, {
+		reportRuntimeError(new OreLifecycleError(`<${this.localName}> failed during ${t}`, {
 			cause: n,
 			component: this.localName,
 			phase: t
 		}), this);
 	}
-	_runSetup() {
-		this._component.phase = w.SETUP_RUNNING;
-		let e = this.constructor._definition, t = this.constructor._normalizedPropDefs, n = createRuntimeContext(this);
+	_connect() {
+		let e = this.constructor, t = createRuntimeContext(this);
 		try {
-			let r;
-			if (this._component.scope.run(() => {
-				r = runWithContext(n, () => {
-					let n = t ? createProps(this, t) : {};
-					return e.setup(n);
-				});
-			}), this._component.mountCallbacks.push(...n.mountCallbacks), this._component.formResetCallbacks.push(...n.formResetCallbacks), isPromiseLike(r)) throw new OreApiError(s.asyncSetupUnsupported);
-			this._component.templateResult = r ?? null, this._component.phase = w.SETUP_DONE;
+			runWithContext(t, () => {
+				let t = e._normalizedPropDefs ? createProps(this, e._normalizedPropDefs) : {}, n = e._definition.setup(t);
+				if (isPromiseLike(n)) throw new OreApiError(c.asyncSetupUnsupported);
+				if (n == null) return;
+				let r = this.shadowRoot ?? this;
+				r.replaceChildren(), asCompiled(n).mount(r, null);
+			});
 		} catch (e) {
-			throw this._reportLifecycleError(e, "setup"), this._resetSetupState(), e;
+			throw t.scope.dispose(), this._reportLifecycleError(e, "setup"), e;
 		}
-	}
-	_isStale(e) {
-		return this._component.generation !== e || !this.isConnected;
-	}
-	_applyResult(e) {
-		if (!e) return;
-		let t = this.shadowRoot ?? this, n = createRuntimeContext(this);
-		t.replaceChildren(), this._component.scope.run(() => {
-			runWithContext(n, () => {
-				e.mount(t, null, onCleanup);
-			});
-		});
-	}
-	_init() {
-		this._applyStyles(), this._mountTemplate(), this._component.phase === w.SETUP_DONE && this._scheduleMountCallbacks();
-	}
-	_applyStyles() {
-		let e = this.constructor._definition;
-		this.shadowRoot && e?.styles?.length && (this.shadowRoot.adoptedStyleSheets = e.styles.map(loadStylesheet));
-	}
-	_mountTemplate() {
-		let e = this._component.templateResult;
-		e && this._applyResult(e);
+		this._connection = t, this._scheduleMountCallbacks();
 	}
 	_scheduleMountCallbacks() {
-		if (this._component.mountCallbacks.length === 0) return;
-		let e = this._component.generation, t = beginPendingWork();
+		let e = this._connection;
+		if (!e || e.mountCallbacks.length === 0) return;
+		let t = beginPendingWork();
 		queueMicrotask(() => {
 			try {
-				if (this._isStale(e)) return;
-				let t = this._component.mountCallbacks.splice(0);
-				for (let e = 0; e < t.length; e++) {
-					let n = t[e];
+				if (this._connection !== e || !this.isConnected) return;
+				let t = e.mountCallbacks.shift();
+				for (; t;) {
+					let n = t;
 					try {
-						let e = createRuntimeContext(this);
-						this._component.scope.run(() => {
-							runWithContext(e, () => {
-								let e = n();
-								typeof e == "function" && onCleanup(e);
-							});
-						}), e.mountCallbacks.length > 0 && t.push(...e.mountCallbacks), e.formResetCallbacks.length > 0 && this._component.formResetCallbacks.push(...e.formResetCallbacks);
+						runWithContext(e, () => {
+							let e = n();
+							typeof e == "function" && onCleanup(e);
+						});
 					} catch (e) {
 						this._reportLifecycleError(e, "mounted");
 					}
+					t = e.mountCallbacks.shift();
 				}
 			} finally {
 				t();
@@ -455,16 +468,9 @@ var makeBrand = (e) => {
 };
 // src/define.ts
 function define(e, t) {
-	if (!e) throw new OreApiError(s.defineRequiresTag);
-	if (customElements.get(e)) throw new OreApiError(s.defineDuplicate(e));
-	let { props: n } = t, r = (() => {
-		if (!n) return;
-		let t = validatePropDefs(n);
-		if (t.length > 0) throw new OreApiError(s.validationFailed(e, t));
-		let r = {};
-		for (let [e, t] of Object.entries(n)) r[e] = normalizePropDefinition(t, e);
-		return r;
-	})(), i = r ? Object.keys(r).map(toKebab) : [], ComponentClass = class extends BaseElement {
+	if (!e) throw new OreApiError(c.defineRequiresTag);
+	if (customElements.get(e)) throw new OreApiError(c.defineDuplicate(e));
+	let { props: n } = t, r = n ? normalizePropDefs(e, n) : void 0, i = r ? Object.keys(r).map(toKebab) : [], ComponentClass = class extends BaseElement {
 		static _definition = t;
 		static _normalizedPropDefs = r;
 		static formAssociated = t.formAssociated ?? !1;
@@ -473,60 +479,67 @@ function define(e, t) {
 	return Object.defineProperty(ComponentClass, "name", { value: e }), customElements.define(e, ComponentClass), ComponentClass;
 }
 // src/directives/classMap.ts
-var classMap = (e) => t(() => [...resolveClassTokens(e)].join(" "));
-// src/template/result.ts
-function ref() {
-	return a(null);
-}
-var T = makeBrand("ore:directive"), createDirectiveResult = (e) => T.stamp({ mount: e }), E = T.is, D = makeBrand("ore:html-result"), O = D.is;
-function createHtmlResult(e, t) {
-	let mount = (n, r, i) => {
-		let a = Array.from(e.childNodes);
-		return n.insertBefore(e, r), t(i), a;
-	};
-	return D.stamp({
-		apply: t,
-		fragment: e,
-		mount
+var classMap = (e) => t(() => [...resolveClassTokens(e)].join(" ")), createItem = (e, t, r, i) => {
+	let a = o(e), s = o(t), c = n(), l = [], u = document.createComment("each/item-start");
+	i.appendChild(u), c.run(() => {
+		l = asCompiled(r(a, s)).mount(i, null);
 	});
-}
-// src/directives/each.ts
-var createItem = (e, t, r, i, o) => {
-	let s = a(e), c = a(t), l = n(), u = [], d = [];
-	return l.run(() => {
-		d = r(s, c).mount(i, o, (e) => u.push(e));
-	}), {
-		cleanups: u,
-		data: s,
-		index: c,
-		nodes: d,
-		scope: l
+	let d = document.createComment("each/item");
+	return i.appendChild(d), l = [
+		u,
+		...l,
+		d
+	], {
+		data: a,
+		index: s,
+		nodes: l,
+		scope: c
 	};
 }, removeItem = (e) => {
-	e.scope.dispose(), runAll(e.cleanups), removeNodes(e.nodes);
-}, reconcileItems = (t, n, r, i, a, s, c) => {
+	e.scope.dispose(), removeNodes(e.nodes);
+}, reusedEntriesInOrder = (e, t) => {
+	let n = /* @__PURE__ */ new Map();
+	for (let e = 0; e < t.length; e++) n.set(t[e], e);
+	let r = -1;
+	for (let t of e) {
+		let e = n.get(t);
+		if (e !== void 0) {
+			if (e < r) return !1;
+			r = e;
+		}
+	}
+	return !0;
+}, reconcileItems = (t, n, r, i, a, o, c, l) => {
+	let u = document.createDocumentFragment();
 	for (let e = 0; e < n.length; e++) {
-		let l = r[e];
-		if (t.has(l)) continue;
-		let u = o(() => createItem(n[e], e, i, a, s));
-		c.push(u), t.set(l, u);
+		let a = r[e];
+		if (t.has(a)) continue;
+		let o = s(() => createItem(n[e], e, i, u));
+		c.push(o), t.set(a, o);
 	}
-	let l = [];
+	let d = [];
 	e(() => {
 		for (let e = 0; e < n.length; e++) {
 			let i = t.get(r[e]);
-			invariant(i, "each() reconcile phase 2 lost an entry created in phase 1"), i.data.value = n[e], i.index.value = e, l.push(i);
+			invariant(i, "each() reconcile phase 2 lost an entry created in phase 1"), i.data.value = n[e], i.index.value = e, d.push(i);
 		}
 	});
-	let u = s;
-	for (let e = l.length - 1; e >= 0; e--) {
-		let t = l[e], n = t.nodes[0], r = t.nodes[t.nodes.length - 1];
-		if (n && r !== u.previousSibling) for (let e of t.nodes) a.insertBefore(e, u);
-		u = n ?? u;
+	let f = reusedEntriesInOrder(d, l), p = new Set(c), m = o;
+	for (let e = d.length - 1; e >= 0; e--) {
+		let t = d[e], n = t.nodes[0], r = t.nodes[t.nodes.length - 1];
+		if ((!f || p.has(t)) && r !== m.previousSibling) {
+			let e = n;
+			for (; e;) {
+				let t = e === r ? null : e.nextSibling;
+				if (a.insertBefore(e, m), e === r) break;
+				e = t;
+			}
+		}
+		m = n;
 	}
-	let d = new Set(r);
-	for (let [e, n] of t) d.has(e) || (removeItem(n), t.delete(e));
-	return l;
+	let h = new Set(r);
+	for (let [e, n] of t) h.has(e) || (removeItem(n), t.delete(e));
+	return d;
 }, rollbackCreated = (e, t) => {
 	for (let n of t) {
 		removeItem(n);
@@ -539,7 +552,7 @@ var createItem = (e, t, r, i, o) => {
 	let n = [], r = /* @__PURE__ */ new Set();
 	for (let i = 0; i < e.length; i++) {
 		let a = t(e[i], i);
-		if (r.has(a)) throw new OreApiError(s.eachDuplicateKey(String(a), i));
+		if (r.has(a)) throw new OreApiError(c.eachDuplicateKey(String(a), i));
 		r.add(a), n.push(a);
 	}
 	return n;
@@ -551,48 +564,61 @@ var createItem = (e, t, r, i, o) => {
 		phase: "each-reconcile"
 	}), t);
 };
-function each(e, n, i, s) {
-	let c = Array.isArray(e) ? a(e) : typeof e == "function" ? t(e) : e;
-	return createDirectiveResult((e, t) => {
-		let a = e.parentNode;
-		invariant(a, "each() anchor comment has no parent node");
-		let l = document.createComment("each/end");
-		a.insertBefore(l, e.nextSibling);
-		let u = /* @__PURE__ */ new Map(), d = [], f = null, p = [], mountFallback = () => {
-			s && (f = s().mount(a, l, (e) => p.push(e)));
+function each(e, i, c, l) {
+	let u = Array.isArray(e) ? o(e) : typeof e == "function" ? t(e) : e;
+	return createDirectiveResult((e) => {
+		let t = e.parentNode;
+		invariant(t, "each() anchor comment has no parent node");
+		let o = document.createComment("each/end");
+		t.insertBefore(o, e.nextSibling);
+		let container = () => o.parentNode, d = /* @__PURE__ */ new Map(), f = [], p = null, m = null, mountFallback = () => {
+			if (!l) return;
+			let e = container();
+			if (!e) return;
+			let t = n();
+			m = t;
+			try {
+				t.run(() => {
+					p = asCompiled(l()).mount(e, o);
+				});
+			} catch (e) {
+				throw clearFallback(), e;
+			}
 		}, clearFallback = () => {
-			f && (runAll(p), removeNodes(f), f = null, p = []);
-		}, m = r(() => {
-			let t = c.value ?? [];
+			m?.dispose(), m = null, p &&= (removeNodes(p), null);
+		}, h = r(() => {
+			let t = u.value ?? [];
 			if (t.length === 0) {
-				for (let e of o(() => d)) removeItem(e);
-				u = /* @__PURE__ */ new Map(), d = [], f || o(mountFallback);
+				for (let e of s(() => f)) removeItem(e);
+				d = /* @__PURE__ */ new Map(), f = [], p || s(mountFallback);
 				return;
 			}
-			let r;
+			let n;
 			try {
-				r = o(() => collectKeys(t, n));
+				n = s(() => collectKeys(t, i));
 			} catch (t) {
 				reportEachError(t, e);
 				return;
 			}
 			clearFallback();
-			let s = [];
+			let r = container();
+			if (!r) return;
+			let a = [];
 			try {
-				d = o(() => reconcileItems(u, t, r, i, a, l, s));
+				f = s(() => reconcileItems(d, t, n, c, r, o, a, f));
 			} catch (t) {
-				reportEachError(t, e), o(() => rollbackCreated(u, s));
+				reportEachError(t, e), s(() => rollbackCreated(d, a));
 			}
 		});
-		t(() => m.dispose()), t(() => {
-			clearFallback();
-			for (let e of d) removeItem(e);
-			l.remove();
+		a(() => {
+			h.dispose(), clearFallback();
+			for (let e of f) removeItem(e);
+			o.remove();
 		});
 	});
 }
-// src/directives/live.ts
-var k = makeBrand("ore:live"), live = (e) => k.stamp({ source: e }), A = k.is, j = makeBrand("ore:model"), M = j.is, modelDefaultGet = (e) => e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") ? e.checked : e.value, modelDefaultEvent = (e) => e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") || e instanceof HTMLSelectElement ? "change" : "input", model = (e, t) => j.stamp({
+// src/directives/model.ts
+var j = makeBrand("ore:model"), M = j.is, modelDefaultGet = (e) => e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") ? e.checked : e.value, modelDefaultEvent = (e) => e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") || e instanceof HTMLSelectElement ? "change" : "input", model = (e, t) => j.stamp({
 	event: t?.event,
 	get: t?.get,
 	source: e
@@ -614,51 +640,61 @@ var k = makeBrand("ore:live"), live = (e) => k.stamp({ source: e }), A = k.is, j
 };
 function unsafeHtml(e) {
 	let n = typeof e == "function" ? t(e) : i(e) ? e : null;
-	return createDirectiveResult((t, i) => {
-		let a = t.parentNode;
-		invariant(a, "unsafeHtml() anchor comment has no parent node");
+	return createDirectiveResult((t) => {
+		let i = t.parentNode;
+		invariant(i, "unsafeHtml() anchor comment has no parent node");
 		let o = document.createComment("unsafe-html/end");
-		if (a.insertBefore(o, t.nextSibling), n) {
+		if (i.insertBefore(o, t.nextSibling), n) {
 			let e = createReplaceableSlot(), t = r(() => {
-				e.clear(), e.setNodes(parseHtml(n.value, a, o));
+				let t = o.parentNode;
+				t ? e.render(() => {
+					e.setNodes(parseHtml(n.value, t, o));
+				}) : e.clear();
 			});
-			i(() => t.dispose()), i(() => {
-				e.clear(), o.remove();
+			a(() => {
+				t.dispose(), e.clear(), o.remove();
 			});
-		} else parseHtml(e, a, o), i(() => o.remove());
+		} else parseHtml(e, i, o), a(() => o.remove());
 	});
 }
 // src/directives/when.ts
 var N = "when() anchor comment has no parent node";
-function when(e, n, a) {
-	return typeof e != "function" && !i(e) ? createDirectiveResult((t, r) => {
-		let i = e ? n() : a ? a() : null;
-		if (!i || !O(i)) return;
-		let o = t.parentNode;
-		invariant(o, N);
-		let s = i.mount(o, t, r);
-		r(() => removeNodes(s));
-	}) : createDirectiveResult((i, s) => {
+function when(e, n, o) {
+	return typeof e != "function" && !i(e) ? createDirectiveResult((t) => {
+		let r = e ? n() : o ? o() : null;
+		if (!r || !E(r)) return;
+		let i = t.parentNode;
+		invariant(i, N);
+		let s = r.mount(i, t);
+		a(() => removeNodes(s));
+	}) : createDirectiveResult((i) => {
 		let c = (typeof e == "function" ? t(e) : null) ?? e, l = i.parentNode;
 		invariant(l, N);
 		let u = document.createComment("when/end");
 		l.insertBefore(u, i.nextSibling);
 		let d = createReplaceableSlot(), f = r(() => {
-			let e = c.value;
-			d.clear();
-			let t = e ? n() : a ? a() : null;
-			t && O(t) && d.setNodes(o(() => t.mount(l, u, d.registerCleanup)));
+			let e = c.value ? n() : o ? o() : null;
+			if (!e || !E(e)) {
+				d.clear();
+				return;
+			}
+			let t = u.parentNode;
+			t ? s(() => {
+				d.render(() => {
+					d.setNodes(e.mount(t, u));
+				});
+			}) : d.clear();
 		});
-		s(() => f.dispose()), s(() => {
-			d.clear(), u.remove();
+		a(() => {
+			f.dispose(), d.clear(), u.remove();
 		});
 	});
 }
 // src/forms/field.ts
 var P = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakSet(), useField = (e) => {
 	let t = getHost();
-	if (!t.constructor.formAssociated) throw new OreApiError(s.defineFieldRequiresFormAssociated(t.localName));
-	if (F.has(t)) throw new OreApiError(s.useFieldAlreadyCalled(t.localName));
+	if (!t.constructor.formAssociated) throw new OreApiError(c.defineFieldRequiresFormAssociated(t.localName));
+	if (F.has(t)) throw new OreApiError(c.useFieldAlreadyCalled(t.localName));
 	let n = P.get(t) ?? t.attachInternals();
 	P.set(t, n), F.add(t), onCleanup(() => F.delete(t));
 	let r = e.toFormValue ?? ((t) => t == null ? e.emptyStringForNull ? "" : null : t instanceof File || t instanceof FormData ? t : String(t));
@@ -708,14 +744,15 @@ var P = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakSet(), useFie
 	let cleanup = () => {
 		for (let e of r) e();
 	};
-	return tryRegisterCleanup(cleanup), cleanup;
-}, I = normalizeHostAttrKey, applyReactiveBinding = (e, t) => {
-	if (typeof e == "function") return watchEffect(() => {
-		t(e());
-	});
-	if (i(e)) return watchEffect(() => {
-		t(e.value);
+	return hasSetupContext() && a(cleanup), cleanup;
+}, I = normalizeHostAttrKey, reactive = (e) => {
+	let t = r(() => {
+		e();
 	});
+	return () => t.dispose();
+}, applyReactiveBinding = (e, t) => {
+	if (typeof e == "function") return reactive(() => t(e()));
+	if (i(e)) return reactive(() => t(e.value));
 	t(e);
 };
 function applyAttribute(e, t, n) {
@@ -732,7 +769,7 @@ function applyStyle(e, t, n) {
 }
 function applyClassMap(e, t) {
 	let n = typeof t == "function" ? t : () => Object.fromEntries([...resolveClassTokens(t)].map((e) => [e, !0])), r = /* @__PURE__ */ new Set();
-	return watchEffect(() => {
+	return reactive(() => {
 		let t = /* @__PURE__ */ new Set();
 		for (let [i, a] of Object.entries(n())) a && (t.add(i), r.has(i) || e.classList.add(i));
 		for (let n of r) t.has(n) || e.classList.remove(n);
@@ -744,8 +781,8 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), ensureSlotEntry = (e) => {
 		let n = t.get(e);
 		return n || (n = {
-			elements: a([]),
-			presence: a(!1)
+			elements: o([]),
+			presence: o(!1)
 		}, t.set(e, n)), n;
 	}, areElementsEqual = (e, t) => {
 		if (e.length !== t.length) return !1;
@@ -778,10 +815,23 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 		});
 	}, recomputeAllSlots = () => {
 		for (let e of n.keys()) recomputeSlot(e);
+	}, isOrContainsSlot = (e) => e instanceof HTMLSlotElement || e.nodeType === Node.ELEMENT_NODE && e.querySelector("slot") !== null, unbindSlotsIn = (e) => {
+		e instanceof HTMLSlotElement ? unbindSlot(e) : e.nodeType === Node.ELEMENT_NODE && e.querySelectorAll("slot").forEach((e) => {
+			unbindSlot(e);
+		});
 	}, i = null, initSlots = () => {
 		bindAllSlots(), recomputeAllSlots(), !i && e.shadowRoot && (i = new MutationObserver((e) => {
-			for (let t of e) for (let e of t.removedNodes) e instanceof HTMLSlotElement && unbindSlot(e);
-			bindAllSlots(), r.size > 0 && recomputeAllSlots();
+			let t = !1;
+			for (let n of e) {
+				for (let e of n.removedNodes) isOrContainsSlot(e) && (t = !0, unbindSlotsIn(e));
+				if (!t) {
+					for (let e of n.addedNodes) if (isOrContainsSlot(e)) {
+						t = !0;
+						break;
+					}
+				}
+			}
+			t && (bindAllSlots(), r.size > 0 && recomputeAllSlots());
 		}), i.observe(e.shadowRoot, {
 			childList: !0,
 			subtree: !0
@@ -798,107 +848,106 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 }, R = /* @__PURE__ */ new WeakMap(), useSlots = () => {
 	let e = requireSetupContext("useSlots"), t = R.get(e.element);
 	return t || (t = createSlots(e.element), R.set(e.element, t)), t;
-}, signalEffect = (e, t, n) => {
-	let i = r(() => {
+}, signalEffect = (e, t) => {
+	r(() => {
 		t(e.value);
 	});
-	n(() => i.dispose());
-}, isNativeFormInput = (e) => e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement, isCheckableInput = (e) => e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio"), syncFormControl = (e, t, n, r = { last: void 0 }) => {
-	let i = isCheckableInput(e), a = i ? !!t : t == null ? "" : String(t), o = i ? e.checked : e.value;
-	(!n || r.last === void 0 || Object.is(o, r.last) || Object.is(o, a)) && (i ? e.checked = a : e.value = a, n && (r.last = a));
-}, syncRegisteredProp = (e, t, n, r) => {
-	let i = isStructuredValue(r) ? r : t.parse(n.mode === "bool" ? r ? "" : null : r == null || r === !1 ? null : String(r));
-	if (Object.is(o(() => t.signal.value), i) || (t.signal.value = i), !t.reflect) {
-		if (isStructuredValue(r)) return;
-		n.mode === "bool" ? e.toggleAttribute(n.name, !!r) : setAttr(e, n.name, r);
-	}
-}, applyAttrBinding = (e, t) => {
-	let { el: n, mode: r, name: i } = e, a = { last: void 0 }, update = (t) => {
-		let o = getPropMeta(n, i);
-		o ? syncRegisteredProp(n, o, e, t) : i === "value" && isNativeFormInput(n) || i === "checked" && n instanceof HTMLInputElement ? syncFormControl(n, t, e.live, a) : i === "indeterminate" && n instanceof HTMLInputElement ? n.indeterminate = !!t : r === "bool" ? n.toggleAttribute(i, !!t) : setAttr(n, i, t);
+}, isNativeFormInput = (e) => e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement, isCheckableInput = (e) => e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio"), syncFormControl = (e, t, n) => {
+	let r = isCheckableInput(e), i = r ? !!t : t == null ? "" : String(t), a = r ? e.checked : e.value;
+	(!n || n.last === void 0 || Object.is(a, n.last) || Object.is(a, i)) && (r ? e.checked = i : e.value = i, n && (n.last = i));
+}, isAttributeValue = (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean", toRegisteredPropValue = (e, t, n) => t === "bool" ? e.parse(n ? "" : null) : n == null || n === !1 ? e.parse(null) : typeof n == "string" ? e.parse(n) : n, syncRegisteredProp = (e, t, n, r) => {
+	let i = toRegisteredPropValue(t, n.mode, r);
+	Object.is(s(() => t.signal.value), i) || (t.signal.value = i), !t.reflect && (r == null || isAttributeValue(r)) && (n.mode === "bool" ? e.toggleAttribute(n.name, !!r) : setAttr(e, n.name, r));
+}, applyAttrBinding = (e) => {
+	let { el: t, mode: n, name: r } = e, update = (i) => {
+		let a = getPropMeta(t, r);
+		a ? syncRegisteredProp(t, a, e, i) : r === "value" && isNativeFormInput(t) || r === "checked" && t instanceof HTMLInputElement ? syncFormControl(t, i) : r === "indeterminate" && t instanceof HTMLInputElement ? t.indeterminate = !!i : n === "bool" ? t.toggleAttribute(r, !!i) : setAttr(t, r, i);
 	};
-	"signal" in e ? signalEffect(e.signal, update, t) : update(e.value);
-}, applyEventBinding = (e, t) => {
-	let { modifiers: n } = e, r = n?.stop || n?.prevent ? (t) => {
-		n.stop && t.stopPropagation(), n.prevent && t.preventDefault(), e.handler(t);
-	} : e.handler, i = n?.once || n?.capture ? {
-		capture: n.capture,
-		once: n.once
+	"signal" in e ? signalEffect(e.signal, update) : update(e.value);
+}, applyEventBinding = (e) => {
+	let { modifiers: t } = e, n = t?.stop || t?.prevent ? (n) => {
+		t.stop && n.stopPropagation(), t.prevent && n.preventDefault(), e.handler(n);
+	} : e.handler, r = t?.once || t?.capture ? {
+		capture: t.capture,
+		once: t.once
 	} : void 0;
-	t(listen(e.el, e.name, r, i));
-}, applyPropBinding = (e, t) => {
+	a(listen(e.el, e.name, n, r));
+}, applyPropBinding = (e) => {
 	let update = (t) => {
 		e.el[e.name] = t;
 	};
-	"signal" in e ? signalEffect(e.signal, update, t) : update(e.value);
-}, applyModelBinding = (e, t) => {
-	let { el: n, get: i, signal: a } = e, s = { last: void 0 }, write = (e) => {
-		isNativeFormInput(n) ? syncFormControl(n, e, !0, s) : n.value = e;
-	}, c = r(() => {
-		write(a.value);
-	}), onEvent = () => {
-		let e = i(n);
-		Object.is(o(() => a.value), e) || (a.value = e);
+	"signal" in e ? signalEffect(e.signal, update) : update(e.value);
+}, applyModelBinding = (e) => {
+	let { el: t, get: n, signal: i } = e, o = { last: void 0 }, write = (e) => {
+		isNativeFormInput(t) ? syncFormControl(t, e, o) : t.value = e;
 	};
-	t(() => c.dispose()), t(listen(n, e.event, onEvent));
-}, applyRefBinding = (e, t) => {
-	let { el: n, ref: r } = e;
-	typeof r == "function" ? (r(n), t(() => r(null))) : (r.value = n, t(() => {
-		r.value = null;
+	r(() => {
+		write(i.value);
+	});
+	let onEvent = () => {
+		let e = n(t);
+		Object.is(s(() => i.value), e) || (i.value = e);
+	};
+	a(listen(t, e.event, onEvent));
+}, applyRefBinding = (e) => {
+	let { el: t, ref: n } = e;
+	typeof n == "function" ? (n(t), a(() => n(null))) : (n.value = t, a(() => {
+		n.value = null;
 	}));
-}, insertHtmlValues = (e, t, n) => {
-	let r = [], i = t.parentNode;
-	invariant(i, "html binding anchor has no parent node");
-	for (let a of e) if (O(a)) {
-		let e = Array.from(a.fragment.childNodes);
-		i.insertBefore(a.fragment, t), a.apply(n), r.push(...e);
-	} else if (a != null && a !== !1) {
-		let e = document.createTextNode(String(a));
-		i.insertBefore(e, t), r.push(e);
+}, insertHtmlValues = (e, t, n = []) => {
+	let r = t.parentNode;
+	invariant(r, "html binding anchor has no parent node");
+	for (let i of e) if (E(i)) {
+		i.claim();
+		let e = Array.from(i.fragment.childNodes);
+		r.insertBefore(i.fragment, t), i.apply(), n.push(...e);
+	} else if (i != null && i !== !1) {
+		let e = document.createTextNode(String(i));
+		r.insertBefore(e, t), n.push(e);
 	}
-	return r;
-}, toHtmlValues = (e) => Array.isArray(e) ? e : [e], applyHtmlBinding = (e, t) => {
-	let { anchor: n, source: i } = e, a = createReplaceableSlot(), s = r(() => {
-		let e = toHtmlValues(typeof i == "function" ? i() : i.value);
-		a.clear(), e != null && e.length !== 0 && o(() => {
-			a.setNodes(insertHtmlValues(e, n, a.registerCleanup));
+	return n;
+}, toHtmlValues = (e) => Array.isArray(e) ? e : [e], applyHtmlBinding = (e) => {
+	let { anchor: t, source: n } = e, i = createReplaceableSlot(), o = r(() => {
+		let e = toHtmlValues(typeof n == "function" ? n() : n.value);
+		e == null || e.length === 0 ? i.clear() : s(() => {
+			i.render(() => {
+				let n = [];
+				try {
+					insertHtmlValues(e, t, n);
+				} finally {
+					i.setNodes(n);
+				}
+			});
 		});
 	});
-	t(() => {
-		s.dispose(), a.clear();
+	a(() => {
+		o.dispose(), i.clear();
 	});
-}, applyDirectiveBinding = (e, t) => {
-	e.directive.mount(e.anchor, t);
-}, applyBinding = (e, t) => {
+}, applyDirectiveBinding = (e) => {
+	e.directive.mount(e.anchor);
+}, applyBinding = (e) => {
 	switch (e.type) {
 		case "attr":
-			applyAttrBinding(e, t);
+			applyAttrBinding(e);
 			break;
 		case "directive":
-			applyDirectiveBinding(e, t);
+			applyDirectiveBinding(e);
 			break;
 		case "event":
-			applyEventBinding(e, t);
+			applyEventBinding(e);
 			break;
 		case "html":
-			applyHtmlBinding(e, t);
+			applyHtmlBinding(e);
 			break;
 		case "model":
-			applyModelBinding(e, t);
+			applyModelBinding(e);
 			break;
 		case "prop":
-			applyPropBinding(e, t);
+			applyPropBinding(e);
 			break;
-		case "ref": applyRefBinding(e, t);
+		case "ref": applyRefBinding(e);
 	}
-}, createAttrBindingFromValue = (e, n, r, a) => A(a) ? {
-	el: e,
-	live: !0,
-	mode: n,
-	name: r,
-	signal: a.source,
-	type: "attr"
-} : typeof a == "function" ? {
+}, createAttrBindingFromValue = (e, n, r, a) => typeof a == "function" ? {
 	el: e,
 	mode: n,
 	name: r,
@@ -932,7 +981,7 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 	if (t.length === 0) return;
 	let n = {};
 	for (let r of t) {
-		if (!(r in B)) throw new OreApiError(s.eventModifierUnknown(e, r));
+		if (!(r in B)) throw new OreApiError(c.eventModifierUnknown(e, r));
 		n[r] = !0;
 	}
 	return n;
@@ -962,8 +1011,8 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 	};
 	if (t = W.exec(e)) {
 		let n = t[1];
-		if (n === "__proto__" || n === "constructor" || n === "prototype") throw new OreApiError(s.propBindingForbiddenName(n));
-		if (K.has(n.toLowerCase())) throw new OreApiError(s.propBindingHtmlInjectionName(n));
+		if (n === "__proto__" || n === "constructor" || n === "prototype") throw new OreApiError(c.propBindingForbiddenName(n));
+		if (K.has(n.toLowerCase())) throw new OreApiError(c.propBindingHtmlInjectionName(n));
 		return {
 			kind: z.PROP,
 			name: n,
@@ -976,7 +1025,7 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 		prefix: e.slice(0, -t[0].length)
 	};
 	let n = e.lastIndexOf("<");
-	if (n > e.lastIndexOf(">") && e[n + 1] !== "/") throw new OreApiError(s.templateInterpolationInTag);
+	if (n > e.lastIndexOf(">") && e[n + 1] !== "/") throw new OreApiError(c.templateInterpolationInTag);
 	return {
 		kind: z.NODE,
 		prefix: e
@@ -1042,11 +1091,12 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 	for (let e of t) n = n.childNodes[e];
 	return n;
 }, Z = "html`...`: node-slot comment anchor has no parent node", embedStaticResult = (e, t, n) => {
+	e.claim();
 	let r = t.parentNode;
 	for (invariant(r, Z); e.fragment.firstChild;) r.insertBefore(e.fragment.firstChild, t);
 	n.push(e.apply.bind(e));
 }, compileTemplate = (e, n) => {
-	let r = getStaticTemplate(e), a = r.element.content.cloneNode(!0), o = [], c = [], l = r.slots.map((e, t) => {
+	let r = getStaticTemplate(e), a = r.element.content.cloneNode(!0), o = [], s = [], l = r.slots.map((e, t) => {
 		let i = n[t];
 		if (e.kind === z.NODE) {
 			let t = e.commentId === void 0 ? void 0 : r.commentPaths.get(e.commentId);
@@ -1065,7 +1115,7 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 	});
 	for (let { comment: e, el: n, slot: r, value: a } of l) if (r.kind === z.NODE) {
 		let t = e;
-		if (invariant(t, "compiled template produced a node slot without a comment anchor"), E(a)) {
+		if (invariant(t, "compiled template produced a node slot without a comment anchor"), w(a)) {
 			o.push({
 				anchor: t,
 				directive: a,
@@ -1073,8 +1123,8 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 			});
 			continue;
 		}
-		if (O(a)) {
-			embedStaticResult(a, t, c), t.remove();
+		if (E(a)) {
+			embedStaticResult(a, t, s), t.remove();
 			continue;
 		}
 		if (typeof a == "function" || i(a)) {
@@ -1086,7 +1136,7 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 			continue;
 		}
 		if (Array.isArray(a)) {
-			for (let e of a) if (O(e)) embedStaticResult(e, t, c);
+			for (let e of a) if (E(e)) embedStaticResult(e, t, s);
 			else {
 				let n = t.parentNode;
 				invariant(n, Z), n.insertBefore(document.createTextNode(resolveStaticText(e)), t);
@@ -1141,7 +1191,7 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 		type: "ref"
 	});
 	else if (invariant(r.name, "compiled template produced an attr slot without an attribute name"), M(a)) {
-		if (r.mode !== "attr") throw new OreApiError(s.modelRequiresValueBinding(r.name));
+		if (r.mode !== "attr") throw new OreApiError(c.modelRequiresValueBinding(r.name));
 		o.push({
 			el: n,
 			event: a.event ?? modelDefaultEvent(n),
@@ -1150,9 +1200,9 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 			type: "model"
 		});
 	} else o.push(createAttrBindingFromValue(n, r.mode ?? "attr", r.name, a));
-	return createHtmlResult(a, (e) => {
-		for (let t of o) applyBinding(t, e);
-		for (let t of c) t(e);
+	return createHtmlResult(a, () => {
+		for (let e of o) applyBinding(e);
+		for (let e of s) e();
 	});
 }, html = (e, ...t) => compileTemplate(e, t), Q = {
 	bubbles: !0,
@@ -1168,6 +1218,6 @@ var L = "default", normalizeSlotName = (e) => e || L, createSlots = (e) => {
 		return e.dispatchEvent(new CustomEvent(String(t), r));
 	});
 }, $ = 0, ee = Math.random().toString(36).slice(2, 6), createId = (e = "id") => `${e}-${ee}${++$}`;
-export { OreApiError, OreError, OreInternalError, OreLifecycleError, bind, classMap, createContext, createId, css, define, each, getHost, html, inject, injectStrict, live, model, onCleanup, onElement, onEvent, onFormReset, onMounted, v as prop, provide, ref, styleMap, unsafeHtml, useEmit, useField, useSlots, watchEffect, when };
+export { OreApiError, OreError, OreInternalError, OreLifecycleError, bind, classMap, createContext, createId, css, define, each, getHost, html, inject, injectStrict, model, onCleanup, onElement, onEvent, onFormReset, onMounted, x as prop, provide, ref, styleMap, unsafeHtml, useEmit, useField, useSlots, watchEffect, when };
 
 //# sourceMappingURL=ore.js.map