web-toolkit-x 0.0.1 → 0.71.0

package/dist/release/toolkit-0.71.0.js

@@ -0,0 +1,2840 @@
+(function() {
+	//#region src/core/virtual-node.ts
+	var VirtualNode = class {
+		constructor(description, parentNode = null, context = null) {
+			this.description = description;
+			this.key = description.key;
+			this.parentNode = parentNode;
+			this.context = context;
+		}
+		get parentElement() {
+			if (this.parentNode) return this.parentNode.isElement() ? this.parentNode : this.parentNode.parentElement;
+			return null;
+		}
+		get container() {
+			if (this.parentNode) return this.parentNode.container;
+			return this;
+		}
+		get rootNode() {
+			if (this.isRoot()) return this;
+			if (this.parentNode) return this.parentNode.rootNode;
+			throw new Error("Inconsistent virtual DOM tree detected!");
+		}
+		isRoot() {
+			return this.nodeType === "root";
+		}
+		isComponent() {
+			const { nodeType } = this;
+			return nodeType === "component" || nodeType === "root";
+		}
+		isElement() {
+			return this.nodeType === "element";
+		}
+		isComment() {
+			return this.nodeType === "comment";
+		}
+		isText() {
+			return this.nodeType === "text";
+		}
+		isCompatible(node) {
+			return node && this.nodeType === node.nodeType && this.key === node.key;
+		}
+	};
+	//#endregion
+	//#region src/core/comment.ts
+	var Comment = class Comment extends VirtualNode {
+		static NodeType = "comment";
+		constructor(description, parentNode) {
+			super(description, parentNode);
+			this.attachDOM();
+		}
+		get nodeType() {
+			return Comment.NodeType;
+		}
+		attachDOM() {
+			this.ref = document.createComment(` ${this.description.text} `);
+		}
+	};
+	//#endregion
+	//#region src/core/description.ts
+	var Description = class {
+		get childrenAsTemplates() {
+			if (this.children) return this.children.map((child) => child.asTemplate);
+		}
+		isCompatible(description) {
+			return this.constructor === description.constructor;
+		}
+	};
+	var ComponentDescription = class extends Description {
+		constructor(component) {
+			super();
+			this.component = component;
+			this.type = "component";
+		}
+		isCompatible(description) {
+			return super.isCompatible(description) && this.component === description.component;
+		}
+		get isRoot() {
+			return this.component.NodeType === "root";
+		}
+		get asTemplate() {
+			const template = [this.component];
+			if (this.props) template.push(this.props);
+			if (this.children) template.push(...this.children.map((child) => child.asTemplate));
+			return template;
+		}
+	};
+	var ElementDescription = class extends Description {
+		constructor(name) {
+			super();
+			this.name = name;
+			this.type = "element";
+		}
+		isCompatible(description) {
+			return super.isCompatible(description) && this.name === description.name;
+		}
+		get asTemplate() {
+			const template = [this.name];
+			const props = {};
+			if (this.key) props.key = this.key;
+			if (this.class) props.class = this.class;
+			if (this.style) props.style = this.style;
+			if (this.attrs) Object.assign(props, this.attrs);
+			if (this.dataset) props.dataset = this.dataset;
+			if (this.listeners) Object.assign(props, this.listeners);
+			if (this.properties) props.properties = this.properties;
+			if (this.custom?.attrs) props.attrs = this.custom.attrs;
+			if (this.custom?.listeners) props.on = this.custom.listeners;
+			if (Object.keys(props).length) template.push(props);
+			if (this.children) template.push(...this.children.map((child) => child.asTemplate));
+			return template;
+		}
+	};
+	var CommentDescription = class extends Description {
+		constructor(text) {
+			super();
+			this.text = text;
+			this.type = "comment";
+		}
+		get asTemplate() {
+			return null;
+		}
+		isCompatible(description) {
+			return super.isCompatible(description) && this.text === description.text;
+		}
+	};
+	var TextDescription = class extends Description {
+		constructor(text) {
+			super();
+			this.text = text;
+			this.type = "text";
+		}
+		get asTemplate() {
+			return this.text;
+		}
+		isCompatible(description) {
+			return super.isCompatible(description) && this.text === description.text;
+		}
+	};
+	Object.assign(Description, {
+		ElementDescription,
+		ComponentDescription,
+		CommentDescription,
+		TextDescription
+	});
+	//#endregion
+	//#region src/core/utils.ts
+	function invariant(condition, message) {
+		if (!condition) throw new Error(message);
+	}
+	const throttle = (fn, wait = 200, delayFirstEvent = false) => {
+		let lastTimestamp = 0;
+		let taskId = null;
+		let context;
+		let params;
+		return function throttled(...args) {
+			if (!taskId) {
+				const timestamp = Date.now();
+				const elapsed = timestamp - lastTimestamp;
+				const scheduleTask = (delay) => {
+					taskId = setTimeout(() => {
+						taskId = null;
+						lastTimestamp = Date.now();
+						return fn.call(context, ...params);
+					}, delay);
+				};
+				if (elapsed >= wait) {
+					lastTimestamp = timestamp;
+					if (!delayFirstEvent) return fn.call(this, ...args);
+					scheduleTask(wait);
+				} else scheduleTask(wait - elapsed);
+			}
+			context = this;
+			params = args;
+		};
+	};
+	const debounce = (fn, wait = 200, leading = false) => {
+		let taskId = null;
+		let isTrailing = false;
+		let context;
+		let params;
+		return function debounced(...args) {
+			const isFirstInvocation = !taskId;
+			if (taskId) clearTimeout(taskId);
+			isTrailing = !(isFirstInvocation && leading);
+			taskId = setTimeout(() => {
+				taskId = null;
+				if (isTrailing) fn.call(context, ...params);
+			}, wait);
+			context = this;
+			params = args;
+			if (!isTrailing) return fn.call(context, ...params);
+		};
+	};
+	const createUUID = () => {
+		const s4 = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
+		return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+	};
+	const lowerDash = (name) => name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+	const getAttributeName = (key) => {
+		if (key === "acceptCharset" || key === "httpEquiv") return lowerDash(key);
+		else if (key.startsWith("aria")) return `aria-${key.slice(4).toLowerCase()}`;
+		return key.toLowerCase();
+	};
+	const getEventName = (key) => key === "onDoubleClick" ? "dblclick" : key.slice(2).toLowerCase();
+	const postRender = (fn) => {
+		requestAnimationFrame(function() {
+			requestAnimationFrame(fn);
+		});
+	};
+	const isSameList = (a, b) => a.length === b.length && a.every((item, index) => item === b[index]);
+	const deepFreeze = (obj) => {
+		if (obj === null || typeof obj !== "object" || Object.isFrozen(obj)) return obj;
+		Object.freeze(obj);
+		for (const property of Object.getOwnPropertyNames(obj)) deepFreeze(obj[property]);
+		return obj;
+	};
+	const Utils = {
+		throttle,
+		debounce,
+		createUUID,
+		postRender
+	};
+	//#endregion
+	//#region src/core/runtime.ts
+	let provided = null;
+	const provideRuntime = (runtime) => {
+		provided = runtime;
+	};
+	const runtime = () => {
+		invariant(provided, "No Toolkit runtime provided!");
+		return provided;
+	};
+	//#endregion
+	//#region src/core/sandbox.ts
+	const get = (target, property) => Reflect.get(target, property);
+	const isFunction = (target, property) => typeof get(target, property) === "function";
+	const delegated = [
+		"commands",
+		"constructor",
+		"container",
+		"elementName"
+	];
+	const methods = ["connectTo"];
+	const pluginMethods = /* @__PURE__ */ new Set();
+	const createBoundListener = (listener, component, context) => {
+		const boundListener = listener.bind(context);
+		boundListener.source = listener;
+		boundListener.component = component;
+		return boundListener;
+	};
+	var Sandbox = class {
+		static registerPluginMethod(name) {
+			pluginMethods.add(name);
+		}
+		static clearPluginMethods() {
+			pluginMethods.clear();
+		}
+		/**
+		* Creates the sandbox of a component, hiding the given properties
+		* of the Component class from the component methods.
+		*/
+		static create(component, hidden) {
+			const state = {};
+			const autobound = {};
+			return new Proxy(component, {
+				get: (target, property, receiver) => {
+					if (property === "props") return state.props || target.state || {};
+					if (property === "children") return state.children || [];
+					if (property === "host") return target.isRoot() ? target.shadow.host : null;
+					if (property === "ref") {
+						if (target.isRoot()) return target.content.ref;
+						return target.ref;
+					}
+					if (property === "$component") return component;
+					if (delegated.includes(property)) return get(target, property);
+					if (methods.includes(property) && isFunction(target, property)) return createBoundListener(get(target, property), target, target);
+					if (pluginMethods.has(property)) return get(target.rootNode, property);
+					if (hidden.includes(property)) return;
+					if (isFunction(autobound, property)) return autobound[property];
+					if (isFunction(target, property)) return autobound[property] = createBoundListener(get(target, property), target, receiver);
+					return get(target, property);
+				},
+				set: (target, property, value) => {
+					if (property === "props") {
+						state.props = value;
+						return true;
+					}
+					if (property === "children") {
+						state.children = value || [];
+						return true;
+					}
+					return false;
+				}
+			});
+		}
+	};
+	//#endregion
+	//#region src/core/browser.ts
+	const ATTRIBUTE_PROPERTIES = { for: "htmlFor" };
+	const UNREFLECTED_ATTRIBUTES = /* @__PURE__ */ new Set([
+		"ariaOwns",
+		"is",
+		"itemProp"
+	]);
+	const elementProperties = /* @__PURE__ */ new Map();
+	const getElementProperties = (tagName) => {
+		let properties = elementProperties.get(tagName);
+		if (!properties) {
+			properties = /* @__PURE__ */ new Set();
+			for (const name in document.createElement(tagName)) properties.add(name.toLowerCase());
+			elementProperties.set(tagName, properties);
+		}
+		return properties;
+	};
+	const EVENTS_WITHOUT_HANDLERS = /* @__PURE__ */ new Set([
+		"compositionstart",
+		"compositionupdate",
+		"compositionend",
+		"touchstart",
+		"touchmove",
+		"touchend",
+		"touchcancel"
+	]);
+	let supportedStyles = null;
+	const getSupportedStyles = () => {
+		if (!supportedStyles) {
+			supportedStyles = /* @__PURE__ */ new Set();
+			for (let object = document.documentElement.style; object && object !== CSSStyleDeclaration.prototype; object = Object.getPrototypeOf(object)) for (const name of Object.getOwnPropertyNames(object)) supportedStyles.add(name);
+		}
+		return supportedStyles;
+	};
+	const Browser = {
+		/**
+		* Checks if the browser supports the attribute on the element, as
+		* a property of the element in any letter case, e.g. tabIndex. Meant
+		* for debug mode, as the check creates an element of each tag name.
+		*/
+		isAttributeSupported(key, tagName) {
+			if (UNREFLECTED_ATTRIBUTES.has(key)) return true;
+			const properties = getElementProperties(tagName);
+			const name = (ATTRIBUTE_PROPERTIES[key] ?? key).toLowerCase();
+			return properties.has(name) || properties.has(`${name}element`) || properties.has(`${name}elements`);
+		},
+		/**
+		* Checks if the browser supports the event of the listener, e.g. onClick,
+		* on the element, as its handler property, e.g. onclick. Meant for debug
+		* mode, as the check creates an element of each tag name.
+		*/
+		isEventSupported(key, tagName) {
+			const event = getEventName(key);
+			return EVENTS_WITHOUT_HANDLERS.has(event) || getElementProperties(tagName).has(`on${event}`);
+		},
+		isStyleSupported(key) {
+			return key.startsWith("--") || getSupportedStyles().has(key);
+		}
+	};
+	//#endregion
+	//#region src/core/template.ts
+	const isDefined = (value) => value !== void 0 && value !== null;
+	const isFalsy = (template) => template === null || template === false;
+	const isNotEmpty = (object) => Boolean(Object.keys(object).length);
+	const Template = {
+		/**
+		* Creates a normalized Description of given template.
+		*/
+		describe(template) {
+			if (isFalsy(template)) return null;
+			if (Array.isArray(template) && template.length) {
+				let description;
+				for (const [item, type, index] of template.map((item, index) => [
+					item,
+					this.getItemType(item),
+					index
+				])) {
+					if (index === 0) {
+						switch (type) {
+							case "string":
+								description = new ElementDescription(item);
+								break;
+							case "component":
+							case "function":
+								description = new ComponentDescription(runtime().resolveComponentClass(item, type));
+								break;
+							default:
+								console.error("Invalid node type:", item, `(${type}) at index: ${index}, template:`, template);
+								throw new Error(`Invalid node type specified: ${type}`);
+						}
+						continue;
+					}
+					if (index === 1 && type === "props") {
+						if (description.type === "component") this.assignPropsToComponent(item, description);
+						else if (description.type === "element") this.assignPropsToElement(item, description);
+						continue;
+					}
+					if (isFalsy(item)) continue;
+					if (type === "string" || type === "number" || item === true) {
+						description.children = description.children || [];
+						description.children.push(new TextDescription(String(item)));
+						continue;
+					} else if (type === "node") {
+						description.children = description.children || [];
+						description.children.push(this.describe(item));
+					} else {
+						console.error("Invalid item", item, `at index: ${index}, template:`, template);
+						throw new Error(`Invalid item specified: ${type}`);
+					}
+				}
+				if (runtime().isDebug()) deepFreeze(description);
+				return description;
+			}
+			console.error("Invalid template definition:", template);
+			throw new Error("Expecting array, null or false");
+		},
+		/**
+		* Returns a new props object supplemented by overridden values.
+		*/
+		normalizeProps(...overrides) {
+			const result = {};
+			for (const override of overrides) for (const [key, value] of Object.entries(override || {})) if (result[key] === void 0 && value !== void 0) result[key] = value;
+			return result;
+		},
+		/**
+		* Normalizes specified element props object and returns either
+		* a non-empty object containing only supported props or null.
+		*/
+		normalizeComponentProps(props, ComponentClass) {
+			return this.normalizeProps(props, ComponentClass.defaultProps || {});
+		},
+		assignPropsToComponent(object, description) {
+			const props = this.getComponentProps(object, description.component, description.isRoot);
+			if (props) {
+				description.props = props;
+				if (isDefined(props.key)) description.key = String(props.key);
+				if (props.attrs) {
+					const attrs = this.getCustomAttributes(props.attrs, true);
+					if (attrs) description.attrs = attrs;
+				}
+			}
+		},
+		getComponentProps(object, ComponentClass, isRoot) {
+			const props = isRoot ? object : this.normalizeComponentProps(object, ComponentClass);
+			return isNotEmpty(props) ? props : null;
+		},
+		assignPropsToElement(props, description) {
+			for (const [key, value] of Object.entries(props)) if (key === "key") {
+				if (isDefined(value)) description.key = String(value);
+			} else if (key === "class") {
+				const className = this.getClassName(value);
+				if (className) description.class = className;
+			} else if (key === "style") {
+				const style = this.getStyle(value);
+				if (style) description.style = style;
+			} else if (key === "dataset") {
+				const dataset = this.getDataset(value);
+				if (dataset) description.dataset = dataset;
+			} else if (key === "properties") {
+				const properties = this.getProperties(value);
+				if (properties) description.properties = properties;
+			} else if (key === "attrs") {
+				const customAttrs = this.getCustomAttributes(value);
+				if (customAttrs) {
+					description.custom = description.custom || {};
+					description.custom.attrs = customAttrs;
+				}
+			} else if (key === "on") {
+				const customListeners = this.getCustomListeners(value);
+				if (customListeners) {
+					description.custom = description.custom || {};
+					description.custom.listeners = customListeners;
+				}
+			} else if (/^on[A-Z]/.test(key)) {
+				if (this.getListener(value, key)) {
+					description.listeners = description.listeners || {};
+					description.listeners[key] = value;
+				}
+				const element = description.name;
+				if (runtime().isDebug() && !element.includes("-") && !Browser.isEventSupported(key, element)) console.warn(`The "${key}" listener is not supported on "${element}" elements.`);
+			} else {
+				const attr = this.getAttributeValue(value);
+				if (isDefined(attr)) {
+					description.attrs = description.attrs || {};
+					description.attrs[key] = attr;
+				}
+				if (runtime().isDebug()) {
+					const element = description.name;
+					if (attr === void 0) console.warn(`Invalid undefined value for attribute "${key}"`, `on element "${element}".`);
+					if (!element.includes("-") && !Browser.isAttributeSupported(key, element)) console.warn(`The "${key}" attribute is not supported on "${element}" elements.`);
+				}
+			}
+		},
+		/**
+		* Returns the type of item used in the array representing node template.
+		*/
+		getItemType(item) {
+			const type = typeof item;
+			switch (type) {
+				case "function":
+					if (item.NodeType === "component" || item.NodeType === "root") return "component";
+					return "function";
+				case "object":
+					if (item === null) return "null";
+					else if (Array.isArray(item)) return "node";
+					else if (item.constructor === Object) return "props";
+					return "unknown";
+				default: return type;
+			}
+		},
+		/**
+		* Resolves any object to a space separated string of class names.
+		*/
+		getClassName(value) {
+			if (!value) return "";
+			if (typeof value === "string") return value;
+			if (Array.isArray(value)) return value.map((item) => this.getClassName(item)).filter((className) => className).join(" ");
+			if (typeof value === "object") return Object.keys(value).filter((key) => key && value[key]).join(" ");
+			throw new Error(`Invalid value: ${JSON.stringify(value)}`);
+		},
+		/**
+		* Returns either a non-empty style object containing only understood
+		* styling rules or null.
+		*/
+		getStyle(object) {
+			runtime().assert(object.constructor === Object, "Style must be a plain object!");
+			const style = {};
+			for (const [name, value] of Object.entries(object)) {
+				if (runtime().isDebug() && !Browser.isStyleSupported(name)) console.warn(`Unsupported style property, key: ${name}, value:`, value);
+				const string = this.getStyleProperty(value, name);
+				if (isDefined(string)) style[name] = string;
+			}
+			return isNotEmpty(style) ? style : null;
+		},
+		getStyleProperty(value, name) {
+			if (typeof value === "string") return value || "''";
+			else if ([
+				true,
+				false,
+				null,
+				void 0
+			].includes(value)) return null;
+			else if (Array.isArray(value)) return value.join("");
+			else if (typeof value === "number") return String(value);
+			else if (typeof value === "object") {
+				if (name !== "filter" && name !== "transform") throw new Error(`Unknown function list: ${JSON.stringify(value)}`);
+				const functions = this.getFunctionList(value, name === "filter" ? lowerDash : void 0);
+				if (runtime().isDebug() && functions && !CSS.supports(name, functions)) console.warn(`Unsupported ${name} functions: ${functions}`);
+				return functions;
+			}
+			throw new Error(`Invalid style property value: ${JSON.stringify(value)}`);
+		},
+		/**
+		* Returns a multi-property string value.
+		*/
+		getFunctionList(object, getCSSName = (name) => name) {
+			const composite = {};
+			for (const [key, value] of Object.entries(object)) {
+				const stringValue = this.getAttributeValue(value, false);
+				if (isDefined(stringValue)) composite[getCSSName(key)] = stringValue;
+			}
+			return Object.entries(composite).map(([key, value]) => `${key}(${value})`).join(" ");
+		},
+		getListener(value, name) {
+			if (typeof value === "function") return value;
+			if (value === null || value === false || value === void 0) return null;
+			throw new Error(`Invalid listener specified for event: ${name}`);
+		},
+		/**
+		* Resolves given value to a string.
+		*/
+		getAttributeValue(value, allowEmpty = true) {
+			if (value === true || value === "") return allowEmpty ? "" : null;
+			else if (typeof value === "string") return value;
+			else if (value === null || value === false) return null;
+			else if (value === void 0) return;
+			else if (Array.isArray(value)) return value.join("");
+			else if ([
+				"object",
+				"function",
+				"symbol"
+			].includes(typeof value)) throw new Error(`Invalid attribute value: ${JSON.stringify(value)}!`);
+			return String(value);
+		},
+		/**
+		* Returns either a non-empty dataset object or null.
+		*/
+		getDataset(object) {
+			const dataset = {};
+			for (const key of Object.keys(object)) {
+				const value = this.getAttributeValue(object[key]);
+				if (isDefined(value)) dataset[key] = value;
+			}
+			return isNotEmpty(dataset) ? dataset : null;
+		},
+		/**
+		* Returns either a non-empty object containing properties set
+		* directly on a rendered DOM Element or null.
+		*/
+		getProperties(object) {
+			return isNotEmpty(object) ? object : null;
+		},
+		getCustomAttributes(object, forComponent) {
+			runtime().assert(object.constructor === Object, "Expecting object for custom attributes!");
+			const attrs = {};
+			for (const [key, value] of Object.entries(object)) {
+				const attr = this.getAttributeValue(value, true);
+				if (isDefined(attr)) {
+					const name = forComponent ? lowerDash(key) : key;
+					attrs[name] = attr;
+				}
+			}
+			return isNotEmpty(attrs) ? attrs : null;
+		},
+		getCustomListeners(object) {
+			runtime().assert(object.constructor === Object, "Expecting object for custom listeners!");
+			const listeners = {};
+			for (const [key, value] of Object.entries(object)) {
+				const listener = this.getListener(value, key);
+				if (listener) listeners[key] = listener;
+			}
+			return isNotEmpty(listeners) ? listeners : null;
+		}
+	};
+	//#endregion
+	//#region src/core/component.ts
+	var Component = class Component extends VirtualNode {
+		static NodeType = "component";
+		static get displayName() {
+			return this.name;
+		}
+		constructor(description, parent, context, attachDOM = true) {
+			super(description, parent, context);
+			this.sandbox = Sandbox.create(this, COMPONENT_PROPERTIES);
+			this.cleanUpTasks = [];
+			this.isInitialized = attachDOM;
+			if (attachDOM) this.attachDOM();
+			this.content = null;
+		}
+		/**
+		* Sets the component content.
+		*/
+		setContent(node) {
+			invariant(node.parentNode === this, "Specified node does not have a valid parent!");
+			this.content.parentNode = null;
+			node.parentNode = this;
+			this.content.ref.replaceWith(node.ref);
+			this.content = node;
+		}
+		hasOwnMethod(method) {
+			return this.constructor.prototype.hasOwnProperty(method);
+		}
+		connectTo(service, listeners) {
+			runtime().assert(typeof service.connect === "function", "Services have to define the connect() method");
+			const disconnect = service.connect(listeners);
+			runtime().assert(typeof disconnect === "function", "The result of the connect() method has to be a disconnect() method");
+			disconnect.service = service;
+			this.cleanUpTasks.push(disconnect);
+		}
+		get childElement() {
+			if (this.content) {
+				if (this.content.isElement() || this.content.isRoot()) return this.content;
+				if (this.content.isComponent()) return this.content.childElement;
+			}
+			return null;
+		}
+		get placeholder() {
+			if (this.content.isComment()) return this.content;
+			return this.content.placeholder || null;
+		}
+		render() {}
+		/**
+		* Calls the render method and transforms the returned template
+		* into the normalised description of the rendered node.
+		*/
+		renderDescription(props = {}, children = []) {
+			this.sandbox.props = props;
+			this.sandbox.children = children;
+			const template = this.render.call(this.sandbox);
+			if (template) return Template.describe(template);
+			const text = this.constructor.displayName;
+			return new CommentDescription(text);
+		}
+		get commands() {
+			return this.context ? this.context.commands : this.rootNode.commands;
+		}
+		get dispatcher() {
+			return this.context ? this.context.dispatcher : this.rootNode.dispatcher;
+		}
+		destroy() {
+			for (const cleanUpTask of this.cleanUpTasks) cleanUpTask();
+		}
+		get nodeType() {
+			return Component.NodeType;
+		}
+		get ref() {
+			return this.content.ref;
+		}
+		isCompatible(node) {
+			return super.isCompatible(node) && this.constructor === node.constructor;
+		}
+		attachDOM() {
+			if (this.content) this.content.attachDOM();
+		}
+	};
+	const COMPONENT_PROPERTIES = Object.getOwnPropertyNames(Component.prototype);
+	//#endregion
+	//#region src/core/text.ts
+	var Text = class Text extends VirtualNode {
+		static NodeType = "text";
+		constructor(description, parentNode) {
+			super(description, parentNode);
+			this.attachDOM();
+		}
+		get nodeType() {
+			return Text.NodeType;
+		}
+		attachDOM() {
+			this.ref = document.createTextNode(this.description.text);
+		}
+	};
+	//#endregion
+	//#region src/core/child-nodes.ts
+	const ChildNodes = {
+		set(parent, nodes) {
+			parent.childNodes = nodes;
+			for (const child of nodes) parent.ref.appendChild(child.ref);
+		},
+		insert(parent, child, index) {
+			const nodes = parent.childNodes ?? [];
+			if (index === void 0) index = nodes.length;
+			const nextChild = nodes[index];
+			nodes.splice(index, 0, child);
+			parent.childNodes = nodes;
+			parent.ref.insertBefore(child.ref, nextChild && nextChild.ref || null);
+			child.parentNode = parent;
+		},
+		replace(parent, child, node) {
+			const nodes = parent.childNodes ?? [];
+			const index = nodes.indexOf(child);
+			invariant(index >= 0, "Specified node is not a child of this element!");
+			nodes.splice(index, 1, node);
+			child.parentNode = null;
+			node.parentNode = parent;
+			child.ref.replaceWith(node.ref);
+		},
+		move(parent, child, from, to) {
+			const nodes = parent.childNodes ?? [];
+			invariant(nodes[from] === child, "Specified node is not a child of this element!");
+			nodes.splice(from, 1);
+			nodes.splice(to, 0, child);
+			const nextChild = nodes[to + 1];
+			parent.ref.insertBefore(child.ref, nextChild ? nextChild.ref : null);
+		},
+		remove(parent, child) {
+			const nodes = parent.childNodes ?? [];
+			const index = nodes.indexOf(child);
+			invariant(index >= 0, "Specified node is not a child of this element!");
+			nodes.splice(index, 1);
+			if (!nodes.length) parent.childNodes = void 0;
+			parent.ref.removeChild(child.ref);
+		}
+	};
+	//#endregion
+	//#region src/core/dom.ts
+	const DOM = {
+		setClassName(element, className) {
+			element.className = className;
+		},
+		setStyleProperty(element, name, value) {
+			if (name.startsWith("--")) element.style.setProperty(name, ` ${value}`);
+			else element.style[name] = value;
+		},
+		removeStyleProperty(element, name) {
+			if (name.startsWith("--")) element.style.removeProperty(name);
+			else element.style[name] = null;
+		},
+		setAttribute(element, name, value, isCustom) {
+			const attr = isCustom ? name : getAttributeName(name);
+			element.setAttribute(attr, value);
+		},
+		removeAttribute(element, name, isCustom) {
+			const attr = isCustom ? name : getAttributeName(name);
+			element.removeAttribute(attr);
+		},
+		setDataAttribute(element, name, value) {
+			element.dataset[name] = value;
+		},
+		removeDataAttribute(element, name) {
+			delete element.dataset[name];
+		},
+		addListener(element, name, listener, isCustom) {
+			const event = isCustom ? name : getEventName(name);
+			element.addEventListener(event, listener);
+		},
+		removeListener(element, name, listener, isCustom) {
+			const event = isCustom ? name : getEventName(name);
+			element.removeEventListener(event, listener);
+		},
+		setProperty(element, key, value) {
+			element[key] = value;
+		},
+		deleteProperty(element, key) {
+			delete element[key];
+		},
+		/**
+		* Creates a new DOM Element based on the specified description.
+		*/
+		createElement(description) {
+			const element = document.createElement(description.name);
+			if (description.class) this.setClassName(element, description.class);
+			for (const [name, value] of Object.entries(description.style ?? {})) this.setStyleProperty(element, name, value);
+			for (const [name, listener] of Object.entries(description.listeners ?? {})) this.addListener(element, name, listener, false);
+			for (const [name, value] of Object.entries(description.attrs ?? {})) this.setAttribute(element, name, value, false);
+			for (const [name, value] of Object.entries(description.dataset ?? {})) this.setDataAttribute(element, name, value);
+			for (const [key, value] of Object.entries(description.properties ?? {})) this.setProperty(element, key, value);
+			for (const [name, value] of Object.entries(description.custom?.attrs ?? {})) this.setAttribute(element, name, value, true);
+			for (const [name, listener] of Object.entries(description.custom?.listeners ?? {})) this.addListener(element, name, listener, true);
+			return element;
+		}
+	};
+	//#endregion
+	//#region src/core/virtual-element.ts
+	var VirtualElement = class VirtualElement extends VirtualNode {
+		static NodeType = "element";
+		constructor(description, parent, context) {
+			super(description, parent, context);
+			this.attachDOM();
+		}
+		get childNodes() {
+			return this.children;
+		}
+		set childNodes(nodes) {
+			if (nodes) this.children = nodes;
+			else delete this.children;
+		}
+		get nodeType() {
+			return VirtualElement.NodeType;
+		}
+		isCompatible(node) {
+			return super.isCompatible(node) && this.description.name === node.description.name;
+		}
+		setChildNodes(nodes) {
+			ChildNodes.set(this, nodes);
+		}
+		insertChild(child, index) {
+			ChildNodes.insert(this, child, index);
+		}
+		replaceChild(child, node) {
+			ChildNodes.replace(this, child, node);
+		}
+		moveChild(child, from, to) {
+			ChildNodes.move(this, child, from, to);
+		}
+		removeChild(child) {
+			ChildNodes.remove(this, child);
+		}
+		attachDOM() {
+			this.ref = DOM.createElement(this.description);
+		}
+	};
+	//#endregion
+	//#region src/core/created-roots.ts
+	let createdRoots = null;
+	const CreatedRoots = {
+		/**
+		* Calls the function, destroying the roots it creates when it throws.
+		* They are neither attached nor destroyed by the lifecycle then, but
+		* would stay tracked, with the plugins installed.
+		*/
+		destroyingRootsOnError(fn) {
+			const outerRoots = createdRoots;
+			const roots = [];
+			createdRoots = roots;
+			try {
+				const result = fn();
+				outerRoots?.push(...roots);
+				return result;
+			} catch (error) {
+				for (const root of roots.reverse()) root.destroy();
+				throw error;
+			} finally {
+				createdRoots = outerRoots;
+			}
+		},
+		/**
+		* Records a root being created, see destroyingRootsOnError().
+		*/
+		collectRoot(root) {
+			createdRoots?.push(root);
+		}
+	};
+	//#endregion
+	//#region src/core/patch.ts
+	const Type = {
+		INIT_ROOT_COMPONENT: "init-root-component",
+		UPDATE_NODE: "update-node",
+		UPDATE_ROOT: "update-root",
+		SET_ATTRIBUTE: "set-attribute",
+		REMOVE_ATTRIBUTE: "remove-attribute",
+		SET_DATA_ATTRIBUTE: "set-data-attribute",
+		REMOVE_DATA_ATTRIBUTE: "remove-data-attribute",
+		SET_STYLE_PROPERTY: "set-style-property",
+		REMOVE_STYLE_PROPERTY: "remove-style-property",
+		SET_CLASS_NAME: "set-class-name",
+		ADD_LISTENER: "add-listener",
+		REPLACE_LISTENER: "replace-listener",
+		REMOVE_LISTENER: "remove-listener",
+		SET_PROPERTY: "set-property",
+		DELETE_PROPERTY: "delete-property",
+		INSERT_CHILD: "insert-child",
+		REPLACE_CHILD: "replace-child",
+		MOVE_CHILD: "move-child",
+		REMOVE_CHILD: "remove-child",
+		SET_CONTENT: "set-content"
+	};
+	const Patch = {
+		Type,
+		/**
+		* Applies the change to the virtual and rendered DOM.
+		*/
+		apply(patch) {
+			switch (patch.type) {
+				case Type.INIT_ROOT_COMPONENT:
+					(patch.root.container ? patch.root.container : patch.root.shadow).appendChild(patch.root.content.ref);
+					return;
+				case Type.UPDATE_NODE:
+					patch.node.description = patch.description;
+					return;
+				case Type.UPDATE_ROOT:
+					patch.root.update(patch.description);
+					return;
+				case Type.SET_ATTRIBUTE: {
+					const { target, name, value, isCustom } = patch;
+					DOM.setAttribute(target.ref, name, value, isCustom);
+					return;
+				}
+				case Type.REMOVE_ATTRIBUTE:
+					DOM.removeAttribute(patch.target.ref, patch.name, patch.isCustom);
+					return;
+				case Type.SET_DATA_ATTRIBUTE:
+					DOM.setDataAttribute(patch.target.ref, patch.name, patch.value);
+					return;
+				case Type.REMOVE_DATA_ATTRIBUTE:
+					DOM.removeDataAttribute(patch.target.ref, patch.name);
+					return;
+				case Type.SET_STYLE_PROPERTY:
+					DOM.setStyleProperty(patch.target.ref, patch.property, patch.value);
+					return;
+				case Type.REMOVE_STYLE_PROPERTY:
+					DOM.removeStyleProperty(patch.target.ref, patch.property);
+					return;
+				case Type.SET_CLASS_NAME:
+					DOM.setClassName(patch.target.ref, patch.className);
+					return;
+				case Type.ADD_LISTENER: {
+					const { target, name, listener, isCustom } = patch;
+					DOM.addListener(target.ref, name, listener, isCustom);
+					return;
+				}
+				case Type.REPLACE_LISTENER: {
+					const { target, name, removed, added, isCustom } = patch;
+					DOM.removeListener(target.ref, name, removed, isCustom);
+					DOM.addListener(target.ref, name, added, isCustom);
+					return;
+				}
+				case Type.REMOVE_LISTENER: {
+					const { target, name, listener, isCustom } = patch;
+					DOM.removeListener(target.ref, name, listener, isCustom);
+					return;
+				}
+				case Type.SET_PROPERTY:
+					DOM.setProperty(patch.target.ref, patch.key, patch.value);
+					return;
+				case Type.DELETE_PROPERTY:
+					DOM.deleteProperty(patch.target.ref, patch.key);
+					return;
+				case Type.INSERT_CHILD:
+					patch.parent.insertChild(patch.node, patch.at);
+					return;
+				case Type.REPLACE_CHILD:
+					patch.parent.replaceChild(patch.child, patch.node);
+					return;
+				case Type.MOVE_CHILD:
+					patch.parent.moveChild(patch.child, patch.from, patch.to);
+					return;
+				case Type.REMOVE_CHILD:
+					patch.parent.removeChild(patch.child);
+					return;
+				case Type.SET_CONTENT:
+					patch.parent.setContent(patch.node);
+					return;
+				default: throw new Error(`Unsupported patch type: ${patch.type}`);
+			}
+		},
+		initRootComponent(root) {
+			return {
+				type: Type.INIT_ROOT_COMPONENT,
+				root
+			};
+		},
+		updateNode(node, description) {
+			return {
+				type: Type.UPDATE_NODE,
+				node,
+				prevDescription: node.description,
+				description
+			};
+		},
+		updateRoot(root, description) {
+			return {
+				type: Type.UPDATE_ROOT,
+				root,
+				description
+			};
+		},
+		insertChild(node, at, parent) {
+			return {
+				type: Type.INSERT_CHILD,
+				node,
+				at,
+				parent
+			};
+		},
+		moveChild(child, from, to, parent) {
+			return {
+				type: Type.MOVE_CHILD,
+				child,
+				from,
+				to,
+				parent
+			};
+		},
+		replaceChild(child, node, parent) {
+			return {
+				type: Type.REPLACE_CHILD,
+				child,
+				node,
+				parent
+			};
+		},
+		removeChild(child, at, parent) {
+			return {
+				type: Type.REMOVE_CHILD,
+				child,
+				at,
+				parent
+			};
+		},
+		setContent(node, parent) {
+			return {
+				type: Type.SET_CONTENT,
+				node,
+				child: parent.content,
+				parent
+			};
+		},
+		setAttribute(name, value, target, isCustom) {
+			return {
+				type: Type.SET_ATTRIBUTE,
+				name,
+				value,
+				target,
+				isCustom
+			};
+		},
+		removeAttribute(name, target, isCustom) {
+			return {
+				type: Type.REMOVE_ATTRIBUTE,
+				name,
+				target,
+				isCustom
+			};
+		},
+		setDataAttribute(name, value, target) {
+			return {
+				type: Type.SET_DATA_ATTRIBUTE,
+				name,
+				value,
+				target
+			};
+		},
+		removeDataAttribute(name, target) {
+			return {
+				type: Type.REMOVE_DATA_ATTRIBUTE,
+				name,
+				target
+			};
+		},
+		setStyleProperty(property, value, target) {
+			return {
+				type: Type.SET_STYLE_PROPERTY,
+				property,
+				value,
+				target
+			};
+		},
+		removeStyleProperty(property, target) {
+			return {
+				type: Type.REMOVE_STYLE_PROPERTY,
+				property,
+				target
+			};
+		},
+		setClassName(className, target) {
+			return {
+				type: Type.SET_CLASS_NAME,
+				className,
+				target
+			};
+		},
+		addListener(name, listener, target, isCustom) {
+			return {
+				type: Type.ADD_LISTENER,
+				name,
+				listener,
+				target,
+				isCustom
+			};
+		},
+		replaceListener(name, removed, added, target, isCustom) {
+			return {
+				type: Type.REPLACE_LISTENER,
+				name,
+				removed,
+				added,
+				target,
+				isCustom
+			};
+		},
+		removeListener(name, listener, target, isCustom) {
+			return {
+				type: Type.REMOVE_LISTENER,
+				name,
+				listener,
+				target,
+				isCustom
+			};
+		},
+		setProperty(key, value, target) {
+			return {
+				type: Type.SET_PROPERTY,
+				key,
+				value,
+				target
+			};
+		},
+		deleteProperty(key, target) {
+			return {
+				type: Type.DELETE_PROPERTY,
+				key,
+				target
+			};
+		}
+	};
+	//#endregion
+	//#region src/core/lifecycle.ts
+	let hookErrors = null;
+	const callHook = (hook) => {
+		if (!hookErrors) return hook();
+		try {
+			hook();
+		} catch (error) {
+			hookErrors.push(error);
+		}
+	};
+	const callIgnoringCommands = (component, hook) => {
+		const { dispatcher } = component;
+		const { mode } = dispatcher;
+		dispatcher.ignoreIncoming();
+		try {
+			callHook(hook);
+		} finally {
+			dispatcher.mode = mode;
+		}
+	};
+	const throwErrors = (errors, message) => {
+		if (errors.length === 1) throw errors[0];
+		if (errors.length > 1) throw new AggregateError(errors, message);
+	};
+	const Lifecycle = {
+		/**
+		* Calls the hooks in the callback, collecting the errors they throw in
+		* the given list instead of stopping at the first one.
+		*/
+		collectingErrors(errors, callback) {
+			const prevErrors = hookErrors;
+			hookErrors = errors;
+			try {
+				callback();
+			} finally {
+				hookErrors = prevErrors;
+			}
+		},
+		onComponentCreated(component) {
+			if (component.hasOwnMethod("onCreated")) callHook(() => component.onCreated.call(component.sandbox));
+			if (component.content) this.onNodeCreated(component.content);
+		},
+		onElementCreated(element) {
+			if (element.childNodes) for (const child of element.childNodes) this.onNodeCreated(child);
+		},
+		onNodeCreated(node) {
+			if (node.isElement()) return this.onElementCreated(node);
+			else if (node.isComponent() && !node.isRoot()) return this.onComponentCreated(node);
+		},
+		onRootCreated(root) {
+			if (root.hasOwnMethod("onCreated")) callHook(() => root.onCreated.call(root.sandbox));
+			const { childNodes } = root;
+			if (childNodes) for (const child of childNodes) this.onNodeCreated(child);
+		},
+		onComponentAttached(component) {
+			if (component.content) this.onNodeAttached(component.content);
+			if (component.hasOwnMethod("onAttached")) callHook(() => component.onAttached.call(component.sandbox));
+		},
+		onElementAttached(element) {
+			if (element.childNodes) for (const child of element.childNodes) this.onNodeAttached(child);
+		},
+		onNodeAttached(node) {
+			if (node.isElement()) return this.onElementAttached(node);
+			else if (node.isComponent() && !node.isRoot()) return this.onComponentAttached(node);
+		},
+		onNodeReceivedDescription(node, description) {
+			if (node.isComponent()) this.onComponentReceivedProps(node, description.props);
+		},
+		onNodeUpdated(node, prevDescription) {
+			if (node.isComponent()) this.onComponentUpdated(node, prevDescription.props);
+		},
+		onRootAttached(root) {
+			const { childNodes } = root;
+			if (childNodes) for (const child of childNodes) this.onNodeAttached(child);
+			if (root.hasOwnMethod("onAttached")) callHook(() => root.onAttached.call(root.sandbox));
+		},
+		onComponentReceivedProps(component, nextProps = {}) {
+			if (component.hasOwnMethod("onPropsReceived")) callHook(() => component.onPropsReceived.call(component.sandbox, nextProps));
+		},
+		onComponentUpdated(component, prevProps = {}) {
+			if (component.hasOwnMethod("onUpdated")) callHook(() => component.onUpdated.call(component.sandbox, prevProps));
+		},
+		onComponentDestroyed(component) {
+			component.destroy();
+			if (component.hasOwnMethod("onDestroyed")) callIgnoringCommands(component, () => component.onDestroyed.call(component.sandbox));
+			if (component.content) this.onNodeDestroyed(component.content);
+			if (component.isRoot()) this.onElementDestroyed(component);
+		},
+		onElementDestroyed(element) {
+			if (element.childNodes) for (const child of element.childNodes) this.onNodeDestroyed(child);
+		},
+		onNodeDestroyed(node) {
+			if (node.isElement()) return this.onElementDestroyed(node);
+			else if (node.isComponent() && !node.isRoot()) return this.onComponentDestroyed(node);
+		},
+		onComponentDetached(component) {
+			if (component.isRoot()) this.onElementDetached(component);
+			if (component.content) this.onNodeDetached(component.content);
+			if (component.hasOwnMethod("onDetached")) callIgnoringCommands(component, () => component.onDetached.call(component.sandbox));
+		},
+		onElementDetached(element) {
+			if (element.childNodes) for (const child of element.childNodes) this.onNodeDetached(child);
+		},
+		onNodeDetached(node) {
+			if (node.isElement()) {
+				this.onElementDetached(node);
+				node.parentNode = null;
+			} else if (node.isComponent() && !node.isRoot()) {
+				this.onComponentDetached(node);
+				node.parentNode = null;
+			}
+		},
+		beforeUpdate(patches) {
+			for (const patch of patches) this.beforePatchApplied(patch);
+		},
+		beforePatchApplied(patch) {
+			const Type = Patch.Type;
+			switch (patch.type) {
+				case Type.INIT_ROOT_COMPONENT:
+					this.onRootCreated(patch.root);
+					return;
+				case Type.INSERT_CHILD:
+					this.onNodeCreated(patch.node);
+					return;
+				case Type.REPLACE_CHILD:
+				case Type.SET_CONTENT:
+					this.onNodeDestroyed(patch.child);
+					this.onNodeCreated(patch.node);
+					return;
+				case Type.REMOVE_CHILD:
+					this.onNodeDestroyed(patch.child);
+					return;
+				case Type.UPDATE_NODE:
+					this.onNodeReceivedDescription(patch.node, patch.description);
+					return;
+			}
+		},
+		afterUpdate(patches) {
+			patches = [...patches].reverse();
+			for (const patch of patches) this.afterPatchApplied(patch);
+		},
+		afterPatchApplied(patch) {
+			const Type = Patch.Type;
+			switch (patch.type) {
+				case Type.INIT_ROOT_COMPONENT:
+					this.onRootAttached(patch.root);
+					return;
+				case Type.INSERT_CHILD:
+					this.onNodeAttached(patch.node);
+					return;
+				case Type.REPLACE_CHILD:
+				case Type.SET_CONTENT:
+					this.onNodeDetached(patch.child);
+					this.onNodeAttached(patch.node);
+					return;
+				case Type.REMOVE_CHILD:
+					this.onNodeDetached(patch.child);
+					return;
+				case Type.UPDATE_NODE:
+					this.onNodeUpdated(patch.node, patch.prevDescription);
+					return;
+			}
+		}
+	};
+	//#endregion
+	//#region src/core/plugins.ts
+	const Permission = {
+		LISTEN_FOR_UPDATES: "listen-for-updates",
+		REGISTER_METHOD: "register-method",
+		INJECT_STYLESHEETS: "inject-stylesheets"
+	};
+	var Plugin = class {
+		constructor(manifest) {
+			runtime().assert(typeof manifest.name === "string" && manifest.name.length, "Plugin name must be a non-empty string!");
+			Object.assign(this, manifest);
+			this.origin = manifest;
+			if (this.permissions === void 0) this.permissions = [];
+			else {
+				runtime().assert(Array.isArray(this.permissions), "Plugin permissions must be an array");
+				this.permissions = this.permissions.filter((permission) => Object.values(Permission).includes(permission));
+			}
+			const sandbox = this.createSandbox();
+			if (typeof manifest.register === "function") this.register = () => manifest.register(sandbox);
+			if (typeof manifest.install === "function") this.install = (root) => {
+				const uninstall = manifest.install(root);
+				runtime().assert(typeof uninstall === "function", "The plugin installation must return the uninstall function!");
+				return uninstall;
+			};
+		}
+		isListener() {
+			return this.permissions.includes(Permission.LISTEN_FOR_UPDATES);
+		}
+		isStylesheetProvider() {
+			return this.permissions.includes(Permission.INJECT_STYLESHEETS);
+		}
+		createSandbox() {
+			const sandbox = {};
+			for (const permission of this.permissions) switch (permission) {
+				case Permission.REGISTER_METHOD: sandbox.registerMethod = (name) => Sandbox.registerPluginMethod(name);
+			}
+			return sandbox;
+		}
+	};
+	var Registry = class {
+		constructor() {
+			this.plugins = /* @__PURE__ */ new Map();
+			this.cache = { listeners: [] };
+			this[Symbol.iterator] = () => this.plugins.values()[Symbol.iterator]();
+		}
+		/**
+		* Adds the plugin to the registry
+		*/
+		add(plugin) {
+			runtime().assert(!this.isRegistered(plugin.name), `Plugin '${plugin.name}' is already registered!`);
+			this.plugins.set(plugin.name, plugin);
+			this.updateCache();
+		}
+		/**
+		* Removes the plugin with specified name from the registry.
+		*/
+		remove(name) {
+			this.plugins.delete(name);
+			this.updateCache();
+		}
+		/**
+		* Checks if plugin with specified name exists in the registry.
+		*/
+		isRegistered(name) {
+			return this.plugins.has(name);
+		}
+		/**
+		* Updates the cache.
+		*/
+		updateCache() {
+			const plugins = [...this.plugins.values()];
+			this.cache.listeners = plugins.filter((plugin) => plugin.isListener());
+		}
+	};
+	var Plugins = class {
+		static Plugin = Plugin;
+		constructor(root) {
+			this.root = root;
+			this.registry = new Registry();
+			this.uninstalls = /* @__PURE__ */ new Map();
+			this[Symbol.iterator] = () => this.registry[Symbol.iterator]();
+		}
+		/**
+		* Creates a Plugin instance from the manifest object and registers it.
+		*/
+		register(plugin) {
+			if (!(plugin instanceof Plugin)) plugin = new Plugin(plugin);
+			if (plugin.register) plugin.register();
+			this.registry.add(plugin);
+		}
+		installAll() {
+			for (const plugin of this.registry) this.install(plugin);
+		}
+		install(plugin) {
+			if (this.root && plugin.install) {
+				const uninstall = plugin.install(this.root);
+				this.uninstalls.set(plugin.name, uninstall);
+			}
+		}
+		/**
+		* Removes the plugin from the registry and invokes it's uninstall method
+		* if present.
+		*/
+		uninstall(name) {
+			const uninstall = this.uninstalls.get(name);
+			this.uninstalls.delete(name);
+			this.registry.remove(name);
+			if (uninstall) uninstall();
+		}
+		/**
+		* Uninstalls all the plugins from the registry.
+		*/
+		destroy() {
+			for (const plugin of this.registry) this.uninstall(plugin.name);
+			this.root = null;
+		}
+		/**
+		* Invokes listener methods on registered listener plugins.
+		*/
+		notify(action, event) {
+			switch (action) {
+				case "before-update":
+					for (const listener of this.registry.cache.listeners) listener.onBeforeUpdate(event);
+					return;
+				case "after-update":
+					for (const listener of this.registry.cache.listeners) listener.onAfterUpdate(event);
+					return;
+				default: throw new Error(`Unknown action: ${action}`);
+			}
+		}
+	};
+	//#endregion
+	//#region src/core/custom-element.ts
+	const cssImports = (paths) => paths.map((path) => `@import url(${path});`).join("\n");
+	var ComponentElement = class extends HTMLElement {
+		constructor(root) {
+			super();
+			this.$root = root;
+			this.stylesheets = [];
+			this.styleElement = null;
+			this.stylesheetsLoaded = Promise.resolve();
+			addPluginsAPI(this);
+			root.shadow = this.attachShadow({ mode: "open" });
+			const stylesheets = root.getStylesheets();
+			const init = () => {
+				root.init().catch((error) => root.markAsFailed(error));
+			};
+			if (stylesheets.length) this.loadStylesheets(stylesheets).then(init, (error) => root.markAsFailed(error));
+			else init();
+		}
+		/**
+		* Replaces the stylesheets imported in the shadow root, keeping the
+		* previous ones until the new ones are loaded.
+		*/
+		loadStylesheets(stylesheets) {
+			const previous = this.styleElement;
+			this.stylesheets = stylesheets;
+			let loaded = Promise.resolve();
+			if (stylesheets.length) {
+				const style = document.createElement("style");
+				style.textContent = cssImports(stylesheets);
+				loaded = new Promise((resolve, reject) => {
+					style.onload = () => resolve();
+					style.onerror = () => reject(/* @__PURE__ */ new Error(`Error loading stylesheets: ${stylesheets.join(", ")}`));
+				});
+				if (previous) previous.after(style);
+				else this.shadowRoot.prepend(style);
+				this.styleElement = style;
+			} else this.styleElement = null;
+			if (previous) Promise.allSettled([this.stylesheetsLoaded, loaded]).then(() => previous.remove());
+			this.stylesheetsLoaded = loaded;
+			return loaded;
+		}
+		get isComponentElement() {
+			return true;
+		}
+		connectedCallback() {
+			clearTimeout(this.pendingDestruction);
+		}
+		disconnectedCallback() {
+			this.pendingDestruction = setTimeout(() => this.destroy(), 50);
+		}
+		destroy() {
+			const root = this.$root;
+			if (!root) return;
+			const errors = [];
+			Lifecycle.collectingErrors(errors, () => {
+				Lifecycle.onComponentDestroyed(root);
+				Lifecycle.onComponentDetached(root);
+			});
+			root.ref = null;
+			this.$root = null;
+			throwErrors(errors, "Errors destroying the component");
+		}
+	};
+	const addPluginsAPI = (element) => {
+		const { Plugin } = Plugins;
+		element.install = (plugin, cascade = true) => {
+			const installTo = (root) => {
+				if (plugin instanceof Plugin) {
+					root.plugins.registry.add(plugin);
+					root.plugins.install(plugin);
+				} else root.plugins.install(plugin);
+				if (cascade) for (const subroot of root.subroots) installTo(subroot);
+			};
+			installTo(element.$root);
+		};
+		element.uninstall = (plugin, cascade = true) => {
+			const name = typeof plugin === "string" ? plugin : plugin.name;
+			const uninstallFrom = (root) => {
+				root.plugins.uninstall(name);
+				if (cascade) for (const subroot of root.subroots) uninstallFrom(subroot);
+			};
+			uninstallFrom(element.$root);
+		};
+	};
+	/**
+	* Loads the stylesheets of the root in its custom element when they
+	* changed, e.g. with the plugins reconfigured.
+	*/
+	const updateStylesheets = (root) => {
+		const element = root.ref;
+		const stylesheets = root.getStylesheets();
+		if (!isSameList(stylesheets, element.stylesheets)) element.loadStylesheets(stylesheets).catch((error) => console.error(error));
+	};
+	/**
+	* Creates a new Custom Element instance assigned to specified Web Component.
+	*/
+	const createComponentElement = (root) => {
+		const defineCustomElementClass = (RootClass) => {
+			let ElementClass = customElements.get(RootClass.elementName);
+			if (!ElementClass) {
+				ElementClass = class RootElement extends ComponentElement {};
+				customElements.define(RootClass.elementName, ElementClass);
+				RootClass.prototype.elementClass = ElementClass;
+			}
+			return ElementClass;
+		};
+		const element = new (defineCustomElementClass(root.constructor))(root);
+		for (const [name, value] of Object.entries(root.description.attrs ?? {})) DOM.setAttribute(element, name, value, true);
+		return element;
+	};
+	//#endregion
+	//#region src/core/draft.ts
+	const drafts = /* @__PURE__ */ new WeakMap();
+	const targets = /* @__PURE__ */ new WeakMap();
+	const ARRAY_SEARCHES = /* @__PURE__ */ new Set([
+		"includes",
+		"indexOf",
+		"lastIndexOf"
+	]);
+	const TYPED_ARRAY_MUTATORS = /* @__PURE__ */ new Set([
+		"copyWithin",
+		"fill",
+		"reverse",
+		"set",
+		"sort",
+		"subarray"
+	]);
+	const getKind = (value) => {
+		if (typeof value !== "object" || value === null) return null;
+		if (ArrayBuffer.isView(value)) return value instanceof DataView ? null : "typed-array";
+		switch (Object.getPrototypeOf(value)) {
+			case Object.prototype:
+			case null: return "object";
+			case Array.prototype: return "array";
+			case Map.prototype: return "map";
+			case Set.prototype: return "set";
+			case Date.prototype: return "date";
+			default: return null;
+		}
+	};
+	const INVALID_VALUE = "The state can contain only primitives, functions, plain objects, arrays, maps, sets, dates and typed arrays";
+	const checkValue = (value) => {
+		const kind = getKind(value);
+		invariant(kind || typeof value !== "object" || value === null, INVALID_VALUE);
+		return kind;
+	};
+	const current = (draft) => draft.copy ?? draft.base;
+	const createDraft = (base, kind, parent, scope) => {
+		const target = kind === "array" ? [] : Object.create(Object.getPrototypeOf(base));
+		const { proxy, revoke } = Proxy.revocable(target, handler);
+		const draft = {
+			kind,
+			base,
+			copy: null,
+			parent,
+			scope,
+			modified: false,
+			proxy,
+			result: null,
+			items: null
+		};
+		drafts.set(proxy, draft);
+		targets.set(target, draft);
+		scope.revokes.push(revoke);
+		return proxy;
+	};
+	const prepareCopy = (draft) => {
+		if (draft.copy) return;
+		const { base } = draft;
+		switch (draft.kind) {
+			case "object":
+				draft.copy = Object.assign(Object.create(Object.getPrototypeOf(base)), base);
+				break;
+			case "array":
+				draft.copy = base.slice();
+				break;
+			case "map":
+				draft.copy = new Map(base);
+				break;
+			case "set": {
+				const copy = /* @__PURE__ */ new Set();
+				draft.items = /* @__PURE__ */ new Map();
+				for (const item of base) {
+					const kind = checkValue(item);
+					if (kind) {
+						const itemDraft = createDraft(item, kind, draft, draft.scope);
+						draft.items.set(item, itemDraft);
+						copy.add(itemDraft);
+					} else copy.add(item);
+				}
+				draft.copy = copy;
+				break;
+			}
+			case "date":
+				draft.copy = new Date(base.getTime());
+				break;
+			case "typed-array": draft.copy = base.slice();
+		}
+	};
+	const markModified = (draft) => {
+		while (draft && !draft.modified) {
+			prepareCopy(draft);
+			draft.modified = true;
+			draft = draft.parent;
+		}
+	};
+	const getValue = (draft, value, baseValue, store) => {
+		if (drafts.has(value)) return value;
+		const kind = checkValue(value);
+		if (!kind || value !== baseValue) return value;
+		prepareCopy(draft);
+		const child = createDraft(value, kind, draft, draft.scope);
+		store(draft.copy, child);
+		return child;
+	};
+	const getOriginal = (value) => typeof value === "object" && value !== null && drafts.get(value)?.base || value;
+	const getProperty = (draft, key) => {
+		const source = current(draft);
+		if (draft.kind === "array" && ARRAY_SEARCHES.has(key)) return (value, ...args) => {
+			return current(draft).map(getOriginal)[key](getOriginal(value), ...args);
+		};
+		if (!Object.hasOwn(source, key)) return Reflect.get(source, key, draft.proxy);
+		const base = draft.base;
+		return getValue(draft, source[key], Object.hasOwn(base, key) ? base[key] : void 0, (copy, child) => copy[key] = child);
+	};
+	const getMapValue = (draft, key) => {
+		const source = current(draft);
+		return getValue(draft, source.get(key), draft.base.get(key), (copy, child) => copy.set(key, child));
+	};
+	const mapMethods = /* @__PURE__ */ new Map([
+		["get", (draft) => (key) => getMapValue(draft, key)],
+		["set", (draft) => (key, value) => {
+			const source = current(draft);
+			if (!source.has(key) || !Object.is(source.get(key), value)) {
+				markModified(draft);
+				draft.copy.set(key, value);
+			}
+			return draft.proxy;
+		}],
+		["delete", (draft) => (key) => {
+			if (!current(draft).has(key)) return false;
+			markModified(draft);
+			return draft.copy.delete(key);
+		}],
+		["clear", (draft) => () => {
+			if (current(draft).size) {
+				markModified(draft);
+				draft.copy.clear();
+			}
+		}],
+		["forEach", (draft) => (callback, thisArg) => {
+			for (const key of [...current(draft).keys()]) callback.call(thisArg, getMapValue(draft, key), key, draft.proxy);
+		}],
+		["keys", (draft) => () => [...current(draft).keys()].values()],
+		["values", (draft) => function* () {
+			for (const key of [...current(draft).keys()]) yield getMapValue(draft, key);
+		}],
+		["entries", (draft) => () => mapEntries(draft)],
+		[Symbol.iterator, (draft) => () => mapEntries(draft)]
+	]);
+	function* mapEntries(draft) {
+		for (const key of [...current(draft).keys()]) yield [key, getMapValue(draft, key)];
+	}
+	const hasSetItem = (draft, item) => {
+		const source = current(draft);
+		if (source.has(item)) return true;
+		const itemDraft = draft.items?.get(item);
+		return itemDraft !== void 0 && source.has(itemDraft);
+	};
+	const setMethods = /* @__PURE__ */ new Map([
+		["has", (draft) => (item) => hasSetItem(draft, item)],
+		["add", (draft) => (item) => {
+			if (!hasSetItem(draft, item)) {
+				markModified(draft);
+				draft.copy.add(item);
+			}
+			return draft.proxy;
+		}],
+		["delete", (draft) => (item) => {
+			if (!hasSetItem(draft, item)) return false;
+			markModified(draft);
+			const copy = draft.copy;
+			return copy.delete(item) || copy.delete(draft.items.get(item));
+		}],
+		["clear", (draft) => () => {
+			if (current(draft).size) {
+				markModified(draft);
+				draft.copy.clear();
+			}
+		}],
+		["forEach", (draft) => (callback, thisArg) => {
+			for (const item of setItems(draft)) callback.call(thisArg, item, item, draft.proxy);
+		}],
+		["keys", (draft) => () => setItems(draft).values()],
+		["values", (draft) => () => setItems(draft).values()],
+		[Symbol.iterator, (draft) => () => setItems(draft).values()],
+		["entries", (draft) => () => setItems(draft).map((item) => [item, item]).values()]
+	]);
+	const setItems = (draft) => {
+		prepareCopy(draft);
+		return [...draft.copy];
+	};
+	const getSlotProperty = (draft, key) => {
+		if (draft.kind === "map" || draft.kind === "set") {
+			const method = (draft.kind === "map" ? mapMethods : setMethods).get(key);
+			if (method) return method(draft);
+			if (draft.kind === "set" && key !== "size") prepareCopy(draft);
+		}
+		if (draft.kind === "typed-array" && key === "buffer") {
+			markModified(draft);
+			return draft.copy.buffer;
+		}
+		const source = current(draft);
+		if (draft.kind === "typed-array" && Object.hasOwn(source, key)) return source[key];
+		const value = Reflect.get(source, key, source);
+		if (typeof value !== "function" || key === "constructor") return value;
+		const method = value;
+		if (!(draft.kind === "date" ? typeof key === "string" && key.startsWith("set") : draft.kind === "typed-array" && TYPED_ARRAY_MUTATORS.has(key))) return method.bind(source);
+		return (...args) => {
+			prepareCopy(draft);
+			const copy = draft.copy;
+			const time = draft.kind === "date" ? copy.getTime() : null;
+			const result = method.apply(copy, args);
+			if (draft.kind !== "date" || !Object.is(time, copy.getTime())) markModified(draft);
+			return result === copy ? draft.proxy : result;
+		};
+	};
+	const handler = {
+		get(target, key) {
+			const draft = targets.get(target);
+			return draft.kind === "object" || draft.kind === "array" ? getProperty(draft, key) : getSlotProperty(draft, key);
+		},
+		set(target, key, value) {
+			const draft = targets.get(target);
+			const source = current(draft);
+			if (Object.hasOwn(source, key) && Object.is(source[key], value)) return true;
+			markModified(draft);
+			draft.copy[key] = value;
+			return true;
+		},
+		deleteProperty(target, key) {
+			const draft = targets.get(target);
+			if (Object.hasOwn(current(draft), key)) {
+				markModified(draft);
+				delete draft.copy[key];
+			}
+			return true;
+		},
+		has(target, key) {
+			return key in current(targets.get(target));
+		},
+		ownKeys(target) {
+			return Reflect.ownKeys(current(targets.get(target)));
+		},
+		getOwnPropertyDescriptor(target, key) {
+			const draft = targets.get(target);
+			const source = current(draft);
+			const descriptor = Reflect.getOwnPropertyDescriptor(source, key);
+			if (!descriptor) return;
+			const configurable = draft.kind !== "array" || key !== "length";
+			return "value" in descriptor ? {
+				...descriptor,
+				value: source[key],
+				writable: true,
+				configurable
+			} : {
+				...descriptor,
+				configurable
+			};
+		},
+		defineProperty(target, key, descriptor) {
+			const draft = targets.get(target);
+			markModified(draft);
+			return Reflect.defineProperty(draft.copy, key, descriptor);
+		},
+		setPrototypeOf() {
+			return false;
+		},
+		preventExtensions() {
+			return false;
+		}
+	};
+	const finalize = (value, scope) => {
+		if (typeof value !== "object" || value === null) return value;
+		const draft = drafts.get(value);
+		if (draft) return finalizeDraft(draft);
+		const kind = checkValue(value);
+		if (scope.visited.has(value) || Object.isFrozen(value)) return value;
+		scope.visited.add(value);
+		switch (kind) {
+			case "object":
+			case "array": {
+				const entries = value;
+				for (const key of Reflect.ownKeys(entries)) {
+					const next = finalize(entries[key], scope);
+					if (next !== entries[key]) entries[key] = next;
+				}
+				break;
+			}
+			case "map": {
+				const map = value;
+				for (const [key, item] of map) {
+					const next = finalize(item, scope);
+					if (next !== item) map.set(key, next);
+				}
+				break;
+			}
+			case "set": {
+				const set = value;
+				const items = [...set];
+				const nextItems = items.map((item) => finalize(item, scope));
+				if (nextItems.some((item, index) => item !== items[index])) {
+					set.clear();
+					nextItems.forEach((item) => set.add(item));
+				}
+				break;
+			}
+		}
+		return value;
+	};
+	const finalizeDraft = (draft) => {
+		if (draft.result) return draft.result;
+		if (!draft.modified) return draft.result = draft.base;
+		const { base, copy, scope } = draft;
+		draft.result = copy;
+		switch (draft.kind) {
+			case "object":
+			case "array": {
+				const entries = copy;
+				for (const key of Reflect.ownKeys(entries)) {
+					const value = entries[key];
+					if (value !== base[key]) {
+						const next = finalize(value, scope);
+						if (next !== value) entries[key] = next;
+					}
+				}
+				break;
+			}
+			case "map": {
+				const map = copy;
+				for (const [key, value] of map) if (value !== base.get(key)) map.set(key, finalize(value, scope));
+				break;
+			}
+			case "set": {
+				const set = copy;
+				const items = [...set];
+				set.clear();
+				items.forEach((item) => set.add(finalize(item, scope)));
+				break;
+			}
+		}
+		return draft.result;
+	};
+	const produce = (base, recipe) => {
+		const kind = getKind(base);
+		invariant(kind, INVALID_VALUE);
+		const scope = {
+			revokes: [],
+			visited: /* @__PURE__ */ new WeakSet()
+		};
+		const root = createDraft(base, kind, null, scope);
+		try {
+			recipe(root);
+			return finalizeDraft(drafts.get(root));
+		} finally {
+			scope.revokes.forEach((revoke) => revoke());
+		}
+	};
+	//#endregion
+	//#region src/core/dispatcher.ts
+	const Mode = {
+		EXECUTE: Symbol("execute-commands"),
+		IGNORE: Symbol("ignore-commands")
+	};
+	const MAX_FLUSH_CYCLES = 4;
+	const coreAPI = {
+		update(overrides) {
+			return (state) => ({
+				...state,
+				...overrides
+			});
+		},
+		replace(state) {
+			return () => state;
+		}
+	};
+	var Command = class {
+		constructor(name, args, update) {
+			this.name = name;
+			this.args = args;
+			this.update = update;
+		}
+		invoke(state) {
+			return this.update(state);
+		}
+	};
+	const createCommandsAPI = (...apis) => {
+		const commandsAPI = {};
+		for (const api of apis) {
+			const overridden = Object.keys(api).find((key) => Object.hasOwn(coreAPI, key) || Object.hasOwn(commandsAPI, key));
+			if (overridden) throw new Error(`The "${overridden}" command is already defined!`);
+			Object.assign(commandsAPI, api);
+		}
+		return commandsAPI;
+	};
+	var Dispatcher = class {
+		ignoreIncoming() {
+			this.mode = Mode.IGNORE;
+		}
+		constructor(root) {
+			this.mode = Mode.EXECUTE;
+			this.queue = [];
+			this.isFlushing = false;
+			this.root = root;
+			this.commands = {};
+			const { commands = [] } = root.constructor;
+			this.api = createCommandsAPI(...Array.isArray(commands) ? commands : [commands]);
+			this.names = [...Object.keys(coreAPI), ...Object.keys(this.api)];
+			for (const name of this.names) this.commands[name] = (...args) => this.issue(name, args);
+		}
+		createCommand(name, args) {
+			const method = this.api[name];
+			return new Command(name, args, method ? (state) => produce(state, (draft) => {
+				const result = method.apply(draft, args);
+				if (result instanceof Promise) {
+					result.catch(() => {});
+					throw new Error(`The "${name}" command must be synchronous!`);
+				}
+			}) : coreAPI[name](...args));
+		}
+		issue(name, args) {
+			if (this.mode === Mode.IGNORE) return Promise.resolve(false);
+			const command = this.createCommand(name, args);
+			const done = new Promise((resolve, reject) => {
+				command.resolve = resolve;
+				command.reject = reject;
+			});
+			this.queue.push(command);
+			if (this.queue.length === 1 && !this.isFlushing) queueMicrotask(() => this.flush());
+			return done;
+		}
+		/**
+		* Sets the state right away, when the root is rendered or receives
+		* new props from its parent.
+		*/
+		setState(state) {
+			if (this.mode === Mode.IGNORE) return;
+			this.execute([this.createCommand("replace", [state])]);
+		}
+		/**
+		* Updates the root with the state calculated by the commands in turn.
+		*/
+		execute(commands) {
+			const prevState = this.root.state;
+			const nextState = commands.reduce((state, command) => command.invoke(state), prevState);
+			runtime().update(this.root, prevState, nextState, commands);
+		}
+		/**
+		* Executes the queued commands, followed by the ones issued in lifecycle
+		* methods in turn, until there are none left. When an update fails, its
+		* commands reject, and the ones issued in its lifecycle methods are still
+		* executed, as the update is completed.
+		*/
+		flush() {
+			this.isFlushing = true;
+			try {
+				for (let cycle = 1; this.queue.length; cycle++) {
+					const commands = this.queue.splice(0);
+					if (this.mode === Mode.IGNORE) {
+						commands.forEach((command) => command.resolve(false));
+						continue;
+					}
+					try {
+						if (cycle > MAX_FLUSH_CYCLES) throw new Error("Too many cycles updating state in lifecycle methods!");
+						this.execute(commands);
+					} catch (error) {
+						commands.forEach((command) => command.reject(error));
+						continue;
+					}
+					commands.forEach((command) => command.resolve(true));
+				}
+			} finally {
+				this.isFlushing = false;
+			}
+		}
+	};
+	//#endregion
+	//#region src/core/web-component.ts
+	const CONTAINER = Symbol("container");
+	const CUSTOM_ELEMENT = Symbol("custom-element");
+	const DISPATCHER = Symbol("dispatcher");
+	var WebComponent = class WebComponent extends Component {
+		static NodeType = "root";
+		static styles = [];
+		constructor(description, parent = null, context = null) {
+			super(description, parent, context, false);
+			CreatedRoots.collectRoot(this);
+			this.subroots = /* @__PURE__ */ new Set();
+			this.dispatcher = new Dispatcher(this);
+			this.ready = new Promise((resolve, reject) => {
+				this.markAsReady = resolve;
+				this.markAsFailed = reject;
+			});
+			this.plugins = this.createPlugins();
+			runtime().track(this);
+			this.content = this.createPlaceholder();
+			this.shadow = null;
+			this.attachDOM();
+		}
+		attachDOM() {
+			if (this.constructor.elementName) {
+				this.ref = createComponentElement(this);
+				this.plugins.installAll();
+			} else {
+				this.plugins.installAll();
+				super.attachDOM();
+			}
+		}
+		createPlaceholder() {
+			return new Comment(new CommentDescription(this.constructor.displayName));
+		}
+		/**
+		* Triggers the initial rendering of the component in given container.
+		*/
+		async init() {
+			const state = await this.getInitialState.call(this.sandbox, this.description.props || {});
+			this.setState(state);
+			if (this.pendingDescription) {
+				const description = this.pendingDescription;
+				delete this.pendingDescription;
+				setTimeout(() => this.update(description));
+			}
+			this.isInitialized = true;
+			this.markAsReady();
+		}
+		setState(state) {
+			if (state.constructor !== Object) throw new Error("Web Component state must be a plain object!");
+			this.dispatcher.setState(Template.normalizeComponentProps(state, this.constructor));
+		}
+		/**
+		* Triggers the component update.
+		*/
+		update(description) {
+			if (!this.isInitialized) {
+				this.pendingDescription = description;
+				return;
+			}
+			const state = this.getUpdatedState(description.props || {}, this.state || {});
+			this.setState(state);
+		}
+		/**
+		* The default implementation delegating the calculation of initial state
+		* to the state manager.
+		*/
+		getInitialState(props) {
+			return { ...props };
+		}
+		/**
+		* The default implementation delegating the calculation of updated state
+		* to the state manager.
+		*/
+		getUpdatedState(props, state) {
+			return {
+				...state,
+				...props
+			};
+		}
+		get dispatcher() {
+			return this[DISPATCHER];
+		}
+		set dispatcher(dispatcher) {
+			this[DISPATCHER] = dispatcher;
+		}
+		get commands() {
+			return this.dispatcher.commands;
+		}
+		createPlugins() {
+			const plugins = new Plugins(this);
+			const inherited = this.parentNode ? this.parentNode.plugins : runtime().plugins;
+			for (const plugin of inherited) plugins.register(plugin);
+			return plugins;
+		}
+		async mount(container) {
+			if (this.constructor.elementName) {
+				container.appendChild(this.ref);
+				await this.ready;
+			} else {
+				this.container = container;
+				await this.init();
+			}
+			return this;
+		}
+		getStylesheets() {
+			const stylesheets = [];
+			const stylesheetProviders = [...this.plugins].filter((plugin) => plugin.isStylesheetProvider());
+			for (const plugin of stylesheetProviders) {
+				if (typeof plugin.getStylesheets !== "function") throw new Error(`Plugin '${plugin.name}' must provide the getStylesheets() method!`);
+				stylesheets.push(...plugin.getStylesheets());
+			}
+			const RootClass = this.constructor;
+			if (Array.isArray(RootClass.styles)) stylesheets.push(...RootClass.styles);
+			return stylesheets;
+		}
+		get ref() {
+			return this[CUSTOM_ELEMENT] || super.ref;
+		}
+		set ref(ref) {
+			this[CUSTOM_ELEMENT] = ref;
+		}
+		set container(container) {
+			this[CONTAINER] = container;
+		}
+		get container() {
+			return this[CONTAINER];
+		}
+		get tracked() {
+			const tracked = [];
+			for (const root of this.subroots) tracked.push(root, ...root.tracked);
+			return tracked;
+		}
+		destroy() {
+			if (!this.plugins) return;
+			super.destroy();
+			this.stopTracking?.();
+			this.dispatcher.ignoreIncoming();
+			this.plugins.destroy();
+			this.plugins = null;
+			this.parentNode = null;
+		}
+		setChildNodes(nodes) {
+			ChildNodes.set(this, nodes);
+		}
+		insertChild(child, index) {
+			ChildNodes.insert(this, child, index);
+		}
+		replaceChild(child, node) {
+			ChildNodes.replace(this, child, node);
+		}
+		moveChild(child, from, to) {
+			ChildNodes.move(this, child, from, to);
+		}
+		removeChild(child) {
+			ChildNodes.remove(this, child);
+		}
+		get nodeType() {
+			return WebComponent.NodeType;
+		}
+	};
+	//#endregion
+	//#region src/core/service.ts
+	var Service = class {
+		static validate(listeners) {
+			if (runtime().isDebug()) {
+				const keys = Object.keys(listeners);
+				runtime().assert(this.events instanceof Array, `Service "${this.name}" does not provide information about valid events, implement "static events = ['foo', 'bar']"`);
+				runtime().assert(this.events.length > 0, `Service "${this.name}" returned an empty list of valid events, the "static events" list must contain at least one event name`);
+				const unsupportedKeys = keys.filter((key) => !this.events.includes(key));
+				for (const unsupportedKey of unsupportedKeys) runtime().warn(`Unsupported listener specified "${unsupportedKey}" when connecting to ${this.name}`);
+				const supportedKeys = this.events.filter((event) => keys.includes(event));
+				runtime().assert(supportedKeys.length > 0, `No valid listener specified when connecting to ${this.name}, use one of [${this.events.join(", ")}]`);
+				for (const supportedKey of supportedKeys) runtime().assert(listeners[supportedKey] instanceof Function, `Specified listener "${supportedKey}" for ${this.name} is not a function`);
+			}
+			return this.events.filter((event) => listeners[event] instanceof Function);
+		}
+	};
+	//#endregion
+	//#region src/core/reconciler.ts
+	const Name = {
+		INSERT: Symbol("insert"),
+		MOVE: Symbol("move"),
+		REMOVE: Symbol("remove")
+	};
+	var Move = class Move {
+		static Name = Name;
+		constructor(name, item, props, make) {
+			this.name = name;
+			this.item = item;
+			this.at = props.at;
+			this.from = props.from;
+			this.to = props.to;
+			this.make = make;
+		}
+		static insert(item, at) {
+			return new Move(Name.INSERT, item, { at }, (items) => {
+				items.splice(at, 0, item);
+			});
+		}
+		static move(item, from, to) {
+			return new Move(Name.MOVE, item, {
+				from,
+				to
+			}, (items) => {
+				items.splice(from, 1);
+				items.splice(to, 0, item);
+			});
+		}
+		static remove(item, at) {
+			return new Move(Name.REMOVE, item, { at }, (items) => {
+				items.splice(at, 1);
+			});
+		}
+	};
+	const Reconciler = {
+		comparator(a, b) {
+			if (Object.is(a.key, b.key)) return 0;
+			return a.key > b.key ? 1 : -1;
+		},
+		calculateMoves(source, target) {
+			const moves = [];
+			const createItem = function(key, index) {
+				return {
+					key,
+					index
+				};
+			};
+			const before = source.map(createItem).sort(this.comparator);
+			const after = target.map(createItem).sort(this.comparator);
+			let removed = [];
+			let inserted = [];
+			while (before.length || after.length) {
+				if (!before.length) {
+					inserted = inserted.concat(after);
+					break;
+				}
+				if (!after.length) {
+					removed = removed.concat(before);
+					break;
+				}
+				const result = this.comparator(after[0], before[0]);
+				if (result === 0) {
+					before.shift();
+					after.shift();
+				} else if (result === 1) removed.push(before.shift());
+				else inserted.push(after.shift());
+			}
+			const sortByIndex = function(foo, bar) {
+				return foo.index - bar.index;
+			};
+			removed.sort(sortByIndex).reverse();
+			inserted.sort(sortByIndex);
+			const result = [...source];
+			for (const item of removed) {
+				const move = Move.remove(item.key, item.index);
+				move.make(result);
+				moves.push(move);
+			}
+			for (const item of inserted) {
+				const move = Move.insert(item.key, item.index);
+				move.make(result);
+				moves.push(move);
+			}
+			if (result.length === target.length && result.every((key, index) => key === target[index])) {
+				moves.result = result;
+				return moves;
+			}
+			const calculateIndexChanges = (source, target, reversed = false) => {
+				const moves = [];
+				const moveItemIfNeeded = (index) => {
+					const item = target[index];
+					if (source[index] !== item) {
+						const from = source.indexOf(item);
+						const move = Move.move(item, from, index);
+						move.make(source);
+						moves.push(move);
+					}
+				};
+				if (reversed) for (let i = target.length - 1; i >= 0; i--) moveItemIfNeeded(i);
+				else for (let i = 0; i < target.length; i++) moveItemIfNeeded(i);
+				moves.result = source;
+				return moves;
+			};
+			const defaultMoves = calculateIndexChanges([...result], target);
+			if (defaultMoves.length > 1) {
+				const alternativeMoves = calculateIndexChanges([...result], target, true);
+				if (alternativeMoves.length <= defaultMoves.length) {
+					moves.push(...alternativeMoves);
+					moves.result = alternativeMoves.result;
+					return moves;
+				}
+			}
+			moves.push(...defaultMoves);
+			moves.result = defaultMoves.result;
+			return moves;
+		},
+		Move
+	};
+	//#endregion
+	//#region src/core/virtual-dom.ts
+	const VirtualDOM = {
+		/**
+		* Creates a new Virtual DOM structure from given description.
+		*/
+		createFromDescription(description, parent, context) {
+			if (!description) return null;
+			switch (description.type) {
+				case "component": return this.createComponent(description, parent, context);
+				case "element": {
+					const element = new VirtualElement(description, parent, context);
+					this.createChildNodes(element);
+					return element;
+				}
+				case "comment": return new Comment(description, parent);
+				case "text": return new Text(description, parent);
+				default: throw new Error(`Unsupported node type: ${description.type}`);
+			}
+		},
+		/**
+		* Creates the child nodes of an element or a Web Component.
+		*/
+		createChildNodes(parent) {
+			const { children } = parent.description;
+			if (children) parent.setChildNodes(children.map((description) => this.createFromDescription(description, parent, parent.context)));
+		},
+		/**
+		* Creates a new component instance from given description.
+		*/
+		createComponent(description, parent, context) {
+			const ComponentClass = description.component;
+			if (ComponentClass.prototype instanceof WebComponent) return this.createWebComponent(description, parent && parent.rootNode, context, true);
+			const component = new ComponentClass(description, parent, context);
+			const nodeDescription = component.renderDescription(description.props, description.childrenAsTemplates);
+			component.content = this.createFromDescription(nodeDescription, component, context);
+			return component;
+		},
+		/**
+		* Creates a new Web Component instance from given description.
+		*/
+		createWebComponent(description, parent, context, requireCustomElement = false) {
+			try {
+				const ComponentClass = description.component;
+				if (requireCustomElement && !ComponentClass.elementName) throw new Error(`Root component "${ComponentClass.displayName}" does not define custom element name!`);
+				const root = new ComponentClass(description, parent, context);
+				if (ComponentClass.elementName) this.createChildNodes(root);
+				return root;
+			} catch (error) {
+				console.error("Error rendering root component:", description);
+				throw error;
+			}
+		}
+	};
+	//#endregion
+	//#region src/core/diff.ts
+	const compareKeys = (current, next, isEqual = (value, nextValue) => value === nextValue) => {
+		const keys = Object.keys(current);
+		const nextKeys = Object.keys(next);
+		return {
+			added: nextKeys.filter((key) => !keys.includes(key)),
+			removed: keys.filter((key) => !nextKeys.includes(key)),
+			changed: keys.filter((key) => nextKeys.includes(key) && !isEqual(current[key], next[key]))
+		};
+	};
+	var Diff = class Diff {
+		/**
+		* Creates a new instance bound to a root component
+		* with an empty list of patches.
+		*/
+		constructor(root, currentState, nextState) {
+			this.root = root;
+			this.patches = [];
+			CreatedRoots.destroyingRootsOnError(() => this.calculate(currentState, nextState));
+		}
+		/**
+		* Adds the patch to the underlying list.
+		*/
+		addPatch(patch) {
+			return this.patches.push(patch);
+		}
+		/**
+		* Applies all the patches onto the bound root node.
+		*/
+		apply() {
+			if (this.patches.length) {
+				const errors = [];
+				Lifecycle.collectingErrors(errors, () => Lifecycle.beforeUpdate(this.patches));
+				const failedRoots = /* @__PURE__ */ new Set();
+				const applied = [];
+				for (const patch of this.patches) {
+					if (patch.type === Patch.Type.UPDATE_NODE && failedRoots.has(patch.node)) continue;
+					try {
+						Patch.apply(patch);
+					} catch (error) {
+						errors.push(error);
+						if (patch.type === Patch.Type.UPDATE_ROOT) failedRoots.add(patch.root);
+						continue;
+					}
+					applied.push(patch);
+				}
+				Lifecycle.collectingErrors(errors, () => Lifecycle.afterUpdate(applied));
+				throwErrors(errors, "Errors applying the update");
+			}
+			return this.patches;
+		}
+		/**
+		* Calculates and returns all patches needed for transformation
+		* of the rendered DOM fragment from one state to another.
+		*/
+		calculate(currentState, nextState) {
+			if (!currentState) this.addPatch(Patch.initRootComponent(this.root));
+			if (Diff.deepEqual(currentState, nextState)) return;
+			const template = [this.root.constructor, nextState];
+			if (this.root.description.children) template.push(...this.root.description.children.map((child) => child.asTemplate));
+			const description = Template.describe(template);
+			if (!this.root.isInitialized || !Diff.deepEqual(this.root.description, description)) this.componentPatches(this.root, description);
+			if (this.root.description.attrs || description.attrs) this.attributePatches(this.root.description.attrs, description.attrs, this.root, true);
+		}
+		/**
+		* Renders the descendants with normalized props and children passed
+		* from the parent component.
+		*
+		* Calculates the patches needed for transformation of a component
+		* to match the given description.
+		*/
+		componentPatches(component, description) {
+			const nodeDescription = component.renderDescription(description.props, description.childrenAsTemplates);
+			this.componentContentPatches(nodeDescription, component);
+			this.addPatch(Patch.updateNode(component, description));
+		}
+		componentContentPatches(description, parent) {
+			const content = parent.content;
+			if (!content && !description) return;
+			if (!content || !description) throw new Error("Invalid component state!");
+			if (content.description.isCompatible(description)) {
+				this.childPatches(content, description);
+				return;
+			}
+			const node = VirtualDOM.createFromDescription(description, parent, this.root);
+			this.addPatch(Patch.setContent(node, parent));
+		}
+		/**
+		* Calculates patches for transformation of specified child node
+		* to match given description.
+		*/
+		childPatches(child, description) {
+			if (Diff.deepEqual(child.description, description)) return;
+			if (child.isComponent()) {
+				if (child.isRoot()) {
+					this.childrenPatches(child.childNodes, description.children, child);
+					this.addPatch(Patch.updateRoot(child, description));
+					this.addPatch(Patch.updateNode(child, description));
+					return;
+				}
+				return this.componentPatches(child, description);
+			}
+			if (child.isElement()) return this.elementPatches(child, description);
+			throw new Error(`Unsupported node type: ${child.nodeType}`);
+		}
+		/**
+		* Calculates patches for transformation of an element to match given
+		* description.
+		*/
+		elementPatches(element, description) {
+			this.classNamePatches(element.description.class, description.class, element);
+			this.stylePatches(element.description.style, description.style, element);
+			this.attributePatches(element.description.attrs, description.attrs, element);
+			this.listenerPatches(element.description.listeners, description.listeners, element);
+			this.datasetPatches(element.description.dataset, description.dataset, element);
+			this.propertiesPatches(element.description.properties, description.properties, element);
+			if (element.description.custom || description.custom) {
+				this.attributePatches(element.description.custom && element.description.custom.attrs, description.custom && description.custom.attrs, element, true);
+				this.listenerPatches(element.description.custom && element.description.custom.listeners, description.custom && description.custom.listeners, element, true);
+			}
+			if (element.children || description.children) this.childrenPatches(element.children, description.children, element);
+			this.addPatch(Patch.updateNode(element, description));
+		}
+		classNamePatches(current = "", next = "", target) {
+			if (current !== next) this.addPatch(Patch.setClassName(next, target));
+		}
+		stylePatches(current = {}, next = {}, target) {
+			const { added, removed, changed } = compareKeys(current, next);
+			for (const prop of added) this.addPatch(Patch.setStyleProperty(prop, next[prop], target));
+			for (const prop of removed) this.addPatch(Patch.removeStyleProperty(prop, target));
+			for (const prop of changed) this.addPatch(Patch.setStyleProperty(prop, next[prop], target));
+		}
+		attributePatches(current = {}, next = {}, target, isCustom = false) {
+			const { added, removed, changed } = compareKeys(current, next);
+			for (const attr of added) this.addPatch(Patch.setAttribute(attr, next[attr], target, isCustom));
+			for (const attr of removed) this.addPatch(Patch.removeAttribute(attr, target, isCustom));
+			for (const attr of changed) this.addPatch(Patch.setAttribute(attr, next[attr], target, isCustom));
+		}
+		listenerPatches(current = {}, next = {}, target, isCustom = false) {
+			const { added, removed, changed } = compareKeys(current, next, (listener, nextListener) => listener === nextListener || listener.source !== void 0 && listener.source === nextListener.source);
+			for (const event of added) this.addPatch(Patch.addListener(event, next[event], target, isCustom));
+			for (const event of removed) this.addPatch(Patch.removeListener(event, current[event], target, isCustom));
+			for (const event of changed) this.addPatch(Patch.replaceListener(event, current[event], next[event], target, isCustom));
+		}
+		datasetPatches(current = {}, next = {}, target) {
+			const { added, removed, changed } = compareKeys(current, next);
+			for (const attr of added) this.addPatch(Patch.setDataAttribute(attr, next[attr], target));
+			for (const attr of removed) this.addPatch(Patch.removeDataAttribute(attr, target));
+			for (const attr of changed) this.addPatch(Patch.setDataAttribute(attr, next[attr], target));
+		}
+		propertiesPatches(current = {}, next = {}, target) {
+			const { added, removed, changed } = compareKeys(current, next, (value, nextValue) => Diff.deepEqual(value, nextValue));
+			for (const key of added) this.addPatch(Patch.setProperty(key, next[key], target));
+			for (const key of removed) this.addPatch(Patch.deleteProperty(key, target));
+			for (const key of changed) this.addPatch(Patch.setProperty(key, next[key], target));
+		}
+		childrenPatches(sourceNodes = [], targetDescriptions = [], parent) {
+			const Move = Reconciler.Move;
+			const created = /* @__PURE__ */ new Set();
+			const createdNodesMap = /* @__PURE__ */ new Map();
+			const createNode = (description, key) => {
+				const node = VirtualDOM.createFromDescription(description, parent, this.root);
+				created.add(node);
+				createdNodesMap.set(key, node);
+				return node;
+			};
+			const from = sourceNodes.map((node, index) => node.key || Diff.createKey(index));
+			const to = targetDescriptions.map((description, index) => description.key || Diff.createKey(index));
+			if (runtime().isDebug()) {
+				const assertUniqueKeys = (keys) => {
+					if (keys.length) {
+						if ([...new Set(keys)].length !== keys.length) throw new Error(`Non-unique keys detected in: ${keys.join(", ")}`);
+					}
+				};
+				assertUniqueKeys(from);
+				assertUniqueKeys(to);
+			}
+			if (from.length === to.length && from.every((key, i) => key === to[i])) {
+				for (let i = 0; i < sourceNodes.length; i++) this.elementChildPatches(sourceNodes[i], targetDescriptions[i], parent);
+				return;
+			}
+			const mapByKey = (keys, items) => {
+				const map = /* @__PURE__ */ new Map();
+				keys.forEach((key, index) => {
+					if (!map.has(key)) map.set(key, items[index]);
+				});
+				return map;
+			};
+			const sourceNodesMap = mapByKey(from, sourceNodes);
+			const targetDescriptionsMap = mapByKey(to, targetDescriptions);
+			const getNode = (key, isMove) => {
+				const sourceNode = sourceNodesMap.get(key);
+				if (sourceNode) return sourceNode;
+				if (isMove) return createdNodesMap.get(key);
+				return createNode(targetDescriptionsMap.get(key), key);
+			};
+			const moves = Reconciler.calculateMoves(from, to);
+			const children = [...sourceNodes];
+			for (const move of moves) {
+				const node = getNode(move.item, move.name === Move.Name.MOVE);
+				switch (move.name) {
+					case Move.Name.REMOVE:
+						this.addPatch(Patch.removeChild(node, move.at, parent));
+						Move.remove(node, move.at).make(children);
+						continue;
+					case Move.Name.INSERT:
+						this.addPatch(Patch.insertChild(node, move.at, parent));
+						Move.insert(node, move.at).make(children);
+						continue;
+					case Move.Name.MOVE:
+						this.addPatch(Patch.moveChild(node, move.from, move.to, parent));
+						Move.move(node, move.from, move.to).make(children);
+						continue;
+				}
+			}
+			for (let i = 0; i < children.length; i++) {
+				const child = children[i];
+				if (!created.has(child)) {
+					const targetDescription = targetDescriptions[i];
+					this.elementChildPatches(child, targetDescription, parent);
+				}
+			}
+		}
+		elementChildPatches(child, description, parent) {
+			if (child.description.isCompatible(description)) this.childPatches(child, description);
+			else {
+				const node = VirtualDOM.createFromDescription(description, parent, this.root);
+				this.addPatch(Patch.replaceChild(child, node, parent));
+			}
+		}
+		/**
+		* Returns a normalized type of given item.
+		*/
+		static getType(item) {
+			const type = typeof item;
+			if (type !== "object") return type;
+			if (item === null) return "null";
+			if (Array.isArray(item)) return "array";
+			return "object";
+		}
+		static createKey(index) {
+			return String(index).padStart(8, "0");
+		}
+		static deepEqual(current, next) {
+			if (Object.is(current, next)) return true;
+			const type = this.getType(current);
+			if (type !== this.getType(next)) return false;
+			if (type === "array") {
+				const currentArray = current;
+				const nextArray = next;
+				if (currentArray.length !== nextArray.length) return false;
+				for (let i = 0; i < currentArray.length; i++) if (!this.deepEqual(currentArray[i], nextArray[i])) return false;
+				return true;
+			} else if (type === "object") {
+				const currentObject = current;
+				const nextObject = next;
+				if (currentObject.constructor !== nextObject.constructor) return false;
+				if (current instanceof Date) return Object.is(current.getTime(), next.getTime());
+				if (current instanceof Map || current instanceof Set) return this.deepEqual([...current], [...next]);
+				const keys = Object.keys(currentObject);
+				if (keys.length !== Object.keys(nextObject).length) return false;
+				for (const key of keys) if (!Object.prototype.propertyIsEnumerable.call(nextObject, key) || !this.deepEqual(currentObject[key], nextObject[key])) return false;
+				return true;
+			}
+			return false;
+		}
+	};
+	//#endregion
+	//#region src/core/renderer.ts
+	const Renderer = {
+		/**
+		* Calls the component render method and transforms the returned template
+		* into the normalised description of the rendered node.
+		*/
+		render(component, props = {}, children = []) {
+			return component.renderDescription(props, children);
+		},
+		/**
+		* Updates the Web component and patches the DOM tree
+		* to match the new component state.
+		*/
+		update(root, from, to, commands) {
+			const update = {
+				commands,
+				root,
+				state: {
+					from,
+					to
+				}
+			};
+			this.onBeforeUpdate(update, root);
+			const diff = new Diff(root, from, to);
+			root.state = to;
+			update.patches = diff.apply();
+			this.onAfterUpdate(update, root);
+		},
+		/**
+		* Notifies the observers about upcoming update.
+		*/
+		onBeforeUpdate(update, root) {
+			root.plugins.notify("before-update", update);
+		},
+		/**
+		* Notifies the observers about completed update.
+		*/
+		onAfterUpdate(update, root) {
+			root.plugins.notify("after-update", update);
+		}
+	};
+	//#endregion
+	//#region src/core/toolkit.ts
+	const roots = /* @__PURE__ */ new Set();
+	const defaultSettings = Object.freeze({ debug: false });
+	const pureComponentClassRegistry = /* @__PURE__ */ new Map();
+	const createPlugins = (manifests = []) => {
+		const plugins = new Plugins(null);
+		for (const manifest of manifests) plugins.register(manifest);
+		return plugins;
+	};
+	let plugins = createPlugins();
+	/**
+	* Returns a PureComponent class rendering the template
+	* provided by the specified function.
+	*/
+	const resolvePureComponentClass = (fn) => {
+		let ComponentClass = pureComponentClassRegistry.get(fn);
+		if (ComponentClass) return ComponentClass;
+		ComponentClass = class PureComponent extends Component {
+			static renderer = fn;
+			render() {
+				return fn.call(this, this.props);
+			}
+		};
+		pureComponentClassRegistry.set(fn, ComponentClass);
+		return ComponentClass;
+	};
+	/**
+	* Returns resolved Component class.
+	*/
+	const resolveComponentClass = (component, type) => {
+		switch (type) {
+			case "component": return component;
+			case "function": return resolvePureComponentClass(component);
+			default: throw new Error(`Unsupported component type: ${type}`);
+		}
+	};
+	const track = (root) => {
+		if (root.parentNode) {
+			const parentRootNode = root.parentNode.rootNode;
+			parentRootNode.subroots.add(root);
+			root.stopTracking = () => {
+				parentRootNode.subroots.delete(root);
+			};
+		} else {
+			roots.add(root);
+			root.stopTracking = () => {
+				roots.delete(root);
+			};
+		}
+	};
+	var Toolkit = class {
+		constructor() {
+			this.settings = defaultSettings;
+			this.assert = console.assert;
+		}
+		/**
+		* Configures Toolkit with given options, keeping the current values
+		* of the options not provided, by default no debug mode and no plugins.
+		* Changed plugins are uninstalled from the created roots, and the new
+		* ones installed in their place, with their stylesheets loaded.
+		*/
+		configure(options) {
+			if (options.debug !== void 0) this.settings = Object.freeze({ debug: options.debug });
+			const manifests = options.plugins;
+			const previous = [...plugins];
+			const origins = previous.map((plugin) => plugin.origin);
+			if (!manifests || isSameList(origins, manifests)) return;
+			Sandbox.clearPluginMethods();
+			plugins = createPlugins(manifests);
+			for (const root of this.tracked) {
+				for (const plugin of previous) root.plugins.uninstall(plugin.name);
+				for (const plugin of root.plugins) plugin.register?.();
+				for (const plugin of plugins) {
+					root.plugins.register(plugin);
+					root.plugins.install(plugin);
+				}
+				if (root.shadow) updateStylesheets(root);
+			}
+		}
+		/**
+		* Resets Toolkit to a pristine state, with the default settings
+		* and no plugins, forgetting the created roots.
+		*/
+		reset() {
+			plugins.destroy();
+			plugins = createPlugins();
+			roots.clear();
+			this.settings = defaultSettings;
+			pureComponentClassRegistry.clear();
+			Sandbox.clearPluginMethods();
+		}
+		get tracked() {
+			const tracked = [];
+			for (const root of roots) tracked.push(root, ...root.tracked);
+			return tracked;
+		}
+		isDebug() {
+			return this.settings.debug;
+		}
+		warn(...messages) {
+			if (this.isDebug()) console.warn(...messages);
+		}
+		async createRoot(component, props = {}) {
+			const description = Template.describe([component, props]);
+			return CreatedRoots.destroyingRootsOnError(() => VirtualDOM.createWebComponent(description, null));
+		}
+		async render(component, container, props = {}) {
+			return (await this.createRoot(component, props)).mount(container);
+		}
+	};
+	const toolkit = new Toolkit();
+	provideRuntime({
+		get plugins() {
+			return plugins;
+		},
+		assert: (condition, message) => toolkit.assert(condition, message),
+		isDebug: () => toolkit.isDebug(),
+		warn: (...messages) => toolkit.warn(...messages),
+		track,
+		resolveComponentClass,
+		update: (root, from, to, commands) => Renderer.update(root, from, to, commands)
+	});
+	//#endregion
+	//#region src/index.ts
+	const classes = {
+		Component,
+		WebComponent,
+		Root: WebComponent,
+		Service,
+		utils: Utils,
+		noop: () => {}
+	};
+	Object.assign(Toolkit.prototype, classes);
+	//#endregion
+	//#region src/release.ts
+	globalThis.toolkit = toolkit;
+	//#endregion
+})();
+
+//# sourceMappingURL=toolkit-0.71.0.js.map