@oscarpalmer/abydon 0.14.0 → 0.16.0

package/dist/abydon.full.js

@@ -20,18 +20,18 @@ const METHODS_UPDATE = new Set([
 const NAME_ARRAY = "array";
 const NAME_COMPUTED = "computed";
 const NAME_EFFECT = "effect";
+const NAME_MORA = "$mora";
 const NAME_SIGNAL = "signal";
 const NAME_STORE = "store";
-const NAMES = new Set([
+const NAME_ALL = new Set([
 	NAME_ARRAY,
 	NAME_COMPUTED,
 	NAME_SIGNAL,
 	NAME_STORE
 ]);
-
 var Effect = class {
 	constructor(callback) {
-		Object.defineProperty(this, "$mora", { value: NAME_EFFECT });
+		Object.defineProperty(this, NAME_MORA, { value: NAME_EFFECT });
 		this.state = { callback };
 		runEffect(this);
 	}
@@ -48,7 +48,6 @@ function runEffect(effect$1) {
 function effect(callback) {
 	return typeof callback === "function" ? new Effect(callback) : void 0;
 }
-
 function isArray(value) {
 	return isMora(value, NAME_ARRAY);
 }
@@ -59,15 +58,14 @@ function isEffect(value) {
 	return isMora(value, NAME_EFFECT);
 }
 function isMora(value, name) {
-	return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value.$mora === name : name.has(value.$mora));
+	return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value["$mora"] === name : name.has(value["$mora"]));
 }
 function isReactive(value) {
-	return isMora(value, NAMES);
+	return isMora(value, NAME_ALL);
 }
 function isSignal(value) {
 	return isMora(value, NAME_SIGNAL);
 }
-
 function flushHandlers() {
 	while (BATCH.depth === 0 && BATCH.handlers.size > 0) {
 		const handlers = [...BATCH.handlers];
@@ -83,7 +81,6 @@ function stopBatch() {
 	if (BATCH.depth > 0) BATCH.depth -= 1;
 	flushHandlers();
 }
-
 var Subscription = class {
 	callback;
 	state;
@@ -93,13 +90,13 @@ var Subscription = class {
 		callback(state.value);
 	}
 	destroy() {
-		this.callback = noop;
+		this.callback = noop$1;
 		this.state = void 0;
 	}
 };
-function noop() {}
+function noop$1() {}
 function subscribe(state, callback) {
-	if (typeof callback !== "function" || state.subscriptions.has(callback)) return noop;
+	if (typeof callback !== "function" || state.subscriptions.has(callback)) return noop$1;
 	state.subscriptions.set(callback, new Subscription(state, callback));
 	return () => {
 		unsubscribe(state, callback);
@@ -109,7 +106,6 @@ function unsubscribe(state, callback) {
 	state.subscriptions.get(callback)?.destroy();
 	state.subscriptions.delete(callback);
 }
-
 var Reactive = class {
 	state = {
 		computeds: /* @__PURE__ */ new Set(),
@@ -121,7 +117,7 @@ var Reactive = class {
 	constructor(name, value, options) {
 		this.state.value = value;
 		if (typeof options === "object" && typeof options.equal === "function") this.state.equal = options.equal;
-		Object.defineProperty(this, "$mora", { value: name });
+		Object.defineProperty(this, NAME_MORA, { value: name });
 	}
 	peek() {
 		return this.state.value;
@@ -139,7 +135,6 @@ var Reactive = class {
 		unsubscribe(this.state, callback);
 	}
 };
-
 var Computed = class extends Reactive {
 	effect = {
 		dirty: true,
@@ -172,10 +167,9 @@ var Computed = class extends Reactive {
 function computed(callback, options) {
 	return new Computed(callback, options);
 }
-
 function emitValue(state) {
-	for (const computed of state.computeds) computed.effect.dirty = true;
-	for (const effect of state.effects) BATCH.handlers.add(effect);
+	for (const computed$1 of state.computeds) computed$1.effect.dirty = true;
+	for (const effect$1 of state.effects) BATCH.handlers.add(effect$1);
 	for (const [, subscription] of state.subscriptions) BATCH.handlers.add(subscription);
 	if (BATCH.depth === 0) flushHandlers();
 }
@@ -197,7 +191,6 @@ function getValue$1(state) {
 	if (ACTIVE.effect != null) state.effects.add(ACTIVE.effect);
 	return state.value;
 }
-
 var Signal = class extends Reactive {
 	constructor(value, options) {
 		super(NAME_SIGNAL, value, options);
@@ -218,14 +211,16 @@ var Signal = class extends Reactive {
 function signal(value, options) {
 	return new Signal(value, options);
 }
-
-function getReactiveValueInProxy(reactive, mapped, key, isArray) {
+function emityProxyValues(state, mapped) {
+	const values = [...mapped.values()];
+	const { length } = values;
+	for (let index = 0; index < length; index += 1) values[index].effect.dirty = true;
+	emitValue(state);
+}
+function getReactiveValueInProxy(reactive, mapped, key, isArray$1) {
 	let item = mapped.get(key);
 	if (item == null) {
-		item = computed(() => {
-			const value = reactive.get();
-			return isArray ? value.at(key) : value[key];
-		});
+		item = computed(() => isArray$1 ? reactive.get().at(key) : reactive.get()[key]);
 		mapped.set(key, item);
 	}
 	return item;
@@ -247,19 +242,18 @@ function setProxyValue(proxy, value) {
 	stopBatch();
 }
 function setValueInProxy(parameters) {
-	const { isArray, length, property, state, target, value } = parameters;
-	if (isArray) {
+	const { isArray: isArray$1, length, property, state, target, value } = parameters;
+	if (isArray$1) {
 		if (!(!Number.isNaN(Number(property)) || property === "length")) return Reflect.set(target, property, value);
 	}
 	const previous = Reflect.get(target, property);
 	if (!state.equal(previous, value)) {
 		Reflect.set(target, property, value);
 		emitValue(state);
-		if (isArray) length?.set(target.length);
+		if (isArray$1) length?.set(target.length);
 	}
 	return true;
 }
-
 var ReactiveArray = class extends Reactive {
 	#indiced = /* @__PURE__ */ new Map();
 	#size = signal(0);
@@ -291,19 +285,17 @@ var ReactiveArray = class extends Reactive {
 	}
 	get(first) {
 		if (typeof first === "number") return getReactiveValueInProxy(this, this.#indiced, first, true).get();
-		if (first === "length") return this.length;
-		return getValue$1(this.state);
+		return first === "length" ? this.length : getValue$1(this.state);
 	}
 	map(callback) {
 		return computed(() => this.get().map(callback));
 	}
 	notify() {
-		emitValue(this.state);
+		emityProxyValues(this.state, this.#indiced);
 	}
 	peek(value) {
 		if (value === "length") return this.#size.peek();
-		if (typeof value === "number") return this.state.value.at(value);
-		return [...this.state.value];
+		return typeof value === "number" ? this.state.value.at(value) : [...this.state.value];
 	}
 	pop() {
 		return this.state.value.pop();
@@ -324,7 +316,7 @@ var ReactiveArray = class extends Reactive {
 	}
 	subscribe(first, second) {
 		if (typeof first === "number" && typeof second === "function") return getReactiveValueInProxy(this, this.#indiced, first, true).subscribe(second);
-		return typeof first === "function" ? subscribe(this.state, first) : noop;
+		return typeof first === "function" ? subscribe(this.state, first) : noop$1;
 	}
 	unshift(...items) {
 		return this.state.value.unshift(...items);
@@ -354,30 +346,28 @@ function setAtIndex(array$1, index, value) {
 	const actual = index < 0 ? array$1.length + index : index;
 	if (actual > -1) array$1[actual] = value;
 }
-
 function isKey(value) {
 	return typeof value === "number" || typeof value === "string";
 }
-function isPlainObject$1(value) {
+function isPlainObject$2(value) {
 	if (value === null || typeof value !== "object") return false;
 	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
 	const prototype = Object.getPrototypeOf(value);
 	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
 }
-
-function getString$1(value) {
-	if (typeof value === "string") return value;
-	if (value == null) return "";
-	if (typeof value !== "object") return String(value);
-	const asString = String(value.valueOf?.() ?? value);
-	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
-}
-
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE.test(getString$1(value));
-}
-var EXPRESSION_WHITESPACE = /^\s*$/;
-
+new Set([
+	Int8Array,
+	Uint8Array,
+	Uint8ClampedArray,
+	Int16Array,
+	Uint16Array,
+	Int32Array,
+	Uint32Array,
+	Float32Array,
+	Float64Array,
+	BigInt64Array,
+	BigUint64Array
+]);
 var Store = class extends Reactive {
 	#keyed = /* @__PURE__ */ new Map();
 	constructor(value, options) {
@@ -392,111 +382,166 @@ var Store = class extends Reactive {
 	get(key) {
 		return isKey(key) ? getReactiveValueInProxy(this, this.#keyed, key, false).get() : getValue$1(this.state);
 	}
+	notify() {
+		emityProxyValues(this.state, this.#keyed);
+	}
 	peek(key) {
 		return isKey(key) ? this.state.value[key] : { ...this.state.value };
 	}
 	set(first, second) {
 		if (isKey(first)) this.state.value[first] = second;
-		else if (first == null || isPlainObject$1(first)) setProxyValue(this.state.value, first ?? {});
+		else if (first == null || isPlainObject$2(first)) setProxyValue(this.state.value, first ?? {});
 	}
 	subscribe(first, second) {
 		if (isKey(first) && typeof second === "function") return getReactiveValueInProxy(this, this.#keyed, first, false).subscribe(second);
-		return typeof first === "function" ? subscribe(this.state, first) : noop;
+		return typeof first === "function" ? subscribe(this.state, first) : noop$1;
 	}
 	update(callback) {
 		const updated = callback({ ...this.state.value });
-		if (updated == null || isPlainObject$1(updated)) setProxyValue(this.state.value, updated ?? {});
+		if (updated == null || isPlainObject$2(updated)) setProxyValue(this.state.value, updated ?? {});
 	}
 };
 function store(value, options) {
-	return new Store(isPlainObject$1(value) ? value : {}, options);
+	return new Store(isPlainObject$2(value) ? value : {}, options);
 }
-
-function isChildNode(value) {
-	return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
+function isPlainObject$1(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
+new Set([
+	Int8Array,
+	Uint8Array,
+	Uint8ClampedArray,
+	Int16Array,
+	Uint16Array,
+	Int32Array,
+	Uint32Array,
+	Float32Array,
+	Float64Array,
+	BigInt64Array,
+	BigUint64Array
+]);
+function getString$1(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value === "function") return getString$1(value());
+	if (typeof value !== "object") return String(value);
+	const asString = String(value.valueOf?.() ?? value);
+	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
+}
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString$1(value));
+}
+var EXPRESSION_WHITESPACE$1 = /^\s*$/;
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
 }
 function isHTMLOrSVGElement(value) {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
-var CHILD_NODE_TYPES = new Set([
-	Node.ELEMENT_NODE,
-	Node.TEXT_NODE,
-	Node.PROCESSING_INSTRUCTION_NODE,
-	Node.COMMENT_NODE,
-	Node.DOCUMENT_TYPE_NODE
-]);
-
 function getString(value) {
 	if (typeof value === "string") return value;
 	if (value == null) return "";
+	if (typeof value === "function") return getString(value());
 	if (typeof value !== "object") return String(value);
 	const asString = String(value.valueOf?.() ?? value);
 	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
 }
-
 function isPlainObject(value) {
 	if (value === null || typeof value !== "object") return false;
 	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
 	const prototype = Object.getPrototypeOf(value);
 	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
 }
-
+new Set([
+	Int8Array,
+	Uint8Array,
+	Uint8ClampedArray,
+	Int16Array,
+	Uint16Array,
+	Int32Array,
+	Uint32Array,
+	Float32Array,
+	Float64Array,
+	BigInt64Array,
+	BigUint64Array
+]);
+function badAttributeHandler(name, value) {
+	if (name == null || value == null) return true;
+	if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME$1.test(name)) return true;
+	if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
+	return EXPRESSION_DATA_OR_SCRIPT.test(value);
+}
+function booleanAttributeHandler(name, value) {
+	if (name == null || value == null) return true;
+	if (!booleanAttributesSet.has(name)) return false;
+	const normalized = value.toLowerCase().trim();
+	return !(normalized.length === 0 || normalized === name);
+}
+function decodeAttribute(value) {
+	textArea ??= document.createElement("textarea");
+	textArea.innerHTML = value;
+	return decodeURIComponent(textArea.value);
+}
+function handleAttribute(callback, decode, first, second) {
+	let name;
+	let value;
+	if (isAttribute(first)) {
+		name = first.name;
+		value = String(first.value);
+	} else if (typeof first === "string" && typeof second === "string") {
+		name = first;
+		value = second;
+	}
+	if (decode && value != null) value = decodeAttribute(value);
+	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
+}
 function isAttribute(value) {
 	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && typeof value.value === "string";
 }
-function isBadAttribute(first, second) {
-	return validateAttribute((attribute) => attribute == null || EXPRESSION_ON_PREFIX.test(attribute.name) || EXPRESSION_SOURCE_PREFIX.test(attribute.name) && EXPRESSION_VALUE_PREFIX.test(String(attribute.value)), first, second);
+function _isBadAttribute(first, second, decode) {
+	return handleAttribute(badAttributeHandler, decode, first, second);
 }
-function isBooleanAttribute(value) {
-	return validateAttribute((attribute) => attribute != null && booleanAttributes.includes(attribute.name.toLowerCase()), value, "");
+function _isBooleanAttribute(first, decode) {
+	return handleAttribute((name) => booleanAttributesSet.has(name?.toLowerCase()), decode, first, "");
 }
-function isEmptyNonBooleanAttribute(first, second) {
-	return validateAttribute((attribute) => attribute != null && !booleanAttributes.includes(attribute.name) && String(attribute.value).trim().length === 0, first, second);
+function _isEmptyNonBooleanAttribute(first, second, decode) {
+	return handleAttribute((name, value) => name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0, decode, first, second);
 }
-function isInvalidBooleanAttribute(first, second) {
-	return validateAttribute((attribute) => {
-		if (attribute == null) return true;
-		if (!booleanAttributes.includes(attribute.name)) return false;
-		const normalized = String(attribute.value).toLowerCase().trim();
-		return !(normalized.length === 0 || normalized === attribute.name);
-	}, first, second);
+function _isInvalidBooleanAttribute(first, second, decode) {
+	return handleAttribute(booleanAttributeHandler, decode, first, second);
 }
 function isProperty(value) {
 	return isPlainObject(value) && typeof value.name === "string";
 }
-function setAttribute$1(element, first, second) {
-	updateValue(element, first, second, updateAttribute);
-}
-function setProperty(element, first, second) {
-	updateValue(element, first, second, updateProperty$1);
+function isValidSourceAttribute(name, value) {
+	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
 }
 function updateAttribute(element, name, value) {
-	if (booleanAttributes.includes(name.toLowerCase())) updateProperty$1(element, name, value, false);
-	else if (value == null) element.removeAttribute(name);
-	else element.setAttribute(name, typeof value === "string" ? value : getString(value));
+	const isBoolean = booleanAttributesSet.has(name.toLowerCase());
+	if (isBoolean) updateProperty$1(element, name, value);
+	if (isBoolean ? value !== true : value == null) element.removeAttribute(name);
+	else element.setAttribute(name, isBoolean ? "" : getString(value));
 }
-function updateProperty$1(element, name, value, validate) {
-	const actual = validate ?? true ? name.toLowerCase() : name;
-	if (actual === "hidden") element.hidden = value === "" || value === true;
-	else element[actual] = value === "" || typeof value === "string" && value.toLowerCase() === actual || value === true;
+function updateProperty$1(element, name, value) {
+	const actual = name.toLowerCase();
+	element[actual] = value === "" || typeof value === "string" && value.toLowerCase() === actual || value === true;
 }
-function updateValue(element, first, second, callback) {
+function updateValue$1(element, first, second) {
 	if (!isHTMLOrSVGElement(element)) return;
-	if (isProperty(first)) callback(element, first.name, first.value);
-	else if (typeof first === "string") callback(element, first, second);
-}
-function validateAttribute(callback, first, second) {
-	let attribute;
-	if (isAttribute(first)) attribute = first;
-	else if (typeof first === "string" && typeof second === "string") attribute = {
-		name: first,
-		value: second
-	};
-	return callback(attribute);
-}
-var EXPRESSION_ON_PREFIX = /^on/i;
-var EXPRESSION_SOURCE_PREFIX = /^(href|src|xlink:href)$/i;
-var EXPRESSION_VALUE_PREFIX = /(data:text\/html|javascript:)/i;
+	if (isProperty(first)) updateAttribute(element, first.name, first.value);
+	else if (typeof first === "string") updateAttribute(element, first, second);
+}
+var EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
+var EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
+var EXPRESSION_EVENT_NAME$1 = /^on/i;
+var EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
+var EXPRESSION_SOURCE_NAME = /^src$/i;
+var EXPRESSION_SOURCE_VALUE = /^data:/i;
+var EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+var EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
 const booleanAttributes = Object.freeze([
 	"async",
 	"autofocus",
@@ -523,631 +568,755 @@ const booleanAttributes = Object.freeze([
 	"reversed",
 	"selected"
 ]);
-
-function getOptions$1(input) {
-	const options = isPlainObject(input) ? input : {};
-	options.sanitizeBooleanAttributes = typeof options.sanitizeBooleanAttributes === "boolean" ? options.sanitizeBooleanAttributes : true;
-	return options;
+var booleanAttributesSet = new Set(booleanAttributes);
+var formElement = document.createElement("form");
+var textArea;
+function setAttribute$1(element, first, second) {
+	updateValue$1(element, first, second);
+}
+function setProperty(element, first, second) {
+	updateValue$1(element, first, second);
+}
+function handleElement(element, depth) {
+	if (depth === 0) {
+		const removable = element.querySelectorAll(REMOVE_SELECTOR);
+		for (const item of removable) item.remove();
+	}
+	sanitizeAttributes(element, [...element.attributes]);
 }
-function sanitize(value, options) {
-	return sanitizeNodes$1(Array.isArray(value) ? value : [value], getOptions$1(options));
+function isClobbered(value) {
+	return value instanceof HTMLFormElement && (typeof value.nodeName !== "string" || typeof value.textContent !== "string" || typeof value.removeChild !== "function" || !(value.attributes instanceof NamedNodeMap) || typeof value.removeAttribute !== "function" || typeof value.setAttribute !== "function" || typeof value.namespaceURI !== "string" || typeof value.insertBefore !== "function" || typeof value.hasChildNodes !== "function");
 }
-function sanitizeAttributes(element, attributes, options) {
+function removeNode(node) {
+	if (typeof node.remove === "function") node.remove();
+}
+function sanitizeAttributes(element, attributes) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
-		const attribute = attributes[index];
-		if (isBadAttribute(attribute) || isEmptyNonBooleanAttribute(attribute)) element.removeAttribute(attribute.name);
-		else if (options.sanitizeBooleanAttributes && isInvalidBooleanAttribute(attribute)) element.setAttribute(attribute.name, "");
+		const { name, value } = attributes[index];
+		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
+		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute$1(element, name, true);
 	}
 }
-function sanitizeNodes$1(nodes, options) {
+function sanitizeNodes(nodes, depth) {
 	const actual = nodes.filter((node) => node instanceof Node);
-	const { length } = nodes;
+	let { length } = nodes;
 	for (let index = 0; index < length; index += 1) {
 		const node = actual[index];
-		if (node instanceof Element) sanitizeAttributes(node, [...node.attributes], options);
-		if (node.hasChildNodes()) sanitizeNodes$1([...node.childNodes], options);
+		let remove = isClobbered(node);
+		if (!remove) switch (node.nodeType) {
+			case Node.ELEMENT_NODE:
+				handleElement(node, depth);
+				break;
+			case Node.COMMENT_NODE:
+				remove = COMMENT_HARMFUL.test(node.data);
+				break;
+			case Node.DOCUMENT_TYPE_NODE:
+			case Node.PROCESSING_INSTRUCTION_NODE:
+				remove = true;
+				break;
+		}
+		if (remove) {
+			removeNode(node);
+			actual.splice(index, 1);
+			index -= 1;
+			length -= 1;
+			continue;
+		}
+		if (node.hasChildNodes()) sanitizeNodes([...node.childNodes], depth + 1);
 	}
 	return nodes;
 }
-
-function createTemplate(html$1) {
-	const template = document.createElement("template");
-	template.innerHTML = html$1;
-	templates[html$1] = template;
+var COMMENT_HARMFUL = /<[/\w]/g;
+var REMOVE_SELECTOR = "script, toretto-temporary";
+function createHtml(value) {
+	const parsed = getParser().parseFromString(getHtml(value), PARSE_TYPE_HTML);
+	parsed.body.normalize();
+	sanitizeNodes([parsed.body], 0);
+	return parsed.body.innerHTML;
+}
+function createTemplate(value, options) {
+	const template = document.createElement(TEMPLATE_TAG);
+	template.innerHTML = createHtml(value);
+	if (typeof value === "string" && options.cache) templates[value] = template;
 	return template;
 }
-function getTemplate(value) {
-	if (typeof value !== "string" || value.trim().length === 0) return;
+function getHtml(value) {
+	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
+}
+function getNodes(value, options) {
+	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
+	const template = getTemplate(value, options);
+	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
+}
+function getOptions$1(input) {
+	const options = isPlainObject(input) ? input : {};
+	options.cache = typeof options.cache === "boolean" ? options.cache : true;
+	return options;
+}
+function getParser() {
+	parser ??= new DOMParser();
+	return parser;
+}
+function getTemplate(value, options) {
+	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
+	if (value.trim().length === 0) return;
 	let template = templates[value];
 	if (template != null) return template;
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
-	template = element instanceof HTMLTemplateElement ? element : createTemplate(value);
-	templates[value] = template;
-	return template;
+	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
 }
-var html$1 = ((value, sanitization) => {
-	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
-	let options;
-	if (sanitization == null || sanitization === true) options = {};
-	else options = sanitization === false ? void 0 : sanitization;
-	const template = value instanceof HTMLTemplateElement ? value : getTemplate(value);
-	if (template == null) return [];
-	const cloned = template.content.cloneNode(true);
-	const scripts = cloned.querySelectorAll("script");
-	const { length } = scripts;
-	for (let index = 0; index < length; index += 1) scripts[index].remove();
-	cloned.normalize();
-	return options != null ? sanitize([...cloned.childNodes], options) : [...cloned.childNodes];
+var html$1 = ((value, options) => {
+	return getNodes(value, getOptions$1(options));
 });
 html$1.clear = () => {
 	templates = {};
 };
 html$1.remove = (template) => {
-	if (typeof template === "string") templates[template] = void 0;
+	if (typeof template !== "string" || templates[template] == null) return;
+	const keys = Object.keys(templates);
+	const { length } = keys;
+	const updated = {};
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (key !== template) updated[key] = templates[key];
+	}
+	templates = updated;
 };
 var EXPRESSION_ID = /^[a-z][\w-]*$/i;
+var PARSE_TYPE_HTML = "text/html";
+var TEMPLATE_TAG = "template";
+var TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
+var parser;
 var templates = {};
-
-const ABORT_CONTROLLERS = new WeakMap();
 const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+const EVENT_DEFAULTS = {
+	A: "click",
+	BUTTON: "click",
+	DETAILS: "toggle",
+	FORM: "submit",
+	SELECT: "change",
+	TEXTAREA: "input"
+};
+const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
+const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
 const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
-const EXPRESSION_COMMENT_FULL = /^<!--abydon\.(\d+)-->$/;
-const EXPRESSION_COMMENT_CONTENT = /^abydon\.(\d+)$/;
+const EXPRESSION_EVENT_CHANGE_TYPES = /^(checkbox|radio)$/;
 const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
-const REASON_EVENT_REMOVED = 'Event removed as element was removed from document by Abydon';
-
-function getController(element) {
-    let controller = ABORT_CONTROLLERS.get(element);
-    if (controller == null) {
-        controller = new AbortController();
-        ABORT_CONTROLLERS.set(element, controller);
-    }
-    return controller;
-}
-function getOptions(options) {
-    const parts = options.split(':');
-    return {
-        capture: parts.includes('c') || parts.includes('capture'),
-        once: parts.includes('o') || parts.includes('once'),
-        passive: !(parts.includes('a') || parts.includes('active')),
-    };
-}
-function mapEvent(element, name, value) {
-    element.removeAttribute(name);
-    const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
-    if (typeof value === 'function' && type != null) {
-        element.addEventListener(type, value, {
-            ...getOptions(options ?? ''),
-            signal: getController(element).signal,
-        });
-    }
-}
-function removeEvents(element) {
-    ABORT_CONTROLLERS.get(element)?.abort(REASON_EVENT_REMOVED);
-    ABORT_CONTROLLERS.delete(element);
-}
-
+const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
+const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
+const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+const EXPRESSION_EVENT_PREFIX = /^@/;
+const EXPRESSION_PERIOD = /\./;
+const NAME_FRAGMENT = "$fragment";
+const NAME_FRAGMENTS = "$fragments";
 function compareArrays(first, second) {
-    const firstIsLarger = first.length > second.length;
-    const from = firstIsLarger ? first : second;
-    const to = firstIsLarger ? second : first;
-    if (!from
-        .filter(key => to.includes(key))
-        .every((key, index) => to[index] === key)) {
-        return 'dissimilar';
-    }
-    return firstIsLarger ? 'removed' : 'added';
+	const firstIsLarger = first.length > second.length;
+	const from = firstIsLarger ? first : second;
+	const to = firstIsLarger ? second : first;
+	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return COMPARISON_DISSIMILAR;
+	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
 }
 function isFragment(value) {
-    return (typeof value === 'object' &&
-        value != null &&
-        '$fragment' in value &&
-        value.$fragment === true);
+	return isNamed(value, NAME_FRAGMENT);
+}
+function isFragments(value) {
+	return isNamed(value, NAME_FRAGMENTS);
+}
+function isNamed(value, name) {
+	return typeof value === "object" && value != null && name in value && value[name] === true;
+}
+const COMPARISON_ADDED = "added";
+const COMPARISON_DISSIMILAR = "dissimilar";
+const COMPARISON_REMOVED = "removed";
+var Fragments = class {
+	#state;
+	get items() {
+		return this.#state.mapped;
+	}
+	constructor(items, identify, fragment) {
+		Object.defineProperty(this, NAME_FRAGMENTS, { value: true });
+		this.#state = {
+			fragment,
+			identify,
+			array: items,
+			instances: {},
+			mapped: array([]),
+			subscriber: void 0
+		};
+		states.set(this, this.#state);
+		initializeFragments(this.#state);
+	}
+};
+function handleFragments(item, remove) {
+	const state = isFragments(item) ? states.get(item) : item;
+	if (state != null) (remove ? removeFragments$1 : initializeFragments)(state);
+}
+function handleItems(state, items) {
+	const keys = /* @__PURE__ */ new Set();
+	const mapped = [];
+	const { length } = items;
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const identifier = state.identify(item);
+		if (identifier == null) throw new Error("Identifier cannot be null or undefined");
+		const key = getString$1(identifier);
+		if (keys.has(key)) throw new Error(`Duplicate identifier found: "${key}"`);
+		let instance = state.instances[key];
+		if (instance == null) {
+			instance = state.fragment(item);
+			if (!isFragment(instance)) throw new Error("Fragment function must return a Fragment instance");
+		}
+		instance.identify(key);
+		state.instances[key] = instance;
+		keys.add(key);
+		mapped.push(instance);
+	}
+	state.mapped.set(mapped);
+	updateFragments(state, keys);
+}
+function initializeFragments(state) {
+	state.subscriber ??= state.array.subscribe((items) => {
+		handleItems(state, items);
+	});
 }
-
+function removeFragments$1(state) {
+	state.subscriber?.();
+	updateFragments(state);
+	state.subscriber = void 0;
+}
+function updateFragments(state, active) {
+	const next = {};
+	const previous = { ...state.instances };
+	const keys = Object.keys(previous);
+	const { length } = keys;
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (active?.has(key)) next[key] = previous[key];
+		else previous[key].remove();
+	}
+	state.instances = next;
+	active?.clear();
+}
+const states = /* @__PURE__ */ new WeakMap();
+function isChildNode(value) {
+	return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
+}
+var CHILD_NODE_TYPES = new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
 function createNodes(value) {
-    if (isFragment(value)) {
-        return value.get();
-    }
-    if (isChildNode(value)) {
-        return [value];
-    }
-    return [new Text(getString$1(value))];
+	if (isFragment(value)) return value.get();
+	if (isChildNode(value)) return [value];
+	return [new Text(getString$1(value))];
 }
 function removeNodes(nodes) {
-    sanitizeNodes(nodes);
-    const { length } = nodes;
-    for (let index = 0; index < length; index += 1) {
-        nodes[index].remove();
-    }
+	const { length } = nodes;
+	for (let index = 0; index < length; index += 1) nodes[index].remove();
 }
 function replaceNodes(from, to) {
-    from[0]?.replaceWith(...to);
-    const { length } = from;
-    for (let index = 1; index < length; index += 1) {
-        from[index].remove();
-    }
-}
-function sanitizeNodes(nodes) {
-    const { length } = nodes;
-    for (let index = 0; index < length; index += 1) {
-        const node = nodes[index];
-        if (isHTMLOrSVGElement(node)) {
-            removeEvents(node);
-        }
-        if (node.hasChildNodes()) {
-            sanitizeNodes([...node.childNodes]);
-        }
-    }
-}
-
+	from[0]?.replaceWith(...to);
+	const { length } = from;
+	for (let index = 1; index < length; index += 1) from[index].remove();
+}
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+function addDelegatedHandler(doc, type, name, passive) {
+	if (DELEGATED.has(name)) return;
+	DELEGATED.add(name);
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
+}
+function addDelegatedListener(target, type, name, listener, passive) {
+	target[name] ??= /* @__PURE__ */ new Set();
+	target[name].add(listener);
+	addDelegatedHandler(document, type, name, passive);
+	return () => {
+		removeDelegatedListener(target, name, listener);
+	};
+}
+function delegatedEventHandler(event) {
+	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+	const items = event.composedPath();
+	const { length } = items;
+	let target = items[0];
+	Object.defineProperties(event, {
+		currentTarget: {
+			configurable: true,
+			get() {
+				return target;
+			}
+		},
+		target: {
+			configurable: true,
+			value: target
+		}
+	});
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const listeners = item[key];
+		if (item.disabled || listeners == null) continue;
+		target = item;
+		for (const listener of listeners) {
+			listener.call(item, event);
+			if (event.cancelBubble) return;
+		}
+	}
+}
+function getDelegatedName(target, type, options) {
+	if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+}
+function removeDelegatedListener(target, name, listener) {
+	const handlers = target[name];
+	if (handlers == null || !handlers.has(listener)) return false;
+	handlers.delete(listener);
+	if (handlers.size === 0) target[name] = void 0;
+	return true;
+}
+var DELEGATED = /* @__PURE__ */ new Set();
+var EVENT_PREFIX = "@";
+var EVENT_SUFFIX_ACTIVE = ":active";
+var EVENT_SUFFIX_PASSIVE = ":passive";
+var EVENT_TYPES = new Set([
+	"beforeinput",
+	"click",
+	"dblclick",
+	"contextmenu",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown",
+	"keyup",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"pointerdown",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointerup",
+	"touchend",
+	"touchmove",
+	"touchstart"
+]);
+var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+function noop() {}
+function calculate() {
+	return new Promise((resolve) => {
+		const values = [];
+		let last;
+		function step(now) {
+			if (last != null) values.push(now - last);
+			last = now;
+			if (values.length >= CALCULATION_TOTAL) resolve(values.sort().slice(CALCULATION_TRIM_PART, -CALCULATION_TRIM_PART).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM_TOTAL));
+			else requestAnimationFrame(step);
+		}
+		requestAnimationFrame(step);
+	});
+}
+var CALCULATION_TOTAL = 10;
+var CALCULATION_TRIM_PART = 2;
+var CALCULATION_TRIM_TOTAL = 4;
+calculate().then((value) => {});
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal instanceof AbortSignal ? options.signal : void 0
+	};
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	const delegated = getDelegatedName(target, type, extended);
+	if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
+	target.addEventListener(type, listener, extended);
+	if (extended.once) return noop;
+	return () => {
+		target.removeEventListener(type, listener, extended);
+	};
+}
+function getOptions(options) {
+	const parts = options.split(":");
+	return {
+		capture: parts.some((part) => EXPRESSION_EVENT_OPTIONS_CAPTURE.test(part)),
+		once: parts.some((part) => EXPRESSION_EVENT_OPTIONS_ONCE.test(part)),
+		passive: !parts.some((part) => EXPRESSION_EVENT_OPTIONS_ACTIVE.test(part))
+	};
+}
+function getType(element, type) {
+	if (type !== "on") return type;
+	if (element instanceof HTMLInputElement) {
+		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return "change";
+		return element.type === "submit" ? "submit" : "input";
+	}
+	return EVENT_DEFAULTS[element.tagName] ?? type;
+}
+function mapEvent(element, name, value) {
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
+	if (type != null && typeof value === "function") on(element, getType(element, type), value, getOptions(options ?? ""));
+}
+function isBooleanAttribute(first) {
+	return _isBooleanAttribute(first, true);
+}
+function getCallback(element, name) {
+	if (isBooleanAttribute(name) && name in element) return name === "checked" ? updateChecked : updateProperty;
+	return name === "value" ? updateValue : setAttribute$1;
+}
 function setAttribute(data, element, name, value) {
-    element.removeAttribute(name);
-    switch (true) {
-        case EXPRESSION_ATTRIBUTE_CLASS.test(name):
-            setClasses(data, element, name, value);
-            return;
-        case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
-            setStyle(data, element, name, value);
-            return;
-        default:
-            setValue(data, element, name, value);
-            break;
-    }
+	switch (true) {
+		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
+			setClasses(data, element, name, value);
+			return;
+		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
+			setStyle(data, element, name, value);
+			return;
+		default:
+			setValue(data, element, name, value);
+			break;
+	}
 }
 function setClasses(data, element, name, value) {
-    function update(value) {
-        if (value === true) {
-            element.classList.add(...classes);
-        }
-        else {
-            element.classList.remove(...classes);
-        }
-    }
-    const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
-    if (isReactive(value)) {
-        data.mora.subscribers.add(value.subscribe(update));
-    }
-    else {
-        update(value);
-    }
+	function update(value$1) {
+		if (value$1 === true) element.classList.add(...classes);
+		else element.classList.remove(...classes);
+	}
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(".");
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
+	else update(value);
 }
 function setStyle(data, element, name, value) {
-    const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
-    if (property == null) {
-        return;
-    }
-    function update(value) {
-        if (value == null || value === false || (value === true && unit == null)) {
-            element.style.removeProperty(property);
-        }
-        else {
-            element.style.setProperty(property, value === true ? unit : getString$1(value));
-        }
-    }
-    if (isReactive(value)) {
-        data.mora.subscribers.add(value.subscribe(update));
-    }
-    else {
-        update(value);
-    }
+	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
+	if (property == null) return;
+	function update(value$1) {
+		if (value$1 == null || value$1 === false || value$1 === true && unit == null) element.style.removeProperty(property);
+		else element.style.setProperty(property, value$1 === true ? unit : String(value$1));
+	}
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
+	else update(value);
 }
 function setValue(data, element, name, value) {
-    let callback;
-    if (isBooleanAttribute(name) && name in element) {
-        callback = name === 'selected' ? updateSelected : updateProperty;
-    }
-    else {
-        callback = setAttribute$1;
-    }
-    if (isReactive(value)) {
-        data.mora.subscribers.add(value.subscribe(next => {
-            callback(element, name, next);
-        }));
-    }
-    else {
-        callback(element, name, value);
-    }
+	const callback = getCallback(element, name);
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
+		callback(element, name, next);
+	}));
+	else callback(element, name, value);
+}
+function updateChecked(element, name, value) {
+	updateElement("change", "checked", element, name, value, value === true);
+}
+function updateElement(event, property, element, name, value, next) {
+	if (!(property in element) || element[property] === next) return;
+	setAttribute$1(element, name, value);
+	element[property] = next;
+	element.dispatchEvent(new Event(event, { bubbles: true }));
 }
 function updateProperty(element, name, value) {
-    element[name] = value === true;
+	setProperty(element, name, value === true);
 }
-function updateSelected(element, name, value) {
-    const select = element.closest('select');
-    const options = [...(select?.options ?? [])];
-    if (select != null && options.includes(element)) {
-        select.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-    updateProperty(element, name, value);
+function updateValue(element, name, value) {
+	updateElement(element instanceof HTMLSelectElement ? "change" : "input", "value", element, name, value, String(value));
 }
-
 function getValue(data, original) {
-    const matches = EXPRESSION_COMMENT_FULL.exec(original ?? '');
-    return matches == null ? original : data.values[+matches[1]];
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? "");
+	return matches == null ? original : data.values[+matches[1]];
 }
 function mapAttributes(data, element) {
-    const attributes = [...element.attributes];
-    const { length } = attributes;
-    for (let index = 0; index < length; index += 1) {
-        const { name, value } = attributes[index];
-        const actual = getValue(data, value);
-        switch (true) {
-            case name.startsWith('@'):
-                mapEvent(element, name, actual);
-                break;
-            case name.includes('.') ||
-                typeof actual === 'function' ||
-                isReactive(actual):
-                mapValue$1(data, element, name, actual);
-                break;
-            case isBooleanAttribute(name):
-                setProperty(element, name, value);
-                break;
-        }
-    }
+	const attributes = [...element.attributes];
+	const { length } = attributes;
+	for (let index = 0; index < length; index += 1) {
+		const { name, value } = attributes[index];
+		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, "");
+		const actualValue = getValue(data, value);
+		if (actualName !== name) element.removeAttribute(name);
+		switch (true) {
+			case EXPRESSION_EVENT_PREFIX.test(actualName):
+				mapEvent(element, actualName, actualValue);
+				break;
+			case EXPRESSION_PERIOD.test(actualName):
+			case typeof actualValue === "function":
+			case isReactive(actualValue):
+				mapValue$1(data, element, actualName, actualValue);
+				break;
+			default: break;
+		}
+	}
 }
 function mapValue$1(data, element, name, value) {
-    if (typeof value === 'function') {
-        setComputedAttribute(data, element, name, value);
-    }
-    else {
-        setAttribute(data, element, name, value);
-    }
+	if (typeof value === "function") setComputedAttribute(data, element, name, value);
+	else setAttribute(data, element, name, value);
 }
 function setComputedAttribute(data, element, name, callback) {
-    const value = computed(callback);
-    data.mora.values.add(value);
-    setAttribute(data, element, name, value);
+	const value = computed(callback);
+	data.mora.values.add(value);
+	setAttribute(data, element, name, value);
 }
-
-//
 function addToArray(identifiers, items, nodes, added) {
-    let position = nodes[0];
-    const before = added && !identifiers.previous.includes(items.templates[0].identifier);
-    const next = items.next.flatMap(fragment => fragment.get().flatMap(node => ({
-        identifier: fragment.identifier,
-        value: node,
-    })));
-    const { length } = next;
-    for (let index = 0; index < length; index += 1) {
-        const node = next[index];
-        if (!(added && identifiers.previous.includes(node.identifier))) {
-            if (index === 0 && before) {
-                position.before(node.value);
-            }
-            else {
-                position.after(node.value);
-            }
-        }
-        position = node.value;
-    }
+	let position = nodes[0];
+	const before = added && !identifiers.previous.has(items.templates[0].identifier);
+	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
+		identifier: fragment.identifier,
+		value: node
+	})));
+	const { length } = next;
+	for (let index = 0; index < length; index += 1) {
+		const node = next[index];
+		if (!(added && identifiers.previous.has(node.identifier))) if (index === 0 && before) position.before(node.value);
+		else position.after(node.value);
+		position = node.value;
+	}
 }
 function handleArray(identifiers, items, nodes) {
-    const next = items.templates.map(template => items.fragments?.find(fragment => fragment.identifier === template.identifier) ?? template);
-    const comparison = compareArrays(items.fragments ?? [], items.templates);
-    if (comparison !== 'removed') {
-        addToArray(identifiers, { ...items, next }, nodes, comparison === 'added');
-    }
-    const toRemove = items.fragments?.filter(fragment => !identifiers.next.includes(fragment.identifier)) ?? [];
-    const { length } = toRemove;
-    for (let index = 0; index < length; index += 1) {
-        toRemove[index].remove();
-    }
-    return {
-        fragments: next,
-        nodes: next.flatMap(fragment => fragment.get()),
-    };
-}
-function removeFragments(fragments) {
-    if (fragments != null) {
-        const { length } = fragments;
-        for (let index = 0; index < length; index += 1) {
-            fragments[index].remove();
-        }
-    }
+	const next = items.templates.map((template) => items.fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
+	const comparison = compareArrays(items.fragments ?? [], items.templates);
+	if (comparison !== "removed") addToArray(identifiers, {
+		...items,
+		next
+	}, nodes, comparison === "added");
+	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
+	const { length } = toRemove;
+	for (let index = 0; index < length; index += 1) toRemove[index].remove();
+	return {
+		fragments: next,
+		nodes: next.flatMap((fragment) => fragment.get())
+	};
+}
+function removeFragments(fragments$1) {
+	if (fragments$1 != null) {
+		const { length } = fragments$1;
+		for (let index = 0; index < length; index += 1) fragments$1[index].remove();
+	}
+}
+function replaceText(item, comment, isNullable) {
+	let to;
+	if (isNullable) to = [comment];
+	else to = item.text == null ? [] : [item.text];
+	replaceNodes(item.nodes ?? [], to);
 }
 function setArray(item, comment, value) {
-    if (value.length === 0) {
-        return {
-            nodes: setText(item, comment, value),
-        };
-    }
-    let templates = value.filter(item => isFragment(item) && item.identifier != null);
-    const next = templates.map(fragment => fragment.identifier);
-    const previous = item.fragments?.map(fragment => fragment.identifier) ?? [];
-    if (new Set(next).size !== templates.length) {
-        templates = [];
-    }
-    const noTemplates = templates.length === 0;
-    if (noTemplates ||
-        item.nodes == null ||
-        previous.some(identifier => identifier == null)) {
-        return {
-            fragments: noTemplates ? undefined : templates,
-            nodes: setNodes(item, comment, noTemplates
-                ? value.flatMap(item => createNodes(item))
-                : templates.flatMap(template => template.get())),
-        };
-    }
-    return handleArray({
-        next,
-        previous,
-    }, {
-        templates,
-        fragments: item.fragments ?? [],
-    }, item.nodes);
+	if (value.length === 0) return { nodes: setText(item, comment, value) };
+	let templates$1 = value.filter((item$1) => isFragment(item$1) && item$1.identifier != null);
+	const next = templates$1.map((fragment) => fragment.identifier);
+	const previous = item.fragments?.map((fragment) => fragment.identifier) ?? [];
+	if (new Set(next).size !== templates$1.length) templates$1 = [];
+	const noTemplates = templates$1.length === 0;
+	if (noTemplates || item.nodes == null || previous.some((identifier) => identifier == null)) return {
+		fragments: noTemplates ? void 0 : templates$1,
+		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item$1) => createNodes(item$1)) : templates$1.flatMap((template) => template.get()))
+	};
+	return handleArray({
+		next: new Set(next),
+		previous: new Set(previous)
+	}, {
+		templates: templates$1,
+		fragments: item.fragments ?? []
+	}, item.nodes);
 }
 function setNodes(item, comment, next) {
-    if (item.nodes == null) {
-        if (comment.parentNode != null) {
-            replaceNodes([comment], next);
-        }
-        else if (item.text?.parentNode != null) {
-            replaceNodes([item.text], next);
-        }
-    }
-    else {
-        replaceNodes(item.nodes, next);
-    }
-    removeFragments(item.fragments);
-    return next;
+	if (item.nodes == null) {
+		if (comment.parentNode != null) replaceNodes([comment], next);
+		else if (item.text?.parentNode != null) replaceNodes([item.text], next);
+	} else replaceNodes(item.nodes, next);
+	removeFragments(item.fragments);
+	return next;
 }
 function setReactiveValue(data, comment, reactive) {
-    let item = data.items.find(item => item.nodes?.includes(comment));
-    item ??= {};
-    item.text = new Text();
-    data.mora.subscribers.add(reactive.subscribe(value => {
-        if (Array.isArray(value)) {
-            setReactiveValueForArray(item, comment, value);
-        }
-        else {
-            setReactiveValueForSingle(item, comment, value);
-        }
-        item.nodes = [...(item.nodes ?? [comment])];
-    }));
+	let item = data.items.find((item$1) => item$1.nodes?.includes(comment));
+	item ??= {};
+	item.text = new Text();
+	data.mora.subscribers.add(reactive.subscribe((value) => {
+		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
+		else setReactiveValueForSingle(item, comment, value);
+		item.nodes = [...item.nodes ?? [comment]];
+	}));
 }
 function setReactiveValueForArray(item, comment, value) {
-    const result = setArray(item, comment, value);
-    item.fragments = typeof result === 'boolean' ? undefined : result?.fragments;
-    if (typeof result === 'boolean') {
-        item.nodes = result ? item.text == null ? [] : [item.text] : undefined;
-    }
-    else {
-        item.nodes = result?.nodes;
-    }
+	const result = setArray(item, comment, value);
+	item.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
+	if (typeof result === "boolean") if (result) item.nodes = item.text == null ? [] : [item.text];
+	else item.nodes = void 0;
+	else item.nodes = result?.nodes;
 }
 function setReactiveValueForSingle(item, comment, value) {
-    const valueIsFragment = isFragment(value);
-    item.fragments = valueIsFragment ? [value] : undefined;
-    if (valueIsFragment || isChildNode(value)) {
-        item.nodes = setNodes(item, comment, createNodes(value));
-    }
-    else {
-        item.nodes = setText(item, comment, value);
-    }
+	const valueIsFragment = isFragment(value);
+	item.fragments = valueIsFragment ? [value] : void 0;
+	if (valueIsFragment || isChildNode(value)) item.nodes = setNodes(item, comment, createNodes(value));
+	else item.nodes = setText(item, comment, value);
 }
 function setText(item, comment, value) {
-    const isNullable = isNullableOrWhitespace(value);
-    if (item.text != null) {
-        item.text.textContent = isNullable ? '' : getString$1(value);
-    }
-    let result = false;
-    if (item.nodes != null) {
-        replaceNodes(item.nodes, isNullable ? [comment] : item.text == null ? [] : [item.text]);
-        result = !isNullable;
-    }
-    else if (isNullable && comment.parentNode == null) {
-        item.text?.replaceWith(comment);
-    }
-    else if (!isNullable && item?.text?.parentNode == null) {
-        if (item.text != null) {
-            comment.replaceWith(item.text);
-        }
-        result = true;
-    }
-    removeFragments(item.fragments);
-    return result ? item.text == null ? [] : [item.text] : undefined;
-}
-
+	const isNullable = isNullableOrWhitespace(value);
+	if (item.text != null) item.text.textContent = isNullable ? "" : getString$1(value);
+	let result = false;
+	if (item.nodes != null) {
+		replaceText(item, comment, isNullable);
+		result = !isNullable;
+	} else if (isNullable && comment.parentNode == null) item.text?.replaceWith(comment);
+	else if (!isNullable && item?.text?.parentNode == null) {
+		if (item.text != null) comment.replaceWith(item.text);
+		result = true;
+	}
+	removeFragments(item.fragments);
+	if (result) return item.text == null ? [] : [item.text];
+}
 function mapNode(data, comment) {
-    const matches = EXPRESSION_COMMENT_CONTENT.exec(comment.textContent ?? '');
-    const value = matches == null ? null : data.values[+matches[1]];
-    if (value != null) {
-        mapValue(data, comment, value);
-    }
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent ?? "");
+	const value = matches == null ? null : data.values[+matches[1]];
+	if (value != null) mapValue(data, comment, value);
 }
 function mapNodes(data, nodes) {
-    const { length } = nodes;
-    for (let index = 0; index < length; index += 1) {
-        const node = nodes[index];
-        if (node instanceof Comment) {
-            mapNode(data, node);
-            continue;
-        }
-        if (isHTMLOrSVGElement(node)) {
-            mapAttributes(data, node);
-        }
-        if (node.hasChildNodes()) {
-            mapNodes(data, [...node.childNodes]);
-        }
-    }
+	const { length } = nodes;
+	for (let index = 0; index < length; index += 1) {
+		const node = nodes[index];
+		if (node instanceof Comment) {
+			mapNode(data, node);
+			continue;
+		}
+		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
+		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
+	}
 }
 function mapValue(data, comment, value) {
-    switch (true) {
-        case typeof value === 'function':
-            setComputedValue(data, comment, value);
-            break;
-        case isReactive(value):
-            setReactiveValue(data, comment, value);
-            break;
-        default:
-            replaceComment(data, comment, value);
-            break;
-    }
+	switch (true) {
+		case typeof value === "function":
+			setComputedValue(data, comment, value);
+			break;
+		case isFragments(value):
+			handleFragments(value, false);
+			setReactiveValue(data, comment, value.items);
+			break;
+		case isReactive(value):
+			setReactiveValue(data, comment, value);
+			break;
+		default:
+			replaceComment(data, comment, value);
+			break;
+	}
 }
 function replaceComment(data, comment, value) {
-    const item = data.items.find(item => item.nodes?.includes(comment));
-    const nodes = createNodes(value);
-    if (item != null) {
-        item.fragments = isFragment(value) ? [value] : undefined;
-        item.nodes = nodes;
-    }
-    comment.replaceWith(...nodes);
+	const item = data.items.find((item$1) => item$1.nodes?.includes(comment));
+	const nodes = createNodes(value);
+	if (item != null) {
+		item.fragments = isFragment(value) ? [value] : void 0;
+		item.nodes = nodes;
+	}
+	comment.replaceWith(...nodes);
 }
 function setComputedValue(data, comment, callback) {
-    const value = computed(callback);
-    data.mora.values.add(value);
-    setReactiveValue(data, comment, value);
+	const value = computed(callback);
+	data.mora.values.add(value);
+	setReactiveValue(data, comment, value);
 }
-
 function handleExpression(data, prefix, expression) {
-    if (Array.isArray(expression)) {
-        const { length } = expression;
-        let expressions = '';
-        for (let index = 0; index < length; index += 1) {
-            expressions += handleExpression(data, '', expression[index]);
-        }
-        return `${prefix}${expressions}`;
-    }
-    if (typeof expression === 'function' ||
-        (typeof expression === 'object' && expression != null)) {
-        const index = data.values.push(expression) - 1;
-        return `${prefix}<!--abydon.${index}-->`;
-    }
-    return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
+	if (Array.isArray(expression)) {
+		const { length } = expression;
+		let expressions = "";
+		for (let index = 0; index < length; index += 1) expressions += handleExpression(data, "", expression[index]);
+		return `${prefix}${expressions}`;
+	}
+	if (typeof expression === "function" || typeof expression === "object" && expression != null) return transformExpression(prefix, data.values.push(expression) - 1);
+	return isNullableOrWhitespace(expression) ? prefix : `${prefix}${expression}`;
 }
 function parse(data) {
-    if (data.template != null) {
-        return data.template;
-    }
-    const { length } = data.strings;
-    data.template = '';
-    for (let index = 0; index < length; index += 1) {
-        data.template += handleExpression(data, data.strings[index], data.expressions[index]);
-    }
-    data.expressions = [];
-    data.strings = [];
-    return data.template;
-}
-
-function calculate() {
-	return new Promise((resolve) => {
-		const values = [];
-		let last;
-		function step(now) {
-			if (last != null) values.push(now - last);
-			last = now;
-			if (values.length >= CALCULATION_TOTAL) resolve(values.sort().slice(2, -2).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM));
-			else requestAnimationFrame(step);
+	if (data.template != null) return data.template;
+	const { length } = data.strings;
+	data.template = "";
+	for (let index = 0; index < length; index += 1) data.template += handleExpression(data, data.strings[index], data.expressions[index]);
+	data.template = data.template.replaceAll(EXPRESSION_ABYDON_ATTRIBUTE_FULL, transformAttribute);
+	data.expressions = [];
+	data.strings = [];
+	return data.template;
+}
+function transformAttribute(_, name, index) {
+	return `_${name}="@abydon.${index}@"`;
+}
+function transformExpression(prefix, index) {
+	return `${prefix}<!--abydon.${index}-->`;
+}
+var Fragment = class {
+	#data;
+	#configuration = {
+		identifier: void 0,
+		cache: true
+	};
+	get identifier() {
+		return this.#configuration.identifier;
+	}
+	constructor(strings, expressions) {
+		Object.defineProperty(this, NAME_FRAGMENT, { value: true });
+		this.#data = {
+			expressions,
+			strings,
+			items: [],
+			mora: {
+				subscribers: /* @__PURE__ */ new Set(),
+				values: /* @__PURE__ */ new Set()
+			},
+			values: []
+		};
+	}
+	appendTo(element) {
+		element.append(...this.get());
+	}
+	configure(configuration) {
+		const actual = isPlainObject$1(configuration) ? configuration : {};
+		if ("identifier" in actual) this.#configuration.identifier = actual.identifier;
+		if (typeof actual.cache === "boolean") this.#configuration.cache = actual.cache;
+		return this;
+	}
+	get() {
+		const data = this.#data;
+		if (data.items.length === 0) {
+			const templated = html$1(parse(data), { cache: this.#configuration.cache });
+			data.items.splice(0, data.items.length, ...templated.map((node) => ({ nodes: [node] })));
+			mapNodes(data, data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []));
 		}
-		requestAnimationFrame(step);
-	});
-}
-var CALCULATION_TOTAL = 10;
-var CALCULATION_TRIM = 4;
-calculate().then((value) => {
-});
-
-class Fragment {
-    #data;
-    #configuration = {
-        identifier: undefined,
-        ignoreCache: false,
-    };
-    get identifier() {
-        return this.#configuration.identifier;
-    }
-    constructor(strings, expressions) {
-        this.#data = {
-            expressions,
-            strings,
-            items: [],
-            mora: {
-                subscribers: new Set(),
-                values: new Set(),
-            },
-            values: [],
-        };
-        Object.defineProperty(this, '$fragment', {
-            value: true,
-        });
-    }
-    /**
-     * Appends the fragment to the given element
-     */
-    appendTo(element) {
-        element.append(...this.get());
-    }
-    configure(configuration) {
-        const actual = isPlainObject$1(configuration) ? configuration : {};
-        if (actual.identifier !== undefined) {
-            this.#configuration.identifier = actual.identifier;
-        }
-        if (typeof actual.ignoreCache === 'boolean') {
-            this.#configuration.ignoreCache = actual.ignoreCache;
-        }
-        return this;
-    }
-    /**
-     * Gets a list of the fragment's nodes
-     */
-    get() {
-        const data = this.#data;
-        if (data.items.length === 0) {
-            const parsed = parse(data);
-            const templated = html$1(parsed, {
-                sanitizeBooleanAttributes: false,
-            });
-            if (this.#configuration.ignoreCache) {
-                html$1.remove(parsed);
-            }
-            data.items.splice(0, data.items.length, ...templated.map(node => ({
-                nodes: [node],
-            })));
-            mapNodes(data, data.items.flatMap(item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? []));
-        }
-        return [
-            ...data.items.flatMap(item => item.fragments?.flatMap(fragment => fragment.get()) ?? item.nodes ?? []),
-        ];
-    }
-    identify(identifier) {
-        this.#configuration.identifier = identifier;
-        return this;
-    }
-    /**
-     * Removes the fragment from the DOM
-     */
-    remove() {
-        removeFragment(this.#data);
-    }
-}
+		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []);
+	}
+	identify(identifier) {
+		this.#configuration.identifier = identifier;
+		return this;
+	}
+	remove() {
+		removeFragment(this.#data);
+	}
+};
 function removeFragment(data) {
-    removeMora(data);
-    const { length } = data.items;
-    for (let index = 0; index < length; index += 1) {
-        const { fragments, nodes } = data.items[index];
-        const length = fragments?.length ?? 0;
-        for (let index = 0; index < length; index += 1) {
-            fragments?.[index]?.remove();
-        }
-        removeNodes(nodes ?? []);
-    }
-    data.items.length = 0;
+	removeMora(data);
+	let { length } = data.items;
+	for (let index = 0; index < length; index += 1) {
+		const { fragments: fragments$1, nodes } = data.items[index];
+		const fragmentsLength = fragments$1?.length ?? 0;
+		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) fragments$1?.[fragmentIndex]?.remove();
+		removeNodes(nodes ?? []);
+	}
+	data.items.length = 0;
+	length = data.values.length;
+	for (let index = 0; index < length; index += 1) {
+		const value = data.values[index];
+		if (isFragments(value)) handleFragments(value, true);
+	}
 }
 function removeMora(data) {
-    const unsubscribers = [...data.mora.subscribers];
-    data.mora.subscribers.clear();
-    data.mora.values.clear();
-    for (const unsubscribe of unsubscribers) {
-        unsubscribe();
-    }
-}
-
-function html(strings, ...values) {
-    return new Fragment(strings, values);
-}
-
-export { array, computed, effect, html, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch, store };
+	const unsubscribers = [...data.mora.subscribers];
+	data.mora.subscribers.clear();
+	data.mora.values.clear();
+	for (const unsubscribe$1 of unsubscribers) unsubscribe$1();
+}
+function fragments(array$1, identify, fragment) {
+	return new Fragments(array$1, identify, fragment);
+}
+function html(template, ...values) {
+	return new Fragment(template, values);
+}
+export { array, computed, effect, fragments, html, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch, store };