mancha 0.7.2 → 0.8.0

package/README.md

@@ -1,17 +1,17 @@
 # mancha
 
-`mancha` is a simple HTML templating and rendering library for simple people. It works on the
+`mancha` is a simple HTML templating and reactivity library for simple people. It works on the
 browser or the server. It can be used as a command-line tool, imported as a Javascript module, or as
 a plugin for [`Gulp`](https://gulpjs.com).
 
 Here's a small sample of the things that you can do with `mancha`:
 
 ```html
-<!-- Use the bundled file from `unkpg`. -->
-<script src="//unpkg.com/mancha" target="main" init></script>
+<!-- Use the bundled file from `unkpg` and include basic CSS utilities. -->
+<script src="//unpkg.com/mancha" target="main" css="utils" init></script>
 
 <!-- Scoped variables using the `:data` attribute. -->
-<main :data="{count: 0, name: 'Stranger'}">
+<main class="p-4" :data="{count: 0, name: 'Stranger'}">
   <!-- Custom HTML tag element registration. -->
   <template is="counter">
     <div>
@@ -21,14 +21,16 @@ Here's a small sample of the things that you can do with `mancha`:
   </template>
 
   <!-- Custom HTML tag element usage. -->
-  <counter>Click me:</counter>
+  <counter class="my-2">Click me:</counter>
 
   <!-- Reactive data binding. -->
   <p>Enter your name: <input type="text" :bind="name" /></p>
-  <p>Hello, {{ name }}!</p>
+  <p>Hello, <span class="underline">{{ name }}</span>!</p>
 
   <!-- Include HTML partials. -->
-  <include src="html/partial/footer.tpl.html"></include>
+  <footer class="text-xs">
+    <include src="html/partial/footer.tpl.html"></include>
+  </footer>
 </main>
 ```
 
@@ -46,7 +48,7 @@ None of them have all the key features that make `mancha` unique:
 | Feature               | mancha | Svelte | React.js | Vue.js | petite-vue | Alpine.js |
 | --------------------- | ------ | ------ | -------- | ------ | ---------- | --------- |
 | Simple to learn       | ✔️     | ❌     | ❌       | ❌     | ✔️         | ✔️        |
-| < 10kb compressed     | ✔️     | ❌     | ❌       | ❌     | ✔️         | ❌        |
+| < 12kb compressed     | ✔️     | ❌     | ❌       | ❌     | ✔️         | ❌        |
 | Custom web components | ✔️     | ✔️     | ✔️       | ✔️     | ❌         | ❌        |
 | Client-side rendering | ✔️     | ❌     | ❌       | ✔️     | ✔️         | ✔️        |
 | Server-side rendering | ✔️     | ✔️     | ✔️       | ✔️     | ❌         | ❌        |
@@ -109,9 +111,9 @@ Once the HTML has been preprocessed, it is rendered by traversing every node in
 a series of plugins. Each plugin is only applied if specific conditions are met such as the HTML
 element tag or attributes match a specific criteria. Here's the list of attributes handled:
 
-- `:data` provides scoped variables to all subnodes
+- `:data` provides scoped variables to all subnodes, evaluated asynchronously
   ```html
-  <div :data="{name: 'Stranger'}"></div>
+  <div :data="{name: 'Stranger', ...(await fetch(url).then(res => res.json()))}"></div>
   ```
 - `:for` clones the node and repeats it
   ```html
@@ -160,6 +162,19 @@ element tag or attributes match a specific criteria. Here's the list of attribut
   <button :data="{label: 'Click Me'}">{{ label }}</button>
   ```
 
+## Styling
+
+Some basic styling rules are built into the library and can be optionally used. The styling
+component was designed to be used in the browser, and it's enabled by adding a `css` attribute
+to the `<script>` tag that loads `mancha`. The supported rulesets are:
+
+- `basic`: inspired by [these rules](https://www.swyx.io/css-100-bytes), the full CSS can be found
+  [here](./src/css_raw_basic.css).
+- `utils`: utility classes inspired by [tailwindcss](https://tailwindcss.com), the resulting CSS is
+  a drop-in replacement for a subset of the classes provided by `tailwindcss` with the main
+  exception of the color palette which is borrowed from
+  [material design](https://www.materialpalette.com/colors).
+
 ## Usage
 
 ### Client Side Rendering (CSR)
@@ -179,7 +194,8 @@ Script tag attributes:
 - `init`: whether to automatically render upon script load
 - `target`: document elements separated by `+` to render e.g. "body" or "head+body" (defaults to
   "body")
-- `css`: inject predefined CSS rules known to Mancha (experimental)
+- `css`: inject predefined CSS rulesets into the `<head>` element, see the
+  [styling section](#styling) for more details.
 
 For a more complete example, see [examples/browser](./examples/browser).
 

package/dist/cli.js

@@ -12,7 +12,7 @@ const args = yargs(hideBin(process.argv))
     .parse();
 Mancha.debug(args.debug);
 new Promise(async (resolve, reject) => {
-    await Mancha.update(JSON.parse(args.vars || "{}"));
+    Object.entries(JSON.parse(args.vars || "{}")).forEach(([key, value]) => (Mancha.$[key] = value));
     const fragment = await Mancha.preprocessLocal(args["input"]);
     await Mancha.renderNode(fragment);
     if (!args.output || args.output === "-") {

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveProxyStore } from "./reactive.js";
 import { ParserParams, RenderParams } from "./interfaces.js";
+import { SignalStore } from "./store.js";
 export type EvalListener = (result: any, dependencies: string[]) => any;
 /**
  * Returns the directory name from a given file path.
@@ -25,12 +25,9 @@ export declare function makeEvalFunction(code: string, args?: string[]): Functio
  * Represents an abstract class for rendering and manipulating HTML content.
  * Extends the `ReactiveProxyStore` class.
  */
-export declare abstract class IRenderer extends ReactiveProxyStore {
+export declare abstract class IRenderer extends SignalStore {
     protected debugging: boolean;
     protected readonly dirpath: string;
-    protected readonly evalkeys: string[];
-    protected readonly expressionCache: Map<string, Function>;
-    protected readonly evalCallbacks: Map<string, EvalListener[]>;
     readonly _skipNodes: Set<Node>;
     readonly _customElements: Map<string, Node>;
     abstract parseHTML(content: string, params?: ParserParams): DocumentFragment;
@@ -89,37 +86,6 @@ export declare abstract class IRenderer extends ReactiveProxyStore {
      * @param args - The arguments to be logged.
      */
     log(...args: any[]): void;
-    /**
-     * Retrieves or creates a cached expression function based on the provided expression.
-     * @param expr - The expression to retrieve or create a cached function for.
-     * @returns The cached expression function.
-     */
-    private cachedExpressionFunction;
-    /**
-     * Evaluates an expression and returns the result along with its dependencies.
-     * If the expression is already stored, it returns the stored value directly.
-     * Otherwise, it performs the expression evaluation using the cached expression function.
-     * @param expr - The expression to evaluate.
-     * @param args - Optional arguments to be passed to the expression function.
-     * @returns A promise that resolves to the result and the dependencies of the expression.
-     */
-    eval(expr: string, args?: {
-        [key: string]: any;
-    }): Promise<[any, string[]]>;
-    /**
-     * This function is intended for internal use only.
-     *
-     * Executes the given expression and invokes the provided callback whenever the any of the
-     * dependencies change.
-     *
-     * @param expr - The expression to watch for changes.
-     * @param args - The arguments to be passed to the expression during evaluation.
-     * @param callback - The callback function to be invoked when the dependencies change.
-     * @returns A promise that resolves when the initial evaluation is complete.
-     */
-    watchExpr(expr: string, args: {
-        [key: string]: any;
-    }, callback: EvalListener): Promise<void>;
     /**
      * Preprocesses a node by applying all the registered preprocessing plugins.
      *

package/dist/core.js

@@ -1,7 +1,7 @@
-import { ReactiveProxyStore } from "./reactive.js";
 import { Iterator } from "./iterator.js";
 import { RendererPlugins } from "./plugins.js";
-import { traverse } from "./dome.js";
+import { nodeToString, traverse } from "./dome.js";
+import { SignalStore } from "./store.js";
 /**
  * Returns the directory name from a given file path.
  * @param fpath - The file path.
@@ -40,12 +40,9 @@ export function makeEvalFunction(code, args = []) {
  * Represents an abstract class for rendering and manipulating HTML content.
  * Extends the `ReactiveProxyStore` class.
  */
-export class IRenderer extends ReactiveProxyStore {
+export class IRenderer extends SignalStore {
     debugging = false;
     dirpath = "";
-    evalkeys = ["$elem", "$event"];
-    expressionCache = new Map();
-    evalCallbacks = new Map();
     _skipNodes = new Set();
     _customElements = new Map();
     /**
@@ -139,81 +136,6 @@ export class IRenderer extends ReactiveProxyStore {
         if (this.debugging)
             console.debug(...args);
     }
-    /**
-     * Retrieves or creates a cached expression function based on the provided expression.
-     * @param expr - The expression to retrieve or create a cached function for.
-     * @returns The cached expression function.
-     */
-    cachedExpressionFunction(expr) {
-        if (!this.expressionCache.has(expr)) {
-            this.expressionCache.set(expr, makeEvalFunction(expr, this.evalkeys));
-        }
-        return this.expressionCache.get(expr);
-    }
-    /**
-     * Evaluates an expression and returns the result along with its dependencies.
-     * If the expression is already stored, it returns the stored value directly.
-     * Otherwise, it performs the expression evaluation using the cached expression function.
-     * @param expr - The expression to evaluate.
-     * @param args - Optional arguments to be passed to the expression function.
-     * @returns A promise that resolves to the result and the dependencies of the expression.
-     */
-    async eval(expr, args = {}) {
-        if (this.store.has(expr)) {
-            // Shortcut: if the expression is just an item from the value store, use that directly.
-            const result = this.get(expr);
-            return [result, [expr]];
-        }
-        else {
-            // Otherwise, perform the expression evaluation.
-            const fn = this.cachedExpressionFunction(expr);
-            const vals = this.evalkeys.map((key) => args[key]);
-            if (Object.keys(args).some((key) => !this.evalkeys.includes(key))) {
-                throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);
-            }
-            const [result, dependencies] = await this.trace(async function () {
-                return fn.call(this, ...vals);
-            });
-            this.log(`eval \`${expr}\` => `, result, `[ ${dependencies.join(", ")} ]`);
-            return [result, dependencies];
-        }
-    }
-    /**
-     * This function is intended for internal use only.
-     *
-     * Executes the given expression and invokes the provided callback whenever the any of the
-     * dependencies change.
-     *
-     * @param expr - The expression to watch for changes.
-     * @param args - The arguments to be passed to the expression during evaluation.
-     * @param callback - The callback function to be invoked when the dependencies change.
-     * @returns A promise that resolves when the initial evaluation is complete.
-     */
-    watchExpr(expr, args, callback) {
-        // Early exit: this eval has already been registered, we just need to add our callback.
-        if (this.evalCallbacks.has(expr)) {
-            this.evalCallbacks.get(expr)?.push(callback);
-            // Trigger the eval manually upon registration, to ensure the callback is called immediately.
-            return this.eval(expr, args).then(([result, dependencies]) => callback(result, dependencies));
-        }
-        // Otherwise, register the callback provided.
-        this.evalCallbacks.set(expr, [callback]);
-        // Keep track of dependencies each evaluation.
-        const prevdeps = [];
-        const inner = async () => {
-            // Evaluate the expression first.
-            const [result, dependencies] = await this.eval(expr, args);
-            // Trigger all registered callbacks.
-            const callbacks = this.evalCallbacks.get(expr) || [];
-            await Promise.all(callbacks.map((x) => x(result, dependencies)));
-            // Watch the dependencies for changes.
-            if (prevdeps.length > 0)
-                this.unwatch(prevdeps, inner);
-            prevdeps.splice(0, prevdeps.length, ...dependencies);
-            this.watch(dependencies, inner);
-        };
-        return inner();
-    }
     /**
      * Preprocesses a node by applying all the registered preprocessing plugins.
      *
@@ -225,7 +147,7 @@ export class IRenderer extends ReactiveProxyStore {
     async preprocessNode(root, params) {
         params = { dirpath: this.dirpath, maxdepth: 10, ...params };
         const promises = new Iterator(traverse(root, this._skipNodes)).map(async (node) => {
-            this.log("Preprocessing node:\n", node);
+            this.log("Preprocessing node:\n", nodeToString(node, 128));
             // Resolve all the includes in the node.
             await RendererPlugins.resolveIncludes.call(this, node, params);
             // Resolve all the relative paths in the node.
@@ -252,7 +174,7 @@ export class IRenderer extends ReactiveProxyStore {
         // Iterate over all the nodes and apply appropriate handlers.
         // Do these steps one at a time to avoid any potential race conditions.
         for (const node of traverse(root, this._skipNodes)) {
-            this.log("Rendering node:\n", node);
+            this.log("Rendering node:\n", nodeToString(node, 128));
             // Resolve the :data attribute in the node.
             await RendererPlugins.resolveDataAttribute.call(this, node, params);
             // Resolve the :for attribute in the node.

package/dist/css_gen_utils.js

@@ -32,7 +32,7 @@ const PROPS_SIZING_MINMAX = {
     "max-height": "max-h",
 };
 const PROPS_CUSTOM = {
-    // Based on https://matcha.mizu.sh/@utilities.css.
+    // Based on https://tailwindcss.com.
     // Text style.
     bold: { "font-weight": "bold" },
     semibold: { "font-weight": 600 },
@@ -397,6 +397,17 @@ function wrapPseudoStates(klass) {
 function wrapMediaQueries(klass, rule) {
     return Object.entries(MEDIA_BREAKPOINTS).map(([bp, width]) => `@media (min-width: ${width}px) { .${bp}\\:${klass} { ${rule} } }`);
 }
+function ruleSorter(a, b) {
+    // If one rule is a media query, it goes after the base rules.
+    if (a.includes("@media") && !b.includes("@media")) {
+        return 1;
+    }
+    else if (!a.includes("@media") && b.includes("@media")) {
+        return -1;
+    }
+    // Otherwise, fall back to a lexicographical sort.
+    return a.localeCompare(b);
+}
 function posneg(props) {
     return Object.entries(props)
         .flatMap(([prop, klass]) => [
@@ -572,7 +583,7 @@ function opacity() {
     ]);
 }
 export default function rules() {
-    return [
+    return ([
         // As-is.
         ...PROPS_AS_IS,
         // Custom.
@@ -596,5 +607,8 @@ export default function rules() {
         ...posneg(PROPS_SIZING_MINMAX),
         // Border.
         ...border(),
-    ].join("\n");
+    ]
+        // Sort lexicographical to ensure media queries appear after their base rules.
+        .sort(ruleSorter)
+        .join("\n"));
 }

package/dist/dome.d.ts

@@ -35,4 +35,6 @@ export declare function setTextContent(elem: Element | _Element, value: string):
 export declare function getNodeValue(node: Node | _Node): string | null;
 export declare function setNodeValue(node: Node | _Node, value: string | null): void;
 export declare function createElement(tagName: string, document: Document | null): Element | _Element;
+export declare function ellipsize(str: string | null, maxLength?: number): string;
+export declare function nodeToString(node: Node | _Node, maxLength?: number): string;
 export {};

package/dist/dome.js

@@ -170,3 +170,14 @@ export function createElement(tagName, document) {
     else
         return new _Element(tagName, {});
 }
+export function ellipsize(str, maxLength = 0) {
+    if (!str)
+        return "";
+    else if (str.length <= maxLength)
+        return str;
+    else
+        return str.slice(0, maxLength - 1) + "…";
+}
+export function nodeToString(node, maxLength = 0) {
+    return ellipsize(node.outerHTML || getNodeValue(node) || String(node), maxLength);
+}

package/dist/mancha.js

@@ -1 +1 @@
-(()=>{"use strict";var t={654:(t,e,r)=>{r.d(e,{A:()=>a});var n=r(601),s=r.n(n),i=r(314),o=r.n(i)()(s());o.push([t.id,"html{max-width:70ch;padding:2em 1em;margin:auto;line-height:1.75;font-size:1.25em;font-family:sans-serif}h1,h2,h3,h4,h5,h6{margin:1em 0 .5em}ol,p,ul{margin-bottom:1em;color:#1d1d1d}",""]);const a=o},314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var r="",n=void 0!==e[5];return e[4]&&(r+="@supports (".concat(e[4],") {")),e[2]&&(r+="@media ".concat(e[2]," {")),n&&(r+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),r+=t(e),n&&(r+="}"),e[2]&&(r+="}"),e[4]&&(r+="}"),r})).join("")},e.i=function(t,r,n,s,i){"string"==typeof t&&(t=[[null,t,void 0]]);var o={};if(n)for(var a=0;a<this.length;a++){var c=this[a][0];null!=c&&(o[c]=!0)}for(var l=0;l<t.length;l++){var h=[].concat(t[l]);n&&o[h[0]]||(void 0!==i&&(void 0===h[5]||(h[1]="@layer".concat(h[5].length>0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=i),r&&(h[2]?(h[1]="@media ".concat(h[2]," {").concat(h[1],"}"),h[2]=r):h[2]=r),s&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=s):h[4]="".concat(s)),e.push(h))}},e}},601:t=>{t.exports=function(t){return t[1]}}},e={};function r(n){var s=e[n];if(void 0!==s)return s.exports;var i=e[n]={id:n,exports:{}};return t[n](i,i.exports,r),i.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{class t{timeouts=new Map;debounce(t,e){return new Promise(((r,n)=>{const s=this.timeouts.get(e);s&&clearTimeout(s),this.timeouts.set(e,setTimeout((()=>{try{r(e()),this.timeouts.delete(e)}catch(t){n(t)}}),t))}))}}function e(t,r){if(null==t||(s=t)instanceof n||s.__is_proxy__||t.constructor!==Object&&!Array.isArray(t))return t;var s;for(const n in t)t.hasOwnProperty(n)&&"object"==typeof t[n]&&null!=t[n]&&(t[n]=e(t[n],r));return new Proxy(t,{deleteProperty:(t,e)=>e in t&&(delete t[e],r(),!0),set:(t,n,s,i)=>{"object"==typeof s&&(s=e(s,r));const o=Reflect.set(t,n,s,i);return r(),o},get:(t,e,r)=>"__is_proxy__"===e||Reflect.get(t,e,r)})}class n extends t{value=null;listeners=[];constructor(t=null,...e){super(),this.value=this.wrapObjValue(t),e.forEach((t=>this.watch(t)))}static from(t,...e){return t instanceof n?(e.forEach(t.watch),t):new n(t,...e)}wrapObjValue(t){return null===t||"object"!=typeof t?t:e(t,(()=>this.trigger()))}get(){return this.value}async set(t){if(this.value!==t){const e=this.value;this.value=this.wrapObjValue(t),await this.trigger(e)}}watch(t){this.listeners.push(t)}unwatch(t){this.listeners=this.listeners.filter((e=>e!==t))}trigger(t=null){const e=this.listeners.slice();return this.debounce(10,(()=>Promise.all(e.map((e=>e(this.value,t)))).then((()=>{}))))}}class s extends t{store=new Map;debouncedListeners=new Map;lock=Promise.resolve();constructor(t){super();for(const[e,r]of Object.entries(t||{}))this.store.set(e,n.from(this.wrapFnValue(r)))}wrapFnValue(t){return t&&"function"==typeof t?(...e)=>t.call(i(this),...e):t}get $(){return i(this)}entries(){return this.store.entries()}get(t){return this.store.get(t)?.get()}async set(t,e){this.store.has(t)?await this.store.get(t).set(this.wrapFnValue(e)):this.store.set(t,n.from(this.wrapFnValue(e)))}del(t){return this.store.delete(t)}has(t){return this.store.has(t)}async update(t){await Promise.all(Object.entries(t).map((([t,e])=>this.set(t,e))))}watch(t,e){t=Array.isArray(t)?t:[t];const r=()=>e(...t.map((t=>this.store.get(t).get()))),n=()=>this.debounce(10,r);t.forEach((t=>this.store.get(t).watch(n))),this.debouncedListeners.set(e,n)}unwatch(t,e){(t=Array.isArray(t)?t:[t]).forEach((t=>this.store.get(t).unwatch(this.debouncedListeners.get(e)))),this.debouncedListeners.delete(e)}async trigger(t){t=Array.isArray(t)?t:[t],await Promise.all(t.map((t=>this.store.get(t).trigger())))}async trace(t){const e=new Set,r=i(this,((t,r)=>{"get"===t&&e.add(r)}));return[await t.call(r),Array.from(e)]}async computed(t,e){const[r,n]=await this.trace(e);this.watch(n,(async()=>this.set(t,await e.call(i(this))))),this.set(t,r)}}function i(t,e=(()=>{})){const r=Array.from(t.entries()).map((([t])=>t)),n=Object.fromEntries(r.map((t=>[t,void 0])));return new Proxy(Object.assign({},t,n),{get:(r,n,s)=>"string"==typeof n&&t.has(n)?(e("get",n),t.get(n)):"get"===n?r=>(e("get",r),t.get(r)):Reflect.get(t,n,s),set:(r,n,s,i)=>("string"!=typeof n||n in t?Reflect.set(t,n,s,i):(e("set",n,s),t.set(n,s)),!0)})}class o{iterable;constructor(t){this.iterable=t}filter(t){return new o(o.filterGenerator(t,this.iterable))}map(t){return new o(o.mapGenerator(t,this.iterable))}find(t){for(const e of this.iterable)if(t(e))return e}array(){return Array.from(this.iterable)}*generator(){for(const t of this.iterable)yield t}static*filterGenerator(t,e){for(const r of e)t(r)&&(yield r)}static*mapGenerator(t,e){for(const r of e)yield t(r)}static equals(t,e){const r=t[Symbol.iterator](),n=e[Symbol.iterator]();let s=r.next(),i=n.next();for(;!s.done&&!i.done;){if(s.value!==i.value)return!1;s=r.next(),i=n.next()}return s.done===i.done}}var a,c;(c=a||(a={})).Root="root",c.Text="text",c.Directive="directive",c.Comment="comment",c.Script="script",c.Style="style",c.Tag="tag",c.CDATA="cdata",c.Doctype="doctype",a.Root,a.Text,a.Directive,a.Comment,a.Script,a.Style,a.Tag,a.CDATA,a.Doctype;class l{constructor(){this.parent=null,this.prev=null,this.next=null,this.startIndex=null,this.endIndex=null}get parentNode(){return this.parent}set parentNode(t){this.parent=t}get previousSibling(){return this.prev}set previousSibling(t){this.prev=t}get nextSibling(){return this.next}set nextSibling(t){this.next=t}cloneNode(t=!1){return b(this,t)}}class h extends l{constructor(t){super(),this.data=t}get nodeValue(){return this.data}set nodeValue(t){this.data=t}}class u extends h{constructor(){super(...arguments),this.type=a.Text}get nodeType(){return 3}}class d extends h{constructor(){super(...arguments),this.type=a.Comment}get nodeType(){return 8}}class p extends h{constructor(t,e){super(e),this.name=t,this.type=a.Directive}get nodeType(){return 1}}class f extends l{constructor(t){super(),this.children=t}get firstChild(){var t;return null!==(t=this.children[0])&&void 0!==t?t:null}get lastChild(){return this.children.length>0?this.children[this.children.length-1]:null}get childNodes(){return this.children}set childNodes(t){this.children=t}}class m extends f{constructor(){super(...arguments),this.type=a.CDATA}get nodeType(){return 4}}class $ extends f{constructor(){super(...arguments),this.type=a.Root}get nodeType(){return 9}}class g extends f{constructor(t,e,r=[],n=("script"===t?a.Script:"style"===t?a.Style:a.Tag)){super(r),this.name=t,this.attribs=e,this.type=n}get nodeType(){return 1}get tagName(){return this.name}set tagName(t){this.name=t}get attributes(){return Object.keys(this.attribs).map((t=>{var e,r;return{name:t,value:this.attribs[t],namespace:null===(e=this["x-attribsNamespace"])||void 0===e?void 0:e[t],prefix:null===(r=this["x-attribsPrefix"])||void 0===r?void 0:r[t]}}))}}function b(t,e=!1){let r;if(function(t){return t.type===a.Text}(t))r=new u(t.data);else if(function(t){return t.type===a.Comment}(t))r=new d(t.data);else if(function(t){return(e=t).type===a.Tag||e.type===a.Script||e.type===a.Style;var e}(t)){const n=e?x(t.children):[],s=new g(t.name,{...t.attribs},n);n.forEach((t=>t.parent=s)),null!=t.namespace&&(s.namespace=t.namespace),t["x-attribsNamespace"]&&(s["x-attribsNamespace"]={...t["x-attribsNamespace"]}),t["x-attribsPrefix"]&&(s["x-attribsPrefix"]={...t["x-attribsPrefix"]}),r=s}else if(function(t){return t.type===a.CDATA}(t)){const n=e?x(t.children):[],s=new m(n);n.forEach((t=>t.parent=s)),r=s}else if(function(t){return t.type===a.Root}(t)){const n=e?x(t.children):[],s=new $(n);n.forEach((t=>t.parent=s)),t["x-mode"]&&(s["x-mode"]=t["x-mode"]),r=s}else{if(!function(t){return t.type===a.Directive}(t))throw new Error(`Not implemented yet: ${t.type}`);{const e=new p(t.name,t.data);null!=t["x-name"]&&(e["x-name"]=t["x-name"],e["x-publicId"]=t["x-publicId"],e["x-systemId"]=t["x-systemId"]),r=e}}return r.startIndex=t.startIndex,r.endIndex=t.endIndex,null!=t.sourceCodeLocation&&(r.sourceCodeLocation=t.sourceCodeLocation),r}function x(t){const e=t.map((t=>b(t,!0)));for(let t=1;t<e.length;t++)e[t].prev=e[t-1],e[t-1].next=e[t];return e}function*y(t,e=new Set){const r=new Set,n=Array.from(t.childNodes).filter((t=>!e.has(t)));for(yield t;n.length;){const t=n.shift();r.has(t)||(r.add(t),yield t),t.childNodes&&Array.from(t.childNodes).filter((t=>!e.has(t))).forEach((t=>n.push(t)))}}function w(t,e){return"function"==typeof t?.[e]}function v(t,e){return t instanceof g?t.attribs?.[e]:t.getAttribute?.(e)}function N(t,e,r){t instanceof g?t.attribs[e]=r:t.setAttribute?.(e,r)}function A(t,e){t instanceof g?delete t.attribs[e]:t.removeAttribute?.(e)}function k(t,e,r){if(t instanceof g&&e instanceof g)e.attribs[r]=t.attribs[r];else{const n=t?.getAttributeNode?.(r);e?.setAttributeNode?.(n?.cloneNode(!0))}}function j(t,...e){if(w(t,"replaceWith"))return t.replaceWith(...e);{const r=t,n=r.parentNode,s=Array.from(n.childNodes).indexOf(r);e.forEach((t=>t.parentNode=n)),n.childNodes=[].concat(Array.from(n.childNodes).slice(0,s)).concat(e).concat(Array.from(n.childNodes).slice(s+1))}}function E(t,e){return w(e,"appendChild")?t.appendChild(e):(t.childNodes.push(e),e.parentNode=t,e)}function C(t,e){if(w(e,"removeChild"))return t.removeChild(e);{const r=e;return t.childNodes=t.children.filter((t=>t!==r)),r}}function S(t,e,r){return r?w(t,"insertBefore")?t.insertBefore(e,r):(j(r,e,r),e):E(t,e)}window.htmlparser2;const _=new Set([":bind",":bind-events",":data",":for",":show","@watch","$html"]);var T;function L(t){return t.includes("/")?t.split("/").slice(0,-1).join("/"):""}function P(t){return!(t.includes("://")||t.startsWith("/")||t.startsWith("#")||t.startsWith("data:"))}!function(t){t.resolveIncludes=async function(t,e){const r=t;if("include"!==r.tagName?.toLocaleLowerCase())return;this.log("<include> tag found in:\n",t),this.log("<include> params:",e);const n=v(r,"src");if(!n)throw new Error(`"src" attribute missing from ${t}.`);const s=e=>{const n=e.firstChild;for(const t of Array.from(r.attributes))n&&"src"!==t.name&&k(r,n,t.name);j(t,...e.childNodes)},i={...e,rootDocument:!1,maxdepth:e?.maxdepth-1};if(0===i.maxdepth)throw new Error("Maximum recursion depth reached.");if(n.includes("://")||n.startsWith("//"))this.log("Including remote file from absolute path:",n),await this.preprocessRemote(n,i).then(s);else if(e?.dirpath?.includes("://")||e?.dirpath?.startsWith("//")){const t=n.startsWith("/")?n:`${e.dirpath}/${n}`;this.log("Including remote file from relative path:",t),await this.preprocessRemote(t,i).then(s)}else if("/"===n.charAt(0))this.log("Including local file from absolute path:",n),await this.preprocessLocal(n,i).then(s);else{const t=e?.dirpath&&"."!==e?.dirpath?`${e?.dirpath}/${n}`:n;this.log("Including local file from relative path:",t),await this.preprocessLocal(t,i).then(s)}},t.rebaseRelativePaths=async function(t,e){const r=t,n=r.tagName?.toLowerCase();if(!e?.dirpath)return;const s=v(r,"src"),i=v(r,"href"),o=v(r,"data"),a=s||i||o;a&&(a&&P(a)&&this.log("Rebasing relative path as:",e.dirpath,"/",a),"img"===n&&s&&P(s)?N(r,"src",`${e.dirpath}/${s}`):"a"===n&&i&&P(i)||"link"===n&&i&&P(i)?N(r,"href",`${e.dirpath}/${i}`):"script"===n&&s&&P(s)||"source"===n&&s&&P(s)||"audio"===n&&s&&P(s)||"video"===n&&s&&P(s)||"track"===n&&s&&P(s)||"iframe"===n&&s&&P(s)?N(r,"src",`${e.dirpath}/${s}`):"object"===n&&o&&P(o)?N(r,"data",`${e.dirpath}/${o}`):"input"===n&&s&&P(s)?N(r,"src",`${e.dirpath}/${s}`):("area"===n&&i&&P(i)||"base"===n&&i&&P(i))&&N(r,"href",`${e.dirpath}/${i}`))},t.registerCustomElements=async function(t,e){const r=t;if("template"===r.tagName?.toLowerCase()&&v(r,"is")){const t=v(r,"is")?.toLowerCase();this._customElements.has(t)||(this.log(`Registering custom element: ${t}\n`,r),this._customElements.set(t,r.cloneNode(!0)),C(r.parentNode,r))}},t.resolveCustomElements=async function(t,e){const r=t,n=r.tagName?.toLowerCase();if(this._customElements.has(n)){this.log(`Processing custom element: ${n}\n`,r);const e=this._customElements.get(n),s=(e.content||e).cloneNode(!0),i=function(t){return t instanceof g?t.children.find((t=>t instanceof g)):t.firstElementChild}(s);for(const t of Array.from(r.attributes))i&&k(r,i,t.name);const a=new o(y(s)).find((t=>"slot"===t.tagName?.toLowerCase()));a&&j(a,...r.childNodes),j(t,...s.childNodes)}},t.resolveTextNodeExpressions=async function(t,e){if(3!==t.nodeType)return;const r=function(t){return t instanceof l?t.data:t.nodeValue}(t)||"";this.log("Processing node content value:\n",r);const n=new RegExp(/{{ ([^}]+) }}/gm),s=Array.from(r.matchAll(n)).map((t=>t[1])),i=async()=>{let e=r;for(const r of s){const[n]=await this.eval(r,{$elem:t});e=e.replace(`{{ ${r} }}`,String(n))}!function(t,e){t instanceof l?t.data=e:t.nodeValue=e}(t,e)};await Promise.all(s.map((e=>this.watchExpr(e,{$elem:t},i))))},t.resolveDataAttribute=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,":data");if(n)if(this.log(":data attribute found in:\n",t),A(r,":data"),e?.rootNode===t){const[e]=await this.eval(n,{$elem:t});await this.update(e)}else{const r=this.clone();t.renderer=r;const[s]=await r.eval(n,{$elem:t});await r.update(s);for(const e of y(t,this._skipNodes))this._skipNodes.add(e);await r.mount(t,e)}},t.resolveWatchAttribute=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,"@watch");n&&(this.log("@watch attribute found in:\n",t),A(r,"@watch"),await this.watchExpr(n,{$elem:t},(()=>{})))},t.resolveTextAttributes=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,"$text");n&&(this.log("$text attribute found in:\n",t),A(r,"$text"),await this.watchExpr(n,{$elem:t},(e=>function(t,e){t instanceof g?t.children=[new u(e)]:t.textContent=e}(t,e))))},t.resolveHtmlAttribute=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,"$html");if(n){this.log("$html attribute found in:\n",t),A(r,"$html");const s=this.clone();await this.watchExpr(n,{$elem:t},(async t=>{const n=await s.preprocessString(t,e);await s.renderNode(n,e),function(t,...e){w(t,"replaceChildren")?t.replaceChildren(...e):(t.childNodes=e,e.forEach((e=>e.parentNode=t)))}(r,n)}))}},t.resolvePropAttributes=async function(t,e){if(this._skipNodes.has(t))return;const r=t;for(const e of Array.from(r.attributes||[]))if(e.name.startsWith("$")&&!_.has(e.name)){this.log(e.name,"attribute found in:\n",t),A(r,e.name);const n=e.name.slice(1).replace(/-./g,(t=>t[1].toUpperCase()));await this.watchExpr(e.value,{$elem:t},(e=>t[n]=e))}},t.resolveAttrAttributes=async function(t,e){if(this._skipNodes.has(t))return;const r=t;for(const e of Array.from(r.attributes||[]))if(e.name.startsWith(":")&&!_.has(e.name)){this.log(e.name,"attribute found in:\n",t),A(r,e.name);const n=e.name.slice(1);await this.watchExpr(e.value,{$elem:t},(t=>N(r,n,t)))}},t.resolveEventAttributes=async function(t,e){if(this._skipNodes.has(t))return;const r=t;for(const e of Array.from(r.attributes||[]))e.name.startsWith("@")&&!_.has(e.name)&&(this.log(e.name,"attribute found in:\n",t),A(r,e.name),t.addEventListener?.(e.name.substring(1),(r=>this.eval(e.value,{$elem:t,$event:r}))))},t.resolveForAttribute=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,":for")?.trim();if(n){this.log(":for attribute found in:\n",t),A(r,":for");for(const e of y(t,this._skipNodes))this._skipNodes.add(e);const s=t.parentNode,i=function(t,e){return e?e.createElement(t):new g(t,{})}("template",t.ownerDocument);S(s,i,t),C(s,t),E(i,t),this.log(":for template:\n",i);const o=n.split(" in ",2);if(2!==o.length)throw new Error(`Invalid :for format: \`${n}\`. Expected "{key} in {expression}".`);const a=[],[c,l]=o;await this.watchExpr(l,{$elem:t},(r=>(this.log(":for list items:",r),this.lock=this.lock.then((()=>new Promise((async n=>{if(a.splice(0,a.length).forEach((t=>{C(s,t),this._skipNodes.delete(t)})),!Array.isArray(r))return console.error(`Expression did not yield a list: \`${l}\` => \`${r}\``),n();for(const n of r){const r=this.clone();await r.set(c,n);const s=t.cloneNode(!0);a.push(s),this._skipNodes.add(s),await r.mount(s,e),this.log("Rendered list child:\n",s,s.outerHTML)}const o=i.nextSibling;for(const t of a)S(s,t,o);n()})))).catch((t=>{throw console.error(t),new Error(t)})).then(),this.lock)))}},t.resolveBindAttribute=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,":bind");if(n){this.log(":bind attribute found in:\n",t);const e=["change","input"],s=v(r,":bind-events")?.split(",")||e;A(r,":bind"),A(r,":bind-events");const i="checkbox"===v(r,"type")?"checked":"value",o=`$elem.${i} = ${n}`;await this.watchExpr(o,{$elem:t},(t=>r[i]=t));const a=`${n} = $elem.${i}`;for(const e of s)t.addEventListener(e,(()=>this.eval(a,{$elem:t})))}},t.resolveShowAttribute=async function(t,e){if(this._skipNodes.has(t))return;const r=t,n=v(r,":show");if(n){this.log(":show attribute found in:\n",t),A(r,":show");const e="none"===r.style?.display?"":r.style?.display??v(r,"style")?.split(";")?.find((t=>"display"===t.split(":")[0]))?.split(":")?.at(1)?.trim();await this.watchExpr(n,{$elem:t},(t=>{r.style?r.style.display=t?e:"none":N(r,"style",`display: ${t?e:"none"};`)}))}}}(T||(T={}));class M extends s{debugging=!1;dirpath="";evalkeys=["$elem","$event"];expressionCache=new Map;evalCallbacks=new Map;_skipNodes=new Set;_customElements=new Map;debug(t){return this.debugging=t,this}async fetchRemote(t,e){return fetch(t,{cache:e?.cache??"default"}).then((t=>t.text()))}async fetchLocal(t,e){return this.fetchRemote(t,e)}async preprocessString(t,e){this.log("Preprocessing string content with params:\n",e);const r=this.parseHTML(t,e);return await this.preprocessNode(r,e),r}async preprocessRemote(t,e){const r={};e?.cache&&(r.cache=e.cache);const n=await fetch(t,r).then((t=>t.text()));return this.preprocessString(n,{...e,dirpath:L(t),rootDocument:e?.rootDocument??!t.endsWith(".tpl.html")})}async preprocessLocal(t,e){const r=await this.fetchLocal(t,e);return this.preprocessString(r,{...e,dirpath:L(t),rootDocument:e?.rootDocument??!t.endsWith(".tpl.html")})}clone(){const t=new this.constructor(Object.fromEntries(this.store.entries()));return t._customElements=this._customElements,t.debug(this.debugging)}log(...t){this.debugging&&console.debug(...t)}cachedExpressionFunction(t){return this.expressionCache.has(t)||this.expressionCache.set(t,function(t,e=[]){return new Function(...e,`with (this) { return (async () => (${t}))(); }`)}(t,this.evalkeys)),this.expressionCache.get(t)}async eval(t,e={}){if(this.store.has(t))return[this.get(t),[t]];{const r=this.cachedExpressionFunction(t),n=this.evalkeys.map((t=>e[t]));if(Object.keys(e).some((t=>!this.evalkeys.includes(t))))throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);const[s,i]=await this.trace((async function(){return r.call(this,...n)}));return this.log(`eval \`${t}\` => `,s,`[ ${i.join(", ")} ]`),[s,i]}}watchExpr(t,e,r){if(this.evalCallbacks.has(t))return this.evalCallbacks.get(t)?.push(r),this.eval(t,e).then((([t,e])=>r(t,e)));this.evalCallbacks.set(t,[r]);const n=[],s=async()=>{const[r,i]=await this.eval(t,e),o=this.evalCallbacks.get(t)||[];await Promise.all(o.map((t=>t(r,i)))),n.length>0&&this.unwatch(n,s),n.splice(0,n.length,...i),this.watch(i,s)};return s()}async preprocessNode(t,e){e={dirpath:this.dirpath,maxdepth:10,...e};const r=new o(y(t,this._skipNodes)).map((async t=>{this.log("Preprocessing node:\n",t),await T.resolveIncludes.call(this,t,e),await T.rebaseRelativePaths.call(this,t,e),await T.registerCustomElements.call(this,t,e),await T.resolveCustomElements.call(this,t,e)}));return await Promise.all(r.generator()),t}async renderNode(t,e){for(const r of y(t,this._skipNodes))this.log("Rendering node:\n",r),await T.resolveDataAttribute.call(this,r,e),await T.resolveForAttribute.call(this,r,e),await T.resolveTextAttributes.call(this,r,e),await T.resolveHtmlAttribute.call(this,r,e),await T.resolveShowAttribute.call(this,r,e),await T.resolveWatchAttribute.call(this,r,e),await T.resolveBindAttribute.call(this,r,e),await T.resolvePropAttributes.call(this,r,e),await T.resolveAttrAttributes.call(this,r,e),await T.resolveEventAttributes.call(this,r,e),await T.resolveTextNodeExpressions.call(this,r,e);return t}async mount(t,e){e={...e,rootNode:t},await this.preprocessNode(t,e),await this.renderNode(t,e),t.renderer=this}}var O=r(654);const z=.25,R=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],D=[...R,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,112,128,144,160,192,224,256,288,320,384,448,512],I=[1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100],W=["hover","focus","disabled","focus","active"],F={sm:640,md:768,lg:1024,xl:1280},V={margin:"m",padding:"p"},H={width:"w",height:"h"},B={top:"top",right:"right",bottom:"bottom",left:"left"},G={"min-width":"min-w","min-height":"min-h","max-width":"max-w","max-height":"max-h"},q={bold:{"font-weight":"bold"},semibold:{"font-weight":600},italic:{"font-style":"italic"},underline:{"text-decoration":"underline"},"no-underline":{"text-decoration":"none"},"decoration-none":{"text-decoration":"none"},"line-through":{"text-decoration":"line-through"},uppercase:{"text-transform":"uppercase"},lowercase:{"text-transform":"lowercase"},capitalize:{"text-transform":"capitalize"},"font-mono":{"font-family":"ui-monospace, monospace"},"font-sans":{"font-family":"ui-sans-serif, system-ui, sans-serif"},"font-serif":{"font-family":"ui-serif, serif"},"text-left":{"text-align":"left"},"text-right":{"text-align":"right"},"text-center":{"text-align":"center"},"text-justify":{"text-align":"justify"},"text-xs":{"font-size":".75rem"},"text-sm":{"font-size":".875rem"},"text-base":{"font-size":"1rem"},"text-lg":{"font-size":"1.125rem"},"text-xl":{"font-size":"1.25rem"},relative:{position:"relative"},fixed:{position:"fixed"},absolute:{position:"absolute"},sticky:{position:"sticky"},"object-contain":{"object-fit":"contain"},"object-cover":{"object-fit":"cover"},"object-fill":{"object-fit":"fill"},"object-none":{"object-fit":"none"},block:{display:"block"},contents:{display:"contents"},hidden:{display:"none"},inline:{display:"inline"},"inline-block":{display:"inline-block"},flex:{display:"flex"},"flex-1":{flex:"1 1 0%"},"flex-inline":{display:"inline-flex"},"flex-row":{"flex-direction":"row"},"flex-col":{"flex-direction":"column"},"flex-row-reverse":{"flex-direction":"row-reverse"},"flex-col-reverse":{"flex-direction":"column-reverse"},"flex-wrap":{"flex-wrap":"wrap"},"flex-wrap-reverse":{"flex-wrap":"wrap-reverse"},"flex-nowrap":{"flex-wrap":"nowrap"},"justify-start":{"justify-content":"flex-start"},"justify-end":{"justify-content":"flex-end"},"justify-center":{"justify-content":"center"},"justify-between":{"justify-content":"space-between"},"justify-around":{"justify-content":"space-around"},"justify-evenly":{"justify-content":"space-evenly"},"justify-stretch":{"justify-content":"stretch"},"items-start":{"align-items":"flex-start"},"items-end":{"align-items":"flex-end"},"items-center":{"align-items":"center"},"items-stretch":{"align-items":"stretch"},"flex-grow":{"flex-grow":1},"flex-shrink":{"flex-shrink":1},"overflow-auto":{overflow:"auto"},"overflow-x-auto":{"overflow-x":"auto"},"overflow-y-auto":{"overflow-y":"auto"},"overflow-hidden":{overflow:"hidden"},"overflow-visible":{overflow:"visible"},"cursor-pointer":{cursor:"pointer"},"cursor-wait":{cursor:"wait"},"cursor-not-allowed":{cursor:"not-allowed"},"select-none":{"user-select":"none"},"select-all":{"user-select":"all"},"pointer-events-auto":{"pointer-events":"auto"},"pointer-events-none":{"pointer-events":"none"},"box-border":{"box-sizing":"border-box"},"box-content":{"box-sizing":"content-box"},resize:{resize:"both"},"resize-x":{resize:"horizontal"},"resize-y":{resize:"vertical"},"resize-none":{resize:"none"},border:{border:"1px solid"},"border-none":{border:"none"},"border-solid":{"border-style":"solid"},"border-dashed":{"border-style":"dashed"},"border-dotted":{"border-style":"dotted"},"rounded-none":{"border-radius":"0"},rounded:{"border-radius":".25rem"},"rounded-sm":{"border-radius":".125rem"},"rounded-md":{"border-radius":".375rem"},"rounded-lg":{"border-radius":".5rem"},"rounded-xl":{"border-radius":".75rem"},"rounded-full":{"border-radius":"9999px"},"transition-none":{transition:"none"},transition:{transition:"all 150ms"},"animate-none":{animation:"none"},"animate-spin":{animation:"spin 1s linear infinite"},"animate-ping":{animation:"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"},"animate-pulse":{animation:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}},U=["@keyframes spin {\n    from { transform: rotate(0deg) }\n    to { transform: rotate(360deg) }\n  }","@keyframes ping {\n    75%, 100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }","@keyframes pulse {\n    0%, 100% { opacity: 1 }\n    50% { opacity: .5 }\n  }"],X={red:{50:16772078,100:16764370,200:15702682,300:15037299,400:15684432,500:16007990,600:15022389,700:13840175,800:12986408,900:12000284},pink:{50:16573676,100:16301008,200:16027569,300:15753874,400:15483002,500:15277667,600:14162784,700:12720219,800:11342935,900:8916559},purple:{50:15984117,100:14794471,200:13538264,300:12216520,400:11225020,500:10233776,600:9315498,700:8069026,800:6953882,900:4854924},"deep-purple":{50:15591414,100:13747433,200:11771355,300:9795021,400:8280002,500:6765239,600:6174129,700:5320104,800:4532128,900:3218322},indigo:{50:15264502,100:12962537,200:10463450,300:7964363,400:6056896,500:4149685,600:3754411,700:3162015,800:2635155,900:1713022},blue:{50:14938877,100:12312315,200:9489145,300:6600182,400:4367861,500:2201331,600:2001125,700:1668818,800:1402304,900:870305},"light-blue":{50:14808574,100:11789820,200:8508666,300:5227511,400:2733814,500:240116,600:236517,700:166097,800:161725,900:87963},cyan:{50:14743546,100:11725810,200:8445674,300:5099745,400:2541274,500:48340,600:44225,700:38823,800:33679,900:24676},teal:{50:14742257,100:11722715,200:8440772,300:5093036,400:2533018,500:38536,600:35195,700:31083,800:26972,900:19776},green:{50:15267305,100:13166281,200:10868391,300:8505220,400:6732650,500:5025616,600:4431943,700:3706428,800:3046706,900:1793568},"light-green":{50:15857897,100:14478792,200:12968357,300:11457921,400:10275941,500:9159498,600:8172354,700:6856504,800:5606191,900:3369246},lime:{50:16382951,100:15791299,200:15134364,300:14477173,400:13951319,500:13491257,600:12634675,700:11514923,800:10394916,900:8550167},yellow:{50:16776679,100:16775620,200:16774557,300:16773494,400:16772696,500:16771899,600:16635957,700:16498733,800:16361509,900:16088855},amber:{50:16775393,100:16772275,200:16769154,300:16766287,400:16763432,500:16761095,600:16757504,700:16752640,800:16748288,900:16740096},orange:{50:16774112,100:16769202,200:16764032,300:16758605,400:16754470,500:16750592,600:16485376,700:16088064,800:15690752,900:15094016},"deep-orange":{50:16509415,100:16764092,200:16755601,300:16747109,400:16740419,500:16733986,600:16011550,700:15092249,800:14172949,900:12531212},brown:{50:15723497,100:14142664,200:12364452,300:10586239,400:9268835,500:7951688,600:7162945,700:6111287,800:5125166,900:4073251},gray:{50:16448250,100:16119285,200:15658734,300:14737632,400:12434877,500:10395294,600:7697781,700:6381921,800:4342338,900:2171169},"blue-gray":{50:15527921,100:13621468,200:11583173,300:9479342,400:7901340,500:6323595,600:5533306,700:4545124,800:3622735,900:2503224}};function J(t){return W.map((e=>`.${e}\\:${t}:${e}`))}function K(t,e){return Object.entries(F).map((([r,n])=>`@media (min-width: ${n}px) { .${r}\\:${t} { ${e} } }`))}function Q(t){return Object.entries(t).flatMap((([t,e])=>[[`${e}-0`,`${t}: 0`],[`${e}-screen`,`${t}: 100vw`],[`${e}-full`,`${t}: 100%`],...D.map((r=>[`${e}-${r}`,`${t}: ${r*z}rem`])),...D.map((r=>[`-${e}-${r}`,`${t}: -${r*z}rem`])),...D.map((r=>[`${e}-${r}px`,`${t}: ${r}px`])),...D.map((r=>[`-${e}-${r}px`,`${t}: -${r}px`])),...I.map((r=>[`${e}-${r}%`,`${t}: ${r}%`])),...I.map((r=>[`-${e}-${r}%`,` ${t}: -${r}%`]))])).flatMap((([t,e])=>[`.${t} { ${e} }`,`${J(t).join(",")} { ${e} }`,...K(t,e)]))}function Y(t){return Object.entries(t).flatMap((([t,e])=>[`.${e}-auto { ${t}: auto; }`,`.${e}x-auto { ${t}-left: auto; ${t}-right: auto; }`,`.${e}y-auto { ${t}-top: auto; ${t}-bottom: auto; }`,...D.map((t=>[t,t*z])).map((([r,n])=>`.${e}x-${r} { ${t}-left: ${n}rem; ${t}-right: ${n}rem; }`)),...D.map((t=>[t,t*z])).map((([r,n])=>`.${e}y-${r} { ${t}-top: ${n}rem; ${t}-bottom: ${n}rem; }`)),...D.map((r=>`.${e}x-${r}px { ${t}-left: ${r}px; ${t}-right: ${r}px; }`)),...D.map((r=>`.${e}y-${r}px { ${t}-top: ${r}px; ${t}-bottom: ${r}px; }`)),...I.map((r=>`.${e}x-${r}% { ${t}-left: ${r}%; ${t}-right: ${r}%; }`)),...I.map((r=>`.${e}y-${r}% { ${t}-top: ${r}%; ${t}-bottom: ${r}%; }`))]))}function Z(){const t=[["white","#fff"],["black","#000"],["transparent","transparent"]].flatMap((([t,e])=>[[`text-${t}`,`color: ${e}`],[`fill-${t}`,`fill: ${e}`],[`bg-${t}`,`background-color: ${e}`],[`border-${t}`,`border-color: ${e}`]])),e=Object.entries(X).flatMap((([t,e])=>[[`text-${t}`,`color: #${e[500].toString(16)}`],[`fill-${t}`,`fill: #${e[500].toString(16)}`],[`bg-${t}`,`background-color: #${e[500].toString(16)}`],[`border-${t}`,`border-color: #${e[500].toString(16)}`]])),r=Object.entries(X).flatMap((([t,e])=>Object.entries(e).flatMap((([e,r])=>[[`text-${t}-${e}`,`color: #${r.toString(16)}`],[`fill-${t}-${e}`,`fill: #${r.toString(16)}`],[`bg-${t}-${e}`,`background-color: #${r.toString(16)}`],[`border-${t}-${e}`,`border-color: #${r.toString(16)}`]]))));return[].concat(t).concat(e).concat(r).flatMap((([t,e])=>[`.${t} { ${e} }`,`${J(t).join(",")} { ${e} }`,...K(t,e)]))}const tt=new class extends M{dirpath=L(self.location.href);parseHTML(t,e={rootDocument:!1}){if(e.rootDocument)return(new DOMParser).parseFromString(t,"text/html");{const e=document.createRange();return e.selectNodeContents(document.body),e.createContextualFragment(t)}}serializeHTML(t){return(new XMLSerializer).serializeToString(t).replace(/\s?xmlns="[^"]+"/gm,"")}preprocessLocal(t,e){return this.preprocessRemote(t,e)}};self.Mancha=tt;const et=self.document?.currentScript;if(self.document?.currentScript?.hasAttribute("init")){const t=et?.hasAttribute("debug"),e=et?.getAttribute("cache"),r=et?.getAttribute("target")?.split("+")||["body"];window.addEventListener("load",(()=>{r.map((async r=>{const n=self.document.querySelector(r);await tt.debug(t).mount(n,{cache:e})}))}))}if(self.document?.currentScript?.hasAttribute("css")){const t=et?.getAttribute("css")?.split("+");for(const e of t){const t=document.createElement("style");switch(e){case"basic":t.textContent=O.A;break;case"utils":t.textContent=(void 0,[...U,...Object.entries(q).flatMap((([t,e])=>Object.entries(e).flatMap((([e,r])=>[`.${t} { ${e}: ${r} }`,`${J(t).join(",")} { ${e}: ${r} }`,...K(t,`${e}: ${r}`)])))),...Z(),...[".opacity-0 { opacity: 0; }",...I.map((t=>`.opacity-${t} { opacity: ${t/100}; }`))].flatMap((([t,e])=>[`.${t} { ${e} }`,`${J(t).join(",")} { ${e} }`,...K(t,e)])),...Q(H),...Y(H),...Q(B),...Y(B),...(rt=V,Object.entries(rt).flatMap((([t,e])=>[`.${e}t-auto { ${t}-top: auto }`,`.${e}b-auto { ${t}-bottom: auto }`,`.${e}l-auto { ${t}-left: auto }`,`.${e}r-auto { ${t}-right: auto }`,...D.map((t=>[t,t*z])).map((([r,n])=>`.${e}t-${r} { ${t}-top: ${n}rem }`)),...D.map((t=>[t,t*z])).map((([r,n])=>`.${e}b-${r} { ${t}-bottom: ${n}rem }`)),...D.map((t=>[t,t*z])).map((([r,n])=>`.${e}l-${r} { ${t}-left: ${n}rem }`)),...D.map((t=>[t,t*z])).map((([r,n])=>`.${e}r-${r} { ${t}-right: ${n}rem }`)),...D.map((r=>`.${e}t-${r}px { ${t}-top: ${r}px }`)),...D.map((r=>`.${e}t-${r}px { ${t}-bottom: ${r}px }`)),...D.map((r=>`.${e}t-${r}px { ${t}-left: ${r}px }`)),...D.map((r=>`.${e}t-${r}px { ${t}-right: ${r}px }`)),...I.map((r=>`.${e}y-${r}% { ${t}-top: ${r}% }`)),...I.map((r=>`.${e}y-${r}% { ${t}-bottom: ${r}%; }`)),...I.map((r=>`.${e}x-${r}% { ${t}-left: ${r}% }`)),...I.map((r=>`.${e}x-${r}% { ${t}-right: ${r}% }`))]))),...Q(V),...Y(V),".space-x-0 > * { margin-left: 0; }",".space-y-0 > * { margin-top: 0; }",...D.map((t=>`.space-x-${t} > :not(:first-child) { margin-left: ${t*z}rem; }`)),...D.map((t=>`.space-y-${t} > :not(:first-child) { margin-top: ${t*z}rem; }`)),...D.map((t=>`.space-x-${t}px > :not(:first-child) { margin-left: ${t}px; }`)),...D.map((t=>`.space-y-${t}px > :not(:first-child) { margin-top: ${t}px; }`)),".gap-0 { gap: 0; }",...D.map((t=>`.gap-${t} { gap: ${t*z}rem; }`)),...D.map((t=>`.gap-${t}px { gap: ${t}px; }`)),...D.map((t=>`.gap-x-${t} { column-gap: ${t*z}rem; }`)),...D.map((t=>`.gap-y-${t} { row-gap: ${t*z}rem; }`)),...D.map((t=>`.gap-x-${t}px { column-gap: ${t}px; }`)),...D.map((t=>`.gap-y-${t}px { row-gap: ${t}px; }`)),...Q(G),...R.map((t=>`.border-${t} { border-width: ${t}px; }`))].join("\n"));break;default:console.error(`Unknown style name: "${e}"`)}self.document.head.appendChild(t)}}var rt})()})();
+(()=>{"use strict";var t={654:(t,e,n)=>{n.d(e,{A:()=>a});var r=n(601),i=n.n(r),o=n(314),s=n.n(o)()(i());s.push([t.id,"html{max-width:70ch;padding:2em 1em;margin:auto;line-height:1.75;font-size:1.25em;font-family:sans-serif}h1,h2,h3,h4,h5,h6{margin:1em 0 .5em}ol,p,ul{margin-bottom:1em;color:#1d1d1d}",""]);const a=s},314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n="",r=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),r&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=t(e),r&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(t,n,r,i,o){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(r)for(var a=0;a<this.length;a++){var c=this[a][0];null!=c&&(s[c]=!0)}for(var l=0;l<t.length;l++){var u=[].concat(t[l]);r&&s[u[0]]||(void 0!==o&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=o),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),i&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=i):u[4]="".concat(i)),e.push(u))}},e}},601:t=>{t.exports=function(t){return t[1]}}},e={};function n(r){var i=e[r];if(void 0!==i)return i.exports;var o=e[r]={id:r,exports:{}};return t[r](o,o.exports,n),o.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{class t{iterable;constructor(t){this.iterable=t}filter(e){return new t(t.filterGenerator(e,this.iterable))}map(e){return new t(t.mapGenerator(e,this.iterable))}find(t){for(const e of this.iterable)if(t(e))return e}array(){return Array.from(this.iterable)}*generator(){for(const t of this.iterable)yield t}static*filterGenerator(t,e){for(const n of e)t(n)&&(yield n)}static*mapGenerator(t,e){for(const n of e)yield t(n)}static equals(t,e){const n=t[Symbol.iterator](),r=e[Symbol.iterator]();let i=n.next(),o=r.next();for(;!i.done&&!o.done;){if(i.value!==o.value)return!1;i=n.next(),o=r.next()}return i.done===o.done}}var e,r;(r=e||(e={})).Root="root",r.Text="text",r.Directive="directive",r.Comment="comment",r.Script="script",r.Style="style",r.Tag="tag",r.CDATA="cdata",r.Doctype="doctype",e.Root,e.Text,e.Directive,e.Comment,e.Script,e.Style,e.Tag,e.CDATA,e.Doctype;class i{constructor(){this.parent=null,this.prev=null,this.next=null,this.startIndex=null,this.endIndex=null}get parentNode(){return this.parent}set parentNode(t){this.parent=t}get previousSibling(){return this.prev}set previousSibling(t){this.prev=t}get nextSibling(){return this.next}set nextSibling(t){this.next=t}cloneNode(t=!1){return p(this,t)}}class o extends i{constructor(t){super(),this.data=t}get nodeValue(){return this.data}set nodeValue(t){this.data=t}}class s extends o{constructor(){super(...arguments),this.type=e.Text}get nodeType(){return 3}}class a extends o{constructor(){super(...arguments),this.type=e.Comment}get nodeType(){return 8}}class c extends o{constructor(t,n){super(n),this.name=t,this.type=e.Directive}get nodeType(){return 1}}class l extends i{constructor(t){super(),this.children=t}get firstChild(){var t;return null!==(t=this.children[0])&&void 0!==t?t:null}get lastChild(){return this.children.length>0?this.children[this.children.length-1]:null}get childNodes(){return this.children}set childNodes(t){this.children=t}}class u extends l{constructor(){super(...arguments),this.type=e.CDATA}get nodeType(){return 4}}class d extends l{constructor(){super(...arguments),this.type=e.Root}get nodeType(){return 9}}class h extends l{constructor(t,n,r=[],i=("script"===t?e.Script:"style"===t?e.Style:e.Tag)){super(r),this.name=t,this.attribs=n,this.type=i}get nodeType(){return 1}get tagName(){return this.name}set tagName(t){this.name=t}get attributes(){return Object.keys(this.attribs).map((t=>{var e,n;return{name:t,value:this.attribs[t],namespace:null===(e=this["x-attribsNamespace"])||void 0===e?void 0:e[t],prefix:null===(n=this["x-attribsPrefix"])||void 0===n?void 0:n[t]}}))}}function p(t,n=!1){let r;if(function(t){return t.type===e.Text}(t))r=new s(t.data);else if(function(t){return t.type===e.Comment}(t))r=new a(t.data);else if(function(t){return(n=t).type===e.Tag||n.type===e.Script||n.type===e.Style;var n}(t)){const e=n?f(t.children):[],i=new h(t.name,{...t.attribs},e);e.forEach((t=>t.parent=i)),null!=t.namespace&&(i.namespace=t.namespace),t["x-attribsNamespace"]&&(i["x-attribsNamespace"]={...t["x-attribsNamespace"]}),t["x-attribsPrefix"]&&(i["x-attribsPrefix"]={...t["x-attribsPrefix"]}),r=i}else if(function(t){return t.type===e.CDATA}(t)){const e=n?f(t.children):[],i=new u(e);e.forEach((t=>t.parent=i)),r=i}else if(function(t){return t.type===e.Root}(t)){const e=n?f(t.children):[],i=new d(e);e.forEach((t=>t.parent=i)),t["x-mode"]&&(i["x-mode"]=t["x-mode"]),r=i}else{if(!function(t){return t.type===e.Directive}(t))throw new Error(`Not implemented yet: ${t.type}`);{const e=new c(t.name,t.data);null!=t["x-name"]&&(e["x-name"]=t["x-name"],e["x-publicId"]=t["x-publicId"],e["x-systemId"]=t["x-systemId"]),r=e}}return r.startIndex=t.startIndex,r.endIndex=t.endIndex,null!=t.sourceCodeLocation&&(r.sourceCodeLocation=t.sourceCodeLocation),r}function f(t){const e=t.map((t=>p(t,!0)));for(let t=1;t<e.length;t++)e[t].prev=e[t-1],e[t-1].next=e[t];return e}function*m(t,e=new Set){const n=new Set,r=Array.from(t.childNodes).filter((t=>!e.has(t)));for(yield t;r.length;){const t=r.shift();n.has(t)||(n.add(t),yield t),t.childNodes&&Array.from(t.childNodes).filter((t=>!e.has(t))).forEach((t=>r.push(t)))}}function $(t,e){return"function"==typeof t?.[e]}function g(t,e){return t instanceof h?t.attribs?.[e]:t.getAttribute?.(e)}function b(t,e,n){t instanceof h?t.attribs[e]=n:t.setAttribute?.(e,n)}function x(t,e){t instanceof h?delete t.attribs[e]:t.removeAttribute?.(e)}function y(t,e,n){if(t instanceof h&&e instanceof h)e.attribs[n]=t.attribs[n];else{const r=t?.getAttributeNode?.(n);e?.setAttributeNode?.(r?.cloneNode(!0))}}function w(t,...e){if($(t,"replaceWith"))return t.replaceWith(...e);{const n=t,r=n.parentNode,i=Array.from(r.childNodes).indexOf(n);e.forEach((t=>t.parentNode=r)),r.childNodes=[].concat(Array.from(r.childNodes).slice(0,i)).concat(e).concat(Array.from(r.childNodes).slice(i+1))}}function v(t,e){return $(e,"appendChild")?t.appendChild(e):(t.childNodes.push(e),e.parentNode=t,e)}function N(t,e){if($(e,"removeChild"))return t.removeChild(e);{const n=e;return t.childNodes=t.children.filter((t=>t!==n)),n}}function A(t,e,n){return n?$(t,"insertBefore")?t.insertBefore(e,n):(w(n,e,n),e):v(t,e)}function j(t){return t instanceof i?t.data:t.nodeValue}function k(t,e=0){return t?t.length<=e?t:t.slice(0,e-1)+"…":""}function S(t,e=0){return k(t.outerHTML||j(t)||String(t),e)}window.htmlparser2;class C{timeouts=new Map;debounce(t,e){return new Promise(((n,r)=>{const i=this.timeouts.get(e);i&&clearTimeout(i),this.timeouts.set(e,setTimeout((()=>{try{n(e()),this.timeouts.delete(e)}catch(t){r(t)}}),t))}))}}class _ extends C{evalkeys=["$elem","$event"];expressionCache=new Map;store=new Map;observers=new Map;_observer=null;_lock=Promise.resolve();constructor(t){super();for(let[e,n]of Object.entries(t||{}))this.set(e,n)}wrapFunction(t){return(...e)=>t.call(this.$,...e)}wrapObject(t,e){return null==t||(n=t)instanceof _||n.__is_proxy__||t.constructor!==Object&&!Array.isArray(t)?t:new Proxy(t,{deleteProperty:(t,n)=>n in t&&(delete t[n],e(),!0),set:(n,r,i,o)=>{"object"==typeof i&&null!=t&&(i=this.wrapObject(i,e));const s=Reflect.set(n,r,i,o);return e(),s},get:(t,e,n)=>"__is_proxy__"===e||Reflect.get(t,e,n)});var n}watch(t,e){this.observers.has(t)||this.observers.set(t,new Set),this.observers.get(t)?.has(e)||this.observers.get(t)?.add(e)}async notify(t){const e=Array.from(this.observers.get(t)||[]);await this.debounce(10,(()=>Promise.all(e.map((t=>t.call(this.proxify(t)))))))}get(t,e){return e&&this.watch(t,e),this.store.get(t)}async set(t,e){if(e===this.store.get(t))return;const n=()=>this.notify(t);e&&"function"==typeof e&&(e=this.wrapFunction(e)),e&&"object"==typeof e&&(e=this.wrapObject(e,n)),this.store.set(t,e),await n()}del(t){this.store.delete(t),this.observers.delete(t)}has(t){return this.store.has(t)}effect(t){return t.call(this.proxify(t))}proxify(t){const e=Array.from(this.store.entries()).map((([t])=>t)),n=Object.fromEntries(e.map((t=>[t,void 0])));return new Proxy(n,{get:(e,n,r)=>"string"==typeof n&&this.store.has(n)?this.get(n,t):"$"===n?this.proxify(t):Reflect.get(this,n,r),set:(t,e,n,r)=>("string"!=typeof e||e in this?Reflect.set(this,e,n,r):this.set(e,n),!0)})}get $(){return this.proxify()}cachedExpressionFunction(t){return this.expressionCache.has(t)||this.expressionCache.set(t,function(t,e=[]){return new Function(...e,`with (this) { return (${t}); }`)}(t,this.evalkeys)),this.expressionCache.get(t)}eval(t,e={}){const n=this._observer?this:this.$;if(this.store.has(t))return n[t];{const r=this.cachedExpressionFunction(t),i=this.evalkeys.map((t=>e[t]));if(Object.keys(e).some((t=>!this.evalkeys.includes(t))))throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);return r.call(n,...i)}}}const E=new Set([":bind",":bind-events",":data",":for",":show","@watch","$html"]);var T;function M(t){return t.includes("/")?t.split("/").slice(0,-1).join("/"):""}function P(t){return!(t.includes("://")||t.startsWith("/")||t.startsWith("#")||t.startsWith("data:"))}!function(e){e.resolveIncludes=async function(t,e){const n=t;if("include"!==n.tagName?.toLocaleLowerCase())return;this.log("<include> tag found in:\n",S(t,128)),this.log("<include> params:",e);const r=g(n,"src");if(!r)throw new Error(`"src" attribute missing from ${t}.`);const i=e=>{const r=e.firstChild;for(const t of Array.from(n.attributes))r&&"src"!==t.name&&y(n,r,t.name);w(t,...e.childNodes)},o={...e,rootDocument:!1,maxdepth:e?.maxdepth-1};if(0===o.maxdepth)throw new Error("Maximum recursion depth reached.");if(r.includes("://")||r.startsWith("//"))this.log("Including remote file from absolute path:",r),await this.preprocessRemote(r,o).then(i);else if(e?.dirpath?.includes("://")||e?.dirpath?.startsWith("//")){const t=r.startsWith("/")?r:`${e.dirpath}/${r}`;this.log("Including remote file from relative path:",t),await this.preprocessRemote(t,o).then(i)}else if("/"===r.charAt(0))this.log("Including local file from absolute path:",r),await this.preprocessLocal(r,o).then(i);else{const t=e?.dirpath&&"."!==e?.dirpath?`${e?.dirpath}/${r}`:r;this.log("Including local file from relative path:",t),await this.preprocessLocal(t,o).then(i)}},e.rebaseRelativePaths=async function(t,e){const n=t,r=n.tagName?.toLowerCase();if(!e?.dirpath)return;const i=g(n,"src"),o=g(n,"href"),s=g(n,"data"),a=i||o||s;a&&(a&&P(a)&&this.log("Rebasing relative path as:",e.dirpath,"/",a),"img"===r&&i&&P(i)?b(n,"src",`${e.dirpath}/${i}`):"a"===r&&o&&P(o)||"link"===r&&o&&P(o)?b(n,"href",`${e.dirpath}/${o}`):"script"===r&&i&&P(i)||"source"===r&&i&&P(i)||"audio"===r&&i&&P(i)||"video"===r&&i&&P(i)||"track"===r&&i&&P(i)||"iframe"===r&&i&&P(i)?b(n,"src",`${e.dirpath}/${i}`):"object"===r&&s&&P(s)?b(n,"data",`${e.dirpath}/${s}`):"input"===r&&i&&P(i)?b(n,"src",`${e.dirpath}/${i}`):("area"===r&&o&&P(o)||"base"===r&&o&&P(o))&&b(n,"href",`${e.dirpath}/${o}`))},e.registerCustomElements=async function(t,e){const n=t;if("template"===n.tagName?.toLowerCase()&&g(n,"is")){const t=g(n,"is")?.toLowerCase();this._customElements.has(t)||(this.log(`Registering custom element: ${t}\n`,S(n,128)),this._customElements.set(t,n.cloneNode(!0)),N(n.parentNode,n))}},e.resolveCustomElements=async function(e,n){const r=e,i=r.tagName?.toLowerCase();if(this._customElements.has(i)){this.log(`Processing custom element: ${i}\n`,S(r,128));const n=this._customElements.get(i),o=(n.content||n).cloneNode(!0),s=function(t){return t instanceof h?t.children.find((t=>t instanceof h)):t.firstElementChild}(o);for(const t of Array.from(r.attributes))s&&y(r,s,t.name);const a=new t(m(o)).find((t=>"slot"===t.tagName?.toLowerCase()));a&&w(a,...r.childNodes),w(e,...o.childNodes)}},e.resolveTextNodeExpressions=async function(t,e){const n=j(t)||"";if(3!==t.nodeType||!n?.trim())return;this.log("Processing node content value:\n",k(n,128));const r=new RegExp(/{{ ([^}]+) }}/gm),o=Array.from(n.matchAll(r)).map((t=>t[1]));return this.effect((function(){let e=n;for(const n of o){const r=this.eval(n,{$elem:t});e=e.replace(`{{ ${n} }}`,String(r))}!function(t,e){t instanceof i?t.data=e:t.nodeValue=e}(t,e)}))},e.resolveDataAttribute=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,":data");if(r){this.log(":data attribute found in:\n",S(t,128)),x(n,":data");const i=e?.rootNode===t?this:this.clone();t.renderer=i;const o=function(t,e=[]){return new Function(...e,`with (this) { return (async () => (${t}))(); }`)}(r,this.evalkeys),s=await o.call(i.$,{$elem:t});if(await Promise.all(Object.entries(s).map((([t,e])=>i.set(t,e)))),i!==this)for(const e of m(t,this._skipNodes))this._skipNodes.add(e);await i.mount(t,e)}},e.resolveWatchAttribute=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,"@watch");r&&(this.log("@watch attribute found in:\n",S(t,128)),x(n,"@watch"),await this.effect((function(){return this.eval(r,{$elem:t})})))},e.resolveTextAttributes=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,"$text");return r?(this.log("$text attribute found in:\n",S(t,128)),x(n,"$text"),this.effect((function(){!function(t,e){t instanceof h?t.children=[new s(e)]:t.textContent=e}(t,this.eval(r,{$elem:t}))}))):void 0},e.resolveHtmlAttribute=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,"$html");return r?(this.log("$html attribute found in:\n",S(t,128)),x(n,"$html"),this.effect((function(){const i=this.eval(r,{$elem:t});return new Promise((async t=>{const r=await this.preprocessString(i,e);await this.renderNode(r),function(t,...e){$(t,"replaceChildren")?t.replaceChildren(...e):(t.childNodes=e,e.forEach((e=>e.parentNode=t)))}(n,r),t()}))}))):void 0},e.resolvePropAttributes=async function(t,e){if(this._skipNodes.has(t))return;const n=t;for(const e of Array.from(n.attributes||[]))if(e.name.startsWith("$")&&!E.has(e.name)){this.log(e.name,"attribute found in:\n",S(t,128)),x(n,e.name);const r=e.name.slice(1).replace(/-./g,(t=>t[1].toUpperCase()));await this.effect((function(){t[r]=this.eval(e.value,{$elem:t})}))}},e.resolveAttrAttributes=async function(t,e){if(this._skipNodes.has(t))return;const n=t;for(const e of Array.from(n.attributes||[]))if(e.name.startsWith(":")&&!E.has(e.name)){this.log(e.name,"attribute found in:\n",S(t,128)),x(n,e.name);const r=e.name.slice(1);this.effect((function(){b(n,r,this.eval(e.value,{$elem:t}))}))}},e.resolveEventAttributes=async function(t,e){if(this._skipNodes.has(t))return;const n=t;for(const e of Array.from(n.attributes||[]))e.name.startsWith("@")&&!E.has(e.name)&&(this.log(e.name,"attribute found in:\n",S(t,128)),x(n,e.name),t.addEventListener?.(e.name.substring(1),(n=>this.eval(e.value,{$elem:t,$event:n}))))},e.resolveForAttribute=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,":for")?.trim();if(r){this.log(":for attribute found in:\n",S(t,128)),x(n,":for");for(const e of m(t,this._skipNodes))this._skipNodes.add(e);const i=t.parentNode,o=function(t,e){return e?e.createElement(t):new h(t,{})}("template",t.ownerDocument);A(i,o,t),N(i,t),v(o,t),this.log(":for template:\n",S(o,128));const s=r.split(" in ",2);if(2!==s.length)throw new Error(`Invalid :for format: \`${r}\`. Expected "{key} in {expression}".`);const a=[],[c,l]=s;await this.effect((function(){const n=this.eval(l,{$elem:t});if(this.log(":for list items:",n),a.splice(0,a.length).forEach((t=>{N(i,t),this._skipNodes.delete(t)})),!Array.isArray(n))return console.error(`Expression did not yield a list: \`${l}\` => \`${n}\``),Promise.resolve();const r=[];for(const i of n){const n=this.clone();n.set(c,i);const o=t.cloneNode(!0);a.push(o),this._skipNodes.add(o),r.push(n.mount(o,e)),this.log("Rendered list child:\n",S(o,128))}const s=o.nextSibling;for(const t of a)A(i,t,s);return Promise.all(r)}))}},e.resolveBindAttribute=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,":bind");if(r){this.log(":bind attribute found in:\n",S(t,128));const e=["change","input"],i=g(n,":bind-events")?.split(",")||e;x(n,":bind"),x(n,":bind-events");const o="checkbox"===g(n,"type")?"checked":"value",s=`$elem.${o} = ${r}`;this.effect((function(){const e=this.eval(s,{$elem:t});n[o]=e}));const a=`${r} = $elem.${o}`;for(const e of i)t.addEventListener(e,(()=>this.eval(a,{$elem:t})))}},e.resolveShowAttribute=async function(t,e){if(this._skipNodes.has(t))return;const n=t,r=g(n,":show");if(r){this.log(":show attribute found in:\n",S(t,128)),x(n,":show");const e="none"===n.style?.display?"":n.style?.display??g(n,"style")?.split(";")?.find((t=>"display"===t.split(":")[0]))?.split(":")?.at(1)?.trim();this.effect((function(){const i=this.eval(r,{$elem:t});n.style?n.style.display=i?e:"none":b(n,"style",`display: ${i?e:"none"};`)}))}}}(T||(T={}));class z extends _{debugging=!1;dirpath="";_skipNodes=new Set;_customElements=new Map;debug(t){return this.debugging=t,this}async fetchRemote(t,e){return fetch(t,{cache:e?.cache??"default"}).then((t=>t.text()))}async fetchLocal(t,e){return this.fetchRemote(t,e)}async preprocessString(t,e){this.log("Preprocessing string content with params:\n",e);const n=this.parseHTML(t,e);return await this.preprocessNode(n,e),n}async preprocessRemote(t,e){const n={};e?.cache&&(n.cache=e.cache);const r=await fetch(t,n).then((t=>t.text()));return this.preprocessString(r,{...e,dirpath:M(t),rootDocument:e?.rootDocument??!t.endsWith(".tpl.html")})}async preprocessLocal(t,e){const n=await this.fetchLocal(t,e);return this.preprocessString(n,{...e,dirpath:M(t),rootDocument:e?.rootDocument??!t.endsWith(".tpl.html")})}clone(){const t=new this.constructor(Object.fromEntries(this.store.entries()));return t._customElements=this._customElements,t.debug(this.debugging)}log(...t){this.debugging&&console.debug(...t)}async preprocessNode(e,n){n={dirpath:this.dirpath,maxdepth:10,...n};const r=new t(m(e,this._skipNodes)).map((async t=>{this.log("Preprocessing node:\n",S(t,128)),await T.resolveIncludes.call(this,t,n),await T.rebaseRelativePaths.call(this,t,n),await T.registerCustomElements.call(this,t,n),await T.resolveCustomElements.call(this,t,n)}));return await Promise.all(r.generator()),e}async renderNode(t,e){for(const n of m(t,this._skipNodes))this.log("Rendering node:\n",S(n,128)),await T.resolveDataAttribute.call(this,n,e),await T.resolveForAttribute.call(this,n,e),await T.resolveTextAttributes.call(this,n,e),await T.resolveHtmlAttribute.call(this,n,e),await T.resolveShowAttribute.call(this,n,e),await T.resolveWatchAttribute.call(this,n,e),await T.resolveBindAttribute.call(this,n,e),await T.resolvePropAttributes.call(this,n,e),await T.resolveAttrAttributes.call(this,n,e),await T.resolveEventAttributes.call(this,n,e),await T.resolveTextNodeExpressions.call(this,n,e);return t}async mount(t,e){e={...e,rootNode:t},await this.preprocessNode(t,e),await this.renderNode(t,e),t.renderer=this}}var L=n(654);const O=.25,R=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],D=[...R,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,112,128,144,160,192,224,256,288,320,384,448,512],I=[1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100],W=["hover","focus","disabled","focus","active"],F={sm:640,md:768,lg:1024,xl:1280},H={margin:"m",padding:"p"},B={width:"w",height:"h"},G={top:"top",right:"right",bottom:"bottom",left:"left"},V={"min-width":"min-w","min-height":"min-h","max-width":"max-w","max-height":"max-h"},q={bold:{"font-weight":"bold"},semibold:{"font-weight":600},italic:{"font-style":"italic"},underline:{"text-decoration":"underline"},"no-underline":{"text-decoration":"none"},"decoration-none":{"text-decoration":"none"},"line-through":{"text-decoration":"line-through"},uppercase:{"text-transform":"uppercase"},lowercase:{"text-transform":"lowercase"},capitalize:{"text-transform":"capitalize"},"font-mono":{"font-family":"ui-monospace, monospace"},"font-sans":{"font-family":"ui-sans-serif, system-ui, sans-serif"},"font-serif":{"font-family":"ui-serif, serif"},"text-left":{"text-align":"left"},"text-right":{"text-align":"right"},"text-center":{"text-align":"center"},"text-justify":{"text-align":"justify"},"text-xs":{"font-size":".75rem"},"text-sm":{"font-size":".875rem"},"text-base":{"font-size":"1rem"},"text-lg":{"font-size":"1.125rem"},"text-xl":{"font-size":"1.25rem"},relative:{position:"relative"},fixed:{position:"fixed"},absolute:{position:"absolute"},sticky:{position:"sticky"},"object-contain":{"object-fit":"contain"},"object-cover":{"object-fit":"cover"},"object-fill":{"object-fit":"fill"},"object-none":{"object-fit":"none"},block:{display:"block"},contents:{display:"contents"},hidden:{display:"none"},inline:{display:"inline"},"inline-block":{display:"inline-block"},flex:{display:"flex"},"flex-1":{flex:"1 1 0%"},"flex-inline":{display:"inline-flex"},"flex-row":{"flex-direction":"row"},"flex-col":{"flex-direction":"column"},"flex-row-reverse":{"flex-direction":"row-reverse"},"flex-col-reverse":{"flex-direction":"column-reverse"},"flex-wrap":{"flex-wrap":"wrap"},"flex-wrap-reverse":{"flex-wrap":"wrap-reverse"},"flex-nowrap":{"flex-wrap":"nowrap"},"justify-start":{"justify-content":"flex-start"},"justify-end":{"justify-content":"flex-end"},"justify-center":{"justify-content":"center"},"justify-between":{"justify-content":"space-between"},"justify-around":{"justify-content":"space-around"},"justify-evenly":{"justify-content":"space-evenly"},"justify-stretch":{"justify-content":"stretch"},"items-start":{"align-items":"flex-start"},"items-end":{"align-items":"flex-end"},"items-center":{"align-items":"center"},"items-stretch":{"align-items":"stretch"},"flex-grow":{"flex-grow":1},"flex-shrink":{"flex-shrink":1},"overflow-auto":{overflow:"auto"},"overflow-x-auto":{"overflow-x":"auto"},"overflow-y-auto":{"overflow-y":"auto"},"overflow-hidden":{overflow:"hidden"},"overflow-visible":{overflow:"visible"},"cursor-pointer":{cursor:"pointer"},"cursor-wait":{cursor:"wait"},"cursor-not-allowed":{cursor:"not-allowed"},"select-none":{"user-select":"none"},"select-all":{"user-select":"all"},"pointer-events-auto":{"pointer-events":"auto"},"pointer-events-none":{"pointer-events":"none"},"box-border":{"box-sizing":"border-box"},"box-content":{"box-sizing":"content-box"},resize:{resize:"both"},"resize-x":{resize:"horizontal"},"resize-y":{resize:"vertical"},"resize-none":{resize:"none"},border:{border:"1px solid"},"border-none":{border:"none"},"border-solid":{"border-style":"solid"},"border-dashed":{"border-style":"dashed"},"border-dotted":{"border-style":"dotted"},"rounded-none":{"border-radius":"0"},rounded:{"border-radius":".25rem"},"rounded-sm":{"border-radius":".125rem"},"rounded-md":{"border-radius":".375rem"},"rounded-lg":{"border-radius":".5rem"},"rounded-xl":{"border-radius":".75rem"},"rounded-full":{"border-radius":"9999px"},"transition-none":{transition:"none"},transition:{transition:"all 150ms"},"animate-none":{animation:"none"},"animate-spin":{animation:"spin 1s linear infinite"},"animate-ping":{animation:"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"},"animate-pulse":{animation:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}},U=["@keyframes spin {\n    from { transform: rotate(0deg) }\n    to { transform: rotate(360deg) }\n  }","@keyframes ping {\n    75%, 100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }","@keyframes pulse {\n    0%, 100% { opacity: 1 }\n    50% { opacity: .5 }\n  }"],X={red:{50:16772078,100:16764370,200:15702682,300:15037299,400:15684432,500:16007990,600:15022389,700:13840175,800:12986408,900:12000284},pink:{50:16573676,100:16301008,200:16027569,300:15753874,400:15483002,500:15277667,600:14162784,700:12720219,800:11342935,900:8916559},purple:{50:15984117,100:14794471,200:13538264,300:12216520,400:11225020,500:10233776,600:9315498,700:8069026,800:6953882,900:4854924},"deep-purple":{50:15591414,100:13747433,200:11771355,300:9795021,400:8280002,500:6765239,600:6174129,700:5320104,800:4532128,900:3218322},indigo:{50:15264502,100:12962537,200:10463450,300:7964363,400:6056896,500:4149685,600:3754411,700:3162015,800:2635155,900:1713022},blue:{50:14938877,100:12312315,200:9489145,300:6600182,400:4367861,500:2201331,600:2001125,700:1668818,800:1402304,900:870305},"light-blue":{50:14808574,100:11789820,200:8508666,300:5227511,400:2733814,500:240116,600:236517,700:166097,800:161725,900:87963},cyan:{50:14743546,100:11725810,200:8445674,300:5099745,400:2541274,500:48340,600:44225,700:38823,800:33679,900:24676},teal:{50:14742257,100:11722715,200:8440772,300:5093036,400:2533018,500:38536,600:35195,700:31083,800:26972,900:19776},green:{50:15267305,100:13166281,200:10868391,300:8505220,400:6732650,500:5025616,600:4431943,700:3706428,800:3046706,900:1793568},"light-green":{50:15857897,100:14478792,200:12968357,300:11457921,400:10275941,500:9159498,600:8172354,700:6856504,800:5606191,900:3369246},lime:{50:16382951,100:15791299,200:15134364,300:14477173,400:13951319,500:13491257,600:12634675,700:11514923,800:10394916,900:8550167},yellow:{50:16776679,100:16775620,200:16774557,300:16773494,400:16772696,500:16771899,600:16635957,700:16498733,800:16361509,900:16088855},amber:{50:16775393,100:16772275,200:16769154,300:16766287,400:16763432,500:16761095,600:16757504,700:16752640,800:16748288,900:16740096},orange:{50:16774112,100:16769202,200:16764032,300:16758605,400:16754470,500:16750592,600:16485376,700:16088064,800:15690752,900:15094016},"deep-orange":{50:16509415,100:16764092,200:16755601,300:16747109,400:16740419,500:16733986,600:16011550,700:15092249,800:14172949,900:12531212},brown:{50:15723497,100:14142664,200:12364452,300:10586239,400:9268835,500:7951688,600:7162945,700:6111287,800:5125166,900:4073251},gray:{50:16448250,100:16119285,200:15658734,300:14737632,400:12434877,500:10395294,600:7697781,700:6381921,800:4342338,900:2171169},"blue-gray":{50:15527921,100:13621468,200:11583173,300:9479342,400:7901340,500:6323595,600:5533306,700:4545124,800:3622735,900:2503224}};function J(t){return W.map((e=>`.${e}\\:${t}:${e}`))}function K(t,e){return Object.entries(F).map((([n,r])=>`@media (min-width: ${r}px) { .${n}\\:${t} { ${e} } }`))}function Q(t,e){return t.includes("@media")&&!e.includes("@media")?1:!t.includes("@media")&&e.includes("@media")?-1:t.localeCompare(e)}function Y(t){return Object.entries(t).flatMap((([t,e])=>[[`${e}-0`,`${t}: 0`],[`${e}-screen`,`${t}: 100vw`],[`${e}-full`,`${t}: 100%`],...D.map((n=>[`${e}-${n}`,`${t}: ${n*O}rem`])),...D.map((n=>[`-${e}-${n}`,`${t}: -${n*O}rem`])),...D.map((n=>[`${e}-${n}px`,`${t}: ${n}px`])),...D.map((n=>[`-${e}-${n}px`,`${t}: -${n}px`])),...I.map((n=>[`${e}-${n}%`,`${t}: ${n}%`])),...I.map((n=>[`-${e}-${n}%`,` ${t}: -${n}%`]))])).flatMap((([t,e])=>[`.${t} { ${e} }`,`${J(t).join(",")} { ${e} }`,...K(t,e)]))}function Z(t){return Object.entries(t).flatMap((([t,e])=>[`.${e}-auto { ${t}: auto; }`,`.${e}x-auto { ${t}-left: auto; ${t}-right: auto; }`,`.${e}y-auto { ${t}-top: auto; ${t}-bottom: auto; }`,...D.map((t=>[t,t*O])).map((([n,r])=>`.${e}x-${n} { ${t}-left: ${r}rem; ${t}-right: ${r}rem; }`)),...D.map((t=>[t,t*O])).map((([n,r])=>`.${e}y-${n} { ${t}-top: ${r}rem; ${t}-bottom: ${r}rem; }`)),...D.map((n=>`.${e}x-${n}px { ${t}-left: ${n}px; ${t}-right: ${n}px; }`)),...D.map((n=>`.${e}y-${n}px { ${t}-top: ${n}px; ${t}-bottom: ${n}px; }`)),...I.map((n=>`.${e}x-${n}% { ${t}-left: ${n}%; ${t}-right: ${n}%; }`)),...I.map((n=>`.${e}y-${n}% { ${t}-top: ${n}%; ${t}-bottom: ${n}%; }`))]))}function tt(){const t=[["white","#fff"],["black","#000"],["transparent","transparent"]].flatMap((([t,e])=>[[`text-${t}`,`color: ${e}`],[`fill-${t}`,`fill: ${e}`],[`bg-${t}`,`background-color: ${e}`],[`border-${t}`,`border-color: ${e}`]])),e=Object.entries(X).flatMap((([t,e])=>[[`text-${t}`,`color: #${e[500].toString(16)}`],[`fill-${t}`,`fill: #${e[500].toString(16)}`],[`bg-${t}`,`background-color: #${e[500].toString(16)}`],[`border-${t}`,`border-color: #${e[500].toString(16)}`]])),n=Object.entries(X).flatMap((([t,e])=>Object.entries(e).flatMap((([e,n])=>[[`text-${t}-${e}`,`color: #${n.toString(16)}`],[`fill-${t}-${e}`,`fill: #${n.toString(16)}`],[`bg-${t}-${e}`,`background-color: #${n.toString(16)}`],[`border-${t}-${e}`,`border-color: #${n.toString(16)}`]]))));return[].concat(t).concat(e).concat(n).flatMap((([t,e])=>[`.${t} { ${e} }`,`${J(t).join(",")} { ${e} }`,...K(t,e)]))}const et=new class extends z{dirpath=M(self.location.href);parseHTML(t,e={rootDocument:!1}){if(e.rootDocument)return(new DOMParser).parseFromString(t,"text/html");{const e=document.createRange();return e.selectNodeContents(document.body),e.createContextualFragment(t)}}serializeHTML(t){return(new XMLSerializer).serializeToString(t).replace(/\s?xmlns="[^"]+"/gm,"")}preprocessLocal(t,e){return this.preprocessRemote(t,e)}};self.Mancha=et;const nt=self.document?.currentScript;if(self.document?.currentScript?.hasAttribute("init")){const t=nt?.hasAttribute("debug"),e=nt?.getAttribute("cache"),n=nt?.getAttribute("target")?.split("+")||["body"];window.addEventListener("load",(()=>{n.map((async n=>{const r=self.document.querySelector(n);await et.debug(t).mount(r,{cache:e})}))}))}if(self.document?.currentScript?.hasAttribute("css")){const t=nt?.getAttribute("css")?.split("+");for(const e of t){const t=document.createElement("style");switch(e){case"basic":t.textContent=L.A;break;case"utils":t.textContent=(void 0,[...U,...Object.entries(q).flatMap((([t,e])=>Object.entries(e).flatMap((([e,n])=>[`.${t} { ${e}: ${n} }`,`${J(t).join(",")} { ${e}: ${n} }`,...K(t,`${e}: ${n}`)])))),...tt(),...[".opacity-0 { opacity: 0; }",...I.map((t=>`.opacity-${t} { opacity: ${t/100}; }`))].flatMap((([t,e])=>[`.${t} { ${e} }`,`${J(t).join(",")} { ${e} }`,...K(t,e)])),...Y(B),...Z(B),...Y(G),...Z(G),...(rt=H,Object.entries(rt).flatMap((([t,e])=>[`.${e}t-auto { ${t}-top: auto }`,`.${e}b-auto { ${t}-bottom: auto }`,`.${e}l-auto { ${t}-left: auto }`,`.${e}r-auto { ${t}-right: auto }`,...D.map((t=>[t,t*O])).map((([n,r])=>`.${e}t-${n} { ${t}-top: ${r}rem }`)),...D.map((t=>[t,t*O])).map((([n,r])=>`.${e}b-${n} { ${t}-bottom: ${r}rem }`)),...D.map((t=>[t,t*O])).map((([n,r])=>`.${e}l-${n} { ${t}-left: ${r}rem }`)),...D.map((t=>[t,t*O])).map((([n,r])=>`.${e}r-${n} { ${t}-right: ${r}rem }`)),...D.map((n=>`.${e}t-${n}px { ${t}-top: ${n}px }`)),...D.map((n=>`.${e}t-${n}px { ${t}-bottom: ${n}px }`)),...D.map((n=>`.${e}t-${n}px { ${t}-left: ${n}px }`)),...D.map((n=>`.${e}t-${n}px { ${t}-right: ${n}px }`)),...I.map((n=>`.${e}y-${n}% { ${t}-top: ${n}% }`)),...I.map((n=>`.${e}y-${n}% { ${t}-bottom: ${n}%; }`)),...I.map((n=>`.${e}x-${n}% { ${t}-left: ${n}% }`)),...I.map((n=>`.${e}x-${n}% { ${t}-right: ${n}% }`))]))),...Y(H),...Z(H),".space-x-0 > * { margin-left: 0; }",".space-y-0 > * { margin-top: 0; }",...D.map((t=>`.space-x-${t} > :not(:first-child) { margin-left: ${t*O}rem; }`)),...D.map((t=>`.space-y-${t} > :not(:first-child) { margin-top: ${t*O}rem; }`)),...D.map((t=>`.space-x-${t}px > :not(:first-child) { margin-left: ${t}px; }`)),...D.map((t=>`.space-y-${t}px > :not(:first-child) { margin-top: ${t}px; }`)),".gap-0 { gap: 0; }",...D.map((t=>`.gap-${t} { gap: ${t*O}rem; }`)),...D.map((t=>`.gap-${t}px { gap: ${t}px; }`)),...D.map((t=>`.gap-x-${t} { column-gap: ${t*O}rem; }`)),...D.map((t=>`.gap-y-${t} { row-gap: ${t*O}rem; }`)),...D.map((t=>`.gap-x-${t}px { column-gap: ${t}px; }`)),...D.map((t=>`.gap-y-${t}px { row-gap: ${t}px; }`)),...Y(V),...R.map((t=>`.border-${t} { border-width: ${t}px; }`))].sort(Q).join("\n"));break;default:console.error(`Unknown style name: "${e}"`)}self.document.head.appendChild(t)}}var rt})()})();