mono-jsx 0.0.0-alpha.13 → 0.0.0-alpha.14

package/README.md

@@ -394,7 +394,7 @@ export default {
 };
 ```
 
-You can also set `rendering` attribute to control the rendering strategy of the async component. Currently, only `eager` is supported that renders the async component immediately.
+You can also set `rendering` attribute to "eager" to render the async component eagerly, which means the async component will be rendered as a sync function component and the `placeholder` will be ignored.
 
 ```jsx
 async function Sleep(ms) {

package/jsx-runtime.mjs

@@ -37,7 +37,7 @@ var computed = (fn) => {
 };
 
 // runtime/index.ts
-var RUNTIME_STATE_JS = "const r=Object.create(null),m=new Map,d=(t,n)=>t.getAttribute(n),h=(t,n)=>t.hasAttribute(n);function g(t,n,i,f){let l;if(n==='text')l=()=>t.textContent=''+i();else if(n==='toggle'){let s;l=()=>{if(!s){const e=t.firstElementChild;e&&e.tagName==='TEMPLATE'&&h(e,'m-slot')?(s=e.content.childNodes,t.innerHTML=''):s=t.childNodes}i()?t.append(...s):t.innerHTML=''}}else if(n==='switch'){let s=d(t,'match'),e,o,p=a=>e.get(a)??e.set(a,[]).get(a),u;l=()=>{if(!e){e=new Map,o=[];for(const a of t.childNodes)if(a.nodeType===1&&a.tagName==='TEMPLATE'&&h(a,'m-slot')){for(const c of a.content.childNodes)c.nodeType===1&&h(c,'slot')?p(d(c,'slot')).push(c):o.push(c);a.remove()}else s?p(s).push(a):o.push(a)}u=i(),t.innerHTML='',t.append(...e.has(u)?e.get(u):o)}}else if(n.length>2&&n.startsWith('[')&&n.endsWith(']')){let s=n.slice(1,-1),e=t.parentElement;e.tagName==='M-GROUP'&&(e=e.previousElementSibling),l=()=>{const o=i();o===!1?e.removeAttribute(s):(s==='class'||s==='style')&&o&&typeof o=='object'?e.setAttribute(s,s==='class'?cx(o):styleToCSS(o)):e.setAttribute(s,o===!0?'':''+o)}}if(l)for(const s of f){let e=m.get(s);e||(e=[],m.set(s,e)),e.push(l)}}function T(t,n){let i=n;Object.defineProperty(r,t,{get:()=>i,set:f=>{if(f!==i){const l=m.get(t);l&&queueMicrotask(()=>l.forEach(s=>s())),i=f}}})}customElements.define('m-state',class extends HTMLElement{connectedCallback(){const t=this,n=d(t,'mode')||'text',i=d(t,'use');i?g(t,n,()=>r[i],[i]):setTimeout(()=>{const f=t.firstChild;if(f&&f.nodeType===1&&f.type==='computed'){const l=f.textContent;l&&new Function('$state','$memo',l)(r,(s,e)=>{g(t,n,s,e)})}},0)}}),Object.assign(globalThis,{$state:r,defineState:T});";
+var RUNTIME_STATE_JS = "const r=Object.create(null),m=new Map,d=(t,s)=>t.getAttribute(s),h=(t,s)=>t.hasAttribute(s);function g(t,s,i,f){let l;if(s==='text')l=()=>t.textContent=''+i();else if(s==='toggle'){let n;l=()=>{if(!n){const e=t.firstElementChild;e&&e.tagName==='TEMPLATE'&&h(e,'m-slot')?(n=e.content.childNodes,t.innerHTML=''):n=t.childNodes}i()?t.append(...n):t.innerHTML=''}}else if(s==='switch'){let n=d(t,'match'),e,o,p=a=>e.get(a)??e.set(a,[]).get(a),u;l=()=>{if(!e){e=new Map,o=[];for(const a of t.childNodes)if(a.nodeType===1&&a.tagName==='TEMPLATE'&&h(a,'m-slot')){for(const c of a.content.childNodes)c.nodeType===1&&h(c,'slot')?p(d(c,'slot')).push(c):o.push(c);a.remove()}else n?p(n).push(a):o.push(a)}u=i(),t.innerHTML='',t.append(...e.has(u)?e.get(u):o)}}else if(s.length>2&&s.startsWith('[')&&s.endsWith(']')){let n=s.slice(1,-1),e=t.parentElement;e.tagName==='M-GROUP'&&(e=e.previousElementSibling),l=()=>{const o=i();o===!1?e.removeAttribute(n):(n==='class'||n==='style')&&o&&typeof o=='object'?e.setAttribute(n,n==='class'?cx(o):styleToCSS(o)):e.setAttribute(n,o===!0?'':''+o)}}if(l)for(const n of f){let e=m.get(n);e||(e=[],m.set(n,e)),e.push(l)}}function T(t,s){let i=s;Object.defineProperty(r,t,{get:()=>i,set:f=>{if(f!==i){const l=m.get(t);l&&queueMicrotask(()=>l.forEach(n=>n())),i=f}}})}customElements.define('m-state',class extends HTMLElement{connectedCallback(){const t=this,s=d(t,'mode')??'text',i=d(t,'key');i?g(t,s,()=>r[i],[i]):setTimeout(()=>{const f=t.firstChild;if(f&&f.nodeType===1&&f.type==='computed'){const l=f.textContent;l&&new Function('$state','$',l)(r,(n,e)=>{g(t,s,n,e)})}},0)}}),Object.assign(globalThis,{$state:r,defineState:T});";
 var RUNTIME_SUSPENSE_JS = "const n={},o=e=>e.getAttribute('chunk-id');c('m-portal',e=>{n[o(e)]=e}),c('m-chunk',e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}";
 var RUNTIME_COMPONENTS_JS = { "cx": "var cx=(()=>{var e=r=>typeof r=='string',n=r=>typeof r=='object'&&r!==null;function t(r){return e(r)?r:n(r)?Array.isArray(r)?r.map(t).filter(Boolean).join(' '):Object.entries(r).filter(([,o])=>!!o).map(([o])=>o).join(' '):''}return t;})();", "styleToCSS": "var styleToCSS=(()=>{var a=new Set(['animation-iteration-count','aspect-ratio','border-image-outset','border-image-slice','border-image-width','box-flex-group','box-flex','box-ordinal-group','column-count','columns','fill-opacity','flex-grow','flex-negative','flex-order','flex-positive','flex-shrink','flex','flood-opacity','font-weight','grid-area','grid-column-end','grid-column-span','grid-column-start','grid-column','grid-row-end','grid-row-span','grid-row-start','grid-row','line-clamp','line-height','opacity','order','orphans','stop-opacity','stroke-dasharray','stroke-dashoffset','stroke-miterlimit','stroke-opacity','stroke-width','tab-size','widows','z-index','zoom']),s=r=>typeof r=='string',c=r=>typeof r=='object'&&r!==null,f=r=>r.replace(/[a-z][A-Z]/g,t=>t.charAt(0)+'-'+t.charAt(1).toLowerCase());function u(r){if(s(r))return r;if(!c(r))return'';let t='';for(let[n,o]of Array.isArray(r)?r:Object.entries(r)){if(o==null||o===!1||Number.isNaN(o)||!s(n))return'';let e=f(n),i=typeof o=='number'?a.has(e)?''+o:o+'px':''+o;t+=(t!==''?';':'')+e+':'+(e==='content'?JSON.stringify(i):i)}return t}return u;})();" };
 
@@ -178,7 +178,7 @@ async function renderNode(ctx, node, stripSlotProp) {
         }
         if (tag === $state) {
           const { key, value } = props;
-          write("<m-state use=" + toAttrStringLit(key) + ">");
+          write("<m-state key=" + toAttrStringLit(key) + ">");
           if (value !== void 0 && value !== null) {
             write(escapeHTML("" + value));
           }
@@ -188,7 +188,7 @@ async function renderNode(ctx, node, stripSlotProp) {
         }
         if (tag === $computed) {
           const { deps, value, fn } = props;
-          write('<m-state><script type="computed">$memo(' + fn + "," + JSON.stringify(Object.keys(deps)) + ")<\/script>");
+          write('<m-state computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>");
           if (value !== void 0) {
             write(escapeHTML("" + value));
           }
@@ -203,20 +203,18 @@ async function renderNode(ctx, node, stripSlotProp) {
         if (tag === "toggle") {
           if (children !== void 0) {
             const valueProp = props.value;
-            const defaultValue = props.defaultValue;
             if (isVNode(valueProp) && valueProp[0] === $state || valueProp[0] === $computed) {
               const { key, deps, value, fn } = valueProp[1];
-              const valueOrDefault = value ?? defaultValue;
               write(
-                '<m-state mode="toggle" ' + (key ? "use=" + toAttrStringLit(key) : "") + ">" + (fn ? '<script type="computed">$memo(' + fn + "," + JSON.stringify(Object.keys(deps)) + ")<\/script>" : "") + (!valueOrDefault ? "<template m-slot>" : "")
+                '<m-state mode="toggle" ' + (key ? "key=" + toAttrStringLit(key) : "computed") + ">" + (fn ? '<script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>" : "") + (!value ? "<template m-slot>" : "")
               );
               await renderChildren(ctx, children);
-              if (!valueOrDefault) {
+              if (!value) {
                 write("</template>");
               }
               write("</m-state>");
               if (key) {
-                stateStore.set(key, valueOrDefault);
+                stateStore.set(key, !!value);
               } else {
                 for (const [key2, value2] of Object.entries(deps)) {
                   if (!stateStore.has(key2)) {
@@ -224,7 +222,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                   }
                 }
               }
-            } else if (valueProp ?? defaultValue) {
+            } else if (valueProp) {
               await renderChildren(ctx, children);
             }
           }
@@ -240,9 +238,9 @@ async function renderNode(ctx, node, stripSlotProp) {
             let valueOrDefault;
             if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
               const { key, deps, value, fn } = valueProp[1];
-              stateful = '<m-state mode="switch" ' + (key ? "use=" + toAttrStringLit(key) : "") + ">";
+              stateful = '<m-state mode="switch" ' + (key ? "key=" + toAttrStringLit(key) : "computed") + ">";
               if (fn) {
-                computed2 = '<script type="computed">$memo(' + fn + "," + JSON.stringify(deps) + ")<\/script>";
+                computed2 = '<script type="computed">$(' + fn + ", " + JSON.stringify(deps) + ")<\/script>";
               }
               valueOrDefault = value ?? defaultValue;
               if (key) {
@@ -340,10 +338,12 @@ async function renderNode(ctx, node, stripSlotProp) {
               await renderNode({ ...ctx, eager, slots: children }, v);
             }
           } catch (err) {
-            if (typeof catchFC === "function") {
-              await renderNode({ ...ctx, eager: true }, catchFC(err));
-            } else {
-              write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.stack) + "</code></pre>");
+            if (err instanceof Error) {
+              if (typeof catchFC === "function") {
+                await renderNode({ ...ctx, eager: true }, catchFC(err));
+              } else {
+                write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.stack ?? err.message) + "</code></pre>");
+              }
             }
           }
           break;
@@ -371,7 +371,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                 ctx.rtComponents.styleToCSS = true;
               }
               propEffects.push(
-                "<m-state mode=" + toAttrStringLit("[" + propName + "]") + (key ? " use=" + toAttrStringLit(key) : "") + ">" + (fn ? '<script type="computed">$memo(' + fn + "," + JSON.stringify(Object.keys(deps)) + ")<\/script>" : "") + "</m-state>"
+                "<m-state mode=" + toAttrStringLit("[" + propName + "]") + (key ? " key=" + toAttrStringLit(key) : " computed") + ">" + (fn ? '<script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>" : "") + "</m-state>"
               );
               if (key) {
                 ctx.stateStore.set(key, propValue[1].value);
@@ -459,7 +459,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                 break;
               case "action":
                 if (typeof propValue === "function" && tag === "form") {
-                  const id = "$mf_" + (ctx.evtHandlerIndex++).toString(36);
+                  const id = "$MEH_" + (ctx.evtHandlerIndex++).toString(36);
                   write("<script>var " + id + "=" + propValue.toString() + "<\/script>");
                   buffer += " " + renderAttr("onsubmit", "event.preventDefault();" + id + ".call(this,new FormData(this))");
                 } else if (isString(propValue)) {
@@ -475,7 +475,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                 if (regexpHtmlTag.test(propName) && propValue !== void 0) {
                   if (propName.startsWith("on")) {
                     if (typeof propValue === "function") {
-                      const id = "$mf_" + (ctx.evtHandlerIndex++).toString(36);
+                      const id = "$MEH_" + (ctx.evtHandlerIndex++).toString(36);
                       write("<script>var " + id + "=" + propValue.toString() + "<\/script>");
                       buffer += " " + renderAttr(propName.toLowerCase(), id + ".call(this,event)");
                     }
@@ -627,6 +627,7 @@ function render(node, renderOptions = {}) {
 }
 
 // jsx-runtime.ts
+var Fragment = $fragment;
 var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   const vnode = new Array(3).fill(null);
   vnode[0] = tag;
@@ -648,34 +649,34 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   }
   return vnode;
 };
-function jsxIcon(name, svg) {
+var jsxIcon = (name, svg) => {
   const svgTagStart = svg.indexOf("<svg");
   const svgTagEnd = svg.indexOf(">", svgTagStart);
   const viewBox = svg.slice(0, svgTagEnd).match(/viewBox=['"]([^'"]+)['"]/)?.[1] ?? "";
   const iconSvg = '<svg class="icon" role="img" aria-hidden="true" style="width:auto;height:1em" fill="none" viewBox=' + JSON.stringify(viewBox) + ' xmlns="http://www.w3.org/2000/svg">' + svg.slice(svgTagEnd + 1).replace(/\n/g, "").replace(/=['"](black|#000000)['"]/g, '="currentColor"');
   $iconsRegistry.set(name.replace(/^icon-/, ""), iconSvg);
-}
-var html = (raw, ...values) => [
-  $html,
-  { innerHTML: String.raw({ raw }, ...values) },
-  $vnode
-];
+};
 var context = () => {
   if (!Object.hasOwn($context, "request") || !Object.hasOwn($context, "data")) {
     throw new Error("calling `$context` outside of a component");
   }
   return $context;
 };
+var html = (raw, ...values) => [
+  $html,
+  { innerHTML: String.raw({ raw }, ...values) },
+  $vnode
+];
 Object.assign(globalThis, {
-  html,
-  css: html,
-  js: html,
+  $computed: computed,
   $context: context,
   $state: state,
-  $computed: computed
+  css: html,
+  html,
+  js: html
 });
 export {
-  $fragment as Fragment,
+  Fragment,
   jsx,
   jsx as jsxDEV,
   jsxIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.0.0-alpha.13",
+  "version": "0.0.0-alpha.14",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",
@@ -9,18 +9,15 @@
   },
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./index.cjs"
+      "import": "./index.mjs"
     },
     "./jsx-runtime": {
       "types": "./types/jsx-runtime.d.ts",
-      "import": "./jsx-runtime.mjs",
-      "require": "./jsx-runtime.cjs"
+      "import": "./jsx-runtime.mjs"
     },
     "./jsx-dev-runtime": {
       "types": "./types/jsx-runtime.d.ts",
-      "import": "./jsx-runtime.mjs",
-      "require": "./jsx-runtime.cjs"
+      "import": "./jsx-runtime.mjs"
     }
   },
   "scripts": {
@@ -28,7 +25,6 @@
   },
   "files": [
     "*.mjs",
-    "*.cjs",
     "./types/"
   ],
   "license": "MIT",

package/types/jsx.d.ts

@@ -1,4 +1,4 @@
-// deno-lint-ignore-file no-explicit-any no-var
+// deno-lint-ignore-file no-explicit-any
 
 import type * as Mono from "./mono.d.ts";
 import type { HTML } from "./html.d.ts";

package/types/mono.d.ts

@@ -1,4 +1,4 @@
-// deno-lint-ignore-file no-explicit-any no-var
+// deno-lint-ignore-file no-explicit-any
 
 import type * as CSS from "./css.d.ts";
 
@@ -80,7 +80,6 @@ export interface AsyncComponentAttributes {
 export interface Elements {
   toggle: {
     value: boolean;
-    defaultValue?: boolean;
   };
   switch: {
     value: string;

package/index.cjs

@@ -1,2 +0,0 @@
-// index.ts
-console.log("Weclome to mono-jsx!");

package/jsx-runtime.cjs

@@ -1,705 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// jsx-runtime.ts
-var jsx_runtime_exports = {};
-__export(jsx_runtime_exports, {
-  Fragment: () => $fragment,
-  jsx: () => jsx,
-  jsxDEV: () => jsx,
-  jsxIcon: () => jsxIcon,
-  jsxs: () => jsx
-});
-module.exports = __toCommonJS(jsx_runtime_exports);
-
-// symbols.ts
-var $vnode = Symbol.for("jsx.vnode");
-var $fragment = Symbol.for("jsx.fragment");
-var $html = Symbol.for("jsx.html");
-var $state = Symbol.for("mono.state");
-var $computed = Symbol.for("mono.computed");
-var $iconsRegistry = /* @__PURE__ */ new Map();
-var $context = /* @__PURE__ */ Object.create(null);
-
-// state.ts
-var collectDeps;
-var state = new Proxy(/* @__PURE__ */ Object.create(null), {
-  get(target, key, receiver) {
-    const value = Reflect.get(target, key, receiver);
-    if (typeof key === "symbol") {
-      return value;
-    }
-    if (collectDeps) {
-      collectDeps(key, value);
-      return value;
-    }
-    return [$state, { key, value }, $vnode];
-  },
-  set(target, key, value, receiver) {
-    const vt = typeof value;
-    value = vt === "boolean" || vt === "number" || vt === "bigint" ? value : structuredClone(value);
-    return Reflect.set(target, key, value, receiver);
-  }
-});
-var computed = (fn) => {
-  const deps = /* @__PURE__ */ Object.create(null);
-  collectDeps = (key, value2) => deps[key] = value2;
-  const value = fn();
-  collectDeps = void 0;
-  if (deps.size === 0) return value;
-  return [$computed, { value, deps, fn: fn.toString() }, $vnode];
-};
-
-// runtime/index.ts
-var RUNTIME_STATE_JS = "const r=Object.create(null),m=new Map,d=(t,n)=>t.getAttribute(n),h=(t,n)=>t.hasAttribute(n);function g(t,n,i,f){let l;if(n==='text')l=()=>t.textContent=''+i();else if(n==='toggle'){let s;l=()=>{if(!s){const e=t.firstElementChild;e&&e.tagName==='TEMPLATE'&&h(e,'m-slot')?(s=e.content.childNodes,t.innerHTML=''):s=t.childNodes}i()?t.append(...s):t.innerHTML=''}}else if(n==='switch'){let s=d(t,'match'),e,o,p=a=>e.get(a)??e.set(a,[]).get(a),u;l=()=>{if(!e){e=new Map,o=[];for(const a of t.childNodes)if(a.nodeType===1&&a.tagName==='TEMPLATE'&&h(a,'m-slot')){for(const c of a.content.childNodes)c.nodeType===1&&h(c,'slot')?p(d(c,'slot')).push(c):o.push(c);a.remove()}else s?p(s).push(a):o.push(a)}u=i(),t.innerHTML='',t.append(...e.has(u)?e.get(u):o)}}else if(n.length>2&&n.startsWith('[')&&n.endsWith(']')){let s=n.slice(1,-1),e=t.parentElement;e.tagName==='M-GROUP'&&(e=e.previousElementSibling),l=()=>{const o=i();o===!1?e.removeAttribute(s):(s==='class'||s==='style')&&o&&typeof o=='object'?e.setAttribute(s,s==='class'?cx(o):styleToCSS(o)):e.setAttribute(s,o===!0?'':''+o)}}if(l)for(const s of f){let e=m.get(s);e||(e=[],m.set(s,e)),e.push(l)}}function T(t,n){let i=n;Object.defineProperty(r,t,{get:()=>i,set:f=>{if(f!==i){const l=m.get(t);l&&queueMicrotask(()=>l.forEach(s=>s())),i=f}}})}customElements.define('m-state',class extends HTMLElement{connectedCallback(){const t=this,n=d(t,'mode')||'text',i=d(t,'use');i?g(t,n,()=>r[i],[i]):setTimeout(()=>{const f=t.firstChild;if(f&&f.nodeType===1&&f.type==='computed'){const l=f.textContent;l&&new Function('$state','$memo',l)(r,(s,e)=>{g(t,n,s,e)})}},0)}}),Object.assign(globalThis,{$state:r,defineState:T});";
-var RUNTIME_SUSPENSE_JS = "const n={},o=e=>e.getAttribute('chunk-id');c('m-portal',e=>{n[o(e)]=e}),c('m-chunk',e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}";
-var RUNTIME_COMPONENTS_JS = { "cx": "var cx=(()=>{var e=r=>typeof r=='string',n=r=>typeof r=='object'&&r!==null;function t(r){return e(r)?r:n(r)?Array.isArray(r)?r.map(t).filter(Boolean).join(' '):Object.entries(r).filter(([,o])=>!!o).map(([o])=>o).join(' '):''}return t;})();", "styleToCSS": "var styleToCSS=(()=>{var a=new Set(['animation-iteration-count','aspect-ratio','border-image-outset','border-image-slice','border-image-width','box-flex-group','box-flex','box-ordinal-group','column-count','columns','fill-opacity','flex-grow','flex-negative','flex-order','flex-positive','flex-shrink','flex','flood-opacity','font-weight','grid-area','grid-column-end','grid-column-span','grid-column-start','grid-column','grid-row-end','grid-row-span','grid-row-start','grid-row','line-clamp','line-height','opacity','order','orphans','stop-opacity','stroke-dasharray','stroke-dashoffset','stroke-miterlimit','stroke-opacity','stroke-width','tab-size','widows','z-index','zoom']),s=r=>typeof r=='string',c=r=>typeof r=='object'&&r!==null,f=r=>r.replace(/[a-z][A-Z]/g,t=>t.charAt(0)+'-'+t.charAt(1).toLowerCase());function u(r){if(s(r))return r;if(!c(r))return'';let t='';for(let[n,o]of Array.isArray(r)?r:Object.entries(r)){if(o==null||o===!1||Number.isNaN(o)||!s(n))return'';let e=f(n),i=typeof o=='number'?a.has(e)?''+o:o+'px':''+o;t+=(t!==''?';':'')+e+':'+(e==='content'?JSON.stringify(i):i)}return t}return u;})();" };
-
-// runtime/utils.ts
-var cssBareUnitProps = /* @__PURE__ */ new Set([
-  "animation-iteration-count",
-  "aspect-ratio",
-  "border-image-outset",
-  "border-image-slice",
-  "border-image-width",
-  "box-flex-group",
-  "box-flex",
-  "box-ordinal-group",
-  "column-count",
-  "columns",
-  "fill-opacity",
-  "flex-grow",
-  "flex-negative",
-  "flex-order",
-  "flex-positive",
-  "flex-shrink",
-  "flex",
-  "flood-opacity",
-  "font-weight",
-  "grid-area",
-  "grid-column-end",
-  "grid-column-span",
-  "grid-column-start",
-  "grid-column",
-  "grid-row-end",
-  "grid-row-span",
-  "grid-row-start",
-  "grid-row",
-  "line-clamp",
-  "line-height",
-  "opacity",
-  "order",
-  "orphans",
-  "stop-opacity",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stroke-miterlimit",
-  "stroke-opacity",
-  "stroke-width",
-  "tab-size",
-  "widows",
-  "z-index",
-  "zoom"
-]);
-var isString = (v) => typeof v === "string";
-var isObject = (v) => typeof v === "object" && v !== null;
-var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());
-function cx(className) {
-  if (isString(className)) {
-    return className;
-  }
-  if (isObject(className)) {
-    if (Array.isArray(className)) {
-      return className.map(cx).filter(Boolean).join(" ");
-    }
-    return Object.entries(className).filter(([, v]) => !!v).map(([k]) => k).join(" ");
-  }
-  return "";
-}
-function styleToCSS(style) {
-  if (isString(style)) return style;
-  if (!isObject(style)) return "";
-  let css = "";
-  for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
-    if (v === null || v === void 0 || v === false || Number.isNaN(v) || !isString(k)) return "";
-    const cssKey = toHyphenCase(k);
-    const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : "" + v;
-    css += (css !== "" ? ";" : "") + cssKey + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
-  }
-  return css;
-}
-
-// render.ts
-var encoder = new TextEncoder();
-var regexpHtmlTag = /^[a-z][\w\-$]*$/;
-var regexpHtmlSafe = /["'&<>]/;
-var selfClosingTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
-var toAttrStringLit = (str) => JSON.stringify(escapeHTML(str));
-var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
-var hashCode = (s) => [...s].reduce((hash, c) => Math.imul(31, hash) + c.charCodeAt(0) | 0, 0);
-async function renderNode(ctx, node, stripSlotProp) {
-  const { write, stateStore } = ctx;
-  switch (typeof node) {
-    case "string":
-      write(escapeHTML(node));
-      break;
-    case "number":
-    case "bigint":
-      write("" + node);
-      break;
-    case "object":
-      if (isVNode(node)) {
-        let [tag, props] = node;
-        let children = props.children;
-        if (tag === $fragment) {
-          if (children !== void 0) {
-            await renderChildren(ctx, children);
-          }
-          break;
-        }
-        if (tag === $html) {
-          if (props.innerHTML) {
-            write(props.innerHTML);
-          }
-          break;
-        }
-        if (tag === "slot") {
-          const ctxSlots = ctx.slots;
-          let slots;
-          if (ctxSlots !== void 0) {
-            if (Array.isArray(ctxSlots)) {
-              if (isVNode(ctxSlots)) {
-                slots = [ctxSlots];
-              } else {
-                slots = ctxSlots;
-              }
-            } else {
-              slots = [ctxSlots];
-            }
-          }
-          if (props.name) {
-            children = slots?.filter((v) => isVNode(v) && v[1].slot === props.name);
-          } else {
-            children = slots?.filter((v) => !isVNode(v) || !v[1].slot);
-          }
-          if (children === void 0 || Array(children) && children.length === 0) {
-            children = node[1].children;
-          }
-          if (children !== void 0) {
-            await renderChildren(ctx, children, true);
-          }
-          break;
-        }
-        if (tag === $state) {
-          const { key, value } = props;
-          write("<m-state use=" + toAttrStringLit(key) + ">");
-          if (value !== void 0 && value !== null) {
-            write(escapeHTML("" + value));
-          }
-          write("</m-state>");
-          stateStore.set(key, value);
-          break;
-        }
-        if (tag === $computed) {
-          const { deps, value, fn } = props;
-          write('<m-state><script type="computed">$memo(' + fn + "," + JSON.stringify(Object.keys(deps)) + ")<\/script>");
-          if (value !== void 0) {
-            write(escapeHTML("" + value));
-          }
-          write("</m-state>");
-          for (const [key, value2] of Object.entries(deps)) {
-            if (!stateStore.has(key)) {
-              stateStore.set(key, value2);
-            }
-          }
-          break;
-        }
-        if (tag === "toggle") {
-          if (children !== void 0) {
-            const valueProp = props.value;
-            const defaultValue = props.defaultValue;
-            if (isVNode(valueProp) && valueProp[0] === $state || valueProp[0] === $computed) {
-              const { key, deps, value, fn } = valueProp[1];
-              const valueOrDefault = value ?? defaultValue;
-              write(
-                '<m-state mode="toggle" ' + (key ? "use=" + toAttrStringLit(key) : "") + ">" + (fn ? '<script type="computed">$memo(' + fn + "," + JSON.stringify(Object.keys(deps)) + ")<\/script>" : "") + (!valueOrDefault ? "<template m-slot>" : "")
-              );
-              await renderChildren(ctx, children);
-              if (!valueOrDefault) {
-                write("</template>");
-              }
-              write("</m-state>");
-              if (key) {
-                stateStore.set(key, valueOrDefault);
-              } else {
-                for (const [key2, value2] of Object.entries(deps)) {
-                  if (!stateStore.has(key2)) {
-                    stateStore.set(key2, value2);
-                  }
-                }
-              }
-            } else if (valueProp ?? defaultValue) {
-              await renderChildren(ctx, children);
-            }
-          }
-          break;
-        }
-        if (tag === "switch") {
-          if (children !== void 0) {
-            let slots = Array.isArray(children) ? isVNode(children) ? [children] : children : [children];
-            let valueProp = props.value;
-            let defaultValue = props.defaultValue;
-            let stateful;
-            let computed2;
-            let valueOrDefault;
-            if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
-              const { key, deps, value, fn } = valueProp[1];
-              stateful = '<m-state mode="switch" ' + (key ? "use=" + toAttrStringLit(key) : "") + ">";
-              if (fn) {
-                computed2 = '<script type="computed">$memo(' + fn + "," + JSON.stringify(deps) + ")<\/script>";
-              }
-              valueOrDefault = value ?? defaultValue;
-              if (key) {
-                stateStore.set(key, valueOrDefault);
-              } else {
-                for (const dep of deps) {
-                  if (!stateStore.has(dep)) {
-                    stateStore.set(dep, void 0);
-                  }
-                }
-              }
-            } else {
-              valueOrDefault = valueProp ?? defaultValue;
-            }
-            let matchedSlot;
-            let namedSlots = new Array(slots.length);
-            let unnamedSlots = new Array(slots.length);
-            for (const slot of slots) {
-              if (!isVNode(slot) || !slot[1].slot) {
-                unnamedSlots.push(slot);
-                continue;
-              }
-              const slotName = slot[1].slot;
-              if (slotName === valueOrDefault) {
-                matchedSlot = [slotName, slot];
-              } else {
-                namedSlots.push(slot);
-              }
-            }
-            if (stateful) {
-              write(matchedSlot ? stateful.slice(0, -1) + " match=" + toAttrStringLit(matchedSlot[0]) + ">" : stateful);
-              if (computed2) {
-                write(computed2);
-              }
-            }
-            if (matchedSlot) {
-              await renderNode(ctx, matchedSlot[1], true);
-            } else if (unnamedSlots.length > 0) {
-              await renderChildren(ctx, unnamedSlots);
-            }
-            if (stateful) {
-              if (namedSlots.length > 0 || matchedSlot && unnamedSlots.length > 0) {
-                write("<template m-slot>");
-                await renderChildren(ctx, namedSlots);
-                if (matchedSlot && unnamedSlots.length > 0) {
-                  await renderChildren(ctx, unnamedSlots);
-                }
-                write("</template>");
-              }
-              write("</m-state>");
-            }
-          }
-          break;
-        }
-        if (typeof tag === "function") {
-          const { rendering, placeholder, catch: catchFC, ...fcProps } = props ?? /* @__PURE__ */ Object.create(null);
-          let eager = ctx.eager;
-          if ((rendering ?? tag.rendering) === "eager") {
-            eager = true;
-          }
-          try {
-            $context.request = ctx.request;
-            $context.data = ctx.data;
-            const v = tag(fcProps);
-            delete $context.request;
-            delete $context.data;
-            if (v instanceof Promise) {
-              if (eager) {
-                await renderNode({ ...ctx, eager: true, slots: children }, await v);
-              } else {
-                const chunkId = (ctx.suspenses.length + 1).toString(36);
-                ctx.suspenses.push(v.then(async (c) => {
-                  write('<m-chunk chunk-id="' + chunkId + '"><template>');
-                  await renderNode({ ...ctx, eager, slots: children }, c);
-                  write("</template></m-chunk>");
-                }));
-                write('<m-portal chunk-id="' + chunkId + '">');
-                if (placeholder) {
-                  await renderNode({ ...ctx, eager: true }, placeholder);
-                }
-                write("</m-portal>");
-              }
-            } else if (isObject(v) && Symbol.iterator in v && !isVNode(v)) {
-              for (const c of v) {
-                await renderNode({ ...ctx, eager, slots: children }, c);
-              }
-            } else if (isObject(v) && Symbol.asyncIterator in v) {
-              if (eager) {
-                for await (const c of v) {
-                  await renderNode({ ...ctx, eager: true, slots: children }, c);
-                }
-              } else {
-              }
-            } else {
-              await renderNode({ ...ctx, eager, slots: children }, v);
-            }
-          } catch (err) {
-            if (typeof catchFC === "function") {
-              await renderNode({ ...ctx, eager: true }, catchFC(err));
-            } else {
-              write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.stack) + "</code></pre>");
-            }
-          }
-          break;
-        }
-        if (isString(tag) && regexpHtmlTag.test(tag)) {
-          if (tag.startsWith("icon-")) {
-            const svg = $iconsRegistry.get(tag.slice(5));
-            if (svg) {
-              write(svg);
-              break;
-            }
-          }
-          let buffer = "<" + tag;
-          let propEffects = [];
-          let onMountHandler;
-          for (let [propName, propValue] of Object.entries(props)) {
-            if (propName === "children") {
-              continue;
-            }
-            if (isVNode(propValue) && (propValue[0] === $state || propValue[0] === $computed)) {
-              const { key, deps, fn } = propValue[1];
-              if (propName === "class") {
-                ctx.rtComponents.cx = true;
-              } else if (propName === "style") {
-                ctx.rtComponents.styleToCSS = true;
-              }
-              propEffects.push(
-                "<m-state mode=" + toAttrStringLit("[" + propName + "]") + (key ? " use=" + toAttrStringLit(key) : "") + ">" + (fn ? '<script type="computed">$memo(' + fn + "," + JSON.stringify(Object.keys(deps)) + ")<\/script>" : "") + "</m-state>"
-              );
-              if (key) {
-                ctx.stateStore.set(key, propValue[1].value);
-              } else {
-                for (const [key2, value] of Object.entries(deps)) {
-                  if (!stateStore.has(key2)) {
-                    stateStore.set(key2, value);
-                  }
-                }
-              }
-              propValue = propValue[1].value;
-            }
-            switch (propName) {
-              case "class":
-                buffer += " " + renderAttr(propName, cx(propValue));
-                break;
-              case "style":
-                if (isString(propValue) && propValue !== "") {
-                  buffer += " " + renderAttr(propName, cx(propValue));
-                } else if (isObject(propValue) && !Array.isArray(propValue)) {
-                  const style = [];
-                  const pseudoStyles = [];
-                  const atRuleStyles = [];
-                  const nestingStyles = [];
-                  for (const [k, v] of Object.entries(propValue)) {
-                    switch (k.charCodeAt(0)) {
-                      case /* ':' */
-                      58:
-                        pseudoStyles.push([k, styleToCSS(v)]);
-                        break;
-                      case /* '@' */
-                      64:
-                        atRuleStyles.push([k, styleToCSS(v)]);
-                        break;
-                      case /* '&' */
-                      38:
-                        nestingStyles.push([k, styleToCSS(v)]);
-                        break;
-                      default:
-                        style.push([k, v]);
-                    }
-                  }
-                  if (pseudoStyles.length > 0 || atRuleStyles.length > 0 || nestingStyles.length > 0) {
-                    let raw = "";
-                    let css = "";
-                    let styleIds;
-                    let id;
-                    let cssSelector;
-                    let key;
-                    let value;
-                    if (style.length > 0) {
-                      css = styleToCSS(style);
-                      raw += css + "|";
-                    }
-                    raw += [pseudoStyles, atRuleStyles, nestingStyles].flat(1).map(([k, v]) => k + ">" + v).join("|");
-                    styleIds = ctx.styleIds ?? (ctx.styleIds = /* @__PURE__ */ new Set());
-                    id = hashCode(raw).toString(36);
-                    cssSelector = "[data-css-" + id + "]";
-                    if (!styleIds.has(id)) {
-                      styleIds.add(id);
-                      if (css) {
-                        css = cssSelector + "{" + css + "}";
-                      }
-                      for ([key, value] of pseudoStyles) {
-                        css += cssSelector + key + "{" + value + "}";
-                      }
-                      for ([key, value] of atRuleStyles) {
-                        css += key + "{" + cssSelector + "{" + value + "}}";
-                      }
-                      for ([key, value] of nestingStyles) {
-                        css += cssSelector + key.slice(1) + "{" + value + "}";
-                      }
-                      write('<style id="css-' + id + '">' + css + "</style>");
-                    }
-                    buffer += " data-css-" + id;
-                  } else if (style.length > 0) {
-                    buffer += " " + renderAttr(propName, styleToCSS(style));
-                  }
-                }
-                break;
-              case "onMount":
-                if (typeof propValue === "function") {
-                  onMountHandler = propValue;
-                }
-                break;
-              case "action":
-                if (typeof propValue === "function" && tag === "form") {
-                  const id = "$mf_" + (ctx.evtHandlerIndex++).toString(36);
-                  write("<script>var " + id + "=" + propValue.toString() + "<\/script>");
-                  buffer += " " + renderAttr("onsubmit", "event.preventDefault();" + id + ".call(this,new FormData(this))");
-                } else if (isString(propValue)) {
-                  buffer += " " + renderAttr(propName, propValue);
-                }
-                break;
-              case "slot":
-                if (!stripSlotProp && isString(propValue)) {
-                  buffer += " " + renderAttr(propName, propValue);
-                }
-                break;
-              default:
-                if (regexpHtmlTag.test(propName) && propValue !== void 0) {
-                  if (propName.startsWith("on")) {
-                    if (typeof propValue === "function") {
-                      const id = "$mf_" + (ctx.evtHandlerIndex++).toString(36);
-                      write("<script>var " + id + "=" + propValue.toString() + "<\/script>");
-                      buffer += " " + renderAttr(propName.toLowerCase(), id + ".call(this,event)");
-                    }
-                  } else if (typeof propValue === "boolean") {
-                    if (propValue) {
-                      buffer += " " + propName;
-                    }
-                  } else {
-                    buffer += " " + renderAttr(propName, propValue);
-                  }
-                }
-            }
-          }
-          write(buffer + ">");
-          if (!selfClosingTags.has(tag)) {
-            if (propEffects.length > 0) {
-              write(propEffects.join(""));
-            }
-            if (props.innerHTML) {
-              write(props.innerHTML);
-            } else if (children !== void 0) {
-              await renderChildren(ctx, children);
-            }
-            write("</" + tag + ">");
-          } else if (propEffects.length > 0) {
-            write("<m-group>");
-            write(propEffects.join(""));
-            write("</m-group>");
-          }
-          if (onMountHandler) {
-            write(
-              "<script>{const target=document.currentScript.previousElementSibling;(" + onMountHandler.toString() + ')({type:"mount",currentTarget:target,target})}<\/script>'
-            );
-          }
-        }
-      } else if (Array.isArray(node) || node && Symbol.iterator in node) {
-        for (const child of node) {
-          await renderNode(ctx, child);
-        }
-      }
-      break;
-  }
-}
-async function renderChildren(ctx, children, stripSlotProp) {
-  if (Array.isArray(children) && !isVNode(children)) {
-    for (const child of children) {
-      await renderNode(ctx, child, stripSlotProp);
-    }
-  } else {
-    await renderNode(ctx, children, stripSlotProp);
-  }
-}
-function renderAttr(key, value) {
-  return value === true ? key : key + "=" + toAttrStringLit("" + value);
-}
-function escapeHTML(str) {
-  const match = regexpHtmlSafe.exec(str);
-  if (!match) {
-    return str;
-  }
-  if (typeof Bun === "object" && "escapeHTML" in Bun) return Bun.escapeHTML(str);
-  let escape;
-  let index;
-  let lastIndex = 0;
-  let html2 = "";
-  for (index = match.index; index < str.length; index++) {
-    switch (str.charCodeAt(index)) {
-      case 34:
-        escape = "&quot;";
-        break;
-      case 38:
-        escape = "&amp;";
-        break;
-      case 39:
-        escape = "&#x27;";
-        break;
-      case 60:
-        escape = "&lt;";
-        break;
-      case 62:
-        escape = "&gt;";
-        break;
-      default:
-        continue;
-    }
-    if (lastIndex !== index) {
-      html2 += str.slice(lastIndex, index);
-    }
-    lastIndex = index + 1;
-    html2 += escape;
-  }
-  return lastIndex !== index ? html2 + str.slice(lastIndex, index) : html2;
-}
-function render(node, renderOptions = {}) {
-  const { request, status = 200, headers: headersRaw, rendering, data } = renderOptions;
-  const headers = /* @__PURE__ */ Object.create(null);
-  if (headersRaw) {
-    const { etag, lastModified } = headersRaw;
-    if (etag && request?.headers.get("if-none-match") === etag) {
-      return new Response(null, { status: 304 });
-    }
-    if (lastModified && request?.headers.get("if-modified-since") === lastModified) {
-      return new Response(null, { status: 304 });
-    }
-    for (const [key, value] of Object.entries(headersRaw)) {
-      if (value) {
-        headers[toHyphenCase(key)] = value;
-      }
-    }
-  }
-  headers["transfer-encoding"] = "chunked";
-  headers["content-type"] = "text/html; charset=utf-8";
-  return new Response(
-    new ReadableStream({
-      async start(controller) {
-        const write = (chunk) => controller.enqueue(encoder.encode(chunk));
-        const stateStore = /* @__PURE__ */ new Map();
-        const suspenses = [];
-        const rtComponents = {};
-        const ctx = {
-          request,
-          data,
-          write,
-          stateStore,
-          suspenses,
-          rtComponents,
-          evtHandlerIndex: 0,
-          eager: rendering === "eager"
-        };
-        try {
-          write("<!DOCTYPE html>");
-          await renderNode(ctx, node);
-          if (stateStore.size > 0) {
-            write(
-              "<script>(()=>{" + (rtComponents.cx ? RUNTIME_COMPONENTS_JS.cx : "") + (rtComponents.styleToCSS ? RUNTIME_COMPONENTS_JS.styleToCSS : "") + RUNTIME_STATE_JS + "for(let[n,v]of" + JSON.stringify(Array.from(stateStore.entries()).map((e) => e[1] === void 0 ? [e[0]] : e)) + ")defineState(n,v)})()<\/script>"
-            );
-          }
-          if (suspenses.length > 0) {
-            write("<script>(()=>{" + RUNTIME_SUSPENSE_JS + "})()<\/script>");
-            await Promise.all(suspenses);
-          }
-        } finally {
-          controller.close();
-        }
-      }
-    }),
-    { headers, status }
-  );
-}
-
-// jsx-runtime.ts
-var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
-  const vnode = new Array(3).fill(null);
-  vnode[0] = tag;
-  vnode[1] = props;
-  vnode[2] = $vnode;
-  if (key !== void 0) {
-    props.key = key;
-  }
-  if (tag === "html") {
-    const renderOptions = /* @__PURE__ */ Object.create(null);
-    for (const key2 of ["request", "data", "status", "headers", "rendering"]) {
-      if (Object.hasOwn(props, key2)) {
-        renderOptions[key2] = props[key2];
-        delete props[key2];
-      }
-    }
-    const res = render(vnode, renderOptions);
-    return res;
-  }
-  return vnode;
-};
-function jsxIcon(name, svg) {
-  const svgTagStart = svg.indexOf("<svg");
-  const svgTagEnd = svg.indexOf(">", svgTagStart);
-  const viewBox = svg.slice(0, svgTagEnd).match(/viewBox=['"]([^'"]+)['"]/)?.[1] ?? "";
-  const iconSvg = '<svg class="icon" role="img" aria-hidden="true" style="width:auto;height:1em" fill="none" viewBox=' + JSON.stringify(viewBox) + ' xmlns="http://www.w3.org/2000/svg">' + svg.slice(svgTagEnd + 1).replace(/\n/g, "").replace(/=['"](black|#000000)['"]/g, '="currentColor"');
-  $iconsRegistry.set(name.replace(/^icon-/, ""), iconSvg);
-}
-var html = (raw, ...values) => [
-  $html,
-  { innerHTML: String.raw({ raw }, ...values) },
-  $vnode
-];
-var context = () => {
-  if (!Object.hasOwn($context, "request") || !Object.hasOwn($context, "data")) {
-    throw new Error("calling `$context` outside of a component");
-  }
-  return $context;
-};
-Object.assign(globalThis, {
-  html,
-  css: html,
-  js: html,
-  $context: context,
-  $state: state,
-  $computed: computed
-});