tweak-ui 0.4.3 → 0.8.0

package/dist/tweak-ui.umd.js

@@ -1,4420 +1,33 @@
-(function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-	typeof define === 'function' && define.amd ? define(['exports'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TweakUi = {}));
-}(this, (function (exports) { 'use strict';
-
-	function Vnode(tag, key, attrs, children, text, dom) {
-		return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: undefined, events: undefined, instance: undefined}
-	}
-	Vnode.normalize = function(node) {
-		if (Array.isArray(node)) return Vnode("[", undefined, undefined, Vnode.normalizeChildren(node), undefined, undefined)
-		if (node == null || typeof node === "boolean") return null
-		if (typeof node === "object") return node
-		return Vnode("#", undefined, undefined, String(node), undefined, undefined)
-	};
-	Vnode.normalizeChildren = function(input) {
-		var children = [];
-		if (input.length) {
-			var isKeyed = input[0] != null && input[0].key != null;
-			// Note: this is a *very* perf-sensitive check.
-			// Fun fact: merging the loop like this is somehow faster than splitting
-			// it, noticeably so.
-			for (var i = 1; i < input.length; i++) {
-				if ((input[i] != null && input[i].key != null) !== isKeyed) {
-					throw new TypeError("Vnodes must either always have keys or never have keys!")
-				}
-			}
-			for (var i = 0; i < input.length; i++) {
-				children[i] = Vnode.normalize(input[i]);
-			}
-		}
-		return children
-	};
-
-	var vnode = Vnode;
-
-	// Call via `hyperscriptVnode.apply(startOffset, arguments)`
-	//
-	// The reason I do it this way, forwarding the arguments and passing the start
-	// offset in `this`, is so I don't have to create a temporary array in a
-	// performance-critical path.
-	//
-	// In native ES6, I'd instead add a final `...args` parameter to the
-	// `hyperscript` and `fragment` factories and define this as
-	// `hyperscriptVnode(...args)`, since modern engines do optimize that away. But
-	// ES5 (what Mithril requires thanks to IE support) doesn't give me that luxury,
-	// and engines aren't nearly intelligent enough to do either of these:
-	//
-	// 1. Elide the allocation for `[].slice.call(arguments, 1)` when it's passed to
-	//    another function only to be indexed.
-	// 2. Elide an `arguments` allocation when it's passed to any function other
-	//    than `Function.prototype.apply` or `Reflect.apply`.
-	//
-	// In ES6, it'd probably look closer to this (I'd need to profile it, though):
-	// module.exports = function(attrs, ...children) {
-	//     if (attrs == null || typeof attrs === "object" && attrs.tag == null && !Array.isArray(attrs)) {
-	//         if (children.length === 1 && Array.isArray(children[0])) children = children[0]
-	//     } else {
-	//         children = children.length === 0 && Array.isArray(attrs) ? attrs : [attrs, ...children]
-	//         attrs = undefined
-	//     }
-	//
-	//     if (attrs == null) attrs = {}
-	//     return Vnode("", attrs.key, attrs, children)
-	// }
-	var hyperscriptVnode = function() {
-		var attrs = arguments[this], start = this + 1, children;
-
-		if (attrs == null) {
-			attrs = {};
-		} else if (typeof attrs !== "object" || attrs.tag != null || Array.isArray(attrs)) {
-			attrs = {};
-			start = this;
-		}
-
-		if (arguments.length === start + 1) {
-			children = arguments[start];
-			if (!Array.isArray(children)) children = [children];
-		} else {
-			children = [];
-			while (start < arguments.length) children.push(arguments[start++]);
-		}
-
-		return vnode("", attrs.key, attrs, children)
-	};
-
-	var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g;
-	var selectorCache = {};
-	var hasOwn = {}.hasOwnProperty;
-
-	function isEmpty(object) {
-		for (var key in object) if (hasOwn.call(object, key)) return false
-		return true
-	}
-
-	function compileSelector(selector) {
-		var match, tag = "div", classes = [], attrs = {};
-		while (match = selectorParser.exec(selector)) {
-			var type = match[1], value = match[2];
-			if (type === "" && value !== "") tag = value;
-			else if (type === "#") attrs.id = value;
-			else if (type === ".") classes.push(value);
-			else if (match[3][0] === "[") {
-				var attrValue = match[6];
-				if (attrValue) attrValue = attrValue.replace(/\\(["'])/g, "$1").replace(/\\\\/g, "\\");
-				if (match[4] === "class") classes.push(attrValue);
-				else attrs[match[4]] = attrValue === "" ? attrValue : attrValue || true;
-			}
-		}
-		if (classes.length > 0) attrs.className = classes.join(" ");
-		return selectorCache[selector] = {tag: tag, attrs: attrs}
-	}
-
-	function execSelector(state, vnode$1) {
-		var attrs = vnode$1.attrs;
-		var children = vnode.normalizeChildren(vnode$1.children);
-		var hasClass = hasOwn.call(attrs, "class");
-		var className = hasClass ? attrs.class : attrs.className;
-
-		vnode$1.tag = state.tag;
-		vnode$1.attrs = null;
-		vnode$1.children = undefined;
-
-		if (!isEmpty(state.attrs) && !isEmpty(attrs)) {
-			var newAttrs = {};
-
-			for (var key in attrs) {
-				if (hasOwn.call(attrs, key)) newAttrs[key] = attrs[key];
-			}
-
-			attrs = newAttrs;
-		}
-
-		for (var key in state.attrs) {
-			if (hasOwn.call(state.attrs, key) && key !== "className" && !hasOwn.call(attrs, key)){
-				attrs[key] = state.attrs[key];
-			}
-		}
-		if (className != null || state.attrs.className != null) attrs.className =
-			className != null
-				? state.attrs.className != null
-					? String(state.attrs.className) + " " + String(className)
-					: className
-				: state.attrs.className != null
-					? state.attrs.className
-					: null;
-
-		if (hasClass) attrs.class = null;
-
-		for (var key in attrs) {
-			if (hasOwn.call(attrs, key) && key !== "key") {
-				vnode$1.attrs = attrs;
-				break
-			}
-		}
-
-		if (Array.isArray(children) && children.length === 1 && children[0] != null && children[0].tag === "#") {
-			vnode$1.text = children[0].children;
-		} else {
-			vnode$1.children = children;
-		}
-
-		return vnode$1
-	}
-
-	function hyperscript(selector) {
-		if (selector == null || typeof selector !== "string" && typeof selector !== "function" && typeof selector.view !== "function") {
-			throw Error("The selector must be either a string or a component.");
-		}
-
-		var vnode$1 = hyperscriptVnode.apply(1, arguments);
-
-		if (typeof selector === "string") {
-			vnode$1.children = vnode.normalizeChildren(vnode$1.children);
-			if (selector !== "[") return execSelector(selectorCache[selector] || compileSelector(selector), vnode$1)
-		}
-
-		vnode$1.tag = selector;
-		return vnode$1
-	}
-
-	var hyperscript_1$1 = hyperscript;
-
-	var trust = function(html) {
-		if (html == null) html = "";
-		return vnode("<", undefined, undefined, html, undefined, undefined)
-	};
-
-	var fragment = function() {
-		var vnode$1 = hyperscriptVnode.apply(0, arguments);
-
-		vnode$1.tag = "[";
-		vnode$1.children = vnode.normalizeChildren(vnode$1.children);
-		return vnode$1
-	};
-
-	hyperscript_1$1.trust = trust;
-	hyperscript_1$1.fragment = fragment;
-
-	var hyperscript_1 = hyperscript_1$1;
-
-	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-	function createCommonjsModule(fn, module) {
-		return module = { exports: {} }, fn(module, module.exports), module.exports;
-	}
-
-	/** @constructor */
-	var PromisePolyfill = function(executor) {
-		if (!(this instanceof PromisePolyfill)) throw new Error("Promise must be called with `new`")
-		if (typeof executor !== "function") throw new TypeError("executor must be a function")
-
-		var self = this, resolvers = [], rejectors = [], resolveCurrent = handler(resolvers, true), rejectCurrent = handler(rejectors, false);
-		var instance = self._instance = {resolvers: resolvers, rejectors: rejectors};
-		var callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout;
-		function handler(list, shouldAbsorb) {
-			return function execute(value) {
-				var then;
-				try {
-					if (shouldAbsorb && value != null && (typeof value === "object" || typeof value === "function") && typeof (then = value.then) === "function") {
-						if (value === self) throw new TypeError("Promise can't be resolved w/ itself")
-						executeOnce(then.bind(value));
-					}
-					else {
-						callAsync(function() {
-							if (!shouldAbsorb && list.length === 0) console.error("Possible unhandled promise rejection:", value);
-							for (var i = 0; i < list.length; i++) list[i](value);
-							resolvers.length = 0, rejectors.length = 0;
-							instance.state = shouldAbsorb;
-							instance.retry = function() {execute(value);};
-						});
-					}
-				}
-				catch (e) {
-					rejectCurrent(e);
-				}
-			}
-		}
-		function executeOnce(then) {
-			var runs = 0;
-			function run(fn) {
-				return function(value) {
-					if (runs++ > 0) return
-					fn(value);
-				}
-			}
-			var onerror = run(rejectCurrent);
-			try {then(run(resolveCurrent), onerror);} catch (e) {onerror(e);}
-		}
-
-		executeOnce(executor);
-	};
-	PromisePolyfill.prototype.then = function(onFulfilled, onRejection) {
-		var self = this, instance = self._instance;
-		function handle(callback, list, next, state) {
-			list.push(function(value) {
-				if (typeof callback !== "function") next(value);
-				else try {resolveNext(callback(value));} catch (e) {if (rejectNext) rejectNext(e);}
-			});
-			if (typeof instance.retry === "function" && state === instance.state) instance.retry();
-		}
-		var resolveNext, rejectNext;
-		var promise = new PromisePolyfill(function(resolve, reject) {resolveNext = resolve, rejectNext = reject;});
-		handle(onFulfilled, instance.resolvers, resolveNext, true), handle(onRejection, instance.rejectors, rejectNext, false);
-		return promise
-	};
-	PromisePolyfill.prototype.catch = function(onRejection) {
-		return this.then(null, onRejection)
-	};
-	PromisePolyfill.prototype.finally = function(callback) {
-		return this.then(
-			function(value) {
-				return PromisePolyfill.resolve(callback()).then(function() {
-					return value
-				})
-			},
-			function(reason) {
-				return PromisePolyfill.resolve(callback()).then(function() {
-					return PromisePolyfill.reject(reason);
-				})
-			}
-		)
-	};
-	PromisePolyfill.resolve = function(value) {
-		if (value instanceof PromisePolyfill) return value
-		return new PromisePolyfill(function(resolve) {resolve(value);})
-	};
-	PromisePolyfill.reject = function(value) {
-		return new PromisePolyfill(function(resolve, reject) {reject(value);})
-	};
-	PromisePolyfill.all = function(list) {
-		return new PromisePolyfill(function(resolve, reject) {
-			var total = list.length, count = 0, values = [];
-			if (list.length === 0) resolve([]);
-			else for (var i = 0; i < list.length; i++) {
-				(function(i) {
-					function consume(value) {
-						count++;
-						values[i] = value;
-						if (count === total) resolve(values);
-					}
-					if (list[i] != null && (typeof list[i] === "object" || typeof list[i] === "function") && typeof list[i].then === "function") {
-						list[i].then(consume, reject);
-					}
-					else consume(list[i]);
-				})(i);
-			}
-		})
-	};
-	PromisePolyfill.race = function(list) {
-		return new PromisePolyfill(function(resolve, reject) {
-			for (var i = 0; i < list.length; i++) {
-				list[i].then(resolve, reject);
-			}
-		})
-	};
-
-	var polyfill = PromisePolyfill;
-
-	var promise = createCommonjsModule(function (module) {
-
-
-
-	if (typeof window !== "undefined") {
-		if (typeof window.Promise === "undefined") {
-			window.Promise = polyfill;
-		} else if (!window.Promise.prototype.finally) {
-			window.Promise.prototype.finally = polyfill.prototype.finally;
-		}
-		module.exports = window.Promise;
-	} else if (typeof commonjsGlobal !== "undefined") {
-		if (typeof commonjsGlobal.Promise === "undefined") {
-			commonjsGlobal.Promise = polyfill;
-		} else if (!commonjsGlobal.Promise.prototype.finally) {
-			commonjsGlobal.Promise.prototype.finally = polyfill.prototype.finally;
-		}
-		module.exports = commonjsGlobal.Promise;
-	} else {
-		module.exports = polyfill;
-	}
-	});
-
-	var render$1 = function($window) {
-		var $doc = $window && $window.document;
-		var currentRedraw;
-
-		var nameSpace = {
-			svg: "http://www.w3.org/2000/svg",
-			math: "http://www.w3.org/1998/Math/MathML"
-		};
-
-		function getNameSpace(vnode) {
-			return vnode.attrs && vnode.attrs.xmlns || nameSpace[vnode.tag]
-		}
-
-		//sanity check to discourage people from doing `vnode.state = ...`
-		function checkState(vnode, original) {
-			if (vnode.state !== original) throw new Error("`vnode.state` must not be modified")
-		}
-
-		//Note: the hook is passed as the `this` argument to allow proxying the
-		//arguments without requiring a full array allocation to do so. It also
-		//takes advantage of the fact the current `vnode` is the first argument in
-		//all lifecycle methods.
-		function callHook(vnode) {
-			var original = vnode.state;
-			try {
-				return this.apply(original, arguments)
-			} finally {
-				checkState(vnode, original);
-			}
-		}
-
-		// IE11 (at least) throws an UnspecifiedError when accessing document.activeElement when
-		// inside an iframe. Catch and swallow this error, and heavy-handidly return null.
-		function activeElement() {
-			try {
-				return $doc.activeElement
-			} catch (e) {
-				return null
-			}
-		}
-		//create
-		function createNodes(parent, vnodes, start, end, hooks, nextSibling, ns) {
-			for (var i = start; i < end; i++) {
-				var vnode = vnodes[i];
-				if (vnode != null) {
-					createNode(parent, vnode, hooks, ns, nextSibling);
-				}
-			}
-		}
-		function createNode(parent, vnode, hooks, ns, nextSibling) {
-			var tag = vnode.tag;
-			if (typeof tag === "string") {
-				vnode.state = {};
-				if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks);
-				switch (tag) {
-					case "#": createText(parent, vnode, nextSibling); break
-					case "<": createHTML(parent, vnode, ns, nextSibling); break
-					case "[": createFragment(parent, vnode, hooks, ns, nextSibling); break
-					default: createElement(parent, vnode, hooks, ns, nextSibling);
-				}
-			}
-			else createComponent(parent, vnode, hooks, ns, nextSibling);
-		}
-		function createText(parent, vnode, nextSibling) {
-			vnode.dom = $doc.createTextNode(vnode.children);
-			insertNode(parent, vnode.dom, nextSibling);
-		}
-		var possibleParents = {caption: "table", thead: "table", tbody: "table", tfoot: "table", tr: "tbody", th: "tr", td: "tr", colgroup: "table", col: "colgroup"};
-		function createHTML(parent, vnode, ns, nextSibling) {
-			var match = vnode.children.match(/^\s*?<(\w+)/im) || [];
-			// not using the proper parent makes the child element(s) vanish.
-			//     var div = document.createElement("div")
-			//     div.innerHTML = "<td>i</td><td>j</td>"
-			//     console.log(div.innerHTML)
-			// --> "ij", no <td> in sight.
-			var temp = $doc.createElement(possibleParents[match[1]] || "div");
-			if (ns === "http://www.w3.org/2000/svg") {
-				temp.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\">" + vnode.children + "</svg>";
-				temp = temp.firstChild;
-			} else {
-				temp.innerHTML = vnode.children;
-			}
-			vnode.dom = temp.firstChild;
-			vnode.domSize = temp.childNodes.length;
-			// Capture nodes to remove, so we don't confuse them.
-			vnode.instance = [];
-			var fragment = $doc.createDocumentFragment();
-			var child;
-			while (child = temp.firstChild) {
-				vnode.instance.push(child);
-				fragment.appendChild(child);
-			}
-			insertNode(parent, fragment, nextSibling);
-		}
-		function createFragment(parent, vnode, hooks, ns, nextSibling) {
-			var fragment = $doc.createDocumentFragment();
-			if (vnode.children != null) {
-				var children = vnode.children;
-				createNodes(fragment, children, 0, children.length, hooks, null, ns);
-			}
-			vnode.dom = fragment.firstChild;
-			vnode.domSize = fragment.childNodes.length;
-			insertNode(parent, fragment, nextSibling);
-		}
-		function createElement(parent, vnode$1, hooks, ns, nextSibling) {
-			var tag = vnode$1.tag;
-			var attrs = vnode$1.attrs;
-			var is = attrs && attrs.is;
-
-			ns = getNameSpace(vnode$1) || ns;
-
-			var element = ns ?
-				is ? $doc.createElementNS(ns, tag, {is: is}) : $doc.createElementNS(ns, tag) :
-				is ? $doc.createElement(tag, {is: is}) : $doc.createElement(tag);
-			vnode$1.dom = element;
-
-			if (attrs != null) {
-				setAttrs(vnode$1, attrs, ns);
-			}
-
-			insertNode(parent, element, nextSibling);
-
-			if (!maybeSetContentEditable(vnode$1)) {
-				if (vnode$1.text != null) {
-					if (vnode$1.text !== "") element.textContent = vnode$1.text;
-					else vnode$1.children = [vnode("#", undefined, undefined, vnode$1.text, undefined, undefined)];
-				}
-				if (vnode$1.children != null) {
-					var children = vnode$1.children;
-					createNodes(element, children, 0, children.length, hooks, null, ns);
-					if (vnode$1.tag === "select" && attrs != null) setLateSelectAttrs(vnode$1, attrs);
-				}
-			}
-		}
-		function initComponent(vnode$1, hooks) {
-			var sentinel;
-			if (typeof vnode$1.tag.view === "function") {
-				vnode$1.state = Object.create(vnode$1.tag);
-				sentinel = vnode$1.state.view;
-				if (sentinel.$$reentrantLock$$ != null) return
-				sentinel.$$reentrantLock$$ = true;
-			} else {
-				vnode$1.state = void 0;
-				sentinel = vnode$1.tag;
-				if (sentinel.$$reentrantLock$$ != null) return
-				sentinel.$$reentrantLock$$ = true;
-				vnode$1.state = (vnode$1.tag.prototype != null && typeof vnode$1.tag.prototype.view === "function") ? new vnode$1.tag(vnode$1) : vnode$1.tag(vnode$1);
-			}
-			initLifecycle(vnode$1.state, vnode$1, hooks);
-			if (vnode$1.attrs != null) initLifecycle(vnode$1.attrs, vnode$1, hooks);
-			vnode$1.instance = vnode.normalize(callHook.call(vnode$1.state.view, vnode$1));
-			if (vnode$1.instance === vnode$1) throw Error("A view cannot return the vnode it received as argument")
-			sentinel.$$reentrantLock$$ = null;
-		}
-		function createComponent(parent, vnode, hooks, ns, nextSibling) {
-			initComponent(vnode, hooks);
-			if (vnode.instance != null) {
-				createNode(parent, vnode.instance, hooks, ns, nextSibling);
-				vnode.dom = vnode.instance.dom;
-				vnode.domSize = vnode.dom != null ? vnode.instance.domSize : 0;
-			}
-			else {
-				vnode.domSize = 0;
-			}
-		}
-
-		//update
-		/**
-		 * @param {Element|Fragment} parent - the parent element
-		 * @param {Vnode[] | null} old - the list of vnodes of the last `render()` call for
-		 *                               this part of the tree
-		 * @param {Vnode[] | null} vnodes - as above, but for the current `render()` call.
-		 * @param {Function[]} hooks - an accumulator of post-render hooks (oncreate/onupdate)
-		 * @param {Element | null} nextSibling - the next DOM node if we're dealing with a
-		 *                                       fragment that is not the last item in its
-		 *                                       parent
-		 * @param {'svg' | 'math' | String | null} ns) - the current XML namespace, if any
-		 * @returns void
-		 */
-		// This function diffs and patches lists of vnodes, both keyed and unkeyed.
-		//
-		// We will:
-		//
-		// 1. describe its general structure
-		// 2. focus on the diff algorithm optimizations
-		// 3. discuss DOM node operations.
-
-		// ## Overview:
-		//
-		// The updateNodes() function:
-		// - deals with trivial cases
-		// - determines whether the lists are keyed or unkeyed based on the first non-null node
-		//   of each list.
-		// - diffs them and patches the DOM if needed (that's the brunt of the code)
-		// - manages the leftovers: after diffing, are there:
-		//   - old nodes left to remove?
-		// 	 - new nodes to insert?
-		// 	 deal with them!
-		//
-		// The lists are only iterated over once, with an exception for the nodes in `old` that
-		// are visited in the fourth part of the diff and in the `removeNodes` loop.
-
-		// ## Diffing
-		//
-		// Reading https://github.com/localvoid/ivi/blob/ddc09d06abaef45248e6133f7040d00d3c6be853/packages/ivi/src/vdom/implementation.ts#L617-L837
-		// may be good for context on longest increasing subsequence-based logic for moving nodes.
-		//
-		// In order to diff keyed lists, one has to
-		//
-		// 1) match nodes in both lists, per key, and update them accordingly
-		// 2) create the nodes present in the new list, but absent in the old one
-		// 3) remove the nodes present in the old list, but absent in the new one
-		// 4) figure out what nodes in 1) to move in order to minimize the DOM operations.
-		//
-		// To achieve 1) one can create a dictionary of keys => index (for the old list), then iterate
-		// over the new list and for each new vnode, find the corresponding vnode in the old list using
-		// the map.
-		// 2) is achieved in the same step: if a new node has no corresponding entry in the map, it is new
-		// and must be created.
-		// For the removals, we actually remove the nodes that have been updated from the old list.
-		// The nodes that remain in that list after 1) and 2) have been performed can be safely removed.
-		// The fourth step is a bit more complex and relies on the longest increasing subsequence (LIS)
-		// algorithm.
-		//
-		// the longest increasing subsequence is the list of nodes that can remain in place. Imagine going
-		// from `1,2,3,4,5` to `4,5,1,2,3` where the numbers are not necessarily the keys, but the indices
-		// corresponding to the keyed nodes in the old list (keyed nodes `e,d,c,b,a` => `b,a,e,d,c` would
-		//  match the above lists, for example).
-		//
-		// In there are two increasing subsequences: `4,5` and `1,2,3`, the latter being the longest. We
-		// can update those nodes without moving them, and only call `insertNode` on `4` and `5`.
-		//
-		// @localvoid adapted the algo to also support node deletions and insertions (the `lis` is actually
-		// the longest increasing subsequence *of old nodes still present in the new list*).
-		//
-		// It is a general algorithm that is fireproof in all circumstances, but it requires the allocation
-		// and the construction of a `key => oldIndex` map, and three arrays (one with `newIndex => oldIndex`,
-		// the `LIS` and a temporary one to create the LIS).
-		//
-		// So we cheat where we can: if the tails of the lists are identical, they are guaranteed to be part of
-		// the LIS and can be updated without moving them.
-		//
-		// If two nodes are swapped, they are guaranteed not to be part of the LIS, and must be moved (with
-		// the exception of the last node if the list is fully reversed).
-		//
-		// ## Finding the next sibling.
-		//
-		// `updateNode()` and `createNode()` expect a nextSibling parameter to perform DOM operations.
-		// When the list is being traversed top-down, at any index, the DOM nodes up to the previous
-		// vnode reflect the content of the new list, whereas the rest of the DOM nodes reflect the old
-		// list. The next sibling must be looked for in the old list using `getNextSibling(... oldStart + 1 ...)`.
-		//
-		// In the other scenarios (swaps, upwards traversal, map-based diff),
-		// the new vnodes list is traversed upwards. The DOM nodes at the bottom of the list reflect the
-		// bottom part of the new vnodes list, and we can use the `v.dom`  value of the previous node
-		// as the next sibling (cached in the `nextSibling` variable).
-
-
-		// ## DOM node moves
-		//
-		// In most scenarios `updateNode()` and `createNode()` perform the DOM operations. However,
-		// this is not the case if the node moved (second and fourth part of the diff algo). We move
-		// the old DOM nodes before updateNode runs because it enables us to use the cached `nextSibling`
-		// variable rather than fetching it using `getNextSibling()`.
-		//
-		// The fourth part of the diff currently inserts nodes unconditionally, leading to issues
-		// like #1791 and #1999. We need to be smarter about those situations where adjascent old
-		// nodes remain together in the new list in a way that isn't covered by parts one and
-		// three of the diff algo.
-
-		function updateNodes(parent, old, vnodes, hooks, nextSibling, ns) {
-			if (old === vnodes || old == null && vnodes == null) return
-			else if (old == null || old.length === 0) createNodes(parent, vnodes, 0, vnodes.length, hooks, nextSibling, ns);
-			else if (vnodes == null || vnodes.length === 0) removeNodes(parent, old, 0, old.length);
-			else {
-				var isOldKeyed = old[0] != null && old[0].key != null;
-				var isKeyed = vnodes[0] != null && vnodes[0].key != null;
-				var start = 0, oldStart = 0;
-				if (!isOldKeyed) while (oldStart < old.length && old[oldStart] == null) oldStart++;
-				if (!isKeyed) while (start < vnodes.length && vnodes[start] == null) start++;
-				if (isKeyed === null && isOldKeyed == null) return // both lists are full of nulls
-				if (isOldKeyed !== isKeyed) {
-					removeNodes(parent, old, oldStart, old.length);
-					createNodes(parent, vnodes, start, vnodes.length, hooks, nextSibling, ns);
-				} else if (!isKeyed) {
-					// Don't index past the end of either list (causes deopts).
-					var commonLength = old.length < vnodes.length ? old.length : vnodes.length;
-					// Rewind if necessary to the first non-null index on either side.
-					// We could alternatively either explicitly create or remove nodes when `start !== oldStart`
-					// but that would be optimizing for sparse lists which are more rare than dense ones.
-					start = start < oldStart ? start : oldStart;
-					for (; start < commonLength; start++) {
-						o = old[start];
-						v = vnodes[start];
-						if (o === v || o == null && v == null) continue
-						else if (o == null) createNode(parent, v, hooks, ns, getNextSibling(old, start + 1, nextSibling));
-						else if (v == null) removeNode(parent, o);
-						else updateNode(parent, o, v, hooks, getNextSibling(old, start + 1, nextSibling), ns);
-					}
-					if (old.length > commonLength) removeNodes(parent, old, start, old.length);
-					if (vnodes.length > commonLength) createNodes(parent, vnodes, start, vnodes.length, hooks, nextSibling, ns);
-				} else {
-					// keyed diff
-					var oldEnd = old.length - 1, end = vnodes.length - 1, map, o, v, oe, ve, topSibling;
-
-					// bottom-up
-					while (oldEnd >= oldStart && end >= start) {
-						oe = old[oldEnd];
-						ve = vnodes[end];
-						if (oe.key !== ve.key) break
-						if (oe !== ve) updateNode(parent, oe, ve, hooks, nextSibling, ns);
-						if (ve.dom != null) nextSibling = ve.dom;
-						oldEnd--, end--;
-					}
-					// top-down
-					while (oldEnd >= oldStart && end >= start) {
-						o = old[oldStart];
-						v = vnodes[start];
-						if (o.key !== v.key) break
-						oldStart++, start++;
-						if (o !== v) updateNode(parent, o, v, hooks, getNextSibling(old, oldStart, nextSibling), ns);
-					}
-					// swaps and list reversals
-					while (oldEnd >= oldStart && end >= start) {
-						if (start === end) break
-						if (o.key !== ve.key || oe.key !== v.key) break
-						topSibling = getNextSibling(old, oldStart, nextSibling);
-						moveNodes(parent, oe, topSibling);
-						if (oe !== v) updateNode(parent, oe, v, hooks, topSibling, ns);
-						if (++start <= --end) moveNodes(parent, o, nextSibling);
-						if (o !== ve) updateNode(parent, o, ve, hooks, nextSibling, ns);
-						if (ve.dom != null) nextSibling = ve.dom;
-						oldStart++; oldEnd--;
-						oe = old[oldEnd];
-						ve = vnodes[end];
-						o = old[oldStart];
-						v = vnodes[start];
-					}
-					// bottom up once again
-					while (oldEnd >= oldStart && end >= start) {
-						if (oe.key !== ve.key) break
-						if (oe !== ve) updateNode(parent, oe, ve, hooks, nextSibling, ns);
-						if (ve.dom != null) nextSibling = ve.dom;
-						oldEnd--, end--;
-						oe = old[oldEnd];
-						ve = vnodes[end];
-					}
-					if (start > end) removeNodes(parent, old, oldStart, oldEnd + 1);
-					else if (oldStart > oldEnd) createNodes(parent, vnodes, start, end + 1, hooks, nextSibling, ns);
-					else {
-						// inspired by ivi https://github.com/ivijs/ivi/ by Boris Kaul
-						var originalNextSibling = nextSibling, vnodesLength = end - start + 1, oldIndices = new Array(vnodesLength), li=0, i=0, pos = 2147483647, matched = 0, map, lisIndices;
-						for (i = 0; i < vnodesLength; i++) oldIndices[i] = -1;
-						for (i = end; i >= start; i--) {
-							if (map == null) map = getKeyMap(old, oldStart, oldEnd + 1);
-							ve = vnodes[i];
-							var oldIndex = map[ve.key];
-							if (oldIndex != null) {
-								pos = (oldIndex < pos) ? oldIndex : -1; // becomes -1 if nodes were re-ordered
-								oldIndices[i-start] = oldIndex;
-								oe = old[oldIndex];
-								old[oldIndex] = null;
-								if (oe !== ve) updateNode(parent, oe, ve, hooks, nextSibling, ns);
-								if (ve.dom != null) nextSibling = ve.dom;
-								matched++;
-							}
-						}
-						nextSibling = originalNextSibling;
-						if (matched !== oldEnd - oldStart + 1) removeNodes(parent, old, oldStart, oldEnd + 1);
-						if (matched === 0) createNodes(parent, vnodes, start, end + 1, hooks, nextSibling, ns);
-						else {
-							if (pos === -1) {
-								// the indices of the indices of the items that are part of the
-								// longest increasing subsequence in the oldIndices list
-								lisIndices = makeLisIndices(oldIndices);
-								li = lisIndices.length - 1;
-								for (i = end; i >= start; i--) {
-									v = vnodes[i];
-									if (oldIndices[i-start] === -1) createNode(parent, v, hooks, ns, nextSibling);
-									else {
-										if (lisIndices[li] === i - start) li--;
-										else moveNodes(parent, v, nextSibling);
-									}
-									if (v.dom != null) nextSibling = vnodes[i].dom;
-								}
-							} else {
-								for (i = end; i >= start; i--) {
-									v = vnodes[i];
-									if (oldIndices[i-start] === -1) createNode(parent, v, hooks, ns, nextSibling);
-									if (v.dom != null) nextSibling = vnodes[i].dom;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-		function updateNode(parent, old, vnode, hooks, nextSibling, ns) {
-			var oldTag = old.tag, tag = vnode.tag;
-			if (oldTag === tag) {
-				vnode.state = old.state;
-				vnode.events = old.events;
-				if (shouldNotUpdate(vnode, old)) return
-				if (typeof oldTag === "string") {
-					if (vnode.attrs != null) {
-						updateLifecycle(vnode.attrs, vnode, hooks);
-					}
-					switch (oldTag) {
-						case "#": updateText(old, vnode); break
-						case "<": updateHTML(parent, old, vnode, ns, nextSibling); break
-						case "[": updateFragment(parent, old, vnode, hooks, nextSibling, ns); break
-						default: updateElement(old, vnode, hooks, ns);
-					}
-				}
-				else updateComponent(parent, old, vnode, hooks, nextSibling, ns);
-			}
-			else {
-				removeNode(parent, old);
-				createNode(parent, vnode, hooks, ns, nextSibling);
-			}
-		}
-		function updateText(old, vnode) {
-			if (old.children.toString() !== vnode.children.toString()) {
-				old.dom.nodeValue = vnode.children;
-			}
-			vnode.dom = old.dom;
-		}
-		function updateHTML(parent, old, vnode, ns, nextSibling) {
-			if (old.children !== vnode.children) {
-				removeHTML(parent, old);
-				createHTML(parent, vnode, ns, nextSibling);
-			}
-			else {
-				vnode.dom = old.dom;
-				vnode.domSize = old.domSize;
-				vnode.instance = old.instance;
-			}
-		}
-		function updateFragment(parent, old, vnode, hooks, nextSibling, ns) {
-			updateNodes(parent, old.children, vnode.children, hooks, nextSibling, ns);
-			var domSize = 0, children = vnode.children;
-			vnode.dom = null;
-			if (children != null) {
-				for (var i = 0; i < children.length; i++) {
-					var child = children[i];
-					if (child != null && child.dom != null) {
-						if (vnode.dom == null) vnode.dom = child.dom;
-						domSize += child.domSize || 1;
-					}
-				}
-				if (domSize !== 1) vnode.domSize = domSize;
-			}
-		}
-		function updateElement(old, vnode$1, hooks, ns) {
-			var element = vnode$1.dom = old.dom;
-			ns = getNameSpace(vnode$1) || ns;
-
-			if (vnode$1.tag === "textarea") {
-				if (vnode$1.attrs == null) vnode$1.attrs = {};
-				if (vnode$1.text != null) {
-					vnode$1.attrs.value = vnode$1.text; //FIXME handle multiple children
-					vnode$1.text = undefined;
-				}
-			}
-			updateAttrs(vnode$1, old.attrs, vnode$1.attrs, ns);
-			if (!maybeSetContentEditable(vnode$1)) {
-				if (old.text != null && vnode$1.text != null && vnode$1.text !== "") {
-					if (old.text.toString() !== vnode$1.text.toString()) old.dom.firstChild.nodeValue = vnode$1.text;
-				}
-				else {
-					if (old.text != null) old.children = [vnode("#", undefined, undefined, old.text, undefined, old.dom.firstChild)];
-					if (vnode$1.text != null) vnode$1.children = [vnode("#", undefined, undefined, vnode$1.text, undefined, undefined)];
-					updateNodes(element, old.children, vnode$1.children, hooks, null, ns);
-				}
-			}
-		}
-		function updateComponent(parent, old, vnode$1, hooks, nextSibling, ns) {
-			vnode$1.instance = vnode.normalize(callHook.call(vnode$1.state.view, vnode$1));
-			if (vnode$1.instance === vnode$1) throw Error("A view cannot return the vnode it received as argument")
-			updateLifecycle(vnode$1.state, vnode$1, hooks);
-			if (vnode$1.attrs != null) updateLifecycle(vnode$1.attrs, vnode$1, hooks);
-			if (vnode$1.instance != null) {
-				if (old.instance == null) createNode(parent, vnode$1.instance, hooks, ns, nextSibling);
-				else updateNode(parent, old.instance, vnode$1.instance, hooks, nextSibling, ns);
-				vnode$1.dom = vnode$1.instance.dom;
-				vnode$1.domSize = vnode$1.instance.domSize;
-			}
-			else if (old.instance != null) {
-				removeNode(parent, old.instance);
-				vnode$1.dom = undefined;
-				vnode$1.domSize = 0;
-			}
-			else {
-				vnode$1.dom = old.dom;
-				vnode$1.domSize = old.domSize;
-			}
-		}
-		function getKeyMap(vnodes, start, end) {
-			var map = Object.create(null);
-			for (; start < end; start++) {
-				var vnode = vnodes[start];
-				if (vnode != null) {
-					var key = vnode.key;
-					if (key != null) map[key] = start;
-				}
-			}
-			return map
-		}
-		// Lifted from ivi https://github.com/ivijs/ivi/
-		// takes a list of unique numbers (-1 is special and can
-		// occur multiple times) and returns an array with the indices
-		// of the items that are part of the longest increasing
-		// subsequece
-		var lisTemp = [];
-		function makeLisIndices(a) {
-			var result = [0];
-			var u = 0, v = 0, i = 0;
-			var il = lisTemp.length = a.length;
-			for (var i = 0; i < il; i++) lisTemp[i] = a[i];
-			for (var i = 0; i < il; ++i) {
-				if (a[i] === -1) continue
-				var j = result[result.length - 1];
-				if (a[j] < a[i]) {
-					lisTemp[i] = j;
-					result.push(i);
-					continue
-				}
-				u = 0;
-				v = result.length - 1;
-				while (u < v) {
-					// Fast integer average without overflow.
-					// eslint-disable-next-line no-bitwise
-					var c = (u >>> 1) + (v >>> 1) + (u & v & 1);
-					if (a[result[c]] < a[i]) {
-						u = c + 1;
-					}
-					else {
-						v = c;
-					}
-				}
-				if (a[i] < a[result[u]]) {
-					if (u > 0) lisTemp[i] = result[u - 1];
-					result[u] = i;
-				}
-			}
-			u = result.length;
-			v = result[u - 1];
-			while (u-- > 0) {
-				result[u] = v;
-				v = lisTemp[v];
-			}
-			lisTemp.length = 0;
-			return result
-		}
-
-		function getNextSibling(vnodes, i, nextSibling) {
-			for (; i < vnodes.length; i++) {
-				if (vnodes[i] != null && vnodes[i].dom != null) return vnodes[i].dom
-			}
-			return nextSibling
-		}
-
-		// This covers a really specific edge case:
-		// - Parent node is keyed and contains child
-		// - Child is removed, returns unresolved promise in `onbeforeremove`
-		// - Parent node is moved in keyed diff
-		// - Remaining children still need moved appropriately
-		//
-		// Ideally, I'd track removed nodes as well, but that introduces a lot more
-		// complexity and I'm not exactly interested in doing that.
-		function moveNodes(parent, vnode, nextSibling) {
-			var frag = $doc.createDocumentFragment();
-			moveChildToFrag(parent, frag, vnode);
-			insertNode(parent, frag, nextSibling);
-		}
-		function moveChildToFrag(parent, frag, vnode) {
-			// Dodge the recursion overhead in a few of the most common cases.
-			while (vnode.dom != null && vnode.dom.parentNode === parent) {
-				if (typeof vnode.tag !== "string") {
-					vnode = vnode.instance;
-					if (vnode != null) continue
-				} else if (vnode.tag === "<") {
-					for (var i = 0; i < vnode.instance.length; i++) {
-						frag.appendChild(vnode.instance[i]);
-					}
-				} else if (vnode.tag !== "[") {
-					// Don't recurse for text nodes *or* elements, just fragments
-					frag.appendChild(vnode.dom);
-				} else if (vnode.children.length === 1) {
-					vnode = vnode.children[0];
-					if (vnode != null) continue
-				} else {
-					for (var i = 0; i < vnode.children.length; i++) {
-						var child = vnode.children[i];
-						if (child != null) moveChildToFrag(parent, frag, child);
-					}
-				}
-				break
-			}
-		}
-
-		function insertNode(parent, dom, nextSibling) {
-			if (nextSibling != null) parent.insertBefore(dom, nextSibling);
-			else parent.appendChild(dom);
-		}
-
-		function maybeSetContentEditable(vnode) {
-			if (vnode.attrs == null || (
-				vnode.attrs.contenteditable == null && // attribute
-				vnode.attrs.contentEditable == null // property
-			)) return false
-			var children = vnode.children;
-			if (children != null && children.length === 1 && children[0].tag === "<") {
-				var content = children[0].children;
-				if (vnode.dom.innerHTML !== content) vnode.dom.innerHTML = content;
-			}
-			else if (vnode.text != null || children != null && children.length !== 0) throw new Error("Child node of a contenteditable must be trusted")
-			return true
-		}
-
-		//remove
-		function removeNodes(parent, vnodes, start, end) {
-			for (var i = start; i < end; i++) {
-				var vnode = vnodes[i];
-				if (vnode != null) removeNode(parent, vnode);
-			}
-		}
-		function removeNode(parent, vnode) {
-			var mask = 0;
-			var original = vnode.state;
-			var stateResult, attrsResult;
-			if (typeof vnode.tag !== "string" && typeof vnode.state.onbeforeremove === "function") {
-				var result = callHook.call(vnode.state.onbeforeremove, vnode);
-				if (result != null && typeof result.then === "function") {
-					mask = 1;
-					stateResult = result;
-				}
-			}
-			if (vnode.attrs && typeof vnode.attrs.onbeforeremove === "function") {
-				var result = callHook.call(vnode.attrs.onbeforeremove, vnode);
-				if (result != null && typeof result.then === "function") {
-					// eslint-disable-next-line no-bitwise
-					mask |= 2;
-					attrsResult = result;
-				}
-			}
-			checkState(vnode, original);
-
-			// If we can, try to fast-path it and avoid all the overhead of awaiting
-			if (!mask) {
-				onremove(vnode);
-				removeChild(parent, vnode);
-			} else {
-				if (stateResult != null) {
-					var next = function () {
-						// eslint-disable-next-line no-bitwise
-						if (mask & 1) { mask &= 2; if (!mask) reallyRemove(); }
-					};
-					stateResult.then(next, next);
-				}
-				if (attrsResult != null) {
-					var next = function () {
-						// eslint-disable-next-line no-bitwise
-						if (mask & 2) { mask &= 1; if (!mask) reallyRemove(); }
-					};
-					attrsResult.then(next, next);
-				}
-			}
-
-			function reallyRemove() {
-				checkState(vnode, original);
-				onremove(vnode);
-				removeChild(parent, vnode);
-			}
-		}
-		function removeHTML(parent, vnode) {
-			for (var i = 0; i < vnode.instance.length; i++) {
-				parent.removeChild(vnode.instance[i]);
-			}
-		}
-		function removeChild(parent, vnode) {
-			// Dodge the recursion overhead in a few of the most common cases.
-			while (vnode.dom != null && vnode.dom.parentNode === parent) {
-				if (typeof vnode.tag !== "string") {
-					vnode = vnode.instance;
-					if (vnode != null) continue
-				} else if (vnode.tag === "<") {
-					removeHTML(parent, vnode);
-				} else {
-					if (vnode.tag !== "[") {
-						parent.removeChild(vnode.dom);
-						if (!Array.isArray(vnode.children)) break
-					}
-					if (vnode.children.length === 1) {
-						vnode = vnode.children[0];
-						if (vnode != null) continue
-					} else {
-						for (var i = 0; i < vnode.children.length; i++) {
-							var child = vnode.children[i];
-							if (child != null) removeChild(parent, child);
-						}
-					}
-				}
-				break
-			}
-		}
-		function onremove(vnode) {
-			if (typeof vnode.tag !== "string" && typeof vnode.state.onremove === "function") callHook.call(vnode.state.onremove, vnode);
-			if (vnode.attrs && typeof vnode.attrs.onremove === "function") callHook.call(vnode.attrs.onremove, vnode);
-			if (typeof vnode.tag !== "string") {
-				if (vnode.instance != null) onremove(vnode.instance);
-			} else {
-				var children = vnode.children;
-				if (Array.isArray(children)) {
-					for (var i = 0; i < children.length; i++) {
-						var child = children[i];
-						if (child != null) onremove(child);
-					}
-				}
-			}
-		}
-
-		//attrs
-		function setAttrs(vnode, attrs, ns) {
-			for (var key in attrs) {
-				setAttr(vnode, key, null, attrs[key], ns);
-			}
-		}
-		function setAttr(vnode, key, old, value, ns) {
-			if (key === "key" || key === "is" || value == null || isLifecycleMethod(key) || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object") return
-			if (key[0] === "o" && key[1] === "n") return updateEvent(vnode, key, value)
-			if (key.slice(0, 6) === "xlink:") vnode.dom.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(6), value);
-			else if (key === "style") updateStyle(vnode.dom, old, value);
-			else if (hasPropertyKey(vnode, key, ns)) {
-				if (key === "value") {
-					// Only do the coercion if we're actually going to check the value.
-					/* eslint-disable no-implicit-coercion */
-					//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
-					if ((vnode.tag === "input" || vnode.tag === "textarea") && vnode.dom.value === "" + value && vnode.dom === activeElement()) return
-					//setting select[value] to same value while having select open blinks select dropdown in Chrome
-					if (vnode.tag === "select" && old !== null && vnode.dom.value === "" + value) return
-					//setting option[value] to same value while having select open blinks select dropdown in Chrome
-					if (vnode.tag === "option" && old !== null && vnode.dom.value === "" + value) return
-					/* eslint-enable no-implicit-coercion */
-				}
-				// If you assign an input type that is not supported by IE 11 with an assignment expression, an error will occur.
-				if (vnode.tag === "input" && key === "type") vnode.dom.setAttribute(key, value);
-				else vnode.dom[key] = value;
-			} else {
-				if (typeof value === "boolean") {
-					if (value) vnode.dom.setAttribute(key, "");
-					else vnode.dom.removeAttribute(key);
-				}
-				else vnode.dom.setAttribute(key === "className" ? "class" : key, value);
-			}
-		}
-		function removeAttr(vnode, key, old, ns) {
-			if (key === "key" || key === "is" || old == null || isLifecycleMethod(key)) return
-			if (key[0] === "o" && key[1] === "n" && !isLifecycleMethod(key)) updateEvent(vnode, key, undefined);
-			else if (key === "style") updateStyle(vnode.dom, old, null);
-			else if (
-				hasPropertyKey(vnode, key, ns)
-				&& key !== "className"
-				&& !(key === "value" && (
-					vnode.tag === "option"
-					|| vnode.tag === "select" && vnode.dom.selectedIndex === -1 && vnode.dom === activeElement()
-				))
-				&& !(vnode.tag === "input" && key === "type")
-			) {
-				vnode.dom[key] = null;
-			} else {
-				var nsLastIndex = key.indexOf(":");
-				if (nsLastIndex !== -1) key = key.slice(nsLastIndex + 1);
-				if (old !== false) vnode.dom.removeAttribute(key === "className" ? "class" : key);
-			}
-		}
-		function setLateSelectAttrs(vnode, attrs) {
-			if ("value" in attrs) {
-				if(attrs.value === null) {
-					if (vnode.dom.selectedIndex !== -1) vnode.dom.value = null;
-				} else {
-					var normalized = "" + attrs.value; // eslint-disable-line no-implicit-coercion
-					if (vnode.dom.value !== normalized || vnode.dom.selectedIndex === -1) {
-						vnode.dom.value = normalized;
-					}
-				}
-			}
-			if ("selectedIndex" in attrs) setAttr(vnode, "selectedIndex", null, attrs.selectedIndex, undefined);
-		}
-		function updateAttrs(vnode, old, attrs, ns) {
-			if (attrs != null) {
-				for (var key in attrs) {
-					setAttr(vnode, key, old && old[key], attrs[key], ns);
-				}
-			}
-			var val;
-			if (old != null) {
-				for (var key in old) {
-					if (((val = old[key]) != null) && (attrs == null || attrs[key] == null)) {
-						removeAttr(vnode, key, val, ns);
-					}
-				}
-			}
-		}
-		function isFormAttribute(vnode, attr) {
-			return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === activeElement() || vnode.tag === "option" && vnode.dom.parentNode === $doc.activeElement
-		}
-		function isLifecycleMethod(attr) {
-			return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "onbeforeupdate"
-		}
-		function hasPropertyKey(vnode, key, ns) {
-			// Filter out namespaced keys
-			return ns === undefined && (
-				// If it's a custom element, just keep it.
-				vnode.tag.indexOf("-") > -1 || vnode.attrs != null && vnode.attrs.is ||
-				// If it's a normal element, let's try to avoid a few browser bugs.
-				key !== "href" && key !== "list" && key !== "form" && key !== "width" && key !== "height"// && key !== "type"
-				// Defer the property check until *after* we check everything.
-			) && key in vnode.dom
-		}
-
-		//style
-		var uppercaseRegex = /[A-Z]/g;
-		function toLowerCase(capital) { return "-" + capital.toLowerCase() }
-		function normalizeKey(key) {
-			return key[0] === "-" && key[1] === "-" ? key :
-				key === "cssFloat" ? "float" :
-					key.replace(uppercaseRegex, toLowerCase)
-		}
-		function updateStyle(element, old, style) {
-			if (old === style) ; else if (style == null) {
-				// New style is missing, just clear it.
-				element.style.cssText = "";
-			} else if (typeof style !== "object") {
-				// New style is a string, let engine deal with patching.
-				element.style.cssText = style;
-			} else if (old == null || typeof old !== "object") {
-				// `old` is missing or a string, `style` is an object.
-				element.style.cssText = "";
-				// Add new style properties
-				for (var key in style) {
-					var value = style[key];
-					if (value != null) element.style.setProperty(normalizeKey(key), String(value));
-				}
-			} else {
-				// Both old & new are (different) objects.
-				// Update style properties that have changed
-				for (var key in style) {
-					var value = style[key];
-					if (value != null && (value = String(value)) !== String(old[key])) {
-						element.style.setProperty(normalizeKey(key), value);
-					}
-				}
-				// Remove style properties that no longer exist
-				for (var key in old) {
-					if (old[key] != null && style[key] == null) {
-						element.style.removeProperty(normalizeKey(key));
-					}
-				}
-			}
-		}
-
-		// Here's an explanation of how this works:
-		// 1. The event names are always (by design) prefixed by `on`.
-		// 2. The EventListener interface accepts either a function or an object
-		//    with a `handleEvent` method.
-		// 3. The object does not inherit from `Object.prototype`, to avoid
-		//    any potential interference with that (e.g. setters).
-		// 4. The event name is remapped to the handler before calling it.
-		// 5. In function-based event handlers, `ev.target === this`. We replicate
-		//    that below.
-		// 6. In function-based event handlers, `return false` prevents the default
-		//    action and stops event propagation. We replicate that below.
-		function EventDict() {
-			// Save this, so the current redraw is correctly tracked.
-			this._ = currentRedraw;
-		}
-		EventDict.prototype = Object.create(null);
-		EventDict.prototype.handleEvent = function (ev) {
-			var handler = this["on" + ev.type];
-			var result;
-			if (typeof handler === "function") result = handler.call(ev.currentTarget, ev);
-			else if (typeof handler.handleEvent === "function") handler.handleEvent(ev);
-			if (this._ && ev.redraw !== false) (0, this._)();
-			if (result === false) {
-				ev.preventDefault();
-				ev.stopPropagation();
-			}
-		};
-
-		//event
-		function updateEvent(vnode, key, value) {
-			if (vnode.events != null) {
-				if (vnode.events[key] === value) return
-				if (value != null && (typeof value === "function" || typeof value === "object")) {
-					if (vnode.events[key] == null) vnode.dom.addEventListener(key.slice(2), vnode.events, false);
-					vnode.events[key] = value;
-				} else {
-					if (vnode.events[key] != null) vnode.dom.removeEventListener(key.slice(2), vnode.events, false);
-					vnode.events[key] = undefined;
-				}
-			} else if (value != null && (typeof value === "function" || typeof value === "object")) {
-				vnode.events = new EventDict();
-				vnode.dom.addEventListener(key.slice(2), vnode.events, false);
-				vnode.events[key] = value;
-			}
-		}
-
-		//lifecycle
-		function initLifecycle(source, vnode, hooks) {
-			if (typeof source.oninit === "function") callHook.call(source.oninit, vnode);
-			if (typeof source.oncreate === "function") hooks.push(callHook.bind(source.oncreate, vnode));
-		}
-		function updateLifecycle(source, vnode, hooks) {
-			if (typeof source.onupdate === "function") hooks.push(callHook.bind(source.onupdate, vnode));
-		}
-		function shouldNotUpdate(vnode, old) {
-			do {
-				if (vnode.attrs != null && typeof vnode.attrs.onbeforeupdate === "function") {
-					var force = callHook.call(vnode.attrs.onbeforeupdate, vnode, old);
-					if (force !== undefined && !force) break
-				}
-				if (typeof vnode.tag !== "string" && typeof vnode.state.onbeforeupdate === "function") {
-					var force = callHook.call(vnode.state.onbeforeupdate, vnode, old);
-					if (force !== undefined && !force) break
-				}
-				return false
-			} while (false); // eslint-disable-line no-constant-condition
-			vnode.dom = old.dom;
-			vnode.domSize = old.domSize;
-			vnode.instance = old.instance;
-			// One would think having the actual latest attributes would be ideal,
-			// but it doesn't let us properly diff based on our current internal
-			// representation. We have to save not only the old DOM info, but also
-			// the attributes used to create it, as we diff *that*, not against the
-			// DOM directly (with a few exceptions in `setAttr`). And, of course, we
-			// need to save the children and text as they are conceptually not
-			// unlike special "attributes" internally.
-			vnode.attrs = old.attrs;
-			vnode.children = old.children;
-			vnode.text = old.text;
-			return true
-		}
-
-		return function(dom, vnodes, redraw) {
-			if (!dom) throw new TypeError("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.")
-			var hooks = [];
-			var active = activeElement();
-			var namespace = dom.namespaceURI;
-
-			// First time rendering into a node clears it out
-			if (dom.vnodes == null) dom.textContent = "";
-
-			vnodes = vnode.normalizeChildren(Array.isArray(vnodes) ? vnodes : [vnodes]);
-			var prevRedraw = currentRedraw;
-			try {
-				currentRedraw = typeof redraw === "function" ? redraw : undefined;
-				updateNodes(dom, dom.vnodes, vnodes, hooks, null, namespace === "http://www.w3.org/1999/xhtml" ? undefined : namespace);
-			} finally {
-				currentRedraw = prevRedraw;
-			}
-			dom.vnodes = vnodes;
-			// `document.activeElement` can return null: https://html.spec.whatwg.org/multipage/interaction.html#dom-document-activeelement
-			if (active != null && activeElement() !== active && typeof active.focus === "function") active.focus();
-			for (var i = 0; i < hooks.length; i++) hooks[i]();
-		}
-	};
-
-	var render = render$1(window);
-
-	var mountRedraw$1 = function(render, schedule, console) {
-		var subscriptions = [];
-		var rendering = false;
-		var pending = false;
-
-		function sync() {
-			if (rendering) throw new Error("Nested m.redraw.sync() call")
-			rendering = true;
-			for (var i = 0; i < subscriptions.length; i += 2) {
-				try { render(subscriptions[i], vnode(subscriptions[i + 1]), redraw); }
-				catch (e) { console.error(e); }
-			}
-			rendering = false;
-		}
-
-		function redraw() {
-			if (!pending) {
-				pending = true;
-				schedule(function() {
-					pending = false;
-					sync();
-				});
-			}
-		}
-
-		redraw.sync = sync;
-
-		function mount(root, component) {
-			if (component != null && component.view == null && typeof component !== "function") {
-				throw new TypeError("m.mount(element, component) expects a component, not a vnode")
-			}
-
-			var index = subscriptions.indexOf(root);
-			if (index >= 0) {
-				subscriptions.splice(index, 2);
-				render(root, [], redraw);
-			}
-
-			if (component != null) {
-				subscriptions.push(root, component);
-				render(root, vnode(component), redraw);
-			}
-		}
-
-		return {mount: mount, redraw: redraw}
-	};
-
-	var mountRedraw = mountRedraw$1(render, requestAnimationFrame, console);
-
-	var build$2 = function(object) {
-		if (Object.prototype.toString.call(object) !== "[object Object]") return ""
-
-		var args = [];
-		for (var key in object) {
-			destructure(key, object[key]);
-		}
-
-		return args.join("&")
-
-		function destructure(key, value) {
-			if (Array.isArray(value)) {
-				for (var i = 0; i < value.length; i++) {
-					destructure(key + "[" + i + "]", value[i]);
-				}
-			}
-			else if (Object.prototype.toString.call(value) === "[object Object]") {
-				for (var i in value) {
-					destructure(key + "[" + i + "]", value[i]);
-				}
-			}
-			else args.push(encodeURIComponent(key) + (value != null && value !== "" ? "=" + encodeURIComponent(value) : ""));
-		}
-	};
-
-	var assign$1 = Object.assign || function(target, source) {
-		if(source) Object.keys(source).forEach(function(key) { target[key] = source[key]; });
-	};
-
-	// Returns `path` from `template` + `params`
-	var build$1 = function(template, params) {
-		if ((/:([^\/\.-]+)(\.{3})?:/).test(template)) {
-			throw new SyntaxError("Template parameter names *must* be separated")
-		}
-		if (params == null) return template
-		var queryIndex = template.indexOf("?");
-		var hashIndex = template.indexOf("#");
-		var queryEnd = hashIndex < 0 ? template.length : hashIndex;
-		var pathEnd = queryIndex < 0 ? queryEnd : queryIndex;
-		var path = template.slice(0, pathEnd);
-		var query = {};
-
-		assign$1(query, params);
-
-		var resolved = path.replace(/:([^\/\.-]+)(\.{3})?/g, function(m, key, variadic) {
-			delete query[key];
-			// If no such parameter exists, don't interpolate it.
-			if (params[key] == null) return m
-			// Escape normal parameters, but not variadic ones.
-			return variadic ? params[key] : encodeURIComponent(String(params[key]))
-		});
-
-		// In case the template substitution adds new query/hash parameters.
-		var newQueryIndex = resolved.indexOf("?");
-		var newHashIndex = resolved.indexOf("#");
-		var newQueryEnd = newHashIndex < 0 ? resolved.length : newHashIndex;
-		var newPathEnd = newQueryIndex < 0 ? newQueryEnd : newQueryIndex;
-		var result = resolved.slice(0, newPathEnd);
-
-		if (queryIndex >= 0) result += template.slice(queryIndex, queryEnd);
-		if (newQueryIndex >= 0) result += (queryIndex < 0 ? "?" : "&") + resolved.slice(newQueryIndex, newQueryEnd);
-		var querystring = build$2(query);
-		if (querystring) result += (queryIndex < 0 && newQueryIndex < 0 ? "?" : "&") + querystring;
-		if (hashIndex >= 0) result += template.slice(hashIndex);
-		if (newHashIndex >= 0) result += (hashIndex < 0 ? "" : "&") + resolved.slice(newHashIndex);
-		return result
-	};
-
-	var request$1 = function($window, Promise, oncompletion) {
-		var callbackCount = 0;
-
-		function PromiseProxy(executor) {
-			return new Promise(executor)
-		}
-
-		// In case the global Promise is some userland library's where they rely on
-		// `foo instanceof this.constructor`, `this.constructor.resolve(value)`, or
-		// similar. Let's *not* break them.
-		PromiseProxy.prototype = Promise.prototype;
-		PromiseProxy.__proto__ = Promise; // eslint-disable-line no-proto
-
-		function makeRequest(factory) {
-			return function(url, args) {
-				if (typeof url !== "string") { args = url; url = url.url; }
-				else if (args == null) args = {};
-				var promise = new Promise(function(resolve, reject) {
-					factory(build$1(url, args.params), args, function (data) {
-						if (typeof args.type === "function") {
-							if (Array.isArray(data)) {
-								for (var i = 0; i < data.length; i++) {
-									data[i] = new args.type(data[i]);
-								}
-							}
-							else data = new args.type(data);
-						}
-						resolve(data);
-					}, reject);
-				});
-				if (args.background === true) return promise
-				var count = 0;
-				function complete() {
-					if (--count === 0 && typeof oncompletion === "function") oncompletion();
-				}
-
-				return wrap(promise)
-
-				function wrap(promise) {
-					var then = promise.then;
-					// Set the constructor, so engines know to not await or resolve
-					// this as a native promise. At the time of writing, this is
-					// only necessary for V8, but their behavior is the correct
-					// behavior per spec. See this spec issue for more details:
-					// https://github.com/tc39/ecma262/issues/1577. Also, see the
-					// corresponding comment in `request/tests/test-request.js` for
-					// a bit more background on the issue at hand.
-					promise.constructor = PromiseProxy;
-					promise.then = function() {
-						count++;
-						var next = then.apply(promise, arguments);
-						next.then(complete, function(e) {
-							complete();
-							if (count === 0) throw e
-						});
-						return wrap(next)
-					};
-					return promise
-				}
-			}
-		}
-
-		function hasHeader(args, name) {
-			for (var key in args.headers) {
-				if ({}.hasOwnProperty.call(args.headers, key) && name.test(key)) return true
-			}
-			return false
-		}
-
-		return {
-			request: makeRequest(function(url, args, resolve, reject) {
-				var method = args.method != null ? args.method.toUpperCase() : "GET";
-				var body = args.body;
-				var assumeJSON = (args.serialize == null || args.serialize === JSON.serialize) && !(body instanceof $window.FormData);
-				var responseType = args.responseType || (typeof args.extract === "function" ? "" : "json");
-
-				var xhr = new $window.XMLHttpRequest(), aborted = false;
-				var original = xhr, replacedAbort;
-				var abort = xhr.abort;
-
-				xhr.abort = function() {
-					aborted = true;
-					abort.call(this);
-				};
-
-				xhr.open(method, url, args.async !== false, typeof args.user === "string" ? args.user : undefined, typeof args.password === "string" ? args.password : undefined);
-
-				if (assumeJSON && body != null && !hasHeader(args, /^content-type$/i)) {
-					xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
-				}
-				if (typeof args.deserialize !== "function" && !hasHeader(args, /^accept$/i)) {
-					xhr.setRequestHeader("Accept", "application/json, text/*");
-				}
-				if (args.withCredentials) xhr.withCredentials = args.withCredentials;
-				if (args.timeout) xhr.timeout = args.timeout;
-				xhr.responseType = responseType;
-
-				for (var key in args.headers) {
-					if ({}.hasOwnProperty.call(args.headers, key)) {
-						xhr.setRequestHeader(key, args.headers[key]);
-					}
-				}
-
-				xhr.onreadystatechange = function(ev) {
-					// Don't throw errors on xhr.abort().
-					if (aborted) return
-
-					if (ev.target.readyState === 4) {
-						try {
-							var success = (ev.target.status >= 200 && ev.target.status < 300) || ev.target.status === 304 || (/^file:\/\//i).test(url);
-							// When the response type isn't "" or "text",
-							// `xhr.responseText` is the wrong thing to use.
-							// Browsers do the right thing and throw here, and we
-							// should honor that and do the right thing by
-							// preferring `xhr.response` where possible/practical.
-							var response = ev.target.response, message;
-
-							if (responseType === "json") {
-								// For IE and Edge, which don't implement
-								// `responseType: "json"`.
-								if (!ev.target.responseType && typeof args.extract !== "function") response = JSON.parse(ev.target.responseText);
-							} else if (!responseType || responseType === "text") {
-								// Only use this default if it's text. If a parsed
-								// document is needed on old IE and friends (all
-								// unsupported), the user should use a custom
-								// `config` instead. They're already using this at
-								// their own risk.
-								if (response == null) response = ev.target.responseText;
-							}
-
-							if (typeof args.extract === "function") {
-								response = args.extract(ev.target, args);
-								success = true;
-							} else if (typeof args.deserialize === "function") {
-								response = args.deserialize(response);
-							}
-							if (success) resolve(response);
-							else {
-								try { message = ev.target.responseText; }
-								catch (e) { message = response; }
-								var error = new Error(message);
-								error.code = ev.target.status;
-								error.response = response;
-								reject(error);
-							}
-						}
-						catch (e) {
-							reject(e);
-						}
-					}
-				};
-
-				if (typeof args.config === "function") {
-					xhr = args.config(xhr, args, url) || xhr;
-
-					// Propagate the `abort` to any replacement XHR as well.
-					if (xhr !== original) {
-						replacedAbort = xhr.abort;
-						xhr.abort = function() {
-							aborted = true;
-							replacedAbort.call(this);
-						};
-					}
-				}
-
-				if (body == null) xhr.send();
-				else if (typeof args.serialize === "function") xhr.send(args.serialize(body));
-				else if (body instanceof $window.FormData) xhr.send(body);
-				else xhr.send(JSON.stringify(body));
-			}),
-			jsonp: makeRequest(function(url, args, resolve, reject) {
-				var callbackName = args.callbackName || "_mithril_" + Math.round(Math.random() * 1e16) + "_" + callbackCount++;
-				var script = $window.document.createElement("script");
-				$window[callbackName] = function(data) {
-					delete $window[callbackName];
-					script.parentNode.removeChild(script);
-					resolve(data);
-				};
-				script.onerror = function() {
-					delete $window[callbackName];
-					script.parentNode.removeChild(script);
-					reject(new Error("JSONP request failed"));
-				};
-				script.src = url + (url.indexOf("?") < 0 ? "?" : "&") +
-					encodeURIComponent(args.callbackKey || "callback") + "=" +
-					encodeURIComponent(callbackName);
-				$window.document.documentElement.appendChild(script);
-			}),
-		}
-	};
-
-	var request = request$1(window, promise, mountRedraw.redraw);
-
-	var parse$1 = function(string) {
-		if (string === "" || string == null) return {}
-		if (string.charAt(0) === "?") string = string.slice(1);
-
-		var entries = string.split("&"), counters = {}, data = {};
-		for (var i = 0; i < entries.length; i++) {
-			var entry = entries[i].split("=");
-			var key = decodeURIComponent(entry[0]);
-			var value = entry.length === 2 ? decodeURIComponent(entry[1]) : "";
-
-			if (value === "true") value = true;
-			else if (value === "false") value = false;
-
-			var levels = key.split(/\]\[?|\[/);
-			var cursor = data;
-			if (key.indexOf("[") > -1) levels.pop();
-			for (var j = 0; j < levels.length; j++) {
-				var level = levels[j], nextLevel = levels[j + 1];
-				var isNumber = nextLevel == "" || !isNaN(parseInt(nextLevel, 10));
-				if (level === "") {
-					var key = levels.slice(0, j).join();
-					if (counters[key] == null) {
-						counters[key] = Array.isArray(cursor) ? cursor.length : 0;
-					}
-					level = counters[key]++;
-				}
-				// Disallow direct prototype pollution
-				else if (level === "__proto__") break
-				if (j === levels.length - 1) cursor[level] = value;
-				else {
-					// Read own properties exclusively to disallow indirect
-					// prototype pollution
-					var desc = Object.getOwnPropertyDescriptor(cursor, level);
-					if (desc != null) desc = desc.value;
-					if (desc == null) cursor[level] = desc = isNumber ? [] : {};
-					cursor = desc;
-				}
-			}
-		}
-		return data
-	};
-
-	// Returns `{path, params}` from `url`
-	var parse = function(url) {
-		var queryIndex = url.indexOf("?");
-		var hashIndex = url.indexOf("#");
-		var queryEnd = hashIndex < 0 ? url.length : hashIndex;
-		var pathEnd = queryIndex < 0 ? queryEnd : queryIndex;
-		var path = url.slice(0, pathEnd).replace(/\/{2,}/g, "/");
-
-		if (!path) path = "/";
-		else {
-			if (path[0] !== "/") path = "/" + path;
-			if (path.length > 1 && path[path.length - 1] === "/") path = path.slice(0, -1);
-		}
-		return {
-			path: path,
-			params: queryIndex < 0
-				? {}
-				: parse$1(url.slice(queryIndex + 1, queryEnd)),
-		}
-	};
-
-	// Compiles a template into a function that takes a resolved path (without query
-	// strings) and returns an object containing the template parameters with their
-	// parsed values. This expects the input of the compiled template to be the
-	// output of `parsePathname`. Note that it does *not* remove query parameters
-	// specified in the template.
-	var compileTemplate = function(template) {
-		var templateData = parse(template);
-		var templateKeys = Object.keys(templateData.params);
-		var keys = [];
-		var regexp = new RegExp("^" + templateData.path.replace(
-			// I escape literal text so people can use things like `:file.:ext` or
-			// `:lang-:locale` in routes. This is all merged into one pass so I
-			// don't also accidentally escape `-` and make it harder to detect it to
-			// ban it from template parameters.
-			/:([^\/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|\[\]{}]/g,
-			function(m, key, extra) {
-				if (key == null) return "\\" + m
-				keys.push({k: key, r: extra === "..."});
-				if (extra === "...") return "(.*)"
-				if (extra === ".") return "([^/]+)\\."
-				return "([^/]+)" + (extra || "")
-			}
-		) + "$");
-		return function(data) {
-			// First, check the params. Usually, there isn't any, and it's just
-			// checking a static set.
-			for (var i = 0; i < templateKeys.length; i++) {
-				if (templateData.params[templateKeys[i]] !== data.params[templateKeys[i]]) return false
-			}
-			// If no interpolations exist, let's skip all the ceremony
-			if (!keys.length) return regexp.test(data.path)
-			var values = regexp.exec(data.path);
-			if (values == null) return false
-			for (var i = 0; i < keys.length; i++) {
-				data.params[keys[i].k] = keys[i].r ? values[i + 1] : decodeURIComponent(values[i + 1]);
-			}
-			return true
-		}
-	};
-
-	var sentinel = {};
-
-	var router = function($window, mountRedraw) {
-		var fireAsync;
-
-		function setPath(path, data, options) {
-			path = build$1(path, data);
-			if (fireAsync != null) {
-				fireAsync();
-				var state = options ? options.state : null;
-				var title = options ? options.title : null;
-				if (options && options.replace) $window.history.replaceState(state, title, route.prefix + path);
-				else $window.history.pushState(state, title, route.prefix + path);
-			}
-			else {
-				$window.location.href = route.prefix + path;
-			}
-		}
-
-		var currentResolver = sentinel, component, attrs, currentPath, lastUpdate;
-
-		var SKIP = route.SKIP = {};
-
-		function route(root, defaultRoute, routes) {
-			if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined")
-			// 0 = start
-			// 1 = init
-			// 2 = ready
-			var state = 0;
-
-			var compiled = Object.keys(routes).map(function(route) {
-				if (route[0] !== "/") throw new SyntaxError("Routes must start with a `/`")
-				if ((/:([^\/\.-]+)(\.{3})?:/).test(route)) {
-					throw new SyntaxError("Route parameter names must be separated with either `/`, `.`, or `-`")
-				}
-				return {
-					route: route,
-					component: routes[route],
-					check: compileTemplate(route),
-				}
-			});
-			var callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout;
-			var p = promise.resolve();
-			var scheduled = false;
-			var onremove;
-
-			fireAsync = null;
-
-			if (defaultRoute != null) {
-				var defaultData = parse(defaultRoute);
-
-				if (!compiled.some(function (i) { return i.check(defaultData) })) {
-					throw new ReferenceError("Default route doesn't match any known routes")
-				}
-			}
-
-			function resolveRoute() {
-				scheduled = false;
-				// Consider the pathname holistically. The prefix might even be invalid,
-				// but that's not our problem.
-				var prefix = $window.location.hash;
-				if (route.prefix[0] !== "#") {
-					prefix = $window.location.search + prefix;
-					if (route.prefix[0] !== "?") {
-						prefix = $window.location.pathname + prefix;
-						if (prefix[0] !== "/") prefix = "/" + prefix;
-					}
-				}
-				// This seemingly useless `.concat()` speeds up the tests quite a bit,
-				// since the representation is consistently a relatively poorly
-				// optimized cons string.
-				var path = prefix.concat()
-					.replace(/(?:%[a-f89][a-f0-9])+/gim, decodeURIComponent)
-					.slice(route.prefix.length);
-				var data = parse(path);
-
-				assign$1(data.params, $window.history.state);
-
-				function fail() {
-					if (path === defaultRoute) throw new Error("Could not resolve default route " + defaultRoute)
-					setPath(defaultRoute, null, {replace: true});
-				}
-
-				loop(0);
-				function loop(i) {
-					// 0 = init
-					// 1 = scheduled
-					// 2 = done
-					for (; i < compiled.length; i++) {
-						if (compiled[i].check(data)) {
-							var payload = compiled[i].component;
-							var matchedRoute = compiled[i].route;
-							var localComp = payload;
-							var update = lastUpdate = function(comp) {
-								if (update !== lastUpdate) return
-								if (comp === SKIP) return loop(i + 1)
-								component = comp != null && (typeof comp.view === "function" || typeof comp === "function")? comp : "div";
-								attrs = data.params, currentPath = path, lastUpdate = null;
-								currentResolver = payload.render ? payload : null;
-								if (state === 2) mountRedraw.redraw();
-								else {
-									state = 2;
-									mountRedraw.redraw.sync();
-								}
-							};
-							// There's no understating how much I *wish* I could
-							// use `async`/`await` here...
-							if (payload.view || typeof payload === "function") {
-								payload = {};
-								update(localComp);
-							}
-							else if (payload.onmatch) {
-								p.then(function () {
-									return payload.onmatch(data.params, path, matchedRoute)
-								}).then(update, fail);
-							}
-							else update("div");
-							return
-						}
-					}
-					fail();
-				}
-			}
-
-			// Set it unconditionally so `m.route.set` and `m.route.Link` both work,
-			// even if neither `pushState` nor `hashchange` are supported. It's
-			// cleared if `hashchange` is used, since that makes it automatically
-			// async.
-			fireAsync = function() {
-				if (!scheduled) {
-					scheduled = true;
-					callAsync(resolveRoute);
-				}
-			};
-
-			if (typeof $window.history.pushState === "function") {
-				onremove = function() {
-					$window.removeEventListener("popstate", fireAsync, false);
-				};
-				$window.addEventListener("popstate", fireAsync, false);
-			} else if (route.prefix[0] === "#") {
-				fireAsync = null;
-				onremove = function() {
-					$window.removeEventListener("hashchange", resolveRoute, false);
-				};
-				$window.addEventListener("hashchange", resolveRoute, false);
-			}
-
-			return mountRedraw.mount(root, {
-				onbeforeupdate: function() {
-					state = state ? 2 : 1;
-					return !(!state || sentinel === currentResolver)
-				},
-				oncreate: resolveRoute,
-				onremove: onremove,
-				view: function() {
-					if (!state || sentinel === currentResolver) return
-					// Wrap in a fragment to preserve existing key semantics
-					var vnode$1 = [vnode(component, attrs.key, attrs)];
-					if (currentResolver) vnode$1 = currentResolver.render(vnode$1[0]);
-					return vnode$1
-				},
-			})
-		}
-		route.set = function(path, data, options) {
-			if (lastUpdate != null) {
-				options = options || {};
-				options.replace = true;
-			}
-			lastUpdate = null;
-			setPath(path, data, options);
-		};
-		route.get = function() {return currentPath};
-		route.prefix = "#!";
-		route.Link = {
-			view: function(vnode) {
-				var options = vnode.attrs.options;
-				// Remove these so they don't get overwritten
-				var attrs = {}, onclick, href;
-				assign$1(attrs, vnode.attrs);
-				// The first two are internal, but the rest are magic attributes
-				// that need censored to not screw up rendering.
-				attrs.selector = attrs.options = attrs.key = attrs.oninit =
-				attrs.oncreate = attrs.onbeforeupdate = attrs.onupdate =
-				attrs.onbeforeremove = attrs.onremove = null;
-
-				// Do this now so we can get the most current `href` and `disabled`.
-				// Those attributes may also be specified in the selector, and we
-				// should honor that.
-				var child = hyperscript_1$1(vnode.attrs.selector || "a", attrs, vnode.children);
-
-				// Let's provide a *right* way to disable a route link, rather than
-				// letting people screw up accessibility on accident.
-				//
-				// The attribute is coerced so users don't get surprised over
-				// `disabled: 0` resulting in a button that's somehow routable
-				// despite being visibly disabled.
-				if (child.attrs.disabled = Boolean(child.attrs.disabled)) {
-					child.attrs.href = null;
-					child.attrs["aria-disabled"] = "true";
-					// If you *really* do want to do this on a disabled link, use
-					// an `oncreate` hook to add it.
-					child.attrs.onclick = null;
-				} else {
-					onclick = child.attrs.onclick;
-					href = child.attrs.href;
-					child.attrs.href = route.prefix + href;
-					child.attrs.onclick = function(e) {
-						var result;
-						if (typeof onclick === "function") {
-							result = onclick.call(e.currentTarget, e);
-						} else if (onclick == null || typeof onclick !== "object") ; else if (typeof onclick.handleEvent === "function") {
-							onclick.handleEvent(e);
-						}
-
-						// Adapted from React Router's implementation:
-						// https://github.com/ReactTraining/react-router/blob/520a0acd48ae1b066eb0b07d6d4d1790a1d02482/packages/react-router-dom/modules/Link.js
-						//
-						// Try to be flexible and intuitive in how we handle links.
-						// Fun fact: links aren't as obvious to get right as you
-						// would expect. There's a lot more valid ways to click a
-						// link than this, and one might want to not simply click a
-						// link, but right click or command-click it to copy the
-						// link target, etc. Nope, this isn't just for blind people.
-						if (
-							// Skip if `onclick` prevented default
-							result !== false && !e.defaultPrevented &&
-							// Ignore everything but left clicks
-							(e.button === 0 || e.which === 0 || e.which === 1) &&
-							// Let the browser handle `target=_blank`, etc.
-							(!e.currentTarget.target || e.currentTarget.target === "_self") &&
-							// No modifier keys
-							!e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey
-						) {
-							e.preventDefault();
-							e.redraw = false;
-							route.set(href, null, options);
-						}
-					};
-				}
-				return child
-			},
-		};
-		route.param = function(key) {
-			return attrs && key != null ? attrs[key] : attrs
-		};
-
-		return route
-	};
-
-	var route = router(window, mountRedraw);
-
-	var m = function m() { return hyperscript_1.apply(this, arguments) };
-	m.m = hyperscript_1;
-	m.trust = hyperscript_1.trust;
-	m.fragment = hyperscript_1.fragment;
-	m.mount = mountRedraw.mount;
-	m.route = route;
-	m.render = render;
-	m.redraw = mountRedraw.redraw;
-	m.request = request.request;
-	m.jsonp = request.jsonp;
-	m.parseQueryString = parse$1;
-	m.buildQueryString = build$2;
-	m.parsePathname = parse;
-	m.buildPathname = build$1;
-	m.vnode = vnode;
-	m.PromisePolyfill = polyfill;
-
-	var mithril = m;
-
-	var registry = {};
-	/**
-	 * Gets a registered component for a given type name
-	 *
-	 * @public
-	 * @param type - The component type
-	 */
-	function getComponent(type) {
-	    if (registry[type]) {
-	        return registry[type];
-	    }
-	    throw new Error("Component of type '" + type + "' was not found");
-	}
-	/**
-	 * Registers a component
-	 *
-	 * @public
-	 * @param type - The component type name
-	 * @param comp - The component
-	 * @param override - Allows to override an already registered component
-	 */
-	function component(type, comp, override) {
-	    if (override === void 0) { override = false; }
-	    if (registry[type] && !override) {
-	        console.warn("Component ignored. Name '" + type + "' is already registered.");
-	    }
-	    else {
-	        registry[type] = comp;
-	    }
-	}
-
-	/**
-	 * Renders a registered component using the model
-	 *
-	 * @public
-	 * @param model - The model
-	 */
-	function renderModel(model) {
-	    if (!model.type) {
-	        console.error(new Error('Given data is missing the .type property. Component can resolve the component'), model);
-	        return null;
-	    }
-	    if (model.hidden) {
-	        return null;
-	    }
-	    return mithril(getComponent(model.type), { data: model });
-	}
-
-	/**
-	 * Gets a value of a view model
-	 *
-	 * @public
-	 * @param model - The model of a component
-	 */
-	function getValue(model) {
-	    return decode(model, readValue(model));
-	}
-	/**
-	 * Sets a value on a view model
-	 *
-	 * @public
-	 * @param model - The model of a component
-	 * @param value - The value for the component
-	 * @returns the encoded value as it was written to the model
-	 */
-	function setValue(model, value) {
-	    var encoded = encode(model, value);
-	    writeValue(model, encoded);
-	    return encoded;
-	}
-	function readValue(model) {
-	    if ('target' in model &&
-	        model.target &&
-	        model.property != null &&
-	        model.property in model.target) {
-	        return model.target[model.property];
-	    }
-	    if ('value' in model) {
-	        return model.value;
-	    }
-	}
-	function writeValue(model, value) {
-	    if ('target' in model && model.target && model.property != null) {
-	        model.target[model.property] = value;
-	    }
-	    else if (isWriteable(model, 'value')) {
-	        model.value = value;
-	    }
-	}
-	function isWriteable(obj, key) {
-	    var desc = Object.getOwnPropertyDescriptor(obj, key);
-	    return !desc || !!desc.writable || !!desc.set;
-	}
-	function encode(source, value) {
-	    return 'codec' in source && source.codec ? source.codec.encode(value) : value;
-	}
-	function decode(source, value) {
-	    return 'codec' in source && source.codec ? source.codec.decode(value) : value;
-	}
-
-	/**
-	 * Checks if value is a string
-	 * @internal
-	 */
-	function isString(v) {
-	    return typeof v === 'string';
-	}
-	/**
-	 * Checks if value is a number
-	 * @internal
-	 */
-	function isNumber(v) {
-	    return typeof v === 'number';
-	}
-	/**
-	 * Checks if value is a function
-	 * @internal
-	 */
-	function isFunction(v) {
-	    return typeof v === 'function';
-	}
-	/**
-	 * Checks if value is an array
-	 * @internal
-	 */
-	function isArray(v) {
-	    return Array.isArray(v);
-	}
-	/**
-	 * Checks if value is an object
-	 * @internal
-	 */
-	function isObject(v) {
-	    return v != null && typeof v === 'object' && !isArray(v);
-	}
-	/**
-	 * Calls a function if it is not null
-	 * @internal
-	 */
-	function call(cb) {
-	    var args = [];
-	    for (var _i = 1; _i < arguments.length; _i++) {
-	        args[_i - 1] = arguments[_i];
-	    }
-	    return isFunction(cb) ? cb.apply(void 0, args) : null;
-	}
-	/**
-	 * Resolves a property to its value
-	 * @param value - the function or value to resolve
-	 */
-	function resolve(value) {
-	    return isFunction(value) ? value() : value;
-	}
-	/**
-	 * Calls the callback of object is not null
-	 * @internal
-	 */
-	function use(obj, cb) {
-	    return obj == null ? null : cb(obj);
-	}
-	/**
-	 * Clamps a number value
-	 * @internal
-	 */
-	function clamp(v, min, max) {
-	    if (v != null) {
-	        if (min != null && v < min) {
-	            return min;
-	        }
-	        if (max != null && v > max) {
-	            return max;
-	        }
-	    }
-	    return v;
-	}
-	/**
-	 * Builds a css class from various argument types
-	 * @param exp
-	 */
-	function cssClass(exp) {
-	    if (!exp) {
-	        return null;
-	    }
-	    if (isString(exp)) {
-	        return exp;
-	    }
-	    if (isArray(exp)) {
-	        return exp.map(cssClass).join(' ');
-	    }
-	    return Object.keys(exp)
-	        .filter(function (it) { return resolve(exp[it]); })
-	        .filter(function (it) { return isString(it) && !!it; })
-	        .join(' ');
-	}
-	/**
-	 * Pads a string
-	 * @internal
-	 */
-	function padLeft(value, length, char) {
-	    while (value.length < length) {
-	        value = "" + char + value;
-	    }
-	    return value;
-	}
-	/**
-	 * @internal
-	 */
-	function twuiClass(name, variation) {
-	    return "twui-" + name + (variation ? "-" + variation : '');
-	}
-	/**
-	 * Gets current mouse coordinates from mouse or touch event
-	 * @internal
-	 */
-	function getTouchPoint(e) {
-	    var cx = 0;
-	    var cy = 0;
-	    if ('touches' in e) {
-	        cx = e.touches.item(0).pageX;
-	        cy = e.touches.item(0).pageY;
-	    }
-	    else {
-	        cx = e.pageX;
-	        cy = e.pageY;
-	    }
-	    return [cx, cy];
-	}
-	function getTouchInTarget(e, target, offset) {
-	    target = target || e.target;
-	    var rect = target.getBoundingClientRect();
-	    var tx = window.pageXOffset || document.documentElement.scrollLeft;
-	    var ty = window.pageYOffset || document.documentElement.scrollTop;
-	    var cw = target.clientWidth;
-	    var ch = target.clientHeight;
-	    var _a = getTouchPoint(e), cx = _a[0], cy = _a[1];
-	    if (offset) {
-	        cx += offset[0];
-	        cy += offset[1];
-	    }
-	    var x = cx - tx - rect.left;
-	    var y = cy - ty - rect.top;
-	    return {
-	        width: cw,
-	        height: ch,
-	        x: x,
-	        y: y,
-	        normalizedX: x / cw,
-	        normalizedY: y / ch,
-	    };
-	}
-	/**
-	 * @internal
-	 */
-	function viewFn(fn) {
-	    return function (node) {
-	        return use(node.attrs.data, function (data) { return fn(data, node); });
-	    };
-	}
-	function dragUtil(_a) {
-	    var onStart = _a.onStart, onMove = _a.onMove, onEnd = _a.onEnd;
-	    var util = {
-	        target: null,
-	        activate: function (e) {
-	            util.deactivate();
-	            util.target = e.target;
-	            if (onStart) {
-	                onStart(e);
-	            }
-	            if (onMove) {
-	                document.addEventListener('mousemove', onMove, { passive: false });
-	                document.addEventListener('touchmove', onMove, { passive: false });
-	            }
-	            if (onEnd) {
-	                document.addEventListener('mouseup', onEnd);
-	                document.addEventListener('touchend', onEnd);
-	                document.addEventListener('touchcancel', onEnd);
-	            }
-	        },
-	        deactivate: function () {
-	            util.target = null;
-	            if (onMove) {
-	                document.removeEventListener('mousemove', onMove);
-	                document.removeEventListener('touchmove', onMove);
-	            }
-	            if (onEnd) {
-	                document.removeEventListener('mouseup', onEnd);
-	                document.removeEventListener('touchend', onEnd);
-	                document.removeEventListener('touchcancel', onEnd);
-	            }
-	        },
-	        onStart: onStart,
-	        onMove: onMove,
-	        onEnd: onEnd,
-	    };
-	    return util;
-	}
-
-	var TYPE$8 = 'angle';
-	var AngleComponent = function (vnode) {
-	    var angle = 0;
-	    var dragged = false;
-	    var pos = [0, 0];
-	    function toDeg(value) {
-	        return value * (180 / Math.PI);
-	    }
-	    function toRad(value) {
-	        return value * (Math.PI / 180);
-	    }
-	    function toScreen(value) {
-	        return clamp((value / 2 + 0.5) * 100, 0, 100);
-	    }
-	    function fetchValue(node) {
-	        var _a;
-	        var data = node.attrs.data;
-	        angle = (_a = getValue(data)) !== null && _a !== void 0 ? _a : angle;
-	        if (data.degree) {
-	            angle = toRad(angle);
-	        }
-	        updatePositions();
-	    }
-	    function onChange(type) {
-	        updatePositions();
-	        var data = vnode.attrs.data;
-	        var value = data.degree ? toRad(angle) : angle;
-	        var written = setValue(data, value);
-	        call(type === 'input' ? data.onInput : data.onChange, data, written);
-	    }
-	    function updatePositions() {
-	        pos[0] = Math.cos(angle);
-	        pos[1] = Math.sin(angle);
-	    }
-	    function onStartPhi(e) {
-	        dragged = true;
-	        drag.activate(e);
-	    }
-	    var touchOffset;
-	    var drag = dragUtil({
-	        onStart: function (e) {
-	            var touch = getTouchInTarget(e);
-	            touchOffset = [
-	                -(touch.x - touch.width / 2),
-	                -(touch.y - touch.height / 2),
-	            ];
-	            drag.onMove(e);
-	        },
-	        onMove: function (e) {
-	            e.preventDefault();
-	            var position = getTouchInTarget(e, drag.target.parentElement, touchOffset);
-	            var px = position.normalizedX - 0.5;
-	            var py = position.normalizedY - 0.5;
-	            if (dragged) {
-	                // [-PI;PI]
-	                angle = Math.atan2(px, py);
-	                // convert to range [0;2PI]
-	                angle += angle < 0 ? 2 * Math.PI : 0;
-	            }
-	            onChange('input');
-	            mithril.redraw();
-	        },
-	        onEnd: function (e) {
-	            drag.deactivate();
-	            dragged = false;
-	            onChange('change');
-	            mithril.redraw();
-	        },
-	    });
-	    function onPhiInput(model, value) {
-	        angle = toRad(value);
-	        onChange('input');
-	    }
-	    function onPhiChange(model, value) {
-	        angle = toRad(value);
-	        onChange('change');
-	    }
-	    return {
-	        onremove: function () {
-	            drag.deactivate();
-	        },
-	        oninit: function (node) {
-	            fetchValue(node);
-	        },
-	        onupdate: function (node) {
-	            fetchValue(node);
-	        },
-	        view: function () {
-	            return mithril('div', {
-	                class: twuiClass(TYPE$8),
-	                style: {
-	                    '--angle-value': toDeg(-angle) + 90 + "deg",
-	                    '--angle-percent': (toDeg(angle) / 360) * 100 + "%",
-	                },
-	            }, mithril('div.left-container', mithril('div.pane', {
-	                style: {
-	                    position: 'relative',
-	                    width: '100%',
-	                    'padding-top': '100%',
-	                },
-	            }, mithril('div.angle-pane', {
-	                class: cssClass({
-	                    'is-dragging': dragged,
-	                }),
-	                style: {
-	                    position: 'absolute',
-	                    top: '0.5rem',
-	                    left: '0.5rem',
-	                    width: 'calc(100% - 1rem)',
-	                    height: 'calc(100% - 1rem)',
-	                },
-	            }, mithril('div.angle-knob', {
-	                onmousedown: onStartPhi,
-	                ontouchstart: onStartPhi,
-	                style: {
-	                    position: 'absolute',
-	                    width: '15px',
-	                    height: '15px',
-	                    top: "calc(" + toScreen(pos[0]) + "% - 7px)",
-	                    left: "calc(" + toScreen(pos[1]) + "% - 7px)",
-	                },
-	            })))), mithril('div.right-container', mithril('label', mithril.trust('&alpha;')), renderModel({
-	                type: 'number',
-	                min: 0,
-	                max: 360,
-	                step: 0.1,
-	                value: toDeg(angle),
-	                onInput: onPhiInput,
-	                onChange: onPhiChange,
-	            })));
-	        },
-	    };
-	};
-	component(TYPE$8, AngleComponent);
-	function angleCodec(_a) {
-	    var _b = _a === void 0 ? {} : _a, axes = _b.axes, length = _b.length, result = _b.result;
-	    axes = axes || { x: 'right', y: 'up' };
-	    var keys = Object.keys(axes);
-	    var radius = function () {
-	        return (typeof length === 'function' ? length() : length) || 1;
-	    };
-	    return {
-	        decode: function (value) {
-	            var x = 0;
-	            var y = 0;
-	            for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
-	                var key = keys_1[_i];
-	                switch (axes[key]) {
-	                    case 'right':
-	                        y = value[key];
-	                        break;
-	                    case 'left':
-	                        y = -value[key];
-	                        break;
-	                    case 'up':
-	                    case 'front':
-	                        x = -value[key];
-	                        break;
-	                    case 'down':
-	                    case 'back':
-	                        x = value[key];
-	                }
-	            }
-	            var r = radius();
-	            x /= r;
-	            y /= r;
-	            return Math.atan2(y, x) || 0;
-	        },
-	        encode: function (angle) {
-	            var r = radius();
-	            var x = r * Math.cos(angle);
-	            var y = r * Math.sin(angle);
-	            var value = result() || {};
-	            for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
-	                var key = keys_2[_i];
-	                switch (axes[key]) {
-	                    case 'right':
-	                        value[key] = y;
-	                        break;
-	                    case 'left':
-	                        value[key] = -y;
-	                        break;
-	                    case 'up':
-	                    case 'front':
-	                        value[key] = -x;
-	                        break;
-	                    case 'down':
-	                    case 'back':
-	                        value[key] = x;
-	                        break;
-	                }
-	            }
-	            return value;
-	        },
-	    };
-	}
-
-	var TYPE$7 = 'checkbox';
-	var CheckboxComponent = function (node) {
-	    function onChange(e) {
-	        var data = node.attrs.data;
-	        var checked = e.target.checked;
-	        var written = setValue(data, checked);
-	        call(data.onChange, data, written);
-	    }
-	    return {
-	        view: viewFn(function (data) {
-	            var _a;
-	            var checked = getValue(data) === true;
-	            return mithril('label', {
-	                class: cssClass((_a = {},
-	                    _a[twuiClass(TYPE$7)] = true,
-	                    _a.checked = checked,
-	                    _a.disabled = data.disabled,
-	                    _a)),
-	            }, mithril('input', {
-	                type: 'checkbox',
-	                checked: checked,
-	                onchange: onChange,
-	                disabled: data.disabled,
-	            }), data.text);
-	        }),
-	    };
-	};
-	component(TYPE$7, CheckboxComponent);
-
-	/*! *****************************************************************************
-	Copyright (c) Microsoft Corporation.
-
-	Permission to use, copy, modify, and/or distribute this software for any
-	purpose with or without fee is hereby granted.
-
-	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-	PERFORMANCE OF THIS SOFTWARE.
-	***************************************************************************** */
-
-	var __assign = function() {
-	    __assign = Object.assign || function __assign(t) {
-	        for (var s, i = 1, n = arguments.length; i < n; i++) {
-	            s = arguments[i];
-	            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-	        }
-	        return t;
-	    };
-	    return __assign.apply(this, arguments);
-	};
-
-	/**
-	 * Converts hsv to rgb
-	 *
-	 * @public
-	 * @param hsv - HSV components where H is in range [0:360] and S and V are in range [0:1]
-	 * @returns RGB color components in range [0:1]
-	 */
-	function hsv2rgb(hsv) {
-	    var H = hsv.h % 360;
-	    var S = clamp(hsv.s, 0, 1);
-	    var V = clamp(hsv.v, 0, 1);
-	    var C = V * S;
-	    var X = C * (1 - Math.abs(((H / 60) % 2) - 1));
-	    var m = V - C;
-	    var rgb = { r: 0, g: 0, b: 0 };
-	    if (H < 60) {
-	        rgb.r = C;
-	        rgb.g = X;
-	        rgb.b = 0;
-	    }
-	    else if (H < 120) {
-	        rgb.r = X;
-	        rgb.g = C;
-	        rgb.b = 0;
-	    }
-	    else if (H < 180) {
-	        rgb.r = 0;
-	        rgb.g = C;
-	        rgb.b = X;
-	    }
-	    else if (H < 240) {
-	        rgb.r = 0;
-	        rgb.g = X;
-	        rgb.b = C;
-	    }
-	    else if (H < 300) {
-	        rgb.r = X;
-	        rgb.g = 0;
-	        rgb.b = C;
-	    }
-	    else {
-	        rgb.r = C;
-	        rgb.g = 0;
-	        rgb.b = X;
-	    }
-	    rgb.r += m;
-	    rgb.g += m;
-	    rgb.b += m;
-	    return rgb;
-	}
-	/**
-	 * Converts rgb to hsv
-	 *
-	 * @public
-	 * @remarks
-	 * The RGB components are assumed to be in range [0:1].
-	 * The resulting H component is in range [0:360] and S and V in range [0:1]
-	 */
-	function rgb2hsv(rgb) {
-	    var r = rgb.r;
-	    var g = rgb.g;
-	    var b = rgb.b;
-	    var V = Math.max(r, g, b);
-	    var d = V - Math.min(r, g, b);
-	    var S = 0;
-	    var H = 0;
-	    if (d !== 0) {
-	        S = d / V;
-	        if (V === r) {
-	            H = (g - b) / d + (g < b ? 6 : 0);
-	            H = (H % 6) * 60;
-	        }
-	        else if (V === g) {
-	            H = (b - r) / d + 2;
-	            H = H * 60;
-	        }
-	        else {
-	            H = (r - g) / d + 4;
-	            H = H * 60;
-	        }
-	    }
-	    return { h: H, s: S, v: V };
-	}
-
-	var ArrayColorFormat = /** @class */ (function () {
-	    function ArrayColorFormat(components, normalized) {
-	        this.components = components;
-	        this.normalized = normalized;
-	    }
-	    ArrayColorFormat.prototype.parse = function (v) {
-	        var _this = this;
-	        v = v || [];
-	        var result = { r: 0, g: 0, b: 0, a: 1 };
-	        this.components.forEach(function (key, i) {
-	            result[key] = (v[i] || 0) / (_this.normalized ? 1 : 255);
-	        });
-	        return result;
-	    };
-	    ArrayColorFormat.prototype.format = function (rgba) {
-	        var _this = this;
-	        return this.components.map(function (key) { return (_this.normalized ? rgba[key] : Math.round(rgba[key] * 255)) || 0; });
-	    };
-	    return ArrayColorFormat;
-	}());
-
-	var CssStringFormat = /** @class */ (function () {
-	    function CssStringFormat(components) {
-	        this.components = components;
-	    }
-	    CssStringFormat.prototype.parse = function (value) {
-	        value = value || 'rgba(0, 0, 0)';
-	        var result = { r: 0, g: 0, b: 0, a: 1 };
-	        var values = value
-	            .replace(/[rgba\(\)]/gi, '')
-	            .split(/,\s*?/gi)
-	            .map(Number);
-	        this.components.forEach(function (key, i) {
-	            result[key] = (values[i] || 0) / (key === 'a' ? 1 : 255);
-	        });
-	        return result;
-	    };
-	    CssStringFormat.prototype.format = function (rgba) {
-	        return (this.components.join('') +
-	            '(' +
-	            this.components
-	                .map(function (key) {
-	                return key === 'a' ? rgba[key] : Math.round(rgba[key] * 255);
-	            })
-	                .join(', ') +
-	            ')');
-	    };
-	    return CssStringFormat;
-	}());
-
-	var HexStringFormat = /** @class */ (function () {
-	    function HexStringFormat(components) {
-	        this.components = components;
-	    }
-	    HexStringFormat.prototype.parse = function (value) {
-	        value = value || '#000';
-	        var result = { r: 0, g: 0, b: 0, a: 1 };
-	        var v = value.match(/[0-9a-f]+/i)[0];
-	        if (v.length === this.components.length) {
-	            v = v
-	                .split('')
-	                .map(function (it) { return "" + it + it; })
-	                .join('');
-	        }
-	        this.components.forEach(function (key, i) {
-	            result[key] = parseInt(v.substr(i * 2, 2), 16) / 255;
-	        });
-	        return result;
-	    };
-	    HexStringFormat.prototype.format = function (rgba) {
-	        return ('#' +
-	            this.components
-	                .map(function (key) { return padLeft(Math.round(rgba[key] * 255).toString(16), 2, '0'); })
-	                .join(''));
-	    };
-	    return HexStringFormat;
-	}());
-
-	// tslint:disable:no-bitwise
-	var NumberColorFormat = /** @class */ (function () {
-	    function NumberColorFormat(components) {
-	        this.components = components;
-	        this.componentsRev = components.slice().reverse();
-	    }
-	    NumberColorFormat.prototype.parse = function (v) {
-	        v = v || 0;
-	        var result = { r: 0, g: 0, b: 0, a: 1 };
-	        this.components.forEach(function (key, i) {
-	            result[key] = ((v >> (i * 8)) & 255) / 255;
-	        });
-	        return result;
-	    };
-	    NumberColorFormat.prototype.format = function (rgba) {
-	        var val = this.componentsRev
-	            .map(function (key) {
-	            return padLeft(Math.round(rgba[key] * 255 || 0).toString(16), 2, '0');
-	        })
-	            .join('');
-	        return parseInt('0x' + val, 16);
-	    };
-	    return NumberColorFormat;
-	}());
-
-	var ObjectColorFormat = /** @class */ (function () {
-	    function ObjectColorFormat(components, normalized) {
-	        this.components = components;
-	        this.normalized = normalized;
-	    }
-	    ObjectColorFormat.prototype.parse = function (v) {
-	        var _this = this;
-	        v = v || {};
-	        var result = { r: 0, g: 0, b: 0, a: 1 };
-	        this.components.forEach(function (key, i) {
-	            result[key] = (v[key] || 0) / (_this.normalized ? 1 : 255);
-	        });
-	        return result;
-	    };
-	    ObjectColorFormat.prototype.format = function (rgba) {
-	        var _this = this;
-	        var result = {};
-	        this.components.forEach(function (key, i) {
-	            result[key] =
-	                (_this.normalized ? rgba[key] : Math.round(rgba[key] * 255)) || 0;
-	        });
-	        return result;
-	    };
-	    return ObjectColorFormat;
-	}());
-
-	var formatter = {};
-	/**
-	 * Gets a formatter implementation for the given format
-	 *
-	 * @public
-	 * @param format - The format code
-	 */
-	function getColorFormatter(format) {
-	    if (format === void 0) { format = 'rgb'; }
-	    if (format in formatter) {
-	        return formatter[format];
-	    }
-	    var components = (format.match(/[rgba]+/)[0] || '').split('');
-	    if (/(\[n?\])/.test(format)) {
-	        formatter[format] = new ArrayColorFormat(components, /\[n\]/.test(format));
-	    }
-	    else if (/(\{n?\})/.test(format)) {
-	        formatter[format] = new ObjectColorFormat(components, /\{n\}/.test(format));
-	    }
-	    else if (/0x/.test(format)) {
-	        formatter[format] = new NumberColorFormat(components);
-	    }
-	    else if (/(\(\))/.test(format)) {
-	        formatter[format] = new CssStringFormat(components);
-	    }
-	    else {
-	        formatter[format] = new HexStringFormat(components);
-	    }
-	    return formatter[format];
-	}
-
-	component('color-picker', function (node) {
-	    var hue = 0; // range [0,1]
-	    var sat = 0; // range [0,1]
-	    var val = 0; // range [0,1]
-	    var a = 0; // range [0,1]
-	    function getHSVA(s, v) {
-	        if (s === void 0) { s = sat; }
-	        if (v === void 0) { v = val; }
-	        return {
-	            h: hue * 360,
-	            s: s,
-	            v: v,
-	            a: a,
-	        };
-	    }
-	    function getRGB(s, v) {
-	        if (s === void 0) { s = sat; }
-	        if (v === void 0) { v = val; }
-	        return hsv2rgb(getHSVA(s, v));
-	    }
-	    function getRGBA(s, v, alpha) {
-	        if (s === void 0) { s = sat; }
-	        if (v === void 0) { v = val; }
-	        if (alpha === void 0) { alpha = a; }
-	        return __assign(__assign({}, getRGB(s, v)), { a: alpha });
-	    }
-	    function setHSV(hsv) {
-	        hue = hsv.h / 360;
-	        sat = hsv.s;
-	        val = hsv.v;
-	    }
-	    function setHSVA(hsv) {
-	        setHSV(hsv);
-	        a = hsv.a;
-	    }
-	    function getHexRGB(s, v) {
-	        return getColorFormatter('#rgb').format(getRGBA(s, v));
-	    }
-	    function getHexRGBA(s, v) {
-	        return getColorFormatter('#rgba').format(getRGBA(s, v));
-	    }
-	    function getCssRGBA(s, v, alpha) {
-	        if (s === void 0) { s = sat; }
-	        if (v === void 0) { v = val; }
-	        if (alpha === void 0) { alpha = a; }
-	        return getColorFormatter('rgba()').format(getRGBA(s, v, alpha));
-	    }
-	    function parseInput(value, format) {
-	        var rgba = getColorFormatter(format || 'rgb').parse(value);
-	        setHSVA(__assign(__assign({}, rgb2hsv(rgba)), { a: rgba.a }));
-	    }
-	    function formatOutput(format) {
-	        return getColorFormatter(format).format(getRGBA());
-	    }
-	    function triggerInput() {
-	        use(node.attrs.data, function (data) {
-	            var value = formatOutput(data.format);
-	            var written = setValue(data, value);
-	            call(data.onInput, data, written);
-	        });
-	    }
-	    function triggerChange() {
-	        use(node.attrs.data, function (data) {
-	            var value = formatOutput(data.format);
-	            var written = setValue(data, value);
-	            call(data.onChange, data, written);
-	        });
-	    }
-	    function hasAlpha() {
-	        return use(node.attrs.data, function (data) {
-	            return data.format && data.format.match(/a/i);
-	        });
-	    }
-	    //
-	    // manual input
-	    //
-	    function inputR(e) {
-	        input(e, 'r');
-	    }
-	    function inputG(e) {
-	        input(e, 'g');
-	    }
-	    function inputB(e) {
-	        input(e, 'b');
-	    }
-	    function input(e, field) {
-	        var color = getRGBA();
-	        color[field] = parseInt(e.target.value, 10) / 255;
-	        setHSV(rgb2hsv(color));
-	        triggerInput();
-	        triggerChange();
-	    }
-	    function inputHex(e) {
-	        parseInput(e.target.value, hasAlpha() ? 'rgba' : 'rgb');
-	        triggerInput();
-	        triggerChange();
-	    }
-	    //
-	    // drag input
-	    //
-	    var target;
-	    var kind;
-	    function beginPickSV(e) {
-	        kind = 'sv';
-	        enableDrag(e.target);
-	        onMouseMove(e);
-	    }
-	    function beginPickH(e) {
-	        kind = 'h';
-	        enableDrag(e.target);
-	        onMouseMove(e);
-	    }
-	    function beginPickA(e) {
-	        kind = 'a';
-	        enableDrag(e.target);
-	        onMouseMove(e);
-	    }
-	    function enableDrag(el) {
-	        disableDrag();
-	        target = el;
-	        var options = { passive: false };
-	        document.addEventListener('mousemove', onMouseMove, options);
-	        document.addEventListener('mouseup', onMouseUp, options);
-	        document.addEventListener('touchmove', onMouseMove, options);
-	        document.addEventListener('touchend', onMouseUp, options);
-	        document.addEventListener('touchcancel', onMouseUp, options);
-	    }
-	    function disableDrag() {
-	        document.removeEventListener('mousemove', onMouseMove);
-	        document.removeEventListener('mouseup', onMouseUp);
-	        document.removeEventListener('touchmove', onMouseMove);
-	        document.removeEventListener('touchend', onMouseUp);
-	        document.removeEventListener('touchcancel', onMouseUp);
-	    }
-	    function onMouseMove(e) {
-	        if (!target) {
-	            return;
-	        }
-	        e.preventDefault();
-	        var rect = target.getBoundingClientRect();
-	        var tx = window.pageXOffset || document.documentElement.scrollLeft;
-	        var ty = window.pageYOffset || document.documentElement.scrollTop;
-	        var cw = target.clientWidth;
-	        var ch = target.clientHeight;
-	        var _a = getTouchPoint(e), cx = _a[0], cy = _a[1];
-	        cx = clamp((cx - tx - rect.left) / cw, 0, 1);
-	        cy = clamp((cy - ty - rect.top) / ch, 0, 1);
-	        if (kind === 'sv') {
-	            sat = cx;
-	            val = 1 - cy;
-	        }
-	        if (kind === 'h') {
-	            hue = 1 - cx;
-	        }
-	        if (kind === 'a') {
-	            a = cx;
-	        }
-	        triggerInput();
-	        mithril.redraw();
-	    }
-	    function onMouseUp() {
-	        if (target != null) {
-	            target = null;
-	            disableDrag();
-	            triggerChange();
-	        }
-	    }
-	    return {
-	        onremove: function () {
-	            disableDrag();
-	        },
-	        oninit: function () {
-	            use(node.attrs.data, function (data) {
-	                parseInput(getValue(data), data.format);
-	            });
-	        },
-	        view: function () {
-	            return use(node.attrs.data, function (data) {
-	                var rgba = getRGBA();
-	                return mithril('div', {
-	                    class: twuiClass(data.type),
-	                }, mithril('.color-picker-inputs', mithril("input.input-hex[type='text']", {
-	                    value: hasAlpha() ? getHexRGBA() : getHexRGB(),
-	                    onchange: inputHex,
-	                }), mithril("input.input-r[type='number']", {
-	                    min: 0,
-	                    max: 255,
-	                    step: 1,
-	                    value: Math.round(rgba.r * 255),
-	                    onchange: inputR,
-	                }), mithril("input.input-g[type='number']", {
-	                    min: 0,
-	                    max: 255,
-	                    step: 1,
-	                    value: Math.round(rgba.g * 255),
-	                    onchange: inputG,
-	                }), mithril("input.input-b[type='number']", {
-	                    min: 0,
-	                    max: 255,
-	                    step: 1,
-	                    value: Math.round(rgba.b * 255),
-	                    onchange: inputB,
-	                })), mithril('.color-picker-panel', mithril('.color-picker-sv', {
-	                    tabindex: 0,
-	                    onmousedown: beginPickSV,
-	                    ontouchstart: beginPickSV,
-	                    style: {
-	                        'background-color': "" + getCssRGBA(1, 1, 1),
-	                        'user-select': 'none',
-	                    },
-	                }, mithril('.color-picker-sv-bg', {
-	                    style: {
-	                        background: 'linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0))',
-	                        'user-select': 'none',
-	                        'pointer-events': 'none',
-	                    },
-	                }), mithril('.color-picker-sv-bg', {
-	                    style: {
-	                        background: 'linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0))',
-	                        'user-select': 'none',
-	                        'pointer-events': 'none',
-	                    },
-	                }), mithril('.color-picker-sv-cursor', {
-	                    style: {
-	                        'user-select': 'none',
-	                        'pointer-events': 'none',
-	                        'background-color': "" + getCssRGBA(hue, sat, 1),
-	                        left: sat * 100 + "%",
-	                        top: (1 - val) * 100 + "%",
-	                    },
-	                })), mithril('.color-picker-h', {
-	                    tabindex: 0,
-	                    onmousedown: beginPickH,
-	                    ontouchstart: beginPickH,
-	                    style: {
-	                        'user-select': 'none',
-	                        background: 'linear-gradient(to right, #f00 0, #f0f 17% , #00f 33% , #0ff 50% , #0f0 67% , #ff0 83% , #f00 100%)',
-	                    },
-	                }, mithril('.color-picker-h-cursor', {
-	                    style: {
-	                        'user-select': 'none',
-	                        'pointer-events': 'none',
-	                        'background-color': "" + getCssRGBA(1, 1, 1),
-	                        position: 'absolute',
-	                        left: (1 - hue) * 100 + "%",
-	                    },
-	                })), !hasAlpha()
-	                    ? null
-	                    : mithril('.color-picker-a', {
-	                        tabindex: 0,
-	                        onmousedown: beginPickA,
-	                        ontouchstart: beginPickA,
-	                        style: {
-	                            'user-select': 'none',
-	                        },
-	                    }, mithril('.color-picker-a-bg', {
-	                        style: {
-	                            background: "linear-gradient(to right, " + getCssRGBA(sat, val, 0) + ", " + getCssRGBA(sat, val, 1) + ")",
-	                        },
-	                    }), mithril('.color-picker-a-cursor', {
-	                        style: {
-	                            'user-select': 'none',
-	                            'pointer-events': 'none',
-	                            position: 'absolute',
-	                            left: a * 100 + "%",
-	                        },
-	                    }))));
-	            });
-	        },
-	    };
-	});
-
-	component('color', function () {
-	    var data;
-	    var opened = false;
-	    var value;
-	    var rgba;
-	    var rgbaFromatter = getColorFormatter('rgba()');
-	    function fetchState(node) {
-	        data = node.attrs.data;
-	        value = getValue(data);
-	        rgba = rgbaFromatter.format(getColorFormatter(data.format).parse(value));
-	    }
-	    function toggle() {
-	        opened = !opened;
-	    }
-	    function onPickerInput(p, v) {
-	        var written = setValue(data, v);
-	        call(data.onInput, data, written);
-	    }
-	    function onPickerChange(p, v) {
-	        var written = setValue(data, v);
-	        call(data.onChange, data, written);
-	    }
-	    function getText() {
-	        if (isString(value)) {
-	            return value;
-	        }
-	        if (isNumber(value)) {
-	            return '0x' + padLeft(value.toString(16), 8, '0');
-	        }
-	        if (isArray(value)) {
-	            return value
-	                .map(function (it) { return (it < 1 && it > 0 ? it.toFixed(2) : it); })
-	                .join(' , ');
-	        }
-	        if (isObject(value)) {
-	            return Object.keys(value)
-	                .map(function (k) {
-	                var it = value[k];
-	                return k + ": " + (it < 1 && it > 0 ? it.toFixed(2) : it);
-	            })
-	                .join(' ');
-	        }
-	        if (value == null) {
-	            return 'null';
-	        }
-	        return '?';
-	    }
-	    return {
-	        oninit: function (node) {
-	            fetchState(node);
-	        },
-	        onupdate: function (node) {
-	            fetchState(node);
-	        },
-	        view: function () {
-	            var _a;
-	            return mithril('div', {
-	                class: cssClass((_a = {},
-	                    _a[twuiClass(data.type)] = true,
-	                    _a[twuiClass(data.type + '-open')] = opened,
-	                    _a)),
-	            }, mithril("button[type='button']", {
-	                style: { 'background-color': rgba },
-	                onclick: toggle,
-	            }, getText() || '?'), renderModel({
-	                type: 'color-picker',
-	                value: value,
-	                format: data.format,
-	                onInput: onPickerInput,
-	                onChange: onPickerChange,
-	                hidden: !opened,
-	            }));
-	        },
-	    };
-	});
-
-	var NumberComponent = function () {
-	    var type;
-	    var min;
-	    var max;
-	    var step;
-	    var disabled;
-	    var placeholder;
-	    var isSlider;
-	    var value;
-	    var percent;
-	    var vnode;
-	    // let data: NumberModel
-	    function fetchState(node) {
-	        vnode = node;
-	        var data = node.attrs.data;
-	        type = data.type;
-	        isSlider = data.type === 'slider';
-	        min = isSlider && data.min == null ? 0 : data.min;
-	        max = isSlider && data.max == null ? 1 : data.max;
-	        step = data.step;
-	        value = getValue(data);
-	        disabled = data.disabled;
-	        percent = isSlider ? ((value - min) / (max - min)) * 100 : 0;
-	    }
-	    function setModelValue(e, v) {
-	        v = value = clamp(isNaN(v) ? null : v, min, max);
-	        var data = vnode.attrs.data;
-	        var written = setValue(data, v);
-	        call(e === 'input' ? data.onInput : data.onChange, data, written);
-	        mithril.redraw();
-	    }
-	    function onInput(e) {
-	        var el = e.target;
-	        setModelValue('input', parseFloat(el.value));
-	    }
-	    function onChange(e) {
-	        var el = e.target;
-	        setModelValue('change', parseFloat(el.value));
-	    }
-	    function limit(v) {
-	        v = clamp(v, min, max);
-	        if (step != null) {
-	            v = Math.round(v / step) * step;
-	        }
-	        return parseFloat(v.toFixed(5));
-	    }
-	    var drag = dragUtil({
-	        onStart: function (e) {
-	            drag.onMove(e);
-	        },
-	        onMove: function (e) {
-	            e.preventDefault();
-	            var s = getTouchInTarget(e, drag.target).normalizedX;
-	            setModelValue('input', limit(min + s * (max - min)));
-	        },
-	        onEnd: function () {
-	            setModelValue('change', value);
-	            drag.deactivate();
-	        },
-	    });
-	    function onDragStart(e) {
-	        if (!disabled) {
-	            drag.activate(e);
-	        }
-	    }
-	    function onKeydown(e) {
-	        var code = e.key || e.keyCode;
-	        var dir = code === 'ArrowLeft' ? -1 : code === 'ArrowRight' ? 1 : 0;
-	        var add = (step || 1) * dir;
-	        if (add) {
-	            setModelValue('change', limit((value || 0) + add));
-	        }
-	    }
-	    function onWheel(e) {
-	        e.preventDefault();
-	        var dir = (e.ctrlKey ? 0.5 : 1) * clamp(e.deltaY, -1, 1);
-	        var add = (step || 0.2) * dir;
-	        if (add) {
-	            setModelValue('change', limit((value || 0) - add));
-	        }
-	    }
-	    function onFocus() {
-	    }
-	    function onBlur() {
-	    }
-	    function slider() {
-	        return mithril('.twui-progress', __assign({ style: 'user-select: none;', class: cssClass({
-	                disabled: !!disabled,
-	            }) }, (disabled
-	            ? {}
-	            : {
-	                tabindex: 0,
-	                onmousedown: onDragStart,
-	                ontouchstart: onDragStart,
-	                onkeydown: onKeydown,
-	                onwheel: onWheel,
-	            })), mithril('.twui-progress-bar', {
-	            style: {
-	                width: percent + "%",
-	                'pointer-events': 'none',
-	                'user-select': 'none',
-	            },
-	        }));
-	    }
-	    return {
-	        onremove: function () {
-	            drag.deactivate();
-	        },
-	        oninit: function (node) {
-	            fetchState(node);
-	        },
-	        onupdate: function (node) {
-	            fetchState(node);
-	        },
-	        view: function () {
-	            return mithril('div', {
-	                class: twuiClass(type),
-	            }, isSlider ? slider() : null, mithril("input[type='number']", {
-	                min: min,
-	                max: max,
-	                step: step,
-	                value: value,
-	                oninput: onInput,
-	                onchange: onChange,
-	                onwheel: onWheel,
-	                onfocus: onFocus,
-	                onblur: onBlur,
-	                placeholder: placeholder,
-	                disabled: disabled,
-	            }));
-	        },
-	    };
-	};
-	component('number', NumberComponent);
-	component('slider', NumberComponent);
-
-	var TYPE$6 = 'point';
-	var DEFAULT_RANGE = [0, 1];
-	var DEFAULT_KEYS = ['x', 'y'];
-	component(TYPE$6, function (vnode) {
-	    var kx;
-	    var ky;
-	    var xRange = DEFAULT_RANGE;
-	    var yRange = DEFAULT_RANGE;
-	    var vx = 0;
-	    var vy = 0;
-	    var x = 0;
-	    var y = 0;
-	    var rx;
-	    var ry;
-	    var snap;
-	    function fetchValue(node) {
-	        var _a;
-	        var _b;
-	        var data = node.attrs.data;
-	        var keys = data.keys || DEFAULT_KEYS;
-	        kx = keys[0];
-	        ky = keys[1];
-	        var value = (_b = getValue(data)) !== null && _b !== void 0 ? _b : (_a = {},
-	            _a[kx] = vx,
-	            _a[ky] = vy,
-	            _a);
-	        snap = data.snap;
-	        vx = value[kx] || 0;
-	        vy = value[ky] || 0;
-	        xRange = data.xRange || xRange;
-	        yRange = data.yRange || yRange;
-	        x = (vx - xRange[0]) / (xRange[1] - xRange[0]);
-	        y = (vy - yRange[0]) / (yRange[1] - yRange[0]);
-	        var reset = data.reset;
-	        if (reset) {
-	            rx = (reset[0] - xRange[0]) / (xRange[1] - xRange[0]);
-	            ry = (reset[1] - yRange[0]) / (yRange[1] - yRange[0]);
-	        }
-	    }
-	    function updateValue() {
-	        vx = xRange[0] + (xRange[1] - xRange[0]) * x;
-	        vy = yRange[0] + (yRange[1] - yRange[0]) * y;
-	        if (snap > 0) {
-	            vx = Math.floor(vx / snap) * snap;
-	            vy = Math.floor(vy / snap) * snap;
-	            x = (vx - xRange[0]) / (xRange[1] - xRange[0]);
-	            y = (vy - yRange[0]) / (yRange[1] - yRange[0]);
-	        }
-	    }
-	    function onChange(type) {
-	        var _a;
-	        var _b;
-	        updateValue();
-	        var data = vnode.attrs.data;
-	        var value = (_b = getValue(data)) !== null && _b !== void 0 ? _b : (_a = {},
-	            _a[kx] = vx,
-	            _a[ky] = vy,
-	            _a);
-	        value[kx] = vx;
-	        value[ky] = vy;
-	        call(type === 'input' ? data.onInput : data.onChange, data, value);
-	    }
-	    function onMouseDown(e) {
-	        drag.activate(e);
-	    }
-	    var drag = dragUtil({
-	        onMove: function (e) {
-	            e.preventDefault();
-	            var target = drag.target;
-	            var rect = target.getBoundingClientRect();
-	            var tx = window.pageXOffset || document.documentElement.scrollLeft;
-	            var ty = window.pageYOffset || document.documentElement.scrollTop;
-	            var cw = target.clientWidth;
-	            var ch = target.clientHeight;
-	            var _a = getTouchPoint(e), cx = _a[0], cy = _a[1];
-	            x = clamp((cx - tx - rect.left) / cw, 0, 1);
-	            y = clamp((cy - ty - rect.top) / ch, 0, 1);
-	            onChange('input');
-	            mithril.redraw();
-	        },
-	        onEnd: function () {
-	            drag.deactivate();
-	            if (rx != null && ry != null) {
-	                x = rx;
-	                y = ry;
-	                onChange('input');
-	            }
-	            onChange('change');
-	            mithril.redraw();
-	        },
-	    });
-	    return {
-	        onremove: drag.deactivate,
-	        oninit: fetchValue,
-	        onupdate: fetchValue,
-	        view: function () {
-	            return mithril('div', {
-	                class: twuiClass(TYPE$6),
-	                tabindex: 0,
-	                onmousedown: onMouseDown,
-	                ontouchstart: onMouseDown,
-	            }, mithril('.point-x-axis', {
-	                style: {
-	                    'pointer-events': 'none',
-	                    position: 'absolute',
-	                    left: 0,
-	                    right: 0,
-	                    top: y * 100 + "%",
-	                    height: "1px",
-	                },
-	            }), mithril('.point-y-axis', {
-	                style: {
-	                    'pointer-events': 'none',
-	                    position: 'absolute',
-	                    left: x * 100 + "%",
-	                    top: 0,
-	                    bottom: 0,
-	                    width: "1px",
-	                },
-	            }), mithril('.point-cursor', {
-	                style: {
-	                    'pointer-events': 'none',
-	                    left: x * 100 + "%",
-	                    top: y * 100 + "%",
-	                    position: 'absolute',
-	                    width: '11px',
-	                    height: '11px',
-	                    'margin-top': '-5px',
-	                    'margin-left': '-5px',
-	                    border: '1px solid white',
-	                    'border-radius': '5px',
-	                    'box-shadow': '0px 0px 2px 1px rgba(0, 0, 0, 0.75)',
-	                },
-	            }));
-	        },
-	    };
-	});
-
-	var TYPE$5 = 'position';
-	var defaultKeys = ['x', 'y', 'z'];
-	component(TYPE$5, function (node) {
-	    function onChange(type, field, v) {
-	        var data = node.attrs.data;
-	        var value = getValue(data) || {};
-	        value[field] = isNaN(v) ? null : v;
-	        var written = setValue(data, value);
-	        call(type === 'input' ? data.onInput : data.onChange, data, written, field);
-	    }
-	    return {
-	        view: viewFn(function (data) {
-	            var keys = data.keys || defaultKeys;
-	            var value = getValue(data);
-	            return mithril('div', {
-	                class: twuiClass(TYPE$5),
-	            }, keys.map(function (field) {
-	                return renderModel({
-	                    type: 'number',
-	                    min: data.min,
-	                    max: data.max,
-	                    step: data.step,
-	                    value: value === null || value === void 0 ? void 0 : value[field],
-	                    disabled: data.disabled,
-	                    onInput: function (_, v) { return onChange('input', field, v); },
-	                    onChange: function (_, v) { return onChange('change', field, v); },
-	                    placeholder: field,
-	                });
-	            }));
-	        }),
-	    };
-	});
-
-	var emptyArray = [];
-	function optionsFromFlatArray(arr) {
-	    var res = [];
-	    for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
-	        var it_1 = arr_1[_i];
-	        if (isString(it_1) || isNumber(it_1)) {
-	            res.push({ value: it_1, label: String(it_1) });
-	            continue;
-	        }
-	        if ('value' in it_1) {
-	            res.push(it_1);
-	            continue;
-	        }
-	    }
-	    return res;
-	}
-	function optionsFromArray(arr) {
-	    var res = [];
-	    for (var _i = 0, arr_2 = arr; _i < arr_2.length; _i++) {
-	        var it_2 = arr_2[_i];
-	        if (isString(it_2) || isNumber(it_2) || it_2 == null) {
-	            res.push({ value: it_2, label: String(it_2) });
-	        }
-	        else if ('value' in it_2) {
-	            res.push(it_2);
-	        }
-	        else if ('options' in it_2) {
-	            res.push({
-	                label: it_2.label,
-	                disabled: it_2.disabled,
-	                options: Array.isArray(it_2.options)
-	                    ? optionsFromFlatArray(it_2.options)
-	                    : optionsFromObject(it_2.options),
-	            });
-	        }
-	    }
-	    return res;
-	}
-	function optionsFromObject(obj) {
-	    return Object.keys(obj)
-	        .sort()
-	        .map(function (key) { return ({ value: obj[key], label: key }); });
-	}
-	function getOptions(node) {
-	    var options = node.attrs.data.options;
-	    if (!options) {
-	        return emptyArray;
-	    }
-	    if (Array.isArray(options)) {
-	        return optionsFromArray(options);
-	    }
-	    return optionsFromObject(options);
-	}
-	component('select', function (node) {
-	    var options;
-	    function getSelectedIndex() {
-	        var data = node.attrs.data;
-	        var value = getValue(data);
-	        var i = 0;
-	        for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
-	            var o0 = options_1[_i];
-	            if ('options' in o0) {
-	                for (var _a = 0, _b = o0.options; _a < _b.length; _a++) {
-	                    var o1 = _b[_a];
-	                    if (o1.value === value) {
-	                        return i;
-	                    }
-	                    i++;
-	                }
-	            }
-	            else {
-	                if (o0.value === value) {
-	                    return i;
-	                }
-	                i++;
-	            }
-	        }
-	    }
-	    function getSelectionAt(index) {
-	        var i = 0;
-	        for (var _i = 0, options_2 = options; _i < options_2.length; _i++) {
-	            var o0 = options_2[_i];
-	            if ('options' in o0) {
-	                for (var _a = 0, _b = o0.options; _a < _b.length; _a++) {
-	                    var o1 = _b[_a];
-	                    if (i === index) {
-	                        return o1.value;
-	                    }
-	                    i += 1;
-	                }
-	            }
-	            else {
-	                if (i === index) {
-	                    return o0.value;
-	                }
-	                i += 1;
-	            }
-	        }
-	        return null;
-	    }
-	    function onChange(e) {
-	        var el = e.target;
-	        var data = node.attrs.data;
-	        var value = getSelectionAt(el.selectedIndex);
-	        var written = setValue(data, value);
-	        call(data.onChange, data, written);
-	    }
-	    return {
-	        view: viewFn(function (data) {
-	            options = getOptions(node);
-	            return mithril('select', {
-	                class: twuiClass(data.type),
-	                selectedIndex: getSelectedIndex(),
-	                onchange: onChange,
-	                disabled: data.disabled,
-	            }, options.map(function (it) {
-	                if ('options' in it) {
-	                    return mithril('optgroup', {
-	                        disabled: !!it.disabled,
-	                        label: it.label || '',
-	                    }, it.options.map(option));
-	                }
-	                return option(it);
-	            }));
-	        }),
-	    };
-	});
-	function option(it) {
-	    return mithril('option', {
-	        value: it.value,
-	        label: it.label,
-	        disabled: !!it.disabled,
-	    }, it.label || '');
-	}
-
-	var TYPE$4 = 'spherical';
-	var KEYS = ['phi', 'theta'];
-	var SphericalComponent = function (vnode) {
-	    var phi = 0; // azimuth     [0, 2PI]
-	    var theta = 0; // inclination [0,  PI]
-	    var backface = false;
-	    var v2Phi = [0, 0];
-	    var v2Theta = [0, 0];
-	    var draggedKnob;
-	    function toDeg(value) {
-	        return value * (180 / Math.PI);
-	    }
-	    function toRad(value) {
-	        return value * (Math.PI / 180);
-	    }
-	    function toScreen(value) {
-	        return clamp((value / 2 + 0.5) * 100, 0, 100);
-	    }
-	    function read(node) {
-	        var data = node.attrs.data;
-	        var value = getValue(data) || {
-	            phi: data.degree ? toDeg(phi) : phi,
-	            theta: data.degree ? toDeg(theta) : theta,
-	        };
-	        var _a = data.keys || KEYS, kPhi = _a[0], kTheta = _a[1];
-	        return { data: data, value: value, kPhi: kPhi, kTheta: kTheta };
-	    }
-	    function fetchValue(node) {
-	        var _a = read(node), data = _a.data, value = _a.value, kPhi = _a.kPhi, kTheta = _a.kTheta;
-	        phi = value[kPhi] || 0;
-	        theta = value[kTheta] || 0;
-	        if (data.degree) {
-	            phi = toRad(phi);
-	            theta = toRad(theta);
-	        }
-	        while (theta < 0) {
-	            theta += Math.PI;
-	        }
-	        while (theta > Math.PI) {
-	            theta -= Math.PI;
-	        }
-	        backface = theta > Math.PI / 2;
-	        updatePositions();
-	    }
-	    function onChange(type) {
-	        updatePositions();
-	        var _a = read(vnode), data = _a.data, value = _a.value, kPhi = _a.kPhi, kTheta = _a.kTheta;
-	        value[kPhi] = data.degree ? toDeg(phi) : phi;
-	        value[kTheta] = data.degree ? toDeg(theta) : theta;
-	        var written = setValue(data, value);
-	        call(type === 'input' ? data.onInput : data.onChange, data, written);
-	    }
-	    function updatePositions() {
-	        v2Phi[0] = Math.cos(phi);
-	        v2Phi[1] = Math.sin(phi);
-	        v2Theta[0] = Math.sin(theta) * Math.cos(phi);
-	        v2Theta[1] = Math.sin(theta) * Math.sin(phi);
-	    }
-	    function onStartPhi(e) {
-	        draggedKnob = 'phi';
-	        drag.activate(e);
-	    }
-	    function onStartTheta(e) {
-	        draggedKnob = 'theta';
-	        drag.activate(e);
-	    }
-	    var touchOffset;
-	    var drag = dragUtil({
-	        onStart: function (e) {
-	            var touch = getTouchInTarget(e);
-	            touchOffset = [
-	                -(touch.x - touch.width / 2),
-	                -(touch.y - touch.height / 2),
-	            ];
-	            drag.onMove(e);
-	        },
-	        onMove: function (e) {
-	            e.preventDefault();
-	            var position = getTouchInTarget(e, drag.target.parentElement, touchOffset);
-	            var px = position.normalizedX - 0.5;
-	            var py = position.normalizedY - 0.5;
-	            if (draggedKnob === 'phi') {
-	                // [-PI;PI]
-	                phi = Math.atan2(px, py);
-	                // convert to range [0;2PI]
-	                phi += phi < 0 ? 2 * Math.PI : 0;
-	            }
-	            else if (draggedKnob === 'theta') {
-	                // closest point on segment
-	                // p0: [0, 0], p1: vPhi
-	                var ab = v2Phi;
-	                var ac = [py, px];
-	                var t = (ab[0] * ac[0] + ab[1] * ac[1]) / Math.sqrt(ab[0] * ab[0] + ab[1] * ab[1]);
-	                theta = Math.PI * clamp(t, 0, 0.5);
-	                if (backface) {
-	                    theta = Math.PI - theta;
-	                }
-	            }
-	            onChange('input');
-	            mithril.redraw();
-	        },
-	        onEnd: function (e) {
-	            drag.deactivate();
-	            draggedKnob = null;
-	            onChange('change');
-	            mithril.redraw();
-	        },
-	    });
-	    function onPhiInput(model, value) {
-	        phi = toRad(value);
-	        onChange('input');
-	    }
-	    function onPhiChange(model, value) {
-	        phi = toRad(value);
-	        onChange('change');
-	    }
-	    function onThetaInput(model, value) {
-	        theta = toRad(value);
-	        onChange('input');
-	    }
-	    function onThetaChange(model, value) {
-	        theta = toRad(value);
-	        onChange('change');
-	    }
-	    function onBackfaceChange(model, value) {
-	        backface = value;
-	        theta = Math.PI - theta;
-	        onChange('change');
-	        setTimeout(function () { return mithril.redraw(); });
-	    }
-	    return {
-	        onremove: function () {
-	            drag.deactivate();
-	        },
-	        oninit: function (node) {
-	            fetchValue(node);
-	        },
-	        onupdate: function (node) {
-	            fetchValue(node);
-	        },
-	        view: function () {
-	            return mithril('div', {
-	                class: twuiClass(TYPE$4),
-	                style: {
-	                    '--spherical-phi': toDeg(-phi) + 90 + "deg",
-	                },
-	            }, mithril('div.left-container', mithril('div.pane', {
-	                style: {
-	                    position: 'relative',
-	                    width: '100%',
-	                    'padding-top': '100%',
-	                },
-	            }, mithril('div.phi-pane', {
-	                class: cssClass({
-	                    'is-dragging': draggedKnob === 'phi',
-	                }),
-	                style: {
-	                    position: 'absolute',
-	                    top: '0.5rem',
-	                    left: '0.5rem',
-	                    width: 'calc(100% - 1rem)',
-	                    height: 'calc(100% - 1rem)',
-	                },
-	            }, mithril('div.phi-knob', {
-	                onmousedown: onStartPhi,
-	                ontouchstart: onStartPhi,
-	                style: {
-	                    position: 'absolute',
-	                    width: '15px',
-	                    height: '15px',
-	                    top: "calc(" + toScreen(v2Phi[0]) + "% - 7px)",
-	                    left: "calc(" + toScreen(v2Phi[1]) + "% - 7px)",
-	                },
-	            })), mithril('div.theta-pane', {
-	                class: cssClass({
-	                    'is-dragging': draggedKnob === 'theta',
-	                }),
-	                style: {
-	                    position: 'absolute',
-	                    top: '1.5rem',
-	                    left: '1.5rem',
-	                    width: 'calc(100% - 3rem)',
-	                    height: 'calc(100% - 3rem)',
-	                },
-	            }, mithril('div.theta-knob', {
-	                onmousedown: onStartTheta,
-	                ontouchstart: onStartTheta,
-	                style: {
-	                    position: 'absolute',
-	                    width: '15px',
-	                    height: '15px',
-	                    top: "calc(" + toScreen(v2Theta[0]) + "% - 7px)",
-	                    left: "calc(" + toScreen(v2Theta[1]) + "% - 7px)",
-	                },
-	            })))), mithril('div.right-container', mithril('label', mithril.trust('&phi;')), renderModel({
-	                type: 'number',
-	                min: 0,
-	                max: 360,
-	                step: 0.1,
-	                value: toDeg(phi),
-	                onInput: onPhiInput,
-	                onChange: onPhiChange,
-	            }), mithril('label', mithril.trust('&theta;')), renderModel({
-	                type: 'number',
-	                min: 0,
-	                max: 180,
-	                step: 0.1,
-	                value: toDeg(theta),
-	                onInput: onThetaInput,
-	                onChange: onThetaChange,
-	            }), renderModel({
-	                type: 'checkbox',
-	                value: backface,
-	                text: 'Backface',
-	                onChange: onBackfaceChange,
-	            })));
-	        },
-	    };
-	};
-	component(TYPE$4, SphericalComponent);
-	function sphericalCodec(_a) {
-	    var _b = _a === void 0 ? {} : _a, axes = _b.axes, length = _b.length, result = _b.result;
-	    axes = axes || { x: 'right', y: 'up', z: 'back' };
-	    var keys = Object.keys(axes);
-	    var radius = function () {
-	        return (typeof length === 'function' ? length() : length) || 1;
-	    };
-	    return {
-	        decode: function (value) {
-	            var x = 0;
-	            var y = 0;
-	            var z = 0;
-	            for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
-	                var key = keys_1[_i];
-	                switch (axes[key]) {
-	                    case 'right':
-	                        y = value[key];
-	                        break;
-	                    case 'left':
-	                        y = -value[key];
-	                        break;
-	                    case 'back':
-	                        x = value[key];
-	                        break;
-	                    case 'front':
-	                        x = -value[key];
-	                        break;
-	                    case 'up':
-	                        z = value[key];
-	                        break;
-	                    case 'down':
-	                        z = -value[key];
-	                        break;
-	                }
-	            }
-	            var r = radius();
-	            x /= r;
-	            y /= r;
-	            z /= r;
-	            return {
-	                phi: Math.atan2(y, x) || 0,
-	                theta: Math.atan(Math.sqrt(x * x + y * y) / z) || 0,
-	            };
-	        },
-	        encode: function (_a) {
-	            var phi = _a.phi, theta = _a.theta;
-	            var r = radius();
-	            var x = r * Math.sin(theta) * Math.cos(phi);
-	            var y = r * Math.sin(theta) * Math.sin(phi);
-	            var z = r * Math.cos(theta);
-	            var value = (result === null || result === void 0 ? void 0 : result()) || {};
-	            for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
-	                var key = keys_2[_i];
-	                switch (axes[key]) {
-	                    case 'right':
-	                        value[key] = y;
-	                        break;
-	                    case 'left':
-	                        value[key] = -y;
-	                        break;
-	                    case 'back':
-	                        value[key] = x;
-	                        break;
-	                    case 'front':
-	                        value[key] = -x;
-	                        break;
-	                    case 'up':
-	                        value[key] = z;
-	                        break;
-	                    case 'down':
-	                        value[key] = -z;
-	                        break;
-	                }
-	            }
-	            return value;
-	        },
-	    };
-	}
-
-	component('text', function (node) {
-	    function onChange(e) {
-	        var el = e.target;
-	        var data = node.attrs.data;
-	        var written = setValue(data, el.value);
-	        call(e.type === 'input' ? data.onInput : data.onChange, data, written);
-	    }
-	    return {
-	        view: viewFn(function (data) {
-	            return mithril("input[type='text']", {
-	                class: twuiClass(data.type),
-	                value: getValue(data),
-	                oninput: onChange,
-	                onchange: onChange,
-	                placeholder: data.placeholder,
-	                disabled: data.disabled,
-	            });
-	        }),
-	    };
-	});
-
-	var TYPE$3 = 'accordion';
-	var EMPTY = [];
-	component(TYPE$3, function () {
-	    return {
-	        view: viewFn(function (data) {
-	            var children = data.children || EMPTY;
-	            data.expand = detectExpanded(data.expand, children);
-	            return mithril.fragment({}, children.map(function (group, i) {
-	                group.type = 'group';
-	                group.collapsible = true;
-	                group.collapsed = i !== data.expand;
-	                return renderModel(group);
-	            }));
-	        }),
-	    };
-	});
-	function detectExpanded(index, list) {
-	    var result = null;
-	    for (var i = 0; i < list.length; i++) {
-	        if (!list[i].collapsed) {
-	            if (i !== index) {
-	                return i;
-	            }
-	            if (result == null) {
-	                result = i;
-	            }
-	        }
-	    }
-	    return result;
-	}
-
-	var TYPE$2 = 'container';
-	component(TYPE$2, function () {
-	    return {
-	        view: viewFn(function (data) {
-	            var _a;
-	            var _b;
-	            return mithril('div', {
-	                class: cssClass((_a = {},
-	                    _a[twuiClass(TYPE$2)] = true,
-	                    _a[twuiClass(TYPE$2, 'horizontal')] = data.horizontal,
-	                    _a)),
-	                style: data.style,
-	            }, mithril.fragment({}, (_b = data.children) === null || _b === void 0 ? void 0 : _b.map(renderModel)));
-	        }),
-	    };
-	});
-
-	var TYPE$1 = 'group';
-	component(TYPE$1, function (node) {
-	    function onClick(e) {
-	        use(node.attrs.data, function (data) {
-	            data.collapsed = !data.collapsed;
-	            call(data.onToggle, data);
-	            if (data.collapsed) {
-	                call(data.onCollapse, data);
-	            }
-	            else {
-	                call(data.onExpand, data);
-	            }
-	        });
-	    }
-	    function title(data) {
-	        if (!data.title && !data.collapsible) {
-	            return null;
-	        }
-	        return mithril('div', {
-	            class: twuiClass(TYPE$1, 'title'),
-	            onclick: data.collapsible ? onClick : null,
-	        }, data.title);
-	    }
-	    function children(data) {
-	        var _a;
-	        if (data.collapsed || !data.children) {
-	            return [];
-	        }
-	        return (_a = data.children) === null || _a === void 0 ? void 0 : _a.map(function (it) {
-	            if (isString(it.label)) {
-	                return mithril('div', { class: twuiClass(TYPE$1, 'control') }, mithril('label', it.label), mithril('section', renderModel(it)));
-	            }
-	            return renderModel(it);
-	        });
-	    }
-	    return {
-	        view: viewFn(function (data) {
-	            var _a;
-	            return mithril('div', {
-	                class: cssClass((_a = {},
-	                    _a[twuiClass(TYPE$1)] = true,
-	                    _a[twuiClass(TYPE$1, 'collapsible')] = data.collapsible,
-	                    _a[twuiClass(TYPE$1, 'collapsed')] = data.collapsed,
-	                    _a)),
-	                style: data.style,
-	            }, mithril.fragment({}, [title(data)]), mithril.fragment({}, [children(data)]));
-	        }),
-	    };
-	});
-
-	component('tabs', function () {
-	    return {
-	        view: viewFn(function (data) {
-	            var tabs = data.children || [];
-	            var active = clamp(data.active || 0, 0, tabs.length - 1);
-	            var tab = tabs[active];
-	            return mithril('div', {
-	                class: twuiClass(data.type),
-	            }, mithril('div', {
-	                key: data.type + "-list",
-	                class: twuiClass(data.type + "-list"),
-	            }, tabs.map(function (it, index) {
-	                return mithril("button[type='button']", {
-	                    key: data.type + "-" + index,
-	                    onclick: function () { return (data.active = index); },
-	                    class: active === index ? 'is-active' : '',
-	                }, it.label || it.title);
-	            })), mithril.fragment({ key: "panel-" + data.active }, [
-	                renderModel({
-	                    type: 'group',
-	                    children: tab.children,
-	                    style: tab.style,
-	                }),
-	            ]));
-	        }),
-	    };
-	});
-
-	var type = 'button';
-	component(type, function (node) {
-	    return {
-	        view: viewFn(function (data) {
-	            return mithril(type, {
-	                type: type,
-	                class: twuiClass(type),
-	                onclick: function () { return call(data.onClick, data); },
-	                disabled: data.disabled,
-	            }, data.text);
-	        }),
-	    };
-	});
-
-	var CONTENT = 'content';
-	component(CONTENT, function () {
-	    return {
-	        view: viewFn(function (data) { return mithril.fragment({}, [data.content]); }),
-	    };
-	});
-
-	var TYPE = 'image';
-	component('image', function (node) {
-	    var onClick = function () {
-	        use(node.attrs.data, function (data) { return call(data.onClick, data); });
-	    };
-	    function aspect(spec) {
-	        if (!spec) {
-	            return null;
-	        }
-	        var _a = (spec || '1x1').split('x').map(Number), x = _a[0], y = _a[1];
-	        var padding = ((y / x) || 1) * 100;
-	        return padding + "%";
-	    }
-	    function width(data) {
-	        if (isNumber(data.width)) {
-	            return data.width + "px";
-	        }
-	        if (isString(data.width)) {
-	            return data.width;
-	        }
-	    }
-	    return {
-	        view: viewFn(function (data) {
-	            return (Array.isArray(data.src) ? data.src : [data.src]).map(function (src) {
-	                var _a;
-	                return mithril('picture', {
-	                    class: cssClass((_a = {},
-	                        _a[twuiClass(TYPE)] = true,
-	                        _a[twuiClass(TYPE, 'aspect')] = !!data.aspect,
-	                        _a)),
-	                    style: {
-	                        '--twui-aspect': aspect(data.aspect),
-	                        '--twui-fit': data.fit || 'fit',
-	                        width: width(data),
-	                    },
-	                }, mithril('img', {
-	                    src: src,
-	                    onclick: onClick,
-	                }));
-	            });
-	        }),
-	    };
-	});
-
-	// tslint:disable: unified-signatures
-	function assign(partial, overrides) {
-	    Object.keys(overrides).forEach(function (key) {
-	        partial[key] = overrides[key];
-	    });
-	    return partial;
-	}
-	function buildGroup() {
-	    var label = null;
-	    var opts = {};
-	    var cb;
-	    // tslint:disable-next-line: prefer-for-of
-	    for (var i = 0; i < arguments.length; i++) {
-	        var arg = arguments[i];
-	        if (isString(arg)) {
-	            label = arg;
-	        }
-	        else if (isObject(arg)) {
-	            opts = arg;
-	        }
-	        else if (isFunction(arg)) {
-	            cb = arg;
-	        }
-	    }
-	    if (label) {
-	        opts.label = label;
-	    }
-	    if (cb) {
-	        var controls = this.controls;
-	        this.controls = [];
-	        cb(this);
-	        opts.children = this.controls;
-	        this.controls = controls;
-	    }
-	    return opts;
-	}
-	function buildControl() {
-	    var opts = {};
-	    if (arguments.length > 1) {
-	        opts = arguments[2] || opts;
-	        opts.target = arguments[0];
-	        opts.property = arguments[1];
-	        if (opts.label === undefined) {
-	            opts.label = String(opts.property || '');
-	        }
-	    }
-	    if (arguments.length === 1) {
-	        opts = arguments[0] || opts;
-	    }
-	    return opts;
-	}
-	/**
-	 *
-	 * @public
-	 */
-	var Builder = /** @class */ (function () {
-	    function Builder() {
-	        /**
-	         * Collection of created controls
-	         */
-	        this.controls = [];
-	    }
-	    Builder.prototype.group = function () {
-	        var opts = buildGroup.apply(this, arguments);
-	        return this.add(assign(opts, {
-	            type: 'group',
-	            children: opts.children,
-	            label: null,
-	            title: opts.label,
-	        }));
-	    };
-	    Builder.prototype.collapsible = function () {
-	        var opts = buildGroup.apply(this, arguments);
-	        return this.add(assign(opts, {
-	            type: 'group',
-	            children: opts.children,
-	            collapsible: true,
-	            label: null,
-	            title: opts.label,
-	        }));
-	    };
-	    Builder.prototype.container = function () {
-	        var opts = buildGroup.apply(this, arguments);
-	        return this.add(assign(opts, {
-	            type: 'container',
-	            children: opts.children,
-	        }));
-	    };
-	    Builder.prototype.tabs = function () {
-	        var opts = buildGroup.apply(this, arguments);
-	        return this.add(assign(opts, {
-	            type: 'tabs',
-	            active: opts.active || 0,
-	            children: opts.children,
-	        }));
-	    };
-	    Builder.prototype.accordion = function () {
-	        var opts = buildGroup.apply(this, arguments);
-	        return this.add(assign(opts, {
-	            type: 'accordion',
-	            children: opts.children,
-	        }));
-	    };
-	    Builder.prototype.checkbox = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'checkbox' }));
-	    };
-	    Builder.prototype.text = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'text' }));
-	    };
-	    Builder.prototype.number = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'number' }));
-	    };
-	    Builder.prototype.slider = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'slider' }));
-	    };
-	    Builder.prototype.position = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'position' }));
-	    };
-	    Builder.prototype.select = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'select' }));
-	    };
-	    Builder.prototype.color = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'color' }));
-	    };
-	    Builder.prototype.colorPicker = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'color-picker' }));
-	    };
-	    Builder.prototype.point = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'point' }));
-	    };
-	    Builder.prototype.spherical = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'spherical' }));
-	    };
-	    Builder.prototype.angle = function () {
-	        var opts = buildControl.apply(this, arguments);
-	        return this.add(assign(opts, { type: 'angle' }));
-	    };
-	    /**
-	     * Adds a button control
-	     *
-	     * @param text - The button text
-	     * @param opts - Additional options for the control
-	     */
-	    Builder.prototype.button = function (text, opts) {
-	        if (opts === void 0) { opts = {}; }
-	        return this.add(assign(opts, {
-	            type: 'button',
-	            text: text,
-	        }));
-	    };
-	    Builder.prototype.image = function () {
-	        var opts = buildGroup.apply(this, arguments);
-	        return this.add(assign(opts, {
-	            type: 'image',
-	        }));
-	    };
-	    /**
-	     * Adds a description text
-	     *
-	     * @param label - The control label
-	     * @param text - The text message
-	     * @param opts - Additional options for the control
-	     */
-	    Builder.prototype.content = function (label, content, opts) {
-	        if (opts === void 0) { opts = {}; }
-	        return this.add(assign(opts, {
-	            type: 'content',
-	            label: label,
-	            content: content,
-	        }));
-	    };
-	    /**
-	     * Adds a control
-	     *
-	     * @param def - The control definition
-	     */
-	    Builder.prototype.add = function (def) {
-	        var _this = this;
-	        this.controls.push(assign(def, {
-	            remove: function () {
-	                var i = _this.controls.indexOf(def);
-	                if (i >= 0) {
-	                    _this.controls.splice(i, 1);
-	                }
-	            },
-	        }));
-	        return def;
-	    };
-	    return Builder;
-	}());
-
-	/**
-	 * Mithril's hyperscript function.
-	 *
-	 * @public
-	 * @remarks
-	 * Useful to create custom components
-	 */
-	var h = mithril;
-	/**
-	 * Runs the function through a builder system and returns the created controls
-	 *
-	 * @param fn - The builder function
-	 * @returns
-	 */
-	function build(fn) {
-	    var builder = new Builder();
-	    fn(builder);
-	    return builder.controls;
-	}
-	/**
-	 * Mounts a ui to the given element
-	 *
-	 * @public
-	 * @param el - The ui host element
-	 * @param data - The ui definition object
-	 */
-	function mount(el, data) {
-	    el = typeof el === 'string' ? document.querySelector(el) : el;
-	    el.classList.add('twui-root');
-	    if (!data) {
-	        mithril.mount(el, null);
-	    }
-	    else if (Array.isArray(data)) {
-	        mithril.mount(el, {
-	            view: function () {
-	                return renderModel({
-	                    type: 'group',
-	                    children: data,
-	                });
-	            },
-	        });
-	    }
-	    else if (isFunction(data)) {
-	        var builder_1 = new Builder();
-	        data(builder_1);
-	        mithril.mount(el, {
-	            view: function () {
-	                return renderModel({
-	                    type: 'group',
-	                    children: builder_1.controls,
-	                });
-	            },
-	        });
-	    }
-	    else {
-	        mithril.mount(el, {
-	            view: function () { return renderModel(data); },
-	        });
-	    }
-	}
-	/**
-	 * Unmounts the ui from given host element
-	 *
-	 * @public
-	 * @param el - The ui host element
-	 */
-	function unmount(el) {
-	    el = typeof el === 'string' ? document.querySelector(el) : el;
-	    mithril.mount(el, null);
-	}
-	/**
-	 * Redraws the ui
-	 *
-	 * @public
-	 * @remarks
-	 * When changing the ui description object qui callbacks (e.g. `onInput` or `onChange`)
-	 * the ui will redraw automatically.
-	 *
-	 * However if the ui description object is changed from outside the qui callback
-	 * then this method must be called in order to update the visual state.
-	 */
-	function redraw() {
-	    mithril.redraw();
-	}
-
-	/**
-	 * Tweak UI is a lightweight js library for building input controls with data binding
-	 *
-	 * @remarks
-	 * The library provides a set of common ui components built with mithriljs. The main objective
-	 * is to allow a developer to rapidly scaffold input interfaces for manipulating javascript objects
-	 * at runtime.
-	 *
-	 * Similar projects are:
-	 * {@link https://github.com/dataarts/dat.gui | dat.GUI}
-	 * {@link https://github.com/automat/controlkit.js | controlkit}
-	 * {@link https://github.com/colejd/guify | guify}
-	 *
-	 * @packageDocumentation
-	 */
-	/**
-	 * The version string
-	 *
-	 * @public
-	 */
-	var VERSION = "0.4.3";
-
-	exports.Builder = Builder;
-	exports.VERSION = VERSION;
-	exports.angleCodec = angleCodec;
-	exports.build = build;
-	exports.component = component;
-	exports.getColorFormatter = getColorFormatter;
-	exports.getComponent = getComponent;
-	exports.getValue = getValue;
-	exports.h = h;
-	exports.hsv2rgb = hsv2rgb;
-	exports.mount = mount;
-	exports.redraw = redraw;
-	exports.renderModel = renderModel;
-	exports.rgb2hsv = rgb2hsv;
-	exports.setValue = setValue;
-	exports.sphericalCodec = sphericalCodec;
-	exports.unmount = unmount;
-
-	Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=tweak-ui.umd.js.map
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.TweakUI={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`:root{--twk-size:1.375rem;--twk-gap:.125rem;--twk-inset:.125rem;--twk-radius:.25rem;--twk-label-size:7rem;--twk-label-pad-x:.25rem;--twk-label-pad-y:0rem;--twk-input-height:var(--twk-size);--twk-input-pad-x:.375rem;--twk-input-pad-y:0rem;--twk-button-height:var(--twk-size);--twk-button-pad-x:.5rem;--twk-button-pad-y:.25rem;--twk-color-base-100:#2a303c;--twk-color-base-200:#242933;--twk-color-base-300:#20252e;--twk-color-base-content:#b2ccd6;--twk-color-neutral:#1c212b;--twk-color-neutral-content:#b2ccd6;--twk-color-accent:#f9aa33;--twk-color-bool-true:#f9aa33;--twk-color-bool-false:#2a303c}.twk-dark{--twk-color-base-100:#1d232a;--twk-color-base-200:#191e24;--twk-color-base-300:#15191e;--twk-color-base-content:#ecf9ff;--twk-color-neutral:#09090b;t:#e4e4e7;--twk-color-accent:#f9aa33}.twk-light{--twk-color-base-100:#fff;--twk-color-base-200:#f5f5f5;--twk-color-base-300:#ebebeb;--twk-color-base-content:#000;--twk-color-neutral:#000;--twk-color-neutral-content:#fff;--twk-color-accent:#2196f3}.tweak-ui{interpolate-size:allow-keywords;background-color:var(--twk-color-base-200);color:var(--twk-color-base-content);gap:var(--twk-gap);font-family:monospace;line-height:1.5;font-size:var(--twk-font-size,12px);width:var(--twk-width,20rem);box-sizing:border-box;border-radius:calc(var(--twk-radius) + var(--twk-inset));padding:0;padding:var(--twk-inset,0);flex-direction:column;flex:none;margin:0;display:flex;overflow:hidden auto}.tweak-ui::-webkit-scrollbar{width:.5rem}.tweak-ui::-webkit-scrollbar-track{background-color:var(--twk-color-base-200)}.tweak-ui::-webkit-scrollbar-thumb{background-color:var(--twk-color-base-200);border-style:solid;border-width:1px;border-color:var(--twk-color-base-300);transition:background-color .2s ease-in-out}.tweak-ui::-webkit-scrollbar-thumb:hover{background-color:var(--twk-color-primary)}.tweak-ui button,.tweak-ui input,.tweak-ui select,.tweak-ui optgroup,.tweak-ui textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border:0;border-radius:0;min-width:0;margin:0;padding:0}.tweak-ui button:not([type=checkbox],select),.tweak-ui input:not([type=checkbox],select),.tweak-ui select:not([type=checkbox],select),.tweak-ui optgroup:not([type=checkbox],select),.tweak-ui textarea:not([type=checkbox],select){appearance:none!important}.tweak-ui button:focus-visible,.tweak-ui input:focus-visible,.tweak-ui select:focus-visible,.tweak-ui optgroup:focus-visible,.tweak-ui textarea:focus-visible{outline:none}.tweak-ui input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tweak-ui input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tweak-ui input[type=number]{-moz-appearance:textfield}.tweak-ui .twk-input{cursor:text;box-sizing:border-box;white-space:nowrap;vertical-align:middle;touch-action:manipulation;align-items:center;gap:var(--twk-gap);height:calc(var(--twk-size));min-width:0;line-height:calc(var(--twk-size));padding:var(--twk-input-pad-y) var(--twk-input-pad-x);color:var(--twk-color-base-content);border-radius:var(--twk-radius);border:none;flex:1;transition:color .2s ease-in-out,background-color .2s ease-in-out,outline-color .2s ease-in-out;display:flex;position:relative;appearance:none!important}.tweak-ui .twk-input input{flex:1}.tweak-ui .twk-input:not(.twk-input-readonly){outline-offset:-1px;outline:1px solid #0000}.tweak-ui .twk-input:not(.twk-input-readonly):hover{background-color:var(--twk-color-base-100)}.tweak-ui .twk-input:not(.twk-input-readonly):focus-within{outline-color:var(--twk-color-accent)}.tweak-ui label{min-width:0}.tweak-ui select,.tweak-ui button,.tweak-ui a{cursor:pointer;align-items:center}.tweak-ui select:focus,.tweak-ui input:not([type=checkbox]):focus{color:var(--twk-color-accent)}.tweak-ui select{appearance:base-select;border-radius:var(--twk-radius);background:var(--twk-color-base-100);border-color:var(--twk-color-base-300);border:none}.tweak-ui ::picker(select){appearance:base-select;border-radius:var(--twk-radius);background:var(--twk-color-base-100);border-color:var(--twk-color-base-300);border:none}.tweak-ui select option{justify-content:flex-start;gap:var(--twk-gap);padding-inline:var(--twk-button-pad-x);background:var(--twk-color-base-100);color:var(--twk-color-base-content);display:flex}.tweak-ui select option:hover,.tweak-ui select option:focus{background:var(--twk-color-base-200)}.tweak-ui select{padding-inline:var(--twk-button-pad-x)}.tweak-ui .twk-btn{--twk-btn-bg:var(--twk-color-base-100);--twk-btn-color:var(--twk-color-content);--twk-btn-size:var(--twk-size);cursor:pointer;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;color:var(--twk-btn-color);min-height:var(--twk-btn-size);border-radius:var(--twk-radius);outline-offset:1px;background-color:var(--twk-btn-bg);padding-inline:var(--twk-button-pad-x);text-align:center;white-space:nowrap;outline-color:var(--twk-color-neutral);font-weight:700}.tweak-ui .twk-btn:hover{background-color:color-mix(in oklab, var(--btn-color,var(--twk-btn-bg)), #000 7%)}.tweak-ui .twk-btn:focus{outline-color:var(--twk-color-accent)}.tweak-ui .twk-btn:active{transform:translateY(1px)}.tweak-ui .twk-btn.twk-btn-accent{--twk-btn-bg:var(--twk-color-accent);--twk-btn-color:var(--twk-color-neutral)}.tweak-ui .twk-btn.twk-btn-lg{--twk-btn-size:calc(var(--twk-size) * 1.25)}.tweak-ui .twk-btn.twk-btn-sq{width:var(--twk-btn-size);height:var(--twk-btn-size);flex:none;padding-inline:0}.tweak-ui .twk-btn.twk-btn-bl{width:100%}dialog.twk-dialog{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;border:none;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.twk-dialog-content{background-color:var(--twk-color-base-100);border-radius:var(--twk-radius);opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:100%;max-width:32rem;max-height:100vh;overflow-y:auto}dialog.twk-dialog[open]{pointer-events:auto;visibility:visible;opacity:1;background-color:oklch(0% 0 0/.4)}dialog.twk-dialog[open] .twk-dialog-content{opacity:1;translate:0;scale:1}.twk-flex{align-items:stretch;gap:var(--twk-gap);flex-flow:column;display:flex}.twk-flex-row{gap:var(--twk-gap);flex-flow:row;display:flex}.twk-grid{gap:var(--twk-gap);display:grid}.twk-divider{padding:0 calc(var(--twk-size) / 2);align-items:center;display:flex}.twk-divider:not(:empty){gap:calc(var(--twk-size) / 2)}.twk-divider{height:var(--twk-size)}.twk-divider:before,.twk-divider:after{content:"";opacity:.125;background-color:currentColor;flex-grow:1;width:100%;height:1px}.twk-divider-v{flex-flow:column;align-items:center;display:flex}.twk-divider-v:not(:empty){gap:calc(var(--twk-size) / 2)}.twk-divider-v{width:var(--twk-size);height:100%}.twk-divider-v:before,.twk-divider-v:after{content:"";opacity:.125;background-color:currentColor;flex-grow:1;width:1px;height:100%}.twk-group,.twk-group-content{gap:var(--twk-gap);flex-direction:column;display:flex}.twk-group-content.animate.enter{animation:.25s ease-out forwards twk-group-content-enter;overflow:hidden}.twk-group-content.leave{animation:.25s ease-out forwards twk-group-content-leave;overflow:hidden}@keyframes twk-group-content-enter{0%{opacity:0;height:0}50%{opacity:0;height:auto}to{opacity:1;height:auto}}@keyframes twk-group-content-leave{0%{opacity:1;height:auto}50%{opacity:0;height:auto}to{opacity:0;height:0}}.twk-group-title{width:auto;height:var(--twk-size);background-color:var(--twk-color-neutral);color:var(--twk-color-neutral-content);border-radius:var(--twk-radius,0);text-transform:uppercase;flex-direction:row;align-items:center;margin:0;padding:0 .5rem;font-weight:700;display:flex}.twk-group-collapsible>.twk-group-title{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.twk-group-collapsible>.twk-group-title:before{content:"";width:var(--twk-size);height:var(--twk-size);text-align:center;clip-path:polygon(50.05% 77.08%,83.58% 43.55%,87.11% 40.02%,80.03% 32.94%,76.5% 36.47%,50.03% 62.94%,23.56% 36.47%,20.03% 32.94%,12.95% 40.02%,16.48% 43.55%,46.48% 73.55%,50.02% 77.08%);background-color:currentColor;transition:opacity .2s ease-in-out,transform .2s ease-in-out;display:block;position:absolute;top:0;right:0;transform:scale(.5)rotate(0)}.twk-group-collapsed>.twk-group-title:before{transform:scale(.5)rotate(-90deg)}.twk-group:not(.twk-root>.twk-group) .twk-group{margin-left:calc(var(--twk-size) / 4)}.twk-group-description{opacity:.75;padding:.25rem .25rem .5rem 0;font-style:italic;line-height:1}.twk-tree{width:100%;height:100%;max-height:100vh;overflow-y:auto}.twk-tree-row{-webkit-user-select:none;user-select:none;width:100%;padding-left:calc(var(--twk-tree-row-depth) * .5 * var(--twk-tree-row-height));background-color:var(--twk-color-base-200);box-sizing:border-box;flex-direction:row;align-items:center;display:flex}.twk-tree-row:hover{background-color:var(--twk-color-base-100)}.twk-tree-row.selected{color:var(--twk-color-accent)}.twk-tree-toggle:before{content:"";width:var(--twk-tree-row-height);height:var(--twk-tree-row-height);text-align:center;transition:opacity .2s ease-in-out,transform .2s ease-in-out;display:block;transform:scale(.5)rotate(-90deg)}.twk-tree-toggle.expandable:before{clip-path:polygon(50.05% 77.08%,83.58% 43.55%,87.11% 40.02%,80.03% 32.94%,76.5% 36.47%,50.03% 62.94%,23.56% 36.47%,20.03% 32.94%,12.95% 40.02%,16.48% 43.55%,46.48% 73.55%,50.02% 77.08%);background-color:currentColor}.twk-tree-toggle.expanded:before{transform:scale(.5)rotate(0)}.twk-tree-icon{width:var(--twk-tree-row-height);height:var(--twk-tree-row-height);place-items:center;display:grid}.twk-tree-label{display:flex}.twk-tabs{border-color:var(--twk-color-base-300);align-items:stretch;gap:var(--twk-gap);flex-flow:wrap;display:flex}.twk-tabs button.twk-tab{background-color:var(--twk-color-base-100);color:color-mix(in srgb, var(--twk-color-base-content) 40%, transparent);flex:1;order:0}.twk-tabs button.twk-tab:hover{color:var(--twk-color-base-content)}.twk-tabs button.twk-tab.twk-btn:not(.active){background-color:#0000;font-weight:400}.twk-tabs button.twk-tab.twk-btn.active{color:var(--twk-color-accent);font-weight:700}.twk-tab-content{order:1;width:100%}.twk-tabs-vertical{grid-template-columns:auto 1fr;display:grid}.twk-tabs-vertical .twk-tab{grid-column:1}.twk-tabs-vertical .twk-tab-content{grid-area:1/2/-1}.twk-split-pane{overflow:hidden}.twk-split-pane.dragging{-webkit-user-select:none;user-select:none}.twk-split-pane>:not(.twk-split-gutter){flex:1;min-width:1rem;min-height:1rem}.twk-split-gutter:last-child{display:none}.twk-split-gutter:before{content:"";background-color:var(--twk-color-base-100);opacity:0;position:absolute}.twk-split-gutter:hover:before{background-color:var(--twk-color-base-100);opacity:1}.twk-split-gutter-v{cursor:row-resize;min-height:.25rem;position:relative}.twk-split-gutter-v:before{inset:1px .25rem}.twk-split-gutter-h{cursor:col-resize;min-width:.25rem;position:relative}.twk-split-gutter-h:before{inset:.25rem 1px}.twk-section{grid-template:"header""content"1fr"footer"/100%;width:100%;display:grid}.twk-section>*{grid-area:content}.twk-section-header,header{grid-area:header}.twk-section-content{grid-area:content}.twk-section-footer,footer{grid-area:footer}.twk-bar{gap:var(--twk-gap);min-height:var(--twk-size);grid-template-columns:auto 1fr auto;grid-template-areas:"start content end";align-items:center;display:grid}.twk-bar>*{grid-area:content}.twk-bar-start{grid-area:start}.twk-bar-content{grid-area:content}.twk-bar-end{grid-area:end}.twk-widget{gap:var(--twk-gap);grid-template-columns:.75fr 1fr;grid-template-areas:"label content";width:100%;display:grid}.twk-widget>*{grid-area:content;overflow:hidden}.twk-widget-label{min-height:var(--twk-size);padding:0 calc(var(--twk-size) / 4);color:color-mix(in srgb, var(--twk-color-base-content) 40%, transparent);flex:.75;grid-area:label;align-self:start;align-items:center;display:inline-flex;overflow:hidden}.twk-angle-label{height:var(--twk-size);white-space:nowrap;text-align:right}.twk-angle-input{gap:var(--twk-gap);column-gap:calc(var(--twk-gap) * 2);grid-template:"display input""display output"min-content/min-content auto;display:grid}.twk-angle-input .twk-scalar-input{grid-area:input}.twk-angle-input .twk-angle-label{grid-area:output}.twk-angle-pane{width:100%;width:var(--twk-size);height:var(--twk-size);outline:1px solid var(--twk-color-base-content);outline-offset:-1px;background-image:conic-gradient(from 0deg, var(--twk-color-base-content) calc(var(--angle-value) / 360 * 100%), transparent 0);border-radius:50%;grid-area:display}.twk-bitmask-input{gap:var(--twk-gap);flex-direction:column;display:flex}.twk-bitmask-input .twk-bitmask-row{gap:var(--twk-gap);cursor:pointer;flex-direction:row;display:flex}.twk-bitmask-input .twk-bitmask-row>*{flex:none}.twk-bitmask-input .twk-bitmask-name{text-overflow:ellipsis;flex:1;padding-left:.25rem;overflow:hidden}.twk-bitmask-input .twk-bitmask-bit{opacity:.5;padding-right:.25rem}.twk-bitmask-input .twk-bitmask-value{opacity:.5}.twk-bitmask-input .twk-bitmask-indicator{width:var(--twk-size);height:var(--twk-size);background-color:var(--twk-color-base-100)}.twk-bitmask-active .twk-bitmask-indicator:before{content:"";background-color:var(--twk-color-accent);width:50%;height:50%;margin:25%;display:block}.twk-bitmask-active .twk-bitmask-value{opacity:1}.twk-bool-input{align-items:center;gap:var(--twk-gap);flex-direction:row;display:flex}.twk-bool-input input{text-align:right;min-width:0}.twk-bool-input.twk-align-end{justify-content:flex-end}.twk-color-picker{gap:var(--twk-gap);flex-direction:row;flex:auto;display:flex}.twk-color-picker .color-picker-panel{flex:1;position:relative}.twk-color-picker .color-picker-inputs{gap:var(--twk-gap);flex-direction:column;flex:none;display:flex}.twk-color-picker .color-picker-inputs .input-r{border-left:2px solid red!important}.twk-color-picker .color-picker-inputs .input-g{border-left:2px solid #0f0!important}.twk-color-picker .color-picker-inputs .input-b{border-left:2px solid #00f!important}.twk-color-picker .color-picker-inputs .input-a{border-image:linear-gradient(90deg,#fff,#0000)}.twk-color-picker .color-picker-inputs .input-hex{border-left:2px solid #000!important}.twk-color-picker .color-picker-inputs input{flex:none;width:4rem;display:block}.twk-color-picker .color-picker-sv:focus,.twk-color-picker .color-picker-h:focus,.twk-color-picker .color-picker-a:focus{border-color:var(--twk-color-accent);outline:none}.twk-color-picker .color-picker-sv,.twk-color-picker .color-picker-h,.twk-color-picker .color-picker-a{border-radius:var(--twk-radius)}.twk-color-picker .color-picker-sv{box-sizing:border-box;cursor:crosshair;z-index:1;border-bottom:1px solid;border-color:var(--twk-color-base-300);width:100%;padding-top:100%;position:relative}.twk-color-picker .color-picker-sv-bg{border-radius:var(--twk-radius);position:absolute;inset:0}.twk-color-picker .color-picker-sv-cursor{box-sizing:border-box;border:1px solid #fff;border-radius:5px;width:10px;height:10px;margin-top:-5px;margin-left:-5px;position:absolute;box-shadow:0 0 2px 1px #000000bf}.twk-color-picker .color-picker-h,.twk-color-picker .color-picker-a{box-sizing:border-box;cursor:ew-resize;border-bottom:1px solid;border-color:var(--twk-color-base-300);height:1rem;position:relative}.twk-color-picker .color-picker-h-cursor,.twk-color-picker .color-picker-a-cursor{border:1px solid #fff;border-radius:2px;width:4px;height:calc(1rem - 2px);margin-left:-3px;position:absolute;box-shadow:0 0 2px 1px #000000bf}.twk-color-picker .color-picker-a{background-blend-mode:normal, difference, normal;background-image:linear-gradient(90deg,#0000,#0000),linear-gradient(90deg,gray 50%,#fff 50%),linear-gradient(gray 50%,#fff 50%);background-size:1rem 1rem}.twk-color-picker .color-picker-a-bg{position:absolute;inset:0}.twk-color-picker .color-picker-sv,.twk-color-picker .color-picker-h,.twk-color-picker .color-picker-a{border-color:var(--twk-color-base-300)}.twk-color-input{align-items:stretch;gap:var(--twk-gap);flex-direction:column;flex:auto;display:flex}.twk-color-input button.twk-btn{text-transform:uppercase;flex-direction:row;flex:1;justify-content:start;align-items:center;gap:.5rem;padding-left:0;display:flex}.twk-color-input button.twk-btn:before{content:"";width:calc(var(--twk-size));height:calc(var(--twk-size));background-color:var(--twk-color-value);border-radius:var(--twk-radius);flex:none;display:inline-block}.tweak-ui input[type=checkbox]{flex:none}input.twk-toggle[type=checkbox]{width:calc(var(--twk-size) * 2);height:calc(var(--twk-size));border-radius:var(--twk-size);border:2px solid var(--twk-color-base-100);background-color:var(--twk-color-base-100);cursor:pointer;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-shrink:0;grid-template-columns:1fr 1fr;place-content:center;margin:0;padding:2px;display:inline-grid}input.twk-toggle[type=checkbox]:checked{border-color:var(--twk-color-base-content)}input.twk-toggle[type=checkbox]:focus{border-color:var(--twk-color-accent)}input.twk-toggle[type=checkbox]:before{aspect-ratio:1;content:"";background-color:var(--twk-color-base-content);opacity:.25;border-radius:100%;grid-row-start:1;grid-column-start:1;transition:background-color .1s,translate .2s;translate:0}input.twk-toggle[type=checkbox]:checked:before{opacity:1;translate:100%}input.twk-check[type=checkbox]{width:calc(var(--twk-size) - 4px);height:calc(var(--twk-size) - 4px);border-radius:var(--twk-radius);cursor:pointer;appearance:none;background-color:var(--twk-color-base-300);outline:1px solid var(--twk-color-base-content);outline-offset:-1px;place-content:center;margin:2px;transition:background-color .1s;display:grid;flex:none!important}input.twk-check[type=checkbox]:checked{background-color:var(--twk-color-accent);outline-color:var(--twk-color-accent)}input.twk-check[type=checkbox]:checked:before{content:"";width:calc(var(--twk-size) / 2);height:calc(var(--twk-size) / 4);border-left:2px solid var(--twk-color-base-300);border-bottom:2px solid var(--twk-color-base-300);margin-top:-2px;transform:rotate(-45deg)}canvas.twk-graph{width:100%}table.twk-graph{text-align:right;border-collapse:collapse;table-layout:fixed;width:100%;margin:0;display:table!important}table.twk-graph thead,table.twk-graph tbody{width:100%}table.twk-graph td,table.twk-graph th{white-space:nowrap;text-overflow:ellipsis;padding:0 4px;overflow:hidden}table.twk-graph th:first-child,table.twk-graph td:first-child{width:var(--twk-label-size);text-align:left}table.twk-graph .twk-current{width:70px;font-weight:600}table.twk-graph .twk-stats{color:#888;width:110px;font-size:.85em}.twk-image{max-width:100%;display:block}.twk-image.twk-loading{opacity:0}.twk-matrix-input{gap:var(--twk-gap)}.twk-point .point-area{background-color:var(--twk-color-base-100);border-color:var(--twk-color-base-300);background-image:linear-gradient(var(--twk-color-base-200) 1px, transparent 1px), linear-gradient(90deg, var(--twk-color-base-200) 1px, transparent 1px);aspect-ratio:1;box-sizing:border-box;cursor:crosshair;z-index:1;background-size:10% 10%,10% 10%;align-self:end;width:100%;transition:border-color .2s ease-in-out,background-color .2s ease-in-out;position:relative;overflow:visible}.twk-point .point-area .point-x-axis,.twk-point .point-area .point-y-axis{background-color:var(--twk-color-base-300)}.twk-point .point-area:focus .point-x-axis,.twk-point .point-area:focus .point-y-axis{background-color:var(--twk-color-accent)}.twk-point .point-area:focus{border-color:var(--twk-color-accent);outline:none}.twk-scalar-input{align-items:center;gap:var(--twk-gap);grid-auto-flow:column;display:grid;position:relative}.twk-scalar-input input{text-align:right;min-width:0}.twk-scalar-input .unit{opacity:.5}.twk-scalar-dragable input{cursor:ew-resize}.twk-scalar-range:after{pointer-events:none;content:"";opacity:.125;background:linear-gradient(to right, var(--twk-color-accent) 0%, var(--twk-color-accent) calc(var(--twk-scalar-value,0) * 100%), transparent calc(var(--twk-scalar-value,0) * 100%), transparent 100%);border-radius:var(--twk-radius);width:100%;position:absolute;top:0;bottom:0;left:0}.twk-scalar-range:hover:after{opacity:.25}.twk-spherical-label{height:var(--twk-size);white-space:nowrap;text-align:center}.twk-spherical-pane{outline:3px solid var(--twk-color-base-content);outline-offset:-3px;border-radius:50%;width:100%;max-width:150px;margin:1rem auto}.twk-spherical-arm{border:1px solid var(--twk-color-base-content);border-radius:calc(var(--twk-size) / 2);background-image:linear-gradient(to right, var(--twk-color-base-content), var(--twk-color-base-content) calc(var(--polar-value) / 90 * 100%), var(--twk-color-base-300) calc(var(--polar-value) / 90 * 100%))}.twk-spherical-knob{background-color:var(--twk-color-base-content);-webkit-user-select:none;user-select:none;width:1rem;height:1rem;box-shadow:0 0 3px var(--twk-color-neutral);border-radius:50%}.twk-spherical-knob:focus,.twk-spherical-arm:focus{outline:2px solid var(--twk-color-accent);outline-offset:2px}.twk-string-input input,.twk-string-input .twk-input-value{flex:1}.twk-vector-input{gap:var(--twk-gap)}.twk-widget .twk-poll{flex:1}.tweak-ui .twk-p-0{padding:0}.tweak-ui .twk-p-1{padding:var(--twk-gap)}.tweak-ui .twk-p-2{padding:calc(var(--twk-gap) * 2)}.tweak-ui .twk-p-4{padding:calc(var(--twk-gap) * 4)}.tweak-ui .twk-px-0{padding-inline:0}.tweak-ui .twk-px-1{padding-inline:var(--twk-gap)}.tweak-ui .twk-px-2{padding-inline:calc(var(--twk-gap) * 2)}.tweak-ui .twk-px-4{padding-inline:calc(var(--twk-gap) * 4)}.tweak-ui .twk-py-0{padding-block:0}.tweak-ui .twk-py-1{padding-block:var(--twk-gap)}.tweak-ui .twk-py-2{padding-block:calc(var(--twk-gap) * 2)}.tweak-ui .twk-py-4{padding-block:calc(var(--twk-gap) * 4)}.tweak-ui .twk-p-inset{padding:var(--twk-inset)}.tweak-ui .twk-px-label{padding-inline:var(--twk-label-pad-x)}.tweak-ui .twk-px-input{padding-inline:var(--twk-input-pad-x)}.tweak-ui .twk-px-button{padding-inline:var(--twk-button-pad-x)}.tweak-ui .twk-gap-0{gap:0}.tweak-ui .twk-gap-1{gap:var(--twk-gap)}.tweak-ui .twk-gap-2{gap:calc(var(--twk-gap) * 2)}.tweak-ui .twk-gap-4{gap:calc(var(--twk-gap) * 4)}.tweak-ui .twk-w-full{width:100%}.tweak-ui .twk-w-label{width:var(--twk-label-size)}.tweak-ui .twk-h-input{height:var(--twk-input-height)}.tweak-ui .twk-h-btn{height:var(--twk-button-height)}.tweak-ui .twk-h-full{height:100%}.tweak-ui .twk-rounded-none{border-radius:0}.tweak-ui .twk-rounded{border-radius:var(--twk-radius)}.tweak-ui .twk-rounded-full{border-radius:9999px}.tweak-ui .twk-text-end{text-align:end}.tweak-ui .twk-text-right{text-align:right}.tweak-ui .twk-text-start{text-align:start}.tweak-ui .twk-text-left{text-align:left}.tweak-ui .twk-text-center{text-align:center}.tweak-ui .twk-text-xs{font-size:.625rem}.tweak-ui .twk-text-sm{font-size:.75rem}.tweak-ui .twk-text-md{font-size:.875rem}.tweak-ui .twk-bg-100{background-color:var(--twk-color-base-100)}.tweak-ui .twk-bg-200{background-color:var(--twk-color-base-200)}.tweak-ui .twk-bg-300{background-color:var(--twk-color-base-300)}.tweak-ui .twk-bg-content{background-color:var(--twk-color-base-content)}.tweak-ui .twk-bg-neutral{background-color:var(--twk-color-neutral)}.tweak-ui .twk-bg-neutral-content{background-color:var(--twk-color-neutral-content)}.tweak-ui .twk-bg-accent{background-color:var(--twk-color-accent)}.tweak-ui .twk-color-100{color:var(--twk-color-base-100)}.tweak-ui .twk-color-200{color:var(--twk-color-base-200)}.tweak-ui .twk-color-300{color:var(--twk-color-base-300)}.tweak-ui .twk-color-content{color:var(--twk-color-base-content)}.tweak-ui .twk-color-neutral{color:var(--twk-color-neutral)}.tweak-ui .twk-color-neutral-content{color:var(--twk-color-neutral-content)}.tweak-ui .twk-color-accent{color:var(--twk-color-accent)}.tweak-ui .twk-color-muted{color:color-mix(in srgb, var(--twk-color-base-content) 40%, transparent)}.tweak-ui .twk-color-dim{color:color-mix(in srgb, var(--twk-color-base-content) 20%, transparent)}.tweak-ui .twk-glass{background-color:color-mix(in srgb, var(--twk-glass-color,#000) var(--twk-glass-percent,50%), transparent);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}.tweak-ui .twk-glass-100{--twk-glass-color:var(--twk-color-base-100)}.tweak-ui .twk-glass-200{--twk-glass-color:var(--twk-color-base-200)}.tweak-ui .twk-glass-300{--twk-glass-color:var(--twk-color-base-300)}@keyframes twk-fade{0%{opacity:0}to{opacity:1}}:root{--twk-pattern-color-a:color-mix(in srgb, var(--twk-color-base-300) 100%, transparent);--twk-pattern-color-b:color-mix(in srgb, var(--twk-color-base-100) 80%, transparent);--twk-pattern-color-line:color-mix(in srgb, var(--twk-color-base-content) 8%, transparent);--twk-pattern-size:.5rem;--twk-pattern-line-width:1px}.twk-bg-checker,.twk-bg-checker-coarse,.twk-bg-checker-fine{background-color:var(--twk-pattern-color-a);background-image:repeating-conic-gradient(var(--twk-pattern-color-b) 0% 25%, transparent 25% 50%);background-size:calc(var(--twk-pattern-size) * 2) calc(var(--twk-pattern-size) * 2);background-position:0 0}.twk-bg-checker-fine{--twk-pattern-size:.25rem}.twk-bg-checker-coarse{--twk-pattern-size:1rem}.twk-bg-grid{background-color:var(--twk-pattern-color-a);background-image:linear-gradient(to right, var(--twk-pattern-color-line) var(--twk-pattern-line-width), transparent var(--twk-pattern-line-width)), linear-gradient(to bottom, var(--twk-pattern-color-line) var(--twk-pattern-line-width), transparent var(--twk-pattern-line-width));background-size:var(--twk-pattern-size) var(--twk-pattern-size);background-position:0 0}.twk-bg-grid-axis{--twk-pattern-color-axis:color-mix(in srgb, var(--twk-color-base-content) 20%, transparent);background-color:var(--twk-pattern-color-a);background-image:linear-gradient(to right, var(--twk-pattern-color-axis) var(--twk-pattern-line-width), transparent var(--twk-pattern-line-width)), linear-gradient(to bottom, var(--twk-pattern-color-axis) var(--twk-pattern-line-width), transparent var(--twk-pattern-line-width)), linear-gradient(to right, var(--twk-pattern-color-line) var(--twk-pattern-line-width), transparent var(--twk-pattern-line-width)), linear-gradient(to bottom, var(--twk-pattern-color-line) var(--twk-pattern-line-width), transparent var(--twk-pattern-line-width));background-size:100% 100%, 100% 100%, var(--twk-pattern-size) var(--twk-pattern-size), var(--twk-pattern-size) var(--twk-pattern-size);background-position:0,50% 0,0 0,0 0}.twk-bg-dots{--twk-pattern-dot-size:1.5px;background-color:var(--twk-pattern-color-a);background-image:radial-gradient(circle, var(--twk-pattern-color-line) var(--twk-pattern-dot-size), transparent var(--twk-pattern-dot-size));background-size:var(--twk-pattern-size) var(--twk-pattern-size);background-position:0 0}.twk-bg-stripes{background-color:var(--twk-pattern-color-a);background-image:repeating-linear-gradient(-45deg, var(--twk-pattern-color-b) 0px, var(--twk-pattern-color-b) var(--twk-pattern-size), transparent var(--twk-pattern-size), transparent calc(var(--twk-pattern-size) * 2))}
+/*$vite$:1*/`,document.head.appendChild(t),Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e},u=(e,t,i)=>(i=e==null?{}:n(o(e)),l(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)),d=c(((e,t)=>{function n(e,t,n,r,i,a){return{tag:e,key:t,attrs:n,children:r,text:i,dom:a,is:void 0,domSize:void 0,state:void 0,events:void 0,instance:void 0}}n.normalize=function(e){return Array.isArray(e)?n(`[`,void 0,void 0,n.normalizeChildren(e),void 0,void 0):e==null||typeof e==`boolean`?null:typeof e==`object`?e:n(`#`,void 0,void 0,String(e),void 0,void 0)},n.normalizeChildren=function(e){for(var t=Array(e.length),r=0,i=0;i<e.length;i++)t[i]=n.normalize(e[i]),t[i]!==null&&t[i].key!=null&&r++;if(r!==0&&r!==e.length)throw TypeError(t.includes(null)?`In fragments, vnodes must either all have keys or none have keys. You may wish to consider using an explicit keyed empty fragment, m.fragment({key: ...}), instead of a hole.`:`In fragments, vnodes must either all have keys or none have keys.`);return t},t.exports=n})),f=c(((e,t)=>{var n=d();t.exports=function(e,t){return e==null||typeof e==`object`&&e.tag==null&&!Array.isArray(e)?t.length===1&&Array.isArray(t[0])&&(t=t[0]):(t=t.length===0&&Array.isArray(e)?e:[e,...t],e=void 0),n(``,e&&e.key,e,t)}})),p=c(((e,t)=>{t.exports={}.hasOwnProperty})),m=c(((e,t)=>{t.exports={}})),h=c(((e,t)=>{var n=m();t.exports=new Map([[n,!0]])})),g=c(((e,t)=>{var n=d(),r=f(),i=p(),a=m(),o=h(),s=/(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g,c=Object.create(null);function l(e){for(var t in e)if(i.call(e,t))return!1;return!0}function u(e){return e===`value`||e===`checked`||e===`selectedIndex`||e===`selected`}function g(e){for(var t,n=`div`,r=[],i={},d=!0;t=s.exec(e);){var f=t[1],p=t[2];if(f===``&&p!==``)n=p;else if(f===`#`)i.id=p;else if(f===`.`)r.push(p);else if(t[3][0]===`[`){var m=t[6];m&&=m.replace(/\\(["'])/g,`$1`).replace(/\\\\/g,`\\`),t[4]===`class`?r.push(m):(i[t[4]]=m===``?m:m||!0,u(t[4])&&(d=!1))}}return r.length>0&&(i.className=r.join(` `)),l(i)?i=a:o.set(i,d),c[e]={tag:n,attrs:i,is:i.is}}function _(e,t){t.tag=e.tag;var n=t.attrs;if(n==null)return t.attrs=e.attrs,t.is=e.is,t;if(i.call(n,`class`)&&(n.class!=null&&(n.className=n.class),n.class=null),e.attrs!==a){var r=n.className;n=Object.assign({},e.attrs,n),e.attrs.className!=null&&(n.className=r==null?e.attrs.className:String(e.attrs.className)+` `+String(r))}return e.tag===`input`&&i.call(n,`type`)&&(n=Object.assign({type:n.type},n)),t.is=n.is,t.attrs=n,t}function v(e,t,...i){if(e==null||typeof e!=`string`&&typeof e!=`function`&&typeof e.view!=`function`)throw Error(`The selector must be either a string or a component.`);var a=r(t,i);return typeof e==`string`&&(a.children=n.normalizeChildren(a.children),e!==`[`)?_(c[e]||g(e),a):(a.attrs??={},a.tag=e,a)}t.exports=v})),_=c(((e,t)=>{var n=d();t.exports=function(e){return e??=``,n(`<`,void 0,void 0,e,void 0,void 0)}})),v=c(((e,t)=>{var n=d(),r=f();t.exports=function(e,...t){var i=r(e,t);return i.attrs??={},i.tag=`[`,i.children=n.normalizeChildren(i.children),i}})),y=c(((e,t)=>{var n=g();n.trust=_(),n.fragment=v(),t.exports=n})),b=c(((e,t)=>{t.exports=new WeakMap})),x=c(((e,t)=>{var n=b();function*r(e){var t=e.dom,r=e.domSize,i=n.get(t);if(t!=null)do{var a=t.nextSibling;n.get(t)===i&&(yield t,r--),t=a}while(r)}t.exports=r})),S=c(((e,t)=>{var n=d(),r=b(),i=x(),a=h();t.exports=function(){var e={svg:`http://www.w3.org/2000/svg`,math:`http://www.w3.org/1998/Math/MathML`},t,o;function s(e){return e.ownerDocument}function c(t){return t.attrs&&t.attrs.xmlns||e[t.tag]}function l(e,t){if(e.state!==t)throw Error(`'vnode.state' must not be modified.`)}function u(e){var t=e.state;try{return this.apply(t,arguments)}finally{l(e,t)}}function d(e){try{return s(e).activeElement}catch{return null}}function f(e,t,n,r,i,a,o){for(var s=n;s<r;s++){var c=t[s];c!=null&&p(e,c,i,o,a)}}function p(e,t,n,r,i){var a=t.tag;if(typeof a==`string`)switch(t.state={},t.attrs!=null&&H(t.attrs,t,n),a){case`#`:m(e,t,i);break;case`<`:g(e,t,r,i);break;case`[`:_(e,t,n,r,i);break;default:v(e,t,n,r,i)}else b(e,t,n,r,i)}function m(e,t,n){t.dom=s(e).createTextNode(t.children),N(e,t.dom,n)}var h={caption:`table`,thead:`table`,tbody:`table`,tfoot:`table`,tr:`tbody`,th:`tr`,td:`tr`,colgroup:`table`,col:`colgroup`};function g(e,t,n,r){var i=t.children.match(/^\s*?<(\w+)/im)||[],a=s(e).createElement(h[i[1]]||`div`);n===`http://www.w3.org/2000/svg`?(a.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg">`+t.children+`</svg>`,a=a.firstChild):a.innerHTML=t.children,t.dom=a.firstChild,t.domSize=a.childNodes.length;for(var o=s(e).createDocumentFragment(),c;c=a.firstChild;)o.appendChild(c);N(e,o,r)}function _(e,t,n,r,i){var a=s(e).createDocumentFragment();if(t.children!=null){var o=t.children;f(a,o,0,o.length,n,null,r)}t.dom=a.firstChild,t.domSize=a.childNodes.length,N(e,a,i)}function v(e,t,n,r,i){var a=t.tag,o=t.attrs,l=t.is;r=c(t)||r;var u=r?l?s(e).createElementNS(r,a,{is:l}):s(e).createElementNS(r,a):l?s(e).createElement(a,{is:l}):s(e).createElement(a);if(t.dom=u,o!=null&&re(t,o,r),N(e,u,i),!P(t)&&t.children!=null){var d=t.children;f(u,d,0,d.length,n,null,r),t.tag===`select`&&o!=null&&ae(t,o)}}function y(e,t){var r;if(typeof e.tag.view==`function`){if(e.state=Object.create(e.tag),r=e.state.view,r.$$reentrantLock$$!=null)return;r.$$reentrantLock$$=!0}else{if(e.state=void 0,r=e.tag,r.$$reentrantLock$$!=null)return;r.$$reentrantLock$$=!0,e.state=e.tag.prototype!=null&&typeof e.tag.prototype.view==`function`?new e.tag(e):e.tag(e)}if(H(e.state,e,t),e.attrs!=null&&H(e.attrs,e,t),e.instance=n.normalize(u.call(e.state.view,e)),e.instance===e)throw Error(`A view cannot return the vnode it received as argument`);r.$$reentrantLock$$=null}function b(e,t,n,r,i){y(t,n),t.instance==null?t.domSize=0:(p(e,t.instance,n,r,i),t.dom=t.instance.dom,t.domSize=t.instance.domSize)}function x(e,t,n,r,i,a){if(!(t===n||t==null&&n==null))if(t==null||t.length===0)f(e,n,0,n.length,r,i,a);else if(n==null||n.length===0)F(e,t,0,t.length);else{var o=t[0]!=null&&t[0].key!=null,s=n[0]!=null&&n[0].key!=null,c=0,l=0;if(!o)for(;l<t.length&&t[l]==null;)l++;if(!s)for(;c<n.length&&n[c]==null;)c++;if(o!==s)F(e,t,l,t.length),f(e,n,c,n.length,r,i,a);else if(s){for(var u=t.length-1,d=n.length-1,m,h,g,_,v,y;u>=l&&d>=c&&(_=t[u],v=n[d],_.key===v.key);)_!==v&&S(e,_,v,r,i,a),v.dom!=null&&(i=v.dom),u--,d--;for(;u>=l&&d>=c&&(h=t[l],g=n[c],h.key===g.key);)l++,c++,h!==g&&S(e,h,g,r,j(t,l,i),a);for(;u>=l&&d>=c&&!(c===d||h.key!==v.key||_.key!==g.key);)y=j(t,l,i),M(e,_,y),_!==g&&S(e,_,g,r,y,a),++c<=--d&&M(e,h,i),h!==v&&S(e,h,v,r,i,a),v.dom!=null&&(i=v.dom),l++,u--,_=t[u],v=n[d],h=t[l],g=n[c];for(;u>=l&&d>=c&&_.key===v.key;)_!==v&&S(e,_,v,r,i,a),v.dom!=null&&(i=v.dom),u--,d--,_=t[u],v=n[d];if(c>d)F(e,t,l,u+1);else if(l>u)f(e,n,c,d+1,r,i,a);else{var b=i,x=d-c+1,C=Array(x),w=0,T=0,E=2147483647,D=0,m,k;for(T=0;T<x;T++)C[T]=-1;for(T=d;T>=c;T--){m??=O(t,l,u+1),v=n[T];var N=m[v.key];N!=null&&(E=N<E?N:-1,C[T-c]=N,_=t[N],t[N]=null,_!==v&&S(e,_,v,r,i,a),v.dom!=null&&(i=v.dom),D++)}if(i=b,D!==u-l+1&&F(e,t,l,u+1),D===0)f(e,n,c,d+1,r,i,a);else if(E===-1)for(k=A(C),w=k.length-1,T=d;T>=c;T--)g=n[T],C[T-c]===-1?p(e,g,r,a,i):k[w]===T-c?w--:M(e,g,i),g.dom!=null&&(i=n[T].dom);else for(T=d;T>=c;T--)g=n[T],C[T-c]===-1&&p(e,g,r,a,i),g.dom!=null&&(i=n[T].dom)}}else{var P=t.length<n.length?t.length:n.length;for(c=c<l?c:l;c<P;c++)h=t[c],g=n[c],!(h===g||h==null&&g==null)&&(h==null?p(e,g,r,a,j(t,c+1,i)):g==null?L(e,h):S(e,h,g,r,j(t,c+1,i),a));t.length>P&&F(e,t,c,t.length),n.length>P&&f(e,n,c,n.length,r,i,a)}}}function S(e,t,n,r,i,a){var o=t.tag;if(o===n.tag&&t.is===n.is){if(n.state=t.state,n.events=t.events,W(n,t))return;if(typeof o==`string`)switch(n.attrs!=null&&U(n.attrs,n,r),o){case`#`:C(t,n);break;case`<`:w(e,t,n,a,i);break;case`[`:T(e,t,n,r,i,a);break;default:E(t,n,r,a)}else D(e,t,n,r,i,a)}else L(e,t),p(e,n,r,a,i)}function C(e,t){e.children.toString()!==t.children.toString()&&(e.dom.nodeValue=t.children),t.dom=e.dom}function w(e,t,n,r,i){t.children===n.children?(n.dom=t.dom,n.domSize=t.domSize):(te(e,t),g(e,n,r,i))}function T(e,t,n,r,i,a){x(e,t.children,n.children,r,i,a);var o=0,s=n.children;if(n.dom=null,s!=null)for(var c=0;c<s.length;c++){var l=s[c];l!=null&&l.dom!=null&&(n.dom??=l.dom,o+=l.domSize||1)}n.domSize=o}function E(e,t,n,r){var i=t.dom=e.dom;r=c(t)||r,(e.attrs!=t.attrs||t.attrs!=null&&!a.get(t.attrs))&&oe(t,e.attrs,t.attrs,r),P(t)||x(i,e.children,t.children,n,null,r)}function D(e,t,r,i,a,o){if(r.instance=n.normalize(u.call(r.state.view,r)),r.instance===r)throw Error(`A view cannot return the vnode it received as argument`);U(r.state,r,i),r.attrs!=null&&U(r.attrs,r,i),r.instance==null?(t.instance!=null&&L(e,t.instance),r.domSize=0):(t.instance==null?p(e,r.instance,i,o,a):S(e,t.instance,r.instance,i,a,o),r.dom=r.instance.dom,r.domSize=r.instance.domSize)}function O(e,t,n){for(var r=Object.create(null);t<n;t++){var i=e[t];if(i!=null){var a=i.key;a!=null&&(r[a]=t)}}return r}var k=[];function A(e){for(var t=[0],n=0,r=0,i=0,a=k.length=e.length,i=0;i<a;i++)k[i]=e[i];for(var i=0;i<a;++i)if(e[i]!==-1){var o=t[t.length-1];if(e[o]<e[i]){k[i]=o,t.push(i);continue}for(n=0,r=t.length-1;n<r;){var s=(n>>>1)+(r>>>1)+(n&r&1);e[t[s]]<e[i]?n=s+1:r=s}e[i]<e[t[n]]&&(n>0&&(k[i]=t[n-1]),t[n]=i)}for(n=t.length,r=t[n-1];n-- >0;)t[n]=r,r=k[r];return k.length=0,t}function j(e,t,n){for(;t<e.length;t++)if(e[t]!=null&&e[t].dom!=null)return e[t].dom;return n}function M(e,t,n){if(t.dom!=null){var r;if(t.domSize==null||t.domSize===1)r=t.dom;else{r=s(e).createDocumentFragment();for(var a of i(t))r.appendChild(a)}N(e,r,n)}}function N(e,t,n){n==null?e.appendChild(t):e.insertBefore(t,n)}function P(e){if(e.attrs==null||e.attrs.contenteditable==null&&e.attrs.contentEditable==null)return!1;var t=e.children;if(t!=null&&t.length===1&&t[0].tag===`<`){var n=t[0].children;e.dom.innerHTML!==n&&(e.dom.innerHTML=n)}else if(t!=null&&t.length!==0)throw Error(`Child node of a contenteditable must be trusted.`);return!0}function F(e,t,n,r){for(var i=n;i<r;i++){var a=t[i];a!=null&&L(e,a)}}function ee(e,t,n,a){var s=t.state,c=u.call(n.onbeforeremove,t);if(c!=null){var d=o;for(var f of i(t))r.set(f,d);a.v++,Promise.resolve(c).finally(function(){l(t,s),I(e,t,a)})}}function I(e,t,n){--n.v===0&&(ne(t),te(e,t))}function L(e,t){var n={v:1};typeof t.tag!=`string`&&typeof t.state.onbeforeremove==`function`&&ee(e,t,t.state,n),t.attrs&&typeof t.attrs.onbeforeremove==`function`&&ee(e,t,t.attrs,n),I(e,t,n)}function te(e,t){if(t.dom!=null)if(t.domSize==null||t.domSize===1)e.removeChild(t.dom);else for(var n of i(t))e.removeChild(n)}function ne(e){if(typeof e.tag!=`string`&&typeof e.state.onremove==`function`&&u.call(e.state.onremove,e),e.attrs&&typeof e.attrs.onremove==`function`&&u.call(e.attrs.onremove,e),typeof e.tag!=`string`)e.instance!=null&&ne(e.instance);else{e.events!=null&&(e.events._=null);var t=e.children;if(Array.isArray(t))for(var n=0;n<t.length;n++){var r=t[n];r!=null&&ne(r)}}}function re(e,t,n){for(var r in t)R(e,r,null,t[r],n)}function R(e,t,n,r,i){if(!(t===`key`||r==null||ce(t)||n===r&&!se(e,t)&&typeof r!=`object`)){if(t[0]===`o`&&t[1]===`n`)return le(e,t,r);if(t.slice(0,6)===`xlink:`)e.dom.setAttributeNS(`http://www.w3.org/1999/xlink`,t.slice(6),r);else if(t===`style`)B(e.dom,n,r);else if(z(e,t,i)){if(t===`value`){if((e.tag===`input`||e.tag===`textarea`)&&e.dom.value===``+r||e.tag===`select`&&n!==null&&e.dom.value===``+r||e.tag===`option`&&n!==null&&e.dom.value===``+r)return;if(e.tag===`input`&&e.attrs.type===`file`&&``+r!=``){console.error("`value` is read-only on file inputs!");return}}e.tag===`input`&&t===`type`?e.dom.setAttribute(t,r):e.dom[t]=r}else typeof r==`boolean`?r?e.dom.setAttribute(t,``):e.dom.removeAttribute(t):e.dom.setAttribute(t===`className`?`class`:t,r)}}function ie(e,t,n,r){if(!(t===`key`||n==null||ce(t)))if(t[0]===`o`&&t[1]===`n`)le(e,t,void 0);else if(t===`style`)B(e.dom,n,null);else if(z(e,t,r)&&t!==`className`&&t!==`title`&&!(t===`value`&&(e.tag===`option`||e.tag===`select`&&e.dom.selectedIndex===-1&&e.dom===d(e.dom)))&&!(e.tag===`input`&&t===`type`))e.dom[t]=null;else{var i=t.indexOf(`:`);i!==-1&&(t=t.slice(i+1)),n!==!1&&e.dom.removeAttribute(t===`className`?`class`:t)}}function ae(e,t){if(`value`in t)if(t.value===null)e.dom.selectedIndex!==-1&&(e.dom.value=null);else{var n=``+t.value;(e.dom.value!==n||e.dom.selectedIndex===-1)&&(e.dom.value=n)}`selectedIndex`in t&&R(e,`selectedIndex`,null,t.selectedIndex,void 0)}function oe(e,t,n,r){var i;if(t!=null)for(var o in t===n&&!a.has(n)&&console.warn(`Don't reuse attrs object, use new object for every redraw, this will throw in next major`),t)(i=t[o])!=null&&(n==null||n[o]==null)&&ie(e,o,i,r);if(n!=null)for(var o in n)R(e,o,t&&t[o],n[o],r)}function se(e,t){return t===`value`||t===`checked`||t===`selectedIndex`||t===`selected`&&(e.dom===d(e.dom)||e.tag===`option`&&e.dom.parentNode===d(e.dom))}function ce(e){return e===`oninit`||e===`oncreate`||e===`onupdate`||e===`onremove`||e===`onbeforeremove`||e===`onbeforeupdate`}function z(e,t,n){return n===void 0&&(e.tag.indexOf(`-`)>-1||e.is||t!==`href`&&t!==`list`&&t!==`form`&&t!==`width`&&t!==`height`)&&t in e.dom}function B(e,t,n){if(t!==n)if(n==null)e.style=``;else if(typeof n!=`object`)e.style=n;else if(typeof t!=`object`||!t)for(var r in e.style=``,n){var i=n[r];i!=null&&(r.includes(`-`)?e.style.setProperty(r,String(i)):e.style[r]=String(i))}else{for(var r in t)t[r]!=null&&n[r]==null&&(r.includes(`-`)?e.style.removeProperty(r):e.style[r]=``);for(var r in n){var i=n[r];i!=null&&(i=String(i))!==String(t[r])&&(r.includes(`-`)?e.style.setProperty(r,i):e.style[r]=i)}}}function V(){this._=t}V.prototype=Object.create(null),V.prototype.handleEvent=function(e){var t=this[`on`+e.type],n;typeof t==`function`?n=t.call(e.currentTarget,e):typeof t.handleEvent==`function`&&t.handleEvent(e);var r=this;r._!=null&&(e.redraw!==!1&&(0,r._)(),n!=null&&typeof n.then==`function`&&Promise.resolve(n).then(function(){r._!=null&&e.redraw!==!1&&(0,r._)()})),n===!1&&(e.preventDefault(),e.stopPropagation())};function le(e,n,r){if(e.events!=null){if(e.events._=t,e.events[n]===r)return;r!=null&&(typeof r==`function`||typeof r==`object`)?(e.events[n]??e.dom.addEventListener(n.slice(2),e.events,!1),e.events[n]=r):(e.events[n]!=null&&e.dom.removeEventListener(n.slice(2),e.events,!1),e.events[n]=void 0)}else r!=null&&(typeof r==`function`||typeof r==`object`)&&(e.events=new V,e.dom.addEventListener(n.slice(2),e.events,!1),e.events[n]=r)}function H(e,t,n){typeof e.oninit==`function`&&u.call(e.oninit,t),typeof e.oncreate==`function`&&n.push(u.bind(e.oncreate,t))}function U(e,t,n){typeof e.onupdate==`function`&&n.push(u.bind(e.onupdate,t))}function W(e,t){do{if(e.attrs!=null&&typeof e.attrs.onbeforeupdate==`function`){var n=u.call(e.attrs.onbeforeupdate,e,t);if(n!==void 0&&!n)break}if(typeof e.tag!=`string`&&typeof e.state.onbeforeupdate==`function`){var n=u.call(e.state.onbeforeupdate,e,t);if(n!==void 0&&!n)break}return!1}while(!1);return e.dom=t.dom,e.domSize=t.domSize,e.instance=t.instance,e.attrs=t.attrs,e.children=t.children,e.text=t.text,!0}var G;return function(e,r,i){if(!e)throw TypeError(`DOM element being rendered to does not exist.`);if(G!=null&&e.contains(G))throw TypeError(`Node is currently being rendered to and thus is locked.`);var a=t,s=G,c=[],l=d(e),u=e.namespaceURI;G=e,t=typeof i==`function`?i:void 0,o={};try{e.vnodes??(e.textContent=``),r=n.normalizeChildren(Array.isArray(r)?r:[r]),x(e,e.vnodes,r,c,null,u===`http://www.w3.org/1999/xhtml`?void 0:u),e.vnodes=r,l!=null&&d(e)!==l&&typeof l.focus==`function`&&l.focus();for(var f=0;f<c.length;f++)c[f]()}finally{t=a,G=s}}}})),C=c(((e,t)=>{t.exports=S()()})),w=c(((e,t)=>{var n=d();t.exports=function(e,t,r){var i=[],a=!1,o=-1;function s(){for(o=0;o<i.length;o+=2)try{e(i[o],n(i[o+1]),c)}catch(e){r.error(e)}o=-1}function c(){a||(a=!0,t(function(){a=!1,s()}))}c.sync=s;function l(t,r){if(r!=null&&r.view==null&&typeof r!=`function`)throw TypeError(`m.mount expects a component, not a vnode.`);var a=i.indexOf(t);a>=0&&(i.splice(a,2),a<=o&&(o-=2),e(t,[])),r!=null&&(i.push(t,r),e(t,n(r),c))}return{mount:l,redraw:c}}})),T=c(((e,t)=>{var n=C();t.exports=w()(n,typeof requestAnimationFrame<`u`?requestAnimationFrame:null,typeof console<`u`?console:null)})),E=c(((e,t)=>{t.exports=function(e){if(Object.prototype.toString.call(e)!==`[object Object]`)return``;var t=[];for(var n in e)r(n,e[n]);return t.join(`&`);function r(e,n){if(Array.isArray(n))for(var i=0;i<n.length;i++)r(e+`[`+i+`]`,n[i]);else if(Object.prototype.toString.call(n)===`[object Object]`)for(var i in n)r(e+`[`+i+`]`,n[i]);else t.push(encodeURIComponent(e)+(n!=null&&n!==``?`=`+encodeURIComponent(n):``))}}})),D=c(((e,t)=>{var n=E();t.exports=function(e,t){if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw SyntaxError(`Template parameter names must be separated by either a '/', '-', or '.'.`);if(t==null)return e;var r=e.indexOf(`?`),i=e.indexOf(`#`),a=i<0?e.length:i,o=r<0?a:r,s=e.slice(0,o),c={};Object.assign(c,t);var l=s.replace(/:([^\/\.-]+)(\.{3})?/g,function(e,n,r){return delete c[n],t[n]==null?e:r?t[n]:encodeURIComponent(String(t[n]))}),u=l.indexOf(`?`),d=l.indexOf(`#`),f=d<0?l.length:d,p=u<0?f:u,m=l.slice(0,p);r>=0&&(m+=e.slice(r,a)),u>=0&&(m+=(r<0?`?`:`&`)+l.slice(u,f));var h=n(c);return h&&(m+=(r<0&&u<0?`?`:`&`)+h),i>=0&&(m+=e.slice(i)),d>=0&&(m+=(i<0?``:`&`)+l.slice(d)),m}})),O=c(((e,t)=>{var n=D(),r=p();t.exports=function(e,t){function i(e){return new Promise(e)}function a(t,i){return new Promise(function(a,s){t=n(t,i.params);var c=i.method==null?`GET`:i.method.toUpperCase(),l=i.body,u=(i.serialize==null||i.serialize===JSON.serialize)&&!(l instanceof e.FormData||l instanceof e.URLSearchParams),d=i.responseType||(typeof i.extract==`function`?``:`json`),f=new e.XMLHttpRequest,p=!1,m=!1,h=f,g,_=f.abort;for(var v in f.abort=function(){p=!0,_.call(this)},f.open(c,t,i.async!==!1,typeof i.user==`string`?i.user:void 0,typeof i.password==`string`?i.password:void 0),u&&l!=null&&!o(i,`content-type`)&&f.setRequestHeader(`Content-Type`,`application/json; charset=utf-8`),typeof i.deserialize!=`function`&&!o(i,`accept`)&&f.setRequestHeader(`Accept`,`application/json, text/*`),i.withCredentials&&(f.withCredentials=i.withCredentials),i.timeout&&(f.timeout=i.timeout),f.responseType=d,i.headers)r.call(i.headers,v)&&f.setRequestHeader(v,i.headers[v]);f.onreadystatechange=function(e){if(!p&&e.target.readyState===4)try{var n=e.target.status>=200&&e.target.status<300||e.target.status===304||/^file:\/\//i.test(t),r=e.target.response,o;if(d===`json`){if(!e.target.responseType&&typeof i.extract!=`function`)try{r=JSON.parse(e.target.responseText)}catch{r=null}}else (!d||d===`text`)&&(r??=e.target.responseText);if(typeof i.extract==`function`?(r=i.extract(e.target,i),n=!0):typeof i.deserialize==`function`&&(r=i.deserialize(r)),n){if(typeof i.type==`function`)if(Array.isArray(r))for(var c=0;c<r.length;c++)r[c]=new i.type(r[c]);else r=new i.type(r);a(r)}else{var l=function(){try{o=e.target.responseText}catch{o=r}var t=Error(o);t.code=e.target.status,t.response=r,s(t)};f.status===0?setTimeout(function(){m||l()}):l()}}catch(e){s(e)}},f.ontimeout=function(e){m=!0;var t=Error(`Request timed out`);t.code=e.target.status,s(t)},typeof i.config==`function`&&(f=i.config(f,i,t)||f,f!==h&&(g=f.abort,f.abort=function(){p=!0,g.call(this)})),l==null?f.send():typeof i.serialize==`function`?f.send(i.serialize(l)):l instanceof e.FormData||l instanceof e.URLSearchParams?f.send(l):f.send(JSON.stringify(l))})}i.prototype=Promise.prototype,i.__proto__=Promise;function o(e,t){for(var n in e.headers)if(r.call(e.headers,n)&&n.toLowerCase()===t)return!0;return!1}return{request:function(e,n){typeof e==`string`?n??={}:(n=e,e=e.url);var r=a(e,n);if(n.background===!0)return r;var o=0;function s(){--o===0&&typeof t==`function`&&t()}return c(r);function c(e){var t=e.then;return e.constructor=i,e.then=function(){o++;var n=t.apply(e,arguments);return n.then(s,function(e){if(s(),o===0)throw e}),c(n)},e}}}}})),k=c(((e,t)=>{var n=T();t.exports=O()(typeof window<`u`?window:null,n.redraw)})),A=c(((e,t)=>{var n=/%(?:[0-7]|(?!c[01]|e0%[89]|ed%[ab]|f0%8|f4%[9ab])(?:c|d|(?:e|f[0-4]%[89ab])[\da-f]%[89ab])[\da-f]%[89ab])[\da-f]/gi;t.exports=function(e){return String(e).replace(n,decodeURIComponent)}})),j=c(((e,t)=>{var n=A();t.exports=function(e){if(e===``||e==null)return{};e.charAt(0)===`?`&&(e=e.slice(1));for(var t=e.split(`&`),r={},i={},a=0;a<t.length;a++){var o=t[a].split(`=`),s=n(o[0]),c=o.length===2?n(o[1]):``;c===`true`?c=!0:c===`false`&&(c=!1);var l=s.split(/\]\[?|\[/),u=i;s.indexOf(`[`)>-1&&l.pop();for(var d=0;d<l.length;d++){var f=l[d],p=l[d+1],m=p==``||!isNaN(parseInt(p,10));if(f===``){var s=l.slice(0,d).join();r[s]??(r[s]=Array.isArray(u)?u.length:0),f=r[s]++}else if(f===`__proto__`)break;if(d===l.length-1)u[f]=c;else{var h=Object.getOwnPropertyDescriptor(u,f);h!=null&&(h=h.value),h??(u[f]=h=m?[]:{}),u=h}}}return i}})),M=c(((e,t)=>{var n=j();t.exports=function(e){var t=e.indexOf(`?`),r=e.indexOf(`#`),i=r<0?e.length:r,a=t<0?i:t,o=e.slice(0,a).replace(/\/{2,}/g,`/`);return o?o[0]!==`/`&&(o=`/`+o):o=`/`,{path:o,params:t<0?{}:n(e.slice(t+1,i))}}})),N=c(((e,t)=>{var n=M();t.exports=function(e){var t=n(e),r=Object.keys(t.params),i=[],a=RegExp(`^`+t.path.replace(/:([^\/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|\[\]{}]/g,function(e,t,n){return t==null?`\\`+e:(i.push({k:t,r:n===`...`}),n===`...`?`(.*)`:n===`.`?`([^/]+)\\.`:`([^/]+)`+(n||``))})+`\\/?$`);return function(e){for(var n=0;n<r.length;n++)if(t.params[r[n]]!==e.params[r[n]])return!1;if(!i.length)return a.test(e.path);var o=a.exec(e.path);if(o==null)return!1;for(var n=0;n<i.length;n++)e.params[i[n].k]=i[n].r?o[n+1]:decodeURIComponent(o[n+1]);return!0}}})),P=c(((e,t)=>{var n=p(),r=/^(?:key|oninit|oncreate|onbeforeupdate|onupdate|onbeforeremove|onremove)$/;t.exports=function(e,t){var i={};if(t!=null)for(var a in e)n.call(e,a)&&!r.test(a)&&t.indexOf(a)<0&&(i[a]=e[a]);else for(var a in e)n.call(e,a)&&!r.test(a)&&(i[a]=e[a]);return i}})),F=c(((e,t)=>{var n=d(),r=g(),i=A(),a=D(),o=M(),s=N(),c=P();t.exports=function(e,t){var l=Promise.resolve(),u=!1,d=!1,f=!1,p,m,h,g,_,v,y,b,x={onremove:function(){d=f=!1,e.removeEventListener(`popstate`,w,!1)},view:function(){var e=n(_,v.key,v);return g?g.render(e):[e]}},S=T.SKIP={};function C(){u=!1;var n=e.location.hash;T.prefix[0]!==`#`&&(n=e.location.search+n,T.prefix[0]!==`?`&&(n=e.location.pathname+n,n[0]!==`/`&&(n=`/`+n)));var r=i(n).slice(T.prefix.length),a=o(r);Object.assign(a.params,e.history.state);function s(e){console.error(e),T.set(h,null,{replace:!0})}c(0);function c(e){for(;e<m.length;e++)if(m[e].check(a)){var n=m[e].component,i=m[e].route,o=n,u=b=function(i){if(u===b){if(i===S)return c(e+1);_=i!=null&&(typeof i.view==`function`||typeof i==`function`)?i:`div`,v=a.params,y=r,b=null,g=n.render?n:null,f?t.redraw():(f=!0,t.mount(p,x))}};n.view||typeof n==`function`?(n={},u(o)):n.onmatch?l.then(function(){return n.onmatch(a.params,r,i)}).then(u,r===h?null:s):u();return}if(r===h)throw Error(`Could not resolve default route `+h+`.`);T.set(h,null,{replace:!0})}}function w(){u||(u=!0,setTimeout(C))}function T(t,n,r){if(!t)throw TypeError(`DOM element being rendered to does not exist.`);if(m=Object.keys(r).map(function(e){if(e[0]!==`/`)throw SyntaxError(`Routes must start with a '/'.`);if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw SyntaxError(`Route parameter names must be separated with either '/', '.', or '-'.`);return{route:e,component:r[e],check:s(e)}}),h=n,n!=null){var i=o(n);if(!m.some(function(e){return e.check(i)}))throw ReferenceError(`Default route doesn't match any known routes.`)}p=t,e.addEventListener(`popstate`,w,!1),d=!0,C()}return T.set=function(t,n,r){if(b!=null&&(r||={},r.replace=!0),b=null,t=a(t,n),d){w();var i=r?r.state:null,o=r?r.title:null;r&&r.replace?e.history.replaceState(i,o,T.prefix+t):e.history.pushState(i,o,T.prefix+t)}else e.location.href=T.prefix+t},T.get=function(){return y},T.prefix=`#!`,T.Link={view:function(e){var t=r(e.attrs.selector||`a`,c(e.attrs,[`options`,`params`,`selector`,`onclick`]),e.children),n,i,o;return(t.attrs.disabled=!!t.attrs.disabled)?(t.attrs.href=null,t.attrs[`aria-disabled`]=`true`):(n=e.attrs.options,i=e.attrs.onclick,o=a(t.attrs.href,e.attrs.params),t.attrs.href=T.prefix+o,t.attrs.onclick=function(e){var t;typeof i==`function`?t=i.call(e.currentTarget,e):typeof i!=`object`||!i||typeof i.handleEvent==`function`&&i.handleEvent(e),t!==!1&&!e.defaultPrevented&&(e.button===0||e.which===0||e.which===1)&&(!e.currentTarget.target||e.currentTarget.target===`_self`)&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&!e.altKey&&(e.preventDefault(),e.redraw=!1,T.set(o,null,n))}),t}},T.param=function(e){return v&&e!=null?v[e]:v},T}})),ee=c(((e,t)=>{var n=T();t.exports=F()(typeof window<`u`?window:null,n)})),I=u(c(((e,t)=>{var n=y(),r=T(),i=k(),a=ee(),o=function(){return n.apply(this,arguments)};o.m=n,o.trust=n.trust,o.fragment=n.fragment,o.Fragment=`[`,o.mount=r.mount,o.route=a,o.render=C(),o.redraw=r.redraw,o.request=i.request,o.parseQueryString=j(),o.buildQueryString=E(),o.parsePathname=M(),o.buildPathname=D(),o.vnode=d(),o.censor=P(),o.domFor=x(),t.exports=o}))(),1);function L(e,t){return(0,I.default)(R,e,t)}function te(e,t){return(0,I.default)(ie,e,t)}function ne(e,t){return(0,I.default)(ae,e,t)}function re(e,t){return(0,I.default)(oe,e,t)}var R=()=>({view:({attrs:{start:e,end:t,...n},children:r})=>(0,I.default)(`div.twk-bar`,n,[e?(0,I.default)(ie,e):null,r,t?(0,I.default)(ae,t):null])}),ie=()=>({view:({attrs:e,children:t})=>(0,I.default)(`div.twk-bar-start`,e,t)}),ae=()=>({view:({attrs:e,children:t})=>(0,I.default)(`div.twk-bar-end`,e,t)}),oe=()=>({view:({attrs:e,children:t})=>(0,I.default)(`div.twk-bar-content`,e,t)});function se(e,t){return(0,I.default)(ce,e,t)}var ce=()=>({view:e=>{let t=e.attrs;return(0,I.default)(`div.twk-grid`,{style:{gridTemplateColumns:typeof t.columns==`number`?`repeat(${t.columns}, 1fr)`:t.columns||`none`,gridTemplateRows:typeof t.rows==`number`?`repeat(${t.rows}, 1fr)`:t.rows||`none`,...t.style||{}}},e.children)}});function z(e){return typeof e==`string`}function B(e){return typeof e==`number`}function V(e){return typeof e==`function`}function le(e){return Array.isArray(e)}function H(e){return typeof e==`object`&&!!e&&!le(e)}function U(e,...t){return V(e)?e(...t):null}function W(e,t,n){if(e!=null){if(t!=null&&e<t)return t;if(n!=null&&e>n)return n}return e}function G(){if(arguments.length===1&&z(arguments[0]))return arguments[0];if(arguments.length===0)return``;let e=[],t=n=>{if(n){if(typeof n==`function`){t(n());return}if(typeof n==`string`){n&&e.push(n);return}if(Array.isArray(n)){for(let e of n)t(e);return}if(typeof n==`object`)for(let t in n){let r=n[t];(typeof r==`function`?r():r)&&e.push(t)}}};for(let e of arguments)t(e);return e.join(` `)}function ue(e,t,n){for(;e.length<t;)e=`${n}${e}`;return e}function de(e){let t=0,n=0;return`touches`in e?(t=e.touches.item(0).pageX,n=e.touches.item(0).pageY):(t=e.pageX,n=e.pageY),[t,n]}function fe(e,t,n){t||=e.target;let r=t.getBoundingClientRect(),i=window.pageXOffset||document.documentElement.scrollLeft,a=window.pageYOffset||document.documentElement.scrollTop,o=t.clientWidth,s=t.clientHeight,[c,l]=de(e);n&&(c+=n[0],l+=n[1]);let u=c-i-r.left,d=l-a-r.top;return{width:o,height:s,x:u,y:d,normalizedX:u/o,normalizedY:d/s}}function pe({onStart:e,onMove:t,onEnd:n}){let r={target:null,activate:i=>{r.deactivate(),r.target=i.target,e&&e(i),t&&(document.addEventListener(`mousemove`,t,{passive:!1}),document.addEventListener(`touchmove`,t,{passive:!1})),n&&(document.addEventListener(`mouseup`,n),document.addEventListener(`touchend`,n),document.addEventListener(`touchcancel`,n))},deactivate:()=>{r.target=null,t&&(document.removeEventListener(`mousemove`,t),document.removeEventListener(`touchmove`,t)),n&&(document.removeEventListener(`mouseup`,n),document.removeEventListener(`touchend`,n),document.removeEventListener(`touchcancel`,n))},onStart:e,onMove:t,onEnd:n};return r}function me(e,t,n){return new Promise(r=>{let i=!1,a=n=>{i=!0,e.removeEventListener(t,a),r(!0)};e.addEventListener(t,a),setTimeout(()=>{e.removeEventListener(t,a),i||(i=!0,r(!1))},n)})}function he(e,t){return(0,I.default)(ge,e,t)}var ge=()=>{let e,t,n,r,i=!1;function a(t){let i=t.attrs;e=i.title||``,n=!!i.collapsible,r??=!!i.collapsed}function o(){i=!0,r=!r}function s(){return!t&&!e&&!n?null:(0,I.default)(`div.twk-group-title`,{onclick:n?o:void 0},t,e)}return{oninit:a,onupdate:a,view:({attrs:a,children:o})=>(e=a.title||``,t=a.icon||``,n=!!a.collapsible,r??=!!a.collapsed,(0,I.default)(`div.twk-group`,{class:G({"twk-group-collapsible":!!n,"twk-group-collapsed":!!r}),style:a.style},I.default.fragment({},[s()]),r?null:(0,I.default)(_e,{animate:i},o)))}},_e=()=>({onbeforeremove:async({dom:e})=>{e.classList.remove(`enter`),e.classList.add(`leave`),await me(e,`animationstart`,50)&&await me(e,`animationend`,2e3)},view:({children:e,attrs:t})=>(0,I.default)(`div.twk-group-content`,{class:G({animate:t.animate,enter:!0})},e)});function ve(e,t){return(0,I.default)(ye,e,t)}var ye=()=>({view:({attrs:{flex:e,flow:t,style:n,...r},children:i})=>(0,I.default)(`div.twk-flex`,{style:{flex:e??`auto`,flexFlow:t||`column nowrap`,...n||{}},...r},i)});function be(e,t){return(0,I.default)(we,e,t)}function xe(e,t){return(0,I.default)(Te,e,t)}function Se(e,t){return(0,I.default)(Ee,e,t)}function Ce(e,t){return(0,I.default)(De,e,t)}var we=()=>({view:({attrs:{header:e,footer:t,...n},children:r})=>(0,I.default)(`div.twk-section`,n,[e?(0,I.default)(Te,e):null,r,t?(0,I.default)(Ee,t):null])}),Te=()=>({view:({attrs:e,children:t})=>(0,I.default)(`header.twk-section-header`,e,t)}),Ee=()=>({view:({attrs:e,children:t})=>(0,I.default)(`footer.twk-section-footer`,e,t)}),De=()=>({view:({attrs:e,children:t})=>(0,I.default)(`main.twk-section-content`,e,t)});function K(e){return Me(e,Oe(e))}function q(e,t){let n=je(e,t);return ke(e,n),n}function Oe(e){return e.binding?e.binding.get(e.value,e.field):e.value==null?null:e.field==null?e.value:e.value[e.field]}function ke(e,t){if(e.binding){e.binding.set?.(t,e.value,e.field);return}if(e.value!=null){if(e.field){if(!Ae(e.value,e.field)){console.warn(`Cannot write value to control model. Property "${String(e.field)}" is not writeable.`);return}e.value[e.field]=t;return}e.value=t}}function Ae(e,t){let n=Object.getOwnPropertyDescriptor(e,t);return!n||!!n.writable||!!n.set}function je(e,t){return e.adapter?e.adapter.fromControl(t):t}function Me(e,t){return e.adapter?e.adapter.toControl(t):t}function Ne(e){return typeof e==`object`&&!!e&&`tag`in e}function Pe(e,t){return Array.isArray(e)?e.map((e,n,r)=>Ne(e)?t(e,n,r):e):Ne(e)?t(e,0,[e]):e}function Fe(e){return e==null?null:typeof e==`function`?e():Array.isArray(e)?e.map(e=>{if(Ie(e)){let{component:t,attributes:n,children:r}=e;return(0,I.default)(t,n,Fe(r||[]))}return e}):e}function Ie(e){return typeof e==`object`&&!!e&&`component`in e&&`attributes`in e}function Le(e){return()=>{let t;return arguments.length===1?t=arguments[0]||{}:arguments.length>1?(t=arguments[1]||{},t.label=arguments[0]):t={},(0,I.default)(e,t)}}function Re(e,t){return{get:()=>e[t],set:n=>e[t]=n}}var ze=I.default;function Be(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(n.classList.add(`tweak-ui`),!t)I.default.mount(n,null);else if(Array.isArray(t))I.default.mount(n,{view:()=>t});else if(typeof t==`function`){let e=Kn.build(t);I.default.mount(n,{view:()=>Fe(e)})}else I.default.mount(n,t)}function Ve(e){let t=typeof e==`string`?document.querySelector(e):e;I.default.mount(t,null)}function He(){I.default.redraw()}function Ue(e,t){return(0,I.default)(Ke,e,t)}function We(e,t){return(0,I.default)(Ge,e,t)}var Ge=e=>({view:({attrs:e,children:t})=>ze(`div`,{...e,class:G({fluid:!!e.fluid},e.class)},t)}),Ke=()=>{let e=!1,t=0,n,r,i,a,o,s=null,c=null;function l(e,t,s,c){f(),e.stopPropagation(),n=e,r=s.dom?.getBoundingClientRect(),i=c.dom?.getBoundingClientRect(),a=s.dom,o=c.dom,window.addEventListener(`mousemove`,u),window.addEventListener(`mouseup`,f);let l=a.parentElement;l&&l.classList.add(`dragging`)}function u(c){if(!r||!i||!n||!a||!o)return;s??=d();let l=e?c.clientX-n.clientX:c.clientY-n.clientY,u=e?r.width:r.height,f=u+(e?i.width:i.height),p=Math.max(t,Math.min(u+l,f-t)),m=f-p,h=p/s*100,g=m/s*100;a.style.flex=`0 0 ${h}%`,o.style.flex=`0 0 ${g}%`}function d(){if(!c)return 0;let t=0;for(let n=0;n<c.children.length;n++){let r=c.children[n],i=r.getBoundingClientRect(),a=e?i.width:i.height;t+=a,r.classList.contains(`fluid`)?r.style.flex=`1`:r.style.flex=`0 0 ${a}px`}return t}function f(){let e=a?.parentElement;e&&e.classList.remove(`dragging`),a=null,o=null,r=null,i=null,n=null,s=null,window.removeEventListener(`mousemove`,u),window.removeEventListener(`mouseup`,f),d()}return{oncreate:({dom:e})=>{c=e},view:({attrs:{style:n,flow:r,minSize:i,...a},children:o})=>(e=r===`row`,t=i=Math.max(i||16,0),queueMicrotask(d),(0,I.default)(`div.twk-split-pane`,{...a,class:G({"twk-split-pane-h":e,"twk-split-pane-v":!e}),style:{...n||{},display:`flex`,flexDirection:e?`row`:`column`}},Pe(o,(t,n,r)=>t?[t,r[n+1]?(0,I.default)(`div.twk-split-gutter`,{class:G({"twk-split-gutter-h":e,"twk-split-gutter-v":!e}),onmousedown:e=>l(e,n,t,r[n+1])}):null]:null)))}},qe=Symbol(`tabsHost`),Je=()=>{let e,t;return{oninit:n=>{if(e=n.attrs[qe],t=n,!e)throw Error(`TabPane must be used inside a Tabs component`);e.attach(n)},onremove:()=>{e.detach(t)},view:({attrs:n,children:r})=>{let i=n.title,a=e.isActive(t);return[(0,I.default)(`button.twk-btn.twk-tab`,{class:G({active:a}),onclick:()=>e.activate(t)},i),a?(0,I.default)(`div.twk-tab-content`,{},r):null]}}};function Ye(e,t){return(0,I.default)(Xe,e,t)}var Xe=()=>{let e=[],t=null,n={attach(n){e.push(n),t||=n,n.attrs.active&&(t=n)},detach(n){let r=e.indexOf(n);r>=0&&e.splice(r,1),t===n&&(t=e[0]||null)},activate(e){t=e},isActive(e){return t===e}};function r(e){return Pe(e.children,e=>{if(!e)return e;if(e.tag===Je)return(0,I.default)(e.tag,{...e.attrs,[qe]:n},e.children);let t=e.attrs;return(0,I.default)(Je,{title:t.title||``,[qe]:n},(0,I.default)(e.tag,{...t,title:void 0},e.children))})}return{view:e=>(0,I.default)(`div.twk-tabs`,{class:G({"twk-tabs-vertical":!!e.attrs.vertical})},I.default.fragment({},[r(e)]))}};function Ze(e){return(0,I.default)(et,e)}function Qe(e,t,n=0,r=[]){for(let i of e){let e=t.isExpanded(i)??!1,a=t.nodeChildren(i);r.push({node:i,depth:n,expanded:e}),a&&e&&Qe(a,t,n+1,r)}return r}var $e=22,et=()=>{let e=0,t=null,n=0,r=[],i=null,a,o,s,c=[],l=null;return{onremove(){t?.disconnect()},oncreate({dom:e}){t=new ResizeObserver(e=>{let t=e[0].contentRect.height;t!==n&&(n=t,I.default.redraw())}),t.observe(e)},onupdate({attrs:{adapter:e}}){e.connect?.({scrollTo(e){let t=r.findIndex(t=>t.node===e);t>=0&&(l?.scrollTo({top:t*(o??$e),behavior:`instant`}),I.default.redraw())}})},view({attrs:t}){c=t.data,i=t.adapter,a=t.selectedId,o=t.rowHeight??$e,s=t.onSelect,r=Qe(c,i);let u=r.length,d=Math.ceil(n/o),f=Math.floor(e/o),p=Math.min(f+d,u),m=f*o,h=r.slice(f,p);return(0,I.default)(`div.twk-tree`,{style:t.style??{},oncreate:({dom:e})=>{l=e},onscroll:t=>{e=t.target.scrollTop}},(0,I.default)(`div.twk-tree-spacer`,{style:{height:`${u*o}px`}},(0,I.default)(`div.twk-tree-viewport`,{style:{"--twk-tree-row-height":`${o}px`,transform:`translateY(${m}px)`}},h.map(({node:e,depth:t,expanded:n})=>{let r=i.nodeId(e),c=r===a,l=i.nodeIcon(e,i.isExpanded(e)),u=!!i.nodeChildren(e);return(0,I.default)(`div.twk-tree-row`,{key:r,class:G({selected:c,expandable:u}),style:{height:`${o}px`,"--twk-tree-row-depth":t},onclick:()=>s?.(e)},[(0,I.default)(`span.twk-tree-toggle`,{class:G({expanded:n,expandable:u}),onclick:t=>{u&&(t.stopPropagation(),i.setExpanded(e,!n))}}),l?(0,I.default)(`span.twk-tree-icon`,{},l):null,(0,I.default)(`span.twk-tree-label`,{},i.nodeLabel(e))])}))))}}};function tt(e,t){return(0,I.default)(nt,e,t)}var nt=()=>{let e=null;return{oncreate:({dom:t})=>{e=t,e.addEventListener(`close`,He)},onremove:()=>{e?.removeEventListener(`close`,He),e=null},view:({attrs:t,children:n})=>(0,I.default)(`dialog.twk-dialog`,t,[e?.open?n:null])}};function rt(e,t){return(0,I.default)(it,e,t)}var it=()=>({view:({attrs:e,children:t})=>{let{square:n,block:r,class:i,style:a,...o}=e;return(0,I.default)(`button.twk-btn`,{type:`button`,class:G({"twk-btn-sq":!!n,"twk-btn-bl":!!r,"twk-btn-lg":!!e.large,"twk-btn-accent":!!e.accent},i),style:{flex:e.flex,...a||{}},...o},t)}});function at(e){return(0,I.default)(ot,e)}var ot=()=>({view:e=>(0,I.default)(`div.twk-divider`,e.attrs,e.children)});function st(e,t){let n={color:e.color,noGraph:e.noGraph,fractionDigits:e.fractionDigits,smoothing:e.smoothing??0,transform:ut,min:e.min??0,max:e.max??1,value:null,normalized:0,buffer:new Float32Array(t),head:0,count:0,index:0,sum:0,avg:0,minDeque:new Float32Array(t),maxDeque:new Float32Array(t),minIdx:new Uint32Array(t),maxIdx:new Uint32Array(t),minHead:0,minTail:0,maxHead:0,maxTail:0,minSeen:1/0,maxSeen:-1/0,sample:()=>dt(e.sample(),n)};switch(e.transform){case`log`:n.transform=ct;break;case`exp`:n.transform=lt;break;default:n.transform=ut;break}return n}function ct(e){return Math.log10(1+Math.max(0,e))}function lt(e){return Math.exp(e)-1}function ut(e){return e}function dt(e,t){if(t.value==null)t.value=e;else{let n=t.smoothing;t.value=n*t.value+(1-n)*e}let n=t.value,r=t.index++,i=t.buffer.length;if(t.count===i){let e=t.buffer[t.head];t.sum-=e}else t.count++;for(t.buffer[t.head]=n,t.head=(t.head+1)%i,t.sum+=n,t.avg=t.sum/t.count;t.minHead!==t.minTail;){let e=(t.minTail-1+i)%i;if(t.minDeque[e]<=n)break;t.minTail=e}for(t.minDeque[t.minTail]=n,t.minIdx[t.minTail]=r,t.minTail=(t.minTail+1)%i;t.minHead!==t.minTail&&t.minIdx[t.minHead]<=r-i;)t.minHead=(t.minHead+1)%i;for(;t.maxHead!==t.maxTail;){let e=(t.maxTail-1+i)%i;if(t.maxDeque[e]>=n)break;t.maxTail=e}for(t.maxDeque[t.maxTail]=n,t.maxIdx[t.maxTail]=r,t.maxTail=(t.maxTail+1)%i;t.maxHead!==t.maxTail&&t.maxIdx[t.maxHead]<=r-i;)t.maxHead=(t.maxHead+1)%i;let a=t.minHead===t.minTail?t.min:t.minDeque[t.minHead],o=t.maxHead===t.maxTail?t.max:t.maxDeque[t.maxHead];t.minSeen=a,t.maxSeen=o;let s=t.transform,c=s(n),l=s(Math.min(t.min,a)),u=s(Math.max(t.max,o))-l||1,d=(c-l)/u;return t.normalized=Math.max(0,Math.min(1,d)),t.normalized}function ft(e){let t=e.getContext(`webgl2`);if(!t)throw Error(`WebGL2 is not supported in this browser`);let n=gt(t),r=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,r),t.enableVertexAttribArray(0),t.enableVertexAttribArray(1),t.enableVertexAttribArray(2),t.vertexAttribPointer(0,1,t.FLOAT,!1,12,0),t.vertexAttribPointer(1,1,t.FLOAT,!1,12,4),t.vertexAttribPointer(2,1,t.FLOAT,!1,12,8);let i=t.getUniformLocation(n,`u_history`),a=t.getUniformLocation(n,`u_width`),o=t.getUniformLocation(n,`u_height`),s=t.getUniformLocation(n,`u_rowH`),c=t.getUniformLocation(n,`u_padding`),l=t.getUniformLocation(n,`u_color`),u=!1,d=100,f=0,p,m,h,g=[],_=[];function v(e){u=!!e.collapsed,f=e.rows.length,d=Math.max(e.historySize||100,100),m=new Float32Array(f*d),h=new Uint32Array(f),p=new Float32Array(f*d*3),_.length=f,g.length=f;for(let t=0;t<f;t++){_[t]=st(e.rows[t],d);let n=e.rows[t].color;g[t]=[parseInt(n.slice(1,3),16)/255,parseInt(n.slice(3,5),16)/255,parseInt(n.slice(5,7),16)/255]}}function y(t,n){e.width=t,e.height=n}function b(){for(let e=0;e<_.length;e++)h[e]=(h[e]+1)%d,m[e*d+h[e]]=_[e].sample()}function x(){for(let e=0;e<f;e++)for(let t=0;t<d;t++){let n=(h[e]+t+1)%d,r=(e*d+t)*3;p[r+0]=t,p[r+1]=u?0:e,p[r+2]=m[e*d+n]}t.viewport(0,0,e.width,e.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),t.useProgram(n),t.uniform1f(i,d),t.uniform1f(a,e.width),t.uniform1f(o,e.height),t.uniform1f(c,0),t.uniform1f(s,(e.height-0-f*0)/(u?1:f)),t.bindBuffer(t.ARRAY_BUFFER,r),t.bufferData(t.ARRAY_BUFFER,p,t.DYNAMIC_DRAW);for(let e=0;e<f;e++)_[e].noGraph||(t.uniform3fv(l,g[e]),t.drawArrays(t.LINE_STRIP,e*d,d))}return{resize:y,configure:v,update:b,render:x,sampler:e=>_[e],samplerCount:_.length}}var pt=`#version 300 es
+precision highp float;
+
+layout(location=0) in float a_x;
+layout(location=1) in float a_row;
+layout(location=2) in float a_value;
+
+uniform float u_history;
+uniform float u_width;
+uniform float u_height;
+uniform float u_padding;
+uniform float u_rowH;
+
+void main() {
+  float x = u_padding + (a_x / (u_history - 1.0)) * (u_width - 2.0 * u_padding);
+  float yBase = u_padding + a_row * (u_rowH + u_padding);
+  float y = yBase + u_rowH - 2.0 - a_value * (u_rowH - 4.0);
+
+  float ndcX = (x / u_width) * 2.0 - 1.0;
+  float ndcY = 1.0 - (y / u_height) * 2.0;
+
+  gl_Position = vec4(ndcX, ndcY, 0.0, 1.0);
+}
+`,mt=`#version 300 es
+precision highp float;
+uniform vec3 u_color;
+out vec4 outColor;
+void main(){
+  outColor = vec4(u_color,1.0);
+}
+`;function ht(e,t,n){let r=e.createShader(t);if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS))throw e.getShaderInfoLog(r);return r}function gt(e){let t=e.createProgram();return e.attachShader(t,ht(e,e.VERTEX_SHADER,pt)),e.attachShader(t,ht(e,e.FRAGMENT_SHADER,mt)),e.linkProgram(t),e.useProgram(t),t}function _t(e,t){return(0,I.default)(vt,e,t)}var vt=()=>{let e=null,t=null,n=null,r,i={rows:[]},a=[],o=null;function s(t){n=t,e?.observe(n),l(),o=setInterval(u,250)}function c(){e?.disconnect(),t!==null&&(cancelAnimationFrame(t),t=null),o!==null&&(clearInterval(o),o=null)}function l(){n?.isConnected?(r.update(),r.render(),t=requestAnimationFrame(l)):c()}function u(){bt(r,a)}function d({dom:t}){c();let n=t;if(!(n instanceof HTMLCanvasElement)){console.error(`Graph component must be a canvas element`);return}e=new ResizeObserver(e=>{let t=yt(e);t&&r&&r.resize(t.width,t.height)}),r=ft(n);for(let e=0;e<i.rows.length;e++)i.rows[e].color||=Ct(e);r.configure(i),s(n)}function f(){c()}function p(e){i={...e.attrs,rows:(e.attrs.rows||[]).map((e,t)=>({...e,name:e.name||`Row ${t+1}`,color:e.color||Ct(t)}))}}return{oninit:p,onupdate:p,onremove:()=>{c()},view:({attrs:{rowHeight:e,collapsed:t}})=>[(0,I.default)(`canvas.twk-graph`,{style:`width: 100%; height: ${(e||50)*(t?1:i.rows.length)*devicePixelRatio}px`,oncreate:d,onremove:f}),(0,I.default)(`table.twk-graph`,{},[(0,I.default)(`tbody`,{},i.rows.map((e,t)=>(0,I.default)(`tr`,{oncreate:({dom:e})=>a[t]=e},[(0,I.default)(`td`,{style:e.noGraph?{}:`color: ${e.color}`,title:e.name},[(0,I.default)(`span`,e.name)]),(0,I.default)(`td.twk-stats`,{title:`min / max / avg`},[]),(0,I.default)(`td.twk-current`,{})])))])]}};function yt(e){let t=e[0];return t.devicePixelContentBoxSize?{width:t.devicePixelContentBoxSize[0].inlineSize,height:t.devicePixelContentBoxSize[0].blockSize}:t.contentBoxSize?{width:Math.round(t.contentBoxSize[0].inlineSize*devicePixelRatio),height:Math.round(t.contentBoxSize[0].blockSize*devicePixelRatio)}:null}function bt(e,t){if(e)for(let n=0;n<t.length;n++){let r=t[n],i=e.sampler(n);if(!i||!r)continue;let a=r.querySelector(`.twk-current`),o=r.querySelector(`.twk-stats`);if(a&&(a.textContent=xt(i.value,i.fractionDigits)),o)if(i.noGraph)o.textContent=``;else{let e=i.fractionDigits;o.textContent=`${xt(i.minSeen,e)}/${xt(i.maxSeen,e)}/${xt(i.avg,e)}`}}}function xt(e,t){if(e==null)return`n/a`;if(t!=null)return e.toFixed(t);let n=Math.abs(e);return n<2**-52?`0`:n<1?e.toFixed(3):n<10?e.toFixed(2):n<100?e.toFixed(1):e.toFixed(0)}var St=[`#1F77B4`,`#FF7F0E`,`#2CA02C`,`#D62728`,`#9467BD`,`#8C564B`,`#E377C2`,`#7F7F7F`,`#5DA5DA`,`#F17CB0`,`#60BD68`,`#B2912F`,`#B276B2`,`#DECF3F`,`#F15854`,`#4D4D4D`,`#17BECF`,`#AEC7E8`,`#FFBB78`,`#98DF8A`];function Ct(e){return St[e%St.length]}function wt(e,t){return(0,I.default)(Tt,e,t)}var Tt=()=>{let e,t,n,r,i,a,o,s=0,c,l;function u(){return t!==c||e!==l}function d(e){return B(e)?`${e}px`:e}function f(e){return String(e||``)}function p(o){e=typeof o.src==`string`?o.src:``,t=o.src,n=o.render,i=f(o.aspect),r=d(o.width),a=o.fit||`fit`}async function m(){if(!o||!u())return;if(c=t,l=e,!n){o.src=e;return}s++;let r=s;o.classList.add(`twk-loading`);let i=await n(t);if(r!==s){i.close();return}await h(o,i),o.classList.remove(`twk-loading`)}async function h(e,t){let n=new OffscreenCanvas(t.width,t.height);n.getContext(`2d`).drawImage(t,0,0);let r=await n.convertToBlob({type:`image/png`});t.close();let i=URL.createObjectURL(r);URL.revokeObjectURL(e.src),e.src=i}function g(e){let{src:t,render:n,aspect:r,width:i,fit:a,...o}=e;return o}return{oninit({attrs:e}){p(e)},onbeforeupdate({attrs:e},t){p(e)},onupdate(){m()},view:({attrs:t})=>(0,I.default)(`img.twk-image`,{src:e,style:{width:r,aspectRatio:i,objectFit:a,...t.style||{}},onremove:()=>{o=null},oncreate:({dom:e})=>{o=e,m()},...g(t)})}},Et=()=>({view:e=>{let{label:t,tip:n,tagName:r,...i}=e.attrs;return[(0,I.default)(`${r||`div`}.twk-widget`,{...i},t===!1?null:(0,I.default)(`div.twk-widget-label`,{},t),e.children)]}});function J(e,t){return(0,I.default)(Et,e,t)}function Dt(e,t){return(0,I.default)(kt,e,t)}function Ot(e,t){return(0,I.default)(At,e,t)}var kt=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-scalar-widget`,label:e??n.field,class:t},[(0,I.default)(At,n)])}),At=()=>{let e,t,n,r,i,a,o,s=!1,c=!1,l=!1,u=!1,d;function f(o){(!d||o.attrs.decimals!==a.decimals)&&(d=new Intl.NumberFormat(`en-US`,{minimumFractionDigits:o.attrs.decimals??1,maximumFractionDigits:o.attrs.decimals??1,useGrouping:!1})),a=o.attrs,e=a.min,t=a.max,n=a.step,u=!!a.range,i=K(a),r=!!a.readonly,s=e!=null&&t!=null,c=n!=null,l=s||c}function p(n,r){i=isNaN(r)?null:W(r,e,t),q(a,i),(n===`input`?a.oninput:a.onchange)?.(a.value,i),I.default.redraw()}function m(){o=!0}function h(){o=!1}function g(e){let t=e.target;p(`input`,parseFloat(t.value))}function _(e){let t=e.target;p(`change`,parseFloat(t.value))}function v(r){return r=W(r,e,t),n!=null&&(r=Math.round(r/n)*n),parseFloat(r.toFixed(5))}function y(e){!l||r||S.activate(e)}let b,x,S=pe({onStart:e=>{b=i,x=fe(e,S.target).normalizedX},onMove:r=>{r.preventDefault(),S.target?.blur();let i=x-fe(r,S.target).normalizedX,a=b;s?a-=i*(t-e):c&&(a-=Math.round(i*100)*n),p(`input`,v(a))},onEnd:()=>{p(`change`,i),S.deactivate()}});function C(e){if(!o)return;e.preventDefault();let t=(e.ctrlKey?.5:1)*W(e.deltaY,-1,1),r=(n||.2)*t;r&&p(`change`,v((i||0)-r))}return{onremove:()=>{S.deactivate()},oninit:f,onbeforeupdate:f,view:a=>{f(a);let l=s?(i-e)/(t-e):NaN;return(0,I.default)(`div.twk-input.twk-scalar-input`,{style:s?`--twk-scalar-value: ${l}`:``,class:G({"twk-input-readonly":r,"twk-scalar-dragable":!r&&(s||c),"twk-scalar-range":u},a.attrs.class)},[a.attrs.slotBefore?(0,I.default)(`span`,{},a.attrs.slotBefore):null,(0,I.default)(`input`,{type:o?`number`:`text`,min:e,max:t,step:n,value:o?i:d.format(i),onfocus:m,onblur:h,oninput:g,onchange:_,onwheel:C,onmousedown:y,ontouchstart:y,placeholder:void 0,disabled:r}),a.attrs.unit?(0,I.default)(`span.twk-color-muted`,{},a.attrs.unit):null,a.attrs.slotAfter?(0,I.default)(`span`,{},a.attrs.slotAfter):null])}}};function jt(e,t){return(0,I.default)(Nt,e,t)}function Mt(e,t){return(0,I.default)(Lt,e,t)}var Nt=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-angle-widget`,label:e??n.field,class:t},[(0,I.default)(Lt,n)])}),Pt=180/Math.PI,Y=Math.PI/180,Ft={toControl:e=>e*Pt,fromControl:e=>e*Y},It={toControl:e=>e*Y,fromControl:e=>e*Pt},Lt=()=>{let e=0,t=!1,n=[0,0],r,i,a,o,s;function c(e){return i!=null&&a!=null?i<=a?e<i?e=i:e>a&&(e=a):e>=i||e<=a||(e=Math.abs(e-i)<Math.abs(e-a)?i:a):i==null?a!=null&&e>a&&(e=a):e<i&&(e=i),o!=null&&(e=Math.round(e/o)*o),e}function l(e){return e%=360,e<0&&(e+=360),e}function u(t){s=t.attrs,i=s.min,a=s.max,o=s.step,i=i==null?null:l(i)*Y,a=a==null?null:l(a)*Y,o=o==null?null:l(o)*Y,e=K(s)??e,s.degree&&(e*=Y),f()}function d(t){f();let n=s.degree?e*Pt:e;q(s,n),U(t===`input`?s.oninput:s.onchange,s.value,n)}function f(){n[0]=Math.cos(e),n[1]=Math.sin(e)}let p,m=pe({onStart:e=>{let t=fe(e);p=[-(t.x-t.width/2),-(t.y-t.height/2)]},onMove:n=>{n.preventDefault();let i=fe(n,r,p),a=i.normalizedX-.5,o=i.normalizedY-.5;t&&(e=Math.atan2(a,-o),e<0&&(e+=2*Math.PI)),e=c(e),d(`input`),I.default.redraw()},onEnd:()=>{m.deactivate(),t=!1,d(`change`),I.default.redraw()}});function h(e){return e<0&&(e+=360),e%360}return{onremove:()=>{m.deactivate()},oninit:e=>{u(e)},onupdate:e=>{u(e)},view:({attrs:{...n}})=>(0,I.default)(`div.twk-angle-input`,{style:{"--angle-value":`${h(e*Pt)}`}},[Ot({unit:s.degree?`°`:`rad`,range:!0,...n,slotAfter:(0,I.default)(`span.twk-flex-row`,[(0,I.default)(`span.twk-color-dim`,`/`),(s.degree?e:e*Pt).toFixed(1),(0,I.default)(`span.twk-color-dim`,s.degree?`rad`:`°`)])}),(0,I.default)(`div.twk-angle-pane`,{oncreate:e=>r=e.dom,class:G({"is-dragging":t}),style:{aspectRatio:`1`,display:`flex`,"align-items":`center`,"justify-content":`center`,position:`relative`}})])}};function Rt(e,t){return(0,I.default)(Bt,e,t)}function zt(e,t){return(0,I.default)(Vt,e,t)}var Bt=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-bool-widget`,label:e??n.field,class:t},[(0,I.default)(Vt,n)])}),Vt=()=>{let e;function t(t){let n=t.target.checked;q(e,n),e.oninput?.(e.value,n),e.onchange?.(e.value,n)}return{view:n=>{e=n.attrs;let r=K(e)===!0,i=e.align===`end`;return(0,I.default)(`div.twk-bool-input`,{class:G({"twk-align-start":!i,"twk-align-end":!!i,"twk-bool-true":r,"twk-bool-false":!r})},[e.slotBefore,e.readonly?r?e.slotTrue||(0,I.default)(`span`,`true`):e.slotFalse||(0,I.default)(`span`,`false`):(0,I.default)(`input`,{class:G({"twk-toggle":!!e.toggle,"twk-check":!e.toggle}),type:`checkbox`,checked:r,onchange:t}),e.slotAfter,n.children])}}};function Ht(e){let t=e.h%360,n=W(e.s,0,1),r=W(e.v,0,1),i=r*n,a=i*(1-Math.abs(t/60%2-1)),o=r-i,s={r:0,g:0,b:0};return t<60?(s.r=i,s.g=a,s.b=0):t<120?(s.r=a,s.g=i,s.b=0):t<180?(s.r=0,s.g=i,s.b=a):t<240?(s.r=0,s.g=a,s.b=i):t<300?(s.r=a,s.g=0,s.b=i):(s.r=i,s.g=0,s.b=a),s.r+=o,s.g+=o,s.b+=o,s}function Ut(e){let t=e.r,n=e.g,r=e.b,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0,s=0;return a!==0&&(o=a/i,i===t?(s=(n-r)/a+(n<r?6:0),s=s%6*60):i===n?(s=(r-t)/a+2,s*=60):(s=(t-n)/a+4,s*=60)),{h:s,s:o,v:i}}var Wt=class{constructor(e,t){this.components=e,this.normalized=t}toControl(e){e||=[];let t={r:0,g:0,b:0,a:1};return this.components.forEach((n,r)=>{t[n]=(e[r]||0)/(this.normalized?1:255)}),t}fromControl(e){return this.components.map(t=>(this.normalized?e[t]:Math.round(e[t]*255))||0)}},Gt=class{components=[`r`,`g`,`b`,`a`];constructor(e){this.components=e}toControl(e){e||=`rgba(0, 0, 0)`;let t={r:0,g:0,b:0,a:1},n=e.replace(/[rgba\(\)]/gi,``).split(/,\s*?/gi).map(Number);return this.components.forEach((e,r)=>{t[e]=(n[r]||0)/(e===`a`?1:255)}),t}fromControl(e){return this.components.join(``)+`(`+this.components.map(t=>t===`a`?e[t]:Math.round(e[t]*255)).join(`, `)+`)`}},Kt=class{constructor(e,t=`#`){this.components=e,this.prefix=t}toControl(e){e||=`#000`;let t={r:0,g:0,b:0,a:1},n=e.match(/[0-9a-f]+/i)?.[0];return n==null?t:(n.length===this.components.length&&(n=n.split(``).map(e=>`${e}${e}`).join(``)),this.components.forEach((e,r)=>{t[e]=parseInt(n.substr(r*2,2),16)/255}),t)}fromControl(e){return this.prefix+this.components.map(t=>ue(Math.round(e[t]*255).toString(16),2,`0`)).join(``)}},qt=class{componentsRev;constructor(e){this.components=e,this.componentsRev=e.slice().reverse()}toControl(e){e||=0;let t={r:0,g:0,b:0,a:1};return this.components.forEach((n,r)=>{t[n]=(e>>r*8&255)/255}),t}fromControl(e){let t=this.componentsRev.map(t=>ue(Math.round(e[t]*255||0).toString(16),2,`0`)).join(``);return parseInt(`0x`+t,16)}},Jt=[`r`,`g`,`b`,`a`],Yt=class{constructor(e,t){this.components=e,this.normalized=t}toControl(e){e||={};let t={r:0,g:0,b:0,a:1};return this.components.forEach((n,r)=>{t[Jt[r]]=(e[n]||0)/(this.normalized?1:255)}),t}fromControl(e){let t={};return this.components.forEach((n,r)=>{t[n]=(this.normalized?e[Jt[r]]:Math.round(e[n]*255))||0}),t}},X={};function Z(e=`rgb()`){if(e in X)return X[e];{let t=e.match(/^\[(n?)\]([rgba]+)?$/i);if(t){let n=!!t[1];return X[e]=new Wt((t[2]||`rgba`).toLowerCase().split(``),n),X[e]}}{let t=e.match(/^\{(n?)\}([rgbaxyzw]+)?$/i);if(t){let n=!!t[1];return X[e]=new Yt((t[2]||`rgba`).split(``),n),X[e]}}{let t=e.match(/^0x([rgba]+)?$/i);if(t)return X[e]=new qt((t[1]||`rgba`).toLowerCase().split(``)),X[e]}{let t=e.match(/^#([rgba]+)?$/);if(t)return X[e]=new Kt((t[1]||`rgba`).toLowerCase().split(``),`#`),X[e]}{let t=e.match(/^(rgb|rgba)\(\)$/);if(t)return X[e]=new Gt((t[2]||`rgba`).toLowerCase().split(``)),X[e]}return e.match(/^[rgba]+$/)&&(X[e]=new Kt(e.split(``),``)),X[e]}function Xt(e,t){return(0,I.default)(Qt,e,t)}function Zt(e,t){return(0,I.default)($t,e,t)}var Qt=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`div.twk-picker-color-widget`,label:e??n.field,class:t},[(0,I.default)($t,n)])}),$t=()=>{let e=0,t=0,n=0,r=0,i;function a(i=t,a=n){return{h:e*360,s:i,v:a,a:r}}function o(e=t,r=n){return Ht(a(e,r))}function s(e=t,i=n,a=r){return{...o(e,i),a}}function c(r){e=r.h/360,t=r.s,n=r.v}function l(e){c(e),r=e.a}function u(e,t){return Z(`#rgb`).fromControl(s(e,t))}function d(e,t){return Z(`#rgba`).fromControl(s(e,t))}function f(e=t,i=n,a=r){return Z(`rgba()`).fromControl(s(e,i,a))}function p(e,t){let n=Z(t||`rgb`).toControl(e);l({...Ut(n),a:n.a})}function m(e){return Z(e).fromControl(s())}function h(){let e=m(i.format),t=q(i,e);U(i.oninput,i.value,t)}function g(){let e=m(i.format),t=q(i,e);U(i.onchange,i.value,t)}function _(){return i.format?.match(/a/i)}function v(e){x(e,`r`)}function y(e){x(e,`g`)}function b(e){x(e,`b`)}function x(e,t){let n=s();n[t]=parseInt(e.target.value,10)/255,c(Ut(n)),h(),g()}function S(e){p(e.target.value,_()?`rgba`:`rgb`),h(),g()}let C=null,w;function T(e){w=`sv`,O(e.target),A(e)}function E(e){w=`h`,O(e.target),A(e)}function D(e){w=`a`,O(e.target),A(e)}function O(e){k(),C=e;let t={passive:!1};document.addEventListener(`mousemove`,A,t),document.addEventListener(`mouseup`,j,t),document.addEventListener(`touchmove`,A,t),document.addEventListener(`touchend`,j,t),document.addEventListener(`touchcancel`,j,t)}function k(){document.removeEventListener(`mousemove`,A),document.removeEventListener(`mouseup`,j),document.removeEventListener(`touchmove`,A),document.removeEventListener(`touchend`,j),document.removeEventListener(`touchcancel`,j)}function A(i){if(!C)return;i.preventDefault();let a=C.getBoundingClientRect(),o=window.pageXOffset||document.documentElement.scrollLeft,s=window.pageYOffset||document.documentElement.scrollTop,c=C.clientWidth,l=C.clientHeight,[u,d]=de(i);u=W((u-o-a.left)/c,0,1),d=W((d-s-a.top)/l,0,1),w===`sv`&&(t=u,n=1-d),w===`h`&&(e=1-u),w===`a`&&(r=u),h(),I.default.redraw()}function j(){C!=null&&(C=null,k(),g())}return{onremove:()=>{k()},oninit:e=>{i=e.attrs,p(K(i),i.format)},onupdate:e=>{i=e.attrs,p(K(i),i.format)},view:a=>{i=a.attrs,p(K(i),i.format);let o=s();return(0,I.default)(`div.twk-color-picker`,{},[(0,I.default)(`.color-picker-inputs`,(0,I.default)(`input.twk-input.input-hex[type='text']`,{value:_()?d():u(),onchange:S}),(0,I.default)(`input.twk-input.input-r[type='number']`,{min:0,max:255,step:1,value:Math.round(o.r*255),onchange:v}),(0,I.default)(`input.twk-input.input-g[type='number']`,{min:0,max:255,step:1,value:Math.round(o.g*255),onchange:y}),(0,I.default)(`input.twk-input.input-b[type='number']`,{min:0,max:255,step:1,value:Math.round(o.b*255),onchange:b})),(0,I.default)(`.color-picker-panel`,(0,I.default)(`.color-picker-sv`,{tabindex:0,onmousedown:T,ontouchstart:T,style:{"background-color":`${f(1,1,1)}`,"user-select":`none`}},(0,I.default)(`.color-picker-sv-bg`,{style:{background:`linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0))`,"user-select":`none`,"pointer-events":`none`}}),(0,I.default)(`.color-picker-sv-bg`,{style:{background:`linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0))`,"user-select":`none`,"pointer-events":`none`}}),(0,I.default)(`.color-picker-sv-cursor`,{style:{"user-select":`none`,"pointer-events":`none`,"background-color":`${f(e,t,1)}`,left:`${t*100}%`,top:`${(1-n)*100}%`}})),(0,I.default)(`.color-picker-h`,{tabindex:0,onmousedown:E,ontouchstart:E,style:{"user-select":`none`,background:`linear-gradient(to right, #f00 0, #f0f 17% , #00f 33% , #0ff 50% , #0f0 67% , #ff0 83% , #f00 100%)`}},(0,I.default)(`.color-picker-h-cursor`,{style:{"user-select":`none`,"pointer-events":`none`,"background-color":`${f(1,1,1)}`,position:`absolute`,left:`${(1-e)*100}%`}})),_()?(0,I.default)(`.color-picker-a`,{tabindex:0,onmousedown:D,ontouchstart:D,style:{"user-select":`none`}},(0,I.default)(`.color-picker-a-bg`,{style:{background:`linear-gradient(to right, ${f(t,n,0)}, ${f(t,n,1)})`}}),(0,I.default)(`.color-picker-a-cursor`,{style:{"user-select":`none`,"pointer-events":`none`,position:`absolute`,left:`${r*100}%`}})):null)])}}};function en(e,t){return(0,I.default)(nn,e,t)}function tn(e,t){return(0,I.default)(rn,e,t)}var nn=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`div.twk-color-widget`,label:e??n.field,class:t},[(0,I.default)(rn,n)])}),rn=()=>{let e,t=!1,n,r,i=Z(`rgba()`);function a(t){e=t.attrs,r=K(e),n=i.fromControl(Z(e.format).toControl(r))}function o(){t=!t}function s(t,n){q(e,n),e.oninput?.(e.value,n)}function c(t,n){q(e,n),e.onchange?.(e.value,n)}function l(){return z(r)?r:B(r)?`0x`+ue(r.toString(16),8,`0`):le(r)?r.map(e=>e<1&&e>0?e.toFixed(2):e).join(` , `):H(r)?Object.keys(r).map(e=>{let t=r[e];return`${e}: ${t<1&&t>0?t.toFixed(2):t}`}).join(` `):r==null?`null`:`?`}return{oninit:a,onbeforeupdate:a,view:({attrs:{value:e,field:r,binding:i,format:a}})=>[(0,I.default)(`div.twk-color-input`,{style:{"--twk-color-value":n}},(0,I.default)(`button.twk-btn[type='button']`,{onclick:o},l()||`?`),t?I.default.fragment({},[Zt({binding:i,value:e,field:r,format:a,oninput:s,onchange:c})]):null)]}};function an(e,t){return(0,I.default)(sn,e,t)}function on(e,t){return(0,I.default)(sn,e,t)}var sn=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-input-widget`,label:e??n.field,class:t},(0,I.default)(cn,n))}),cn=()=>{let e;function t(t){let n=t.target.value;q(e,n),(t.type===`input`?e.oninput:e.onchange)?.(e.value,n)}return{view:n=>(e=n.attrs,(0,I.default)(`div.twk-input`,{},[n.attrs.slotBefore?(0,I.default)(`span`,{},n.attrs.slotBefore):null,(0,I.default)(`input`,{type:e.type||`text`,value:K(e),oninput:t,onchange:t,placeholder:e.placeholder,disabled:e.readonly}),n.attrs.slotAfter?(0,I.default)(`span`,{},n.attrs.slotAfter):null]))}};function ln(e,t){return(0,I.default)(un,e,t)}var un=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-matrix-widget`,label:e??n.field,class:t},[(0,I.default)(fn,n)])});function dn(e,t){return(0,I.default)(fn,e,t)}var fn=()=>{let e;function t(t,n,r){let i=K(e)||{};i[n]=r,q(e,i),(t===`input`?e.oninput:e.onchange)?.(e.value,i)}function n(t,n){let r=[];n=e.rowMajor?t:n,t=e.rowMajor?n:t;for(let e=0;e<n;e++)for(let i=0;i<t;i++)r.push(i*n+e);return r}return{view:r=>{e=r.attrs;let i=e.cols??1,a=e.rows??1,o=K(e);return(0,I.default)(`div.twk-matrix-input`,{style:{display:`grid`,gridTemplateColumns:`repeat(${i}, auto)`}},n(a,i).map(n=>Ot({min:e.min,max:e.max,step:e.step,value:o,field:n,readonly:e.readonly,oninput:(e,r)=>t(`input`,n,r),onchange:(e,r)=>t(`change`,n,r)})))}}},pn=[0,1],mn=[`x`,`y`];function hn(e,t){return(0,I.default)(gn,e,t)}var gn=()=>{let e,t,n=pn,r=pn,i=0,a=0,o=0,s=0,c,l,u,d;function f(f){d=f.attrs;let p=d.keys||mn;e=p[0],t=p[1];let m=K(d)??{[e]:i,[t]:a};u=d.snap,i=m[e]||0,a=m[t]||0,n=d.rangeX||n,r=d.rangeY||r,o=(i-n[0])/(n[1]-n[0]),s=(a-r[0])/(r[1]-r[0]);let h=d.reset;h&&(c=(h[0]-n[0])/(n[1]-n[0]),l=(h[1]-r[0])/(r[1]-r[0]))}function p(){i=n[0]+(n[1]-n[0])*o,a=r[0]+(r[1]-r[0])*s,u>0&&(i=Math.floor(i/u)*u,a=Math.floor(a/u)*u,o=(i-n[0])/(n[1]-n[0]),s=(a-r[0])/(r[1]-r[0]))}function m(n){p();let r=K(d)??{[e]:i,[t]:a};r[e]=i,r[t]=a,U(n===`input`?d.oninput:d.onchange,d,r)}function h(e){g.activate(e)}let g=pe({onMove:e=>{e.preventDefault();let t=g.target,n=t.getBoundingClientRect(),r=window.pageXOffset||document.documentElement.scrollLeft,i=window.pageYOffset||document.documentElement.scrollTop,a=t.clientWidth,c=t.clientHeight,[l,u]=de(e);o=W((l-r-n.left)/a,0,1),s=W((u-i-n.top)/c,0,1),m(`input`),I.default.redraw()},onEnd:()=>{g.deactivate(),c!=null&&l!=null&&(o=c,s=l,m(`input`)),m(`change`),I.default.redraw()}});return{onremove:g.deactivate,oninit:f,onupdate:f,view:e=>(f(e),J({label:d.label,class:G(`twk-point`,d.class)},(0,I.default)(`.point-area`,{tabindex:0,onmousedown:h,ontouchstart:h},(0,I.default)(`.point-x-axis`,{style:{"pointer-events":`none`,position:`absolute`,left:0,right:0,top:`${s*100}%`,height:`1px`}}),(0,I.default)(`.point-y-axis`,{style:{"pointer-events":`none`,position:`absolute`,left:`${o*100}%`,top:0,bottom:0,width:`1px`}}),(0,I.default)(`.point-cursor`,{style:{"pointer-events":`none`,left:`${o*100}%`,top:`${s*100}%`,position:`absolute`,width:`11px`,height:`11px`,"margin-top":`-5px`,"margin-left":`-5px`,border:`1px solid white`,"border-radius":`5px`,"box-shadow":`0px 0px 2px 1px rgba(0, 0, 0, 0.75)`}}))))}};function _n(e){let t=[];for(let n of e){if(z(n)||B(n)){t.push({value:n,label:String(n)});continue}if(`value`in n){t.push(n);continue}}return t}function vn(e){let t=[];for(let n of e)z(n)||B(n)||n==null?t.push({value:n,label:String(n)}):`value`in n?t.push(n):`options`in n&&t.push({label:n.label,disabled:n.disabled,options:Array.isArray(n.options)?_n(n.options):yn(n.options)});return t}function yn(e){return Object.keys(e).sort().map(t=>({value:e[t],label:t}))}function bn(e){let t=e.attrs.options;return t?Array.isArray(t)?vn(t):yn(t):[]}function xn(e,t){return(0,I.default)(Sn,e,t)}var Sn=()=>{let e,t;function n(){let n=K(e),r=0;for(let e of t)if(`options`in e)for(let t of e.options){if(t.value===n)return r;r++}else{if(e.value===n)return r;r++}}function r(e){let n=0;for(let r of t)if(`options`in r)for(let t of r.options){if(n===e)return t.value;n+=1}else{if(n===e)return r.value;n+=1}return null}function i(t){let n=t.target,i=r(n.selectedIndex),a=q(e,i);e.onchange?.(e,a)}return{view:r=>(e=r.attrs,t=bn(r),J({tagName:`label.twk-select`,label:e.label??e.field,class:e.class},(0,I.default)(`select.twk-select-input`,{selectedIndex:n(),onchange:i,disabled:e.readonly},t.map(e=>`options`in e?(0,I.default)(`optgroup`,{disabled:!!e.disabled,label:e.label||``},e.options.map(Cn)):Cn(e)))))}};function Cn(e){return(0,I.default)(`option`,{value:e.value,label:e.label,disabled:!!e.disabled},e.label||``)}function wn(e,t){return(0,I.default)(Tn,e,t)}var Tn=()=>{let e=1,t=0,n=0,r=!1,i,a=null,o,s;function c(){return Dn(K(o)||On(e,t,n))}function l(i){o=i.attrs;let a=c();e=a.radius??1,t=a.azimuth??0,n=a.polar??0,r=n>Math.PI/2}function u(r){let i=On(e,t,n);q(o,i),U(r===`input`?o.oninput:o.onchange,o.value,i)}function d(e){return a=`pol`,p.activate(e),e.target.focus(),!1}function f(e){return a=`azi`,p.activate(e),e.target.focus(),!1}let p=pe({onStart:e=>{},onMove:e=>{let o=fe(e,i),s=o.normalizedX-.5,c=o.normalizedY-.5;if(a===`azi`)t=Math.atan2(c,s),t<0&&(t+=2*Math.PI);else if(a===`pol`){let e=[Math.cos(t),Math.sin(t)],i=[s,c],a=(e[0]*i[0]+e[1]*i[1])/Math.sqrt(e[0]*e[0]+e[1]*e[1]);n=Math.PI*W(a,0,.5),r&&(n=Math.PI-n)}u(`input`),I.default.redraw()},onEnd:e=>{p.deactivate(),a=null,u(`change`),I.default.redraw()}});return{onremove:()=>{p.deactivate()},oninit:l,onupdate:l,view:()=>(s=On(e,t,n,s),J({tagName:`label.twk-spherical`,label:o.label??o.field,class:o.class,style:{"--azimuth-value":`${En(t)}`,"--polar-value":`${En(n)}`}},[(0,I.default)(`div.twk-spherical-label`,{},`x: ${s.x.toFixed(2)} y: ${s.y.toFixed(2)} z: ${s.z.toFixed(2)}`),(0,I.default)(`div.twk-spherical-pane`,{oncreate:e=>i=e.dom,class:G({"is-dragging":!!a}),style:{aspectRatio:`1`,display:`flex`,"align-items":`center`,"justify-content":`center`,position:`relative`}},(0,I.default)(`div.twk-spherical-arm`,{onmousedown:d,ontouchstart:d,tabIndex:0,style:{width:`50%`,display:`flex`,justifyContent:`end`,alignItems:`center`,transform:`translateX(50%) rotate(${t}rad)`,transformOrigin:`left center`}},(0,I.default)(`div.twk-spherical-knob`,{onmousedown:f,ontouchstart:f,tabIndex:0,style:{aspectRatio:`1`,transform:`translateX(100%)`}})))]))}};function En(e){return 180/Math.PI*e}function Dn(e){let t=e?.x??0,n=e?.y??0,r=e?.z??0,i=Math.sqrt(t*t+n*n+r*r)||1;return{radius:i,azimuth:Math.atan2(r,t)||0,polar:Math.acos(n/i)||0}}function On(e,t,n,r){let i=Math.sin(n);return r||={},r.x=e*Math.cos(t)*i,r.y=e*Math.cos(n),r.z=e*Math.sin(t)*i,r}function kn(e,t){return(0,I.default)(jn,e,t)}function An(e,t){return(0,I.default)(Mn,e,t)}var jn=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-string-widget`,label:e??n.field,class:t},[(0,I.default)(Mn,n)])}),Mn=()=>{let e;function t(t){let n=t.target.value;q(e,n),(t.type===`input`?e.oninput:e.onchange)?.(e.value,n)}return{view:n=>{e=n.attrs;let r=!e.readonly,i=K(e);return(0,I.default)(`div.twk-input.twk-string-input`,{class:G({"twk-input-readonly":!!e.readonly})},[e.slotStart??null,r?null:(0,I.default)(`div.twk-input-value`,i),r?(0,I.default)(e.rows?`textarea`:`input[type='text']`,{value:i,oninput:t,onchange:t,placeholder:e.placeholder,disabled:e.readonly,rows:e.rows}):null,e.slotEnd??null])}}};function Nn(e,t){return(0,I.default)(Fn,e,t)}function Pn(e,t){return(0,I.default)(Ln,e,t)}var Fn=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`label.twk-vector-widget`,label:e??n.field,class:t},[(0,I.default)(Ln,n)])}),In=[`x`,`y`,`z`],Ln=()=>{function e(e,t,n,r){let i=K(r)||{};i[t]=isNaN(n)?null:n,q(r,i),(e===`input`?r.oninput:r.onchange)?.(r.value,i,t)}return{view:({attrs:t})=>{let n=t.keys||In,r=t.cols||n.length,i=K(t);return(0,I.default)(`div.twk-vector-input`,{style:{display:`grid`,gridTemplateColumns:`repeat(${r}, 1fr)`}},n.map(n=>Ot({min:t.min,max:t.max,step:t.step,value:i,field:n,readonly:t.readonly,slotBefore:t.unlabeled?null:(0,I.default)(`span.twk-color-muted`,n),oninput:(r,i)=>e(`input`,n,i,t),onchange:(r,i)=>e(`change`,n,i,t),placeholder:n})))}}};function Rn(e,t){return(0,I.default)(zn,e,t)}var zn=()=>({view:({attrs:{label:e,class:t,...n}})=>J({tagName:`div.twk-Bitmask-widget`,label:e??n.field,class:t},[(0,I.default)(Vn,n)])});function Bn(e,t){return(0,I.default)(Vn,e,t)}var Vn=()=>{let e;function t(){return e.bitCount||32}function n(t){let n=K(e);n^=1<<t,r(n)}function r(t){q(e,t),e.oninput?.(e.value,t),e.onchange?.(e.value,t)}function i(e,t){return(e&1<<t)!=0}function a(t){if(e.names){for(let[n,r]of Object.entries(e.names))if(r===1<<t)return n}return null}return{view:r=>{e=r.attrs;let o=t(),s=K(e);return(0,I.default)(`div.twk-bitmask-input`,{},Array.from({length:o},(e,t)=>(0,I.default)(`label.twk-bitmask-row`,{tabindex:0,class:G({"twk-bitmask-active":i(s,t)}),onclick:()=>n(t)},[(0,I.default)(`div.twk-bitmask-indicator`,{}),(0,I.default)(`div.twk-bitmask-name`,{},a(t)||``),(0,I.default)(`div.twk-bitmask-bit`,{},`bit ${t}`),(0,I.default)(`div.twk-bitmask-value`,{},`0x`+String((2**t).toString(16)).padStart(Math.ceil(o/4),`0`))])))}}};function Hn(e,t){return(0,I.default)(Wn,e,t)}function Un(e,t){return(0,I.default)(Gn,e,t)}var Wn=()=>({view:({attrs:e})=>J({tagName:`label.twk-input.twk-input-readonly`,label:e.label??e.field,class:e.class},(0,I.default)(Gn,e))}),Gn=()=>{let e,t,n;return{oncreate({dom:r}){e=r,t=setInterval(()=>{let t=K(n)??``;e.textContent=String(t)},n.interval??500)},onremove(){clearInterval(t)},view:e=>(n=e.attrs,(0,I.default)(`div.twk-poll`,{}))}},Kn=class e{static build(t){let n=new e;return t(n),n.close()}schema=[];close(){let e=this.schema;return this.schema=[],e}group=qn(this,ge);flex=$(this,ye);grid=$(this,ce);tabs=$(this,Xe);split=$(this,Ke);splitContent=$(this,Ge);section=$(this,we);sectionHeader=$(this,Te);sectionFooter=$(this,Ee);bar=$(this,R);barStart=$(this,ie);barEnd=$(this,ae);barContent=$(this,oe);bool=Q(this,Bt);string=Q(this,jn);scalar=Q(this,kt);vector=Q(this,Fn);matrix=Q(this,un);select=Q(this,Sn);angle=Q(this,Nt);bitmask=Q(this,zn);poll=Q(this,Wn);color=Q(this,nn);colorPicker=Q(this,Qt);boolInput=Q(this,Vt);stringInput=Q(this,Mn);scalarInput=Q(this,At);vectorInput=Q(this,Ln);matrixInput=Q(this,fn);selectInput=Q(this,Sn);angleInput=Q(this,Lt);bitmaskInput=Q(this,Vn);pollInput=Q(this,Gn);colorInput=Q(this,rn);colorPickerInput=Q(this,$t);point=Q(this,gn);spherical=Q(this,Tn);button(e,t={}){this.add(it,t,e)}image(e){this.add(Tt,e)}divider(e){this.add(ot,{},e)}tree(e){this.add(et,e)}graph(e){this.add(vt,e)}widget(e,t){this.add(Et,{label:e},t)}pre(e,t){this.add(Et,{label:e,style:{whiteSpace:`pre`}},t)}view(e){this.add({view:e})}control(e,t){this.add(Et,e,t)}add(e,t,n){if(this.schema)this.schema.push({component:e,attributes:t,children:n});else throw Error(`Cannot use control builder after it was closed`)}};function qn(e,t){return function(){let{options:n,children:r}=Jn(e,arguments);e.add(t,n,r)}}function Q(e,t){return function(){e.add(t,Yn(arguments))}}function $(e,t){return function(){let{options:n,children:r}=Xn(e,arguments);e.add(t,n,r)}}function Jn(e,t){let n=null,r={},i=null;for(let e=0;e<t.length;e++){let a=t[e];z(a)?n=a:H(a)?r=a:V(a)&&(i=a)}n&&(r.title=n);let a=[];if(i){let t=e.schema;e.schema=a,i(e),e.schema=t}return{options:r,children:a}}function Yn(e){let t;return e.length===1?e[0]||{}:(e.length>1?(t=e[2]||{},t.value=e[0],t.field=e[1],t.label===void 0&&(t.label=String(t.field||``))):t={},t)}function Xn(e,t){let n=null,r=null;if(!t.length)return{options:{},children:[]};for(let e=0;e<t.length;e++){let i=t[e];H(i)?n=i:V(i)&&(r=i)}let i=[];if(r){let t=e.schema;e.schema=i,r(e),e.schema=t}return{options:n||{},children:i}}e.AngleInputComponent=Lt,e.AngleWidgetComponent=Nt,e.BarComponent=R,e.BarContentComponent=oe,e.BarEndComponent=ae,e.BarStartComponent=ie,e.BitmaskInputComponent=Vn,e.BitmaskWidgetComponent=zn,e.BoolInputComponent=Vt,e.BoolWidgetComponent=Bt,e.Builder=Kn,e.ButtonComponent=it,e.ColorComponent=rn,e.ColorPicker=$t,e.ColorPickerWidgetComponent=Qt,e.ColorWidgetComponent=nn,e.DialogComponent=nt,e.Divider=ot,e.FlexComponent=ye,e.GraphComponent=vt,e.GridComponent=ce,e.GroupComponent=ge,e.ImageComponent=Tt,e.InputComponent=cn,e.InputWidgetComponent=sn,e.MatrixInputComponent=fn,e.MatrixWidgetComponent=un,e.PointComponent=gn,e.PollComponent=Gn,e.PollWidgetComponent=Wn,e.ScalarInputComponent=At,e.ScalarWidgetComponent=kt,e.SectionComponent=we,e.SectionContentComponent=De,e.SectionFooterComponent=Ee,e.SectionHeaderComponent=Te,e.SelectComponent=Sn,e.SphericalComponent=Tn,e.SplitComponent=Ke,e.SplitContentComponent=Ge,e.StringInputComponent=Mn,e.StringWidgetComponent=jn,e.TabComponent=Je,e.TabsComponent=Xe,e.TreeComponent=et,e.VectorInputComponent=Ln,e.VectorWidgetComponent=Fn,e.WidgetComponent=Et,e.binding=Re,e.degToRadAdapter=It,e.getColorAdapter=Z,e.getControlValue=K,e.getRawValue=Oe,e.h=ze,e.hsv2rgb=Ht,e.isVnode=Ne,e.labeledFn=Le,e.mapChildren=Pe,e.mountUi=Be,e.radToDegAdapter=Ft,e.redrawUi=He,e.renderChildren=Fe,e.rgb2hsv=Ut,e.setControlValue=q,e.setRawValue=ke,e.uiAngleInput=Mt,e.uiAngleWidget=jt,e.uiBar=L,e.uiBarContent=re,e.uiBarEnd=ne,e.uiBarStart=te,e.uiBitmaskInput=Bn,e.uiBitmaskWidget=Rn,e.uiBoolInput=zt,e.uiBoolWidget=Rt,e.uiButton=rt,e.uiColor=tn,e.uiColorPicker=Zt,e.uiColorPickerWidget=Xt,e.uiColorWidget=en,e.uiDialog=tt,e.uiDivider=at,e.uiFlex=ve,e.uiGraph=_t,e.uiGrid=se,e.uiGroup=he,e.uiImage=wt,e.uiInput=on,e.uiInputWidget=an,e.uiMatrixInput=dn,e.uiMatrixWidget=ln,e.uiPoint=hn,e.uiPoll=Un,e.uiPollWidget=Hn,e.uiScalarInput=Ot,e.uiScalarWidget=Dt,e.uiSection=be,e.uiSectionContent=Ce,e.uiSectionFooter=Se,e.uiSectionHeader=xe,e.uiSelect=xn,e.uiSpherical=wn,e.uiSplit=Ue,e.uiSplitContent=We,e.uiString=An,e.uiStringWidget=kn,e.uiTabs=Ye,e.uiTree=Ze,e.uiVectorInput=Pn,e.uiVectorWidget=Nn,e.uiWidget=J,e.unmountUi=Ve});
+//# sourceMappingURL=tweak-ui.umd.js.map