tweak-ui 0.4.2 → 0.5.0

package/dist/tweak-ui.umd.js

@@ -1,4404 +1,2 @@
-(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 getMouseXY(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 getTouchPosition(target, e) {
-	    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 = getMouseXY(e), cx = _a[0], cy = _a[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 drag = dragUtil({
-	        onStart: function (e) {
-	            drag.onMove(e);
-	        },
-	        onMove: function (e) {
-	            e.preventDefault();
-	            var position = getTouchPosition(drag.target.parentElement, e);
-	            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 = getMouseXY(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 = getTouchPosition(drag.target, e).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 = getMouseXY(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);
-	        }
-	        var p2 = Math.PI / 2;
-	        while (theta < 0) {
-	            theta += p2;
-	        }
-	        while (theta > p2) {
-	            theta -= p2;
-	        }
-	        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 drag = dragUtil({
-	        onStart: function (e) {
-	            drag.onMove(e);
-	        },
-	        onMove: function (e) {
-	            e.preventDefault();
-	            var position = getTouchPosition(drag.target.parentElement, e);
-	            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.2";
-
-	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 });
-
-})));
+(function(X,Re){typeof exports=="object"&&typeof module<"u"?Re(exports):typeof define=="function"&&define.amd?define(["exports"],Re):(X=typeof globalThis<"u"?globalThis:X||self,Re(X.TweakUI={}))})(this,function(X){"use strict";function Re(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var ze,Rt;function me(){if(Rt)return ze;Rt=1;function t(e,n,u,a,c,f){return{tag:e,key:n,attrs:u,children:a,text:c,dom:f,is:void 0,domSize:void 0,state:void 0,events:void 0,instance:void 0}}return t.normalize=function(e){return Array.isArray(e)?t("[",void 0,void 0,t.normalizeChildren(e),void 0,void 0):e==null||typeof e=="boolean"?null:typeof e=="object"?e:t("#",void 0,void 0,String(e),void 0,void 0)},t.normalizeChildren=function(e){var n=[];if(e.length){for(var u=e[0]!=null&&e[0].key!=null,a=1;a<e.length;a++)if((e[a]!=null&&e[a].key!=null)!==u)throw new TypeError(u&&(e[a]!=null||typeof e[a]=="boolean")?"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.");for(var a=0;a<e.length;a++)n[a]=t.normalize(e[a])}return n},ze=t,ze}var Le,Et;function Mt(){if(Et)return Le;Et=1;var t=me();return Le=function(){var e=arguments[this],n=this+1,u;if(e==null?e={}:(typeof e!="object"||e.tag!=null||Array.isArray(e))&&(e={},n=this),arguments.length===n+1)u=arguments[n],Array.isArray(u)||(u=[u]);else for(u=[];n<arguments.length;)u.push(arguments[n++]);return t("",e.key,e,u)},Le}var Ne,Pt;function je(){return Pt||(Pt=1,Ne={}.hasOwnProperty),Ne}var Se,Tt;function qt(){if(Tt)return Se;Tt=1;var t=me(),e=Mt(),n=je(),u=/(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g,a=Object.create(null);function c(g){for(var h in g)if(n.call(g,h))return!1;return!0}function f(g){for(var h,d="div",v=[],q={};h=u.exec(g);){var $=h[1],y=h[2];if($===""&&y!=="")d=y;else if($==="#")q.id=y;else if($===".")v.push(y);else if(h[3][0]==="["){var M=h[6];M&&(M=M.replace(/\\(["'])/g,"$1").replace(/\\\\/g,"\\")),h[4]==="class"?v.push(M):q[h[4]]=M===""?M:M||!0}}return v.length>0&&(q.className=v.join(" ")),c(q)&&(q=null),a[g]={tag:d,attrs:q}}function s(g,h){var d=h.attrs,v=n.call(d,"class"),q=v?d.class:d.className;return h.tag=g.tag,g.attrs!=null?(d=Object.assign({},g.attrs,d),(q!=null||g.attrs.className!=null)&&(d.className=q!=null?g.attrs.className!=null?String(g.attrs.className)+" "+String(q):q:g.attrs.className!=null?g.attrs.className:null)):q!=null&&(d.className=q),v&&(d.class=null),g.tag==="input"&&n.call(d,"type")&&(d=Object.assign({type:d.type},d)),h.is=d.is,h.attrs=d,h}function l(g){if(g==null||typeof g!="string"&&typeof g!="function"&&typeof g.view!="function")throw Error("The selector must be either a string or a component.");var h=e.apply(1,arguments);return typeof g=="string"&&(h.children=t.normalizeChildren(h.children),g!=="[")?s(a[g]||f(g),h):(h.tag=g,h)}return Se=l,Se}var Fe,$t;function wn(){if($t)return Fe;$t=1;var t=me();return Fe=function(e){return e==null&&(e=""),t("<",void 0,void 0,e,void 0,void 0)},Fe}var De,Ot;function vn(){if(Ot)return De;Ot=1;var t=me(),e=Mt();return De=function(){var n=e.apply(0,arguments);return n.tag="[",n.children=t.normalizeChildren(n.children),n},De}var He,At;function xn(){if(At)return He;At=1;var t=qt();return t.trust=wn(),t.fragment=vn(),He=t,He}var Ve,It;function zt(){if(It)return Ve;It=1;var t=new WeakMap;function*e(n){var u=n.dom,a=n.domSize,c=t.get(u);if(u!=null)do{var f=u.nextSibling;t.get(u)===c&&(yield u,a--),u=f}while(a)}return Ve={delayedRemoval:t,domFor:e},Ve}var _e,Lt;function Cn(){if(Lt)return _e;Lt=1;var t=me(),e=zt(),n=e.delayedRemoval,u=e.domFor;return _e=function(){var a={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},c,f;function s(i){return i.ownerDocument}function l(i){return i.attrs&&i.attrs.xmlns||a[i.tag]}function g(i,r){if(i.state!==r)throw new Error("'vnode.state' must not be modified.")}function h(i){var r=i.state;try{return this.apply(r,arguments)}finally{g(i,r)}}function d(i){try{return s(i).activeElement}catch{return null}}function v(i,r,o,p,m,k,L){for(var F=o;F<p;F++){var T=r[F];T!=null&&q(i,T,m,L,k)}}function q(i,r,o,p,m){var k=r.tag;if(typeof k=="string")switch(r.state={},r.attrs!=null&&dt(r.attrs,r,o),k){case"#":$(i,r,m);break;case"<":M(i,r,p,m);break;case"[":O(i,r,o,p,m);break;default:z(i,r,o,p,m)}else ee(i,r,o,p,m)}function $(i,r,o){r.dom=s(i).createTextNode(r.children),E(i,r.dom,o)}var y={caption:"table",thead:"table",tbody:"table",tfoot:"table",tr:"tbody",th:"tr",td:"tr",colgroup:"table",col:"colgroup"};function M(i,r,o,p){var m=r.children.match(/^\s*?<(\w+)/im)||[],k=s(i).createElement(y[m[1]]||"div");o==="http://www.w3.org/2000/svg"?(k.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+r.children+"</svg>",k=k.firstChild):k.innerHTML=r.children,r.dom=k.firstChild,r.domSize=k.childNodes.length;for(var L=s(i).createDocumentFragment(),F;F=k.firstChild;)L.appendChild(F);E(i,L,p)}function O(i,r,o,p,m){var k=s(i).createDocumentFragment();if(r.children!=null){var L=r.children;v(k,L,0,L.length,o,null,p)}r.dom=k.firstChild,r.domSize=k.childNodes.length,E(i,k,m)}function z(i,r,o,p,m){var k=r.tag,L=r.attrs,F=r.is;p=l(r)||p;var T=p?F?s(i).createElementNS(p,k,{is:F}):s(i).createElementNS(p,k):F?s(i).createElement(k,{is:F}):s(i).createElement(k);if(r.dom=T,L!=null&&ar(r,L,p),E(i,T,m),!S(r)&&r.children!=null){var D=r.children;v(T,D,0,D.length,o,null,p),r.tag==="select"&&L!=null&&ur(r,L)}}function H(i,r){var o;if(typeof i.tag.view=="function"){if(i.state=Object.create(i.tag),o=i.state.view,o.$$reentrantLock$$!=null)return;o.$$reentrantLock$$=!0}else{if(i.state=void 0,o=i.tag,o.$$reentrantLock$$!=null)return;o.$$reentrantLock$$=!0,i.state=i.tag.prototype!=null&&typeof i.tag.prototype.view=="function"?new i.tag(i):i.tag(i)}if(dt(i.state,i,r),i.attrs!=null&&dt(i.attrs,i,r),i.instance=t.normalize(h.call(i.state.view,i)),i.instance===i)throw Error("A view cannot return the vnode it received as argument");o.$$reentrantLock$$=null}function ee(i,r,o,p,m){H(r,o),r.instance!=null?(q(i,r.instance,o,p,m),r.dom=r.instance.dom,r.domSize=r.dom!=null?r.instance.domSize:0):r.domSize=0}function V(i,r,o,p,m,k){if(!(r===o||r==null&&o==null))if(r==null||r.length===0)v(i,o,0,o.length,p,m,k);else if(o==null||o.length===0)pe(i,r,0,r.length);else{var L=r[0]!=null&&r[0].key!=null,F=o[0]!=null&&o[0].key!=null,T=0,D=0;if(!L)for(;D<r.length&&r[D]==null;)D++;if(!F)for(;T<o.length&&o[T]==null;)T++;if(L!==F)pe(i,r,D,r.length),v(i,o,T,o.length,p,m,k);else if(F){for(var ie=r.length-1,J=o.length-1,Ie,ae,G,ne,Y,wt;ie>=D&&J>=T&&(ne=r[ie],Y=o[J],ne.key===Y.key);)ne!==Y&&R(i,ne,Y,p,m,k),Y.dom!=null&&(m=Y.dom),ie--,J--;for(;ie>=D&&J>=T&&(ae=r[D],G=o[T],ae.key===G.key);)D++,T++,ae!==G&&R(i,ae,G,p,_(r,D,m),k);for(;ie>=D&&J>=T&&!(T===J||ae.key!==Y.key||ne.key!==G.key);)wt=_(r,D,m),w(i,ne,wt),ne!==G&&R(i,ne,G,p,wt,k),++T<=--J&&w(i,ae,m),ae!==Y&&R(i,ae,Y,p,m,k),Y.dom!=null&&(m=Y.dom),D++,ie--,ne=r[ie],Y=o[J],ae=r[D],G=o[T];for(;ie>=D&&J>=T&&ne.key===Y.key;)ne!==Y&&R(i,ne,Y,p,m,k),Y.dom!=null&&(m=Y.dom),ie--,J--,ne=r[ie],Y=o[J];if(T>J)pe(i,r,D,ie+1);else if(D>ie)v(i,o,T,J+1,p,m,k);else{var fr=m,bn=J-T+1,Pe=new Array(bn),vt=0,K=0,xt=2147483647,Ct=0,Ie,kt;for(K=0;K<bn;K++)Pe[K]=-1;for(K=J;K>=T;K--){Ie==null&&(Ie=P(r,D,ie+1)),Y=o[K];var ke=Ie[Y.key];ke!=null&&(xt=ke<xt?ke:-1,Pe[K-T]=ke,ne=r[ke],r[ke]=null,ne!==Y&&R(i,ne,Y,p,m,k),Y.dom!=null&&(m=Y.dom),Ct++)}if(m=fr,Ct!==ie-D+1&&pe(i,r,D,ie+1),Ct===0)v(i,o,T,J+1,p,m,k);else if(xt===-1)for(kt=N(Pe),vt=kt.length-1,K=J;K>=T;K--)G=o[K],Pe[K-T]===-1?q(i,G,p,k,m):kt[vt]===K-T?vt--:w(i,G,m),G.dom!=null&&(m=o[K].dom);else for(K=J;K>=T;K--)G=o[K],Pe[K-T]===-1&&q(i,G,p,k,m),G.dom!=null&&(m=o[K].dom)}}else{var bt=r.length<o.length?r.length:o.length;for(T=T<D?T:D;T<bt;T++)ae=r[T],G=o[T],!(ae===G||ae==null&&G==null)&&(ae==null?q(i,G,p,k,_(r,T+1,m)):G==null?te(i,ae):R(i,ae,G,p,_(r,T+1,m),k));r.length>bt&&pe(i,r,T,r.length),o.length>bt&&v(i,o,T,o.length,p,m,k)}}}function R(i,r,o,p,m,k){var L=r.tag,F=o.tag;if(L===F&&r.is===o.is){if(o.state=r.state,o.events=r.events,lr(o,r))return;if(typeof L=="string")switch(o.attrs!=null&&yt(o.attrs,o,p),L){case"#":x(r,o);break;case"<":C(i,r,o,k,m);break;case"[":j(i,r,o,p,m,k);break;default:U(r,o,p,k)}else A(i,r,o,p,m,k)}else te(i,r),q(i,o,p,k,m)}function x(i,r){i.children.toString()!==r.children.toString()&&(i.dom.nodeValue=r.children),r.dom=i.dom}function C(i,r,o,p,m){r.children!==o.children?(Ce(i,r),M(i,o,p,m)):(o.dom=r.dom,o.domSize=r.domSize)}function j(i,r,o,p,m,k){V(i,r.children,o.children,p,m,k);var L=0,F=o.children;if(o.dom=null,F!=null){for(var T=0;T<F.length;T++){var D=F[T];D!=null&&D.dom!=null&&(o.dom==null&&(o.dom=D.dom),L+=D.domSize||1)}L!==1&&(o.domSize=L)}}function U(i,r,o,p){var m=r.dom=i.dom;p=l(r)||p,cr(r,i.attrs,r.attrs,p),S(r)||V(m,i.children,r.children,o,null,p)}function A(i,r,o,p,m,k){if(o.instance=t.normalize(h.call(o.state.view,o)),o.instance===o)throw Error("A view cannot return the vnode it received as argument");yt(o.state,o,p),o.attrs!=null&&yt(o.attrs,o,p),o.instance!=null?(r.instance==null?q(i,o.instance,p,k,m):R(i,r.instance,o.instance,p,m,k),o.dom=o.instance.dom,o.domSize=o.instance.domSize):r.instance!=null?(te(i,r.instance),o.dom=void 0,o.domSize=0):(o.dom=r.dom,o.domSize=r.domSize)}function P(i,r,o){for(var p=Object.create(null);r<o;r++){var m=i[r];if(m!=null){var k=m.key;k!=null&&(p[k]=r)}}return p}var I=[];function N(i){for(var r=[0],o=0,p=0,m=0,k=I.length=i.length,m=0;m<k;m++)I[m]=i[m];for(var m=0;m<k;++m)if(i[m]!==-1){var L=r[r.length-1];if(i[L]<i[m]){I[m]=L,r.push(m);continue}for(o=0,p=r.length-1;o<p;){var F=(o>>>1)+(p>>>1)+(o&p&1);i[r[F]]<i[m]?o=F+1:p=F}i[m]<i[r[o]]&&(o>0&&(I[m]=r[o-1]),r[o]=m)}for(o=r.length,p=r[o-1];o-- >0;)r[o]=p,p=I[p];return I.length=0,r}function _(i,r,o){for(;r<i.length;r++)if(i[r]!=null&&i[r].dom!=null)return i[r].dom;return o}function w(i,r,o){if(r.dom!=null){var p;if(r.domSize==null)p=r.dom;else{p=s(i).createDocumentFragment();for(var m of u(r))p.appendChild(m)}E(i,p,o)}}function E(i,r,o){o!=null?i.insertBefore(r,o):i.appendChild(r)}function S(i){if(i.attrs==null||i.attrs.contenteditable==null&&i.attrs.contentEditable==null)return!1;var r=i.children;if(r!=null&&r.length===1&&r[0].tag==="<"){var o=r[0].children;i.dom.innerHTML!==o&&(i.dom.innerHTML=o)}else if(r!=null&&r.length!==0)throw new Error("Child node of a contenteditable must be trusted.");return!0}function pe(i,r,o,p){for(var m=o;m<p;m++){var k=r[m];k!=null&&te(i,k)}}function xe(i,r,o,p){var m=r.state,k=h.call(o.onbeforeremove,r);if(k!=null){var L=f;for(var F of u(r))n.set(F,L);p.v++,Promise.resolve(k).finally(function(){g(r,m),he(i,r,p)})}}function he(i,r,o){--o.v===0&&(ht(r),Ce(i,r))}function te(i,r){var o={v:1};typeof r.tag!="string"&&typeof r.state.onbeforeremove=="function"&&xe(i,r,r.state,o),r.attrs&&typeof r.attrs.onbeforeremove=="function"&&xe(i,r,r.attrs,o),he(i,r,o)}function Ce(i,r){if(r.dom!=null)if(r.domSize==null)i.removeChild(r.dom);else for(var o of u(r))i.removeChild(o)}function ht(i){if(typeof i.tag!="string"&&typeof i.state.onremove=="function"&&h.call(i.state.onremove,i),i.attrs&&typeof i.attrs.onremove=="function"&&h.call(i.attrs.onremove,i),typeof i.tag!="string")i.instance!=null&&ht(i.instance);else{i.events!=null&&(i.events._=null);var r=i.children;if(Array.isArray(r))for(var o=0;o<r.length;o++){var p=r[o];p!=null&&ht(p)}}}function ar(i,r,o){for(var p in r)mt(i,p,null,r[p],o)}function mt(i,r,o,p,m){if(!(r==="key"||p==null||mn(r)||o===p&&!sr(i,r)&&typeof p!="object")){if(r[0]==="o"&&r[1]==="n")return yn(i,r,p);if(r.slice(0,6)==="xlink:")i.dom.setAttributeNS("http://www.w3.org/1999/xlink",r.slice(6),p);else if(r==="style")dn(i.dom,o,p);else if(gn(i,r,m)){if(r==="value"){if((i.tag==="input"||i.tag==="textarea")&&i.dom.value===""+p||i.tag==="select"&&o!==null&&i.dom.value===""+p||i.tag==="option"&&o!==null&&i.dom.value===""+p)return;if(i.tag==="input"&&i.attrs.type==="file"&&""+p!=""){console.error("`value` is read-only on file inputs!");return}}i.tag==="input"&&r==="type"?i.dom.setAttribute(r,p):i.dom[r]=p}else typeof p=="boolean"?p?i.dom.setAttribute(r,""):i.dom.removeAttribute(r):i.dom.setAttribute(r==="className"?"class":r,p)}}function or(i,r,o,p){if(!(r==="key"||o==null||mn(r)))if(r[0]==="o"&&r[1]==="n")yn(i,r,void 0);else if(r==="style")dn(i.dom,o,null);else if(gn(i,r,p)&&r!=="className"&&r!=="title"&&!(r==="value"&&(i.tag==="option"||i.tag==="select"&&i.dom.selectedIndex===-1&&i.dom===d(i.dom)))&&!(i.tag==="input"&&r==="type"))i.dom[r]=null;else{var m=r.indexOf(":");m!==-1&&(r=r.slice(m+1)),o!==!1&&i.dom.removeAttribute(r==="className"?"class":r)}}function ur(i,r){if("value"in r)if(r.value===null)i.dom.selectedIndex!==-1&&(i.dom.value=null);else{var o=""+r.value;(i.dom.value!==o||i.dom.selectedIndex===-1)&&(i.dom.value=o)}"selectedIndex"in r&&mt(i,"selectedIndex",null,r.selectedIndex,void 0)}function cr(i,r,o,p){var m;if(r!=null){r===o&&console.warn("Don't reuse attrs object, use new object for every redraw, this will throw in next major");for(var k in r)(m=r[k])!=null&&(o==null||o[k]==null)&&or(i,k,m,p)}if(o!=null)for(var k in o)mt(i,k,r&&r[k],o[k],p)}function sr(i,r){return r==="value"||r==="checked"||r==="selectedIndex"||r==="selected"&&(i.dom===d(i.dom)||i.tag==="option"&&i.dom.parentNode===d(i.dom))}function mn(i){return i==="oninit"||i==="oncreate"||i==="onupdate"||i==="onremove"||i==="onbeforeremove"||i==="onbeforeupdate"}function gn(i,r,o){return o===void 0&&(i.tag.indexOf("-")>-1||i.is||r!=="href"&&r!=="list"&&r!=="form"&&r!=="width"&&r!=="height")&&r in i.dom}function dn(i,r,o){if(r!==o)if(o==null)i.style="";else if(typeof o!="object")i.style=o;else if(r==null||typeof r!="object"){i.style="";for(var p in o){var m=o[p];m!=null&&(p.includes("-")?i.style.setProperty(p,String(m)):i.style[p]=String(m))}}else{for(var p in r)r[p]!=null&&o[p]==null&&(p.includes("-")?i.style.removeProperty(p):i.style[p]="");for(var p in o){var m=o[p];m!=null&&(m=String(m))!==String(r[p])&&(p.includes("-")?i.style.setProperty(p,m):i.style[p]=m)}}}function gt(){this._=c}gt.prototype=Object.create(null),gt.prototype.handleEvent=function(i){var r=this["on"+i.type],o;typeof r=="function"?o=r.call(i.currentTarget,i):typeof r.handleEvent=="function"&&r.handleEvent(i);var p=this;p._!=null&&(i.redraw!==!1&&(0,p._)(),o!=null&&typeof o.then=="function"&&Promise.resolve(o).then(function(){p._!=null&&i.redraw!==!1&&(0,p._)()})),o===!1&&(i.preventDefault(),i.stopPropagation())};function yn(i,r,o){if(i.events!=null){if(i.events._=c,i.events[r]===o)return;o!=null&&(typeof o=="function"||typeof o=="object")?(i.events[r]==null&&i.dom.addEventListener(r.slice(2),i.events,!1),i.events[r]=o):(i.events[r]!=null&&i.dom.removeEventListener(r.slice(2),i.events,!1),i.events[r]=void 0)}else o!=null&&(typeof o=="function"||typeof o=="object")&&(i.events=new gt,i.dom.addEventListener(r.slice(2),i.events,!1),i.events[r]=o)}function dt(i,r,o){typeof i.oninit=="function"&&h.call(i.oninit,r),typeof i.oncreate=="function"&&o.push(h.bind(i.oncreate,r))}function yt(i,r,o){typeof i.onupdate=="function"&&o.push(h.bind(i.onupdate,r))}function lr(i,r){do{if(i.attrs!=null&&typeof i.attrs.onbeforeupdate=="function"){var o=h.call(i.attrs.onbeforeupdate,i,r);if(o!==void 0&&!o)break}if(typeof i.tag!="string"&&typeof i.state.onbeforeupdate=="function"){var o=h.call(i.state.onbeforeupdate,i,r);if(o!==void 0&&!o)break}return!1}while(!1);return i.dom=r.dom,i.domSize=r.domSize,i.instance=r.instance,i.attrs=r.attrs,i.children=r.children,i.text=r.text,!0}var Me;return function(i,r,o){if(!i)throw new TypeError("DOM element being rendered to does not exist.");if(Me!=null&&i.contains(Me))throw new TypeError("Node is currently being rendered to and thus is locked.");var p=c,m=Me,k=[],L=d(i),F=i.namespaceURI;Me=i,c=typeof o=="function"?o:void 0,f={};try{i.vnodes==null&&(i.textContent=""),r=t.normalizeChildren(Array.isArray(r)?r:[r]),V(i,i.vnodes,r,k,null,F==="http://www.w3.org/1999/xhtml"?void 0:F),i.vnodes=r,L!=null&&d(i)!==L&&typeof L.focus=="function"&&L.focus();for(var T=0;T<k.length;T++)k[T]()}finally{c=p,Me=m}}},_e}var Ye,Nt;function jt(){return Nt||(Nt=1,Ye=Cn()(typeof window<"u"?window:null)),Ye}var Be,St;function kn(){if(St)return Be;St=1;var t=me();return Be=function(e,n,u){var a=[],c=!1,f=-1;function s(){for(f=0;f<a.length;f+=2)try{e(a[f],t(a[f+1]),l)}catch(h){u.error(h)}f=-1}function l(){c||(c=!0,n(function(){c=!1,s()}))}l.sync=s;function g(h,d){if(d!=null&&d.view==null&&typeof d!="function")throw new TypeError("m.mount expects a component, not a vnode.");var v=a.indexOf(h);v>=0&&(a.splice(v,2),v<=f&&(f-=2),e(h,[])),d!=null&&(a.push(h,d),e(h,t(d),l))}return{mount:g,redraw:l}},Be}var Ue,Ft;function Ke(){if(Ft)return Ue;Ft=1;var t=jt();return Ue=kn()(t,typeof requestAnimationFrame<"u"?requestAnimationFrame:null,typeof console<"u"?console:null),Ue}var Xe,Dt;function Ht(){return Dt||(Dt=1,Xe=function(t){if(Object.prototype.toString.call(t)!=="[object Object]")return"";var e=[];for(var n in t)u(n,t[n]);return e.join("&");function u(a,c){if(Array.isArray(c))for(var f=0;f<c.length;f++)u(a+"["+f+"]",c[f]);else if(Object.prototype.toString.call(c)==="[object Object]")for(var f in c)u(a+"["+f+"]",c[f]);else e.push(encodeURIComponent(a)+(c!=null&&c!==""?"="+encodeURIComponent(c):""))}}),Xe}var Ge,Vt;function Qe(){if(Vt)return Ge;Vt=1;var t=Ht();return Ge=function(e,n){if(/:([^\/\.-]+)(\.{3})?:/.test(e))throw new SyntaxError("Template parameter names must be separated by either a '/', '-', or '.'.");if(n==null)return e;var u=e.indexOf("?"),a=e.indexOf("#"),c=a<0?e.length:a,f=u<0?c:u,s=e.slice(0,f),l={};Object.assign(l,n);var g=s.replace(/:([^\/\.-]+)(\.{3})?/g,function(M,O,z){return delete l[O],n[O]==null?M:z?n[O]:encodeURIComponent(String(n[O]))}),h=g.indexOf("?"),d=g.indexOf("#"),v=d<0?g.length:d,q=h<0?v:h,$=g.slice(0,q);u>=0&&($+=e.slice(u,c)),h>=0&&($+=(u<0?"?":"&")+g.slice(h,v));var y=t(l);return y&&($+=(u<0&&h<0?"?":"&")+y),a>=0&&($+=e.slice(a)),d>=0&&($+=(a<0?"":"&")+g.slice(d)),$},Ge}var We,_t;function Rn(){if(_t)return We;_t=1;var t=Qe(),e=je();return We=function(n,u){function a(s){return new Promise(s)}function c(s,l){return new Promise(function(g,h){s=t(s,l.params);var d=l.method!=null?l.method.toUpperCase():"GET",v=l.body,q=(l.serialize==null||l.serialize===JSON.serialize)&&!(v instanceof n.FormData||v instanceof n.URLSearchParams),$=l.responseType||(typeof l.extract=="function"?"":"json"),y=new n.XMLHttpRequest,M=!1,O=!1,z=y,H,ee=y.abort;y.abort=function(){M=!0,ee.call(this)},y.open(d,s,l.async!==!1,typeof l.user=="string"?l.user:void 0,typeof l.password=="string"?l.password:void 0),q&&v!=null&&!f(l,"content-type")&&y.setRequestHeader("Content-Type","application/json; charset=utf-8"),typeof l.deserialize!="function"&&!f(l,"accept")&&y.setRequestHeader("Accept","application/json, text/*"),l.withCredentials&&(y.withCredentials=l.withCredentials),l.timeout&&(y.timeout=l.timeout),y.responseType=$;for(var V in l.headers)e.call(l.headers,V)&&y.setRequestHeader(V,l.headers[V]);y.onreadystatechange=function(R){if(!M&&R.target.readyState===4)try{var x=R.target.status>=200&&R.target.status<300||R.target.status===304||/^file:\/\//i.test(s),C=R.target.response,j;if($==="json"){if(!R.target.responseType&&typeof l.extract!="function")try{C=JSON.parse(R.target.responseText)}catch{C=null}}else(!$||$==="text")&&C==null&&(C=R.target.responseText);if(typeof l.extract=="function"?(C=l.extract(R.target,l),x=!0):typeof l.deserialize=="function"&&(C=l.deserialize(C)),x){if(typeof l.type=="function")if(Array.isArray(C))for(var U=0;U<C.length;U++)C[U]=new l.type(C[U]);else C=new l.type(C);g(C)}else{var A=function(){try{j=R.target.responseText}catch{j=C}var P=new Error(j);P.code=R.target.status,P.response=C,h(P)};y.status===0?setTimeout(function(){O||A()}):A()}}catch(P){h(P)}},y.ontimeout=function(R){O=!0;var x=new Error("Request timed out");x.code=R.target.status,h(x)},typeof l.config=="function"&&(y=l.config(y,l,s)||y,y!==z&&(H=y.abort,y.abort=function(){M=!0,H.call(this)})),v==null?y.send():typeof l.serialize=="function"?y.send(l.serialize(v)):v instanceof n.FormData||v instanceof n.URLSearchParams?y.send(v):y.send(JSON.stringify(v))})}a.prototype=Promise.prototype,a.__proto__=Promise;function f(s,l){for(var g in s.headers)if(e.call(s.headers,g)&&g.toLowerCase()===l)return!0;return!1}return{request:function(s,l){typeof s!="string"?(l=s,s=s.url):l==null&&(l={});var g=c(s,l);if(l.background===!0)return g;var h=0;function d(){--h===0&&typeof u=="function"&&u()}return v(g);function v(q){var $=q.then;return q.constructor=a,q.then=function(){h++;var y=$.apply(q,arguments);return y.then(d,function(M){if(d(),h===0)throw M}),v(y)},q}}}},We}var Je,Yt;function En(){if(Yt)return Je;Yt=1;var t=Ke();return Je=Rn()(typeof window<"u"?window:null,t.redraw),Je}var Ze,Bt;function Ut(){if(Bt)return Ze;Bt=1;function t(e){try{return decodeURIComponent(e)}catch{return e}}return Ze=function(e){if(e===""||e==null)return{};e.charAt(0)==="?"&&(e=e.slice(1));for(var n=e.split("&"),u={},a={},c=0;c<n.length;c++){var f=n[c].split("="),s=t(f[0]),l=f.length===2?t(f[1]):"";l==="true"?l=!0:l==="false"&&(l=!1);var g=s.split(/\]\[?|\[/),h=a;s.indexOf("[")>-1&&g.pop();for(var d=0;d<g.length;d++){var v=g[d],q=g[d+1],$=q==""||!isNaN(parseInt(q,10));if(v===""){var s=g.slice(0,d).join();u[s]==null&&(u[s]=Array.isArray(h)?h.length:0),v=u[s]++}else if(v==="__proto__")break;if(d===g.length-1)h[v]=l;else{var y=Object.getOwnPropertyDescriptor(h,v);y!=null&&(y=y.value),y==null&&(h[v]=y=$?[]:{}),h=y}}}return a},Ze}var et,Kt;function tt(){if(Kt)return et;Kt=1;var t=Ut();return et=function(e){var n=e.indexOf("?"),u=e.indexOf("#"),a=u<0?e.length:u,c=n<0?a:n,f=e.slice(0,c).replace(/\/{2,}/g,"/");return f?f[0]!=="/"&&(f="/"+f):f="/",{path:f,params:n<0?{}:t(e.slice(n+1,a))}},et}var nt,Xt;function Mn(){if(Xt)return nt;Xt=1;var t=tt();return nt=function(e){var n=t(e),u=Object.keys(n.params),a=[],c=new RegExp("^"+n.path.replace(/:([^\/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|\[\]{}]/g,function(f,s,l){return s==null?"\\"+f:(a.push({k:s,r:l==="..."}),l==="..."?"(.*)":l==="."?"([^/]+)\\.":"([^/]+)"+(l||""))})+"\\/?$");return function(f){for(var s=0;s<u.length;s++)if(n.params[u[s]]!==f.params[u[s]])return!1;if(!a.length)return c.test(f.path);var l=c.exec(f.path);if(l==null)return!1;for(var s=0;s<a.length;s++)f.params[a[s].k]=a[s].r?l[s+1]:decodeURIComponent(l[s+1]);return!0}},nt}var rt,Gt;function Qt(){if(Gt)return rt;Gt=1;var t=je(),e=new RegExp("^(?:key|oninit|oncreate|onbeforeupdate|onupdate|onbeforeremove|onremove)$");return rt=function(n,u){var a={};if(u!=null)for(var c in n)t.call(n,c)&&!e.test(c)&&u.indexOf(c)<0&&(a[c]=n[c]);else for(var c in n)t.call(n,c)&&!e.test(c)&&(a[c]=n[c]);return a},rt}var it,Wt;function Pn(){if(Wt)return it;Wt=1;var t=me(),e=qt(),n=Qe(),u=tt(),a=Mn(),c=Qt(),f={};function s(l){try{return decodeURIComponent(l)}catch{return l}}return it=function(l,g){var h=l==null?null:typeof l.setImmediate=="function"?l.setImmediate:l.setTimeout,d=Promise.resolve(),v=!1,q=!1,$=0,y,M,O=f,z,H,ee,V,R={onbeforeupdate:function(){return $=$?2:1,!(!$||f===O)},onremove:function(){l.removeEventListener("popstate",j,!1),l.removeEventListener("hashchange",C,!1)},view:function(){if(!(!$||f===O)){var P=[t(z,H.key,H)];return O&&(P=O.render(P[0])),P}}},x=A.SKIP={};function C(){v=!1;var P=l.location.hash;A.prefix[0]!=="#"&&(P=l.location.search+P,A.prefix[0]!=="?"&&(P=l.location.pathname+P,P[0]!=="/"&&(P="/"+P)));var I=P.concat().replace(/(?:%[a-f89][a-f0-9])+/gim,s).slice(A.prefix.length),N=u(I);Object.assign(N.params,l.history.state);function _(E){console.error(E),U(M,null,{replace:!0})}w(0);function w(E){for(;E<y.length;E++)if(y[E].check(N)){var S=y[E].component,pe=y[E].route,xe=S,he=V=function(te){if(he===V){if(te===x)return w(E+1);z=te!=null&&(typeof te.view=="function"||typeof te=="function")?te:"div",H=N.params,ee=I,V=null,O=S.render?S:null,$===2?g.redraw():($=2,g.redraw.sync())}};S.view||typeof S=="function"?(S={},he(xe)):S.onmatch?d.then(function(){return S.onmatch(N.params,I,pe)}).then(he,I===M?null:_):he("div");return}if(I===M)throw new Error("Could not resolve default route "+M+".");U(M,null,{replace:!0})}}function j(){v||(v=!0,h(C))}function U(P,I,N){if(P=n(P,I),q){j();var _=N?N.state:null,w=N?N.title:null;N&&N.replace?l.history.replaceState(_,w,A.prefix+P):l.history.pushState(_,w,A.prefix+P)}else l.location.href=A.prefix+P}function A(P,I,N){if(!P)throw new TypeError("DOM element being rendered to does not exist.");if(y=Object.keys(N).map(function(w){if(w[0]!=="/")throw new SyntaxError("Routes must start with a '/'.");if(/:([^\/\.-]+)(\.{3})?:/.test(w))throw new SyntaxError("Route parameter names must be separated with either '/', '.', or '-'.");return{route:w,component:N[w],check:a(w)}}),M=I,I!=null){var _=u(I);if(!y.some(function(w){return w.check(_)}))throw new ReferenceError("Default route doesn't match any known routes.")}typeof l.history.pushState=="function"?l.addEventListener("popstate",j,!1):A.prefix[0]==="#"&&l.addEventListener("hashchange",C,!1),q=!0,g.mount(P,R),C()}return A.set=function(P,I,N){V!=null&&(N=N||{},N.replace=!0),V=null,U(P,I,N)},A.get=function(){return ee},A.prefix="#!",A.Link={view:function(P){var I=e(P.attrs.selector||"a",c(P.attrs,["options","params","selector","onclick"]),P.children),N,_,w;return(I.attrs.disabled=!!I.attrs.disabled)?(I.attrs.href=null,I.attrs["aria-disabled"]="true"):(N=P.attrs.options,_=P.attrs.onclick,w=n(I.attrs.href,P.attrs.params),I.attrs.href=A.prefix+w,I.attrs.onclick=function(E){var S;typeof _=="function"?S=_.call(E.currentTarget,E):_==null||typeof _!="object"||typeof _.handleEvent=="function"&&_.handleEvent(E),S!==!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,A.set(w,null,N))}),I}},A.param=function(P){return H&&P!=null?H[P]:H},A},it}var at,Jt;function Tn(){if(Jt)return at;Jt=1;var t=Ke();return at=Pn()(typeof window<"u"?window:null,t),at}var ot,Zt;function qn(){if(Zt)return ot;Zt=1;var t=xn(),e=En(),n=Ke(),u=zt(),a=function(){return t.apply(this,arguments)};return a.m=t,a.trust=t.trust,a.fragment=t.fragment,a.Fragment="[",a.mount=n.mount,a.route=Tn(),a.render=jt(),a.redraw=n.redraw,a.request=e.request,a.parseQueryString=Ut(),a.buildQueryString=Ht(),a.parsePathname=tt(),a.buildPathname=Qe(),a.vnode=me(),a.censor=Qt(),a.domFor=u.domFor,ot=a,ot}var $n=qn();const b=Re($n),Te={};function en(t){if(Te[t])return Te[t];throw new Error(`Component of type '${t}' was not found`)}function W(t,e,n=!1){Te[t]&&!n?console.warn(`Component ignored. Name '${t}' is already registered.`):Te[t]=e}function re(t){return t.type?t.hidden?null:b(en(t.type),{data:t}):(console.error(new Error("Given data is missing the .type property. Component can resolve the component"),t),null)}function oe(t){return Ln(t,On(t))}function ce(t,e){const n=zn(t,e);return An(t,n),n}function On(t){if("target"in t&&t.target&&t.property!=null&&t.property in t.target)return t.target[t.property];if("value"in t)return t.value}function An(t,e){"target"in t&&t.target&&t.property!=null?t.target[t.property]=e:In(t,"value")&&(t.value=e)}function In(t,e){const n=Object.getOwnPropertyDescriptor(t,e);return!n||!!n.writable||!!n.set}function zn(t,e){return"codec"in t&&t.codec?t.codec.encode(e):e}function Ln(t,e){return"codec"in t&&t.codec?t.codec.decode(e):e}function ge(t){return typeof t=="string"}function qe(t){return typeof t=="number"}function $e(t){return typeof t=="function"}function ut(t){return Array.isArray(t)}function tn(t){return t!=null&&typeof t=="object"&&!ut(t)}function Z(t,...e){return $e(t)?t(...e):null}function Nn(t){return $e(t)?t():t}function de(t,e){return t==null?null:e(t)}function ue(t,e,n){if(t!=null){if(e!=null&&t<e)return e;if(n!=null&&t>n)return n}return t}function fe(t){return t?ge(t)?t:ut(t)?t.map(fe).join(" "):Object.keys(t).filter(e=>Nn(t[e])).filter(e=>ge(e)&&!!e).join(" "):null}function ct(t,e,n){for(;t.length<e;)t=`${n}${t}`;return t}function B(t,e){return`twui-${t}`+(e?`-${e}`:"")}function st(t){let e=0,n=0;return"touches"in t?(e=t.touches.item(0).pageX,n=t.touches.item(0).pageY):(e=t.pageX,n=t.pageY),[e,n]}function Ee(t,e,n){e=e||t.target;const u=e.getBoundingClientRect(),a=window.pageXOffset||document.documentElement.scrollLeft,c=window.pageYOffset||document.documentElement.scrollTop,f=e.clientWidth,s=e.clientHeight;let[l,g]=st(t);n&&(l+=n[0],g+=n[1]);const h=l-a-u.left,d=g-c-u.top;return{width:f,height:s,x:h,y:d,normalizedX:h/f,normalizedY:d/s}}function se(t){return e=>de(e.attrs.data,n=>t(n,e))}function Oe({onStart:t,onMove:e,onEnd:n}){const u={target:null,activate:a=>{u.deactivate(),u.target=a.target,t&&t(a),e&&(document.addEventListener("mousemove",e,{passive:!1}),document.addEventListener("touchmove",e,{passive:!1})),n&&(document.addEventListener("mouseup",n),document.addEventListener("touchend",n),document.addEventListener("touchcancel",n))},deactivate:()=>{u.target=null,e&&(document.removeEventListener("mousemove",e),document.removeEventListener("touchmove",e)),n&&(document.removeEventListener("mouseup",n),document.removeEventListener("touchend",n),document.removeEventListener("touchcancel",n))},onStart:t,onMove:e,onEnd:n};return u}const nn="angle";W(nn,t=>{let e=0,n=!1,u=[0,0];function a(y){return y*(180/Math.PI)}function c(y){return y*(Math.PI/180)}function f(y){return ue((y/2+.5)*100,0,100)}function s(y){const M=y.attrs.data;e=oe(M)??e,M.degree&&(e=c(e)),g()}function l(y){g();const M=t.attrs.data,O=M.degree?c(e):e,z=ce(M,O);Z(y==="input"?M.onInput:M.onChange,M,z)}function g(){u[0]=Math.cos(e),u[1]=Math.sin(e)}function h(y){n=!0,v.activate(y)}let d;const v=Oe({onStart:y=>{const M=Ee(y);d=[-(M.x-M.width/2),-(M.y-M.height/2)],v.onMove(y)},onMove:y=>{y.preventDefault();const M=Ee(y,v.target.parentElement,d),O=M.normalizedX-.5,z=M.normalizedY-.5;n&&(e=Math.atan2(O,z),e+=e<0?2*Math.PI:0),l("input"),b.redraw()},onEnd:y=>{v.deactivate(),n=!1,l("change"),b.redraw()}});function q(y,M){e=c(M),l("input")}function $(y,M){e=c(M),l("change")}return{onremove:()=>{v.deactivate()},oninit:y=>{s(y)},onupdate:y=>{s(y)},view:()=>b("div",{class:B(nn),style:{"--angle-value":`${a(-e)+90}deg`,"--angle-percent":`${a(e)/360*100}%`}},b("div.left-container",b("div.pane",{style:{position:"relative",width:"100%","padding-top":"100%"}},b("div.angle-pane",{class:fe({"is-dragging":n}),style:{position:"absolute",top:"0.5rem",left:"0.5rem",width:"calc(100% - 1rem)",height:"calc(100% - 1rem)"}},b("div.angle-knob",{onmousedown:h,ontouchstart:h,style:{position:"absolute",width:"15px",height:"15px",top:`calc(${f(u[0])}% - 7px)`,left:`calc(${f(u[1])}% - 7px)`}})))),b("div.right-container",b("label",b.trust("&alpha;")),re({type:"number",min:0,max:360,step:.1,value:a(e),onInput:q,onChange:$})))}});function jn({axes:t,length:e,result:n}={}){t=t||{x:"right",y:"up"};const u=Object.keys(t),a=()=>(typeof e=="function"?e():e)||1;return{decode:c=>{let f=0,s=0;for(const g of u)switch(t[g]){case"right":s=c[g];break;case"left":s=-c[g];break;case"up":case"front":f=-c[g];break;case"down":case"back":f=c[g]}const l=a();return f/=l,s/=l,Math.atan2(s,f)||0},encode:c=>{const f=a(),s=f*Math.cos(c),l=f*Math.sin(c),g=n()||{};for(const h of u)switch(t[h]){case"right":g[h]=l;break;case"left":g[h]=-l;break;case"up":case"front":g[h]=-s;break;case"down":case"back":g[h]=s;break}return g}}}const rn="checkbox";W(rn,t=>{function e(n){const u=t.attrs.data,a=n.target.checked,c=ce(u,a);Z(u.onChange,u,c)}return{view:se(n=>{const u=oe(n)===!0;return b("label",{class:fe({[B(rn)]:!0,checked:u,disabled:n.disabled})},b("input",{type:"checkbox",checked:u,onchange:e,disabled:n.disabled}),n.text)})}});function an(t){let e=t.h%360,n=ue(t.s,0,1),u=ue(t.v,0,1),a=u*n,c=a*(1-Math.abs(e/60%2-1)),f=u-a;const s={r:0,g:0,b:0};return e<60?(s.r=a,s.g=c,s.b=0):e<120?(s.r=c,s.g=a,s.b=0):e<180?(s.r=0,s.g=a,s.b=c):e<240?(s.r=0,s.g=c,s.b=a):e<300?(s.r=c,s.g=0,s.b=a):(s.r=a,s.g=0,s.b=c),s.r+=f,s.g+=f,s.b+=f,s}function lt(t){let e=t.r,n=t.g,u=t.b,a=Math.max(e,n,u),c=a-Math.min(e,n,u),f=0,s=0;return c!==0&&(f=c/a,a===e?(s=(n-u)/c+(n<u?6:0),s=s%6*60):a===n?(s=(u-e)/c+2,s=s*60):(s=(e-n)/c+4,s=s*60)),{h:s,s:f,v:a}}class Sn{constructor(e,n){this.components=e,this.normalized=n}parse(e){e=e||[];const n={r:0,g:0,b:0,a:1};return this.components.forEach((u,a)=>{n[u]=(e[a]||0)/(this.normalized?1:255)}),n}format(e){return this.components.map(n=>(this.normalized?e[n]:Math.round(e[n]*255))||0)}}class Fn{constructor(e){this.components=e}parse(e){e=e||"rgba(0, 0, 0)";const n={r:0,g:0,b:0,a:1},u=e.replace(/[rgba\(\)]/gi,"").split(/,\s*?/gi).map(Number);return this.components.forEach((a,c)=>{n[a]=(u[c]||0)/(a==="a"?1:255)}),n}format(e){return this.components.join("")+"("+this.components.map(n=>n==="a"?e[n]:Math.round(e[n]*255)).join(", ")+")"}}class Dn{constructor(e){this.components=e}parse(e){e=e||"#000";const n={r:0,g:0,b:0,a:1};let u=e.match(/[0-9a-f]+/i)[0];return u.length===this.components.length&&(u=u.split("").map(a=>`${a}${a}`).join("")),this.components.forEach((a,c)=>{n[a]=parseInt(u.substr(c*2,2),16)/255}),n}format(e){return"#"+this.components.map(n=>ct(Math.round(e[n]*255).toString(16),2,"0")).join("")}}class Hn{constructor(e){this.components=e,this.componentsRev=e.slice().reverse()}parse(e){e=e||0;const n={r:0,g:0,b:0,a:1};return this.components.forEach((u,a)=>{n[u]=(e>>a*8&255)/255}),n}format(e){const n=this.componentsRev.map(u=>ct(Math.round(e[u]*255||0).toString(16),2,"0")).join("");return parseInt("0x"+n,16)}}class Vn{constructor(e,n){this.components=e,this.normalized=n}parse(e){e=e||{};const n={r:0,g:0,b:0,a:1};return this.components.forEach((u,a)=>{n[u]=(e[u]||0)/(this.normalized?1:255)}),n}format(e){const n={};return this.components.forEach((u,a)=>{n[u]=(this.normalized?e[u]:Math.round(e[u]*255))||0}),n}}const ye={};function be(t="rgb"){if(t in ye)return ye[t];const e=(t.match(/[rgba]+/)[0]||"").split("");return/(\[n?\])/.test(t)?ye[t]=new Sn(e,/\[n\]/.test(t)):/(\{n?\})/.test(t)?ye[t]=new Vn(e,/\{n\}/.test(t)):/0x/.test(t)?ye[t]=new Hn(e):/(\(\))/.test(t)?ye[t]=new Fn(e):ye[t]=new Dn(e),ye[t]}W("color-picker",t=>{let e=0,n=0,u=0,a=0;function c(w=n,E=u){return{h:e*360,s:w,v:E,a}}function f(w=n,E=u){return an(c(w,E))}function s(w=n,E=u,S=a){return{...f(w,E),a:S}}function l(w){e=w.h/360,n=w.s,u=w.v}function g(w){l(w),a=w.a}function h(w,E){return be("#rgb").format(s(w,E))}function d(w,E){return be("#rgba").format(s(w,E))}function v(w=n,E=u,S=a){return be("rgba()").format(s(w,E,S))}function q(w,E){const S=be(E||"rgb").parse(w);g({...lt(S),a:S.a})}function $(w){return be(w).format(s())}function y(){de(t.attrs.data,w=>{const E=$(w.format),S=ce(w,E);Z(w.onInput,w,S)})}function M(){de(t.attrs.data,w=>{const E=$(w.format),S=ce(w,E);Z(w.onChange,w,S)})}function O(){return de(t.attrs.data,w=>w.format&&w.format.match(/a/i))}function z(w){V(w,"r")}function H(w){V(w,"g")}function ee(w){V(w,"b")}function V(w,E){const S=s();S[E]=parseInt(w.target.value,10)/255,l(lt(S)),y(),M()}function R(w){q(w.target.value,O()?"rgba":"rgb"),y(),M()}let x,C;function j(w){C="sv",P(w.target),N(w)}function U(w){C="h",P(w.target),N(w)}function A(w){C="a",P(w.target),N(w)}function P(w){I(),x=w;const E={passive:!1};document.addEventListener("mousemove",N,E),document.addEventListener("mouseup",_,E),document.addEventListener("touchmove",N,E),document.addEventListener("touchend",_,E),document.addEventListener("touchcancel",_,E)}function I(){document.removeEventListener("mousemove",N),document.removeEventListener("mouseup",_),document.removeEventListener("touchmove",N),document.removeEventListener("touchend",_),document.removeEventListener("touchcancel",_)}function N(w){if(!x)return;w.preventDefault();const E=x.getBoundingClientRect(),S=window.pageXOffset||document.documentElement.scrollLeft,pe=window.pageYOffset||document.documentElement.scrollTop,xe=x.clientWidth,he=x.clientHeight;let[te,Ce]=st(w);te=ue((te-S-E.left)/xe,0,1),Ce=ue((Ce-pe-E.top)/he,0,1),C==="sv"&&(n=te,u=1-Ce),C==="h"&&(e=1-te),C==="a"&&(a=te),y(),b.redraw()}function _(){x!=null&&(x=null,I(),M())}return{onremove:()=>{I()},oninit:()=>{de(t.attrs.data,w=>{q(oe(w),w.format)})},view:()=>de(t.attrs.data,w=>{const E=s();return b("div",{class:B(w.type)},b(".color-picker-inputs",b("input.input-hex[type='text']",{value:O()?d():h(),onchange:R}),b("input.input-r[type='number']",{min:0,max:255,step:1,value:Math.round(E.r*255),onchange:z}),b("input.input-g[type='number']",{min:0,max:255,step:1,value:Math.round(E.g*255),onchange:H}),b("input.input-b[type='number']",{min:0,max:255,step:1,value:Math.round(E.b*255),onchange:ee})),b(".color-picker-panel",b(".color-picker-sv",{tabindex:0,onmousedown:j,ontouchstart:j,style:{"background-color":`${v(1,1,1)}`,"user-select":"none"}},b(".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"}}),b(".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"}}),b(".color-picker-sv-cursor",{style:{"user-select":"none","pointer-events":"none","background-color":`${v(e,n,1)}`,left:`${n*100}%`,top:`${(1-u)*100}%`}})),b(".color-picker-h",{tabindex:0,onmousedown:U,ontouchstart:U,style:{"user-select":"none",background:"linear-gradient(to right, #f00 0, #f0f 17% , #00f 33% , #0ff 50% , #0f0 67% , #ff0 83% , #f00 100%)"}},b(".color-picker-h-cursor",{style:{"user-select":"none","pointer-events":"none","background-color":`${v(1,1,1)}`,position:"absolute",left:`${(1-e)*100}%`}})),O()?b(".color-picker-a",{tabindex:0,onmousedown:A,ontouchstart:A,style:{"user-select":"none"}},b(".color-picker-a-bg",{style:{background:`linear-gradient(to right, ${v(n,u,0)}, ${v(n,u,1)})`}}),b(".color-picker-a-cursor",{style:{"user-select":"none","pointer-events":"none",position:"absolute",left:`${a*100}%`}})):null))})}}),W("color",()=>{let t,e=!1,n,u;const a=be("rgba()");function c(h){t=h.attrs.data,n=oe(t),u=a.format(be(t.format).parse(n))}function f(){e=!e}function s(h,d){const v=ce(t,d);Z(t.onInput,t,v)}function l(h,d){const v=ce(t,d);Z(t.onChange,t,v)}function g(){return ge(n)?n:qe(n)?"0x"+ct(n.toString(16),8,"0"):ut(n)?n.map(h=>h<1&&h>0?h.toFixed(2):h).join(" , "):tn(n)?Object.keys(n).map(h=>{const d=n[h];return`${h}: ${d<1&&d>0?d.toFixed(2):d}`}).join(" "):n==null?"null":"?"}return{oninit:h=>{c(h)},onupdate:h=>{c(h)},view:()=>b("div",{class:fe({[B(t.type)]:!0,[B(t.type+"-open")]:e})},b("button[type='button']",{style:{"background-color":u},onclick:f},g()||"?"),re({type:"color-picker",value:n,format:t.format,onInput:s,onChange:l,hidden:!e}))}});const on=()=>{let t,e,n,u,a,c,f,s,l,g;function h(R){g=R;const x=R.attrs.data;t=x.type,f=x.type==="slider",e=f&&x.min==null?0:x.min,n=f&&x.max==null?1:x.max,u=x.step,s=oe(x),a=x.disabled,l=f?(s-e)/(n-e)*100:0}function d(R,x){x=s=ue(isNaN(x)?null:x,e,n);const C=g.attrs.data,j=ce(C,x);Z(R==="input"?C.onInput:C.onChange,C,j),b.redraw()}function v(R){const x=R.target;d("input",parseFloat(x.value))}function q(R){const x=R.target;d("change",parseFloat(x.value))}function $(R){return R=ue(R,e,n),u!=null&&(R=Math.round(R/u)*u),parseFloat(R.toFixed(5))}let y=Oe({onStart:R=>{y.onMove(R)},onMove:R=>{R.preventDefault();const x=Ee(R,y.target).normalizedX;d("input",$(e+x*(n-e)))},onEnd:()=>{d("change",s),y.deactivate()}});function M(R){a||y.activate(R)}function O(R){const x=R.key||R.keyCode,j=(u||1)*(x==="ArrowLeft"?-1:x==="ArrowRight"?1:0);j&&d("change",$((s||0)+j))}function z(R){R.preventDefault();const x=(R.ctrlKey?.5:1)*ue(R.deltaY,-1,1),C=(u||.2)*x;C&&d("change",$((s||0)-C))}function H(){}function ee(){}function V(){return b(".twui-progress",{style:"user-select: none;",class:fe({disabled:!!a}),...a?{}:{tabindex:0,onmousedown:M,ontouchstart:M,onkeydown:O,onwheel:z}},b(".twui-progress-bar",{style:{width:`${l}%`,"pointer-events":"none","user-select":"none"}}))}return{onremove:()=>{y.deactivate()},oninit:R=>{h(R)},onupdate:R=>{h(R)},view:()=>b("div",{class:B(t)},f?V():null,b("input[type='number']",{min:e,max:n,step:u,value:s,oninput:v,onchange:q,onwheel:z,onfocus:H,onblur:ee,placeholder:c,disabled:a}))}};W("number",on),W("slider",on);const un="point",cn=[0,1],_n=["x","y"];W(un,t=>{let e,n,u=cn,a=cn,c=0,f=0,s=0,l=0,g,h,d;function v(O){const z=O.attrs.data,H=z.keys||_n;e=H[0],n=H[1];const ee=oe(z)??{[e]:c,[n]:f};d=z.snap,c=ee[e]||0,f=ee[n]||0,u=z.xRange||u,a=z.yRange||a,s=(c-u[0])/(u[1]-u[0]),l=(f-a[0])/(a[1]-a[0]);const V=z.reset;V&&(g=(V[0]-u[0])/(u[1]-u[0]),h=(V[1]-a[0])/(a[1]-a[0]))}function q(){c=u[0]+(u[1]-u[0])*s,f=a[0]+(a[1]-a[0])*l,d>0&&(c=Math.floor(c/d)*d,f=Math.floor(f/d)*d,s=(c-u[0])/(u[1]-u[0]),l=(f-a[0])/(a[1]-a[0]))}function $(O){q();const z=t.attrs.data,H=oe(z)??{[e]:c,[n]:f};H[e]=c,H[n]=f,Z(O==="input"?z.onInput:z.onChange,z,H)}function y(O){M.activate(O)}const M=Oe({onMove:O=>{O.preventDefault();const z=M.target,H=z.getBoundingClientRect(),ee=window.pageXOffset||document.documentElement.scrollLeft,V=window.pageYOffset||document.documentElement.scrollTop,R=z.clientWidth,x=z.clientHeight;let[C,j]=st(O);s=ue((C-ee-H.left)/R,0,1),l=ue((j-V-H.top)/x,0,1),$("input"),b.redraw()},onEnd:()=>{M.deactivate(),g!=null&&h!=null&&(s=g,l=h,$("input")),$("change"),b.redraw()}});return{onremove:M.deactivate,oninit:v,onupdate:v,view:()=>b("div",{class:B(un),tabindex:0,onmousedown:y,ontouchstart:y},b(".point-x-axis",{style:{"pointer-events":"none",position:"absolute",left:0,right:0,top:`${l*100}%`,height:"1px"}}),b(".point-y-axis",{style:{"pointer-events":"none",position:"absolute",left:`${s*100}%`,top:0,bottom:0,width:"1px"}}),b(".point-cursor",{style:{"pointer-events":"none",left:`${s*100}%`,top:`${l*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)"}}))}});const sn="position",Yn=["x","y","z"];W(sn,t=>{function e(n,u,a){const c=t.attrs.data,f=oe(c)||{};f[u]=isNaN(a)?null:a;const s=ce(c,f);Z(n==="input"?c.onInput:c.onChange,c,s,u)}return{view:se(n=>{const u=n.keys||Yn,a=oe(n);return b("div",{class:B(sn)},u.map(c=>re({type:"number",min:n.min,max:n.max,step:n.step,value:a==null?void 0:a[c],disabled:n.disabled,onInput:(f,s)=>e("input",c,s),onChange:(f,s)=>e("change",c,s),placeholder:c})))})}});const Bn=[];function Un(t){const e=[];for(const n of t){if(ge(n)||qe(n)){e.push({value:n,label:String(n)});continue}if("value"in n){e.push(n);continue}}return e}function Kn(t){const e=[];for(const n of t)ge(n)||qe(n)||n==null?e.push({value:n,label:String(n)}):"value"in n?e.push(n):"options"in n&&e.push({label:n.label,disabled:n.disabled,options:Array.isArray(n.options)?Un(n.options):ln(n.options)});return e}function ln(t){return Object.keys(t).sort().map(e=>({value:t[e],label:e}))}function Xn(t){const e=t.attrs.data.options;return e?Array.isArray(e)?Kn(e):ln(e):Bn}W("select",t=>{let e;function n(){const c=t.attrs.data,f=oe(c);let s=0;for(const l of e)if("options"in l)for(const g of l.options){if(g.value===f)return s;s++}else{if(l.value===f)return s;s++}}function u(c){let f=0;for(const s of e)if("options"in s)for(const l of s.options){if(f===c)return l.value;f+=1}else{if(f===c)return s.value;f+=1}return null}function a(c){const f=c.target,s=t.attrs.data,l=u(f.selectedIndex),g=ce(s,l);Z(s.onChange,s,g)}return{view:se(c=>(e=Xn(t),b("select",{class:B(c.type),selectedIndex:n(),onchange:a,disabled:c.disabled},e.map(f=>"options"in f?b("optgroup",{disabled:!!f.disabled,label:f.label||""},f.options.map(fn)):fn(f)))))}});function fn(t){return b("option",{value:t.value,label:t.label,disabled:!!t.disabled},t.label||"")}const pn="spherical",Gn=["phi","theta"];W(pn,t=>{let e=0,n=0,u=!1,a=[0,0],c=[0,0],f;function s(x){return x*(180/Math.PI)}function l(x){return x*(Math.PI/180)}function g(x){return ue((x/2+.5)*100,0,100)}function h(x){const C=x.attrs.data,j=oe(C)||{phi:C.degree?s(e):e,theta:C.degree?s(n):n},[U,A]=C.keys||Gn;return{data:C,value:j,kPhi:U,kTheta:A}}function d(x){const{data:C,value:j,kPhi:U,kTheta:A}=h(x);for(e=j[U]||0,n=j[A]||0,C.degree&&(e=l(e),n=l(n));n<0;)n+=Math.PI;for(;n>Math.PI;)n-=Math.PI;u=n>Math.PI/2,q()}function v(x){q();const{data:C,value:j,kPhi:U,kTheta:A}=h(t);j[U]=C.degree?s(e):e,j[A]=C.degree?s(n):n;const P=ce(C,j);Z(x==="input"?C.onInput:C.onChange,C,P)}function q(){a[0]=Math.cos(e),a[1]=Math.sin(e),c[0]=Math.sin(n)*Math.cos(e),c[1]=Math.sin(n)*Math.sin(e)}function $(x){f="phi",O.activate(x)}function y(x){f="theta",O.activate(x)}let M;const O=Oe({onStart:x=>{const C=Ee(x);M=[-(C.x-C.width/2),-(C.y-C.height/2)],O.onMove(x)},onMove:x=>{x.preventDefault();const C=Ee(x,O.target.parentElement,M),j=C.normalizedX-.5,U=C.normalizedY-.5;if(f==="phi")e=Math.atan2(j,U),e+=e<0?2*Math.PI:0;else if(f==="theta"){const A=a,P=[U,j],I=(A[0]*P[0]+A[1]*P[1])/Math.sqrt(A[0]*A[0]+A[1]*A[1]);n=Math.PI*ue(I,0,.5),u&&(n=Math.PI-n)}v("input"),b.redraw()},onEnd:x=>{O.deactivate(),f=null,v("change"),b.redraw()}});function z(x,C){e=l(C),v("input")}function H(x,C){e=l(C),v("change")}function ee(x,C){n=l(C),v("input")}function V(x,C){n=l(C),v("change")}function R(x,C){u=C,n=Math.PI-n,v("change"),setTimeout(()=>b.redraw())}return{onremove:()=>{O.deactivate()},oninit:x=>{d(x)},onupdate:x=>{d(x)},view:()=>b("div",{class:B(pn),style:{"--spherical-phi":`${s(-e)+90}deg`}},b("div.left-container",b("div.pane",{style:{position:"relative",width:"100%","padding-top":"100%"}},b("div.phi-pane",{class:fe({"is-dragging":f==="phi"}),style:{position:"absolute",top:"0.5rem",left:"0.5rem",width:"calc(100% - 1rem)",height:"calc(100% - 1rem)"}},b("div.phi-knob",{onmousedown:$,ontouchstart:$,style:{position:"absolute",width:"15px",height:"15px",top:`calc(${g(a[0])}% - 7px)`,left:`calc(${g(a[1])}% - 7px)`}})),b("div.theta-pane",{class:fe({"is-dragging":f==="theta"}),style:{position:"absolute",top:"1.5rem",left:"1.5rem",width:"calc(100% - 3rem)",height:"calc(100% - 3rem)"}},b("div.theta-knob",{onmousedown:y,ontouchstart:y,style:{position:"absolute",width:"15px",height:"15px",top:`calc(${g(c[0])}% - 7px)`,left:`calc(${g(c[1])}% - 7px)`}})))),b("div.right-container",b("label",b.trust("&phi;")),re({type:"number",min:0,max:360,step:.1,value:s(e),onInput:z,onChange:H}),b("label",b.trust("&theta;")),re({type:"number",min:0,max:180,step:.1,value:s(n),onInput:ee,onChange:V}),re({type:"checkbox",value:u,text:"Backface",onChange:R})))}});function Qn({axes:t,length:e,result:n}={}){t=t||{x:"right",y:"up",z:"back"};const u=Object.keys(t),a=()=>(typeof e=="function"?e():e)||1;return{decode:c=>{let f=0,s=0,l=0;for(const h of u)switch(t[h]){case"right":s=c[h];break;case"left":s=-c[h];break;case"back":f=c[h];break;case"front":f=-c[h];break;case"up":l=c[h];break;case"down":l=-c[h];break}const g=a();return f/=g,s/=g,l/=g,{phi:Math.atan2(s,f)||0,theta:Math.atan(Math.sqrt(f*f+s*s)/l)||0}},encode:({phi:c,theta:f})=>{const s=a(),l=s*Math.sin(f)*Math.cos(c),g=s*Math.sin(f)*Math.sin(c),h=s*Math.cos(f),d=(n==null?void 0:n())||{};for(const v of u)switch(t[v]){case"right":d[v]=g;break;case"left":d[v]=-g;break;case"back":d[v]=l;break;case"front":d[v]=-l;break;case"up":d[v]=h;break;case"down":d[v]=-h;break}return d}}}W("text",t=>{function e(n){const u=n.target,a=t.attrs.data,c=ce(a,u.value);Z(n.type==="input"?a.onInput:a.onChange,a,c)}return{view:se(n=>b("input[type='text']",{class:B(n.type),value:oe(n),oninput:e,onchange:e,placeholder:n.placeholder,disabled:n.disabled}))}});const Wn="accordion",Jn=[];W(Wn,()=>({view:se(t=>{const e=t.children||Jn;return t.expand=Zn(t.expand,e),b.fragment({},e.map((n,u)=>(n.type="group",n.collapsible=!0,n.collapsed=u!==t.expand,re(n))))})}));function Zn(t,e){let n=null;for(let u=0;u<e.length;u++)if(!e[u].collapsed){if(u!==t)return u;n==null&&(n=u)}return n}const ft="container";W(ft,()=>({view:se(t=>{var e;return b("div",{class:fe({[B(ft)]:!0,[B(ft,"horizontal")]:t.horizontal}),style:t.style},b.fragment({},(e=t.children)==null?void 0:e.map(re)))})}));const we="group";W(we,t=>{function e(a){de(t.attrs.data,c=>{c.collapsed=!c.collapsed,Z(c.onToggle,c),c.collapsed?Z(c.onCollapse,c):Z(c.onExpand,c)})}function n(a){return!a.title&&!a.collapsible?null:b("div",{class:B(we,"title"),onclick:a.collapsible?e:null},a.title)}function u(a){var c;return a.collapsed||!a.children?[]:(c=a.children)==null?void 0:c.map(f=>ge(f.label)?b("div",{class:B(we,"control")},b("label",f.label),b("section",re(f))):re(f))}return{view:se(a=>b("div",{class:fe({[B(we)]:!0,[B(we,"collapsible")]:a.collapsible,[B(we,"collapsed")]:a.collapsed}),style:a.style},b.fragment({},[n(a)]),b.fragment({},[u(a)])))}}),W("tabs",()=>({view:se(t=>{const e=t.children||[],n=ue(t.active||0,0,e.length-1),u=e[n];return b("div",{class:B(t.type)},b("div",{key:`${t.type}-list`,class:B(`${t.type}-list`)},e.map((a,c)=>b("button[type='button']",{key:`${t.type}-${c}`,onclick:()=>t.active=c,class:n===c?"is-active":""},a.label||a.title))),b.fragment({key:`panel-${t.active}`},[re({type:"group",children:u.children,style:u.style})]))})}));const Ae="button";W(Ae,t=>({view:se(e=>b(Ae,{type:Ae,class:B(Ae),onclick:()=>Z(e.onClick,e),disabled:e.disabled},e.text))})),W("content",()=>({view:se(t=>b.fragment({},[t.content]))}));const hn="image";W("image",t=>{const e=()=>{de(t.attrs.data,a=>Z(a.onClick,a))};function n(a){if(!a)return null;const[c,f]=(a||"1x1").split("x").map(Number);return`${(f/c||1)*100}%`}function u(a){if(qe(a.width))return`${a.width}px`;if(ge(a.width))return a.width}return{view:se(a=>(Array.isArray(a.src)?a.src:[a.src]).map(c=>b("picture",{class:fe({[B(hn)]:!0,[B(hn,"aspect")]:!!a.aspect}),style:{"--twui-aspect":n(a.aspect),"--twui-fit":a.fit||"fit",width:u(a)}},b("img",{src:c,onclick:e}))))}});function Q(t,e){return Object.keys(e).forEach(n=>{t[n]=e[n]}),t}function ve(){let t=null,e={},n;for(let u=0;u<arguments.length;u++){const a=arguments[u];ge(a)?t=a:tn(a)?e=a:$e(a)&&(n=a)}if(t&&(e.label=t),n){const u=this.controls;this.controls=[],n(this),e.children=this.controls,this.controls=u}return e}function le(){let t={};return arguments.length>1&&(t=arguments[2]||t,t.target=arguments[0],t.property=arguments[1],t.label===void 0&&(t.label=String(t.property||""))),arguments.length===1&&(t=arguments[0]||t),t}class pt{constructor(){this.controls=[]}group(){const e=ve.apply(this,arguments);return this.add(Q(e,{type:"group",children:e.children,label:null,title:e.label}))}collapsible(){const e=ve.apply(this,arguments);return this.add(Q(e,{type:"group",children:e.children,collapsible:!0,label:null,title:e.label}))}container(){const e=ve.apply(this,arguments);return this.add(Q(e,{type:"container",children:e.children}))}tabs(){const e=ve.apply(this,arguments);return this.add(Q(e,{type:"tabs",active:e.active||0,children:e.children}))}accordion(){const e=ve.apply(this,arguments);return this.add(Q(e,{type:"accordion",children:e.children}))}checkbox(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"checkbox"}))}text(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"text"}))}number(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"number"}))}slider(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"slider"}))}position(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"position"}))}select(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"select"}))}color(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"color"}))}colorPicker(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"color-picker"}))}point(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"point"}))}spherical(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"spherical"}))}angle(){const e=le.apply(this,arguments);return this.add(Q(e,{type:"angle"}))}object(e,n,u={}){return this.group(e,a=>{for(const c in n){if(!u[c]){switch(typeof n[c]){case"number":a.number(n,c);break;case"string":a.text(n,c);break;case"boolean":a.checkbox(n,c);break}continue}switch(u[c].type){case"text":a.text(n,c,u[c]);break;case"number":a.number(n,c,u[c]);break;case"checkbox":a.checkbox(n,c,u[c]);break;case"select":a.select(n,c,u[c]);break;case"color":a.color(n,c,u[c]);break;case"color-picker":a.colorPicker(n,c,u[c]);break;case"point":a.point(n,c,u[c]);break;case"spherical":a.spherical(n,c,u[c]);break;case"angle":a.angle(n,c,u[c]);break}}})}button(e,n={}){return this.add(Q(n,{type:"button",text:e}))}image(){const e=ve.apply(this,arguments);return this.add(Q(e,{type:"image"}))}content(e,n,u={}){return this.add(Q(u,{type:"content",label:e,content:n}))}add(e){return this.controls.push(Q(e,{remove:()=>{const n=this.controls.indexOf(e);n>=0&&this.controls.splice(n,1)}})),e}}const er=b;function tr(t){const e=new pt;return t(e),e.controls}function nr(t,e){if(t=typeof t=="string"?document.querySelector(t):t,t.classList.add("twui-root"),!e)b.mount(t,null);else if(Array.isArray(e))b.mount(t,{view:()=>re({type:"group",children:e})});else if($e(e)){const n=new pt;e(n),b.mount(t,{view:()=>re({type:"group",children:n.controls})})}else b.mount(t,{view:()=>re(e)})}function rr(t){t=typeof t=="string"?document.querySelector(t):t,b.mount(t,null)}function ir(){b.redraw()}X.Builder=pt,X.angleCodec=jn,X.build=tr,X.component=W,X.getColorFormatter=be,X.getComponent=en,X.getValue=oe,X.h=er,X.hsv2rgb=an,X.mount=nr,X.redraw=ir,X.renderModel=re,X.rgb2hsv=lt,X.setValue=ce,X.sphericalCodec=Qn,X.unmount=rr,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=tweak-ui.umd.js.map