elit 3.6.6 → 3.6.7

package/dist/state.js

@@ -1,12 +1,16 @@
 "use strict";
 (() => {
-  // src/render-context.ts
+  // src/desktop/render-context/constants.ts
   var RUNTIME_TARGET_KEY = "__ELIT_RUNTIME_TARGET__";
   var CAPTURED_RENDER_KEY = "__ELIT_CAPTURED_RENDER__";
   var RUNTIME_TARGET_ENV = "ELIT_RUNTIME_TARGET";
+
+  // src/desktop/render-context/globals.ts
   function getGlobalRenderScope() {
     return globalThis;
   }
+
+  // src/desktop/render-context/runtime-target.ts
   function isRenderRuntimeTarget(value) {
     return value === "web" || value === "desktop" || value === "mobile" || value === "unknown";
   }
@@ -22,7 +26,8 @@
     if (typeof globalScope.createWindow === "function") {
       return "desktop";
     }
-    const argv = Array.isArray(globalScope.process?.argv) ? globalScope.process.argv.join(" ") : "";
+    const argvValues = globalScope.process?.argv;
+    const argv = Array.isArray(argvValues) ? argvValues.join(" ") : "";
     if (/\bdesktop\b/i.test(argv)) {
       return "desktop";
     }
@@ -31,6 +36,8 @@
     }
     return "unknown";
   }
+
+  // src/desktop/render-context/captured-render.ts
   function captureRenderedVNode(rootElement, vNode, target = detectRenderRuntimeTarget()) {
     const globalScope = getGlobalRenderScope();
     globalScope[RUNTIME_TARGET_KEY] = target;
@@ -41,7 +48,7 @@
     };
   }
 
-  // src/dom.ts
+  // src/client/dom/helpers.ts
   function resolveElement(rootElement) {
     return typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
   }
@@ -69,669 +76,788 @@
   function hasDocumentApi() {
     return typeof document !== "undefined";
   }
-  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;
-      }
-      if (this.isState(vNode)) {
-        const textNode = document.createTextNode(String(vNode.value ?? ""));
-        parent.appendChild(textNode);
-        vNode.subscribe((newValue) => {
-          textNode.textContent = String(newValue ?? "");
-        });
-        return;
-      }
-      if (Array.isArray(vNode)) {
-        for (const child of vNode) {
-          this.renderToDOM(child, parent);
+  function isState(value) {
+    return value && typeof value === "object" && "value" in value && "subscribe" in value && typeof value.subscribe === "function";
+  }
+
+  // src/client/dom/dom-render.ts
+  function isSvgElement(tagName, parent) {
+    return tagName === "svg" || tagName[0] === "s" && tagName[1] === "v" && tagName[2] === "g" || parent.namespaceURI === "http://www.w3.org/2000/svg";
+  }
+  function applyProps(el, props, textareaValue) {
+    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(" ") : String(value);
+        if (el instanceof SVGElement) {
+          el.setAttribute("class", classValue);
+        } else {
+          el.className = classValue;
         }
-        return;
-      }
-      const { tagName, props, children } = vNode;
-      const textareaValue = resolveTextareaValue(tagName, props);
-      if (!tagName) {
-        for (const child of children) {
-          if (shouldSkipChild(child)) continue;
-          if (Array.isArray(child)) {
-            for (const c of child) {
-              !shouldSkipChild(c) && this.renderToDOM(c, parent);
-            }
-          } else {
-            this.renderToDOM(child, parent);
+      } else if (c === 115 && key.length === 5) {
+        if (typeof value === "string") {
+          el.style.cssText = value;
+        } else {
+          const style = el.style;
+          for (const styleKey in value) {
+            style[styleKey] = value[styleKey];
           }
         }
-        return;
-      }
-      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 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 === "ref") {
+        setTimeout(() => {
+          if (typeof value === "function") {
+            value(el);
           } else {
-            const s = el.style;
-            for (const k in value) s[k] = value[k];
+            value.current = el;
           }
-        } 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 === "ref") {
-          setTimeout(() => {
-            typeof value === "function" ? value(el) : value.current = el;
-          }, 0);
-        } else if (textareaValue !== void 0 && key === "value") {
-          continue;
-        } else {
-          el.setAttribute(key, value === true ? "" : String(value));
-        }
-      }
-      const renderableChildren = textareaValue === void 0 ? children : [];
-      const len = renderableChildren.length;
-      if (!len) {
-        if (textareaValue !== void 0) {
-          el.value = textareaValue;
-        }
-        parent.appendChild(el);
-        return;
+        }, 0);
+      } else if (textareaValue !== void 0 && key === "value") {
+        continue;
+      } else {
+        el.setAttribute(key, value === true ? "" : String(value));
       }
-      const renderChildren = (target) => {
-        for (let i = 0; i < len; i++) {
-          const child = renderableChildren[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);
+    }
+  }
+  function renderChildren(children, target) {
+    const len = children.length;
+    for (let i = 0; i < len; i++) {
+      const child = children[i];
+      if (shouldSkipChild(child)) continue;
+      if (Array.isArray(child)) {
+        for (let j = 0, childLen = child.length; j < childLen; j++) {
+          const nestedChild = child[j];
+          if (!shouldSkipChild(nestedChild)) {
+            renderToDOM(nestedChild, target);
           }
         }
-      };
-      if (len > 30) {
-        const fragment = document.createDocumentFragment();
-        renderChildren(fragment);
-        el.appendChild(fragment);
       } else {
-        renderChildren(el);
+        renderToDOM(child, target);
       }
-      parent.appendChild(el);
     }
-    render(rootElement, vNode) {
-      if (!hasDocumentApi()) {
-        const runtimeTarget = detectRenderRuntimeTarget();
-        if (runtimeTarget === "desktop" || runtimeTarget === "mobile") {
-          captureRenderedVNode(rootElement, vNode, runtimeTarget);
-          return {};
-        }
-        throw new Error("render() requires a DOM or an Elit desktop/mobile runtime target.");
+  }
+  function renderToDOM(vNode, parent) {
+    if (vNode == null || vNode === false) return;
+    if (typeof vNode !== "object") {
+      parent.appendChild(document.createTextNode(String(vNode)));
+      return;
+    }
+    if (isState(vNode)) {
+      const textNode = document.createTextNode(String(vNode.value ?? ""));
+      parent.appendChild(textNode);
+      vNode.subscribe((newValue) => {
+        textNode.textContent = String(newValue ?? "");
+      });
+      return;
+    }
+    if (Array.isArray(vNode)) {
+      for (const child of vNode) {
+        renderToDOM(child, parent);
       }
-      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;
+    }
+    const { tagName, props, children } = vNode;
+    const textareaValue = resolveTextareaValue(tagName, props);
+    if (!tagName) {
+      renderChildren(children, parent);
+      return;
+    }
+    const el = isSvgElement(tagName, parent) ? document.createElementNS("http://www.w3.org/2000/svg", tagName.replace("svg", "").toLowerCase() || tagName) : document.createElement(tagName);
+    applyProps(el, props, textareaValue);
+    const renderableChildren = textareaValue === void 0 ? children : [];
+    if (!renderableChildren.length) {
+      if (textareaValue !== void 0) {
+        el.value = textareaValue;
       }
-      return el;
+      parent.appendChild(el);
+      return;
     }
-    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);
+    if (renderableChildren.length > 30) {
+      const fragment = document.createDocumentFragment();
+      renderChildren(renderableChildren, fragment);
+      el.appendChild(fragment);
+    } else {
+      renderChildren(renderableChildren, el);
+    }
+    parent.appendChild(el);
+  }
+  function render(rootElement, vNode) {
+    if (!hasDocumentApi()) {
+      const runtimeTarget = detectRenderRuntimeTarget();
+      if (runtimeTarget === "desktop" || runtimeTarget === "mobile") {
+        captureRenderedVNode(rootElement, vNode, runtimeTarget);
+        return {};
       }
-      return el;
+      throw new Error("render() requires a DOM or an Elit desktop/mobile runtime target.");
+    }
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    el.innerHTML = "";
+    if (vNode.children && vNode.children.length > 500) {
+      const fragment = document.createDocumentFragment();
+      renderToDOM(vNode, fragment);
+      el.appendChild(fragment);
+    } else {
+      renderToDOM(vNode, 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);
+    return el;
+  }
+  function 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++) {
+          renderToDOM(vNodes[i], fragment);
         }
-        el.appendChild(fragment);
-        index = end;
-        if (onProgress) onProgress(index, len);
-        if (index < len) {
-          requestAnimationFrame(renderChunk);
+        processed = end;
+        if (processed >= len) {
+          el.appendChild(fragment);
+        } else {
+          requestAnimationFrame(processChunk);
         }
       };
-      requestAnimationFrame(renderChunk);
-      return el;
+      processChunk();
+    } else {
+      const fragment = document.createDocumentFragment();
+      for (let i = 0; i < len; i++) {
+        renderToDOM(vNodes[i], fragment);
+      }
+      el.appendChild(fragment);
     }
-    renderToHead(...vNodes) {
-      const head = document.head;
-      if (head) {
-        for (const vNode of vNodes.flat()) {
-          vNode && this.renderToDOM(vNode, head);
+    return el;
+  }
+  function renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    const len = vNodes.length;
+    let index = 0;
+    const renderChunkFrame = () => {
+      const end = Math.min(index + chunkSize, len);
+      const fragment = document.createDocumentFragment();
+      for (let i = index; i < end; i++) {
+        renderToDOM(vNodes[i], fragment);
+      }
+      el.appendChild(fragment);
+      index = end;
+      if (onProgress) {
+        onProgress(index, len);
+      }
+      if (index < len) {
+        requestAnimationFrame(renderChunkFrame);
+      }
+    };
+    requestAnimationFrame(renderChunkFrame);
+    return el;
+  }
+  function renderToHead(...vNodes) {
+    const head = document.head;
+    if (head) {
+      for (const vNode of vNodes.flat()) {
+        if (vNode) {
+          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);
+    return head;
+  }
+  function addStyle(cssText) {
+    const el = document.createElement("style");
+    el.textContent = cssText;
+    return document.head.appendChild(el);
+  }
+  function addMeta(attrs) {
+    const el = document.createElement("meta");
+    for (const key in attrs) {
+      el.setAttribute(key, attrs[key]);
     }
-    addLink(attrs) {
-      const el = document.createElement("link");
-      for (const k in attrs) el.setAttribute(k, attrs[k]);
-      return document.head.appendChild(el);
+    return document.head.appendChild(el);
+  }
+  function addLink(attrs) {
+    const el = document.createElement("link");
+    for (const key in attrs) {
+      el.setAttribute(key, attrs[key]);
     }
-    setTitle(text2) {
-      return document.title = text2;
+    return document.head.appendChild(el);
+  }
+  function setTitle(text2) {
+    return document.title = text2;
+  }
+  function cleanupUnusedElements(root, elementCache) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    const toRemove = [];
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      if (node.id && node.id.startsWith("r") && !elementCache.has(node)) {
+        toRemove.push(node);
+      }
     }
-    // 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);
+    toRemove.forEach((el) => el.remove());
+    return toRemove.length;
+  }
+
+  // src/client/dom/reactive.ts
+  function createReactiveChild(state, reactiveNodes, renderFn) {
+    const currentValue = renderFn(state.value);
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      const entry = { node: null, renderFn };
+      reactiveNodes.set(state, entry);
+      state.subscribe(() => {
+        if (entry.node && entry.node.parentNode) {
+          const newValue = renderFn(state.value);
+          entry.node.textContent = String(newValue ?? "");
         }
-      };
-    }
-    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();
+    return currentValue;
+  }
+
+  // src/client/dom/string-render.ts
+  var SELF_CLOSING_TAGS = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  function resolveStateValue(value) {
+    return isState(value) ? value.value : value;
+  }
+  function isReactiveWrapper(vNode) {
+    if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
+      return false;
     }
-    // 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 = "";
-        }
-      };
+    return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && /^r[a-z0-9]{9}$/.test(vNode.props.id);
+  }
+  function unwrapReactive(vNode) {
+    if (!isReactiveWrapper(vNode)) {
+      return vNode;
     }
-    // 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..."] };
-      };
+    const children = vNode.children;
+    if (!children || children.length === 0) {
+      return "";
     }
-    // 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);
+    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];
         }
       }
-      toRemove.forEach((el) => el.remove());
-      return toRemove.length;
+      return unwrapReactive(child);
     }
-    // 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("");
+    return children.map((child) => unwrapReactive(child));
+  }
+  function escapeHtml(text2) {
+    const htmlEscapes = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#x27;"
+    };
+    return text2.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+  }
+  function isSelfClosingTag(tagName) {
+    return SELF_CLOSING_TAGS.has(tagName.toLowerCase());
+  }
+  function 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]}`);
       }
-      if (typeof resolvedVNode !== "object" || resolvedVNode === null) {
-        if (resolvedVNode === null || resolvedVNode === void 0 || resolvedVNode === false) {
-          return "";
-        }
-        return this.escapeHtml(String(resolvedVNode));
+      return styles.join(";");
+    }
+    return "";
+  }
+  function propsToAttributes(props, tagName) {
+    const attrs = [];
+    for (const key in props) {
+      if (key === "children" || key === "dangerouslySetInnerHTML" || key === "ref" || tagName === "textarea" && key === "value") {
+        continue;
+      }
+      let value = props[key];
+      value = resolveStateValue(value);
+      if (value == null || value === false) continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        continue;
       }
-      const { tagName, props, children } = resolvedVNode;
-      const textareaValue = resolveTextareaValue(tagName, props);
-      const isSelfClosing = this.isSelfClosingTag(tagName);
-      let html = `${indentStr}<${tagName}`;
-      const attrs = this.propsToAttributes(props, tagName);
-      if (attrs) {
-        html += ` ${attrs}`;
+      if (key === "className" || key === "class") {
+        const className = Array.isArray(value) ? value.join(" ") : value;
+        if (className) {
+          attrs.push(`class="${escapeHtml(String(className))}"`);
+        }
+        continue;
       }
-      if (isSelfClosing) {
-        html += ` />${newLine}`;
-        return html;
+      if (key === "style") {
+        const styleStr = styleToString(value);
+        if (styleStr) {
+          attrs.push(`style="${escapeHtml(styleStr)}"`);
+        }
+        continue;
       }
-      html += ">";
-      if (textareaValue !== void 0) {
-        html += this.escapeHtml(textareaValue);
-        html += `</${tagName}>${newLine}`;
-        return html;
+      if (value === true) {
+        attrs.push(key);
+        continue;
       }
-      if (props.dangerouslySetInnerHTML) {
-        html += props.dangerouslySetInnerHTML.__html;
-        html += `</${tagName}>${newLine}`;
-        return html;
+      attrs.push(`${key}="${escapeHtml(String(value))}"`);
+    }
+    return attrs.join(" ");
+  }
+  function renderToString(vNode, options = {}) {
+    const { pretty = false, indent = 0 } = options;
+    const indentStr = pretty ? "  ".repeat(indent) : "";
+    const newLine = pretty ? "\n" : "";
+    let resolvedVNode = resolveStateValue(vNode);
+    resolvedVNode = unwrapReactive(resolvedVNode);
+    if (Array.isArray(resolvedVNode)) {
+      return resolvedVNode.map((child) => renderToString(child, options)).join("");
+    }
+    if (typeof resolvedVNode !== "object" || resolvedVNode === null) {
+      if (resolvedVNode === null || resolvedVNode === void 0 || resolvedVNode === false) {
+        return "";
       }
-      const isRawText = tagName === "script" || tagName === "style";
-      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 += isRawText && typeof c === "string" ? c : this.renderToString(c, { pretty, indent: indent + 1 });
-                }
+      return escapeHtml(String(resolvedVNode));
+    }
+    const { tagName, props, children } = resolvedVNode;
+    const textareaValue = resolveTextareaValue(tagName, props);
+    const selfClosing = isSelfClosingTag(tagName);
+    let html = `${indentStr}<${tagName}`;
+    const attrs = propsToAttributes(props, tagName);
+    if (attrs) {
+      html += ` ${attrs}`;
+    }
+    if (selfClosing) {
+      html += ` />${newLine}`;
+      return html;
+    }
+    html += ">";
+    if (textareaValue !== void 0) {
+      html += escapeHtml(textareaValue);
+      html += `</${tagName}>${newLine}`;
+      return html;
+    }
+    if (props.dangerouslySetInnerHTML) {
+      html += props.dangerouslySetInnerHTML.__html;
+      html += `</${tagName}>${newLine}`;
+      return html;
+    }
+    const isRawText = tagName === "script" || tagName === "style";
+    if (children && children.length > 0) {
+      const resolvedChildren = children.map((child) => unwrapReactive(resolveStateValue(child)));
+      const hasComplexChildren = resolvedChildren.some(
+        (child) => typeof child === "object" && child !== null && !Array.isArray(child) && "tagName" in child
+      );
+      if (pretty && hasComplexChildren) {
+        html += newLine;
+        for (const child of resolvedChildren) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const nestedChild of child) {
+              if (!shouldSkipChild(nestedChild)) {
+                html += isRawText && typeof nestedChild === "string" ? nestedChild : renderToString(nestedChild, { pretty, indent: indent + 1 });
               }
-            } else {
-              html += isRawText && typeof child === "string" ? child : this.renderToString(child, { pretty, indent: indent + 1 });
             }
+          } else {
+            html += isRawText && typeof child === "string" ? child : 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 += isRawText && typeof c === "string" ? c : this.renderToString(c, { pretty: false, indent: 0 });
-                }
+        }
+        html += indentStr;
+      } else {
+        for (const child of resolvedChildren) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const nestedChild of child) {
+              if (!shouldSkipChild(nestedChild)) {
+                html += isRawText && typeof nestedChild === "string" ? nestedChild : renderToString(nestedChild, { pretty: false, indent: 0 });
               }
-            } else {
-              html += isRawText && typeof child === "string" ? child : this.renderToString(child, { pretty: false, indent: 0 });
             }
+          } else {
+            html += isRawText && typeof child === "string" ? child : 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;
+    html += `</${tagName}>${newLine}`;
+    return html;
+  }
+  function 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>${escapeHtml(title)}</title>${nl}`;
+    }
+    for (const metaAttrs of meta) {
+      html += `${indent2}<meta`;
+      for (const key in metaAttrs) {
+        html += ` ${key}="${escapeHtml(metaAttrs[key])}"`;
       }
-      return value;
+      html += `>${nl}`;
     }
-    isReactiveWrapper(vNode) {
-      if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
-        return false;
+    for (const linkAttrs of links) {
+      html += `${indent2}<link`;
+      for (const key in linkAttrs) {
+        html += ` ${key}="${escapeHtml(linkAttrs[key])}"`;
       }
-      return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && vNode.props.id.match(/^r[a-z0-9]{9}$/);
+      html += `>${nl}`;
     }
-    unwrapReactive(vNode) {
-      if (!this.isReactiveWrapper(vNode)) {
-        return vNode;
+    for (const style of styles) {
+      if (style.href) {
+        html += `${indent2}<link rel="stylesheet" href="${escapeHtml(style.href)}">${nl}`;
+      } else if (style.content) {
+        html += `${indent2}<style>${style.content}</style>${nl}`;
       }
-      const children = vNode.children;
-      if (!children || children.length === 0) {
-        return "";
+    }
+    if (head) {
+      html += head + nl;
+    }
+    html += `${indent}</head>${nl}${indent}<body`;
+    for (const key in bodyAttrs) {
+      html += ` ${key}="${escapeHtml(bodyAttrs[key])}"`;
+    }
+    html += `>${nl}`;
+    html += renderToString(vNode, { pretty, indent: 2 });
+    for (const script of scripts) {
+      html += `${indent2}<script`;
+      if (script.type) {
+        html += ` type="${escapeHtml(script.type)}"`;
       }
-      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);
+      if (script.async) {
+        html += " async";
       }
-      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, tagName) {
-      const attrs = [];
-      for (const key in props) {
-        if (key === "children" || key === "dangerouslySetInnerHTML" || key === "ref" || tagName === "textarea" && key === "value") {
-          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)}"`);
+      if (script.defer) {
+        html += " defer";
+      }
+      if (script.src) {
+        html += ` src="${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;
+  }
+
+  // src/client/dom/json.ts
+  function jsonToVNode(json, reactiveNodes) {
+    if (isState(json)) {
+      return createReactiveChild(json, reactiveNodes, (value) => value);
+    }
+    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 = isState(value) ? value.value : value;
+      } else {
+        props[key] = isState(value) ? value.value : value;
+      }
+    }
+    const childrenArray = [];
+    if (children != null) {
+      if (Array.isArray(children)) {
+        for (const child of children) {
+          if (isState(child)) {
+            childrenArray.push(createReactiveChild(child, reactiveNodes, (value) => value));
+          } else {
+            const converted = jsonToVNode(child, reactiveNodes);
+            if (converted != null && converted !== false) {
+              childrenArray.push(converted);
+            }
           }
-          continue;
         }
-        if (value === true) {
-          attrs.push(key);
-          continue;
+      } else if (isState(children)) {
+        childrenArray.push(createReactiveChild(children, reactiveNodes, (value) => value));
+      } else if (typeof children === "object" && children !== null && "tag" in children) {
+        const converted = jsonToVNode(children, reactiveNodes);
+        if (converted != null && converted !== false) {
+          childrenArray.push(converted);
         }
-        attrs.push(`${key}="${this.escapeHtml(String(value))}"`);
+      } else {
+        childrenArray.push(children);
       }
-      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 { tagName: tag, props, children: childrenArray };
+  }
+  function vNodeJsonToVNode(json, reactiveNodes) {
+    if (isState(json)) {
+      return createReactiveChild(json, reactiveNodes, (value) => value);
+    }
+    if (isPrimitiveJson(json)) {
+      return json;
+    }
+    const { tagName, props = {}, children = [] } = json;
+    const resolvedProps = {};
+    for (const key in props) {
+      const value = props[key];
+      resolvedProps[key] = isState(value) ? value.value : value;
+    }
+    const childrenArray = [];
+    for (const child of children) {
+      if (isState(child)) {
+        childrenArray.push(createReactiveChild(child, reactiveNodes, (value) => value));
+      } else {
+        const converted = vNodeJsonToVNode(child, reactiveNodes);
+        if (converted != null && converted !== false) {
+          childrenArray.push(converted);
         }
-        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;
+    return { tagName, props: resolvedProps, children: childrenArray };
+  }
+  function renderJson(rootElement, json, reactiveNodes) {
+    const vNode = jsonToVNode(json, reactiveNodes);
+    if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+      throw new Error("Invalid JSON structure");
     }
-    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;
+    return render(rootElement, vNode);
+  }
+  function renderVNode(rootElement, json, reactiveNodes) {
+    const vNode = vNodeJsonToVNode(json, reactiveNodes);
+    if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+      throw new Error("Invalid VNode JSON structure");
+    }
+    return render(rootElement, vNode);
+  }
+  function renderJsonToString(json, reactiveNodes, options = {}) {
+    const vNode = jsonToVNode(json, reactiveNodes);
+    return renderToString(vNode, options);
+  }
+  function renderVNodeToString(json, reactiveNodes, options = {}) {
+    const vNode = vNodeJsonToVNode(json, reactiveNodes);
+    return renderToString(vNode, options);
+  }
+
+  // src/client/dom/state-utils.ts
+  function 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((listener) => listener(value));
+    const scheduleUpdate = () => {
+      if (throttle2 > 0) {
+        if (!updateTimer) {
+          updateTimer = setTimeout(() => {
+            updateTimer = null;
+            notify();
+          }, throttle2);
         }
+      } else {
+        notify();
       }
-      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 {
+      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();
+        if (updateTimer) {
+          clearTimeout(updateTimer);
         }
       }
-      return { tagName: tag, props, children: childrenArray };
-    }
-    vNodeJsonToVNode(json) {
-      if (this.isState(json)) {
-        return this.createReactiveChild(json, (v) => v);
-      }
-      if (isPrimitiveJson(json)) {
-        return json;
+    };
+  }
+  function computed(states, computeFn) {
+    const values = states.map((state) => state.value);
+    const result = createState(computeFn(...values));
+    states.forEach((state, index) => {
+      state.subscribe((newValue) => {
+        values[index] = newValue;
+        result.value = computeFn(...values);
+      });
+    });
+    return result;
+  }
+  function effect(stateFn) {
+    stateFn();
+  }
+  function 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 render3 = () => {
+      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%`;
+        renderToDOM(renderItem(items[i], i), itemEl);
+        wrapper.appendChild(itemEl);
       }
-      const { tagName, props = {}, children = [] } = json;
-      const resolvedProps = {};
-      for (const key in props) {
-        const value = props[key];
-        resolvedProps[key] = this.isState(value) ? value.value : value;
+      container.innerHTML = "";
+      container.appendChild(wrapper);
+    };
+    const scrollHandler = () => {
+      scrollTop = container.scrollTop;
+      requestAnimationFrame(render3);
+    };
+    container.addEventListener("scroll", scrollHandler);
+    render3();
+    return {
+      render: render3,
+      destroy: () => {
+        container.removeEventListener("scroll", scrollHandler);
+        container.innerHTML = "";
       }
-      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);
-          }
-        }
+    };
+  }
+  function lazy(loadFn) {
+    let component = null;
+    let loading = false;
+    return async (...args) => {
+      if (!component && !loading) {
+        loading = true;
+        component = await loadFn();
+        loading = false;
       }
-      return { tagName, props: resolvedProps, children: childrenArray };
+      return component ? component(...args) : { tagName: "div", props: { class: "loading" }, children: ["Loading..."] };
+    };
+  }
+
+  // src/client/dom/index.ts
+  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) {
+      return renderToDOM(vNode, parent);
+    }
+    render(rootElement, vNode) {
+      return render(rootElement, vNode);
+    }
+    batchRender(rootElement, vNodes) {
+      return batchRender(rootElement, vNodes);
+    }
+    renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+      return renderChunked(rootElement, vNodes, chunkSize, onProgress);
+    }
+    renderToHead(...vNodes) {
+      return renderToHead(...vNodes);
+    }
+    addStyle(cssText) {
+      return addStyle(cssText);
+    }
+    addMeta(attrs) {
+      return addMeta(attrs);
+    }
+    addLink(attrs) {
+      return addLink(attrs);
+    }
+    setTitle(text2) {
+      return setTitle(text2);
+    }
+    // Reactive State Management
+    createState(initialValue, options = {}) {
+      return createState(initialValue, options);
+    }
+    computed(states, computeFn) {
+      return computed(states, computeFn);
+    }
+    effect(stateFn) {
+      effect(stateFn);
+    }
+    // Virtual scrolling helper for large lists
+    createVirtualList(container, items, renderItem, itemHeight = 50, bufferSize = 5) {
+      return createVirtualList(container, items, renderItem, itemHeight, bufferSize);
+    }
+    // Lazy load components
+    lazy(loadFn) {
+      return lazy(loadFn);
+    }
+    // Memory management - cleanup unused elements
+    cleanupUnusedElements(root) {
+      return cleanupUnusedElements(root, this.elementCache);
+    }
+    // Server-Side Rendering - convert VNode to HTML string
+    renderToString(vNode, options = {}) {
+      return renderToString(vNode, options);
+    }
+    jsonToVNode(json) {
+      return jsonToVNode(json, this.reactiveNodes);
+    }
+    vNodeJsonToVNode(json) {
+      return vNodeJsonToVNode(json, this.reactiveNodes);
     }
     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);
+      return renderJson(rootElement, json, this.reactiveNodes);
     }
     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);
+      return renderVNode(rootElement, json, this.reactiveNodes);
     }
     renderJsonToString(json, options = {}) {
-      const vNode = this.jsonToVNode(json);
-      return this.renderToString(vNode, options);
+      return renderJsonToString(json, this.reactiveNodes, options);
     }
     renderVNodeToString(json, options = {}) {
-      const vNode = this.vNodeJsonToVNode(json);
-      return this.renderToString(vNode, options);
+      return renderVNodeToString(json, this.reactiveNodes, 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;
+      return renderToHTMLDocument(vNode, options);
     }
     // Expose elementCache for reactive updates
     getElementCache() {
@@ -739,20 +865,20 @@
     }
   };
   var dom = new DomNode();
-  var render = dom.render.bind(dom);
-  var renderToString = dom.renderToString.bind(dom);
+  var render2 = dom.render.bind(dom);
+  var renderToString2 = dom.renderToString.bind(dom);
 
-  // src/state.ts
-  var ELIT_NATIVE_BINDING = /* @__PURE__ */ Symbol.for("elit.native.binding");
-  var ELIT_INTERNAL_WS_PATH = "/__elit_ws";
-  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);
+  // src/client/state/core.ts
+  var createState2 = (initial, options) => dom.createState(initial, options);
+  var computed2 = (states, fn) => dom.computed(states, fn);
+  var effect2 = (fn) => dom.effect(fn);
+  var batchRender2 = (container, vNodes) => dom.batchRender(container, vNodes);
+  var renderChunked2 = (container, vNodes, chunkSize, onProgress) => dom.renderChunked(container, vNodes, chunkSize, onProgress);
+  var createVirtualList2 = (container, items, renderItem, itemHeight, bufferSize) => dom.createVirtualList(container, items, renderItem, itemHeight, bufferSize);
+  var lazy2 = (loadFn) => dom.lazy(loadFn);
   var cleanupUnused = (root) => dom.cleanupUnusedElements(root);
+
+  // src/client/state/timing.ts
   var throttle = (fn, delay) => {
     let timer = null;
     return (...args) => {
@@ -767,10 +893,15 @@
   var debounce = (fn, delay) => {
     let timer = null;
     return (...args) => {
-      timer && clearTimeout(timer);
+      if (timer) {
+        clearTimeout(timer);
+      }
       timer = setTimeout(() => fn(...args), delay);
     };
   };
+
+  // src/client/state/bindings.ts
+  var ELIT_NATIVE_BINDING = /* @__PURE__ */ Symbol.for("elit.native.binding");
   function bindValue(state) {
     const props = {
       value: state.value,
@@ -810,6 +941,9 @@
     };
     return props;
   }
+
+  // src/client/state/shared-state.ts
+  var ELIT_INTERNAL_WS_PATH = "/__elit_ws";
   function resolveSharedStateWebSocketUrl(wsUrl) {
     const protocol = typeof location !== "undefined" && location.protocol === "https:" ? "wss:" : "ws:";
     const origin = typeof location !== "undefined" ? `${protocol}//${location.host}` : `${protocol}//localhost`;
@@ -834,33 +968,21 @@
       this.wsUrl = wsUrl;
       this.ws = null;
       this.pendingUpdates = [];
-      this.localState = createState(defaultValue);
+      this.localState = createState2(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;
@@ -868,17 +990,13 @@
         callback(newValue, oldValue);
       });
     }
-    /**
-     * Update value using a function
-     */
     update(updater) {
       this.value = updater(this.value);
     }
-    /**
-     * Connect to WebSocket
-     */
     connect() {
-      if (typeof window === "undefined") return;
+      if (typeof window === "undefined") {
+        return;
+      }
       const url = resolveSharedStateWebSocketUrl(this.wsUrl);
       this.ws = new WebSocket(url);
       this.ws.addEventListener("open", () => {
@@ -898,34 +1016,31 @@
         console.error("[SharedState] WebSocket error:", error);
       });
     }
-    /**
-     * Subscribe to server state
-     */
     subscribe() {
-      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+      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.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) {
+        return;
+      }
       if (this.ws.readyState !== WebSocket.OPEN) {
         this.pendingUpdates.push(value);
         return;
@@ -936,18 +1051,12 @@
         value
       }));
     }
-    /**
-     * Disconnect
-     */
     disconnect() {
       if (this.ws) {
         this.ws.close();
         this.ws = null;
       }
     }
-    /**
-     * Destroy state and cleanup
-     */
     destroy() {
       this.disconnect();
       this.localState.destroy();
@@ -960,9 +1069,6 @@
     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);
@@ -971,15 +1077,9 @@
       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) {
@@ -988,17 +1088,18 @@
       }
       return false;
     }
-    /**
-     * Clear all states
-     */
     clear() {
       this.states.forEach((state) => state.destroy());
       this.states.clear();
     }
   };
   var sharedStateManager = new SharedStateManager();
+
+  // src/client/state/reactive-utils.ts
   var scheduleRAFUpdate = (rafId, updateFn) => {
-    rafId && cancelAnimationFrame(rafId);
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
     return requestAnimationFrame(() => {
       updateFn();
     });
@@ -1022,12 +1123,16 @@
   var updateElementProps = (element, props) => {
     for (const key in props) {
       const value = props[key];
-      if (key === "ref") continue;
+      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];
+        const style = element.style;
+        for (const styleKey in value) {
+          style[styleKey] = value[styleKey];
+        }
       } else if (key.startsWith("on")) {
         element[key.toLowerCase()] = value;
       } else if (value != null && value !== false) {
@@ -1037,6 +1142,8 @@
       }
     }
   };
+
+  // src/client/state/reactive.ts
   var reactive = (state, renderFn) => {
     let rafId = null;
     let elementRef = null;
@@ -1046,7 +1153,9 @@
     const isVNodeResult = initialResult && typeof initialResult === "object" && "tagName" in initialResult;
     const initialIsNull = initialResult == null || initialResult === false;
     const updateElement = () => {
-      if (!elementRef && !placeholder) return;
+      if (!elementRef && !placeholder) {
+        return;
+      }
       const newResult = renderFn(state.value);
       const resultIsNull = newResult == null || newResult === false;
       if (resultIsNull) {
@@ -1127,5 +1236,5 @@
     const initialChildren = Array.isArray(initialResult) ? initialResult : [initialResult];
     return { tagName, props: { ...props, ref: refCallback }, children: initialChildren };
   };
-  var text = (state) => state && state.value !== void 0 ? reactive(state, (v) => ({ tagName: "span", props: {}, children: [String(v)] })) : String(state);
+  var text = (state) => state && state.value !== void 0 ? reactive(state, (value) => ({ tagName: "span", props: {}, children: [String(value)] })) : String(state);
 })();