npm - mancha - Versions diffs - 0.9.7 → 0.9.9 - Mend

mancha 0.9.7 → 0.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -6,7 +6,7 @@ browser or the server. It can be used as a command-line tool, or imported as a J
 Here's a small sample of the things that you can do with `mancha`:
 ```html
-<!-- Use the bundled file from `unkpg` and include basic CSS utilities. -->
+<!-- Use the bundled file from `unkpg` and load a drop-in replacement for Tailwind CSS. -->
 <script src="//unpkg.com/mancha" target="main" css="utils" init></script>
 <!-- Scoped variables using the `:data` attribute. -->
@@ -110,9 +110,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, evaluated asynchronously
+- `:data` provides scoped variables to all subnodes, evaluated using `jexpr`
   ```html
-  <div :data="{name: 'Stranger', ...(await fetch(url).then(res => res.json()))}"></div>
+  <div :data="{ name: 'Stranger' }"></div>
   ```
 - `:for` clones the node and repeats it
   ```html
@@ -132,7 +132,7 @@ element tag or attributes match a specific criteria. Here's the list of attribut
   ```
 - `:bind` binds (two-way) a variable to the `value` or `checked` property of the element.
   ```html
-  <div :data="{name: 'Stranger'}">
+  <div :data="{ name: 'Stranger' }">
     <input type="text" :bind="name" />
   </div>
   ```
@@ -149,6 +149,114 @@ element tag or attributes match a specific criteria. Here's the list of attribut
   <button :data="{label: 'Click Me'}">{{ label }}</button>
   ```
+## Evaluation
+To avoid violation of Content Security Policy (CSP) that forbids the use of `eval()`, `Mancha`
+evaluates all expressions using [`jexpr`][jexpr]. This means that only simple expressions are
+allowed, and spaces must be used to separate different expressions tokens. For example:
+```html
+<!-- Valid expression: string concatenation -->
+<body :data="{ pos: 1 }">
+  <p :text="'you are number ' + pos + ' in the queue'"></p>
+</body>
+<!-- Valid expression: boolean logic -->
+<body :data="{ pos: 1, finished: false }">
+  <p :show="pos >= 1 && !finished">you are number {{ pos }} in the queue</p>
+</body>
+<!-- Valid expression: ternary operators -->
+<body :data="{ pos: 1 }">
+  <p :text="pos % 2 == 0 ? 'even' : 'odd'"></p>
+</body>
+<!-- Valid expression: function calling -->
+<body :data="{ pos : 1 }">
+  <p :text="buildQueueMessage()"></p>
+  <script>
+    const { $ } = Mancha;
+    $.buildQueueMessage = function () {
+      return "you are number " + this.pos + " in the queue";
+    };
+    // Alternatively, anonymous functions without `this`:
+    // $.buildQueueMessage = () => 'you are number ' + $.pos + ' in the queue';
+  </script>
+</body>
+<!-- Valid expression: simple assignment -->
+<body :data="{ pos: 1 }">
+  <p :text="'you are number ' + pos + ' in the queue'"></p>
+  <button :on:click="pos = pos + 1">Click to get there faster</button>
+</body>
+<!-- Invalid expression: missing spaces -->
+<body :data="{ pos: 1 }">
+  <p :text="'you are number '+pos+' in the queue'"></p>
+</body>
+<!-- Invalid expression: multiple statements -->
+<button :on:click="console.log('yes'); answer = 'no'"></button>
+<!-- Invalid expression: function definition -->
+<body :data="{ foo: () => 'yes' }">
+  <p :text="foo()"></p>
+</body>
+<!-- Invalid expression: complex assignment -->
+<body :data="{ pos: 1 }">
+  <p :text="'you are number ' + pos + ' in the queue'"></p>
+  <button :on:click="pos++">Click to get there faster</button>
+</body>
+```
+## Scoping
+Contents of the `:data` attribute are only available to subnodes in the HTML tree. This is better
+illustrated with an example:
+```html
+<body :data="{ name: 'stranger' }">
+  <!-- Hello, stranger -->
+  <h1>Hello, {{ name }}</h1>
+  <!-- undefined -->
+  <span>{{ message }}</span>
+  <!-- How are you, danger? The secret message is "secret" -->
+  <p :data="{ name: 'danger', message: 'secret' }">
+    How are you, {{ name }}? The secret message is: "{{ message }}".
+  </p>
+</body>
+```
+By default, the target root element is the `body` tag. So, any variables defined in the body's
+`:data` attribute are available to the main renderer and all subrenderers.
+In the example above, the variable `message` is only available to the `<p>` tag and all elements
+under that tag, if any. Since the variables are not accessible via the global object, you'll need
+to retrieve the renderer from the element's properties:
+```js
+// Explicitly render the body, so we can await it and then modify variables.
+const { $ } = Mancha;
+await $.mount(document.body);
+// This modifies the `name` variable in all the renderer contexts.
+$.name = "world";
+// This has no effect in the output, because the content of the `<p>` tag is
+// bound to its local variable and `message` was undefined at rendering time.
+$.message = "bandit";
+// We extract the subrenderer from the element's properties. Only elements
+// with `:data` attribute have a `renderer` property.
+const subrenderer = document.querySelector("p").renderer;
+// This modifies the `message` variable only in the `<p>` tag.
+subrenderer.$.message = "banana";
+```
 ## Styling
 Some basic styling rules are built into the library and can be optionally used. The styling
@@ -173,7 +281,7 @@ To use `mancha` on the client (browser), use the `mancha` bundled file available
   <span>Hello, {{ name }}!</span>
 </body>
-<script src="//unpkg.com/mancha" target="body" css="basic+utils" defer init></script>
+<script src="//unpkg.com/mancha" target="body" css="basic+utils" init></script>
 ```
 Script tag attributes:
@@ -242,9 +350,7 @@ For a more complete example, see [examples/express](./examples/express).
 ### Web Worker Runtime Server Side Rendering (SSR)
 For servers hosted as worker runtimes, such as `Cloudflare Workers`, you will need to import a
-stripped down version of `mancha` that does not have the ability to read local files or evaluate
-expressions. The contents of any `{{ value }}` must be an existing variable in the renderer
-instance, since string evaluation is not permitted in some runtimes.
+stripped down version of `mancha` that does not have the ability to read local files.
 ```js
 import { Renderer } from "mancha/dist/worker";

package/dist/css_gen_utils.js CHANGED Viewed

@@ -137,6 +137,7 @@ const PROPS_CUSTOM = {
     "border-solid": { "border-style": "solid" },
     "border-dashed": { "border-style": "dashed" },
     "border-dotted": { "border-style": "dotted" },
+    "border-collapse": { "border-collapse": "collapse" },
     // Radius.
     "rounded-none": { "border-radius": "0" },
     rounded: { "border-radius": ".25rem" },
@@ -145,6 +146,16 @@ const PROPS_CUSTOM = {
     "rounded-lg": { "border-radius": ".5rem" },
     "rounded-xl": { "border-radius": ".75rem" },
     "rounded-full": { "border-radius": "9999px" },
+    // Shadows.
+    shadow: { "box-shadow": "0 0 1px 0 rgba(0, 0, 0, 0.05)" },
+    "shadow-sm": { "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+    "shadow-md": { "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
+    "shadow-lg": { "box-shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
+    "shadow-xl": { "box-shadow": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
+    "shadow-2xl": { "box-shadow": "0 25px 50px -12px rgba(0, 0, 0, 0.25)" },
+    "shadow-inner": { "box-shadow": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" },
+    "shadow-outline": { "box-shadow": "0 0 0 3px rgba(66, 153, 225, 0.5)" },
+    "shadow-none": { "box-shadow": "none" },
     // Transitions.
     "transition-none": { transition: "none" },
     transition: { transition: `all 150ms ease-in-out` },

package/dist/mancha.js CHANGED Viewed

@@ -1,4 +1,4 @@
-(()=>{"use strict";const e=/^\s*(?!javascript:)(?:[\w+.-]+:|[^:/?#]*(?:[/?#]|$))/i;function t(t){if(!function(t){const r=!e.test(t);return r}(t))return t}function r(e){return t(e)}const i={};function n(e){0}"undefined"!=typeof window&&window.TrustedScriptURL;class s{constructor(e,t){this.privateDoNotAccessOrElseWrappedAttributePrefix=t}toString(){return this.privateDoNotAccessOrElseWrappedAttributePrefix}}const o=s;function a(e){if(function(e){return e instanceof s}(e))return e.privateDoNotAccessOrElseWrappedAttributePrefix;throw new Error("")}"undefined"!=typeof window&&window.TrustedHTML;function c(e,t,r,i){if(0===e.length){throw new Error("")}const n=e.map((e=>a(e))),s=r.toLowerCase();if(n.every((e=>0!==s.indexOf(e))))throw new Error(`Attribute "${r}" does not match any of the allowed prefixes.`);t.setAttribute(r,i)}"undefined"!=typeof window&&window.TrustedScript;class l{}class h extends l{constructor(e,t){super(),n(),this.privateDoNotAccessOrElseWrappedStyleSheet=e}toString(){return this.privateDoNotAccessOrElseWrappedStyleSheet}}function u(e,t){e.textContent=function(e){if(e instanceof h)return e.privateDoNotAccessOrElseWrappedStyleSheet;throw new Error("")}(t)}Error;class d{iterable;constructor(e){this.iterable=e}filter(e){return new d(d.filterGenerator(e,this.iterable))}map(e){return new d(d.mapGenerator(e,this.iterable))}find(e){for(const t of this.iterable)if(e(t))return t}array(){return Array.from(this.iterable)}*generator(){for(const e of this.iterable)yield e}static*filterGenerator(e,t){for(const r of t)e(r)&&(yield r)}static*mapGenerator(e,t){for(const r of t)yield e(r)}static equals(e,t){const r=e[Symbol.iterator](),i=t[Symbol.iterator]();let n=r.next(),s=i.next();for(;!n.done&&!s.done;){if(n.value!==s.value)return!1;n=r.next(),s=i.next()}return n.done===s.done}}function p(e){return Object.isFrozen(e)&&Object.isFrozen(e.raw)}function f(e){return-1===e.toString().indexOf("`")}f((e=>e``))||f((e=>e`\0`))||f((e=>e`\n`))||f((e=>e`\u0000`)),p``&&p`\0`&&p`\n`&&p`\u0000`;function m(e){const t=e[0].toLowerCase();return new o(i,t)}var _,E;function g(e){return{valueOf:e}.valueOf()}!function(e){e[e.STYLE_TAG=0]="STYLE_TAG",e[e.STYLE_ATTRIBUTE=1]="STYLE_ATTRIBUTE",e[e.HTML_ATTRIBUTE=2]="HTML_ATTRIBUTE"}(_||(_={}));class ${constructor(e,t,r,i,n){this.allowedElements=e,this.elementPolicies=t,this.allowedGlobalAttributes=r,this.globalAttributePolicies=i,this.globallyAllowedAttributePrefixes=n}isAllowedElement(e){return"FORM"!==e&&(this.allowedElements.has(e)||this.elementPolicies.has(e))}getAttributePolicy(e,t){const r=this.elementPolicies.get(t);if(null==r?void 0:r.has(e))return r.get(e);if(this.allowedGlobalAttributes.has(e))return{policyAction:E.KEEP};const i=this.globalAttributePolicies.get(e);return i||(this.globallyAllowedAttributePrefixes&&[...this.globallyAllowedAttributePrefixes].some((t=>0===e.indexOf(t)))?{policyAction:E.KEEP}:{policyAction:E.DROP})}}!function(e){e[e.DROP=0]="DROP",e[e.KEEP=1]="KEEP",e[e.KEEP_AND_SANITIZE_URL=2]="KEEP_AND_SANITIZE_URL",e[e.KEEP_AND_NORMALIZE=3]="KEEP_AND_NORMALIZE",e[e.KEEP_AND_SANITIZE_STYLE=4]="KEEP_AND_SANITIZE_STYLE",e[e.KEEP_AND_USE_RESOURCE_URL_POLICY=5]="KEEP_AND_USE_RESOURCE_URL_POLICY",e[e.KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET=6]="KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET"}(E||(E={}));new Set(["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"]);const v=["ARTICLE","SECTION","NAV","ASIDE","H1","H2","H3","H4","H5","H6","HEADER","FOOTER","ADDRESS","P","HR","PRE","BLOCKQUOTE","OL","UL","LH","LI","DL","DT","DD","FIGURE","FIGCAPTION","MAIN","DIV","EM","STRONG","SMALL","S","CITE","Q","DFN","ABBR","RUBY","RB","RT","RTC","RP","DATA","TIME","CODE","VAR","SAMP","KBD","SUB","SUP","I","B","U","MARK","BDI","BDO","SPAN","BR","WBR","INS","DEL","PICTURE","PARAM","TRACK","MAP","TABLE","CAPTION","COLGROUP","COL","TBODY","THEAD","TFOOT","TR","TD","TH","SELECT","DATALIST","OPTGROUP","OPTION","OUTPUT","PROGRESS","METER","FIELDSET","LEGEND","DETAILS","SUMMARY","MENU","DIALOG","SLOT","CANVAS","FONT","CENTER","ACRONYM","BASEFONT","BIG","DIR","HGROUP","STRIKE","TT"],b=[["A",new Map([["href",{policyAction:E.KEEP_AND_SANITIZE_URL}]])],["AREA",new Map([["href",{policyAction:E.KEEP_AND_SANITIZE_URL}]])],["LINK",new Map([["href",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY,conditions:new Map([["rel",new Set(["alternate","author","bookmark","canonical","cite","help","icon","license","next","prefetch","dns-prefetch","prerender","preconnect","preload","prev","search","subresource"])]])}]])],["SOURCE",new Map([["src",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY}],["srcset",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET}]])],["IMG",new Map([["src",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY}],["srcset",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET}]])],["VIDEO",new Map([["src",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY}]])],["AUDIO",new Map([["src",{policyAction:E.KEEP_AND_USE_RESOURCE_URL_POLICY}]])]],y=["title","aria-atomic","aria-autocomplete","aria-busy","aria-checked","aria-current","aria-disabled","aria-dropeffect","aria-expanded","aria-haspopup","aria-hidden","aria-invalid","aria-label","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","alt","align","autocapitalize","autocomplete","autocorrect","autofocus","autoplay","bgcolor","border","cellpadding","cellspacing","checked","color","cols","colspan","controls","datetime","disabled","download","draggable","enctype","face","formenctype","frameborder","height","hreflang","hidden","ismap","label","lang","loop","max","maxlength","media","minlength","min","multiple","muted","nonce","open","placeholder","preload","rel","required","reversed","role","rows","rowspan","selected","shape","size","sizes","slot","span","spellcheck","start","step","summary","translate","type","valign","value","width","wrap","itemscope","itemtype","itemid","itemprop","itemref"],w=[["dir",{policyAction:E.KEEP_AND_NORMALIZE,conditions:g((()=>new Map([["dir",new Set(["auto","ltr","rtl"])]])))}],["async",{policyAction:E.KEEP_AND_NORMALIZE,conditions:g((()=>new Map([["async",new Set(["async"])]])))}],["cite",{policyAction:E.KEEP_AND_SANITIZE_URL}],["loading",{policyAction:E.KEEP_AND_NORMALIZE,conditions:g((()=>new Map([["loading",new Set(["eager","lazy"])]])))}],["poster",{policyAction:E.KEEP_AND_SANITIZE_URL}],["target",{policyAction:E.KEEP_AND_NORMALIZE,conditions:g((()=>new Map([["target",new Set(["_self","_blank"])]])))}]];new $(new Set(v),new Map(b),new Set(y),new Map(w)),new $(new Set(g((()=>v.concat(["STYLE"])))),new Map(b),new Set(g((()=>y.concat(["id","name","class"])))),new Map(g((()=>w.concat([["style",{policyAction:E.KEEP_AND_SANITIZE_STYLE}]])))));function x(e){return function(e){return new h(e,i)}(e[0])}const A=[m`:`,m`style`,m`class`];function*O(e,t=new Set){const r=new Set,i=Array.from(e.childNodes).filter((e=>!t.has(e)));for(yield e;i.length;){const e=i.shift();r.has(e)||(r.add(e),yield e),e.childNodes&&Array.from(e.childNodes).filter((e=>!t.has(e))).forEach((e=>i.push(e)))}}function R(e,t){return void 0!==e?.[t]}function I(e,t){return"function"==typeof e?.[t]}function N(e,t){return R(e,"attribs")?e.attribs?.[t]??null:e.getAttribute?.(t)}function T(e,t,r){R(e,"attribs")?e.attribs[t]=r:c(A,e,t,r)}function S(e,t){R(e,"attribs")?delete e.attribs[t]:e.removeAttribute?.(t)}function P(e,t,r){if(R(e,"attribs")&&R(t,"attribs"))t.attribs[r]=e.attribs[r];else{const i=e?.getAttribute?.(r);T(t,r,i||"")}}function k(e,...t){if(I(e,"replaceWith"))return e.replaceWith(...t);{const r=e,i=r.parentNode,n=Array.from(i.childNodes).indexOf(r);t.forEach((e=>e.parentNode=i)),i.childNodes=[].concat(Array.from(i.childNodes).slice(0,n)).concat(t).concat(Array.from(i.childNodes).slice(n+1))}}function C(e,...t){I(e,"replaceChildren")?e.replaceChildren(...t):(e.childNodes=t,t.forEach((t=>t.parentNode=e)))}function L(e,t){return I(t,"appendChild")?e.appendChild(t):(e.childNodes.push(t),t.parentNode=e,t)}function D(e,t){return I(t,"removeChild")?e.removeChild(t):(C(e,...Array.from(e.childNodes).filter((e=>e!==t))),t)}function M(e,t,r){return r?I(e,"insertBefore")?e.insertBefore(t,r):(k(r,t,r),t):L(e,t)}function U(e,t=0){return e?e.length<=t?e:e.slice(0,t-1)+"…":""}function j(e,t=0){return U(e.outerHTML||e.nodeValue||String(e),t)}function z(e){return e.includes("/")?e.split("/").slice(0,-1).join("/"):""}var G;!function(e){e.resolveIncludes=async function(e,t){const r=e;if("include"!==r.tagName?.toLocaleLowerCase())return;this.log("<include> tag found in:\n",j(e,128)),this.log("<include> params:",t);const i=N(r,"src");if(!i)throw new Error(`"src" attribute missing from ${e}.`);const n=t=>{const i=t.firstChild;for(const e of Array.from(r.attributes))i&&"src"!==e.name&&P(r,i,e.name);k(e,...t.childNodes)},s={...t,rootDocument:!1,maxdepth:t?.maxdepth-1};if(0===s.maxdepth)throw new Error("Maximum recursion depth reached.");if(i.includes("://")||i.startsWith("//"))this.log("Including remote file from absolute path:",i),await this.preprocessRemote(i,s).then(n);else if(t?.dirpath?.includes("://")||t?.dirpath?.startsWith("//")){const e=i.startsWith("/")?i:`${t.dirpath}/${i}`;this.log("Including remote file from relative path:",e),await this.preprocessRemote(e,s).then(n)}else if("/"===i.charAt(0))this.log("Including local file from absolute path:",i),await this.preprocessLocal(i,s).then(n);else{const e=t?.dirpath&&"."!==t?.dirpath?`${t?.dirpath}/${i}`:i;this.log("Including local file from relative path:",e),await this.preprocessLocal(e,s).then(n)}},e.rebaseRelativePaths=async function(e,t){const i=e,n=i.tagName?.toLowerCase();if(!t?.dirpath)return;const s=N(i,"src"),o=N(i,"href"),a=s||o;if(a&&!((c=a).includes("://")||c.startsWith("/")||c.startsWith("#")||c.startsWith("data:"))){const e=`${t.dirpath}/${a}`;this.log("Rebasing relative path as:",e),"img"===n?i.src=e:"a"===n?function(e,t){const i=r(t);void 0!==i&&(e.href=i)}(i,e):"source"===n||"audio"===n||"video"===n||"track"===n||"input"===n?i.src=e:"area"===n?function(e,t){const i=r(t);void 0!==i&&(e.href=i)}(i,e):this.log("Unable to rebase relative path for element:",n)}var c},e.registerCustomElements=async function(e,t){const r=e;if("template"===r.tagName?.toLowerCase()&&N(r,"is")){const e=N(r,"is")?.toLowerCase();this._customElements.has(e)||(this.log(`Registering custom element: ${e}\n`,j(r,128)),this._customElements.set(e,r.cloneNode(!0)),D(r.parentNode,r))}},e.resolveCustomElements=async function(e,t){const r=e,i=r.tagName?.toLowerCase();if(this._customElements.has(i)){this.log(`Processing custom element: ${i}\n`,j(r,128));const t=this._customElements.get(i),n=(t.content||t).cloneNode(!0),s=function(e){return R(e,"firstElementChild")?e.firstElementChild:Array.from(e.children).find((e=>1===e.nodeType))}(n);for(const e of Array.from(r.attributes))s&&P(r,s,e.name);const o=new d(O(n)).find((e=>"slot"===e.tagName?.toLowerCase()));o&&k(o,...r.childNodes),k(e,...n.childNodes)}},e.resolveTextNodeExpressions=async function(e,t){const r=e.nodeValue||"";if(3!==e.nodeType||!r?.trim())return;this.log("Processing node content value:\n",U(r,128));const i=new RegExp(/{{ ([^}]+) }}/gm),n=Array.from(r.matchAll(i)).map((e=>e[1]));return this.effect((function(){let t=r;for(const r of n){const i=this.eval(r,{$elem:e});t=t.replace(`{{ ${r} }}`,String(i))}e.nodeValue=t}))},e.resolveDataAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":data");if(i){this.log(":data attribute found in:\n",j(e,128)),S(r,":data");const n=t?.rootNode===e?this:this.clone();e.renderer=n;const s=n.eval(i,{$elem:e});if(await Promise.all(Object.entries(s).map((([e,t])=>n.set(e,t)))),n!==this)for(const t of O(e,this._skipNodes))this._skipNodes.add(t);await n.mount(e,t)}},e.resolveClassAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":class");if(i){this.log(":class attribute found in:\n",j(e,128)),S(r,":class");const t=N(r,"class")||"";return this.effect((function(){const n=this.eval(i,{$elem:e});T(r,"class",(n?`${t} ${n}`:t).trim())}))}},e.resolveTextAttributes=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":text");if(i){this.log(":text attribute found in:\n",j(e,128)),S(r,":text");const t=t=>this.textContent(e,t);return this.effect((function(){t(this.eval(i,{$elem:e}))}))}},e.resolveHtmlAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":html");return i?(this.log(":html attribute found in:\n",j(e,128)),S(r,":html"),this.effect((function(){const n=this.eval(i,{$elem:e});return new Promise((async e=>{const i=await this.preprocessString(n,t);await this.renderNode(i),C(r,i),e()}))}))):void 0},e.resolveEventAttributes=async function(e,t){if(this._skipNodes.has(e))return;const r=e;for(const t of Array.from(r.attributes||[]))t.name.startsWith(":on:")&&(this.log(t.name,"attribute found in:\n",j(e,128)),S(r,t.name),e.addEventListener?.(t.name.substring(4),(r=>this.eval(t.value,{$elem:e,$event:r}))))},e.resolveForAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":for")?.trim();if(i){this.log(":for attribute found in:\n",j(e,128)),S(r,":for");for(const t of O(e,this._skipNodes))this._skipNodes.add(t);const n=e.parentNode,s=this.createElement("template",e.ownerDocument);M(n,s,e),D(n,e),L(s,e),this.log(":for template:\n",j(s,128));const o=i.split(" in ",2);if(2!==o.length)throw new Error(`Invalid :for format: \`${i}\`. Expected "{key} in {expression}".`);const a=[],[c,l]=o;await this.effect((function(){const r=this.eval(l,{$elem:e});if(this.log(":for list items:",r),a.splice(0,a.length).forEach((e=>{D(n,e),this._skipNodes.delete(e)})),!Array.isArray(r))return console.error(`Expression did not yield a list: \`${l}\` => \`${r}\``),Promise.resolve();const i=[];for(const n of r){const r=this.clone();r.set(c,n);const s=e.cloneNode(!0);a.push(s),this._skipNodes.add(s),i.push(r.mount(s,t)),this.log("Rendered list child:\n",j(s,128))}const o=s.nextSibling;for(const e of a)M(n,e,o);return Promise.all(i)}))}},e.resolveBindAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":bind");if(i){this.log(":bind attribute found in:\n",j(e,128));const t=["change","input"],n=N(r,":bind:on")?.split(",")||t;S(r,":bind"),S(r,":bind:on");const s="checkbox"===N(r,"type")?"checked":"value";this.effect((function(){const t=this.eval(i,{$elem:e});r[s]=t}));const o=`${i} = $elem.${s}`;for(const t of n)e.addEventListener(t,(()=>this.eval(o,{$elem:e})))}},e.resolveShowAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":show");if(i){this.log(":show attribute found in:\n",j(e,128)),S(r,":show");const t="none"===r.style?.display?"":r.style?.display??N(r,"style")?.split(";")?.find((e=>"display"===e.split(":")[0]))?.split(":")?.at(1)?.trim();this.effect((function(){const n=this.eval(i,{$elem:e});r.style?r.style.display=n?t:"none":T(r,"style",`display: ${n?t:"none"};`)}))}},e.resolveCustomAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e;for(const t of Array.from(r.attributes||[]))if(t.name.startsWith(":")){this.log(t.name,"attribute found in:\n",j(e,128)),S(r,t.name);const i=t.name.substring(1).replace(/-./g,(e=>e[1].toUpperCase()));this.effect((function(){const n=this.eval(t.value,{$elem:e});r[i]=n}))}}}(G||(G={}));const F=["this"],K=["+","-","!"],Y=["=","+","-","*","/","%","^","==","!=",">","<",">=","<=","||","&&","??","&","===","!==","|","|>"],W={"!":0,":":0,",":0,")":0,"]":0,"}":0,"|>":1,"?":2,"??":3,"||":4,"&&":5,"|":6,"^":7,"&":8,"!=":9,"==":9,"!==":9,"===":9,">=":10,">":10,"<=":10,"<":10,"+":11,"-":11,"%":12,"/":12,"*":12,"(":13,"[":13,".":13,"{":13},B=["==","!=","<=",">=","||","&&","??","|>"],H=["===","!=="];var V;!function(e){e[e.STRING=1]="STRING",e[e.IDENTIFIER=2]="IDENTIFIER",e[e.DOT=3]="DOT",e[e.COMMA=4]="COMMA",e[e.COLON=5]="COLON",e[e.INTEGER=6]="INTEGER",e[e.DECIMAL=7]="DECIMAL",e[e.OPERATOR=8]="OPERATOR",e[e.GROUPER=9]="GROUPER",e[e.KEYWORD=10]="KEYWORD",e[e.ARROW=11]="ARROW"}(V||(V={}));const Z=(e,t,r=0)=>({kind:e,value:t,precedence:r}),q=e=>95===e||36===e||65<=(e&=-33)&&e<=90,Q=e=>48<=e&&e<=57;class X{_input;_index=-1;_tokenStart=0;_next;constructor(e){this._input=e,this._advance()}nextToken(){for(;9===(e=this._next)||10===e||13===e||32===e;)this._advance(!0);var e;if((e=>34===e||39===e)(this._next))return this._tokenizeString();if(q(this._next))return this._tokenizeIdentOrKeyword();if(Q(this._next))return this._tokenizeNumber();if(46===this._next)return this._tokenizeDot();if(44===this._next)return this._tokenizeComma();if(58===this._next)return this._tokenizeColon();if((e=>43===e||45===e||42===e||47===e||33===e||38===e||37===e||60===e||61===e||62===e||63===e||94===e||124===e)(this._next))return this._tokenizeOperator();if((e=>40===e||41===e||91===e||93===e||123===e||125===e)(this._next))return this._tokenizeGrouper();if(this._advance(),void 0!==this._next)throw new Error(`Expected end of input, got ${this._next}`)}_advance(e){this._index++,this._index<this._input.length?(this._next=this._input.charCodeAt(this._index),!0===e&&(this._tokenStart=this._index)):this._next=void 0}_getValue(e=0){const t=this._input.substring(this._tokenStart,this._index+e);return 0===e&&this._clearValue(),t}_clearValue(){this._tokenStart=this._index}_tokenizeString(){const e="unterminated string",t=this._next;for(this._advance(!0);this._next!==t;){if(void 0===this._next)throw new Error(e);if(92===this._next&&(this._advance(),void 0===this._next))throw new Error(e);this._advance()}const r=Z(V.STRING,this._getValue().replace(/\\(.)/g,((e,t)=>{switch(t){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"f":return"\f";default:return t}})));return this._advance(),r}_tokenizeIdentOrKeyword(){do{this._advance()}while(e=this._next,q(e)||Q(e));var e;const t=this._getValue(),r=(i=t,-1!==F.indexOf(i)?V.KEYWORD:V.IDENTIFIER);var i;return Z(r,t)}_tokenizeNumber(){do{this._advance()}while(Q(this._next));return 46===this._next?this._tokenizeDot():Z(V.INTEGER,this._getValue())}_tokenizeDot(){return this._advance(),Q(this._next)?this._tokenizeFraction():(this._clearValue(),Z(V.DOT,".",13))}_tokenizeComma(){return this._advance(!0),Z(V.COMMA,",")}_tokenizeColon(){return this._advance(!0),Z(V.COLON,":")}_tokenizeFraction(){do{this._advance()}while(Q(this._next));return Z(V.DECIMAL,this._getValue())}_tokenizeOperator(){this._advance();let e=this._getValue(2);if(-1!==H.indexOf(e))this._advance(),this._advance();else{if(e=this._getValue(1),"=>"===e)return this._advance(),Z(V.ARROW,e);-1!==B.indexOf(e)&&this._advance()}return e=this._getValue(),Z(V.OPERATOR,e,W[e])}_tokenizeGrouper(){const e=String.fromCharCode(this._next),t=Z(V.GROUPER,e,W[e]);return this._advance(!0),t}}class J{_kind;_tokenizer;_ast;_token;_value;constructor(e,t){this._tokenizer=new X(e),this._ast=t}parse(){return this._advance(),this._parseExpression()}_advance(e,t){if(!this._matches(e,t))throw new Error(`Expected kind ${e} (${t}), was ${this._token?.kind} (${this._token?.value})`);const r=this._tokenizer.nextToken();this._token=r,this._kind=r?.kind,this._value=r?.value}_matches(e,t){return!(e&&this._kind!==e||t&&this._value!==t)}_parseExpression(){if(!this._token)return this._ast.empty();const e=this._parseUnary();return void 0===e?void 0:this._parsePrecedence(e,0)}_parsePrecedence(e,t){if(void 0===e)throw new Error("Expected left to be defined.");for(;this._token;)if(this._matches(V.GROUPER,"(")){const t=this._parseArguments();e=this._ast.invoke(e,void 0,t)}else if(this._matches(V.GROUPER,"[")){const t=this._parseIndex();e=this._ast.index(e,t)}else if(this._matches(V.DOT)){this._advance();const t=this._parseUnary();e=this._makeInvokeOrGetter(e,t)}else{if(this._matches(V.KEYWORD))break;if(!(this._matches(V.OPERATOR)&&this._token.precedence>=t))break;e="?"===this._value?this._parseTernary(e):this._parseBinary(e,this._token)}return e}_makeInvokeOrGetter(e,t){if(void 0===t)throw new Error("expected identifier");if("ID"===t.type)return this._ast.getter(e,t.value);if("Invoke"===t.type&&"ID"===t.receiver.type){const r=t.receiver;return this._ast.invoke(e,r.value,t.arguments)}throw new Error(`expected identifier: ${t}`)}_parseBinary(e,t){if(-1===Y.indexOf(t.value))throw new Error(`unknown operator: ${t.value}`);this._advance();let r=this._parseUnary();for(;(this._kind===V.OPERATOR||this._kind===V.DOT||this._kind===V.GROUPER)&&this._token.precedence>t.precedence;)r=this._parsePrecedence(r,this._token.precedence);return this._ast.binary(e,t.value,r)}_parseUnary(){if(this._matches(V.OPERATOR)){const e=this._value;if(this._advance(),"+"===e||"-"===e){if(this._matches(V.INTEGER))return this._parseInteger(e);if(this._matches(V.DECIMAL))return this._parseDecimal(e)}if(-1===K.indexOf(e))throw new Error(`unexpected token: ${e}`);const t=this._parsePrecedence(this._parsePrimary(),13);return this._ast.unary(e,t)}return this._parsePrimary()}_parseTernary(e){this._advance(V.OPERATOR,"?");const t=this._parseExpression();this._advance(V.COLON);const r=this._parseExpression();return this._ast.ternary(e,t,r)}_parsePrimary(){switch(this._kind){case V.KEYWORD:const e=this._value;if("this"===e)return this._advance(),this._ast.id(e);if(-1!==F.indexOf(e))throw new Error(`unexpected keyword: ${e}`);throw new Error(`unrecognized keyword: ${e}`);case V.IDENTIFIER:return this._parseInvokeOrIdentifier();case V.STRING:return this._parseString();case V.INTEGER:return this._parseInteger();case V.DECIMAL:return this._parseDecimal();case V.GROUPER:return"("===this._value?this._parseParenOrFunction():"{"===this._value?this._parseMap():"["===this._value?this._parseList():void 0;case V.COLON:throw new Error('unexpected token ":"');default:return}}_parseList(){const e=[];do{if(this._advance(),this._matches(V.GROUPER,"]"))break;e.push(this._parseExpression())}while(this._matches(V.COMMA));return this._advance(V.GROUPER,"]"),this._ast.list(e)}_parseMap(){const e={};do{if(this._advance(),this._matches(V.GROUPER,"}"))break;const t=this._value;(this._matches(V.STRING)||this._matches(V.IDENTIFIER))&&this._advance(),this._advance(V.COLON),e[t]=this._parseExpression()}while(this._matches(V.COMMA));return this._advance(V.GROUPER,"}"),this._ast.map(e)}_parseInvokeOrIdentifier(){const e=this._value;if("true"===e)return this._advance(),this._ast.literal(!0);if("false"===e)return this._advance(),this._ast.literal(!1);if("null"===e)return this._advance(),this._ast.literal(null);if("undefined"===e)return this._advance(),this._ast.literal(void 0);const t=this._parseIdentifier(),r=this._parseArguments();return r?this._ast.invoke(t,void 0,r):t}_parseIdentifier(){if(!this._matches(V.IDENTIFIER))throw new Error(`expected identifier: ${this._value}`);const e=this._value;return this._advance(),this._ast.id(e)}_parseArguments(){if(!this._matches(V.GROUPER,"("))return;const e=[];do{if(this._advance(),this._matches(V.GROUPER,")"))break;const t=this._parseExpression();e.push(t)}while(this._matches(V.COMMA));return this._advance(V.GROUPER,")"),e}_parseIndex(){this._advance();const e=this._parseExpression();return this._advance(V.GROUPER,"]"),e}_parseParenOrFunction(){const e=this._parseArguments();if(this._matches(V.ARROW)){this._advance();const t=this._parseExpression(),r=e?.map((e=>e.value))??[];return this._ast.arrowFunction(r,t)}return this._ast.paren(e[0])}_parseString(){const e=this._ast.literal(this._value);return this._advance(),e}_parseInteger(e=""){const t=this._ast.literal(parseInt(`${e}${this._value}`,10));return this._advance(),t}_parseDecimal(e=""){const t=this._ast.literal(parseFloat(`${e}${this._value}`));return this._advance(),t}}const ee={"+":(e,t)=>e+t,"-":(e,t)=>e-t,"*":(e,t)=>e*t,"/":(e,t)=>e/t,"%":(e,t)=>e%t,"==":(e,t)=>e==t,"!=":(e,t)=>e!=t,"===":(e,t)=>e===t,"!==":(e,t)=>e!==t,">":(e,t)=>e>t,">=":(e,t)=>e>=t,"<":(e,t)=>e<t,"<=":(e,t)=>e<=t,"||":(e,t)=>e||t,"&&":(e,t)=>e&&t,"??":(e,t)=>e??t,"|":(e,t)=>t(e),"|>":(e,t)=>t(e)},te={"+":e=>e,"-":e=>-e,"!":e=>!e};class re{timeouts=new Map;debounce(e,t){return new Promise(((r,i)=>{const n=this.timeouts.get(t);n&&clearTimeout(n),this.timeouts.set(t,setTimeout((()=>{try{r(t()),this.timeouts.delete(t)}catch(e){i(e)}}),e))}))}}const ie=new class{empty(){return{type:"Empty",evaluate:e=>e,getIds:e=>e}}literal(e){return{type:"Literal",value:e,evaluate(e){return this.value},getIds:e=>e}}id(e){return{type:"ID",value:e,evaluate(e){return"this"===this.value?e:e?.[this.value]},getIds(e){return e.push(this.value),e}}}unary(e,t){const r=te[e];return{type:"Unary",operator:e,child:t,evaluate(e){return r(this.child.evaluate(e))},getIds(e){return this.child.getIds(e)}}}binary(e,t,r){const i=ee[t];return{type:"Binary",operator:t,left:e,right:r,evaluate(e){if("="===this.operator){if("ID"!==this.left.type&&"Getter"!==this.left.type&&"Index"!==this.left.type)throw new Error(`Invalid assignment target: ${this.left}`);const t=this.right.evaluate(e);let r,i;return"Getter"===this.left.type?(r=this.left.receiver.evaluate(e),i=this.left.name):"Index"===this.left.type?(r=this.left.receiver.evaluate(e),i=this.left.argument.evaluate(e)):"ID"===this.left.type&&(r=e,i=this.left.value),void 0===r?void 0:r[i]=t}return i(this.left.evaluate(e),this.right.evaluate(e))},getIds(e){return this.left.getIds(e),this.right.getIds(e),e}}}getter(e,t){return{type:"Getter",receiver:e,name:t,evaluate(e){return this.receiver.evaluate(e)?.[this.name]},getIds(e){return this.receiver.getIds(e),e}}}invoke(e,t,r){if(null!=t&&"string"!=typeof t)throw new Error("method not a string");return{type:"Invoke",receiver:e,method:t,arguments:r,evaluate(e){const r=this.receiver.evaluate(e),i=this.method?r:e?.this??e,n=this.method?r?.[t]:r,s=(this.arguments??[]).map((t=>t?.evaluate(e)));return n?.apply?.(i,s)},getIds(e){return this.receiver.getIds(e),this.arguments?.forEach((t=>t?.getIds(e))),e}}}paren(e){return e}index(e,t){return{type:"Index",receiver:e,argument:t,evaluate(e){return this.receiver.evaluate(e)?.[this.argument.evaluate(e)]},getIds(e){return this.receiver.getIds(e),e}}}ternary(e,t,r){return{type:"Ternary",condition:e,trueExpr:t,falseExpr:r,evaluate(e){return this.condition.evaluate(e)?this.trueExpr.evaluate(e):this.falseExpr.evaluate(e)},getIds(e){return this.condition.getIds(e),this.trueExpr.getIds(e),this.falseExpr.getIds(e),e}}}map(e){return{type:"Map",entries:e,evaluate(t){const r={};if(e&&this.entries)for(const i in e){const e=this.entries[i];e&&(r[i]=e.evaluate(t))}return r},getIds(t){if(e&&this.entries)for(const r in e){const e=this.entries[r];e&&e.getIds(t)}return t}}}list(e){return{type:"List",items:e,evaluate(e){return this.items?.map((t=>t?.evaluate(e)))},getIds(e){return this.items?.forEach((t=>t?.getIds(e))),e}}}arrowFunction(e,t){return{type:"ArrowFunction",params:e,body:t,evaluate(e){const t=this.params,r=this.body;return function(...i){const n=Object.fromEntries(t.map(((e,t)=>[e,i[t]]))),s=new Proxy(e??{},{set:(e,t,r)=>(n.hasOwnProperty(t)&&(n[t]=r),e[t]=r),get:(e,t)=>n.hasOwnProperty(t)?n[t]:e[t]});return r.evaluate(s)}},getIds(e){return this.body.getIds(e).filter((e=>!this.params.includes(e)))}}}};class ne extends re{evalkeys=["$elem","$event"];expressionCache=new Map;store=new Map;observers=new Map;_observer=null;_lock=Promise.resolve();constructor(e){super();for(let[t,r]of Object.entries(e||{}))this.set(t,r)}wrapFunction(e){return(...t)=>e.call(this.$,...t)}wrapObject(e,t){return null==e||((r=e)instanceof ne||r.__is_proxy__)||e.constructor!==Object&&!Array.isArray(e)?e:new Proxy(e,{deleteProperty:(e,r)=>r in e&&(delete e[r],t(),!0),set:(r,i,n,s)=>{"object"==typeof n&&null!=e&&(n=this.wrapObject(n,t));const o=Reflect.set(r,i,n,s);return t(),o},get:(e,t,r)=>"__is_proxy__"===t||Reflect.get(e,t,r)});var r}watch(e,t){this.observers.has(e)||this.observers.set(e,new Set),this.observers.get(e)?.has(t)||this.observers.get(e)?.add(t)}async notify(e,t=10){const r=Array.from(this.observers.get(e)||[]);await this.debounce(t,(()=>Promise.all(r.map((e=>e.call(this.proxify(e)))))))}get(e,t){return t&&this.watch(e,t),this.store.get(e)}async set(e,t){if(t===this.store.get(e))return;const r=()=>this.notify(e);t&&"function"==typeof t&&(t=this.wrapFunction(t)),t&&"object"==typeof t&&(t=this.wrapObject(t,r)),this.store.set(e,t),await r()}del(e){this.store.delete(e),this.observers.delete(e)}has(e){return this.store.has(e)}effect(e){return e.call(this.proxify(e))}proxify(e){const t=Array.from(this.store.entries()).map((([e])=>e)),r=Object.fromEntries(t.map((e=>[e,void 0])));return new Proxy(r,{get:(t,r,i)=>"string"==typeof r&&this.store.has(r)?this.get(r,e):"$"===r?this.proxify(e):Reflect.get(this,r,i),set:(e,t,r,i)=>("string"!=typeof t||t in this?Reflect.set(this,t,r,i):this.set(t,r),!0)})}get $(){return this.proxify()}makeEvalFunction(e){if(e.includes(";"))throw new Error("Complex expressions are not supported.");let t=null;if(e.includes(" = ")){const[r,i]=e.split(" = ");t=r.trim(),e=i.trim()}return(r,i)=>{const n=((e,t)=>new J(e,t).parse())(e,ie),s=n?.getIds([])?.map((e=>[e,i[e]??r[e]??globalThis[e]])),o=n?.evaluate(Object.fromEntries(s||[]));if(!t)return o;r[t]=o}}cachedExpressionFunction(e){return e=e.trim(),this.expressionCache.has(e)||this.expressionCache.set(e,this.makeEvalFunction(e)),this.expressionCache.get(e)}eval(e,t={}){const r=this._observer?this:this.$;if(this.store.has(e))return r[e];{const i=this.cachedExpressionFunction(e);try{return i(r,t)}catch(t){return console.error(`Failed to evaluate expression: ${e}`),console.error(t),null}}}}class se extends ne{debugging=!1;dirpath="";_skipNodes=new Set;_customElements=new Map;debug(e){return this.debugging=e,this}async fetchRemote(e,t){return fetch(e,{cache:t?.cache??"default"}).then((e=>e.text()))}async fetchLocal(e,t){return this.fetchRemote(e,t)}async preprocessString(e,t){this.log("Preprocessing string content with params:\n",t);const r=this.parseHTML(e,t);return await this.preprocessNode(r,t),r}async preprocessRemote(e,t){const r={};t?.cache&&(r.cache=t.cache);const i=await fetch(e,r).then((e=>e.text()));return this.preprocessString(i,{...t,dirpath:z(e),rootDocument:t?.rootDocument??!e.endsWith(".tpl.html")})}async preprocessLocal(e,t){const r=await this.fetchLocal(e,t);return this.preprocessString(r,{...t,dirpath:z(e),rootDocument:t?.rootDocument??!e.endsWith(".tpl.html")})}clone(){const e=Object.fromEntries(this.store.entries()),t=new this.constructor(e).debug(this.debugging);return t._customElements=this._customElements,Array.from(this.store.keys()).forEach((e=>this.watch(e,(()=>t.set(e,this.get(e)))))),t}log(...e){this.debugging&&console.debug(...e)}async preprocessNode(e,t){t={dirpath:this.dirpath,maxdepth:10,...t};const r=new d(O(e,this._skipNodes)).map((async e=>{this.log("Preprocessing node:\n",j(e,128)),await G.resolveIncludes.call(this,e,t),await G.rebaseRelativePaths.call(this,e,t),await G.registerCustomElements.call(this,e,t),await G.resolveCustomElements.call(this,e,t)}));return await Promise.all(r.generator()),e}async renderNode(e,t){for(const r of O(e,this._skipNodes))this.log("Rendering node:\n",j(r,128)),await G.resolveDataAttribute.call(this,r,t),await G.resolveForAttribute.call(this,r,t),await G.resolveTextAttributes.call(this,r,t),await G.resolveHtmlAttribute.call(this,r,t),await G.resolveShowAttribute.call(this,r,t),await G.resolveClassAttribute.call(this,r,t),await G.resolveBindAttribute.call(this,r,t),await G.resolveEventAttributes.call(this,r,t),await G.resolveTextNodeExpressions.call(this,r,t),await G.resolveCustomAttribute.call(this,r,t);return e}async mount(e,t){t={...t,rootNode:e},await this.preprocessNode(e,t),await this.renderNode(e,t),e.renderer=this}}class oe extends se{dirpath=z(self.location.href);parseHTML(e,t={rootDocument:!1}){if(t.rootDocument)return(new DOMParser).parseFromString(e,"text/html");{const t=document.createRange();return t.selectNodeContents(document.body),t.createContextualFragment(e)}}serializeHTML(e){return(new XMLSerializer).serializeToString(e).replace(/\s?xmlns="[^"]+"/gm,"")}preprocessLocal(e,t){return this.preprocessRemote(e,t)}createElement(e,t){return(t||document).createElement(e)}textContent(e,t){e.textContent=t}}new oe;const ae={sm:640,md:768,lg:1024,xl:1280},ce=.25,le=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],he=[...le,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,...Object.values(ae)],ue=[1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100],de=["hover","focus","disabled","focus","active"],pe={margin:"m",padding:"p"},fe={width:"w",height:"h"},me={top:"top",right:"right",bottom:"bottom",left:"left"},_e={"min-width":"min-w","min-height":"min-h","max-width":"max-w","max-height":"max-h"},Ee={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":"monospace"},"font-sans":{"font-family":"sans-serif"},"font-serif":{"font-family":"serif"},"font-cursive":{"font-family":"cursive"},"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"},visible:{visibility:"visible"},invisible:{visibility:"hidden"},collapse:{visibility:"collapse"},"list-none":{"list-style-type":"none"},"list-disc":{"list-style-type":"disc"},"list-decimal":{"list-style-type":"decimal"},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 ease-in-out"},"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"}},ge=["@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  }"],$e={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 ve(e){return de.map((t=>`.${t}\\:${e}:${t}`))}function be(e,t){return Object.entries(ae).map((([r,i])=>`@media (min-width: ${i}px) { .${r}\\:${e} { ${t} } }`))}function ye(e,t){return e.includes("@media")&&!t.includes("@media")?1:!e.includes("@media")&&t.includes("@media")?-1:e.localeCompare(t)}function we(e){return Object.entries(e).flatMap((([e,t])=>[[`${t}-0`,`${e}: 0`],[`${t}-screen`,`${e}: 100vw`],[`${t}-full`,`${e}: 100%`],...he.map((r=>[`${t}-${r}`,`${e}: ${r*ce}rem`])),...he.map((r=>[`-${t}-${r}`,`${e}: -${r*ce}rem`])),...he.map((r=>[`${t}-${r}px`,`${e}: ${r}px`])),...he.map((r=>[`-${t}-${r}px`,`${e}: -${r}px`])),...ue.map((r=>[`${t}-${r}\\%`,`${e}: ${r}%`])),...ue.map((r=>[`-${t}-${r}\\%`,` ${e}: -${r}%`]))])).flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))}function xe(e){return Object.entries(e).flatMap((([e,t])=>[`.${t}-auto { ${e}: auto; }`,`.${t}x-auto { ${e}-left: auto; ${e}-right: auto; }`,`.${t}y-auto { ${e}-top: auto; ${e}-bottom: auto; }`,`.${t}x-0 { ${e}-left: 0; ${e}-right: 0; }`,`.${t}y-0 { ${e}-top: 0; ${e}-bottom: 0; }`,...he.map((e=>[e,e*ce])).map((([r,i])=>`.${t}x-${r} { ${e}-left: ${i}rem; ${e}-right: ${i}rem; }`)),...he.map((e=>[e,e*ce])).map((([r,i])=>`.${t}y-${r} { ${e}-top: ${i}rem; ${e}-bottom: ${i}rem; }`)),...he.map((r=>`.${t}x-${r}px { ${e}-left: ${r}px; ${e}-right: ${r}px; }`)),...he.map((r=>`.${t}y-${r}px { ${e}-top: ${r}px; ${e}-bottom: ${r}px; }`)),...ue.map((r=>`.${t}x-${r}\\% { ${e}-left: ${r}%; ${e}-right: ${r}%; }`)),...ue.map((r=>`.${t}y-${r}\\% { ${e}-top: ${r}%; ${e}-bottom: ${r}%; }`))]))}function Ae(){const e=[["white","#fff"],["black","#000"],["transparent","transparent"]].flatMap((([e,t])=>[[`text-${e}`,`color: ${t}`],[`fill-${e}`,`fill: ${t}`],[`bg-${e}`,`background-color: ${t}`],[`border-${e}`,`border-color: ${t}`]])),t=Object.entries($e).flatMap((([e,t])=>[[`text-${e}`,`color: #${t[500].toString(16)}`],[`fill-${e}`,`fill: #${t[500].toString(16)}`],[`bg-${e}`,`background-color: #${t[500].toString(16)}`],[`border-${e}`,`border-color: #${t[500].toString(16)}`]])),r=Object.entries($e).flatMap((([e,t])=>Object.entries(t).flatMap((([t,r])=>[[`text-${e}-${t}`,`color: #${r.toString(16)}`],[`fill-${e}-${t}`,`fill: #${r.toString(16)}`],[`bg-${e}-${t}`,`background-color: #${r.toString(16)}`],[`border-${e}-${t}`,`border-color: #${r.toString(16)}`]]))));return[].concat(e).concat(t).concat(r).flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))}const Oe=new oe;globalThis.Mancha=Oe;const Re=globalThis.document?.currentScript;if(globalThis.document?.currentScript?.hasAttribute("init")){const e=Re?.hasAttribute("debug"),t=Re?.getAttribute("cache"),r=Re?.getAttribute("target")?.split("+")||["body"];window.addEventListener("load",(()=>{r.map((async r=>{const i=globalThis.document.querySelector(r);await Oe.debug(e).mount(i,{cache:t})}))}))}if(globalThis.document?.currentScript?.hasAttribute("css")){const e=Re?.getAttribute("css")?.split("+");for(const t of e){const e=document.createElement("style");switch(t){case"basic":u(e,x`
+(()=>{"use strict";const e=/^\s*(?!javascript:)(?:[\w+.-]+:|[^:/?#]*(?:[/?#]|$))/i;function t(t){if(!function(t){const r=!e.test(t);return r}(t))return t}function r(e){return t(e)}const i={};function s(e){0}"undefined"!=typeof window&&window.TrustedScriptURL;class n{constructor(e,t){this.privateDoNotAccessOrElseWrappedAttributePrefix=t}toString(){return this.privateDoNotAccessOrElseWrappedAttributePrefix}}const o=n;function a(e){if(function(e){return e instanceof n}(e))return e.privateDoNotAccessOrElseWrappedAttributePrefix;throw new Error("")}"undefined"!=typeof window&&window.TrustedHTML;function c(e,t,r,i){if(0===e.length){throw new Error("")}const s=e.map((e=>a(e))),n=r.toLowerCase();if(s.every((e=>0!==n.indexOf(e))))throw new Error(`Attribute "${r}" does not match any of the allowed prefixes.`);t.setAttribute(r,i)}"undefined"!=typeof window&&window.TrustedScript;class l{}class h extends l{constructor(e,t){super(),s(),this.privateDoNotAccessOrElseWrappedStyleSheet=e}toString(){return this.privateDoNotAccessOrElseWrappedStyleSheet}}function u(e,t){e.textContent=function(e){if(e instanceof h)return e.privateDoNotAccessOrElseWrappedStyleSheet;throw new Error("")}(t)}Error;class d{iterable;constructor(e){this.iterable=e}filter(e){return new d(d.filterGenerator(e,this.iterable))}map(e){return new d(d.mapGenerator(e,this.iterable))}find(e){for(const t of this.iterable)if(e(t))return t}array(){return Array.from(this.iterable)}*generator(){for(const e of this.iterable)yield e}static*filterGenerator(e,t){for(const r of t)e(r)&&(yield r)}static*mapGenerator(e,t){for(const r of t)yield e(r)}static equals(e,t){const r=e[Symbol.iterator](),i=t[Symbol.iterator]();let s=r.next(),n=i.next();for(;!s.done&&!n.done;){if(s.value!==n.value)return!1;s=r.next(),n=i.next()}return s.done===n.done}}function p(e){return Object.isFrozen(e)&&Object.isFrozen(e.raw)}function f(e){return-1===e.toString().indexOf("`")}f((e=>e``))||f((e=>e`\0`))||f((e=>e`\n`))||f((e=>e`\u0000`)),p``&&p`\0`&&p`\n`&&p`\u0000`;function m(e){const t=e[0].toLowerCase();return new o(i,t)}var _,g;function E(e){return{valueOf:e}.valueOf()}!function(e){e[e.STYLE_TAG=0]="STYLE_TAG",e[e.STYLE_ATTRIBUTE=1]="STYLE_ATTRIBUTE",e[e.HTML_ATTRIBUTE=2]="HTML_ATTRIBUTE"}(_||(_={}));class ${constructor(e,t,r,i,s){this.allowedElements=e,this.elementPolicies=t,this.allowedGlobalAttributes=r,this.globalAttributePolicies=i,this.globallyAllowedAttributePrefixes=s}isAllowedElement(e){return"FORM"!==e&&(this.allowedElements.has(e)||this.elementPolicies.has(e))}getAttributePolicy(e,t){const r=this.elementPolicies.get(t);if(null==r?void 0:r.has(e))return r.get(e);if(this.allowedGlobalAttributes.has(e))return{policyAction:g.KEEP};const i=this.globalAttributePolicies.get(e);return i||(this.globallyAllowedAttributePrefixes&&[...this.globallyAllowedAttributePrefixes].some((t=>0===e.indexOf(t)))?{policyAction:g.KEEP}:{policyAction:g.DROP})}}!function(e){e[e.DROP=0]="DROP",e[e.KEEP=1]="KEEP",e[e.KEEP_AND_SANITIZE_URL=2]="KEEP_AND_SANITIZE_URL",e[e.KEEP_AND_NORMALIZE=3]="KEEP_AND_NORMALIZE",e[e.KEEP_AND_SANITIZE_STYLE=4]="KEEP_AND_SANITIZE_STYLE",e[e.KEEP_AND_USE_RESOURCE_URL_POLICY=5]="KEEP_AND_USE_RESOURCE_URL_POLICY",e[e.KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET=6]="KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET"}(g||(g={}));new Set(["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"]);const v=["ARTICLE","SECTION","NAV","ASIDE","H1","H2","H3","H4","H5","H6","HEADER","FOOTER","ADDRESS","P","HR","PRE","BLOCKQUOTE","OL","UL","LH","LI","DL","DT","DD","FIGURE","FIGCAPTION","MAIN","DIV","EM","STRONG","SMALL","S","CITE","Q","DFN","ABBR","RUBY","RB","RT","RTC","RP","DATA","TIME","CODE","VAR","SAMP","KBD","SUB","SUP","I","B","U","MARK","BDI","BDO","SPAN","BR","WBR","INS","DEL","PICTURE","PARAM","TRACK","MAP","TABLE","CAPTION","COLGROUP","COL","TBODY","THEAD","TFOOT","TR","TD","TH","SELECT","DATALIST","OPTGROUP","OPTION","OUTPUT","PROGRESS","METER","FIELDSET","LEGEND","DETAILS","SUMMARY","MENU","DIALOG","SLOT","CANVAS","FONT","CENTER","ACRONYM","BASEFONT","BIG","DIR","HGROUP","STRIKE","TT"],b=[["A",new Map([["href",{policyAction:g.KEEP_AND_SANITIZE_URL}]])],["AREA",new Map([["href",{policyAction:g.KEEP_AND_SANITIZE_URL}]])],["LINK",new Map([["href",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY,conditions:new Map([["rel",new Set(["alternate","author","bookmark","canonical","cite","help","icon","license","next","prefetch","dns-prefetch","prerender","preconnect","preload","prev","search","subresource"])]])}]])],["SOURCE",new Map([["src",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY}],["srcset",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET}]])],["IMG",new Map([["src",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY}],["srcset",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY_FOR_SRCSET}]])],["VIDEO",new Map([["src",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY}]])],["AUDIO",new Map([["src",{policyAction:g.KEEP_AND_USE_RESOURCE_URL_POLICY}]])]],x=["title","aria-atomic","aria-autocomplete","aria-busy","aria-checked","aria-current","aria-disabled","aria-dropeffect","aria-expanded","aria-haspopup","aria-hidden","aria-invalid","aria-label","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext","alt","align","autocapitalize","autocomplete","autocorrect","autofocus","autoplay","bgcolor","border","cellpadding","cellspacing","checked","color","cols","colspan","controls","datetime","disabled","download","draggable","enctype","face","formenctype","frameborder","height","hreflang","hidden","ismap","label","lang","loop","max","maxlength","media","minlength","min","multiple","muted","nonce","open","placeholder","preload","rel","required","reversed","role","rows","rowspan","selected","shape","size","sizes","slot","span","spellcheck","start","step","summary","translate","type","valign","value","width","wrap","itemscope","itemtype","itemid","itemprop","itemref"],w=[["dir",{policyAction:g.KEEP_AND_NORMALIZE,conditions:E((()=>new Map([["dir",new Set(["auto","ltr","rtl"])]])))}],["async",{policyAction:g.KEEP_AND_NORMALIZE,conditions:E((()=>new Map([["async",new Set(["async"])]])))}],["cite",{policyAction:g.KEEP_AND_SANITIZE_URL}],["loading",{policyAction:g.KEEP_AND_NORMALIZE,conditions:E((()=>new Map([["loading",new Set(["eager","lazy"])]])))}],["poster",{policyAction:g.KEEP_AND_SANITIZE_URL}],["target",{policyAction:g.KEEP_AND_NORMALIZE,conditions:E((()=>new Map([["target",new Set(["_self","_blank"])]])))}]];new $(new Set(v),new Map(b),new Set(x),new Map(w)),new $(new Set(E((()=>v.concat(["STYLE"])))),new Map(b),new Set(E((()=>x.concat(["id","name","class"])))),new Map(E((()=>w.concat([["style",{policyAction:g.KEEP_AND_SANITIZE_STYLE}]])))));function y(e){return function(e){return new h(e,i)}(e[0])}const A=[m`:`,m`style`,m`class`];function*O(e,t=new Set){const r=new Set,i=Array.from(e.childNodes).filter((e=>!t.has(e)));for(yield e;i.length;){const e=i.shift();r.has(e)||(r.add(e),yield e),e.childNodes&&Array.from(e.childNodes).filter((e=>!t.has(e))).forEach((e=>i.push(e)))}}function R(e,t){return void 0!==e?.[t]}function I(e,t){return"function"==typeof e?.[t]}function N(e,t){return R(e,"attribs")?e.attribs?.[t]??null:e.getAttribute?.(t)}function T(e,t,r){R(e,"attribs")?e.attribs[t]=r:c(A,e,t,r)}function S(e,t){R(e,"attribs")?delete e.attribs[t]:e.removeAttribute?.(t)}function P(e,t,r){if(R(e,"attribs")&&R(t,"attribs"))t.attribs[r]=e.attribs[r];else{const i=e?.getAttribute?.(r);T(t,r,i||"")}}function k(e,...t){if(I(e,"replaceWith"))return e.replaceWith(...t);{const r=e,i=r.parentNode,s=Array.from(i.childNodes).indexOf(r);t.forEach((e=>e.parentNode=i)),i.childNodes=[].concat(Array.from(i.childNodes).slice(0,s)).concat(t).concat(Array.from(i.childNodes).slice(s+1))}}function C(e,...t){I(e,"replaceChildren")?e.replaceChildren(...t):(e.childNodes=t,t.forEach((t=>t.parentNode=e)))}function L(e,t){return I(t,"appendChild")?e.appendChild(t):(e.childNodes.push(t),t.parentNode=e,t)}function D(e,t){return I(t,"removeChild")?e.removeChild(t):(C(e,...Array.from(e.childNodes).filter((e=>e!==t))),t)}function M(e,t,r){return r?I(e,"insertBefore")?e.insertBefore(t,r):(k(r,t,r),t):L(e,t)}function U(e,t=0){return e?e.length<=t?e:e.slice(0,t-1)+"…":""}function j(e,t=0){return U(e.outerHTML||e.nodeValue||String(e),t)}function z(e){return e.includes("/")?e.split("/").slice(0,-1).join("/"):""}var F;!function(e){e.resolveIncludes=async function(e,t){const r=e;if("include"!==r.tagName?.toLocaleLowerCase())return;this.log("<include> tag found in:\n",j(e,128)),this.log("<include> params:",t);const i=N(r,"src");if(!i)throw new Error(`"src" attribute missing from ${e}.`);const s=t=>{const i=t.firstChild;for(const e of Array.from(r.attributes))i&&"src"!==e.name&&P(r,i,e.name);k(e,...t.childNodes)},n={...t,rootDocument:!1,maxdepth:t?.maxdepth-1};if(0===n.maxdepth)throw new Error("Maximum recursion depth reached.");if(i.includes("://")||i.startsWith("//"))this.log("Including remote file from absolute path:",i),await this.preprocessRemote(i,n).then(s);else if(t?.dirpath?.includes("://")||t?.dirpath?.startsWith("//")){const e=i.startsWith("/")?i:`${t.dirpath}/${i}`;this.log("Including remote file from relative path:",e),await this.preprocessRemote(e,n).then(s)}else if("/"===i.charAt(0))this.log("Including local file from absolute path:",i),await this.preprocessLocal(i,n).then(s);else{const e=t?.dirpath&&"."!==t?.dirpath?`${t?.dirpath}/${i}`:i;this.log("Including local file from relative path:",e),await this.preprocessLocal(e,n).then(s)}},e.rebaseRelativePaths=async function(e,t){const i=e,s=i.tagName?.toLowerCase();if(!t?.dirpath)return;const n=N(i,"src"),o=N(i,"href"),a=n||o;if(a&&!((c=a).includes("://")||c.startsWith("/")||c.startsWith("#")||c.startsWith("data:"))){const e=`${t.dirpath}/${a}`;this.log("Rebasing relative path as:",e),"img"===s?i.src=e:"a"===s?function(e,t){const i=r(t);void 0!==i&&(e.href=i)}(i,e):"source"===s||"audio"===s||"video"===s||"track"===s||"input"===s?i.src=e:"area"===s?function(e,t){const i=r(t);void 0!==i&&(e.href=i)}(i,e):this.log("Unable to rebase relative path for element:",s)}var c},e.registerCustomElements=async function(e,t){const r=e;if("template"===r.tagName?.toLowerCase()&&N(r,"is")){const e=N(r,"is")?.toLowerCase();this._customElements.has(e)||(this.log(`Registering custom element: ${e}\n`,j(r,128)),this._customElements.set(e,r.cloneNode(!0)),D(r.parentNode,r))}},e.resolveCustomElements=async function(e,t){const r=e,i=r.tagName?.toLowerCase();if(this._customElements.has(i)){this.log(`Processing custom element: ${i}\n`,j(r,128));const t=this._customElements.get(i),s=(t.content||t).cloneNode(!0),n=function(e){return R(e,"firstElementChild")?e.firstElementChild:Array.from(e.children).find((e=>1===e.nodeType))}(s);for(const e of Array.from(r.attributes))n&&P(r,n,e.name);const o=new d(O(s)).find((e=>"slot"===e.tagName?.toLowerCase()));o&&k(o,...r.childNodes),k(e,...s.childNodes)}},e.resolveTextNodeExpressions=async function(e,t){const r=e.nodeValue||"";if(3!==e.nodeType||!r?.trim())return;this.log("Processing node content value:\n",U(r,128));const i=new RegExp(/{{ ([^}]+) }}/gm),s=Array.from(r.matchAll(i)).map((e=>e[1]));return this.effect((function(){let t=r;for(const r of s){const i=this.eval(r,{$elem:e});t=t.replace(`{{ ${r} }}`,String(i))}e.nodeValue=t}))},e.resolveDataAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":data");if(i){this.log(":data attribute found in:\n",j(e,128)),S(r,":data");const s=t?.rootNode===e?this:this.clone();e.renderer=s;const n=s.eval(i,{$elem:e});if(await Promise.all(Object.entries(n).map((([e,t])=>s.set(e,t)))),s!==this)for(const t of O(e,this._skipNodes))this._skipNodes.add(t);await s.mount(e,t)}},e.resolveClassAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":class");if(i){this.log(":class attribute found in:\n",j(e,128)),S(r,":class");const t=N(r,"class")||"";return this.effect((function(){const s=this.eval(i,{$elem:e});T(r,"class",(s?`${t} ${s}`:t).trim())}))}},e.resolveTextAttributes=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":text");if(i){this.log(":text attribute found in:\n",j(e,128)),S(r,":text");const t=t=>this.textContent(e,t);return this.effect((function(){t(this.eval(i,{$elem:e}))}))}},e.resolveHtmlAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":html");return i?(this.log(":html attribute found in:\n",j(e,128)),S(r,":html"),this.effect((function(){const s=this.eval(i,{$elem:e});return new Promise((async e=>{const i=await this.preprocessString(s,t);await this.renderNode(i),C(r,i),e()}))}))):void 0},e.resolveEventAttributes=async function(e,t){if(this._skipNodes.has(e))return;const r=e;for(const t of Array.from(r.attributes||[]))if(t.name.startsWith(":on:")){const i=t.name.substring(4);this.log(t.name,"attribute found in:\n",j(e,128)),S(r,t.name);const s="submit"===i&&"FORM"===r.tagName.toUpperCase();e.addEventListener?.(i,(r=>(s&&r.preventDefault(),this.eval(t.value,{$elem:e,$event:r}))))}},e.resolveForAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":for")?.trim();if(i){this.log(":for attribute found in:\n",j(e,128)),S(r,":for");for(const t of O(e,this._skipNodes))this._skipNodes.add(t);const s=e.parentNode,n=this.createElement("template",e.ownerDocument);M(s,n,e),D(s,e),L(n,e),this.log(":for template:\n",j(n,128));const o=i.split(" in ",2);if(2!==o.length)throw new Error(`Invalid :for format: \`${i}\`. Expected "{key} in {expression}".`);const a=[],[c,l]=o;await this.effect((function(){const r=this.eval(l,{$elem:e});if(this.log(":for list items:",r),a.splice(0,a.length).forEach((e=>{D(s,e),this._skipNodes.delete(e)})),!Array.isArray(r))return console.error(`Expression did not yield a list: \`${l}\` => \`${r}\``),Promise.resolve();const i=[];for(const s of r){const r=this.clone();r.set(c,s);const n=e.cloneNode(!0);a.push(n),this._skipNodes.add(n),i.push(r.mount(n,t)),this.log("Rendered list child:\n",j(n,128))}const o=n.nextSibling;for(const e of a)M(s,e,o);return Promise.all(i)}))}},e.resolveBindAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":bind");if(i){this.log(":bind attribute found in:\n",j(e,128));const t=["change","input"],s=N(r,":bind:on")?.split(",")||t;S(r,":bind"),S(r,":bind:on");const n="checkbox"===N(r,"type")?"checked":"value";this.effect((function(){const t=this.eval(i,{$elem:e});r[n]=t}));const o=`${i} = $elem.${n}`;for(const t of s)e.addEventListener(t,(()=>this.eval(o,{$elem:e})))}},e.resolveShowAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e,i=N(r,":show");if(i){this.log(":show attribute found in:\n",j(e,128)),S(r,":show");const t="none"===r.style?.display?"":r.style?.display??N(r,"style")?.split(";")?.find((e=>"display"===e.split(":")[0]))?.split(":")?.at(1)?.trim();this.effect((function(){const s=this.eval(i,{$elem:e});r.style?r.style.display=s?t:"none":T(r,"style",`display: ${s?t:"none"};`)}))}},e.resolveCustomAttribute=async function(e,t){if(this._skipNodes.has(e))return;const r=e;for(const t of Array.from(r.attributes||[]))if(t.name.startsWith(":")){this.log(t.name,"attribute found in:\n",j(e,128)),S(r,t.name);const i=t.name.substring(1).replace(/-./g,(e=>e[1].toUpperCase()));this.effect((function(){const s=this.eval(t.value,{$elem:e});r[i]=s}))}}}(F||(F={}));const G=["this"],K=["+","-","!"],Y=["=","+","-","*","/","%","^","==","!=",">","<",">=","<=","||","&&","??","&","===","!==","|","|>"],W={"!":0,":":0,",":0,")":0,"]":0,"}":0,"|>":1,"?":2,"??":3,"||":4,"&&":5,"|":6,"^":7,"&":8,"!=":9,"==":9,"!==":9,"===":9,">=":10,">":10,"<=":10,"<":10,"+":11,"-":11,"%":12,"/":12,"*":12,"(":13,"[":13,".":13,"{":13},B=["==","!=","<=",">=","||","&&","??","|>"],H=["===","!=="];var V;!function(e){e[e.STRING=1]="STRING",e[e.IDENTIFIER=2]="IDENTIFIER",e[e.DOT=3]="DOT",e[e.COMMA=4]="COMMA",e[e.COLON=5]="COLON",e[e.INTEGER=6]="INTEGER",e[e.DECIMAL=7]="DECIMAL",e[e.OPERATOR=8]="OPERATOR",e[e.GROUPER=9]="GROUPER",e[e.KEYWORD=10]="KEYWORD",e[e.ARROW=11]="ARROW"}(V||(V={}));const Z=(e,t,r=0)=>({kind:e,value:t,precedence:r}),q=e=>95===e||36===e||65<=(e&=-33)&&e<=90,Q=e=>48<=e&&e<=57;class X{_input;_index=-1;_tokenStart=0;_next;constructor(e){this._input=e,this._advance()}nextToken(){for(;9===(e=this._next)||10===e||13===e||32===e;)this._advance(!0);var e;if((e=>34===e||39===e)(this._next))return this._tokenizeString();if(q(this._next))return this._tokenizeIdentOrKeyword();if(Q(this._next))return this._tokenizeNumber();if(46===this._next)return this._tokenizeDot();if(44===this._next)return this._tokenizeComma();if(58===this._next)return this._tokenizeColon();if((e=>43===e||45===e||42===e||47===e||33===e||38===e||37===e||60===e||61===e||62===e||63===e||94===e||124===e)(this._next))return this._tokenizeOperator();if((e=>40===e||41===e||91===e||93===e||123===e||125===e)(this._next))return this._tokenizeGrouper();if(this._advance(),void 0!==this._next)throw new Error(`Expected end of input, got ${this._next}`)}_advance(e){this._index++,this._index<this._input.length?(this._next=this._input.charCodeAt(this._index),!0===e&&(this._tokenStart=this._index)):this._next=void 0}_getValue(e=0){const t=this._input.substring(this._tokenStart,this._index+e);return 0===e&&this._clearValue(),t}_clearValue(){this._tokenStart=this._index}_tokenizeString(){const e="unterminated string",t=this._next;for(this._advance(!0);this._next!==t;){if(void 0===this._next)throw new Error(e);if(92===this._next&&(this._advance(),void 0===this._next))throw new Error(e);this._advance()}const r=Z(V.STRING,this._getValue().replace(/\\(.)/g,((e,t)=>{switch(t){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"f":return"\f";default:return t}})));return this._advance(),r}_tokenizeIdentOrKeyword(){do{this._advance()}while(e=this._next,q(e)||Q(e));var e;const t=this._getValue(),r=(i=t,-1!==G.indexOf(i)?V.KEYWORD:V.IDENTIFIER);var i;return Z(r,t)}_tokenizeNumber(){do{this._advance()}while(Q(this._next));return 46===this._next?this._tokenizeDot():Z(V.INTEGER,this._getValue())}_tokenizeDot(){return this._advance(),Q(this._next)?this._tokenizeFraction():(this._clearValue(),Z(V.DOT,".",13))}_tokenizeComma(){return this._advance(!0),Z(V.COMMA,",")}_tokenizeColon(){return this._advance(!0),Z(V.COLON,":")}_tokenizeFraction(){do{this._advance()}while(Q(this._next));return Z(V.DECIMAL,this._getValue())}_tokenizeOperator(){this._advance();let e=this._getValue(2);if(-1!==H.indexOf(e))this._advance(),this._advance();else{if(e=this._getValue(1),"=>"===e)return this._advance(),Z(V.ARROW,e);-1!==B.indexOf(e)&&this._advance()}return e=this._getValue(),Z(V.OPERATOR,e,W[e])}_tokenizeGrouper(){const e=String.fromCharCode(this._next),t=Z(V.GROUPER,e,W[e]);return this._advance(!0),t}}class J{_kind;_tokenizer;_ast;_token;_value;constructor(e,t){this._tokenizer=new X(e),this._ast=t}parse(){return this._advance(),this._parseExpression()}_advance(e,t){if(!this._matches(e,t))throw new Error(`Expected kind ${e} (${t}), was ${this._token?.kind} (${this._token?.value})`);const r=this._tokenizer.nextToken();this._token=r,this._kind=r?.kind,this._value=r?.value}_matches(e,t){return!(e&&this._kind!==e||t&&this._value!==t)}_parseExpression(){if(!this._token)return this._ast.empty();const e=this._parseUnary();return void 0===e?void 0:this._parsePrecedence(e,0)}_parsePrecedence(e,t){if(void 0===e)throw new Error("Expected left to be defined.");for(;this._token;)if(this._matches(V.GROUPER,"(")){const t=this._parseArguments();e=this._ast.invoke(e,void 0,t)}else if(this._matches(V.GROUPER,"[")){const t=this._parseIndex();e=this._ast.index(e,t)}else if(this._matches(V.DOT)){this._advance();const t=this._parseUnary();e=this._makeInvokeOrGetter(e,t)}else{if(this._matches(V.KEYWORD))break;if(!(this._matches(V.OPERATOR)&&this._token.precedence>=t))break;e="?"===this._value?this._parseTernary(e):this._parseBinary(e,this._token)}return e}_makeInvokeOrGetter(e,t){if(void 0===t)throw new Error("expected identifier");if("ID"===t.type)return this._ast.getter(e,t.value);if("Invoke"===t.type&&"ID"===t.receiver.type){const r=t.receiver;return this._ast.invoke(e,r.value,t.arguments)}throw new Error(`expected identifier: ${t}`)}_parseBinary(e,t){if(-1===Y.indexOf(t.value))throw new Error(`unknown operator: ${t.value}`);this._advance();let r=this._parseUnary();for(;(this._kind===V.OPERATOR||this._kind===V.DOT||this._kind===V.GROUPER)&&this._token.precedence>t.precedence;)r=this._parsePrecedence(r,this._token.precedence);return this._ast.binary(e,t.value,r)}_parseUnary(){if(this._matches(V.OPERATOR)){const e=this._value;if(this._advance(),"+"===e||"-"===e){if(this._matches(V.INTEGER))return this._parseInteger(e);if(this._matches(V.DECIMAL))return this._parseDecimal(e)}if(-1===K.indexOf(e))throw new Error(`unexpected token: ${e}`);const t=this._parsePrecedence(this._parsePrimary(),13);return this._ast.unary(e,t)}return this._parsePrimary()}_parseTernary(e){this._advance(V.OPERATOR,"?");const t=this._parseExpression();this._advance(V.COLON);const r=this._parseExpression();return this._ast.ternary(e,t,r)}_parsePrimary(){switch(this._kind){case V.KEYWORD:const e=this._value;if("this"===e)return this._advance(),this._ast.id(e);if(-1!==G.indexOf(e))throw new Error(`unexpected keyword: ${e}`);throw new Error(`unrecognized keyword: ${e}`);case V.IDENTIFIER:return this._parseInvokeOrIdentifier();case V.STRING:return this._parseString();case V.INTEGER:return this._parseInteger();case V.DECIMAL:return this._parseDecimal();case V.GROUPER:return"("===this._value?this._parseParenOrFunction():"{"===this._value?this._parseMap():"["===this._value?this._parseList():void 0;case V.COLON:throw new Error('unexpected token ":"');default:return}}_parseList(){const e=[];do{if(this._advance(),this._matches(V.GROUPER,"]"))break;e.push(this._parseExpression())}while(this._matches(V.COMMA));return this._advance(V.GROUPER,"]"),this._ast.list(e)}_parseMap(){const e={};do{if(this._advance(),this._matches(V.GROUPER,"}"))break;const t=this._value;(this._matches(V.STRING)||this._matches(V.IDENTIFIER))&&this._advance(),this._advance(V.COLON),e[t]=this._parseExpression()}while(this._matches(V.COMMA));return this._advance(V.GROUPER,"}"),this._ast.map(e)}_parseInvokeOrIdentifier(){const e=this._value;if("true"===e)return this._advance(),this._ast.literal(!0);if("false"===e)return this._advance(),this._ast.literal(!1);if("null"===e)return this._advance(),this._ast.literal(null);if("undefined"===e)return this._advance(),this._ast.literal(void 0);const t=this._parseIdentifier(),r=this._parseArguments();return r?this._ast.invoke(t,void 0,r):t}_parseIdentifier(){if(!this._matches(V.IDENTIFIER))throw new Error(`expected identifier: ${this._value}`);const e=this._value;return this._advance(),this._ast.id(e)}_parseArguments(){if(!this._matches(V.GROUPER,"("))return;const e=[];do{if(this._advance(),this._matches(V.GROUPER,")"))break;const t=this._parseExpression();e.push(t)}while(this._matches(V.COMMA));return this._advance(V.GROUPER,")"),e}_parseIndex(){this._advance();const e=this._parseExpression();return this._advance(V.GROUPER,"]"),e}_parseParenOrFunction(){const e=this._parseArguments();if(this._matches(V.ARROW)){this._advance();const t=this._parseExpression(),r=e?.map((e=>e.value))??[];return this._ast.arrowFunction(r,t)}return this._ast.paren(e[0])}_parseString(){const e=this._ast.literal(this._value);return this._advance(),e}_parseInteger(e=""){const t=this._ast.literal(parseInt(`${e}${this._value}`,10));return this._advance(),t}_parseDecimal(e=""){const t=this._ast.literal(parseFloat(`${e}${this._value}`));return this._advance(),t}}const ee={"+":(e,t)=>e+t,"-":(e,t)=>e-t,"*":(e,t)=>e*t,"/":(e,t)=>e/t,"%":(e,t)=>e%t,"==":(e,t)=>e==t,"!=":(e,t)=>e!=t,"===":(e,t)=>e===t,"!==":(e,t)=>e!==t,">":(e,t)=>e>t,">=":(e,t)=>e>=t,"<":(e,t)=>e<t,"<=":(e,t)=>e<=t,"||":(e,t)=>e||t,"&&":(e,t)=>e&&t,"??":(e,t)=>e??t,"|":(e,t)=>t(e),"|>":(e,t)=>t(e)},te={"+":e=>e,"-":e=>-e,"!":e=>!e};class re{timeouts=new Map;debounce(e,t){return new Promise(((r,i)=>{const s=this.timeouts.get(t);s&&clearTimeout(s),this.timeouts.set(t,setTimeout((()=>{try{r(t()),this.timeouts.delete(t)}catch(e){i(e)}}),e))}))}}const ie=new class{empty(){return{type:"Empty",evaluate:e=>e,getIds:e=>e}}literal(e){return{type:"Literal",value:e,evaluate(e){return this.value},getIds:e=>e}}id(e){return{type:"ID",value:e,evaluate(e){return"this"===this.value?e:e?.[this.value]},getIds(e){return e.push(this.value),e}}}unary(e,t){const r=te[e];return{type:"Unary",operator:e,child:t,evaluate(e){return r(this.child.evaluate(e))},getIds(e){return this.child.getIds(e)}}}binary(e,t,r){const i=ee[t];return{type:"Binary",operator:t,left:e,right:r,evaluate(e){if("="===this.operator){if("ID"!==this.left.type&&"Getter"!==this.left.type&&"Index"!==this.left.type)throw new Error(`Invalid assignment target: ${this.left}`);const t=this.right.evaluate(e);let r,i;return"Getter"===this.left.type?(r=this.left.receiver.evaluate(e),i=this.left.name):"Index"===this.left.type?(r=this.left.receiver.evaluate(e),i=this.left.argument.evaluate(e)):"ID"===this.left.type&&(r=e,i=this.left.value),void 0===r?void 0:r[i]=t}return i(this.left.evaluate(e),this.right.evaluate(e))},getIds(e){return this.left.getIds(e),this.right.getIds(e),e}}}getter(e,t){return{type:"Getter",receiver:e,name:t,evaluate(e){return this.receiver.evaluate(e)?.[this.name]},getIds(e){return this.receiver.getIds(e),e}}}invoke(e,t,r){if(null!=t&&"string"!=typeof t)throw new Error("method not a string");return{type:"Invoke",receiver:e,method:t,arguments:r,evaluate(e){const r=this.receiver.evaluate(e),i=this.method?r:e?.this??e,s=this.method?r?.[t]:r,n=(this.arguments??[]).map((t=>t?.evaluate(e)));return s?.apply?.(i,n)},getIds(e){return this.receiver.getIds(e),this.arguments?.forEach((t=>t?.getIds(e))),e}}}paren(e){return e}index(e,t){return{type:"Index",receiver:e,argument:t,evaluate(e){return this.receiver.evaluate(e)?.[this.argument.evaluate(e)]},getIds(e){return this.receiver.getIds(e),e}}}ternary(e,t,r){return{type:"Ternary",condition:e,trueExpr:t,falseExpr:r,evaluate(e){return this.condition.evaluate(e)?this.trueExpr.evaluate(e):this.falseExpr.evaluate(e)},getIds(e){return this.condition.getIds(e),this.trueExpr.getIds(e),this.falseExpr.getIds(e),e}}}map(e){return{type:"Map",entries:e,evaluate(t){const r={};if(e&&this.entries)for(const i in e){const e=this.entries[i];e&&(r[i]=e.evaluate(t))}return r},getIds(t){if(e&&this.entries)for(const r in e){const e=this.entries[r];e&&e.getIds(t)}return t}}}list(e){return{type:"List",items:e,evaluate(e){return this.items?.map((t=>t?.evaluate(e)))},getIds(e){return this.items?.forEach((t=>t?.getIds(e))),e}}}arrowFunction(e,t){return{type:"ArrowFunction",params:e,body:t,evaluate(e){const t=this.params,r=this.body;return function(...i){const s=Object.fromEntries(t.map(((e,t)=>[e,i[t]]))),n=new Proxy(e??{},{set:(e,t,r)=>(s.hasOwnProperty(t)&&(s[t]=r),e[t]=r),get:(e,t)=>s.hasOwnProperty(t)?s[t]:e[t]});return r.evaluate(n)}},getIds(e){return this.body.getIds(e).filter((e=>!this.params.includes(e)))}}}};class se extends re{evalkeys=["$elem","$event"];expressionCache=new Map;store=new Map;observers=new Map;_observer=null;_lock=Promise.resolve();constructor(e){super();for(let[t,r]of Object.entries(e||{}))this.set(t,r)}wrapFunction(e){return(...t)=>e.call(this.$,...t)}wrapObject(e,t){return null==e||((r=e)instanceof se||r.__is_proxy__)||e.constructor!==Object&&!Array.isArray(e)?e:new Proxy(e,{deleteProperty:(e,r)=>r in e&&(delete e[r],t(),!0),set:(r,i,s,n)=>{"object"==typeof s&&null!=e&&(s=this.wrapObject(s,t));const o=Reflect.set(r,i,s,n);return t(),o},get:(e,t,r)=>"__is_proxy__"===t||Reflect.get(e,t,r)});var r}watch(e,t){this.observers.has(e)||this.observers.set(e,new Set),this.observers.get(e)?.has(t)||this.observers.get(e)?.add(t)}async notify(e,t=10){const r=Array.from(this.observers.get(e)||[]);await this.debounce(t,(()=>Promise.all(r.map((e=>e.call(this.proxify(e)))))))}get(e,t){return t&&this.watch(e,t),this.store.get(e)}async set(e,t){if(t===this.store.get(e))return;const r=()=>this.notify(e);t&&"function"==typeof t&&(t=this.wrapFunction(t)),t&&"object"==typeof t&&(t=this.wrapObject(t,r)),this.store.set(e,t),await r()}del(e){this.store.delete(e),this.observers.delete(e)}has(e){return this.store.has(e)}effect(e){return e.call(this.proxify(e))}proxify(e){const t=Array.from(this.store.entries()).map((([e])=>e)),r=Object.fromEntries(t.map((e=>[e,void 0])));return new Proxy(r,{get:(t,r,i)=>"string"==typeof r&&this.store.has(r)?this.get(r,e):"$"===r?this.proxify(e):Reflect.get(this,r,i),set:(e,t,r,i)=>("string"!=typeof t||t in this?Reflect.set(this,t,r,i):this.set(t,r),!0)})}get $(){return this.proxify()}makeEvalFunction(e){if(e.includes(";"))throw new Error("Complex expressions are not supported.");let t=null;if(e.includes(" = ")){const[r,i]=e.split(" = ");t=r.trim(),e=i.trim()}return(r,i)=>{const s=((e,t)=>new J(e,t).parse())(e,ie),n=s?.getIds([])?.map((e=>[e,i[e]??r[e]??globalThis[e]])),o=s?.evaluate(Object.fromEntries(n||[]));if(!t)return o;r[t]=o}}cachedExpressionFunction(e){return e=e.trim(),this.expressionCache.has(e)||this.expressionCache.set(e,this.makeEvalFunction(e)),this.expressionCache.get(e)}eval(e,t={}){const r=this._observer?this:this.$;if(this.store.has(e))return r[e];{const i=this.cachedExpressionFunction(e);try{return i(r,t)}catch(t){return console.error(`Failed to evaluate expression: ${e}`),console.error(t),null}}}}class ne extends se{debugging=!1;dirpath="";_skipNodes=new Set;_customElements=new Map;debug(e){return this.debugging=e,this}async fetchRemote(e,t){return fetch(e,{cache:t?.cache??"default"}).then((e=>e.text()))}async fetchLocal(e,t){return this.fetchRemote(e,t)}async preprocessString(e,t){this.log("Preprocessing string content with params:\n",t);const r=this.parseHTML(e,t);return await this.preprocessNode(r,t),r}async preprocessRemote(e,t){const r={};t?.cache&&(r.cache=t.cache);const i=await fetch(e,r).then((e=>e.text()));return this.preprocessString(i,{...t,dirpath:z(e),rootDocument:t?.rootDocument??!e.endsWith(".tpl.html")})}async preprocessLocal(e,t){const r=await this.fetchLocal(e,t);return this.preprocessString(r,{...t,dirpath:z(e),rootDocument:t?.rootDocument??!e.endsWith(".tpl.html")})}clone(){const e=Object.fromEntries(this.store.entries()),t=new this.constructor(e).debug(this.debugging);return t._customElements=this._customElements,Array.from(this.store.keys()).forEach((e=>this.watch(e,(()=>t.set(e,this.get(e)))))),t}log(...e){this.debugging&&console.debug(...e)}async preprocessNode(e,t){t={dirpath:this.dirpath,maxdepth:10,...t};const r=new d(O(e,this._skipNodes)).map((async e=>{this.log("Preprocessing node:\n",j(e,128)),await F.resolveIncludes.call(this,e,t),await F.rebaseRelativePaths.call(this,e,t),await F.registerCustomElements.call(this,e,t),await F.resolveCustomElements.call(this,e,t)}));return await Promise.all(r.generator()),e}async renderNode(e,t){for(const r of O(e,this._skipNodes))this.log("Rendering node:\n",j(r,128)),await F.resolveDataAttribute.call(this,r,t),await F.resolveForAttribute.call(this,r,t),await F.resolveTextAttributes.call(this,r,t),await F.resolveHtmlAttribute.call(this,r,t),await F.resolveShowAttribute.call(this,r,t),await F.resolveClassAttribute.call(this,r,t),await F.resolveBindAttribute.call(this,r,t),await F.resolveEventAttributes.call(this,r,t),await F.resolveTextNodeExpressions.call(this,r,t),await F.resolveCustomAttribute.call(this,r,t);return e}async mount(e,t){t={...t,rootNode:e},await this.preprocessNode(e,t),await this.renderNode(e,t),e.renderer=this}}class oe extends ne{dirpath=z(self.location.href);parseHTML(e,t={rootDocument:!1}){if(t.rootDocument)return(new DOMParser).parseFromString(e,"text/html");{const t=document.createRange();return t.selectNodeContents(document.body),t.createContextualFragment(e)}}serializeHTML(e){return(new XMLSerializer).serializeToString(e).replace(/\s?xmlns="[^"]+"/gm,"")}preprocessLocal(e,t){return this.preprocessRemote(e,t)}createElement(e,t){return(t||document).createElement(e)}textContent(e,t){e.textContent=t}}new oe;const ae={sm:640,md:768,lg:1024,xl:1280},ce=.25,le=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],he=[...le,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,...Object.values(ae)],ue=[1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100],de=["hover","focus","disabled","focus","active"],pe={margin:"m",padding:"p"},fe={width:"w",height:"h"},me={top:"top",right:"right",bottom:"bottom",left:"left"},_e={"min-width":"min-w","min-height":"min-h","max-width":"max-w","max-height":"max-h"},ge={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":"monospace"},"font-sans":{"font-family":"sans-serif"},"font-serif":{"font-family":"serif"},"font-cursive":{"font-family":"cursive"},"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"},visible:{visibility:"visible"},invisible:{visibility:"hidden"},collapse:{visibility:"collapse"},"list-none":{"list-style-type":"none"},"list-disc":{"list-style-type":"disc"},"list-decimal":{"list-style-type":"decimal"},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"},"border-collapse":{"border-collapse":"collapse"},"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"},shadow:{"box-shadow":"0 0 1px 0 rgba(0, 0, 0, 0.05)"},"shadow-sm":{"box-shadow":"0 1px 2px 0 rgba(0, 0, 0, 0.05)"},"shadow-md":{"box-shadow":"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"},"shadow-lg":{"box-shadow":"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"},"shadow-xl":{"box-shadow":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"},"shadow-2xl":{"box-shadow":"0 25px 50px -12px rgba(0, 0, 0, 0.25)"},"shadow-inner":{"box-shadow":"inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"},"shadow-outline":{"box-shadow":"0 0 0 3px rgba(66, 153, 225, 0.5)"},"shadow-none":{"box-shadow":"none"},"transition-none":{transition:"none"},transition:{transition:"all 150ms ease-in-out"},"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"}},Ee=["@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  }"],$e={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 ve(e){return de.map((t=>`.${t}\\:${e}:${t}`))}function be(e,t){return Object.entries(ae).map((([r,i])=>`@media (min-width: ${i}px) { .${r}\\:${e} { ${t} } }`))}function xe(e,t){return e.includes("@media")&&!t.includes("@media")?1:!e.includes("@media")&&t.includes("@media")?-1:e.localeCompare(t)}function we(e){return Object.entries(e).flatMap((([e,t])=>[[`${t}-0`,`${e}: 0`],[`${t}-screen`,`${e}: 100vw`],[`${t}-full`,`${e}: 100%`],...he.map((r=>[`${t}-${r}`,`${e}: ${r*ce}rem`])),...he.map((r=>[`-${t}-${r}`,`${e}: -${r*ce}rem`])),...he.map((r=>[`${t}-${r}px`,`${e}: ${r}px`])),...he.map((r=>[`-${t}-${r}px`,`${e}: -${r}px`])),...ue.map((r=>[`${t}-${r}\\%`,`${e}: ${r}%`])),...ue.map((r=>[`-${t}-${r}\\%`,` ${e}: -${r}%`]))])).flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))}function ye(e){return Object.entries(e).flatMap((([e,t])=>[`.${t}-auto { ${e}: auto; }`,`.${t}x-auto { ${e}-left: auto; ${e}-right: auto; }`,`.${t}y-auto { ${e}-top: auto; ${e}-bottom: auto; }`,`.${t}x-0 { ${e}-left: 0; ${e}-right: 0; }`,`.${t}y-0 { ${e}-top: 0; ${e}-bottom: 0; }`,...he.map((e=>[e,e*ce])).map((([r,i])=>`.${t}x-${r} { ${e}-left: ${i}rem; ${e}-right: ${i}rem; }`)),...he.map((e=>[e,e*ce])).map((([r,i])=>`.${t}y-${r} { ${e}-top: ${i}rem; ${e}-bottom: ${i}rem; }`)),...he.map((r=>`.${t}x-${r}px { ${e}-left: ${r}px; ${e}-right: ${r}px; }`)),...he.map((r=>`.${t}y-${r}px { ${e}-top: ${r}px; ${e}-bottom: ${r}px; }`)),...ue.map((r=>`.${t}x-${r}\\% { ${e}-left: ${r}%; ${e}-right: ${r}%; }`)),...ue.map((r=>`.${t}y-${r}\\% { ${e}-top: ${r}%; ${e}-bottom: ${r}%; }`))]))}function Ae(){const e=[["white","#fff"],["black","#000"],["transparent","transparent"]].flatMap((([e,t])=>[[`text-${e}`,`color: ${t}`],[`fill-${e}`,`fill: ${t}`],[`bg-${e}`,`background-color: ${t}`],[`border-${e}`,`border-color: ${t}`]])),t=Object.entries($e).flatMap((([e,t])=>[[`text-${e}`,`color: #${t[500].toString(16)}`],[`fill-${e}`,`fill: #${t[500].toString(16)}`],[`bg-${e}`,`background-color: #${t[500].toString(16)}`],[`border-${e}`,`border-color: #${t[500].toString(16)}`]])),r=Object.entries($e).flatMap((([e,t])=>Object.entries(t).flatMap((([t,r])=>[[`text-${e}-${t}`,`color: #${r.toString(16)}`],[`fill-${e}-${t}`,`fill: #${r.toString(16)}`],[`bg-${e}-${t}`,`background-color: #${r.toString(16)}`],[`border-${e}-${t}`,`border-color: #${r.toString(16)}`]]))));return[].concat(e).concat(t).concat(r).flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))}const Oe=new oe;globalThis.Mancha=Oe;const Re=globalThis.document?.currentScript;if(globalThis.document?.currentScript?.hasAttribute("init")){const e=Re?.hasAttribute("debug"),t=Re?.getAttribute("cache"),r=Re?.getAttribute("target")?.split("+")||["body"];window.addEventListener("load",(()=>{r.map((async r=>{const i=globalThis.document.querySelector(r);await Oe.debug(e).mount(i,{cache:t})}))}))}if(globalThis.document?.currentScript?.hasAttribute("css")){const e=Re?.getAttribute("css")?.split("+");for(const t of e){const e=document.createElement("style");switch(t){case"basic":u(e,y`
     html {
         max-width: 70ch;
         padding: 2em 1em;
@@ -15,4 +15,4 @@
     p,ul,ol {
         margin-bottom: 1em;
         color: #1d1d1d;
-    }`);break;case"utils":e.textContent=(Ie=void 0,[...ge,...Object.entries(Ee).flatMap((([e,t])=>Object.entries(t).flatMap((([t,r])=>[`.${e} { ${t}: ${r} }`,`${ve(e).join(",")} { ${t}: ${r} }`,...be(e,`${t}: ${r}`)])))),...Ae(),...[["opacity-0","opacity: 0"],...ue.map((e=>[`opacity-${e}`,"opacity: "+e/100]))].flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)])),...we(fe),...xe(fe),...we(me),...xe(me),...(Ie=pe,Object.entries(Ie).flatMap((([e,t])=>[[`${t}t-0`,`${e}-top: 0`],[`${t}b-0`,`${e}-bottom: 0`],[`${t}l-0`,`${e}-left: 0`],[`${t}r-0`,`${e}-right: 0`],[`${t}t-auto`,`${e}-top: auto`],[`${t}b-auto`,`${e}-bottom: auto`],[`${t}l-auto`,`${e}-left: auto`],[`${t}r-auto`,`${e}-right: auto`],...["","-"].flatMap((r=>[...he.map((e=>[e,e*ce])).map((([i,n])=>[`${r}${t}t-${i}`,`${e}-top: ${r}${n}rem`])),...he.map((e=>[e,e*ce])).map((([i,n])=>[`${r}${t}b-${i}`,`${e}-bottom: ${r}${n}rem`])),...he.map((e=>[e,e*ce])).map((([i,n])=>[`${r}${t}l-${i}`,`${e}-left: ${r}${n}rem`])),...he.map((e=>[e,e*ce])).map((([i,n])=>[`${r}${t}r-${i}`,`${e}-right: ${r}${n}rem`])),...he.map((i=>[`${r}${t}t-${i}px`,`${e}-top: ${r}${i}px`])),...he.map((i=>[`${r}${t}b-${i}px`,`${e}-bottom: ${r}${i}px`])),...he.map((i=>[`${r}${t}l-${i}px`,`${e}-left: ${r}${i}px`])),...he.map((i=>[`${r}${t}r-${i}px`,`${e}-right: ${r}${i}px`])),...ue.map((i=>[`${r}${t}t-${i}\\%`,`${e}-top: ${r}${i}%`])),...ue.map((i=>[`${r}${t}b-${i}\\%`,`${e}-bottom: ${r}${i}%;`])),...ue.map((i=>[`${r}${t}l-${i}\\%`,`${e}-left: ${r}${i}%`])),...ue.map((i=>[`${r}${t}r-${i}\\%`,`${e}-right: ${r}${i}%`]))]))])).flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))),...we(pe),...xe(pe),".space-x-0 > * { margin-left: 0 }",".space-y-0 > * { margin-top: 0 }",...he.map((e=>`.space-x-${e} > :not(:first-child) { margin-left: ${e*ce}rem }`)),...he.map((e=>`.space-y-${e} > :not(:first-child) { margin-top: ${e*ce}rem }`)),...he.map((e=>`.space-x-${e}px > :not(:first-child) { margin-left: ${e}px }`)),...he.map((e=>`.space-y-${e}px > :not(:first-child) { margin-top: ${e}px }`)),".gap-0 { gap: 0 }",...he.map((e=>`.gap-${e} { gap: ${e*ce}rem }`)),...he.map((e=>`.gap-${e}px { gap: ${e}px }`)),...he.map((e=>`.gap-x-${e} { column-gap: ${e*ce}rem }`)),...he.map((e=>`.gap-y-${e} { row-gap: ${e*ce}rem }`)),...he.map((e=>`.gap-x-${e}px { column-gap: ${e}px }`)),...he.map((e=>`.gap-y-${e}px { row-gap: ${e}px }`)),...we(_e),...[...le.map((e=>[`border-${e}`,`border-width: ${e}px`]))].flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))].sort(ye).join("\n"));break;default:console.error(`Unknown style name: "${t}"`)}globalThis.document.head.appendChild(e)}}var Ie})();
+    }`);break;case"utils":e.textContent=(Ie=void 0,[...Ee,...Object.entries(ge).flatMap((([e,t])=>Object.entries(t).flatMap((([t,r])=>[`.${e} { ${t}: ${r} }`,`${ve(e).join(",")} { ${t}: ${r} }`,...be(e,`${t}: ${r}`)])))),...Ae(),...[["opacity-0","opacity: 0"],...ue.map((e=>[`opacity-${e}`,"opacity: "+e/100]))].flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)])),...we(fe),...ye(fe),...we(me),...ye(me),...(Ie=pe,Object.entries(Ie).flatMap((([e,t])=>[[`${t}t-0`,`${e}-top: 0`],[`${t}b-0`,`${e}-bottom: 0`],[`${t}l-0`,`${e}-left: 0`],[`${t}r-0`,`${e}-right: 0`],[`${t}t-auto`,`${e}-top: auto`],[`${t}b-auto`,`${e}-bottom: auto`],[`${t}l-auto`,`${e}-left: auto`],[`${t}r-auto`,`${e}-right: auto`],...["","-"].flatMap((r=>[...he.map((e=>[e,e*ce])).map((([i,s])=>[`${r}${t}t-${i}`,`${e}-top: ${r}${s}rem`])),...he.map((e=>[e,e*ce])).map((([i,s])=>[`${r}${t}b-${i}`,`${e}-bottom: ${r}${s}rem`])),...he.map((e=>[e,e*ce])).map((([i,s])=>[`${r}${t}l-${i}`,`${e}-left: ${r}${s}rem`])),...he.map((e=>[e,e*ce])).map((([i,s])=>[`${r}${t}r-${i}`,`${e}-right: ${r}${s}rem`])),...he.map((i=>[`${r}${t}t-${i}px`,`${e}-top: ${r}${i}px`])),...he.map((i=>[`${r}${t}b-${i}px`,`${e}-bottom: ${r}${i}px`])),...he.map((i=>[`${r}${t}l-${i}px`,`${e}-left: ${r}${i}px`])),...he.map((i=>[`${r}${t}r-${i}px`,`${e}-right: ${r}${i}px`])),...ue.map((i=>[`${r}${t}t-${i}\\%`,`${e}-top: ${r}${i}%`])),...ue.map((i=>[`${r}${t}b-${i}\\%`,`${e}-bottom: ${r}${i}%;`])),...ue.map((i=>[`${r}${t}l-${i}\\%`,`${e}-left: ${r}${i}%`])),...ue.map((i=>[`${r}${t}r-${i}\\%`,`${e}-right: ${r}${i}%`]))]))])).flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))),...we(pe),...ye(pe),".space-x-0 > * { margin-left: 0 }",".space-y-0 > * { margin-top: 0 }",...he.map((e=>`.space-x-${e} > :not(:first-child) { margin-left: ${e*ce}rem }`)),...he.map((e=>`.space-y-${e} > :not(:first-child) { margin-top: ${e*ce}rem }`)),...he.map((e=>`.space-x-${e}px > :not(:first-child) { margin-left: ${e}px }`)),...he.map((e=>`.space-y-${e}px > :not(:first-child) { margin-top: ${e}px }`)),".gap-0 { gap: 0 }",...he.map((e=>`.gap-${e} { gap: ${e*ce}rem }`)),...he.map((e=>`.gap-${e}px { gap: ${e}px }`)),...he.map((e=>`.gap-x-${e} { column-gap: ${e*ce}rem }`)),...he.map((e=>`.gap-y-${e} { row-gap: ${e*ce}rem }`)),...he.map((e=>`.gap-x-${e}px { column-gap: ${e}px }`)),...he.map((e=>`.gap-y-${e}px { row-gap: ${e}px }`)),...we(_e),...[...le.map((e=>[`border-${e}`,`border-width: ${e}px`]))].flatMap((([e,t])=>[`.${e} { ${t} }`,`${ve(e).join(",")} { ${t} }`,...be(e,t)]))].sort(xe).join("\n"));break;default:console.error(`Unknown style name: "${t}"`)}globalThis.document.head.appendChild(e)}}var Ie})();

package/dist/plugins.js CHANGED Viewed

@@ -241,10 +241,16 @@ export var RendererPlugins;
         const elem = node;
         for (const attr of Array.from(elem.attributes || [])) {
             if (attr.name.startsWith(":on:")) {
+                const eventName = attr.name.substring(4);
                 this.log(attr.name, "attribute found in:\n", nodeToString(node, 128));
                 // Remove the processed attributes from node.
                 removeAttribute(elem, attr.name);
-                node.addEventListener?.(attr.name.substring(4), (event) => {
+                // Special case: disable the annoying, default page reload behavior for form elements.
+                const preventDefault = eventName === "submit" && elem.tagName.toUpperCase() === "FORM";
+                // Evaluate the expression and return its result.
+                node.addEventListener?.(eventName, (event) => {
+                    if (preventDefault)
+                        event.preventDefault();
                     return this.eval(attr.value, { $elem: node, $event: event });
                 });
             }

package/docs/quickstart.md ADDED Viewed

@@ -0,0 +1,128 @@
+# Quick Start
+With `mancha`, it's easier than ever to create simple web apps that require no server-side rendering
+or build tools. Once the complexity of your project grows, you can add those things as needed.
+To get started, simply add this to your HTML head attribute:
+```html
+<script src="//unpkg.com/mancha" css="utils" init></script>
+```
+## Basic Form
+After importing `Mancha`, you can take advantage of reactivity and tailwind-compatible CSS styling.
+For example, a basic form might look like this
+```html
+<body :data="{ name: null }">
+  <form class="flex flex-col max-w-md p-4 bg-white rounded-lg" :on:submit="$event.preventDefault()">
+    <label class="w-full mb-4">
+      <span class="block text-sm font-medium text-gray-700">Name</span>
+      <input
+        required
+        type="text"
+        :bind="name"
+        class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:border-indigo-500"
+      />
+    </label>
+    <button
+      type="submit"
+      class="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
+    >
+      Submit
+    </button>
+  </form>
+</body>
+```
+In the code above, the `:on:submit` tag simply prevents the form submission from refreshing the
+page. To provide more complex handlers, you can define callbacks as a function:
+```html
+<body :data="{ name: null, message: null }">
+  <!-- Form with handler referencing a user-defined function -->
+  <form class="flex flex-col max-w-md p-4 bg-white rounded-lg" :on:submit="handleForm($event)">
+    <label class="w-full mb-4">
+      <span class="block text-sm font-medium text-gray-700">Name</span>
+      <input
+        required
+        type="text"
+        :bind="name"
+        class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:border-indigo-500"
+      />
+    </label>
+    <button
+      type="submit"
+      class="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
+    >
+      Submit
+    </button>
+    <!-- To be shown only once `message` is truthy -->
+    <p class="w-full mt-4 text-gray-700 text-center" :show="message">{{ message }}</p>
+  </form>
+</body>
+<script>
+  // Mancha is a global variable and $ is a shorthand for the renderer context.
+  const { $ } = Mancha;
+  // We can use the $ shorthand to access the form data and define variables.
+  $.handleForm = function (event) {
+    event.preventDefault();
+    this.message = `Hello, ${this.name}!`;
+  };
+  // The script tag already contains the `init` attribute. So we don't need
+  // to call `$.mount()` explicitly.
+  // $.mount(document.body);
+</script>
+```
+If you want more control over the initialization lifecycle, you can remove the `init` attribute from
+the `<script>` tag that imports `Mancha`, and explicitly call the `mount()` function:
+```html
+<script src="//unpkg.com/mancha" css="utils"></script>
+<body>
+  <form class="flex flex-col max-w-md p-4 bg-white rounded-lg" :on:submit="handleForm($event)">
+    <label class="w-full mb-4">
+      <span class="block text-sm font-medium text-gray-700">Name</span>
+      <input
+        required
+        type="text"
+        :bind="name"
+        class="w-full mt-1 p-2 border border-gray-300 rounded-md focus:border-indigo-500"
+      />
+    </label>
+    <button
+      type="submit"
+      class="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
+    >
+      Submit
+    </button>
+    <p class="w-full mt-4 text-gray-700 text-center" :show="message">{{ message }}</p>
+  </form>
+</body>
+<script type="module">
+  // Mancha is a global variable and $ is a shorthand for the renderer context.
+  const { $ } = Mancha;
+  // We can use the $ shorthand to access the form data and define variables.
+  $.handleForm = function (event) {
+    event.preventDefault();
+    this.message = `Hello, ${this.name}!`;
+  };
+  // Define the variables that will be used in the form.
+  $.name = null;
+  $.message = null;
+  // Mount the renderer context to the body element.
+  await $.mount(document.body);
+</script>
+```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mancha",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Javscript HTML rendering engine",
   "main": "dist/index.js",
   "type": "module",