elit 2.0.1 → 3.0.1

package/dist/state.mjs

@@ -1 +1,992 @@
-var e=new class{constructor(){this.elementCache=new WeakMap,this.reactiveNodes=new Map}createElement(e,t={},r=[]){return{tagName:e,props:t,children:r}}renderToDOM(e,t){if(null==e||!1===e)return;if("object"!=typeof e)return void t.appendChild(document.createTextNode(String(e)));let{tagName:r,props:n,children:s}=e,i="svg"===r||"s"===r[0]&&"v"===r[1]&&"g"===r[2]||"http://www.w3.org/2000/svg"===t.namespaceURI,l=i?document.createElementNS("http://www.w3.org/2000/svg",r.replace("svg","").toLowerCase()||r):document.createElement(r);for(let e in n){let t=n[e];if(null==t||!1===t)continue;let r=e.charCodeAt(0);if(99===r&&(e.length<6||"N"===e[5])){let e=Array.isArray(t)?t.join(" "):t;i?l.setAttribute("class",e):l.className=e}else if(115===r&&5===e.length)if("string"==typeof t)l.style.cssText=t;else{let e=l.style;for(let r in t)e[r]=t[r]}else 111===r&&110===e.charCodeAt(1)?l[e.toLowerCase()]=t:100===r&&e.length>20?l.innerHTML=t.__html:114===r&&3===e.length?setTimeout(()=>{"function"==typeof t?t(l):t.current=l},0):l.setAttribute(e,!0===t?"":String(t))}let a=s.length;if(!a)return void t.appendChild(l);let o=e=>{for(let t=0;t<a;t++){let r=s[t];if(null!=r&&!1!==r)if(Array.isArray(r))for(let t=0,n=r.length;t<n;t++){let n=r[t];null!=n&&!1!==n&&this.renderToDOM(n,e)}else this.renderToDOM(r,e)}};if(a>30){let e=document.createDocumentFragment();o(e),l.appendChild(e)}else o(l);t.appendChild(l)}render(e,t){let r="string"==typeof e?document.getElementById(e.replace("#","")):e;if(!r)throw new Error(`Element not found: ${e}`);if(t.children&&t.children.length>500){let e=document.createDocumentFragment();this.renderToDOM(t,e),r.appendChild(e)}else this.renderToDOM(t,r);return r}batchRender(e,t){let r="string"==typeof e?document.getElementById(e.replace("#","")):e;if(!r)throw new Error(`Element not found: ${e}`);let n=t.length;if(n>3e3){let e=document.createDocumentFragment(),s=0,i=1500,l=()=>{let a=Math.min(s+i,n);for(let r=s;r<a;r++)this.renderToDOM(t[r],e);s=a,s>=n?r.appendChild(e):requestAnimationFrame(l)};l()}else{let e=document.createDocumentFragment();for(let r=0;r<n;r++)this.renderToDOM(t[r],e);r.appendChild(e)}return r}renderChunked(e,t,r=5e3,n){let s="string"==typeof e?document.getElementById(e.replace("#","")):e;if(!s)throw new Error(`Element not found: ${e}`);let i=t.length,l=0,a=()=>{let e=Math.min(l+r,i),o=document.createDocumentFragment();for(let r=l;r<e;r++)this.renderToDOM(t[r],o);s.appendChild(o),l=e,n&&n(l,i),l<i&&requestAnimationFrame(a)};return requestAnimationFrame(a),s}renderToHead(...e){let t=document.head;if(t)for(let r of e.flat())r&&this.renderToDOM(r,t);return t}addStyle(e){let t=document.createElement("style");return t.textContent=e,document.head.appendChild(t)}addMeta(e){let t=document.createElement("meta");for(let r in e)t.setAttribute(r,e[r]);return document.head.appendChild(t)}addLink(e){let t=document.createElement("link");for(let r in e)t.setAttribute(r,e[r]);return document.head.appendChild(t)}setTitle(e){return document.title=e}createState(e,t={}){let r=e,n=new Set,s=null,{throttle:i=0,deep:l=!1}=t,a=()=>n.forEach(e=>e(r));return{get value(){return r},set value(e){(l?JSON.stringify(r)!==JSON.stringify(e):r!==e)&&(r=e,i>0?s||(s=setTimeout(()=>{s=null,a()},i)):a())},subscribe:e=>(n.add(e),()=>n.delete(e)),destroy(){n.clear(),s&&clearTimeout(s)}}}computed(e,t){let r=e.map(e=>e.value),n=this.createState(t(...r));return e.forEach((e,s)=>{e.subscribe(e=>{r[s]=e,n.value=t(...r)})}),n}effect(e){e()}createVirtualList(e,t,r,n=50,s=5){let i=e.clientHeight,l=t.length*n,a=0,o=()=>{let{start:o,end:u}={start:Math.max(0,Math.floor(a/n)-s),end:Math.min(t.length,Math.ceil((a+i)/n)+s)},d=document.createElement("div");d.style.cssText=`height:${l}px;position:relative`;for(let e=o;e<u;e++){let s=document.createElement("div");s.style.cssText=`position:absolute;top:${e*n}px;height:${n}px;width:100%`,this.renderToDOM(r(t[e],e),s),d.appendChild(s)}e.innerHTML="",e.appendChild(d)},u=()=>{a=e.scrollTop,requestAnimationFrame(o)};return e.addEventListener("scroll",u),o(),{render:o,destroy:()=>{e.removeEventListener("scroll",u),e.innerHTML=""}}}lazy(e){let t=null,r=!1;return async(...n)=>(!t&&!r&&(r=!0,t=await e(),r=!1),t?t(...n):{tagName:"div",props:{class:"loading"},children:["Loading..."]})}cleanupUnusedElements(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),r=[];for(;t.nextNode();){let e=t.currentNode;e.id&&e.id.startsWith("r")&&!this.elementCache.has(e)&&r.push(e)}return r.forEach(e=>e.remove()),r.length}renderToString(e,t={}){let{pretty:r=!1,indent:n=0}=t,s=r?"  ".repeat(n):"",i=r?"\n":"",l=this.resolveStateValue(e);if(l=this.unwrapReactive(l),Array.isArray(l))return l.map(e=>this.renderToString(e,t)).join("");if("object"!=typeof l||null===l)return null==l||!1===l?"":this.escapeHtml(String(l));let{tagName:a,props:o,children:u}=l,d=this.isSelfClosingTag(a),c=`${s}<${a}`,h=this.propsToAttributes(o);if(h&&(c+=` ${h}`),d)return c+=` />${i}`,c;if(c+=">",o.dangerouslySetInnerHTML)return c+=o.dangerouslySetInnerHTML.__html,c+=`</${a}>${i}`,c;if(u&&u.length>0){let e=u.map(e=>{let t=this.resolveStateValue(e);return this.unwrapReactive(t)}),t=e.some(e=>"object"==typeof e&&null!==e&&!Array.isArray(e)&&"tagName"in e);if(r&&t){c+=i;for(let t of e)if(null!=t&&!1!==t)if(Array.isArray(t))for(let e of t)null!=e&&!1!==e&&(c+=this.renderToString(e,{pretty:r,indent:n+1}));else c+=this.renderToString(t,{pretty:r,indent:n+1});c+=s}else for(let t of e)if(null!=t&&!1!==t)if(Array.isArray(t))for(let e of t)null!=e&&!1!==e&&(c+=this.renderToString(e,{pretty:!1,indent:0}));else c+=this.renderToString(t,{pretty:!1,indent:0})}return c+=`</${a}>${i}`,c}resolveStateValue(e){return e&&"object"==typeof e&&"value"in e&&"subscribe"in e?e.value:e}isReactiveWrapper(e){return!(!e||"object"!=typeof e||!e.tagName)&&("span"===e.tagName&&e.props?.id&&"string"==typeof e.props.id&&e.props.id.match(/^r[a-z0-9]{9}$/))}unwrapReactive(e){if(!this.isReactiveWrapper(e))return e;let t=e.children;if(!t||0===t.length)return"";if(1===t.length){let e=t[0];if(e&&"object"==typeof e&&"span"===e.tagName){let t=e.props,r=!t||0===Object.keys(t).length,n=e.children&&1===e.children.length&&"string"==typeof e.children[0];if(r&&n)return e.children[0]}return this.unwrapReactive(e)}return t.map(e=>this.unwrapReactive(e))}escapeHtml(e){let t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;"};return e.replace(/[&<>"']/g,e=>t[e])}isSelfClosingTag(e){return new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]).has(e.toLowerCase())}propsToAttributes(e){let t=[];for(let r in e){if("children"===r||"dangerouslySetInnerHTML"===r||"ref"===r)continue;let n=e[r];if(n=this.resolveStateValue(n),null!=n&&!1!==n&&(!r.startsWith("on")||"function"!=typeof n)){if("className"===r||"class"===r){let e=Array.isArray(n)?n.join(" "):n;e&&t.push(`class="${this.escapeHtml(String(e))}"`);continue}if("style"===r){let e=this.styleToString(n);e&&t.push(`style="${this.escapeHtml(e)}"`);continue}if(!0===n){t.push(r);continue}t.push(`${r}="${this.escapeHtml(String(n))}"`)}}return t.join(" ")}styleToString(e){if("string"==typeof e)return e;if("object"==typeof e&&null!==e){let t=[];for(let r in e){let n=r.replace(/([A-Z])/g,"-$1").toLowerCase();t.push(`${n}:${e[r]}`)}return t.join(";")}return""}isState(e){return e&&"object"==typeof e&&"value"in e&&"subscribe"in e&&"function"==typeof e.subscribe}createReactiveChild(e,t){let r=t(e.value);if(typeof window<"u"&&typeof document<"u"){let r={node:null,renderFn:t};this.reactiveNodes.set(e,r),e.subscribe(()=>{if(r.node&&r.node.parentNode){let n=t(e.value);r.node.textContent=String(n??"")}})}return r}jsonToVNode(e){if(this.isState(e))return this.createReactiveChild(e,e=>e);if(null==e||"boolean"==typeof e||"string"==typeof e||"number"==typeof e)return e;let{tag:t,attributes:r={},children:n}=e,s={};for(let e in r){let t=r[e];"class"===e?s.className=this.isState(t)?t.value:t:s[e]=this.isState(t)?t.value:t}let i=[];if(null!=n)if(Array.isArray(n))for(let e of n)if(this.isState(e))i.push(this.createReactiveChild(e,e=>e));else{let t=this.jsonToVNode(e);null!=t&&!1!==t&&i.push(t)}else if(this.isState(n))i.push(this.createReactiveChild(n,e=>e));else if("object"==typeof n&&"tag"in n){let e=this.jsonToVNode(n);null!=e&&!1!==e&&i.push(e)}else i.push(n);return{tagName:t,props:s,children:i}}vNodeJsonToVNode(e){if(this.isState(e))return this.createReactiveChild(e,e=>e);if(null==e||"boolean"==typeof e||"string"==typeof e||"number"==typeof e)return e;let{tagName:t,props:r={},children:n=[]}=e,s={};for(let e in r){let t=r[e];s[e]=this.isState(t)?t.value:t}let i=[];for(let e of n)if(this.isState(e))i.push(this.createReactiveChild(e,e=>e));else{let t=this.vNodeJsonToVNode(e);null!=t&&!1!==t&&i.push(t)}return{tagName:t,props:s,children:i}}renderJson(e,t){let r=this.jsonToVNode(t);if(!r||"object"!=typeof r||!("tagName"in r))throw new Error("Invalid JSON structure");return this.render(e,r)}renderVNode(e,t){let r=this.vNodeJsonToVNode(t);if(!r||"object"!=typeof r||!("tagName"in r))throw new Error("Invalid VNode JSON structure");return this.render(e,r)}renderJsonToString(e,t={}){let r=this.jsonToVNode(e);return this.renderToString(r,t)}renderVNodeToString(e,t={}){let r=this.vNodeJsonToVNode(e);return this.renderToString(r,t)}renderServer(e){if("object"!=typeof e||null===e||!("tagName"in e))throw new Error("renderServer requires a VNode with html tag");if("html"!==e.tagName)throw new Error("renderServer requires a VNode with html tag as root");let t=e,r=null,n=null;for(let e of t.children||[])"object"==typeof e&&null!==e&&"tagName"in e&&("head"===e.tagName&&(r=e),"body"===e.tagName&&(n=e));if(t.props)for(let e in t.props){let r=t.props[e];null!=r&&!1!==r&&document.documentElement.setAttribute(e,String(r))}if(r){document.head.innerHTML="";for(let e of r.children||[])this.renderToDOM(e,document.head)}if(n){if(document.body.innerHTML="",n.props)for(let e in n.props){let t=n.props[e];null!=t&&!1!==t&&document.body.setAttribute(e,String(t))}for(let e of n.children||[])this.renderToDOM(e,document.body)}}renderToHTMLDocument(e,t={}){let{title:r="",meta:n=[],links:s=[],scripts:i=[],styles:l=[],lang:a="en",head:o="",bodyAttrs:u={},pretty:d=!1}=t,c=d?"\n":"",h=d?"  ":"",p=d?"    ":"",f=`<!DOCTYPE html>${c}<html lang="${a}">${c}${h}<head>${c}${p}<meta charset="UTF-8">${c}${p}<meta name="viewport" content="width=device-width, initial-scale=1.0">${c}`;r&&(f+=`${p}<title>${this.escapeHtml(r)}</title>${c}`);for(let e of n){f+=`${p}<meta`;for(let t in e)f+=` ${t}="${this.escapeHtml(e[t])}"`;f+=`>${c}`}for(let e of s){f+=`${p}<link`;for(let t in e)f+=` ${t}="${this.escapeHtml(e[t])}"`;f+=`>${c}`}for(let e of l)e.href?f+=`${p}<link rel="stylesheet" href="${this.escapeHtml(e.href)}">${c}`:e.content&&(f+=`${p}<style>${e.content}</style>${c}`);o&&(f+=o+c),f+=`${h}</head>${c}${h}<body`;for(let e in u)f+=` ${e}="${this.escapeHtml(u[e])}"`;f+=`>${c}`,f+=this.renderToString(e,{pretty:d,indent:2});for(let e of i)f+=`${p}<script`,e.type&&(f+=` type="${this.escapeHtml(e.type)}"`),e.async&&(f+=" async"),e.defer&&(f+=" defer"),e.src?f+=` src="${this.escapeHtml(e.src)}"><\/script>${c}`:e.content?f+=`>${e.content}<\/script>${c}`:f+=`><\/script>${c}`;return f+=`${h}</body>${c}</html>`,f}getElementCache(){return this.elementCache}},t=(t,r)=>e.createState(t,r),r=(t,r)=>e.computed(t,r),n=t=>e.effect(t),s=(t,r)=>e.batchRender(t,r),i=(t,r,n,s)=>e.renderChunked(t,r,n,s),l=(t,r,n,s,i)=>e.createVirtualList(t,r,n,s,i),a=t=>e.lazy(t),o=t=>e.cleanupUnusedElements(t),u=(e,t)=>{let r=null;return(...n)=>{r||(r=setTimeout(()=>{r=null,e(...n)},t))}},d=(e,t)=>{let r=null;return(...n)=>{r&&clearTimeout(r),r=setTimeout(()=>e(...n),t)}},c=class{constructor(e,r,n){this.key=e,this.wsUrl=n,this.ws=null,this.pendingUpdates=[],this.localState=t(r),this.previousValue=r,this.connect()}get value(){return this.localState.value}set value(e){this.previousValue=this.localState.value,this.localState.value=e,this.sendToServer(e)}get state(){return this.localState}onChange(e){return this.localState.subscribe(t=>{let r=this.previousValue;this.previousValue=t,e(t,r)})}update(e){this.value=e(this.value)}connect(){if(typeof window>"u")return;let e=this.wsUrl||`ws://${location.host}`;this.ws=new WebSocket(e),this.ws.addEventListener("open",()=>{for(this.subscribe();this.pendingUpdates.length>0;){let e=this.pendingUpdates.shift();this.sendToServer(e)}}),this.ws.addEventListener("message",e=>{this.handleMessage(e.data)}),this.ws.addEventListener("close",()=>{setTimeout(()=>this.connect(),1e3)}),this.ws.addEventListener("error",e=>{console.error("[SharedState] WebSocket error:",e)})}subscribe(){!this.ws||this.ws.readyState!==WebSocket.OPEN||this.ws.send(JSON.stringify({type:"state:subscribe",key:this.key}))}handleMessage(e){try{let t=JSON.parse(e);if(t.key!==this.key)return;("state:init"===t.type||"state:update"===t.type)&&(this.localState.value=t.value)}catch{}}sendToServer(e){if(this.ws){if(this.ws.readyState!==WebSocket.OPEN)return void this.pendingUpdates.push(e);this.ws.send(JSON.stringify({type:"state:change",key:this.key,value:e}))}}disconnect(){this.ws&&(this.ws.close(),this.ws=null)}destroy(){this.disconnect(),this.localState.destroy()}};function h(e,t,r){return new c(e,t,r)}var p=new class{constructor(){this.states=new Map}create(e,t,r){if(this.states.has(e))return this.states.get(e);let n=new c(e,t,r);return this.states.set(e,n),n}get(e){return this.states.get(e)}delete(e){let t=this.states.get(e);return!!t&&(t.destroy(),this.states.delete(e))}clear(){this.states.forEach(e=>e.destroy()),this.states.clear()}},f=(t,r)=>{let n=null,s=null,i=null,l=!0,a=r(t.value),o=a&&"object"==typeof a&&"tagName"in a,u=null==a||!1===a;t.subscribe(()=>{n&&cancelAnimationFrame(n),n=requestAnimationFrame(()=>{(()=>{if(!s&&!i)return;let n=r(t.value);if(null==n||!1===n)l&&s&&(i=document.createComment("reactive"),s.parentNode?.replaceChild(i,s),l=!1);else if(!l&&i&&s&&(i.parentNode?.replaceChild(s,i),i=null,l=!0),s){let t=document.createDocumentFragment();if(o&&n&&"object"==typeof n&&"tagName"in n){let{props:r,children:i}=n;for(let e in r){let t=r[e];if("ref"!==e)if("class"===e||"className"===e)s.className=Array.isArray(t)?t.join(" "):t||"";else if("style"===e&&"object"==typeof t){let e=s.style;for(let r in t)e[r]=t[r]}else e.startsWith("on")?s[e.toLowerCase()]=t:null!=t&&!1!==t?s.setAttribute(e,String(!0===t?"":t)):s.removeAttribute(e)}for(let r of i)e.renderToDOM(r,t)}else e.renderToDOM(n,t);s.textContent="",s.appendChild(t),e.getElementCache().set(s,!0)}})(),n=null})});let d=e=>{s=e,u&&e.parentNode&&(i=document.createComment("reactive"),e.parentNode.replaceChild(i,e),l=!1)};if(o){let e=a;return{tagName:e.tagName,props:{...e.props,ref:d},children:e.children}}return{tagName:"span",props:{ref:d},children:[a]}},m=(t,r,n,s={})=>{let i=null,l=null;return r.subscribe(()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(()=>{if(l){let t=document.createDocumentFragment(),s=n(r.value);null==s||!1===s?(l.style.display="none",l.textContent=""):(l.style.display="",e.renderToDOM(s,t),l.textContent="",l.appendChild(t)),e.getElementCache().set(l,!0)}i=null})}),{tagName:t,props:{...s,ref:e=>{l=e}},children:[n(r.value)]}},g=e=>e&&void 0!==e.value?f(e,e=>({tagName:"span",props:{},children:[String(e)]})):String(e),y=e=>({value:e.value,oninput:t=>{e.value=t.target.value}}),v=e=>({checked:e.value,onchange:t=>{e.value=t.target.checked}});export{c as SharedState,s as batchRender,v as bindChecked,y as bindValue,o as cleanupUnused,r as computed,h as createSharedState,t as createState,l as createVirtualList,d as debounce,n as effect,a as lazy,f as reactive,m as reactiveAs,i as renderChunked,p as sharedStateManager,g as text,u as throttle};
+// src/dom.ts
+function resolveElement(rootElement) {
+  return typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
+}
+function ensureElement(el, rootElement) {
+  if (!el) {
+    throw new Error(`Element not found: ${rootElement}`);
+  }
+  return el;
+}
+function shouldSkipChild(child) {
+  return child == null || child === false;
+}
+function isPrimitiveJson(json) {
+  return json == null || typeof json === "boolean" || typeof json === "string" || typeof json === "number";
+}
+var DomNode = class {
+  constructor() {
+    this.elementCache = /* @__PURE__ */ new WeakMap();
+    this.reactiveNodes = /* @__PURE__ */ new Map();
+  }
+  createElement(tagName, props = {}, children = []) {
+    return { tagName, props, children };
+  }
+  renderToDOM(vNode, parent) {
+    if (vNode == null || vNode === false) return;
+    if (typeof vNode !== "object") {
+      parent.appendChild(document.createTextNode(String(vNode)));
+      return;
+    }
+    const { tagName, props, children } = vNode;
+    const isSVG = tagName === "svg" || tagName[0] === "s" && tagName[1] === "v" && tagName[2] === "g" || parent.namespaceURI === "http://www.w3.org/2000/svg";
+    const el = isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tagName.replace("svg", "").toLowerCase() || tagName) : document.createElement(tagName);
+    for (const key in props) {
+      const value = props[key];
+      if (value == null || value === false) continue;
+      const c = key.charCodeAt(0);
+      if (c === 99 && (key.length < 6 || key[5] === "N")) {
+        const classValue = Array.isArray(value) ? value.join(" ") : value;
+        isSVG ? el.setAttribute("class", classValue) : el.className = classValue;
+      } else if (c === 115 && key.length === 5) {
+        if (typeof value === "string") {
+          el.style.cssText = value;
+        } else {
+          const s = el.style;
+          for (const k in value) s[k] = value[k];
+        }
+      } else if (c === 111 && key.charCodeAt(1) === 110) {
+        el[key.toLowerCase()] = value;
+      } else if (c === 100 && key.length > 20) {
+        el.innerHTML = value.__html;
+      } else if (c === 114 && key.length === 3) {
+        setTimeout(() => {
+          typeof value === "function" ? value(el) : value.current = el;
+        }, 0);
+      } else {
+        el.setAttribute(key, value === true ? "" : String(value));
+      }
+    }
+    const len = children.length;
+    if (!len) {
+      parent.appendChild(el);
+      return;
+    }
+    const renderChildren = (target) => {
+      for (let i = 0; i < len; i++) {
+        const child = children[i];
+        if (shouldSkipChild(child)) continue;
+        if (Array.isArray(child)) {
+          for (let j = 0, cLen = child.length; j < cLen; j++) {
+            const c = child[j];
+            !shouldSkipChild(c) && this.renderToDOM(c, target);
+          }
+        } else {
+          this.renderToDOM(child, target);
+        }
+      }
+    };
+    if (len > 30) {
+      const fragment = document.createDocumentFragment();
+      renderChildren(fragment);
+      el.appendChild(fragment);
+    } else {
+      renderChildren(el);
+    }
+    parent.appendChild(el);
+  }
+  render(rootElement, vNode) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    el.innerHTML = "";
+    if (vNode.children && vNode.children.length > 500) {
+      const fragment = document.createDocumentFragment();
+      this.renderToDOM(vNode, fragment);
+      el.appendChild(fragment);
+    } else {
+      this.renderToDOM(vNode, el);
+    }
+    return el;
+  }
+  batchRender(rootElement, vNodes) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    const len = vNodes.length;
+    if (len > 3e3) {
+      const fragment = document.createDocumentFragment();
+      let processed = 0;
+      const chunkSize = 1500;
+      const processChunk = () => {
+        const end = Math.min(processed + chunkSize, len);
+        for (let i = processed; i < end; i++) {
+          this.renderToDOM(vNodes[i], fragment);
+        }
+        processed = end;
+        if (processed >= len) {
+          el.appendChild(fragment);
+        } else {
+          requestAnimationFrame(processChunk);
+        }
+      };
+      processChunk();
+    } else {
+      const fragment = document.createDocumentFragment();
+      for (let i = 0; i < len; i++) {
+        this.renderToDOM(vNodes[i], fragment);
+      }
+      el.appendChild(fragment);
+    }
+    return el;
+  }
+  renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    const len = vNodes.length;
+    let index = 0;
+    const renderChunk = () => {
+      const end = Math.min(index + chunkSize, len);
+      const fragment = document.createDocumentFragment();
+      for (let i = index; i < end; i++) {
+        this.renderToDOM(vNodes[i], fragment);
+      }
+      el.appendChild(fragment);
+      index = end;
+      if (onProgress) onProgress(index, len);
+      if (index < len) {
+        requestAnimationFrame(renderChunk);
+      }
+    };
+    requestAnimationFrame(renderChunk);
+    return el;
+  }
+  renderToHead(...vNodes) {
+    const head = document.head;
+    if (head) {
+      for (const vNode of vNodes.flat()) {
+        vNode && this.renderToDOM(vNode, head);
+      }
+    }
+    return head;
+  }
+  addStyle(cssText) {
+    const el = document.createElement("style");
+    el.textContent = cssText;
+    return document.head.appendChild(el);
+  }
+  addMeta(attrs) {
+    const el = document.createElement("meta");
+    for (const k in attrs) el.setAttribute(k, attrs[k]);
+    return document.head.appendChild(el);
+  }
+  addLink(attrs) {
+    const el = document.createElement("link");
+    for (const k in attrs) el.setAttribute(k, attrs[k]);
+    return document.head.appendChild(el);
+  }
+  setTitle(text2) {
+    return document.title = text2;
+  }
+  // Reactive State Management
+  createState(initialValue, options = {}) {
+    let value = initialValue;
+    const listeners = /* @__PURE__ */ new Set();
+    let updateTimer = null;
+    const { throttle: throttle2 = 0, deep = false } = options;
+    const notify = () => listeners.forEach((fn) => fn(value));
+    const scheduleUpdate = () => {
+      if (throttle2 > 0) {
+        if (!updateTimer) {
+          updateTimer = setTimeout(() => {
+            updateTimer = null;
+            notify();
+          }, throttle2);
+        }
+      } else {
+        notify();
+      }
+    };
+    return {
+      get value() {
+        return value;
+      },
+      set value(newValue) {
+        const changed = deep ? JSON.stringify(value) !== JSON.stringify(newValue) : value !== newValue;
+        if (changed) {
+          value = newValue;
+          scheduleUpdate();
+        }
+      },
+      subscribe(fn) {
+        listeners.add(fn);
+        return () => listeners.delete(fn);
+      },
+      destroy() {
+        listeners.clear();
+        updateTimer && clearTimeout(updateTimer);
+      }
+    };
+  }
+  computed(states, computeFn) {
+    const values = states.map((s) => s.value);
+    const result = this.createState(computeFn(...values));
+    states.forEach((state, index) => {
+      state.subscribe((newValue) => {
+        values[index] = newValue;
+        result.value = computeFn(...values);
+      });
+    });
+    return result;
+  }
+  effect(stateFn) {
+    stateFn();
+  }
+  // Virtual scrolling helper for large lists
+  createVirtualList(container, items, renderItem, itemHeight = 50, bufferSize = 5) {
+    const viewportHeight = container.clientHeight;
+    const totalHeight = items.length * itemHeight;
+    let scrollTop = 0;
+    const getVisibleRange = () => {
+      const start = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize);
+      const end = Math.min(items.length, Math.ceil((scrollTop + viewportHeight) / itemHeight) + bufferSize);
+      return { start, end };
+    };
+    const render2 = () => {
+      const { start, end } = getVisibleRange();
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText = `height:${totalHeight}px;position:relative`;
+      for (let i = start; i < end; i++) {
+        const itemEl = document.createElement("div");
+        itemEl.style.cssText = `position:absolute;top:${i * itemHeight}px;height:${itemHeight}px;width:100%`;
+        this.renderToDOM(renderItem(items[i], i), itemEl);
+        wrapper.appendChild(itemEl);
+      }
+      container.innerHTML = "";
+      container.appendChild(wrapper);
+    };
+    const scrollHandler = () => {
+      scrollTop = container.scrollTop;
+      requestAnimationFrame(render2);
+    };
+    container.addEventListener("scroll", scrollHandler);
+    render2();
+    return {
+      render: render2,
+      destroy: () => {
+        container.removeEventListener("scroll", scrollHandler);
+        container.innerHTML = "";
+      }
+    };
+  }
+  // Lazy load components
+  lazy(loadFn) {
+    let component = null;
+    let loading = false;
+    return async (...args) => {
+      if (!component && !loading) {
+        loading = true;
+        component = await loadFn();
+        loading = false;
+      }
+      return component ? component(...args) : { tagName: "div", props: { class: "loading" }, children: ["Loading..."] };
+    };
+  }
+  // Memory management - cleanup unused elements
+  cleanupUnusedElements(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    const toRemove = [];
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      if (node.id && node.id.startsWith("r") && !this.elementCache.has(node)) {
+        toRemove.push(node);
+      }
+    }
+    toRemove.forEach((el) => el.remove());
+    return toRemove.length;
+  }
+  // Server-Side Rendering - convert VNode to HTML string
+  renderToString(vNode, options = {}) {
+    const { pretty = false, indent = 0 } = options;
+    const indentStr = pretty ? "  ".repeat(indent) : "";
+    const newLine = pretty ? "\n" : "";
+    let resolvedVNode = this.resolveStateValue(vNode);
+    resolvedVNode = this.unwrapReactive(resolvedVNode);
+    if (Array.isArray(resolvedVNode)) {
+      return resolvedVNode.map((child) => this.renderToString(child, options)).join("");
+    }
+    if (typeof resolvedVNode !== "object" || resolvedVNode === null) {
+      if (resolvedVNode === null || resolvedVNode === void 0 || resolvedVNode === false) {
+        return "";
+      }
+      return this.escapeHtml(String(resolvedVNode));
+    }
+    const { tagName, props, children } = resolvedVNode;
+    const isSelfClosing = this.isSelfClosingTag(tagName);
+    let html = `${indentStr}<${tagName}`;
+    const attrs = this.propsToAttributes(props);
+    if (attrs) {
+      html += ` ${attrs}`;
+    }
+    if (isSelfClosing) {
+      html += ` />${newLine}`;
+      return html;
+    }
+    html += ">";
+    if (props.dangerouslySetInnerHTML) {
+      html += props.dangerouslySetInnerHTML.__html;
+      html += `</${tagName}>${newLine}`;
+      return html;
+    }
+    if (children && children.length > 0) {
+      const resolvedChildren = children.map((c) => {
+        const resolved = this.resolveStateValue(c);
+        return this.unwrapReactive(resolved);
+      });
+      const hasComplexChildren = resolvedChildren.some(
+        (c) => typeof c === "object" && c !== null && !Array.isArray(c) && "tagName" in c
+      );
+      if (pretty && hasComplexChildren) {
+        html += newLine;
+        for (const child of resolvedChildren) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const c of child) {
+              if (!shouldSkipChild(c)) {
+                html += this.renderToString(c, { pretty, indent: indent + 1 });
+              }
+            }
+          } else {
+            html += this.renderToString(child, { pretty, indent: indent + 1 });
+          }
+        }
+        html += indentStr;
+      } else {
+        for (const child of resolvedChildren) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const c of child) {
+              if (!shouldSkipChild(c)) {
+                html += this.renderToString(c, { pretty: false, indent: 0 });
+              }
+            }
+          } else {
+            html += this.renderToString(child, { pretty: false, indent: 0 });
+          }
+        }
+      }
+    }
+    html += `</${tagName}>${newLine}`;
+    return html;
+  }
+  resolveStateValue(value) {
+    if (value && typeof value === "object" && "value" in value && "subscribe" in value) {
+      return value.value;
+    }
+    return value;
+  }
+  isReactiveWrapper(vNode) {
+    if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
+      return false;
+    }
+    return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && vNode.props.id.match(/^r[a-z0-9]{9}$/);
+  }
+  unwrapReactive(vNode) {
+    if (!this.isReactiveWrapper(vNode)) {
+      return vNode;
+    }
+    const children = vNode.children;
+    if (!children || children.length === 0) {
+      return "";
+    }
+    if (children.length === 1) {
+      const child = children[0];
+      if (child && typeof child === "object" && child.tagName === "span") {
+        const props = child.props;
+        const hasNoProps = !props || Object.keys(props).length === 0;
+        const hasSingleStringChild = child.children && child.children.length === 1 && typeof child.children[0] === "string";
+        if (hasNoProps && hasSingleStringChild) {
+          return child.children[0];
+        }
+      }
+      return this.unwrapReactive(child);
+    }
+    return children.map((c) => this.unwrapReactive(c));
+  }
+  escapeHtml(text2) {
+    const htmlEscapes = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#x27;"
+    };
+    return text2.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+  }
+  isSelfClosingTag(tagName) {
+    const selfClosingTags = /* @__PURE__ */ new Set([
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ]);
+    return selfClosingTags.has(tagName.toLowerCase());
+  }
+  propsToAttributes(props) {
+    const attrs = [];
+    for (const key in props) {
+      if (key === "children" || key === "dangerouslySetInnerHTML" || key === "ref") {
+        continue;
+      }
+      let value = props[key];
+      value = this.resolveStateValue(value);
+      if (value == null || value === false) continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        continue;
+      }
+      if (key === "className" || key === "class") {
+        const className = Array.isArray(value) ? value.join(" ") : value;
+        if (className) {
+          attrs.push(`class="${this.escapeHtml(String(className))}"`);
+        }
+        continue;
+      }
+      if (key === "style") {
+        const styleStr = this.styleToString(value);
+        if (styleStr) {
+          attrs.push(`style="${this.escapeHtml(styleStr)}"`);
+        }
+        continue;
+      }
+      if (value === true) {
+        attrs.push(key);
+        continue;
+      }
+      attrs.push(`${key}="${this.escapeHtml(String(value))}"`);
+    }
+    return attrs.join(" ");
+  }
+  styleToString(style) {
+    if (typeof style === "string") {
+      return style;
+    }
+    if (typeof style === "object" && style !== null) {
+      const styles = [];
+      for (const key in style) {
+        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        styles.push(`${cssKey}:${style[key]}`);
+      }
+      return styles.join(";");
+    }
+    return "";
+  }
+  isState(value) {
+    return value && typeof value === "object" && "value" in value && "subscribe" in value && typeof value.subscribe === "function";
+  }
+  createReactiveChild(state, renderFn) {
+    const currentValue = renderFn(state.value);
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      const entry = { node: null, renderFn };
+      this.reactiveNodes.set(state, entry);
+      state.subscribe(() => {
+        if (entry.node && entry.node.parentNode) {
+          const newValue = renderFn(state.value);
+          entry.node.textContent = String(newValue ?? "");
+        }
+      });
+    }
+    return currentValue;
+  }
+  jsonToVNode(json) {
+    if (this.isState(json)) {
+      return this.createReactiveChild(json, (v) => v);
+    }
+    if (isPrimitiveJson(json)) {
+      return json;
+    }
+    const { tag, attributes = {}, children } = json;
+    const props = {};
+    for (const key in attributes) {
+      const value = attributes[key];
+      if (key === "class") {
+        props.className = this.isState(value) ? value.value : value;
+      } else {
+        props[key] = this.isState(value) ? value.value : value;
+      }
+    }
+    const childrenArray = [];
+    if (children != null) {
+      if (Array.isArray(children)) {
+        for (const child of children) {
+          if (this.isState(child)) {
+            childrenArray.push(this.createReactiveChild(child, (v) => v));
+          } else {
+            const converted = this.jsonToVNode(child);
+            if (converted != null && converted !== false) {
+              childrenArray.push(converted);
+            }
+          }
+        }
+      } else if (this.isState(children)) {
+        childrenArray.push(this.createReactiveChild(children, (v) => v));
+      } else if (typeof children === "object" && "tag" in children) {
+        const converted = this.jsonToVNode(children);
+        if (converted != null && converted !== false) {
+          childrenArray.push(converted);
+        }
+      } else {
+        childrenArray.push(children);
+      }
+    }
+    return { tagName: tag, props, children: childrenArray };
+  }
+  vNodeJsonToVNode(json) {
+    if (this.isState(json)) {
+      return this.createReactiveChild(json, (v) => v);
+    }
+    if (isPrimitiveJson(json)) {
+      return json;
+    }
+    const { tagName, props = {}, children = [] } = json;
+    const resolvedProps = {};
+    for (const key in props) {
+      const value = props[key];
+      resolvedProps[key] = this.isState(value) ? value.value : value;
+    }
+    const childrenArray = [];
+    for (const child of children) {
+      if (this.isState(child)) {
+        childrenArray.push(this.createReactiveChild(child, (v) => v));
+      } else {
+        const converted = this.vNodeJsonToVNode(child);
+        if (converted != null && converted !== false) {
+          childrenArray.push(converted);
+        }
+      }
+    }
+    return { tagName, props: resolvedProps, children: childrenArray };
+  }
+  renderJson(rootElement, json) {
+    const vNode = this.jsonToVNode(json);
+    if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+      throw new Error("Invalid JSON structure");
+    }
+    return this.render(rootElement, vNode);
+  }
+  renderVNode(rootElement, json) {
+    const vNode = this.vNodeJsonToVNode(json);
+    if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+      throw new Error("Invalid VNode JSON structure");
+    }
+    return this.render(rootElement, vNode);
+  }
+  renderJsonToString(json, options = {}) {
+    const vNode = this.jsonToVNode(json);
+    return this.renderToString(vNode, options);
+  }
+  renderVNodeToString(json, options = {}) {
+    const vNode = this.vNodeJsonToVNode(json);
+    return this.renderToString(vNode, options);
+  }
+  // Generate complete HTML document as string (for SSR)
+  renderToHTMLDocument(vNode, options = {}) {
+    const { title = "", meta = [], links = [], scripts = [], styles = [], lang = "en", head = "", bodyAttrs = {}, pretty = false } = options;
+    const nl = pretty ? "\n" : "";
+    const indent = pretty ? "  " : "";
+    const indent2 = pretty ? "    " : "";
+    let html = `<!DOCTYPE html>${nl}<html lang="${lang}">${nl}${indent}<head>${nl}${indent2}<meta charset="UTF-8">${nl}${indent2}<meta name="viewport" content="width=device-width, initial-scale=1.0">${nl}`;
+    if (title) html += `${indent2}<title>${this.escapeHtml(title)}</title>${nl}`;
+    for (const m of meta) {
+      html += `${indent2}<meta`;
+      for (const k in m) html += ` ${k}="${this.escapeHtml(m[k])}"`;
+      html += `>${nl}`;
+    }
+    for (const l of links) {
+      html += `${indent2}<link`;
+      for (const k in l) html += ` ${k}="${this.escapeHtml(l[k])}"`;
+      html += `>${nl}`;
+    }
+    for (const s of styles) {
+      if (s.href) {
+        html += `${indent2}<link rel="stylesheet" href="${this.escapeHtml(s.href)}">${nl}`;
+      } else if (s.content) {
+        html += `${indent2}<style>${s.content}</style>${nl}`;
+      }
+    }
+    if (head) html += head + nl;
+    html += `${indent}</head>${nl}${indent}<body`;
+    for (const k in bodyAttrs) html += ` ${k}="${this.escapeHtml(bodyAttrs[k])}"`;
+    html += `>${nl}`;
+    html += this.renderToString(vNode, { pretty, indent: 2 });
+    for (const script of scripts) {
+      html += `${indent2}<script`;
+      if (script.type) html += ` type="${this.escapeHtml(script.type)}"`;
+      if (script.async) html += ` async`;
+      if (script.defer) html += ` defer`;
+      if (script.src) {
+        html += ` src="${this.escapeHtml(script.src)}"></script>${nl}`;
+      } else if (script.content) {
+        html += `>${script.content}</script>${nl}`;
+      } else {
+        html += `></script>${nl}`;
+      }
+    }
+    html += `${indent}</body>${nl}</html>`;
+    return html;
+  }
+  // Expose elementCache for reactive updates
+  getElementCache() {
+    return this.elementCache;
+  }
+};
+var dom = new DomNode();
+var render = dom.render.bind(dom);
+var renderToString = dom.renderToString.bind(dom);
+
+// src/state.ts
+var createState = (initial, options) => dom.createState(initial, options);
+var computed = (states, fn) => dom.computed(states, fn);
+var effect = (fn) => dom.effect(fn);
+var batchRender = (container, vNodes) => dom.batchRender(container, vNodes);
+var renderChunked = (container, vNodes, chunkSize, onProgress) => dom.renderChunked(container, vNodes, chunkSize, onProgress);
+var createVirtualList = (container, items, renderItem, itemHeight, bufferSize) => dom.createVirtualList(container, items, renderItem, itemHeight, bufferSize);
+var lazy = (loadFn) => dom.lazy(loadFn);
+var cleanupUnused = (root) => dom.cleanupUnusedElements(root);
+var throttle = (fn, delay) => {
+  let timer = null;
+  return (...args) => {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null;
+        fn(...args);
+      }, delay);
+    }
+  };
+};
+var debounce = (fn, delay) => {
+  let timer = null;
+  return (...args) => {
+    timer && clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  };
+};
+var SharedState = class {
+  constructor(key, defaultValue, wsUrl) {
+    this.key = key;
+    this.wsUrl = wsUrl;
+    this.ws = null;
+    this.pendingUpdates = [];
+    this.localState = createState(defaultValue);
+    this.previousValue = defaultValue;
+    this.connect();
+  }
+  /**
+   * Get current value
+   */
+  get value() {
+    return this.localState.value;
+  }
+  /**
+   * Set new value and sync to server
+   */
+  set value(newValue) {
+    this.previousValue = this.localState.value;
+    this.localState.value = newValue;
+    this.sendToServer(newValue);
+  }
+  /**
+   * Get the underlying Elit State (for reactive binding)
+   */
+  get state() {
+    return this.localState;
+  }
+  /**
+   * Subscribe to changes (returns Elit State for reactive)
+   */
+  onChange(callback) {
+    return this.localState.subscribe((newValue) => {
+      const oldValue = this.previousValue;
+      this.previousValue = newValue;
+      callback(newValue, oldValue);
+    });
+  }
+  /**
+   * Update value using a function
+   */
+  update(updater) {
+    this.value = updater(this.value);
+  }
+  /**
+   * Connect to WebSocket
+   */
+  connect() {
+    if (typeof window === "undefined") return;
+    const url = this.wsUrl || `ws://${location.host}`;
+    this.ws = new WebSocket(url);
+    this.ws.addEventListener("open", () => {
+      this.subscribe();
+      while (this.pendingUpdates.length > 0) {
+        const value = this.pendingUpdates.shift();
+        this.sendToServer(value);
+      }
+    });
+    this.ws.addEventListener("message", (event) => {
+      this.handleMessage(event.data);
+    });
+    this.ws.addEventListener("close", () => {
+      setTimeout(() => this.connect(), 1e3);
+    });
+    this.ws.addEventListener("error", (error) => {
+      console.error("[SharedState] WebSocket error:", error);
+    });
+  }
+  /**
+   * Subscribe to server state
+   */
+  subscribe() {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+    this.ws.send(JSON.stringify({
+      type: "state:subscribe",
+      key: this.key
+    }));
+  }
+  /**
+   * Handle message from server
+   */
+  handleMessage(data) {
+    try {
+      const msg = JSON.parse(data);
+      if (msg.key !== this.key) return;
+      if (msg.type === "state:init" || msg.type === "state:update") {
+        this.localState.value = msg.value;
+      }
+    } catch (error) {
+    }
+  }
+  /**
+   * Send value to server
+   */
+  sendToServer(value) {
+    if (!this.ws) return;
+    if (this.ws.readyState !== WebSocket.OPEN) {
+      this.pendingUpdates.push(value);
+      return;
+    }
+    this.ws.send(JSON.stringify({
+      type: "state:change",
+      key: this.key,
+      value
+    }));
+  }
+  /**
+   * Disconnect
+   */
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+  /**
+   * Destroy state and cleanup
+   */
+  destroy() {
+    this.disconnect();
+    this.localState.destroy();
+  }
+};
+function createSharedState(key, defaultValue, wsUrl) {
+  return new SharedState(key, defaultValue, wsUrl);
+}
+var SharedStateManager = class {
+  constructor() {
+    this.states = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Create or get a shared state
+   */
+  create(key, defaultValue, wsUrl) {
+    if (this.states.has(key)) {
+      return this.states.get(key);
+    }
+    const state = new SharedState(key, defaultValue, wsUrl);
+    this.states.set(key, state);
+    return state;
+  }
+  /**
+   * Get existing state
+   */
+  get(key) {
+    return this.states.get(key);
+  }
+  /**
+   * Delete a state
+   */
+  delete(key) {
+    const state = this.states.get(key);
+    if (state) {
+      state.destroy();
+      return this.states.delete(key);
+    }
+    return false;
+  }
+  /**
+   * Clear all states
+   */
+  clear() {
+    this.states.forEach((state) => state.destroy());
+    this.states.clear();
+  }
+};
+var sharedStateManager = new SharedStateManager();
+var scheduleRAFUpdate = (rafId, updateFn) => {
+  rafId && cancelAnimationFrame(rafId);
+  return requestAnimationFrame(() => {
+    updateFn();
+  });
+};
+var renderToFragment = (content, isVNode) => {
+  const fragment = document.createDocumentFragment();
+  if (isVNode && content && typeof content === "object" && "tagName" in content) {
+    const { children } = content;
+    for (const child of children) {
+      dom.renderToDOM(child, fragment);
+    }
+  } else {
+    dom.renderToDOM(content, fragment);
+  }
+  return fragment;
+};
+var updateElementProps = (element, props) => {
+  for (const key in props) {
+    const value = props[key];
+    if (key === "ref") continue;
+    if (key === "class" || key === "className") {
+      element.className = Array.isArray(value) ? value.join(" ") : value || "";
+    } else if (key === "style" && typeof value === "object") {
+      const s = element.style;
+      for (const k in value) s[k] = value[k];
+    } else if (key.startsWith("on")) {
+      element[key.toLowerCase()] = value;
+    } else if (value != null && value !== false) {
+      element.setAttribute(key, String(value === true ? "" : value));
+    } else {
+      element.removeAttribute(key);
+    }
+  }
+};
+var reactive = (state, renderFn) => {
+  let rafId = null;
+  let elementRef = null;
+  let placeholder = null;
+  let isInDOM = true;
+  const initialResult = renderFn(state.value);
+  const isVNodeResult = initialResult && typeof initialResult === "object" && "tagName" in initialResult;
+  const initialIsNull = initialResult == null || initialResult === false;
+  const updateElement = () => {
+    if (!elementRef && !placeholder) return;
+    const newResult = renderFn(state.value);
+    const resultIsNull = newResult == null || newResult === false;
+    if (resultIsNull) {
+      if (isInDOM && elementRef) {
+        placeholder = document.createComment("reactive");
+        elementRef.parentNode?.replaceChild(placeholder, elementRef);
+        isInDOM = false;
+      }
+    } else {
+      if (!isInDOM && placeholder && elementRef) {
+        placeholder.parentNode?.replaceChild(elementRef, placeholder);
+        placeholder = null;
+        isInDOM = true;
+      }
+      if (elementRef) {
+        const isCurrentVNode = !!(isVNodeResult && newResult && typeof newResult === "object" && "tagName" in newResult);
+        if (isCurrentVNode) {
+          const { props } = newResult;
+          updateElementProps(elementRef, props);
+        }
+        const fragment = renderToFragment(newResult, isCurrentVNode);
+        elementRef.textContent = "";
+        elementRef.appendChild(fragment);
+        dom.getElementCache().set(elementRef, true);
+      }
+    }
+  };
+  state.subscribe(() => {
+    rafId = scheduleRAFUpdate(rafId, () => {
+      updateElement();
+      rafId = null;
+    });
+  });
+  const refCallback = (el) => {
+    elementRef = el;
+    if (initialIsNull && el.parentNode) {
+      placeholder = document.createComment("reactive");
+      el.parentNode.replaceChild(placeholder, el);
+      isInDOM = false;
+    }
+  };
+  if (isVNodeResult) {
+    const vnode = initialResult;
+    return {
+      tagName: vnode.tagName,
+      props: { ...vnode.props, ref: refCallback },
+      children: vnode.children
+    };
+  }
+  return { tagName: "span", props: { ref: refCallback }, children: [initialResult] };
+};
+var reactiveAs = (tagName, state, renderFn, props = {}) => {
+  let rafId = null;
+  let elementRef = null;
+  state.subscribe(() => {
+    rafId = scheduleRAFUpdate(rafId, () => {
+      if (elementRef) {
+        const newResult = renderFn(state.value);
+        if (newResult == null || newResult === false) {
+          elementRef.style.display = "none";
+          elementRef.textContent = "";
+        } else {
+          elementRef.style.display = "";
+          const fragment = renderToFragment(newResult, false);
+          elementRef.textContent = "";
+          elementRef.appendChild(fragment);
+        }
+        dom.getElementCache().set(elementRef, true);
+      }
+      rafId = null;
+    });
+  });
+  const refCallback = (el) => {
+    elementRef = el;
+  };
+  return { tagName, props: { ...props, ref: refCallback }, children: [renderFn(state.value)] };
+};
+var text = (state) => state && state.value !== void 0 ? reactive(state, (v) => ({ tagName: "span", props: {}, children: [String(v)] })) : String(state);
+var bindValue = (state) => ({
+  value: state.value,
+  oninput: (e) => {
+    state.value = e.target.value;
+  }
+});
+var bindChecked = (state) => ({
+  checked: state.value,
+  onchange: (e) => {
+    state.value = e.target.checked;
+  }
+});
+export {
+  SharedState,
+  batchRender,
+  bindChecked,
+  bindValue,
+  cleanupUnused,
+  computed,
+  createSharedState,
+  createState,
+  createVirtualList,
+  debounce,
+  effect,
+  lazy,
+  reactive,
+  reactiveAs,
+  renderChunked,
+  sharedStateManager,
+  text,
+  throttle
+};