marko 6.3.24 → 6.3.26

package/dist/debug/dom.js

@@ -26,6 +26,7 @@ const BranchScopes$1 = "BranchScopes:";
 const ClosureScopes = "ClosureScopes:";
 const ClosureSignalIndex = "ClosureSignalIndex:";
 const ConditionalRenderer = "ConditionalRenderer:";
+const ControlledObserver = "ControlledObserver:";
 const ControlledHandler = "ControlledHandler:";
 const ControlledType = "ControlledType:";
 const ControlledValue = "ControlledValue:";
@@ -346,22 +347,6 @@ function handleDelegated(ev) {
 	delete ev.currentTarget;
 }
 //#endregion
-//#region src/dom/resolve-cursor-position.ts
-const R = /[^\p{L}\p{N}]/gu;
-function resolveCursorPosition(inputType, initialPosition, initialValue, updatedValue) {
-	if ((initialPosition || initialPosition === 0) && (initialPosition !== initialValue.length || /kw/.test(inputType))) {
-		const before = initialValue.slice(0, initialPosition);
-		const after = initialValue.slice(initialPosition);
-		if (updatedValue.startsWith(before)) return initialPosition;
-		if (updatedValue.endsWith(after)) return updatedValue.length - after.length;
-		let count = before.replace(R, "").length;
-		let pos = 0;
-		while (count && updatedValue[pos]) if (updatedValue[pos++].replace(R, "")) count--;
-		return pos;
-	}
-	return -1;
-}
-//#endregion
 //#region src/dom/parse-html.ts
 const parsers = {};
 function parseHTML(html, ns) {
@@ -687,7 +672,7 @@ const walkInternal = function walkInternal(currentWalkIndex, walkCodes, scope) {
 			currentWalkIndex = walkInternal(currentWalkIndex, walkCodes, scope[getDebugKey(currentScopeIndex++, "#childScope")] = createScope(scope[Global], scope[ClosestBranch]));
 			if (value === 48) scope[getDebugKey(currentScopeIndex++, "#scopeOffset")] = skipScope();
 		} else if (value < 92) {
-			value = 20 * currentMultiplier + value - 67;
+			value = 25 * currentMultiplier + value - 67;
 			while (value--) walker.nextNode();
 		} else if (value < 107) {
 			value = 10 * currentMultiplier + value - 97;
@@ -710,77 +695,6 @@ function getDebugKey(index, node) {
 	return index;
 }
 //#endregion
-//#region src/dom/renderer.ts
-function createBranch($global, renderer, parentScope, parentNode) {
-	const branch = createScope($global);
-	branch["_"] = renderer["owner"] || parentScope;
-	setParentBranch(branch, parentScope?.[ClosestBranch]);
-	branch[Renderer] = renderer;
-	renderer[Clone]?.(branch, parentNode.namespaceURI);
-	return branch;
-}
-function setParentBranch(branch, parentBranch) {
-	if (parentBranch) {
-		branch[ParentBranch] = parentBranch;
-		(parentBranch[BranchScopes] ||= /* @__PURE__ */ new Set()).add(branch);
-	}
-	branch[ClosestBranch] = branch;
-}
-function createAndSetupBranch($global, renderer, parentScope, parentNode) {
-	return setupBranch(renderer, createBranch($global, renderer, parentScope, parentNode));
-}
-function setupBranch(renderer, branch) {
-	if (renderer["setup"]) queueRender(branch, renderer[Setup], -1);
-	return branch;
-}
-function _content(id, template, walks, setup, params, dynamicScopesAccessor) {
-	walks = walks ? walks.replace(/[^\0-1]+$/, "") : "";
-	setup = setup ? setup._ || setup : void 0;
-	params ||= void 0;
-	const clone = template ? (branch, ns) => {
-		((cloneCache[ns] ||= {})[template] ||= createCloneableHTML(template, ns))(branch, walks);
-	} : (branch) => {
-		walk(branch[StartNode] = branch[EndNode] = new Text(), walks, branch);
-	};
-	return (owner) => {
-		return {
-			["id"]: id,
-			[Clone]: clone,
-			[Owner]: owner,
-			[Setup]: setup,
-			[Params]: params,
-			[Accessor]: dynamicScopesAccessor
-		};
-	};
-}
-function _content_resume(id, template, walks, setup, params, dynamicScopesAccessor) {
-	return _resume(id, _content(id, template, walks, setup, params, dynamicScopesAccessor));
-}
-function _content_closures(renderer, closureFns) {
-	const closureSignals = {};
-	for (const key in closureFns) closureSignals[key] = _const(key, closureFns[key]);
-	return (owner, closureValues) => {
-		const instance = renderer(owner);
-		instance[LocalClosures] = closureSignals;
-		instance[LocalClosureValues] = closureValues;
-		return instance;
-	};
-}
-const cloneCache = {};
-function createCloneableHTML(html, ns) {
-	const { firstChild, lastChild } = parseHTML(html, ns);
-	const parent = document.createElementNS(ns, "t");
-	insertChildNodes(parent, null, firstChild, lastChild);
-	return firstChild === lastChild && firstChild.nodeType < 8 ? (branch, walks) => {
-		walk(branch[StartNode] = branch[EndNode] = firstChild.cloneNode(true), walks, branch);
-	} : (branch, walks) => {
-		const clone = parent.cloneNode(true);
-		walk(clone.firstChild, walks, branch);
-		branch[StartNode] = clone.firstChild;
-		branch[EndNode] = clone.lastChild;
-	};
-}
-//#endregion
 //#region src/dom/resume.ts
 const registeredValues = {};
 let curRenders;
@@ -985,19 +899,295 @@ function runResumeEffects(render) {
 		isResuming = 0;
 	}
 }
-function getRegisteredWithScope(id, scope) {
-	const val = registeredValues[id];
-	return scope ? val(scope) : val;
+function getRegisteredWithScope(id, scope) {
+	const val = registeredValues[id];
+	return scope ? val(scope) : val;
+}
+function _resume(id, obj) {
+	return registeredValues[id] = obj;
+}
+function _var_resume(id, signal) {
+	_resume(id, (scope) => (value) => signal(scope, value));
+	return signal;
+}
+function _el(id, accessor) {
+	return _resume(id, (scope) => () => _el_read(scope[accessor]));
+}
+//#endregion
+//#region src/dom/renderer.ts
+function createBranch($global, renderer, parentScope, parentNode) {
+	const branch = createScope($global);
+	branch["_"] = renderer["owner"] || parentScope;
+	setParentBranch(branch, parentScope?.[ClosestBranch]);
+	branch[Renderer] = renderer;
+	renderer[Clone]?.(branch, parentNode.namespaceURI);
+	return branch;
+}
+function setParentBranch(branch, parentBranch) {
+	if (parentBranch) {
+		branch[ParentBranch] = parentBranch;
+		(parentBranch[BranchScopes] ||= /* @__PURE__ */ new Set()).add(branch);
+	}
+	branch[ClosestBranch] = branch;
+}
+function createAndSetupBranch($global, renderer, parentScope, parentNode) {
+	return setupBranch(renderer, createBranch($global, renderer, parentScope, parentNode));
+}
+function setupBranch(renderer, branch) {
+	if (renderer["setup"]) queueRender(branch, renderer[Setup], -1);
+	return branch;
+}
+function _content(id, template, walks, setup, params, dynamicScopesAccessor) {
+	walks = walks ? walks.replace(/[^\0-1]+$/, "") : "";
+	setup = setup ? setup._ || setup : void 0;
+	params ||= void 0;
+	const clone = template ? (branch, ns) => {
+		((cloneCache[ns] ||= {})[template] ||= createCloneableHTML(template, ns))(branch, walks);
+	} : (branch) => {
+		walk(branch[StartNode] = branch[EndNode] = new Text(), walks, branch);
+	};
+	return (owner) => {
+		return {
+			["id"]: id,
+			[Clone]: clone,
+			[Owner]: owner,
+			[Setup]: setup,
+			[Params]: params,
+			[Accessor]: dynamicScopesAccessor
+		};
+	};
+}
+function _content_resume(id, template, walks, setup, params, dynamicScopesAccessor) {
+	return _resume(id, _content(id, template, walks, setup, params, dynamicScopesAccessor));
+}
+function _content_closures(renderer, closureFns) {
+	const closureSignals = {};
+	for (const key in closureFns) closureSignals[key] = _const(key, closureFns[key]);
+	return (owner, closureValues) => {
+		const instance = renderer(owner);
+		instance[LocalClosures] = closureSignals;
+		instance[LocalClosureValues] = closureValues;
+		return instance;
+	};
+}
+const cloneCache = {};
+function createCloneableHTML(html, ns) {
+	const { firstChild, lastChild } = parseHTML(html, ns);
+	const parent = document.createElementNS(ns, "t");
+	insertChildNodes(parent, null, firstChild, lastChild);
+	return firstChild === lastChild && firstChild.nodeType < 8 ? (branch, walks) => {
+		walk(branch[StartNode] = branch[EndNode] = firstChild.cloneNode(true), walks, branch);
+	} : (branch, walks) => {
+		const clone = parent.cloneNode(true);
+		walk(clone.firstChild, walks, branch);
+		branch[StartNode] = clone.firstChild;
+		branch[EndNode] = clone.lastChild;
+	};
+}
+//#endregion
+//#region src/dom/dom.ts
+function _to_text(value) {
+	assertValidTextValue(value);
+	return value || value === 0 ? value + "" : "";
+}
+function _attr(element, name, value) {
+	assertValidAttrValue(name, value);
+	setAttribute(element, name, normalizeAttrValue(value));
+}
+function setAttribute(element, name, value) {
+	if (element.getAttribute(name) != value) if (value === void 0) element.removeAttribute(name);
+	else element.setAttribute(name, value);
+}
+function _attr_class(element, value) {
+	setAttribute(element, "class", toDelimitedString(value, " ", stringifyClassObject) || void 0);
+}
+function _attr_class_items(element, items) {
+	for (const key in items) _attr_class_item(element, key, items[key]);
+}
+function _attr_class_item(element, name, value) {
+	element.classList.toggle(name, !!value);
+}
+function _attr_style(element, value) {
+	setAttribute(element, "style", toDelimitedString(value, ";", stringifyStyleObject) || void 0);
+}
+function _attr_style_items(element, items) {
+	for (const key in items) _attr_style_item(element, key, items[key]);
+}
+function _attr_style_item(element, name, value) {
+	element.style.setProperty(name, _to_text(value));
+}
+function _style_shell(scope, nodeAccessor) {
+	const element = scope[nodeAccessor];
+	const id = _id(scope);
+	_attr_nonce(scope, nodeAccessor);
+	element.className = id;
+	_text_content(element, "." + id + "~*{}");
+}
+function _style_rule_item(element, name, value) {
+	const text = element.textContent;
+	const decl = name + ":" + escapeStyleValue(_to_text(value)) + ";";
+	let start = text.indexOf("{" + name + ":");
+	if (!~start) start = text.indexOf(";" + name + ":");
+	_text_content(element, ~start ? text.slice(0, ++start) + decl + text.slice(text.indexOf(";", start) + 1) : text.slice(0, -1) + decl + "}");
+}
+function _attr_nonce(scope, nodeAccessor) {
+	_attr(scope[nodeAccessor], "nonce", scope[Global].cspNonce);
+}
+function _text(node, value) {
+	const normalizedValue = _to_text(value);
+	if (node.data !== normalizedValue) node.data = normalizedValue;
+}
+function _text_content(node, value) {
+	const normalizedValue = _to_text(value);
+	if (node.textContent !== normalizedValue) node.textContent = normalizedValue;
+}
+function _attrs(scope, nodeAccessor, nextAttrs, controllable) {
+	const el = scope[nodeAccessor];
+	for (let i = el.attributes.length; i--;) {
+		const { name } = el.attributes.item(i);
+		if (!(nextAttrs && (name in nextAttrs || hasAttrAlias(el, name, nextAttrs)))) el.removeAttribute(name);
+	}
+	assertExclusiveAttrs(nextAttrs);
+	attrsInternal(scope, nodeAccessor, nextAttrs, controllable);
+}
+function _attrs_content(scope, nodeAccessor, nextAttrs, controllable) {
+	_attrs(scope, nodeAccessor, nextAttrs, controllable);
+	_attr_content(scope, nodeAccessor, nextAttrs?.content);
+}
+function hasAttrAlias(element, attr, nextAttrs) {
+	return attr === "checked" && element.tagName === "INPUT" && "checkedValue" in nextAttrs;
+}
+function _attrs_partial(scope, nodeAccessor, nextAttrs, skip, controllable) {
+	const el = scope[nodeAccessor];
+	const partial = {};
+	for (let i = el.attributes.length; i--;) {
+		const { name } = el.attributes.item(i);
+		if (!skip[name] && !(nextAttrs && name in nextAttrs)) el.removeAttribute(name);
+	}
+	for (const name in nextAttrs) {
+		const key = isEventHandler(name) ? `on-${getEventHandlerName(name)}` : name;
+		if (!skip[key]) partial[key] = nextAttrs[name];
+	}
+	assertExclusiveAttrs({
+		...nextAttrs,
+		...skip
+	});
+	attrsInternal(scope, nodeAccessor, partial, controllable);
+}
+function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip, controllable) {
+	_attrs_partial(scope, nodeAccessor, nextAttrs, skip, controllable);
+	_attr_content(scope, nodeAccessor, nextAttrs?.content);
+}
+function attrsInternal(scope, nodeAccessor, nextAttrs, controllable) {
+	const el = scope[nodeAccessor];
+	let events = scope[EventAttributes + nodeAccessor];
+	let skip = void 0;
+	for (const name in events) events[name] = 0;
+	if (controllable) {
+		scope[ControlledType + nodeAccessor] = 5;
+		scope[ControlledHandler + nodeAccessor] = 0;
+		if (nextAttrs) skip = controllable(scope, nodeAccessor, nextAttrs);
+	}
+	for (const name in nextAttrs) {
+		const value = nextAttrs[name];
+		switch (name) {
+			case "class":
+				_attr_class(el, value);
+				break;
+			case "style":
+				_attr_style(el, value);
+				break;
+			default:
+				assertValidAttrName(name);
+				if (isEventHandler(name)) (events ||= scope[EventAttributes + nodeAccessor] = {})[getEventHandlerName(name)] = value;
+				else if (!(skip?.test(name) || name === "content" && el.tagName !== "META")) _attr(el, name, value);
+				break;
+		}
+	}
+}
+function _attr_content(scope, nodeAccessor, value) {
+	const content = normalizeClientRender(value);
+	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = content?.["id"])) {
+		setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch);
+		if (content?.["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[BranchScopes$1 + nodeAccessor]);
+	}
+	for (const accessor in content?.[LocalClosures]) content[LocalClosures][accessor](scope[BranchScopes$1 + nodeAccessor], content[LocalClosureValues][accessor]);
+}
+function _attrs_script(scope, nodeAccessor) {
+	const el = scope[nodeAccessor];
+	const events = scope[EventAttributes + nodeAccessor];
+	controllableScripts[scope[ControlledType + nodeAccessor]]?.(scope, nodeAccessor);
+	for (const name in events) _on(el, name, events[name]);
+}
+function _html(scope, value, accessor) {
+	const firstChild = scope[accessor];
+	const parentNode = firstChild.parentNode;
+	const lastChild = scope["DynamicHTMLLastChild:" + accessor] || firstChild;
+	const newContent = parseHTML(_to_text(value), parentNode.namespaceURI);
+	insertChildNodes(parentNode, firstChild, scope[accessor] = newContent.firstChild || newContent.appendChild(new Text()), scope[DynamicHTMLLastChild + accessor] = newContent.lastChild);
+	removeChildNodes(firstChild, lastChild);
+}
+function normalizeClientRender(value) {
+	const renderer = normalizeDynamicRenderer(value);
+	if (renderer) if (renderer["id"]) return renderer;
+	else throw new Error(`Invalid \`content\` attribute. Received ${typeof value}`);
+}
+function normalizeAttrValue(value) {
+	if (isNotVoid(value)) return value === true ? "" : value + "";
+}
+function _lifecycle(scope, thisObj, index = 0) {
+	const accessor = Lifecycle + index;
+	const instance = scope[accessor];
+	if (instance) {
+		Object.assign(instance, thisObj);
+		instance.onUpdate?.();
+	} else {
+		scope[accessor] = thisObj;
+		{
+			const snapshot = { ...thisObj };
+			Object.assign(thisObj, thisObj.onMount?.());
+			for (const prop in snapshot) if (!Object.is(snapshot[prop], thisObj[prop])) throw new Error(`Tried to overwrite existing property "${prop}" in <lifecycle> onMount.`);
+		}
+		$signal(scope, accessor).onabort = () => thisObj.onDestroy?.();
+	}
+}
+function removeChildNodes(startNode, endNode) {
+	const stop = endNode.nextSibling;
+	while (startNode !== stop) {
+		const next = startNode.nextSibling;
+		startNode.remove();
+		startNode = next;
+	}
 }
-function _resume(id, obj) {
-	return registeredValues[id] = obj;
+function insertChildNodes(parentNode, referenceNode, startNode, endNode) {
+	parentNode.insertBefore(toInsertNode(startNode, endNode), referenceNode);
 }
-function _var_resume(id, signal) {
-	_resume(id, (scope) => (value) => signal(scope, value));
-	return signal;
+function toInsertNode(startNode, endNode) {
+	if (startNode === endNode) return startNode;
+	const parent = new DocumentFragment();
+	const stop = endNode.nextSibling;
+	while (startNode !== stop) {
+		const next = startNode.nextSibling;
+		parent.appendChild(startNode);
+		startNode = next;
+	}
+	return parent;
 }
-function _el(id, accessor) {
-	return _resume(id, (scope) => () => _el_read(scope[accessor]));
+//#endregion
+//#region src/dom/resolve-cursor-position.ts
+const R = /[^\p{L}\p{N}]/gu;
+function resolveCursorPosition(inputType, initialPosition, initialValue, updatedValue) {
+	if ((initialPosition || initialPosition === 0) && (initialPosition !== initialValue.length || /kw/.test(inputType))) {
+		const before = initialValue.slice(0, initialPosition);
+		const after = initialValue.slice(initialPosition);
+		if (updatedValue.startsWith(before)) return initialPosition;
+		if (updatedValue.endsWith(after)) return updatedValue.length - after.length;
+		let count = before.replace(R, "").length;
+		let pos = 0;
+		while (count && updatedValue[pos]) if (updatedValue[pos++].replace(R, "")) count--;
+		return pos;
+	}
+	return -1;
 }
 //#endregion
 //#region src/dom/controllable.ts
@@ -1011,6 +1201,36 @@ function _attr_input_checked_default(scope, nodeAccessor, checked) {
 		if (restoreValue !== normalizedChecked) el.checked = restoreValue;
 	}
 }
+/** Filled by the latches a compiled page emits, so a page carries only the
+* control kinds its tags can be (`_attrs_script` resolves the kind at run time). */
+const controllableScripts = {};
+/** The render pass equivalent, for a tag whose name is only known at run time;
+* a statically named tag passes its claim to `_attrs` instead. */
+const controllableRenders = {};
+function _enable_controllable_input() {
+	controllableScripts[0] = _attr_input_checked_script;
+	controllableScripts[1] = _attr_input_checkedValue_script;
+	controllableScripts[2] = _attr_input_value_script;
+}
+function _enable_controllable_textarea() {
+	controllableScripts[2] = _attr_input_value_script;
+}
+function _enable_controllable_select() {
+	controllableScripts[3] = _attr_select_value_script;
+}
+function _enable_controllable_open() {
+	controllableScripts[4] = _attr_details_or_dialog_open_script;
+}
+/** A run-time tag name can be any controllable, so its page enables them all. */
+function _enable_controllable() {
+	_enable_controllable_input();
+	_enable_controllable_select();
+	_enable_controllable_open();
+	controllableRenders.INPUT = _controllable_input;
+	controllableRenders.TEXTAREA = _controllable_textarea;
+	controllableRenders.SELECT = _controllable_select;
+	controllableRenders.DETAILS = controllableRenders.DIALOG = _controllable_open;
+}
 function _attr_input_checked(scope, nodeAccessor, checked, checkedChange) {
 	const el = scope[nodeAccessor];
 	const normalizedChecked = isNotVoid(checked);
@@ -1172,12 +1392,12 @@ function _attr_select_value_script(scope, nodeAccessor) {
 		}
 	}
 	syncControllableFormInput(el, hasSelectChanged, onChange);
-	new MutationObserver(() => {
-		const value = scope[ControlledValue + nodeAccessor];
-		if (Array.isArray(value) ? value.length !== el.selectedOptions.length || value.some((_, i) => !value.includes(el.selectedOptions[i].value)) : el.value !== value) onChange();
-	}).observe(el, {
+	observeOnce(scope, nodeAccessor, {
 		childList: true,
 		subtree: true
+	}, () => {
+		const value = scope[ControlledValue + nodeAccessor];
+		if (Array.isArray(value) ? value.length !== el.selectedOptions.length || value.some((_, i) => !value.includes(el.selectedOptions[i].value)) : el.value !== value) onChange();
 	});
 }
 function setSelectValue(el, value, multiple) {
@@ -1207,7 +1427,10 @@ function _attr_details_or_dialog_open(scope, nodeAccessor, open, openChange) {
 }
 function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
-	new MutationObserver(() => {
+	observeOnce(scope, nodeAccessor, {
+		attributes: true,
+		attributeFilter: ["open"]
+	}, () => {
 		const openChange = scope[ControlledHandler + nodeAccessor];
 		if (openChange && el.open === !scope["ControlledValue:" + nodeAccessor]) {
 			const newValue = el.open;
@@ -1215,11 +1438,11 @@ function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 			openChange(newValue);
 			run();
 		}
-	}).observe(el, {
-		attributes: true,
-		attributeFilter: ["open"]
 	});
 }
+function observeOnce(scope, nodeAccessor, init, callback) {
+	(scope[ControlledObserver + nodeAccessor] ||= new MutationObserver(callback)).observe(scope[nodeAccessor], init);
+}
 function syncControllableFormInput(el, hasChanged, onChange) {
 	el._ = onChange;
 	delegate("input", handleChange);
@@ -1255,240 +1478,34 @@ function updateList(arr, val, push) {
 	const index = arr.indexOf(val);
 	return (push ? !~index && [...arr, val] : ~index && arr.slice(0, index).concat(arr.slice(index + 1))) || arr;
 }
-//#endregion
-//#region src/dom/dom.ts
-function _to_text(value) {
-	assertValidTextValue(value);
-	return value || value === 0 ? value + "" : "";
-}
-function _attr(element, name, value) {
-	assertValidAttrValue(name, value);
-	setAttribute(element, name, normalizeAttrValue(value));
-}
-function setAttribute(element, name, value) {
-	if (element.getAttribute(name) != value) if (value === void 0) element.removeAttribute(name);
-	else element.setAttribute(name, value);
-}
-function _attr_class(element, value) {
-	setAttribute(element, "class", toDelimitedString(value, " ", stringifyClassObject) || void 0);
-}
-function _attr_class_items(element, items) {
-	for (const key in items) _attr_class_item(element, key, items[key]);
-}
-function _attr_class_item(element, name, value) {
-	element.classList.toggle(name, !!value);
-}
-function _attr_style(element, value) {
-	setAttribute(element, "style", toDelimitedString(value, ";", stringifyStyleObject) || void 0);
-}
-function _attr_style_items(element, items) {
-	for (const key in items) _attr_style_item(element, key, items[key]);
-}
-function _attr_style_item(element, name, value) {
-	element.style.setProperty(name, _to_text(value));
-}
-function _style_shell(scope, nodeAccessor) {
-	const element = scope[nodeAccessor];
-	const id = _id(scope);
-	_attr_nonce(scope, nodeAccessor);
-	element.className = id;
-	_text_content(element, "." + id + "~*{}");
-}
-function _style_rule_item(element, name, value) {
-	const text = element.textContent;
-	const decl = name + ":" + escapeStyleValue(_to_text(value)) + ";";
-	let start = text.indexOf("{" + name + ":");
-	if (!~start) start = text.indexOf(";" + name + ":");
-	_text_content(element, ~start ? text.slice(0, ++start) + decl + text.slice(text.indexOf(";", start) + 1) : text.slice(0, -1) + decl + "}");
-}
-function _attr_nonce(scope, nodeAccessor) {
-	_attr(scope[nodeAccessor], "nonce", scope[Global].cspNonce);
-}
-function _text(node, value) {
-	const normalizedValue = _to_text(value);
-	if (node.data !== normalizedValue) node.data = normalizedValue;
-}
-function _text_content(node, value) {
-	const normalizedValue = _to_text(value);
-	if (node.textContent !== normalizedValue) node.textContent = normalizedValue;
-}
-function _attrs(scope, nodeAccessor, nextAttrs) {
-	const el = scope[nodeAccessor];
-	for (let i = el.attributes.length; i--;) {
-		const { name } = el.attributes.item(i);
-		if (!(nextAttrs && (name in nextAttrs || hasAttrAlias(el, name, nextAttrs)))) el.removeAttribute(name);
-	}
-	assertExclusiveAttrs(nextAttrs);
-	attrsInternal(scope, nodeAccessor, nextAttrs);
-}
-function _attrs_content(scope, nodeAccessor, nextAttrs) {
-	_attrs(scope, nodeAccessor, nextAttrs);
-	_attr_content(scope, nodeAccessor, nextAttrs?.content);
-}
-function hasAttrAlias(element, attr, nextAttrs) {
-	return attr === "checked" && element.tagName === "INPUT" && "checkedValue" in nextAttrs;
-}
-function _attrs_partial(scope, nodeAccessor, nextAttrs, skip) {
-	const el = scope[nodeAccessor];
-	const partial = {};
-	for (let i = el.attributes.length; i--;) {
-		const { name } = el.attributes.item(i);
-		if (!skip[name] && !(nextAttrs && name in nextAttrs)) el.removeAttribute(name);
-	}
-	for (const name in nextAttrs) {
-		const key = isEventHandler(name) ? `on-${getEventHandlerName(name)}` : name;
-		if (!skip[key]) partial[key] = nextAttrs[name];
-	}
-	assertExclusiveAttrs({
-		...nextAttrs,
-		...skip
-	});
-	attrsInternal(scope, nodeAccessor, partial);
-}
-function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip) {
-	_attrs_partial(scope, nodeAccessor, nextAttrs, skip);
-	_attr_content(scope, nodeAccessor, nextAttrs?.content);
-}
-function attrsInternal(scope, nodeAccessor, nextAttrs) {
-	const el = scope[nodeAccessor];
-	let events = scope[EventAttributes + nodeAccessor];
-	let skip;
-	for (const name in events) events[name] = 0;
-	scope[ControlledType + nodeAccessor] = 5;
-	scope[ControlledHandler + nodeAccessor] = 0;
-	switch (nextAttrs && el.tagName) {
-		case "INPUT":
-			if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
-				_attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
-				skip = /^checked(?:Value)?(?:Change)?$/;
-			} else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
-				_attr_input_checkedValue(scope, nodeAccessor, nextAttrs.checkedValue, nextAttrs.checkedValueChange, nextAttrs.value);
-				skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
-			} else if ("value" in nextAttrs || "valueChange" in nextAttrs) {
-				_attr_input_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange, _attr_input_value_dynamic_default);
-				skip = /^value(?:Change)?$/;
-			}
-			break;
-		case "SELECT":
-			if ("value" in nextAttrs || "valueChange" in nextAttrs) {
-				_attr_select_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange);
-				skip = /^value(?:Change)?$/;
-			}
-			break;
-		case "TEXTAREA":
-			if ("value" in nextAttrs || "valueChange" in nextAttrs) {
-				_attr_input_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange);
-				skip = /^value(?:Change)?$/;
-			}
-			break;
-		case "DETAILS":
-		case "DIALOG":
-			if ("open" in nextAttrs || "openChange" in nextAttrs) {
-				_attr_details_or_dialog_open(scope, nodeAccessor, nextAttrs.open, nextAttrs.openChange);
-				skip = /^open(?:Change)?$/;
-			}
-			break;
-	}
-	for (const name in nextAttrs) {
-		const value = nextAttrs[name];
-		switch (name) {
-			case "class":
-				_attr_class(el, value);
-				break;
-			case "style":
-				_attr_style(el, value);
-				break;
-			default:
-				assertValidAttrName(name);
-				if (isEventHandler(name)) (events ||= scope[EventAttributes + nodeAccessor] = {})[getEventHandlerName(name)] = value;
-				else if (!(skip?.test(name) || name === "content" && el.tagName !== "META")) _attr(el, name, value);
-				break;
-		}
-	}
-}
-function _attr_content(scope, nodeAccessor, value) {
-	const content = normalizeClientRender(value);
-	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = content?.["id"])) {
-		setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch);
-		if (content?.["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[BranchScopes$1 + nodeAccessor]);
+function _controllable_input(scope, nodeAccessor, nextAttrs) {
+	if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
+		_attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
+		return /^checked(?:Value)?(?:Change)?$/;
 	}
-	for (const accessor in content?.[LocalClosures]) content[LocalClosures][accessor](scope[BranchScopes$1 + nodeAccessor], content[LocalClosureValues][accessor]);
-}
-function _attrs_script(scope, nodeAccessor) {
-	const el = scope[nodeAccessor];
-	const events = scope[EventAttributes + nodeAccessor];
-	switch (scope[ControlledType + nodeAccessor]) {
-		case 0:
-			_attr_input_checked_script(scope, nodeAccessor);
-			break;
-		case 1:
-			_attr_input_checkedValue_script(scope, nodeAccessor);
-			break;
-		case 2:
-			_attr_input_value_script(scope, nodeAccessor);
-			break;
-		case 3:
-			_attr_select_value_script(scope, nodeAccessor);
-			break;
-		case 4:
-			_attr_details_or_dialog_open_script(scope, nodeAccessor);
-			break;
+	if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
+		_attr_input_checkedValue(scope, nodeAccessor, nextAttrs.checkedValue, nextAttrs.checkedValueChange, nextAttrs.value);
+		return /^(?:value|checked(?:Value)?)(?:Change)?$/;
 	}
-	for (const name in events) _on(el, name, events[name]);
-}
-function _html(scope, value, accessor) {
-	const firstChild = scope[accessor];
-	const parentNode = firstChild.parentNode;
-	const lastChild = scope["DynamicHTMLLastChild:" + accessor] || firstChild;
-	const newContent = parseHTML(_to_text(value), parentNode.namespaceURI);
-	insertChildNodes(parentNode, firstChild, scope[accessor] = newContent.firstChild || newContent.appendChild(new Text()), scope[DynamicHTMLLastChild + accessor] = newContent.lastChild);
-	removeChildNodes(firstChild, lastChild);
-}
-function normalizeClientRender(value) {
-	const renderer = normalizeDynamicRenderer(value);
-	if (renderer) if (renderer["id"]) return renderer;
-	else throw new Error(`Invalid \`content\` attribute. Received ${typeof value}`);
-}
-function normalizeAttrValue(value) {
-	if (isNotVoid(value)) return value === true ? "" : value + "";
+	return _controllable_textarea(scope, nodeAccessor, nextAttrs, _attr_input_value_dynamic_default);
 }
-function _lifecycle(scope, thisObj, index = 0) {
-	const accessor = Lifecycle + index;
-	const instance = scope[accessor];
-	if (instance) {
-		Object.assign(instance, thisObj);
-		instance.onUpdate?.();
-	} else {
-		scope[accessor] = thisObj;
-		{
-			const snapshot = { ...thisObj };
-			Object.assign(thisObj, thisObj.onMount?.());
-			for (const prop in snapshot) if (!Object.is(snapshot[prop], thisObj[prop])) throw new Error(`Tried to overwrite existing property "${prop}" in <lifecycle> onMount.`);
-		}
-		$signal(scope, accessor).onabort = () => thisObj.onDestroy?.();
+function _controllable_textarea(scope, nodeAccessor, nextAttrs, dynamicDefault) {
+	if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+		_attr_input_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange, dynamicDefault);
+		return /^value(?:Change)?$/;
 	}
 }
-function removeChildNodes(startNode, endNode) {
-	const stop = endNode.nextSibling;
-	while (startNode !== stop) {
-		const next = startNode.nextSibling;
-		startNode.remove();
-		startNode = next;
+function _controllable_select(scope, nodeAccessor, nextAttrs) {
+	if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+		_attr_select_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange);
+		return /^value(?:Change)?$/;
 	}
 }
-function insertChildNodes(parentNode, referenceNode, startNode, endNode) {
-	parentNode.insertBefore(toInsertNode(startNode, endNode), referenceNode);
-}
-function toInsertNode(startNode, endNode) {
-	if (startNode === endNode) return startNode;
-	const parent = new DocumentFragment();
-	const stop = endNode.nextSibling;
-	while (startNode !== stop) {
-		const next = startNode.nextSibling;
-		parent.appendChild(startNode);
-		startNode = next;
+function _controllable_open(scope, nodeAccessor, nextAttrs) {
+	if ("open" in nextAttrs || "openChange" in nextAttrs) {
+		_attr_details_or_dialog_open(scope, nodeAccessor, nextAttrs.open, nextAttrs.openChange);
+		return /^open(?:Change)?$/;
 	}
-	return parent;
 }
 //#endregion
 //#region src/dom/control-flow.ts
@@ -1547,6 +1564,11 @@ function _await_promise(nodeAccessor, params) {
 			if (thisPromise === scope[promiseAccessor]) {
 				const referenceNode = scope[nodeAccessor];
 				scope[promiseAccessor] = 0;
+				if (scope["#ClosestBranch"]?.["#Gen"] === 0) {
+					awaitCounter.c();
+					run();
+					return;
+				}
 				queueAsyncRender(scope, () => {
 					awaitBranch = resolveAwait(scope, referenceNode, data);
 					const pendingRenders = awaitBranch[PendingRenders];
@@ -1724,8 +1746,9 @@ let _dynamic_tag = function dynamicTag(nodeAccessor, getContent, getTagVar, inpu
 			const childScope = scope[childScopeAccessor];
 			const args = getInput?.();
 			if (typeof normalizedRenderer === "string") {
-				(getContent ? _attrs : _attrs_content)(childScope, `#${normalizedRenderer}/0`, (inputIsArgs ? args[0] : args) || {});
-				if (childScope[`EventAttributes:#${normalizedRenderer}/0`] || childScope[`ControlledHandler:#${normalizedRenderer}/0`]) queueEffect(childScope, dynamicTagScript);
+				const nodeAccessor = `#${normalizedRenderer}/0`;
+				(getContent ? _attrs : _attrs_content)(childScope, nodeAccessor, (inputIsArgs ? args[0] : args) || {}, controllableRenders[childScope[nodeAccessor].tagName]);
+				if (childScope["EventAttributes:" + nodeAccessor] || childScope["ControlledHandler:" + nodeAccessor]) queueEffect(childScope, dynamicTagScript);
 			} else {
 				for (const accessor in normalizedRenderer[LocalClosures]) normalizedRenderer[LocalClosures][accessor](childScope, normalizedRenderer[LocalClosureValues][accessor]);
 				if (normalizedRenderer["params"]) if (inputIsArgs) normalizedRenderer[Params](childScope, normalizedRenderer._ ? args[0] : args);
@@ -2055,8 +2078,9 @@ function _enable_catch() {
 function $signalReset(scope, id) {
 	const ctrl = scope[AbortControllers]?.[id];
 	if (ctrl) {
-		queueEffect(ctrl, abort);
 		scope[AbortControllers][id] = void 0;
+		if (rendering) queueEffect(ctrl, abort);
+		else abort(ctrl);
 	}
 }
 function $signal(scope, id) {
@@ -2219,10 +2243,13 @@ function mount(input = {}, reference, position) {
 		set value(newValue) {
 			_var_change(branch, newValue);
 		},
-		update(newInput) {
-			if (args) runEffects(prepareEffects(() => {
-				args(branch, newInput);
-			}));
+		update(newInput = {}) {
+			if (args) {
+				if (newInput.$global) ({$global, ...newInput} = newInput);
+				runEffects(prepareEffects(() => {
+					args(branch, newInput);
+				}));
+			}
 		},
 		destroy() {
 			removeAndDestroyBranch(branch);
@@ -2382,6 +2409,10 @@ exports._const = _const;
 exports._content = _content;
 exports._content_closures = _content_closures;
 exports._content_resume = _content_resume;
+exports._controllable_input = _controllable_input;
+exports._controllable_open = _controllable_open;
+exports._controllable_select = _controllable_select;
+exports._controllable_textarea = _controllable_textarea;
 Object.defineProperty(exports, "_dynamic_tag", {
 	enumerable: true,
 	get: function() {
@@ -2392,6 +2423,11 @@ exports._dynamic_tag_content = _dynamic_tag_content;
 exports._el = _el;
 exports._el_read = _el_read;
 exports._enable_catch = _enable_catch;
+exports._enable_controllable = _enable_controllable;
+exports._enable_controllable_input = _enable_controllable_input;
+exports._enable_controllable_open = _enable_controllable_open;
+exports._enable_controllable_select = _enable_controllable_select;
+exports._enable_controllable_textarea = _enable_controllable_textarea;
 exports._for_closure = _for_closure;
 exports._for_in = _for_in;
 exports._for_of = _for_of;