mono-jsx 0.3.4 → 0.5.0

package/jsx-runtime.mjs

@@ -2,19 +2,15 @@
 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 $effects = Symbol.for("mono.effects");
 
 // runtime/index.ts
-var STATE_JS = `const m=new Map,u=e=>m.get(e)??m.set(e,b(e)).get(e),f=(e,t)=>e.getAttribute(t),d=(e,t)=>e.hasAttribute(t),b=e=>{const t=Object.create(null),r=new Map,n=(i,c)=>{let a=c;Object.defineProperty(t,i,{get:()=>a,set:o=>{if(o!==a){const l=r.get(i);l&&queueMicrotask(()=>l.forEach(h=>h())),a=o}}})},s=(i,c)=>{let a=r.get(i);a||(a=[],r.set(i,a)),a.push(c)};return e>0&&Object.defineProperty(t,"app",{get:()=>u(0).store,enumerable:!1,configurable:!1}),{store:t,define:n,watch:s}},g=(e,t,r)=>{if(t==="toggle"){let n;return()=>{if(!n){const s=e.firstElementChild;s&&s.tagName==="TEMPLATE"&&d(s,"m-slot")?(n=s.content.childNodes,e.innerHTML=""):n=e.childNodes}r()?e.append(...n):e.innerHTML=""}}if(t==="switch"){let n=f(e,"match"),s,i,c=o=>s.get(o)??s.set(o,[]).get(o),a;return()=>{if(!s){s=new Map,i=[];for(const o of e.childNodes)if(o.nodeType===1&&o.tagName==="TEMPLATE"&&d(o,"m-slot")){for(const l of o.content.childNodes)l.nodeType===1&&d(l,"slot")?c(f(l,"slot")).push(l):i.push(l);o.remove()}else n?c(n).push(o):i.push(o)}a=r(),e.innerHTML="",e.append(...s.has(a)?s.get(a):i)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let n=t.slice(1,-1),s=e.parentElement;return s.tagName==="M-GROUP"&&(s=s.previousElementSibling),()=>{const i=r();i===!1?s.removeAttribute(n):(n==="class"||n==="style")&&i&&typeof i=="object"?s.setAttribute(n,n==="class"?$cx(i):$styleToCSS(i)):s.setAttribute(n,i===!0?"":""+i)}}return()=>e.textContent=""+r()},p=e=>{const t=e.indexOf(":");if(t>0)return[Number(e.slice(0,t)),e.slice(t+1)];throw new Error("Invalid state key")};customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,t=f(e,"key");if(t){const r=u(Number(f(e,"fc")));r.watch(t,g(e,f(e,"mode"),()=>r.store[t]));return}}}),Object.assign(window,{$state:e=>e!==void 0?u(e).store:void 0,$defineState:(e,t)=>{const[r,n]=p(e);u(r).define(n,t)},$defineComputed:(e,t,r)=>{const n=document.querySelector("m-state[computed='"+e+"']");if(n){const s=u(Number(f(n,"fc"))).store,i=g(n,f(n,"mode"),t.bind(s));for(const c of r){const[a,o]=p(c);u(a).watch(o,i)}}}});`;
-var SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{setTimeout(()=>{const t=o(e),s=n[t];s&&(s.replaceWith(...e.firstChild.content.childNodes),e.remove(),delete n[t])})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
+var SIGNALS_JS = `{const h=globalThis,y=new Map,M=new Map,u=e=>M.get(e)??M.set(e,k(e)).get(e),d=(e,t)=>e.getAttribute(t),p=(e,t)=>e.hasAttribute(t),E=(e,t,o)=>e.setAttribute(t,o),T=(e,t)=>e.replaceChildren(...t),k=e=>{const t=Object.create(null),o=(c,l)=>{t[c]=l},n=new Map,r=(c,l)=>{let s=n.get(c);return s||(s=new Set,n.set(c,s)),s.add(l),()=>{s.delete(l),s.size===0&&n.delete(c)}},i=new Proxy(Object.create(null),{get:(c,l)=>document.querySelector("[data-ref='"+e+":"+l+"']")});return new Proxy(t,{get:(c,l,s)=>{switch(l){case"$init":return o;case"$watch":return r;case"app":return u(0);case"refs":return i;default:return w?.(e,l),Reflect.get(c,l,s)}},set:(c,l,s,a)=>{if(s!==Reflect.get(c,l,a)){const f=n.get(l);return f&&queueMicrotask(()=>f.forEach(g=>g())),Reflect.set(c,l,s,a)}return!1}})},v=(e,t,o)=>{if(t==="toggle"){let n;return()=>{if(!n){const r=e.firstElementChild;r&&r.tagName==="TEMPLATE"&&p(r,"m-slot")?n=[...r.content.childNodes]:n=[...e.childNodes]}T(e,o()?n:[])}}if(t==="switch"){let n,r=d(e,"match"),i,c,l=s=>i.get(s)??i.set(s,[]).get(s);return()=>{if(!i){i=new Map,c=[];for(const s of e.childNodes)if(s.nodeType===1&&s.tagName==="TEMPLATE"&&p(s,"m-slot")){for(const a of s.content.childNodes)a.nodeType===1&&p(a,"slot")?l(d(a,"slot")).push(a):c.push(a);s.remove()}else r?l(r).push(s):c.push(s)}n=""+o(),T(e,i.has(n)?i.get(n):c)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let n=t.slice(1,-1),r=e.parentElement;return r.tagName==="M-GROUP"&&(r=r.previousElementSibling),()=>{const i=o();if(i===!1)r.removeAttribute(n);else if((n==="class"||n==="style")&&typeof i=="object"&&i!==null)if(n==="class")E(r,n,$cx(i));else{const{inline:c}=$styleToCSS(i);c&&E(r,n,c)}else E(r,n,i===!0?"":""+i)}}return()=>e.textContent=""+o()},N=e=>{const t=e.indexOf(":");if(t>0)return[Number(e.slice(0,t)),e.slice(t+1)];throw new Error("Invalid  Singal ID")},b=async e=>{const t=e();return t!==void 0?t:(await new Promise(o=>setTimeout(o,0)),b(e))},S=(e,t)=>customElements.define(e,class extends HTMLElement{disposes=[];connectedCallback(){t(this)}disconnectedCallback(){this.disposes.forEach(o=>o()),this.disposes.length=0}});S("m-signal",e=>{const t=u(Number(d(e,"scope"))),o=d(e,"key");if(o)e.disposes.push(t.$watch(o,v(e,d(e,"mode"),()=>Reflect.get(t,o))));else{const n=Number(d(e,"computed"));b(()=>y.get(n)).then(([r,i])=>{const c=v(e,d(e,"mode"),r.bind(t));i.forEach(l=>{const[s,a]=N(l);e.disposes.push(u(s).$watch(a,c))})})}});let w;S("m-effect",e=>{const{disposes:t}=e,o=Number(d(e,"scope")),n=Number(d(e,"n")),r=new Array(n);t.push(()=>{r.forEach(i=>typeof i=="function"&&i()),r.length=0});for(let i=0;i<n;i++){const c="$ME_"+o+"_"+i;b(()=>h[c]).then(l=>{const s=[],a=u(o),f=()=>{r[i]=l.call(a)};w=(g,m)=>s.push([g,m]),f(),w=void 0;for(const[g,m]of s)t.push(u(g).$watch(m,f))},()=>{})}}),h.$signals=e=>e!==void 0?u(e):void 0,h.$MS=(e,t)=>{const[o,n]=N(e);u(o).$init(n,t)},h.$MC=(e,t,o)=>{y.set(e,[t,o])};}`;
+var SUSPENSE_JS = `{const s=new Map,i=(e,t)=>e.hasAttribute(t),l=e=>e.getAttribute("chunk-id"),c=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});c("m-portal",e=>{s.set(l(e),e)}),c("m-chunk",e=>{setTimeout(()=>{const t=e.firstChild?.content.childNodes,o=l(e),n=s.get(o);n&&(i(e,"next")?n.before(...t):(s.delete(o),i(e,"done")?n.remove():n.replaceWith(...t)),e.remove())})});}`;
 var UTILS_JS = {
-  /** cx.js (225 bytes) */
-  cx: `var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;function t(e){return n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):""}window.$cx=t;`,
-  /** styleToCSS.js (1168 bytes) */
-  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"]),o=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());function p(e){if(o(e))return e;if(u(e)){let r="";for(let[i,t]of Array.isArray(e)?e:Object.entries(e))if(o(i)&&(o(t)||typeof t=="number")){let n=f(i),c=typeof t=="number"?a.has(n)?""+t:t+"px":s(""+t);r+=(r?";":"")+s(n)+":"+(n==="content"?JSON.stringify(c):c)}return r}return""}function s(e){return e.replace(/["<>]/g,r=>r==="<"?"&lt;":r===">"?"&gt;":"'")}window.$styleToCSS=p;`,
-  /** event.js (347 bytes) */
-  event: `var w=window;w.$emit=(e,fn,fc)=>fn.call(w.$state?.(fc)??e.target,e);w.$onsubmit=(e,fn,fc)=>{e.preventDefault();fn.call(w.$state?.(fc)??e.target,new FormData(e.target),e)};w.$onstage=()=>document.querySelectorAll("[onmount]").forEach(t=>{const k="onmount",j=t.getAttribute(k);t.removeAttribute(k);new Function("event",j)({type:"mount",target:t})});`
+  cx: `{var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;var t=e=>n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):"";window.$cx=t;}`,
+  styleToCSS: `{var c=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"]),a=e=>typeof e=="string",l=e=>typeof e=="object"&&e!==null,u=e=>e.replace(/[a-z][A-Z]/g,t=>t.charAt(0)+"-"+t.charAt(1).toLowerCase());var p=e=>{let t=[],o=[],r={};for(let[n,i]of Object.entries(e))switch(n.charCodeAt(0)){case 58:o.push(null,n+"{"+s(i)+"}");break;case 64:o.push(n+"{",null,"{"+s(i)+"}}");break;case 38:o.push(null,n.slice(1)+"{"+s(i)+"}");break;default:t.push([n,i])}return t.length>0&&(r.inline=s(t)),o.length>0&&(r.css=o),r},s=e=>{if(l(e)){let t="";for(let[o,r]of Array.isArray(e)?e:Object.entries(e))if(a(r)||typeof r=="number"){let n=u(o),i=typeof r=="number"?c.has(n)?""+r:r+"px":""+r;t+=(t?";":"")+n+":"+(n==="content"?JSON.stringify(i):i)}return t}return""};window.$styleToCSS=p;}`,
+  event: `{var w=window;w.$emit=(e,f,s)=>f.call(w.$signals?.(s)??e.target,e.type==="mount"?e.target:e);w.$onsubmit=(e,f,s)=>{e.preventDefault();f.call(w.$signals?.(s)??e.target,new FormData(e.target),e)};w.$onstage=()=>document.querySelectorAll("[onmount]").forEach(t=>{const k="onmount",j=t.getAttribute(k);t.removeAttribute(k);new Function("event",j)({type:"mount",target:t})});}`
 };
 
 // runtime/utils.ts
@@ -66,7 +62,7 @@ var cssBareUnitProps = /* @__PURE__ */ new Set([
 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) {
+var cx = (className) => {
   if (isString(className)) {
     return className;
   }
@@ -77,44 +73,64 @@ function cx(className) {
     return Object.entries(className).filter(([, v]) => !!v).map(([k]) => k).join(" ");
   }
   return "";
-}
-function styleToCSS(style) {
-  if (isString(style)) {
-    return style;
+};
+var styleToCSS = (style) => {
+  const inline = [];
+  const css = [];
+  const ret = {};
+  for (const [k, v] of Object.entries(style)) {
+    switch (k.charCodeAt(0)) {
+      case /* ':' */
+      58:
+        css.push(null, k + "{" + renderStyle(v) + "}");
+        break;
+      case /* '@' */
+      64:
+        css.push(k + "{", null, "{" + renderStyle(v) + "}}");
+        break;
+      case /* '&' */
+      38:
+        css.push(null, k.slice(1) + "{" + renderStyle(v) + "}");
+        break;
+      default:
+        inline.push([k, v]);
+    }
+  }
+  if (inline.length > 0) {
+    ret.inline = renderStyle(inline);
   }
+  if (css.length > 0) {
+    ret.css = css;
+  }
+  return ret;
+};
+var renderStyle = (style) => {
   if (isObject(style)) {
     let css = "";
     for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
-      if (isString(k) && (isString(v) || typeof v === "number")) {
+      if (isString(v) || typeof v === "number") {
         const cssKey = toHyphenCase(k);
-        const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : escapeCSSText("" + v);
-        css += (css ? ";" : "") + escapeCSSText(cssKey) + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
+        const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : "" + v;
+        css += (css ? ";" : "") + cssKey + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
       }
     }
     return css;
   }
   return "";
-}
-function escapeCSSText(str2) {
-  return str2.replace(/["<>]/g, (m) => {
-    if (m === "<") return "&lt;";
-    if (m === ">") return "&gt;";
-    return "'";
-  });
-}
+};
 var regexpHtmlSafe = /["'&<>]/;
-function escapeHTML(str2) {
-  if (typeof Bun === "object" && "escapeHTML" in Bun) return Bun.escapeHTML(str2);
-  const match = regexpHtmlSafe.exec(str2);
+var escapeHTML = (str) => {
+  const match = regexpHtmlSafe.exec(str);
   if (!match) {
-    return str2;
+    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 < str2.length; index++) {
-    switch (str2.charCodeAt(index)) {
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
       case 34:
         escape = "&quot;";
         break;
@@ -134,456 +150,59 @@ function escapeHTML(str2) {
         continue;
     }
     if (lastIndex !== index) {
-      html2 += str2.slice(lastIndex, index);
+      html2 += str.slice(lastIndex, index);
     }
     lastIndex = index + 1;
     html2 += escape;
   }
-  return lastIndex !== index ? html2 + str2.slice(lastIndex, index) : html2;
-}
+  return lastIndex !== index ? html2 + str.slice(lastIndex, index) : html2;
+};
 
 // render.ts
+var RUNTIME_SIGNALS = 1;
+var RUNTIME_SUSPENSE = 2;
+var RUNTIME_CX = 4;
+var RUNTIME_STYLE_TO_CSS = 8;
+var RUNTIME_EVENT = 16;
+var cdn = "https://raw.esm.sh";
 var encoder = new TextEncoder();
-var regexpHtmlTag = /^[a-z][\w\-$]*$/;
+var customElements = /* @__PURE__ */ new Map();
 var selfClosingTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
-var cdn = "https://raw.esm.sh";
 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);
-var toAttrStringLit = (str2) => '"' + escapeHTML(str2) + '"';
-var str = (v, str2) => v !== void 0 ? str2(v) : "";
-var collectDeps;
-function createThis(fc, appState, context, request) {
-  const computed = (fn) => {
-    const deps = /* @__PURE__ */ Object.create(null);
-    collectDeps = (fc2, key, value2) => deps[fc2 + ":" + key] = value2;
-    const value = fn.call(thisProxy);
-    collectDeps = void 0;
-    if (value instanceof Promise || Object.keys(deps).length === 0) return value;
-    return [$computed, { value, deps, fc, fn }, $vnode];
-  };
-  const thisProxy = new Proxy(/* @__PURE__ */ Object.create(null), {
-    get(target, key, receiver) {
-      switch (key) {
-        case "app":
-          return appState;
-        case "context":
-          return context ?? {};
-        case "request":
-          if (!request) {
-            throw new Error("request is not defined");
-          }
-          return request;
-        case "computed":
-          return computed;
-        default: {
-          const value = Reflect.get(target, key, receiver);
-          if (typeof key === "symbol") {
-            return value;
-          }
-          if (collectDeps) {
-            collectDeps(fc, key, value);
-            return value;
-          }
-          return [$state, { key, value, fc }, $vnode];
-        }
-      }
-    },
-    set(target, key, value, receiver) {
-      return Reflect.set(target, key, value, receiver);
-    }
-  });
-  return thisProxy;
-}
-async function renderNode(rc, node, stripSlotProp) {
-  const { write } = rc;
-  switch (typeof node) {
-    case "string":
-      write(escapeHTML(node));
-      break;
-    case "number":
-    case "bigint":
-      write("" + node);
-      break;
-    case "object":
-      if (isVNode(node)) {
-        const [tag, props] = node;
-        const { stateStore } = rc;
-        if (tag === $fragment) {
-          if (props.children !== void 0) {
-            await renderChildren(rc, props.children);
-          }
-          break;
-        }
-        if (tag === $html) {
-          if (props.innerHTML) {
-            write(props.innerHTML);
-          }
-          break;
-        }
-        if (tag === $state) {
-          const { key, value, fc } = props;
-          write('<m-state fc="' + fc + '" key=' + toAttrStringLit(key) + ">");
-          if (value !== void 0 && value !== null) {
-            write(escapeHTML("" + value));
-          }
-          write("</m-state>");
-          stateStore.set(fc + ":" + key, value);
-          break;
-        }
-        if (tag === $computed) {
-          const { deps, value, fc } = props;
-          write('<m-state fc="' + fc + '" computed="' + rc.mcs.gen(node) + '">');
-          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 === "slot") {
-          const { fcSlots } = rc;
-          if (fcSlots) {
-            let slots;
-            if (props.name) {
-              slots = fcSlots.filter((v) => isVNode(v) && v[1].slot === props.name);
-            } else {
-              slots = fcSlots.filter((v) => !isVNode(v) || !v[1].slot);
-            }
-            if (slots.length === 0) {
-              slots = props.children;
-            }
-            await renderChildren(rc, slots, true);
-          }
-          break;
-        }
-        if (tag === "toggle") {
-          const { value: valueProp, children } = props;
-          if (children !== void 0) {
-            if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
-              const { key, deps, value, fc } = valueProp[1];
-              write('<m-state mode="toggle" fc="' + fc + '" ');
-              if (key) {
-                write("key=" + toAttrStringLit(key) + ">");
-                stateStore.set(fc + ":" + key, !!value);
-              } else {
-                write('computed="' + rc.mcs.gen(valueProp) + '">');
-                for (const [key2, value2] of Object.entries(deps)) {
-                  if (!stateStore.has(key2)) {
-                    stateStore.set(key2, value2);
-                  }
-                }
-              }
-              if (!value) {
-                write("<template m-slot>");
-              }
-              await renderChildren(rc, children);
-              if (!value) {
-                write("</template>");
-              }
-              write("</m-state>");
-            } else if (valueProp) {
-              await renderChildren(rc, children);
-            }
-          }
-          break;
-        }
-        if (tag === "switch") {
-          const { value: valueProp, defaultValue, children } = props;
-          if (children !== void 0) {
-            let slots = Array.isArray(children) ? isVNode(children) ? [children] : children : [children];
-            let stateful;
-            let computed;
-            let valueOrDefault;
-            if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
-              const { key, deps, value, fc } = valueProp[1];
-              valueOrDefault = value ?? defaultValue;
-              stateful = '<m-state mode="switch" fc="' + fc + '" ';
-              if (key) {
-                stateful += "key=" + toAttrStringLit(key) + ">";
-                stateStore.set(fc + ":" + key, valueOrDefault);
-              } else {
-                stateful += 'computed="' + rc.mcs.gen(valueProp) + '">';
-                for (const [key2, value2] of Object.entries(deps)) {
-                  if (!stateStore.has(key2)) {
-                    stateStore.set(key2, value2);
-                  }
-                }
-              }
-            } 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 (computed) {
-                write(computed);
-              }
-            }
-            if (matchedSlot) {
-              await renderNode(rc, matchedSlot[1], true);
-            } else if (unnamedSlots.length > 0) {
-              await renderChildren(rc, unnamedSlots);
-            }
-            if (stateful) {
-              if (namedSlots.length > 0 || matchedSlot && unnamedSlots.length > 0) {
-                write("<template m-slot>");
-                await renderChildren(rc, namedSlots);
-                if (matchedSlot && unnamedSlots.length > 0) {
-                  await renderChildren(rc, unnamedSlots);
-                }
-                write("</template>");
-              }
-              write("</m-state>");
-            }
-          }
-          break;
-        }
-        if (typeof tag === "function") {
-          const fcIndex = ++rc.status.fcIndex;
-          const { children, rendering, placeholder, catch: catchFC } = props;
-          try {
-            const v = tag.call(createThis(fcIndex, rc.appState, rc.context, rc.request), props);
-            const fcSlots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
-            const eager = (rendering ?? tag.rendering) === "eager";
-            if (v instanceof Promise) {
-              if (eager) {
-                await renderNode({ ...rc, fcIndex, fcSlots }, await v);
-              } else {
-                const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
-                rc.suspenses.push(v.then(async (node2) => {
-                  let buf = "<m-chunk " + chunkIdAttr + "><template>";
-                  await renderNode({
-                    ...rc,
-                    fcIndex,
-                    fcSlots,
-                    write: (chunk) => {
-                      buf += chunk;
-                    }
-                  }, node2);
-                  return buf + "</template></m-chunk>";
-                }));
-                write("<m-portal " + chunkIdAttr + ">");
-                if (placeholder) {
-                  await renderNode({ ...rc, fcIndex }, placeholder);
-                }
-                write("</m-portal>");
-              }
-            } else if (isObject(v) && Symbol.asyncIterator in v) {
-              if (eager) {
-                for await (const c of v) {
-                  await renderNode({ ...rc, fcIndex, fcSlots }, c);
-                }
-              } else {
-              }
-            } else if (isObject(v) && Symbol.iterator in v && !isVNode(v)) {
-              for (const node2 of v) {
-                await renderNode({ ...rc, fcIndex, fcSlots }, node2);
-              }
-            } else {
-              await renderNode({ ...rc, fcIndex, fcSlots }, v);
-            }
-          } catch (err) {
-            if (err instanceof Error) {
-              if (typeof catchFC === "function") {
-                await renderNode({ ...rc, fcIndex }, catchFC(err));
-              } else {
-                write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.message) + "</code></pre>");
-                console.error(err);
-              }
-            }
-          }
-          break;
-        }
-        if (isString(tag) && regexpHtmlTag.test(tag)) {
-          let buffer = "<" + tag;
-          let stateTags = "";
-          for (let [propName, propValue] of Object.entries(props)) {
-            if (propName === "children") {
-              continue;
-            }
-            if (isVNode(propValue) && (propValue[0] === $state || propValue[0] === $computed)) {
-              const { key, value, deps, fc } = propValue[1];
-              if (propName === "class") {
-                rc.status.cx = true;
-              } else if (propName === "style") {
-                rc.status.styleToCSS = true;
-              }
-              stateTags += "<m-state mode=" + toAttrStringLit("[" + propName + "]") + ' fc="' + fc + '" ';
-              if (key) {
-                stateTags += "key=" + toAttrStringLit(key) + ">";
-                stateStore.set(fc + ":" + key, value);
-              } else {
-                stateTags += 'computed="' + rc.mcs.gen(propValue) + '">';
-                for (const [key2, value2] of Object.entries(deps)) {
-                  if (!stateStore.has(key2)) {
-                    stateStore.set(key2, value2);
-                  }
-                }
-              }
-              stateTags += "</m-state>";
-              propValue = value;
-            }
-            switch (propName) {
-              case "class":
-                buffer += " class=" + toAttrStringLit(cx(propValue));
-                break;
-              case "style":
-                if (isString(propValue) && propValue !== "") {
-                  buffer += ' style="' + escapeCSSText(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([escapeCSSText(k), styleToCSS(v)]);
-                        break;
-                      case /* '@' */
-                      64:
-                        atRuleStyles.push([escapeCSSText(k), styleToCSS(v)]);
-                        break;
-                      case /* '&' */
-                      38:
-                        nestingStyles.push([escapeCSSText(k), styleToCSS(v)]);
-                        break;
-                      default:
-                        style.push([k, v]);
-                    }
-                  }
-                  if (pseudoStyles.length > 0 || atRuleStyles.length > 0 || nestingStyles.length > 0) {
-                    let css = "";
-                    let raw = "";
-                    let id;
-                    let cssSelector;
-                    let cssIds;
-                    if (style.length > 0) {
-                      css = styleToCSS(style);
-                      raw += css + "|";
-                    }
-                    raw += [pseudoStyles, atRuleStyles, nestingStyles].flat(1).map(([k, v]) => k + ">" + v).join("|");
-                    id = hashCode(raw).toString(36);
-                    cssSelector = "[data-css-" + id + "]";
-                    cssIds = rc.cssIds ?? (rc.cssIds = /* @__PURE__ */ new Set());
-                    if (!cssIds.has(id)) {
-                      cssIds.add(id);
-                      if (css) {
-                        css = cssSelector + "{" + css + "}";
-                      }
-                      for (const [p, styles] of pseudoStyles) {
-                        css += cssSelector + p + "{" + styles + "}";
-                      }
-                      for (const [at, styles] of atRuleStyles) {
-                        css += at + "{" + cssSelector + "{" + styles + "}}";
-                      }
-                      for (const [n, styles] of nestingStyles) {
-                        css += cssSelector + n.slice(1) + "{" + styles + "}";
-                      }
-                      write('<style id="css-' + id + '">' + css + "</style>");
-                    }
-                    buffer += " data-css-" + id;
-                  } else if (style.length > 0) {
-                    buffer += ' style="' + styleToCSS(style) + '"';
-                  }
-                }
-                break;
-              case "onMount":
-                if (typeof propValue === "function") {
-                  rc.status.onmount++;
-                  buffer += ' onmount="$emit(event,' + rc.mfs.gen(propValue) + str(rc.fcIndex, (i) => "," + i) + ')"';
-                }
-                break;
-              case "action":
-                if (typeof propValue === "function" && tag === "form") {
-                  buffer += ' onsubmit="$onsubmit(event,' + rc.mfs.gen(propValue) + str(rc.fcIndex, (i) => "," + i) + ')"';
-                } else if (isString(propValue)) {
-                  buffer += " action=" + toAttrStringLit(propValue);
-                }
-                break;
-              case "slot":
-                if (!stripSlotProp && isString(propValue)) {
-                  buffer += " slot=" + toAttrStringLit(propValue);
-                }
-                break;
-              default:
-                if (regexpHtmlTag.test(propName) && propValue !== void 0) {
-                  if (propName.startsWith("on")) {
-                    if (typeof propValue === "function") {
-                      buffer += " " + propName.toLowerCase() + '="$emit(event,' + rc.mfs.gen(propValue) + str(rc.fcIndex, (i) => "," + i) + ')"';
-                    }
-                  } else if (typeof propValue === "boolean") {
-                    if (propValue) {
-                      buffer += " " + propName;
-                    }
-                  } else {
-                    buffer += " " + escapeHTML(propName) + (propValue === true ? "" : "=" + toAttrStringLit("" + propValue));
-                  }
-                }
-            }
-          }
-          write(buffer + ">");
-          if (!selfClosingTags.has(tag)) {
-            if (stateTags) {
-              write(stateTags);
-            }
-            if (props.innerHTML) {
-              write(props.innerHTML);
-            } else if (props.children !== void 0) {
-              await renderChildren(rc, props.children);
-            }
-            write("</" + tag + ">");
-          } else if (stateTags) {
-            write("<m-group>" + stateTags + "</m-group>");
-          }
-        }
-      } else if (Array.isArray(node) && node.length > 0) {
-        renderChildren(rc, node, stripSlotProp);
-      }
-      break;
+var escapeCSSText = (str) => str.replace(/[<>]/g, (m) => m.charCodeAt(0) === 60 ? "&lt;" : "&gt;");
+var toAttrStringLit = (str) => '"' + escapeHTML(str) + '"';
+var toStr = (v, str) => v !== void 0 ? str(v) : "";
+var Signal = class {
+  constructor(scope, key, value) {
+    this.scope = scope;
+    this.key = key;
+    this.value = value;
   }
-}
-async function renderChildren(rc, children, stripSlotProp) {
-  if (Array.isArray(children) && !isVNode(children)) {
-    for (const child of children) {
-      await renderNode(rc, child, stripSlotProp);
-    }
-  } else {
-    await renderNode(rc, children, stripSlotProp);
+  toString() {
+    return this.value === null || this.value === void 0 ? "" : String(this.value);
   }
-}
-var IdGenImpl = class extends Map {
-  constructor(_prefix) {
-    super();
-    this._prefix = _prefix;
+  map(_fn) {
+    return [];
+  }
+};
+var Ref = class {
+  constructor(scope, name) {
+    this.scope = scope;
+    this.name = name;
   }
+};
+var IdGenImpl = class extends Map {
   _id = 0;
   gen(v) {
-    let id = this.get(v);
-    if (id === void 0) {
-      id = this._prefix + (this._id++).toString(36);
-      this.set(v, id);
+    return this.get(v) ?? this.set(v, this._id++).get(v);
+  }
+};
+var JSX = {
+  customElements: {
+    define(tagName, fc) {
+      customElements.set(tagName, fc);
     }
-    return id;
   }
 };
 function render(node, renderOptions = {}) {
@@ -609,70 +228,75 @@ function render(node, renderOptions = {}) {
   return new Response(
     new ReadableStream({
       async start(controller) {
-        const { appState: appStateInit, context, htmx } = renderOptions;
-        const write = (chunk) => controller.enqueue(encoder.encode(chunk));
-        const appState = createThis(0, null, context, request);
-        const stateStore = /* @__PURE__ */ new Map();
+        const { app, context, htmx } = renderOptions;
+        const appSignals = createSignals(0, null, context, request);
+        const signals = /* @__PURE__ */ new Map();
+        const effects = [];
         const suspenses = [];
+        const write = (chunk) => controller.enqueue(encoder.encode(chunk));
         const rc = {
           write,
           suspenses,
           context,
           request,
-          appState,
-          stateStore,
-          mcs: new IdGenImpl("$MC_"),
-          mfs: new IdGenImpl("$MF_"),
-          status: { fcIndex: 0, chunkIndex: 0, onmount: 0 }
+          appSignals,
+          signals,
+          effects,
+          mcs: new IdGenImpl(),
+          mfs: new IdGenImpl(),
+          status: { scopeIndex: 0, chunkIndex: 0, refs: 0 }
         };
-        const runtimeJS = {};
-        const finalize = async () => {
+        let runtimeJSFlags = 0;
+        async function finalize() {
           let js = "";
-          if (rc.status.cx && !runtimeJS.cx) {
-            runtimeJS.cx = true;
+          if (rc.status.cx && !(runtimeJSFlags & RUNTIME_CX)) {
+            runtimeJSFlags |= RUNTIME_CX;
             js += UTILS_JS.cx;
           }
-          if (rc.status.styleToCSS && !runtimeJS.styleToCSS) {
-            runtimeJS.styleToCSS = true;
+          if (rc.status.styleToCSS && !(runtimeJSFlags & RUNTIME_STYLE_TO_CSS)) {
+            runtimeJSFlags |= RUNTIME_STYLE_TO_CSS;
             js += UTILS_JS.styleToCSS;
           }
-          if (rc.mfs.size > 0 && !runtimeJS.event) {
-            runtimeJS.event = true;
+          if (rc.mfs.size > 0 && !(runtimeJSFlags & RUNTIME_EVENT)) {
+            runtimeJSFlags |= RUNTIME_EVENT;
             js += UTILS_JS.event;
           }
-          if (suspenses.length > 0 && !runtimeJS.suspense) {
-            runtimeJS.suspense = true;
-            js += SUSPENSE_JS;
+          if (signals.size + effects.length > 0 && !(runtimeJSFlags & RUNTIME_SIGNALS)) {
+            runtimeJSFlags |= RUNTIME_SIGNALS;
+            js += SIGNALS_JS;
           }
-          if (stateStore.size > 0 && !runtimeJS.state) {
-            runtimeJS.state = true;
-            js += STATE_JS;
+          if (suspenses.length > 0 && !(runtimeJSFlags & RUNTIME_SUSPENSE)) {
+            runtimeJSFlags |= RUNTIME_SUSPENSE;
+            js += SUSPENSE_JS;
           }
           if (js) {
             write("<script>/* runtime.js (generated by mono-jsx) */(()=>{" + js + "})()<\/script>");
           }
           js = "";
           if (rc.mfs.size > 0) {
-            for (const [fn, fname] of rc.mfs.entries()) {
-              js += "function " + fname + "(){(" + fn.toString() + ").apply(this,arguments)};";
+            for (const [fn, i] of rc.mfs.entries()) {
+              js += "function $MF_" + i + "(){(" + fn.toString() + ").apply(this,arguments)};";
             }
             rc.mfs.clear();
           }
-          if (stateStore.size > 0) {
-            for (const [key, value] of stateStore.entries()) {
-              js += "$defineState(" + JSON.stringify(key) + (value !== void 0 ? "," + JSON.stringify(value) : "") + ");";
+          if (rc.effects.length > 0) {
+            js += rc.effects.splice(0, rc.effects.length).join("");
+          }
+          if (signals.size > 0) {
+            for (const [key, value] of signals.entries()) {
+              js += "$MS(" + JSON.stringify(key) + (value !== void 0 ? "," + JSON.stringify(value) : "") + ");";
             }
-            stateStore.clear();
+            signals.clear();
           }
           if (rc.mcs.size > 0) {
-            for (const [vnode, fname] of rc.mcs.entries()) {
-              const { fn, deps } = vnode[1];
-              js += '$defineComputed("' + fname + '",function(){return(' + fn.toString() + ").call(this)}," + JSON.stringify(Object.keys(deps)) + ");";
+            for (const [vnode, i] of rc.mcs.entries()) {
+              const { compute, deps } = vnode.key;
+              js += "$MC(" + i + ",function(){return(" + compute.toString() + ").call(this)}," + JSON.stringify(Object.keys(deps)) + ");";
             }
             rc.mcs.clear();
           }
-          if (rc.status.onmount > 0) {
-            rc.status.onmount = 0;
+          if (rc.status.refs > 0) {
+            rc.status.refs = 0;
             js += "$onstage();";
           }
           if (js) {
@@ -682,11 +306,11 @@ function render(node, renderOptions = {}) {
             await Promise.all(suspenses.splice(0, suspenses.length).map((suspense) => suspense.then(write)));
             await finalize();
           }
-        };
-        if (appStateInit) {
-          for (const [key, value] of Object.entries(appStateInit)) {
+        }
+        if (app) {
+          for (const [key, value] of Object.entries(app)) {
             if (value !== void 0) {
-              appState[key] = value;
+              appSignals[key] = value;
             }
           }
         }
@@ -710,8 +334,455 @@ function render(node, renderOptions = {}) {
     { headers, status }
   );
 }
+async function renderNode(rc, node, stripSlotProp) {
+  const { write } = rc;
+  switch (typeof node) {
+    case "string":
+      write(escapeHTML(node));
+      break;
+    case "number":
+    case "bigint":
+      write(String(node));
+      break;
+    case "object":
+      if (node === null) {
+      } else if (node instanceof Signal) {
+        const { scope, key, value } = node;
+        if (isString(key)) {
+          write('<m-signal scope="' + scope + '" key=' + toAttrStringLit(key) + ">");
+          if (value !== void 0 && value !== null) {
+            write(escapeHTML(String(value)));
+          }
+          write("</m-signal>");
+        } else {
+          write('<m-signal scope="' + scope + '" computed="' + rc.mcs.gen(node) + '">');
+          if (value !== void 0) {
+            write(escapeHTML(String(value)));
+          }
+          write("</m-signal>");
+        }
+        markSignal(rc, node);
+      } else if (isVNode(node)) {
+        const [tag, props] = node;
+        switch (tag) {
+          // fragment element
+          case $fragment: {
+            if (props.children !== void 0) {
+              await renderChildren(rc, props.children);
+            }
+            break;
+          }
+          // XSS!
+          case $html: {
+            if (props.innerHTML) {
+              write(props.innerHTML);
+            }
+            break;
+          }
+          // `<slot>` element
+          case "slot": {
+            const { slots: fcSlots } = rc;
+            if (fcSlots) {
+              let slots;
+              if (props.name) {
+                slots = fcSlots.filter((v) => isVNode(v) && v[1].slot === props.name);
+              } else {
+                slots = fcSlots.filter((v) => !isVNode(v) || !v[1].slot);
+              }
+              if (slots.length === 0) {
+                slots = props.children;
+              }
+              await renderChildren(rc, slots, true);
+            }
+            break;
+          }
+          // `<toggle>` element
+          case "toggle": {
+            const { show, children } = props;
+            if (children !== void 0) {
+              if (show instanceof Signal) {
+                const { scope, key, value } = show;
+                write('<m-signal mode="toggle" scope="' + scope + '" ');
+                if (isString(key)) {
+                  write("key=" + toAttrStringLit(key) + ">");
+                } else {
+                  write('computed="' + rc.mcs.gen(show) + '">');
+                }
+                markSignal(rc, show);
+                if (!value) {
+                  write("<template m-slot>");
+                }
+                await renderChildren(rc, children);
+                if (!value) {
+                  write("</template>");
+                }
+                write("</m-signal>");
+              } else if (show) {
+                await renderChildren(rc, children);
+              }
+            }
+            break;
+          }
+          // `<switch>` element
+          case "switch": {
+            const { value: valueProp, children } = props;
+            if (children !== void 0) {
+              let slots = Array.isArray(children) ? isVNode(children) ? [children] : children : [children];
+              let stateful;
+              let toSlotName;
+              if (valueProp instanceof Signal) {
+                const { scope, key, value } = valueProp;
+                markSignal(rc, valueProp);
+                stateful = '<m-signal mode="switch" scope="' + scope + '" ';
+                if (isString(key)) {
+                  stateful += "key=" + toAttrStringLit(key) + ">";
+                } else {
+                  stateful += 'computed="' + rc.mcs.gen(valueProp) + '">';
+                }
+                toSlotName = String(value);
+              } else {
+                toSlotName = String(valueProp);
+              }
+              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 === toSlotName) {
+                  matchedSlot = [slotName, slot];
+                } else {
+                  namedSlots.push(slot);
+                }
+              }
+              if (stateful) {
+                write(matchedSlot ? stateful.slice(0, -1) + " match=" + toAttrStringLit(matchedSlot[0]) + ">" : stateful);
+              }
+              if (matchedSlot) {
+                await renderNode(rc, matchedSlot[1], true);
+              } else if (unnamedSlots.length > 0) {
+                await renderChildren(rc, unnamedSlots);
+              }
+              if (stateful) {
+                if (namedSlots.length > 0 || matchedSlot && unnamedSlots.length > 0) {
+                  write("<template m-slot>");
+                  await renderChildren(rc, namedSlots);
+                  if (matchedSlot && unnamedSlots.length > 0) {
+                    await renderChildren(rc, unnamedSlots);
+                  }
+                  write("</template>");
+                }
+                write("</m-signal>");
+              }
+            }
+            break;
+          }
+          default: {
+            if (typeof tag === "function") {
+              await renderFC(rc, tag, props);
+              break;
+            }
+            if (isString(tag)) {
+              if (customElements.has(tag)) {
+                await renderFC(rc, customElements.get(tag), props);
+                break;
+              }
+              let buffer = "<" + tag;
+              let attrModifiers = "";
+              for (let [propName, propValue] of Object.entries(props)) {
+                if (propName === "children") {
+                  continue;
+                }
+                const [attr, addonHtml, signal] = renderAttr(rc, propName, propValue, stripSlotProp);
+                if (addonHtml) {
+                  write(addonHtml);
+                }
+                if (signal) {
+                  const { scope, key } = signal;
+                  attrModifiers += "<m-signal mode=" + toAttrStringLit("[" + propName + "]") + ' scope="' + scope + '" ';
+                  if (isString(key)) {
+                    attrModifiers += "key=" + toAttrStringLit(key);
+                  } else {
+                    attrModifiers += 'computed="' + rc.mcs.gen(signal) + '"';
+                  }
+                  attrModifiers += "></m-signal>";
+                }
+                buffer += attr;
+              }
+              write(buffer + ">");
+              if (!selfClosingTags.has(tag)) {
+                if (attrModifiers) {
+                  write(attrModifiers);
+                }
+                if (props.innerHTML) {
+                  write(props.innerHTML);
+                } else if (props.children !== void 0) {
+                  await renderChildren(rc, props.children);
+                }
+                write("</" + tag + ">");
+              } else if (attrModifiers) {
+                write("<m-group>" + attrModifiers + "</m-group>");
+              }
+            }
+          }
+        }
+      } else if (Array.isArray(node)) {
+        if (node.length > 0) {
+          await renderChildren(rc, node);
+        }
+      }
+      break;
+  }
+}
+function renderAttr(rc, attrName, attrValue, stripSlotProp) {
+  let attr = "";
+  let addonHtml = "";
+  let signal;
+  if (isObject(attrValue)) {
+    if (attrValue instanceof Signal) {
+      if (attrName === "class") {
+        rc.status.cx = true;
+      } else if (attrName === "style") {
+        rc.status.styleToCSS = true;
+      }
+      signal = attrValue;
+      attrValue = signal.value;
+      markSignal(rc, signal);
+    } else {
+    }
+  }
+  switch (attrName) {
+    case "class":
+      attr += " class=" + toAttrStringLit(cx(attrValue));
+      break;
+    case "style":
+      if (isString(attrValue)) {
+        attr += ' style="' + escapeCSSText(attrValue) + '"';
+      } else if (isObject(attrValue) && !Array.isArray(attrValue)) {
+        const { inline, css } = styleToCSS(attrValue);
+        if (inline) {
+          attr += " style=" + toAttrStringLit(inline);
+        }
+        if (css) {
+          const id = hashCode(css.join("")).toString(36);
+          addonHtml += '<style id="css-' + id + '">' + escapeCSSText(css.map((v) => v === null ? "[data-css-" + id + "]" : v).join("")) + "</style>";
+          attr += " data-css-" + id;
+        }
+      }
+      break;
+    case "ref":
+      if (typeof attrValue === "function") {
+        rc.status.refs++;
+        attr += ' onmount="$emit(event,$MF_' + rc.mfs.gen(attrValue) + toStr(rc.scope, (i) => "," + i) + ')"';
+      } else if (isObject(attrValue) && attrValue instanceof Ref) {
+        attr += " data-ref=" + toAttrStringLit(attrValue.scope + ":" + attrValue.name);
+      }
+      break;
+    case "action":
+      if (typeof attrValue === "function") {
+        attr += ' onsubmit="$onsubmit(event,$MF_' + rc.mfs.gen(attrValue) + toStr(rc.scope, (i) => "," + i) + ')"';
+      } else if (isString(attrValue)) {
+        attr += " action=" + toAttrStringLit(attrValue);
+      }
+      break;
+    case "slot":
+      if (!stripSlotProp && isString(attrValue)) {
+        attr += " slot=" + toAttrStringLit(attrValue);
+      }
+      break;
+    default:
+      if (attrValue !== void 0 && attrValue !== null && attrValue !== false) {
+        if (attrName.startsWith("on") && typeof attrValue === "function") {
+          attr += " " + escapeHTML(attrName.toLowerCase()) + '="$emit(event,$MF_' + rc.mfs.gen(attrValue) + toStr(rc.scope, (i) => "," + i) + ')"';
+        } else {
+          attr += " " + escapeHTML(attrName);
+          if (attrValue !== "" && attrValue !== true) {
+            attr += "=" + toAttrStringLit(String(attrValue));
+          }
+        }
+      }
+  }
+  return [attr, addonHtml, signal];
+}
+async function renderFC(rc, fc, props) {
+  const { write } = rc;
+  const { children } = props;
+  const scope = ++rc.status.scopeIndex;
+  const signals = createSignals(scope, rc.appSignals, rc.context, rc.request);
+  const slots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
+  try {
+    const v = fc.call(signals, props);
+    if (isObject(v) && !isVNode(v)) {
+      if (v instanceof Promise) {
+        if ((props.rendering ?? fc.rendering) === "eager") {
+          await renderNode({ ...rc, scope, slots }, await v);
+          writeEffects(rc, scope, signals);
+        } else {
+          const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
+          write("<m-portal " + chunkIdAttr + ">");
+          if (props.placeholder) {
+            await renderNode({ ...rc, scope }, props.placeholder);
+          }
+          write("</m-portal>");
+          rc.suspenses.push(v.then(async (node) => {
+            let buf = "";
+            let write2 = (chunk) => {
+              buf += chunk;
+            };
+            buf += "<m-chunk " + chunkIdAttr + "><template>";
+            await renderNode({ ...rc, scope, slots, write: write2 }, node);
+            writeEffects({ ...rc, write: write2 }, scope, signals);
+            return buf + "</template></m-chunk>";
+          }));
+        }
+      } else if (Symbol.asyncIterator in v) {
+        if ((props.rendering ?? fc.rendering) === "eager") {
+          for await (const c of v) {
+            await renderNode({ ...rc, scope, slots }, c);
+          }
+          writeEffects(rc, scope, signals);
+        } else {
+          const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
+          write("<m-portal " + chunkIdAttr + ">");
+          if (props.placeholder) {
+            await renderNode({ ...rc, scope }, props.placeholder);
+          }
+          write("</m-portal>");
+          const iter = () => rc.suspenses.push(
+            v.next().then(async ({ done, value }) => {
+              let buf = "<m-chunk " + chunkIdAttr;
+              let write2 = (chunk) => {
+                buf += chunk;
+              };
+              if (done) {
+                buf += " done>";
+                writeEffects({ ...rc, write: write2 }, scope, signals);
+                return buf + "</m-chunk>";
+              }
+              buf += " next><template>";
+              await renderNode({ ...rc, scope, slots, write: write2 }, value);
+              iter();
+              return buf + "</template></m-chunk>";
+            })
+          );
+          iter();
+        }
+      } else if (Symbol.iterator in v) {
+        for (const node of v) {
+          await renderNode({ ...rc, scope, slots }, node);
+        }
+        writeEffects(rc, scope, signals);
+      }
+    } else if (v) {
+      await renderNode({ ...rc, scope, slots }, v);
+      writeEffects(rc, scope, signals);
+    }
+  } catch (err) {
+    if (err instanceof Error) {
+      if (props.catch) {
+        await renderNode({ ...rc, scope }, props.catch(err));
+      } else {
+        write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.message) + "</code></pre>");
+        console.error(err);
+      }
+    }
+  }
+}
+async function renderChildren(rc, children, stripSlotProp) {
+  if (Array.isArray(children) && !isVNode(children)) {
+    for (const child of children) {
+      await renderNode(rc, child, stripSlotProp);
+    }
+  } else {
+    await renderNode(rc, children, stripSlotProp);
+  }
+}
+var collectDeps;
+function createSignals(scope, appSignals, context = {}, request) {
+  const effects = [];
+  const computed = (compute) => {
+    const deps = /* @__PURE__ */ Object.create(null);
+    collectDeps = (fc, key, value2) => deps[fc + ":" + key] = value2;
+    const value = compute.call(thisProxy);
+    collectDeps = void 0;
+    if (value instanceof Promise || Object.keys(deps).length === 0) return value;
+    return new Signal(scope, { compute, deps }, value);
+  };
+  const refs = new Proxy(/* @__PURE__ */ Object.create(null), {
+    get(_target, key) {
+      return new Ref(scope, key);
+    }
+  });
+  const thisProxy = new Proxy(/* @__PURE__ */ Object.create(null), {
+    get(target, key, receiver) {
+      switch (key) {
+        case "app":
+          return appSignals;
+        case "context":
+          return context;
+        case "request":
+          return request;
+        case "refs":
+          return refs;
+        case "computed":
+          return computed;
+        case "effect":
+          return (effect) => {
+            effects.push(effect.toString());
+          };
+        case $effects:
+          return effects;
+        default:
+          if (typeof key === "string") {
+            const value = Reflect.get(target, key, receiver);
+            if (value instanceof Signal) {
+              return value;
+            }
+            if (collectDeps) {
+              collectDeps(scope, key, value);
+              return value;
+            }
+            return new Signal(scope, key, value);
+          }
+      }
+    },
+    set(target, key, value, receiver) {
+      return Reflect.set(target, key, value, receiver);
+    }
+  });
+  return thisProxy;
+}
+function markSignal({ signals }, { scope, key, value }) {
+  if (isString(key)) {
+    signals.set(scope + ":" + key, value);
+  } else {
+    for (const [id, value2] of Object.entries(key.deps)) {
+      if (!signals.has(id)) {
+        signals.set(id, value2);
+      }
+    }
+  }
+}
+function writeEffects({ effects, write }, scope, signals) {
+  const v = signals[$effects];
+  if (Array.isArray(v) && v.length > 0) {
+    const n = v.length;
+    if (n > 0) {
+      const js = new Array(n);
+      for (let i = 0; i < n; i++) {
+        js[i] = "function $ME_" + scope + "_" + i + "(){return(" + v[i] + ").call(this)};";
+      }
+      write('<m-effect scope="' + scope + '" n="' + n + '"></m-effect>');
+      effects.push(js.join(""));
+    }
+  }
+}
 
 // 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;
@@ -722,7 +793,7 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   }
   if (tag === "html") {
     const renderOptions = /* @__PURE__ */ Object.create(null);
-    const optionsKeys = /* @__PURE__ */ new Set(["appState", "context", "request", "status", "headers", "rendering", "htmx"]);
+    const optionsKeys = /* @__PURE__ */ new Set(["app", "context", "request", "status", "headers", "rendering", "htmx"]);
     for (const [key2, value] of Object.entries(props)) {
       if (optionsKeys.has(key2) || key2.startsWith("htmx-ext-")) {
         renderOptions[key2] = value;
@@ -733,13 +804,22 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   }
   return vnode;
 };
-var Fragment = $fragment;
+var jsxEscape = (value) => {
+  if (value === null || value === void 0 || typeof value === "boolean") {
+    return "";
+  }
+  if (typeof value === "number" || typeof value === "bigint") {
+    return String(value);
+  }
+  return escapeHTML(String(value));
+};
 var html = (raw, ...values) => [
   $html,
-  { innerHTML: String.raw({ raw }, ...values) },
+  { innerHTML: String.raw({ raw }, ...values.map(jsxEscape)) },
   $vnode
 ];
 Object.assign(globalThis, {
+  JSX,
   html,
   css: html,
   js: html