@oscarpalmer/abydon 0.19.0 → 0.21.0

package/dist/abydon.full.mjs

@@ -215,18 +215,10 @@ var Computed = class extends Reactive {
 	constructor(callback, options) {
 		super(NAME_COMPUTED, void 0, options);
 		this.effect.instance = effect(() => {
-			if (!this.effect.dirty) return;
-			const previousComputed = ACTIVE.computed;
-			ACTIVE.computed = this;
-			const value = callback();
-			ACTIVE.computed = previousComputed;
-			if (!this.state.equal(this.state.value, value)) {
-				this.state.value = value;
-				for (const computed of this.state.computeds) computed.effect.dirty = true;
-				for (const effect of this.state.effects) BATCH.handlers.add(effect);
-				for (const [, subscription] of this.state.subscriptions) subscription.callback(value);
+			if (this.effect.dirty) {
+				setValue$2(this, this.state, callback);
+				this.effect.dirty = false;
 			}
-			this.effect.dirty = false;
 		});
 	}
 	/**
@@ -248,6 +240,34 @@ var Computed = class extends Reactive {
 function computed(callback, options) {
 	return new Computed(callback, options);
 }
+function setAndEmit$1(state, value) {
+	if (state.equal(state.value, value)) return;
+	state.value = value;
+	for (const computed of state.computeds) computed.effect.dirty = true;
+	for (const effect of state.effects) BATCH.handlers.add(effect);
+	for (const [, subscription] of state.subscriptions) subscription.callback(value);
+	flushHandlers();
+}
+function setValue$2(instance, state, callback) {
+	const previousComputed = ACTIVE.computed;
+	ACTIVE.computed = instance;
+	try {
+		const value = callback();
+		if (value instanceof Promise) {
+			state.promise = value;
+			value.then((resolvedValue) => {
+				if (state.promise === value) {
+					state.promise = void 0;
+					setAndEmit$1(state, resolvedValue);
+				}
+			}).catch(() => {
+				if (state.promise === value) state.promise = void 0;
+			});
+		} else setAndEmit$1(state, value);
+	} finally {
+		ACTIVE.computed = previousComputed;
+	}
+}
 //#endregion
 //#region node_modules/@oscarpalmer/mora/dist/helpers/value.mjs
 function emitValue(state) {
@@ -291,10 +311,7 @@ var Signal = class extends Reactive {
 	* @param value New value
 	*/
 	set(value) {
-		if (!this.state.equal(this.state.value, value)) {
-			this.state.value = value;
-			emitValue(this.state);
-		}
+		setValue$1(this.state, value);
 	}
 	/**
 	* Update the value _(based on the current value)_
@@ -304,14 +321,33 @@ var Signal = class extends Reactive {
 		this.set(callback(this.state.value));
 	}
 };
-/**
-* Create a reactive value
-* @param value Initial value
-* @param options Reactivity options
-* @returns Reactive value
-*/
+function setAndEmit(state, value) {
+	if (!state.equal(state.value, value)) {
+		state.value = value;
+		emitValue(state);
+	}
+}
+function setValue$1(state, value) {
+	try {
+		let actual = value;
+		if (typeof value === "function") actual = value();
+		if (actual instanceof Promise) {
+			state.promise = actual;
+			actual.then((value) => {
+				if (actual === state.promise) {
+					state.promise = void 0;
+					setAndEmit(state, value);
+				}
+			}).catch(() => {
+				if (actual === state.promise) state.promise = void 0;
+			});
+		} else setAndEmit(state, actual);
+	} catch {}
+}
 function signal(value, options) {
-	return new Signal(value, options);
+	const instance = new Signal(void 0, options);
+	instance.set(value);
+	return instance;
 }
 //#endregion
 //#region node_modules/@oscarpalmer/mora/dist/helpers/proxy.mjs
@@ -329,21 +365,44 @@ function getReactiveValueInProxy(reactive, mapped, key, isArray) {
 	}
 	return item;
 }
-function setProxyValue(proxy, value) {
-	startBatch();
-	const proxyKeys = Object.keys(proxy);
-	const valueKeys = Object.keys(value);
-	let { length } = proxyKeys;
-	for (let index = 0; index < length; index += 1) {
-		const key = proxyKeys[index];
-		proxy[key] = valueKeys.includes(key) ? value[key] : void 0;
+function setProxyValue(array, state, isObject, isProperty, setObject, setProperty, first, second) {
+	if (array && first === "length") {
+		state.value.length = second;
+		return;
 	}
-	length = valueKeys.length;
-	for (let index = 0; index < length; index += 1) {
-		const key = valueKeys[index];
-		if (!proxyKeys.includes(key)) proxy[key] = value[key];
+	if (isObject(first)) {
+		setObject(state, first);
+		return;
 	}
-	stopBatch();
+	const property = isProperty(first);
+	if (array && property && Number.isNaN(first)) return;
+	let actual = property ? second : first;
+	if (typeof actual === "function") try {
+		actual = actual();
+	} catch {
+		return;
+	}
+	if (actual instanceof Promise) {
+		if (property) {
+			state.promises ??= /* @__PURE__ */ new Map();
+			state.promises.set(first, actual);
+		} else state.promise = actual;
+		actual.then((value) => {
+			if (property && state.promises.get(first) === actual) {
+				state.promises.delete(first);
+				setProperty(state, first, value);
+				return;
+			}
+			if (!property && isObject(value) && state.promise === actual) {
+				state.promise = void 0;
+				setObject(state, value);
+			}
+		}).catch(() => {
+			if (property && state.promises.get(first) === actual) state.promises.delete(first);
+			else if (!property && state.promise === actual) state.promise = void 0;
+		});
+	} else if (property) setProperty(state, first, actual);
+	else if (isObject(actual)) setObject(state, actual);
 }
 function setValueInProxy(parameters) {
 	const { isArray, length, property, state, target, value } = parameters;
@@ -426,7 +485,7 @@ var ReactiveArray = class extends Reactive {
 	}
 	peek(value) {
 		if (value === "length") return this.#size.peek();
-		return typeof value === "number" ? this.state.value.at(value) : [...this.state.value];
+		return typeof value === "number" ? this.state.value.at(value) : this.state.value.slice();
 	}
 	/**
 	* Remove and return the last item of the array
@@ -444,9 +503,7 @@ var ReactiveArray = class extends Reactive {
 		return this.state.value.push(...items);
 	}
 	set(first, second) {
-		if (first == null || Array.isArray(first)) this.state.value.splice(0, this.state.value.length, ...first ?? []);
-		else if (first === "length") this.length = second;
-		else if (typeof first === "number" && !Number.isNaN(first)) setAtIndex(this.state.value, first, second);
+		setProxyValue(true, this.state, isArrayValue, isArrayIndex, setArray$1, setAtIndex, first, second);
 	}
 	/**
 	* Remove and return the first item of the array
@@ -486,18 +543,20 @@ var ReactiveArray = class extends Reactive {
 		if (updated == null || Array.isArray(updated)) this.set(updated);
 	}
 };
-/**
-* Create a reactive array
-* @param value Initial array of items
-* @param options Reactivity options
-* @returns Reactive array
-*/
 function array(value, options) {
-	return new ReactiveArray(Array.isArray(value) ? value : [], options);
+	const instance = new ReactiveArray([], options);
+	instance.set(value);
+	return instance;
+}
+function isArrayIndex(value) {
+	return typeof value === "number";
+}
+function isArrayValue(value) {
+	return value == null || Array.isArray(value);
 }
 function updateArray(type, array, state, length) {
 	const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
-	const previousArray = affectsLength ? [] : [...array];
+	const previousArray = affectsLength ? [] : array.slice();
 	const previousLength = array.length;
 	return (...args) => {
 		const result = array[type](...args);
@@ -508,12 +567,15 @@ function updateArray(type, array, state, length) {
 		return result;
 	};
 }
-function setAtIndex(array, index, value) {
-	const actual = index < 0 ? array.length + index : index;
-	if (actual > -1) array[actual] = value;
+function setArray$1(state, value) {
+	state.value.splice(0, state.value.length, ...value ?? []);
+}
+function setAtIndex(state, index, value) {
+	const actual = index < 0 ? state.value.length + index : index;
+	if (actual > -1) state.value[actual] = value;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
+//#region node_modules/@oscarpalmer/mora/node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
 /**
 * Is the value a key?
 * @param value Value to check
@@ -527,39 +589,13 @@ function isKey(value) {
 * @param value Value to check
 * @returns `true` if the value is a plain object, otherwise `false`
 */
-function isPlainObject(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;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
-/**
-* Get the string value from any value
-* @param value Original value
-* @returns String representation of the value
-*/
-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;
-}
-//#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/is.mjs
-/**
-* Is the value `undefined`, `null`, or a whitespace-only string?
-* @param value Value to check
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
-*/
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
-}
-const EXPRESSION_WHITESPACE$1 = /^\s*$/;
-//#endregion
 //#region node_modules/@oscarpalmer/mora/dist/value/store.mjs
 var Store = class extends Reactive {
 	#keyed = /* @__PURE__ */ new Map();
@@ -588,8 +624,7 @@ var Store = class extends Reactive {
 		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(first)) setProxyValue(this.state.value, first ?? {});
+		setProxyValue(false, this.state, isStoreObject, isKey, setObject, setProperty, first, second);
 	}
 	subscribe(first, second) {
 		if (isKey(first) && typeof second === "function") return getReactiveValueInProxy(this, this.#keyed, first, false).subscribe(second);
@@ -600,20 +635,79 @@ var Store = class extends Reactive {
 	* @param callback Callback to update the value
 	*/
 	update(callback) {
-		const updated = callback({ ...this.state.value });
-		if (updated == null || isPlainObject(updated)) setProxyValue(this.state.value, updated ?? {});
+		const updated = callback(this.state.value);
+		if (updated == null || isPlainObject$2(updated)) setObject(this.state, updated);
 	}
 };
+function isStoreObject(value) {
+	return value == null || isPlainObject$2(value);
+}
+function setObject(state, value) {
+	startBatch();
+	const actual = value ?? {};
+	const proxy = state.value;
+	const proxyKeys = Object.keys(proxy);
+	const actualKeys = Object.keys(actual);
+	let { length } = proxyKeys;
+	for (let index = 0; index < length; index += 1) {
+		const key = proxyKeys[index];
+		proxy[key] = actualKeys.includes(key) ? actual[key] : void 0;
+	}
+	length = actualKeys.length;
+	for (let index = 0; index < length; index += 1) {
+		const key = actualKeys[index];
+		if (!proxyKeys.includes(key)) proxy[key] = actual[key];
+	}
+	stopBatch();
+}
+function setProperty(state, key, value) {
+	state.value[key] = value;
+}
+function store(value, options) {
+	const instance = new Store({}, options);
+	instance.set(value);
+	return instance;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
 /**
-* Create a reactive store
-* @param value Initial object value
-* @param options Reactivity options
-* @returns Reactive store
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
 */
-function store(value, options) {
-	return new Store(isPlainObject(value) ? value : {}, options);
+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;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
+/**
+* Get the string value from any value
+* @param value Original value
+* @returns String representation of the value
+*/
+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;
 }
 //#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/is.mjs
+/**
+* Is the value `undefined`, `null`, or stringified as a whitespace-only string?
+* @param value Value to check
+* @returns `true` if the value is nullable or matches a whitespace-only string, otherwise `false`
+*/
+function isNullableOrWhitespace$1(value) {
+	return value == null || EXPRESSION_WHITESPACE$2.test(getString$1(value));
+}
+const EXPRESSION_WHITESPACE$2 = /^\s*$/;
+//#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/is.mjs
 /**
 * Is the value an event target?
@@ -649,6 +743,341 @@ const CHILD_NODE_TYPES = new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 //#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
+/**
+* Is the value a number?
+* @param value Value to check
+* @returns `true` if the value is a `number`, otherwise `false`
+*/
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+/**
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+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;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/array/compact.mjs
+function compact(array, strict) {
+	if (!Array.isArray(array)) return [];
+	if (strict === true) return array.filter(Boolean);
+	const { length } = array;
+	const compacted = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		if (item != null) compacted.push(item);
+	}
+	return compacted;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
+/**
+* Get the string value from any value
+* @param value Original value
+* @returns String representation of the value
+*/
+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;
+}
+/**
+* Join an array of values into a string
+* @param value Array of values
+* @param delimiter Delimiter to use between values
+* @returns Joined string
+*/
+function join(value, delimiter) {
+	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
+}
+/**
+* Split a string into words _(and other readable parts)_
+* @param value Original string
+* @returns Array of words found in the string
+*/
+function words(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
+}
+const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/is.mjs
+/**
+* Is the value `undefined`, `null`, or a whitespace-only string?
+* @param value Value to check
+* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
+*/
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
+}
+const EXPRESSION_WHITESPACE$1 = /^\s*$/;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
+/**
+* Clamp a number between a minimum and maximum value
+* @param value Value to clamp
+* @param minimum Minimum value
+* @param maximum Maximum value
+* @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
+* @returns Clamped value
+*/
+function clamp(value, minimum, maximum, loop) {
+	if (![
+		value,
+		minimum,
+		maximum
+	].every(isNumber)) return NaN;
+	if (value < minimum) return loop === true ? maximum : minimum;
+	return value > maximum ? loop === true ? minimum : maximum : value;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
+function getSizedMaximum(first, second) {
+	let actual;
+	if (typeof first === "number") actual = first;
+	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT;
+	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
+}
+const MAXIMUM_ABSOLUTE = 16777216;
+const MAXIMUM_DEFAULT = 1048576;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
+/**
+* A Map with a maximum size
+*
+* Behavior is similar to a _LRU_-cache, where the least recently used entries are removed
+*/
+var SizedMap = class extends Map {
+	/**
+	* The maximum size of the Map
+	*/
+	#maximumSize;
+	/**
+	* Is the Map full?
+	*/
+	get full() {
+		return super.size >= this.#maximumSize;
+	}
+	get maximum() {
+		return this.#maximumSize;
+	}
+	constructor(first, second) {
+		const maximum = getSizedMaximum(first, second);
+		super();
+		this.#maximumSize = maximum;
+		if (Array.isArray(first)) {
+			const { length } = first;
+			if (length <= maximum) for (let index = 0; index < length; index += 1) this.set(...first[index]);
+			else for (let index = 0; index < maximum; index += 1) this.set(...first[length - maximum + index]);
+		}
+	}
+	/**
+	* @inheritdoc
+	*/
+	get(key) {
+		if (super.has(key)) {
+			const value = super.get(key);
+			this.#setValue(key, value, true);
+			return value;
+		}
+	}
+	/**
+	* @inheritdoc
+	*/
+	set(key, value) {
+		return this.#setValue(key, value, super.has(key));
+	}
+	#setValue(key, value, has) {
+		if (has) super.delete(key);
+		else if (super.size >= this.#maximumSize) super.delete(super.keys().next().value);
+		super.set(key, value);
+		return this;
+	}
+};
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+var Memoized = class {
+	#state;
+	/**
+	* Maximum cache size
+	*/
+	get maximum() {
+		return this.#state.cache?.maximum ?? NaN;
+	}
+	/**
+	* Current cache size
+	*/
+	get size() {
+		return this.#state.cache?.size ?? NaN;
+	}
+	constructor(callback, options) {
+		const cache = new SizedMap(options.cacheSize);
+		const getter = (...parameters) => {
+			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join(parameters.map(getString), SEPARATOR));
+			if (cache.has(key)) return cache.get(key);
+			const value = callback(...parameters);
+			cache.set(key, value);
+			return value;
+		};
+		this.#state = {
+			cache,
+			getter
+		};
+	}
+	/**
+	* Clear the cache
+	*/
+	clear() {
+		this.#state.cache?.clear();
+	}
+	/**
+	* Delete a result from the cache
+	* @param key Key to delete
+	* @returns `true` if the key existed and was removed, otherwise `false`
+	*/
+	delete(key) {
+		return this.#state.cache?.delete(key) ?? false;
+	}
+	/**
+	* Destroy the instance _(clearing its cache and removing its callback)_
+	*/
+	destroy() {
+		this.#state.cache?.clear();
+		this.#state.cache = void 0;
+		this.#state.getter = void 0;
+	}
+	/**
+	* Get a result from the cache
+	* @param key Key to get
+	* @returns Cached result or `undefined` if it does not exist
+	*/
+	get(key) {
+		return this.#state.cache?.get(key);
+	}
+	/**
+	* Does the result exist?
+	* @param key Key to check
+	* @returns `true` if the result exists, otherwise `false`
+	*/
+	has(key) {
+		return this.#state.cache?.has(key) ?? false;
+	}
+	/**
+	* Run the callback with the provided parameters
+	* @param parameters Parameters to pass to the callback
+	* @returns Cached or computed _(then cached)_ result
+	*/
+	run(...parameters) {
+		if (this.#state.cache == null || this.#state.getter == null) throw new Error("The Memoized instance has been destroyed");
+		return this.#state.getter(...parameters);
+	}
+};
+function getMemoizationOptions(input) {
+	const { cacheKey, cacheSize } = isPlainObject(input) ? input : {};
+	return {
+		cacheKey: typeof cacheKey === "function" ? cacheKey : void 0,
+		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE
+	};
+}
+/**
+* Memoize a function, caching and retrieving results based on the first parameter
+* @param callback Callback to memoize
+* @param options Memoization options
+* @returns Memoized instance
+*/
+function memoize(callback, options) {
+	return new Memoized(callback, getMemoizationOptions(options));
+}
+const DEFAULT_CACHE_SIZE = 1024;
+const SEPARATOR = "_";
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/string/case.mjs
+/**
+* Convert a string to camel case _(thisIsCamelCase)_
+* @param value String to convert
+* @returns Camel-cased string
+*/
+function camelCase(value) {
+	return toCase(CASE_CAMEL, value, true, false);
+}
+/**
+* Capitalize the first letter of a string _(and lowercase the rest)_
+* @param value String to capitalize
+* @returns Capitalized string
+*/
+function capitalize(value) {
+	if (typeof value !== "string" || value.length === 0) return "";
+	memoizedCapitalize ??= memoize((v) => v.length === 1 ? v.toLocaleUpperCase() : `${v.charAt(0).toLocaleUpperCase()}${v.slice(1).toLocaleLowerCase()}`);
+	return memoizedCapitalize.run(value);
+}
+/**
+* Convert a string to kebab case _(this-is-kebab-case)_
+* @param value String to convert
+* @returns Kebab-cased string
+*/
+function kebabCase(value) {
+	return toCase(CASE_KEBAB, value, false, false);
+}
+function toCase(type, value, capitalizeAny, capitalizeFirst) {
+	caseMemoizers[type] ??= memoize(toCaseCallback.bind({
+		type,
+		capitalizeAny,
+		capitalizeFirst
+	}));
+	return caseMemoizers[type].run(value);
+}
+function toCaseCallback(value) {
+	if (typeof value !== "string") return "";
+	if (value.length < 1) return value;
+	const { capitalizeAny, capitalizeFirst, type } = this;
+	const parts = words(value);
+	const partsLength = parts.length;
+	const cased = [];
+	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
+		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === S ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, REPLACEMENT_CAMEL_CASE).split("-");
+		const itemsLength = items.length;
+		const partResult = [];
+		let itemCount = 0;
+		for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = items[itemIndex];
+			if (item.length === 0) continue;
+			if (!capitalizeAny || itemCount === 0 && partIndex === 0 && !capitalizeFirst) partResult.push(item.toLocaleLowerCase());
+			else partResult.push(capitalize(item));
+			itemCount += 1;
+		}
+		cased.push(join(partResult, delimiters[type]));
+	}
+	return join(cased, delimiters[type]);
+}
+const CASE_CAMEL = "camel";
+const CASE_KEBAB = "kebab";
+const CASE_PASCAL = "pascal";
+const CASE_SNAKE = "snake";
+const DELIMTER_EMPTY = "";
+const DELIMITER_HYPHEN = "-";
+const DELIMITER_UNDERSCORE = "_";
+const EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
+const EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
+const REPLACEMENT_CAMEL_CASE = "$1-$2";
+const S = "s";
+const caseMemoizers = {};
+const delimiters = {
+	[CASE_CAMEL]: DELIMTER_EMPTY,
+	[CASE_KEBAB]: DELIMITER_HYPHEN,
+	[CASE_PASCAL]: DELIMTER_EMPTY,
+	[CASE_SNAKE]: DELIMITER_UNDERSCORE
+};
+let memoizedCapitalize;
+//#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
 function setElementValue(element, first, second, third, callback) {
 	if (!isHTMLOrSVGElement(element)) return;
@@ -657,8 +1086,9 @@ function setElementValue(element, first, second, third, callback) {
 }
 function setElementValues(element, first, second, third, callback) {
 	if (!isHTMLOrSVGElement(element)) return;
+	const dispatch = third !== false;
 	if (typeof first === "string") {
-		callback(element, first, second, third);
+		callback(element, kebabCase(first), second, dispatch);
 		return;
 	}
 	const isArray = Array.isArray(first);
@@ -670,7 +1100,7 @@ function setElementValues(element, first, second, third, callback) {
 	const { length } = entries;
 	for (let index = 0; index < length; index += 1) {
 		const entry = entries[index];
-		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
+		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, kebabCase(entry.name), entry.value, dispatch);
 	}
 }
 function updateElementValue(element, key, value, set, remove, isBoolean, json) {
@@ -678,6 +1108,25 @@ function updateElementValue(element, key, value, set, remove, isBoolean, json) {
 	else set.call(element, key, json ? JSON.stringify(value) : String(value));
 }
 //#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/property.mjs
+function updateProperty$1(element, name, value, dispatch) {
+	let property = name;
+	if (!(property in element)) property = camelCase(name);
+	if (!(property in element) || Object.is(element[property], value)) return;
+	element[property] = value;
+	const event = dispatch && elementEvents[element.tagName]?.[property];
+	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
+}
+const elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+//#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/attribute.mjs
 function badAttributeHandler(name, value) {
 	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
@@ -707,6 +1156,7 @@ function handleAttribute(callback, decode, first, second) {
 		name = first;
 		value = second;
 	}
+	if (name != null) name = kebabCase(name);
 	if (decode && value != null) value = decodeAttribute(value);
 	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
 }
@@ -719,9 +1169,6 @@ function _isBadAttribute(first, second, decode) {
 function _isBooleanAttribute(first, decode) {
 	return handleAttribute((name) => booleanAttributesSet.has(name?.toLowerCase()), decode, first, "");
 }
-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, decode) {
 	return handleAttribute(booleanAttributeHandler, decode, first, second);
 }
@@ -729,18 +1176,12 @@ function isValidSourceAttribute(name, value) {
 	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
 }
 function updateAttribute(element, name, value, dispatch) {
-	const normalizedName = name.toLowerCase();
-	const isBoolean = booleanAttributesSet.has(normalizedName);
-	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
-	if (name in element) updateProperty$1(element, normalizedName, next, dispatch);
+	const lowerCaseName = name.toLowerCase();
+	const isBoolean = booleanAttributesSet.has(lowerCaseName);
+	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === lowerCaseName) : value == null ? "" : value;
+	if (isBoolean || dispatchedAttributes.has(name)) updateProperty$1(element, name, next, dispatch);
 	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
 }
-function updateProperty$1(element, name, value, dispatch) {
-	if (Object.is(element[name], value)) return;
-	element[name] = value;
-	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
-	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
-}
 const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
 const EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
 const EXPRESSION_EVENT_NAME$1 = /^on/i;
@@ -779,19 +1220,15 @@ const booleanAttributes = Object.freeze([
 	"selected"
 ]);
 const booleanAttributesSet = new Set(booleanAttributes);
-const elementEvents = {
-	DETAILS: { open: "toggle" },
-	INPUT: {
-		checked: "change",
-		value: "input"
-	},
-	SELECT: { value: "change" },
-	TEXTAREA: { value: "input" }
-};
+const dispatchedAttributes = new Set([
+	"checked",
+	"open",
+	"value"
+]);
 const formElement = document.createElement("form");
 let textArea;
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/dist/attribute/set.mjs
+//#region node_modules/@oscarpalmer/toretto/dist/attribute/set.attribute.mjs
 function setAttribute$1(element, first, second, third) {
 	setElementValue(element, first, second, third, updateAttribute);
 }
@@ -799,8 +1236,9 @@ function setAttribute$1(element, first, second, third) {
 //#region node_modules/@oscarpalmer/toretto/dist/html/sanitize.mjs
 function handleElement(element, depth) {
 	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
-		for (const item of removable) item.remove();
+		const removable = [...element.querySelectorAll(REMOVE_SELECTOR)];
+		const { length } = removable;
+		for (let index = 0; index < length; index += 1) removable[index].remove();
 	}
 	sanitizeAttributes(element, [...element.attributes]);
 }
@@ -819,7 +1257,7 @@ function sanitizeAttributes(element, attributes) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
+		if (_isBadAttribute(name, value, false)) element.removeAttribute(name);
 		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute$1(element, name, true);
 	}
 }
@@ -865,16 +1303,22 @@ function createHtml(value) {
 function createTemplate(value, options) {
 	const template = document.createElement(TEMPLATE_TAG);
 	template.innerHTML = createHtml(value);
-	if (typeof value === "string" && options.cache) templates[value] = template;
+	if (typeof value === "string" && options.cache) templates.set(value, template);
 	return template;
 }
+function getComment(index) {
+	return COMMENT_TEMPLATE.replace(COMMENT_INDEX, String(index));
+}
 function getHtml(value) {
 	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
 }
-function getNodes(value, options) {
+function getNodes(value, options, nodes) {
 	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
 	const template = getTemplate(value, options);
-	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
+	if (template == null) return [];
+	const cloned = [...template.content.cloneNode(true).childNodes];
+	if (nodes != null) replaceComments(cloned, nodes);
+	return cloned;
 }
 function getOptions$1(input) {
 	const options = isPlainObject(input) ? input : {};
@@ -885,37 +1329,96 @@ function getParser() {
 	parser ??= new DOMParser();
 	return parser;
 }
+function getTagged(strings, values) {
+	const tagged = {
+		nodes: [],
+		template: ""
+	};
+	const stringsLength = strings.length;
+	let nodeIndex = 0;
+	for (let stringIndex = 0; stringIndex < stringsLength; stringIndex += 1) {
+		const value = values[stringIndex];
+		tagged.template += strings[stringIndex];
+		if (value instanceof Node) {
+			tagged.nodes.push(value);
+			tagged.template += getComment(nodeIndex);
+			nodeIndex += 1;
+		} else if (hasNodes(value)) {
+			const items = [...value];
+			const itemsLength = items.length;
+			for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+				const item = items[itemIndex];
+				if (item instanceof Node) {
+					tagged.nodes.push(item);
+					tagged.template += getComment(nodeIndex);
+					nodeIndex += 1;
+				} else tagged.template += getString(item);
+			}
+		} else if (Array.isArray(value)) {
+			const valueLength = value.length;
+			for (let valueIndex = 0; valueIndex < valueLength; valueIndex += 1) tagged.template += getString(value[valueIndex]);
+		} else tagged.template += getString(value);
+	}
+	return tagged;
+}
 function getTemplate(value, options) {
 	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
 	if (value.trim().length === 0) return;
-	let template = templates[value];
+	let template = templates.get(value);
 	if (template != null) return template;
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
 	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
 }
-const html$1 = ((value, options) => {
-	return getNodes(value, getOptions$1(options));
-});
+function hasNodes(value) {
+	if (value instanceof HTMLCollection || value instanceof NodeList) return true;
+	return Array.isArray(value) && value.some((item) => item instanceof Node);
+}
+function html$1(first, ...second) {
+	if (isTagged(first)) {
+		const tagged = getTagged(first, second);
+		return getNodes(tagged.template, getOptions$1(), tagged.nodes);
+	}
+	return getNodes(first, getOptions$1(second[0]));
+}
+/**
+* Clear cache of template elements
+*/
 html$1.clear = () => {
-	templates = {};
+	templates.clear();
 };
+/**
+* Remove cached template element for an HTML string or id
+* @param template HTML string or id for a template element
+*/
 html$1.remove = (template) => {
-	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;
+	templates.delete(template);
 };
+function isTagged(value) {
+	return Array.isArray(value) && Array.isArray(value.raw);
+}
+function replaceComments(origin, replacements) {
+	const nodes = [...origin];
+	const { length } = nodes;
+	for (let nodeIndex = 0; nodeIndex < length; nodeIndex += 1) {
+		const node = nodes[nodeIndex];
+		if (node instanceof Comment) {
+			const [, index] = EXPRESSION_COMMENT.exec(node.textContent) ?? [];
+			if (index != null) node.replaceWith(replacements[Number(index)]);
+			continue;
+		}
+		if (node.hasChildNodes()) replaceComments(node.childNodes, replacements);
+	}
+}
+const COMMENT_INDEX = "<index>";
+const COMMENT_TEMPLATE = `<!--toretto.node:${COMMENT_INDEX}-->`;
+const EXPRESSION_COMMENT = /^toretto\.node:(\d+)$/;
 const EXPRESSION_ID = /^[a-z][\w-]*$/i;
 const PARSE_TYPE_HTML = "text/html";
 const TEMPLATE_TAG = "template";
 const TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
+const templates = new SizedMap(128);
 let parser;
-let templates = {};
+window.templates = templates;
 //#endregion
 //#region src/constants.ts
 const ARRAY_COMPARISON_ADDED = "added";
@@ -948,6 +1451,7 @@ const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
 const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
 const EXPRESSION_EVENT_PREFIX = /^@/;
 const EXPRESSION_PERIOD = /\./;
+const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
 const NAME_FRAGMENT = "$fragment";
 const NAME_FRAGMENTS = "$fragments";
 const PROPERTY_CHECKED = "checked";
@@ -1021,7 +1525,7 @@ function handleItems(state, items) {
 		const item = items[index];
 		const identifier = state.identify(item);
 		if (identifier == null) throw new TypeError(ERROR_IDENTIFIER_TYPE);
-		const key = getString(identifier);
+		const key = getString$1(identifier);
 		if (keys.has(key)) throw new Error(ERROR_IDENTIFIER_DUPLICATE.replace("<>", key));
 		let instance = state.instances[key];
 		if (instance == null) {
@@ -1065,10 +1569,10 @@ const states = /* @__PURE__ */ new WeakMap();
 function createNodes(value) {
 	if (isFragment(value)) return value.get();
 	if (isChildNode(value)) return [value];
-	return [new Text(getString(value))];
+	return [new Text(getString$1(value))];
 }
 function isInputElement(node) {
-	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement;
 }
 function removeNodes(nodes) {
 	const { length } = nodes;
@@ -1103,7 +1607,14 @@ function delegatedEventHandler(event) {
 	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
 	const items = event.composedPath();
 	const { length } = items;
+	let cancelled = false;
 	let target = items[0];
+	const originalStopPropagation = event.stopPropagation;
+	event.stopPropagation = function() {
+		cancelled = true;
+		originalStopPropagation.call(event);
+	};
+	event.stopImmediatePropagation = event.stopPropagation.bind(event);
 	Object.defineProperties(event, {
 		currentTarget: {
 			configurable: true,
@@ -1123,7 +1634,7 @@ function delegatedEventHandler(event) {
 		target = item;
 		for (const listener of listeners) {
 			listener.call(item, event);
-			if (event.cancelBubble) return;
+			if (cancelled) return;
 		}
 	}
 }
@@ -1168,7 +1679,7 @@ const EVENT_TYPES = new Set([
 const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
 const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
 //#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
+//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
 /**
 * A function that does nothing, which can be useful, I guess…
 */
@@ -1312,8 +1823,13 @@ function mapAttributes(data, element) {
 function mapValue$1(data, element, name, value) {
 	if (typeof value === "function") setComputedAttribute(data, element, name, value);
 	else setAttribute(data, element, name, value);
-	if (name === "value" && isInputElement(element) && isSignal(value)) mapEvent(element, "@on", () => {
-		value.set(parse$1(element.value) ?? element.value);
+	if (!isInputElement(element) || !isSignal(value)) return;
+	let property;
+	if (name === "checked" && element.type === "checkbox") property = PROPERTY_CHECKED;
+	else if (name === "value") property = PROPERTY_VALUE;
+	if (property != null) mapEvent(element, "@on", () => {
+		const next = element[property];
+		value.set(parse$1(String(next)) ?? next);
 	});
 }
 function setComputedAttribute(data, element, name, callback) {
@@ -1416,8 +1932,8 @@ function setReactiveValueForSingle(item, comment, 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(value);
+	const isNullable = isNullableOrWhitespace$1(value);
+	if (item.text != null) item.text.textContent = isNullable ? "" : getString$1(value);
 	let result = false;
 	if (item.nodes != null) {
 		replaceText(item, comment, isNullable);
@@ -1445,10 +1961,31 @@ function mapNodes(data, nodes) {
 			mapNode(data, node);
 			continue;
 		}
+		if (node instanceof HTMLTextAreaElement) mapTextarea(data, node);
 		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
 		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
 	}
 }
+function mapTextarea(data, element) {
+	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	if (index == null) return;
+	element.value = "";
+	const value = data.values[Number.parseInt(index, 10)];
+	if (isSignal(value)) {
+		element.value = String(value.peek());
+		mapEvent(element, "@on", () => {
+			value.set(element.value);
+		});
+		return;
+	}
+	let reactive;
+	if (typeof value === "function") reactive = computed(value);
+	else if (isComputed(value)) reactive = value;
+	if (reactive == null) element.value = String(value);
+	else data.mora.subscribers.add(reactive.subscribe((value) => {
+		element.value = String(value);
+	}));
+}
 function mapValue(data, comment, value) {
 	switch (true) {
 		case typeof value === "function":
@@ -1490,7 +2027,7 @@ function handleExpression(data, prefix, expression) {
 		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}`;
+	return isNullableOrWhitespace$1(expression) ? prefix : `${prefix}${expression}`;
 }
 function parse(data) {
 	if (data.template != null) return data.template;
@@ -1548,7 +2085,7 @@ var Fragment = class {
 	* @returns Fragment
 	*/
 	configure(configuration) {
-		const actual = isPlainObject(configuration) ? 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;