sinwan 0.1.0 → 1.0.0

package/dist/cjs/index.development.js

@@ -87,22 +87,12 @@ function buildElement(type, props, children) {
   if (type === Fragment) {
     return { tag: "", props: {}, children };
   }
-  if (typeof type === "function") {
-    if (type._SinwanComponent || type._SinwanPage) {
-      const result2 = type(props);
-      if (result2 && typeof result2 === "object" && "tag" in result2) {
-        return result2;
-      }
-      return { tag: "", props: {}, children: normalizeChildren(result2) };
-    }
-    const result = type(props);
-    if (result && typeof result === "object" && "tag" in result) {
-      return result;
+  if (typeof type === "function" || typeof type === "string") {
+    const finalProps = props ?? {};
+    if (children.length > 0 && finalProps.children === undefined) {
+      finalProps.children = children.length === 1 ? children[0] : children;
     }
-    return { tag: "", props: {}, children: normalizeChildren(result) };
-  }
-  if (typeof type === "string") {
-    return { tag: type, props: props || {}, children };
+    return { tag: type, props: finalProps, children };
   }
   return { tag: "", props: {}, children };
 }
@@ -122,399 +112,217 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   return element;
 }
 
-// src/server/index.ts
-var exports_server = {};
-__export(exports_server, {
-  streamPage: () => streamPage,
-  renderToString: () => renderToString,
-  renderToHydratableString: () => renderToHydratableString,
-  renderPage: () => renderPage,
-  renderNodeToHydratableString: () => renderNodeToHydratableString,
-  registerPage: () => registerPage,
-  isSlots: () => isSlots,
-  hasPage: () => hasPage,
-  getPage: () => getPage
+// src/renderer/index.ts
+var exports_renderer = {};
+__export(exports_renderer, {
+  unmountNode: () => unmountNode,
+  toEventName: () => toEventName,
+  setDOMOps: () => setDOMOps,
+  resetDOMOps: () => resetDOMOps,
+  renderNodeToDOM: () => renderNodeToDOM,
+  renderElementToDOM: () => renderElementToDOM,
+  renderChildrenToDOM: () => renderChildrenToDOM,
+  render: () => render,
+  mount: () => mount,
+  isEventProp: () => isEventProp,
+  domOps: () => domOps,
+  bindEvents: () => bindEvents,
+  bindEvent: () => bindEvent,
+  applyAttributes: () => applyAttributes
 });
-module.exports = __toCommonJS(exports_server);
+module.exports = __toCommonJS(exports_renderer);
 
-// src/escaper.ts
-var _bun = globalThis.Bun;
-var _nativeEscape = typeof _bun?.escapeHTML === "function" ? _bun.escapeHTML.bind(_bun) : undefined;
-var HTML_ESCAPE_RE = /[&<>"']/g;
-var HTML_ESCAPE_MAP = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;"
-};
-function portableEscape(str) {
-  HTML_ESCAPE_RE.lastIndex = 0;
-  if (!HTML_ESCAPE_RE.test(str))
-    return str;
-  return str.replace(HTML_ESCAPE_RE, (c) => HTML_ESCAPE_MAP[c]);
-}
-function escapeHtml(value) {
-  if (value == null || typeof value === "boolean")
-    return "";
-  if (typeof value === "number")
-    return String(value);
-  if (value instanceof HtmlEscapedString)
-    return value.value;
-  const s = String(value);
-  return _nativeEscape ? _nativeEscape(s) : portableEscape(s);
+// src/renderer/dom-ops.ts
+function createDefaultDOMOps() {
+  return {
+    createElement(tag) {
+      return document.createElement(tag);
+    },
+    createElementNS(namespace, tag) {
+      return document.createElementNS(namespace, tag);
+    },
+    createTextNode(text) {
+      return document.createTextNode(text);
+    },
+    createComment(text) {
+      return document.createComment(text);
+    },
+    setAttribute(el, key, value) {
+      el.setAttribute(key, value);
+    },
+    removeAttribute(el, key) {
+      el.removeAttribute(key);
+    },
+    setProperty(el, key, value) {
+      el[key] = value;
+    },
+    insertBefore(parent, child, anchor) {
+      parent.insertBefore(child, anchor);
+    },
+    appendChild(parent, child) {
+      parent.appendChild(child);
+    },
+    remove(node) {
+      node.parentNode?.removeChild(node);
+    },
+    setTextContent(node, text) {
+      node.data = text;
+    },
+    addEventListener(el, event, handler) {
+      el.addEventListener(event, handler);
+    },
+    removeEventListener(el, event, handler) {
+      el.removeEventListener(event, handler);
+    },
+    parentNode(node) {
+      return node.parentNode;
+    },
+    nextSibling(node) {
+      return node.nextSibling;
+    }
+  };
 }
-function safeHtml(html) {
-  return raw(html);
+var defaultDOMOps = createDefaultDOMOps();
+var domOps = { ...defaultDOMOps };
+function setDOMOps(overrides) {
+  Object.assign(domOps, overrides);
 }
-function isSafeHtml(value) {
-  return value instanceof HtmlEscapedString;
+function resetDOMOps() {
+  for (const key of Object.keys(domOps)) {
+    delete domOps[key];
+  }
+  Object.assign(domOps, defaultDOMOps);
 }
 
-// src/server/renderer.ts
-var componentCache = new WeakMap;
-var pageRegistry = new Map;
-function registerPage(name, page) {
-  pageRegistry.set(name, page);
-}
-function getPage(name) {
-  return pageRegistry.get(name);
+// src/reactivity/scheduler.ts
+var pendingEffects = new Set;
+var flushScheduled = false;
+var isFlushing = false;
+var pendingCallbacks = [];
+function scheduleEffect(effect) {
+  if (!effect.active)
+    return;
+  pendingEffects.add(effect);
+  scheduleFlush();
 }
-function hasPage(name) {
-  return pageRegistry.has(name);
+function unscheduleEffect(effect) {
+  pendingEffects.delete(effect);
 }
-async function renderPage(name, data) {
-  const page = getPage(name);
-  if (!page) {
-    throw new Error(`Page "${name}" not found in registry`);
+function scheduleFlush() {
+  if (!flushScheduled) {
+    flushScheduled = true;
+    queueMicrotask(flush);
   }
-  const element = await page(data);
-  return renderToString(element);
 }
-async function renderToString(node) {
-  if (node == null || typeof node === "boolean") {
-    return "";
-  }
-  if (typeof node === "string") {
-    return escapeHtml(node);
-  }
-  if (typeof node === "number") {
-    return String(node);
-  }
-  if (node instanceof HtmlEscapedString) {
-    return node.value;
+function flush() {
+  isFlushing = true;
+  const sorted = [...pendingEffects].sort((a, b) => a.id - b.id);
+  pendingEffects.clear();
+  for (const effect of sorted) {
+    if (effect.active) {
+      effect.run();
+    }
   }
-  if (Array.isArray(node)) {
-    const results = await Promise.all(node.map((child) => renderToString(child)));
-    return results.join("");
+  let safety = 10;
+  while (pendingEffects.size > 0 && safety-- > 0) {
+    const next = [...pendingEffects].sort((a, b) => a.id - b.id);
+    pendingEffects.clear();
+    for (const effect of next) {
+      if (effect.active) {
+        effect.run();
+      }
+    }
   }
-  if (node instanceof Promise) {
-    return renderElement(await node);
+  flushScheduled = false;
+  isFlushing = false;
+  const cbs = pendingCallbacks.splice(0);
+  for (const cb of cbs) {
+    cb();
   }
-  return renderElement(node);
 }
-async function renderElement(element) {
-  const { tag, props, children } = element;
-  if (typeof tag === "function") {
-    const result = await tag(props);
-    return renderToString(result);
-  }
-  if (typeof tag === "string") {
-    return renderIntrinsicElement(tag, props, children);
-  }
-  return renderToString(children);
+function nextTick(fn) {
+  return new Promise((resolve) => {
+    const callback = () => {
+      fn?.();
+      resolve();
+    };
+    if (flushScheduled || isFlushing) {
+      pendingCallbacks.push(callback);
+    } else {
+      queueMicrotask(callback);
+    }
+  });
 }
-var VOID_ELEMENTS2 = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-async function renderIntrinsicElement(tag, props, children) {
-  const attrs = renderAttributes(props);
-  if (VOID_ELEMENTS2.has(tag)) {
-    return attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+function flushSync() {
+  if (flushScheduled) {
+    flushScheduled = false;
+    flush();
   }
-  const childrenHtml = await renderChildren(children, props);
-  return attrs ? `<${tag}${attrs}>${childrenHtml}</${tag}>` : `<${tag}>${childrenHtml}</${tag}>`;
 }
-function renderAttributes(props) {
-  let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "children")
-      continue;
-    if (value == null || value === false)
-      continue;
-    if (value === true) {
-      attrs += ` ${key}`;
-      continue;
+
+// src/reactivity/effect.ts
+var activeEffect = null;
+var effectStack = [];
+var effectIdCounter = 0;
+
+class ReactiveEffect {
+  id;
+  active = true;
+  fn;
+  cleanup = undefined;
+  deps = new Set;
+  constructor(fn) {
+    this.id = effectIdCounter++;
+    this.fn = fn;
+  }
+  run() {
+    if (!this.active)
+      return;
+    if (effectStack.includes(this))
+      return;
+    this.cleanupDeps();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = undefined;
     }
-    if (key === "dangerouslySetInnerHTML") {
-      continue;
+    effectStack.push(this);
+    const prevEffect = activeEffect;
+    activeEffect = this;
+    try {
+      const result = this.fn();
+      if (typeof result === "function") {
+        this.cleanup = result;
+      }
+    } finally {
+      activeEffect = prevEffect;
+      effectStack.pop();
     }
-    const attrName = key === "className" ? "class" : key;
-    const finalName = attrName === "htmlFor" ? "for" : attrName;
-    const attrValue = escapeHtml(String(value));
-    attrs += ` ${finalName}="${attrValue}"`;
   }
-  return attrs;
-}
-async function renderChildren(children, props) {
-  const dangerous = props.dangerouslySetInnerHTML;
-  if (dangerous && typeof dangerous.__html === "string") {
-    return dangerous.__html;
+  cleanupDeps() {
+    for (const dep of this.deps) {
+      dep.subscribers.delete(this);
+    }
+    this.deps.clear();
+  }
+  notify() {
+    scheduleEffect(this);
+  }
+  dispose() {
+    if (!this.active)
+      return;
+    this.active = false;
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = undefined;
+    }
+    this.cleanupDeps();
+    unscheduleEffect(this);
   }
-  return renderToString(children);
 }
-function isSlots(children) {
-  return children != null && typeof children === "object" && !Array.isArray(children) && !(children instanceof HtmlEscapedString);
-}
-// src/server/stream.ts
-var VOID_ELEMENTS3 = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-function streamPage(page, data) {
-  const encoder = new TextEncoder;
-  return new ReadableStream({
-    async start(controller) {
-      try {
-        const element = await page(data);
-        await streamNode(element, controller, encoder);
-        controller.close();
-      } catch (error) {
-        controller.error(error);
-      }
-    }
-  });
-}
-async function streamNode(node, controller, encoder) {
-  if (node == null || typeof node === "boolean") {
-    return;
-  }
-  if (typeof node === "string") {
-    controller.enqueue(encoder.encode(escapeHtml(node)));
-    return;
-  }
-  if (typeof node === "number") {
-    controller.enqueue(encoder.encode(String(node)));
-    return;
-  }
-  if (node instanceof HtmlEscapedString) {
-    controller.enqueue(encoder.encode(node.value));
-    return;
-  }
-  if (Array.isArray(node)) {
-    for (const child of node) {
-      await streamNode(child, controller, encoder);
-    }
-    return;
-  }
-  if (node instanceof Promise) {
-    const resolved = await node;
-    await streamElement(resolved, controller, encoder);
-    return;
-  }
-  await streamElement(node, controller, encoder);
-}
-async function streamElement(element, controller, encoder) {
-  const { tag, props, children } = element;
-  if (typeof tag === "function") {
-    const result = await tag(props);
-    await streamNode(result, controller, encoder);
-    return;
-  }
-  if (typeof tag === "string") {
-    await streamIntrinsicElement(tag, props, children, controller, encoder);
-    return;
-  }
-  await streamNode(children, controller, encoder);
-}
-async function streamIntrinsicElement(tag, props, children, controller, encoder) {
-  const attrs = renderAttributes2(props);
-  const dangerous = props.dangerouslySetInnerHTML;
-  if (VOID_ELEMENTS3.has(tag)) {
-    const html = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
-    controller.enqueue(encoder.encode(html));
-    return;
-  }
-  const openTag = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
-  controller.enqueue(encoder.encode(openTag));
-  if (dangerous && typeof dangerous.__html === "string") {
-    controller.enqueue(encoder.encode(dangerous.__html));
-  } else {
-    await streamNode(children, controller, encoder);
-  }
-  controller.enqueue(encoder.encode(`</${tag}>`));
-}
-function renderAttributes2(props) {
-  let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "children" || key === "dangerouslySetInnerHTML")
-      continue;
-    if (value == null || value === false)
-      continue;
-    if (value === true) {
-      attrs += ` ${key}`;
-      continue;
-    }
-    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-    const attrValue = escapeHtml(String(value));
-    attrs += ` ${attrName}="${attrValue}"`;
-  }
-  return attrs;
-}
-// src/reactivity/scheduler.ts
-var pendingEffects = new Set;
-var flushScheduled = false;
-var isFlushing = false;
-var pendingCallbacks = [];
-function scheduleEffect(effect) {
-  if (!effect.active)
-    return;
-  pendingEffects.add(effect);
-  scheduleFlush();
-}
-function unscheduleEffect(effect) {
-  pendingEffects.delete(effect);
-}
-function scheduleFlush() {
-  if (!flushScheduled) {
-    flushScheduled = true;
-    queueMicrotask(flush);
-  }
-}
-function flush() {
-  isFlushing = true;
-  const sorted = [...pendingEffects].sort((a, b) => a.id - b.id);
-  pendingEffects.clear();
-  for (const effect of sorted) {
-    if (effect.active) {
-      effect.run();
-    }
-  }
-  let safety = 10;
-  while (pendingEffects.size > 0 && safety-- > 0) {
-    const next = [...pendingEffects].sort((a, b) => a.id - b.id);
-    pendingEffects.clear();
-    for (const effect of next) {
-      if (effect.active) {
-        effect.run();
-      }
-    }
-  }
-  flushScheduled = false;
-  isFlushing = false;
-  const cbs = pendingCallbacks.splice(0);
-  for (const cb of cbs) {
-    cb();
-  }
-}
-function nextTick(fn) {
-  return new Promise((resolve) => {
-    const callback = () => {
-      fn?.();
-      resolve();
-    };
-    if (flushScheduled || isFlushing) {
-      pendingCallbacks.push(callback);
-    } else {
-      queueMicrotask(callback);
-    }
-  });
-}
-function flushSync() {
-  if (flushScheduled) {
-    flushScheduled = false;
-    flush();
-  }
-}
-
-// src/reactivity/effect.ts
-var activeEffect = null;
-var effectStack = [];
-var effectIdCounter = 0;
-
-class ReactiveEffect {
-  id;
-  active = true;
-  fn;
-  cleanup = undefined;
-  deps = new Set;
-  constructor(fn) {
-    this.id = effectIdCounter++;
-    this.fn = fn;
-  }
-  run() {
-    if (!this.active)
-      return;
-    if (effectStack.includes(this))
-      return;
-    this.cleanupDeps();
-    if (this.cleanup) {
-      this.cleanup();
-      this.cleanup = undefined;
-    }
-    effectStack.push(this);
-    const prevEffect = activeEffect;
-    activeEffect = this;
-    try {
-      const result = this.fn();
-      if (typeof result === "function") {
-        this.cleanup = result;
-      }
-    } finally {
-      activeEffect = prevEffect;
-      effectStack.pop();
-    }
-  }
-  cleanupDeps() {
-    for (const dep of this.deps) {
-      dep.subscribers.delete(this);
-    }
-    this.deps.clear();
-  }
-  notify() {
-    scheduleEffect(this);
-  }
-  dispose() {
-    if (!this.active)
-      return;
-    this.active = false;
-    if (this.cleanup) {
-      this.cleanup();
-      this.cleanup = undefined;
-    }
-    this.cleanupDeps();
-    unscheduleEffect(this);
-  }
-}
-function effect(fn) {
-  const e = new ReactiveEffect(fn);
-  e.run();
-  return () => e.dispose();
+function effect(fn) {
+  const e = new ReactiveEffect(fn);
+  e.run();
+  return () => e.dispose();
 }
 function track(dep) {
   if (activeEffect) {
@@ -628,91 +436,18 @@ function isComputed(value) {
   return value != null && typeof value === "object" && COMPUTED_BRAND in value;
 }
 
-// src/hydration/markers.ts
-var COMP_ID_ATTR = "data-sinwan-id";
-var COMP_ID_PREFIX = "c";
-var TEXT_MARKER_OPEN = "sinwan-t:";
-var TEXT_MARKER_CLOSE = "/sinwan-t";
-var EVENT_ATTR = "data-sinwan-ev";
-function compId(index) {
-  return `${COMP_ID_PREFIX}${index}`;
+// src/renderer/events.ts
+function isEventProp(key) {
+  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
 }
-function textMarkerOpen(index) {
-  return `<!--${TEXT_MARKER_OPEN}${index}-->`;
+function toEventName(key) {
+  return key.slice(2).toLowerCase();
 }
-function textMarkerCloseStr() {
-  return `<!--${TEXT_MARKER_CLOSE}-->`;
-}
-function parseTextOpenMarker(node) {
-  const data = node.data;
-  if (data.startsWith(TEXT_MARKER_OPEN)) {
-    const idx = parseInt(data.slice(TEXT_MARKER_OPEN.length), 10);
-    return Number.isNaN(idx) ? -1 : idx;
-  }
-  return -1;
-}
-function isTextCloseMarker(node) {
-  return node.data === TEXT_MARKER_CLOSE;
-}
-
-// src/renderer/dom-ops.ts
-var domOps = {
-  createElement(tag) {
-    return document.createElement(tag);
-  },
-  createTextNode(text) {
-    return document.createTextNode(text);
-  },
-  createComment(text) {
-    return document.createComment(text);
-  },
-  setAttribute(el, key, value) {
-    el.setAttribute(key, value);
-  },
-  removeAttribute(el, key) {
-    el.removeAttribute(key);
-  },
-  setProperty(el, key, value) {
-    el[key] = value;
-  },
-  insertBefore(parent, child, anchor) {
-    parent.insertBefore(child, anchor);
-  },
-  appendChild(parent, child) {
-    parent.appendChild(child);
-  },
-  remove(node) {
-    node.parentNode?.removeChild(node);
-  },
-  setTextContent(node, text) {
-    node.data = text;
-  },
-  addEventListener(el, event, handler) {
-    el.addEventListener(event, handler);
-  },
-  removeEventListener(el, event, handler) {
-    el.removeEventListener(event, handler);
-  },
-  parentNode(node) {
-    return node.parentNode;
-  },
-  nextSibling(node) {
-    return node.nextSibling;
-  }
-};
-
-// src/renderer/events.ts
-function isEventProp(key) {
-  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
-}
-function toEventName(key) {
-  return key.slice(2).toLowerCase();
-}
-function bindEvent(el, eventName, handler) {
-  domOps.addEventListener(el, eventName, handler);
-  return () => {
-    domOps.removeEventListener(el, eventName, handler);
-  };
+function bindEvent(el, eventName, handler) {
+  domOps.addEventListener(el, eventName, handler);
+  return () => {
+    domOps.removeEventListener(el, eventName, handler);
+  };
 }
 function bindEvents(el, props) {
   const cleanups = [];
@@ -757,7 +492,18 @@ function setCurrentInstance(instance) {
   currentInstance = instance;
   return prev;
 }
+function withInstance(instance, fn) {
+  const prev = setCurrentInstance(instance);
+  try {
+    return fn();
+  } finally {
+    setCurrentInstance(prev);
+  }
+}
 function fireMountedHooks(instance) {
+  if (instance.isUnmounted) {
+    return;
+  }
   for (const child of instance.children) {
     fireMountedHooks(child);
   }
@@ -784,6 +530,24 @@ function fireUnmountedHooks(instance) {
     instance.effects.length = 0;
   }
 }
+function fireUpdatedHooks(instance) {
+  for (const hook of instance._updatedHooks) {
+    hook();
+  }
+}
+var queuedUpdatedHooks = new Set;
+function queueUpdatedHooks(instance) {
+  if (!instance || !instance.isMounted || instance.isUnmounted || instance._updatedHooks.length === 0 || queuedUpdatedHooks.has(instance)) {
+    return;
+  }
+  queuedUpdatedHooks.add(instance);
+  nextTick(() => {
+    queuedUpdatedHooks.delete(instance);
+    if (instance.isMounted && !instance.isUnmounted) {
+      fireUpdatedHooks(instance);
+    }
+  });
+}
 function handleComponentError(instance, err) {
   let current = instance;
   while (current) {
@@ -798,27 +562,327 @@ function handleComponentError(instance, err) {
   console.error("[Sinwan] Unhandled component error:", err);
 }
 
-// src/server/hydration-markers.ts
-function createHydrationContext() {
-  return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
+// src/renderer/attributes.ts
+var SKIP_PROPS = new Set(["children", "key", "ref", "dangerouslySetInnerHTML"]);
+var DOM_PROPERTIES = new Set(["value", "checked", "selected", "disabled", "readOnly", "multiple", "indeterminate"]);
+var PROP_ALIASES = {
+  className: "class",
+  htmlFor: "for",
+  tabIndex: "tabindex",
+  crossOrigin: "crossorigin"
+};
+function applyAttributes(el, props) {
+  const disposers = [];
+  const owner = getCurrentInstance();
+  for (const [key, value] of Object.entries(props)) {
+    if (SKIP_PROPS.has(key) || isEventProp(key))
+      continue;
+    if (isSignal(value) || isComputed(value)) {
+      let initialized = false;
+      const dispose = effect(() => {
+        setSingleAttribute(el, key, value.value);
+        if (initialized) {
+          queueUpdatedHooks(owner);
+        }
+        initialized = true;
+      });
+      disposers.push(dispose);
+    } else {
+      setSingleAttribute(el, key, value);
+    }
+  }
+  return disposers;
 }
-async function renderToHydratableString(component, props) {
-  const ctx = createHydrationContext();
-  const mergedProps = props ?? {};
-  const instance = createComponentInstance(component, mergedProps, null);
-  setCurrentInstance(instance);
-  const result = await component(mergedProps);
-  setCurrentInstance(null);
-  if (result && typeof result === "object" && "tag" in result) {
-    return renderElementH(result, ctx, true);
+function setSingleAttribute(el, key, value) {
+  const attrName = PROP_ALIASES[key] ?? key;
+  if (attrName === "style" && typeof value === "object" && value !== null) {
+    applyStyle(el, value);
+    return;
+  }
+  if (attrName === "class" && typeof value === "object" && value !== null) {
+    applyClass(el, value);
+    return;
+  }
+  if (value == null || value === false) {
+    domOps.removeAttribute(el, attrName);
+    if (DOM_PROPERTIES.has(attrName)) {
+      domOps.setProperty(el, attrName, attrName === "value" ? "" : false);
+    }
+    return;
+  }
+  if (value === true) {
+    domOps.setAttribute(el, attrName, "");
+    if (DOM_PROPERTIES.has(attrName)) {
+      domOps.setProperty(el, attrName, true);
+    }
+    return;
+  }
+  if (DOM_PROPERTIES.has(attrName)) {
+    domOps.setProperty(el, attrName, value);
+    return;
   }
-  return renderNodeH(result, ctx);
+  domOps.setAttribute(el, attrName, String(value));
 }
-async function renderNodeToHydratableString(node) {
-  const ctx = createHydrationContext();
-  return renderNodeH(node, ctx);
+function applyStyle(el, styles) {
+  for (const [prop, val] of Object.entries(styles)) {
+    if (prop.includes("-")) {
+      el.style.setProperty(prop, val);
+    } else {
+      el.style[prop] = val;
+    }
+  }
 }
-var VOID_ELEMENTS4 = new Set([
+function applyClass(el, value) {
+  let classStr;
+  if (Array.isArray(value)) {
+    classStr = value.filter(Boolean).join(" ");
+  } else if (typeof value === "object" && value !== null) {
+    classStr = Object.entries(value).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ");
+  } else {
+    classStr = String(value);
+  }
+  domOps.setAttribute(el, "class", classStr);
+}
+
+// src/component/control-flow.ts
+var SHOW_TYPE = Symbol.for("Sinwan.Show");
+var FOR_TYPE = Symbol.for("Sinwan.For");
+function Show(props) {
+  return {
+    tag: SHOW_TYPE,
+    props,
+    children: []
+  };
+}
+function For(props) {
+  return {
+    tag: FOR_TYPE,
+    props,
+    children: []
+  };
+}
+function isShowElement(element) {
+  return element.tag === SHOW_TYPE;
+}
+function isForElement(element) {
+  return element.tag === FOR_TYPE;
+}
+
+// src/renderer/unmount.ts
+function getMountedDomNodes(node) {
+  switch (node.type) {
+    case "text":
+    case "reactive-text":
+      return [node.node];
+    case "element":
+      return [node.node];
+    case "fragment":
+      return [
+        node.anchor,
+        ...node.children.flatMap((child) => getMountedDomNodes(child))
+      ];
+    case "reactive-block":
+      return [
+        node.startAnchor,
+        ...node.children.flatMap((child) => getMountedDomNodes(child)),
+        node.endAnchor
+      ];
+    case "component":
+      return node.children.flatMap((child) => getMountedDomNodes(child));
+  }
+}
+function unmountNode(node) {
+  switch (node.type) {
+    case "text":
+      break;
+    case "reactive-text":
+      node.dispose();
+      break;
+    case "element":
+      for (const dispose of node.attrDisposers) {
+        dispose();
+      }
+      for (const cleanup of node.eventCleanups) {
+        cleanup();
+      }
+      node.refCleanup?.();
+      for (const child of node.children) {
+        unmountNode(child);
+      }
+      break;
+    case "fragment":
+      for (const child of node.children) {
+        unmountNode(child);
+      }
+      break;
+    case "reactive-block":
+      node.dispose();
+      for (const child of node.children) {
+        unmountNode(child);
+      }
+      break;
+    case "component":
+      if (node.instance) {
+        fireUnmountedHooks(node.instance);
+      } else {
+        for (const dispose of node.disposers) {
+          dispose();
+        }
+      }
+      for (const child of node.children) {
+        unmountNode(child);
+      }
+      break;
+  }
+}
+function removeMountedNode(node) {
+  const domNodes = getMountedDomNodes(node);
+  unmountNode(node);
+  for (const domNode of domNodes) {
+    if (domNode.parentNode) {
+      domOps.remove(domNode);
+    }
+  }
+}
+
+// src/renderer/render-control-flow.ts
+function renderControlFlowToDOM(element, parent, anchor, namespace) {
+  const startAnchor = domOps.createComment("Sinwan-b");
+  const endAnchor = domOps.createComment("/Sinwan-b");
+  insertNode(parent, startAnchor, anchor);
+  insertNode(parent, endAnchor, anchor);
+  const owner = getCurrentInstance();
+  let disposeEffect = () => {};
+  const block = {
+    type: "reactive-block",
+    dispose: () => disposeEffect(),
+    children: [],
+    startAnchor,
+    endAnchor
+  };
+  if (isShowElement(element)) {
+    disposeEffect = renderShowBlock(element, block, parent, namespace, owner);
+  } else if (isForElement(element)) {
+    disposeEffect = renderForBlock(element, block, parent, namespace, owner);
+  }
+  return block;
+}
+function renderShowBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  return effect(() => {
+    clearChildren(block);
+    const when = readReactive(element.props.when);
+    const content = withOptionalInstance(owner, () => when ? resolveShowChildren(element, when) : element.props.fallback);
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderForBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let records = [];
+  return effect(() => {
+    const props = element.props;
+    const items = readReactive(props.each);
+    const list = Array.isArray(items) ? items : [];
+    const renderChild = props.children;
+    if (typeof renderChild !== "function") {
+      clearChildren(block);
+      records = [];
+      if (initialized) {
+        queueUpdatedHooks(owner);
+      }
+      initialized = true;
+      return;
+    }
+    const oldByKey = new Map;
+    for (const record of records) {
+      oldByKey.set(record.key, record);
+    }
+    const nextRecords = [];
+    list.forEach((item, index) => {
+      const key = props.key ? props.key(item, index) : item;
+      const old = oldByKey.get(key);
+      if (old && old.item === item) {
+        old.index = index;
+        moveBeforeEnd(parent, old.mounted, block.endAnchor);
+        nextRecords.push(old);
+        oldByKey.delete(key);
+        return;
+      }
+      if (old) {
+        removeMountedNode(old.mounted);
+        oldByKey.delete(key);
+      }
+      const record = {
+        key,
+        item,
+        index,
+        mounted: { type: "text", node: domOps.createTextNode("") }
+      };
+      record.mounted = withOptionalInstance(owner, () => renderNodeToDOM(renderChild(item, () => record.index), parent, block.endAnchor, namespace));
+      nextRecords.push(record);
+    });
+    for (const record of oldByKey.values()) {
+      removeMountedNode(record.mounted);
+    }
+    records = nextRecords;
+    block.children = nextRecords.map((record) => record.mounted);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function resolveShowChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function renderBlockContent(content, parent, anchor, namespace, owner) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  const nodes = Array.isArray(content) ? content : [content];
+  return nodes.map((node) => withOptionalInstance(owner, () => renderNodeToDOM(node, parent, anchor, namespace)));
+}
+function clearChildren(block) {
+  for (const child of block.children) {
+    removeMountedNode(child);
+  }
+  block.children = [];
+}
+function moveBeforeEnd(parent, mounted, endAnchor) {
+  for (const node of getMountedDomNodes(mounted)) {
+    domOps.insertBefore(parent, node, endAnchor);
+  }
+}
+function fireMountedAndQueueUpdated(owner) {
+  if (owner) {
+    fireMountedHooks(owner);
+  }
+  queueUpdatedHooks(owner);
+}
+function withOptionalInstance(owner, fn) {
+  return owner ? withInstance(owner, fn) : fn();
+}
+function readReactive(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+function insertNode(parent, child, anchor) {
+  if (anchor) {
+    domOps.insertBefore(parent, child, anchor);
+  } else {
+    domOps.appendChild(parent, child);
+  }
+}
+
+// src/renderer/render-element.ts
+var VOID_ELEMENTS2 = new Set([
   "area",
   "base",
   "br",
@@ -834,298 +898,824 @@ var VOID_ELEMENTS4 = new Set([
   "track",
   "wbr"
 ]);
-function renderNodeH(node, ctx) {
-  if (node == null || typeof node === "boolean")
-    return "";
-  if (typeof node === "string")
-    return escapeHtml(node);
-  if (typeof node === "number")
-    return String(node);
-  if (node instanceof HtmlEscapedString)
-    return node.value;
-  if (isSignal(node) || isComputed(node)) {
-    const value = node.value;
-    const idx = ctx.textIndex++;
-    return `${textMarkerOpen(idx)}${escapeHtml(String(value))}${textMarkerCloseStr()}`;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATH_NS = "http://www.w3.org/1998/Math/MathML";
+function renderElementToDOM(element, parent, anchor = null, namespace = null) {
+  const { tag, props, children } = element;
+  if (tag === "" || tag === Fragment) {
+    return renderFragmentToDOM(children, parent, anchor, namespace);
   }
-  if (Array.isArray(node)) {
-    return node.map((child) => renderNodeH(child, ctx)).join("");
+  if (tag === Show || tag === For) {
+    return renderElementToDOM(tag(props), parent, anchor, namespace);
   }
-  if (node instanceof Promise) {
-    return "";
+  if (isShowElement(element) || isForElement(element)) {
+    return renderControlFlowToDOM(element, parent, anchor, namespace);
   }
-  if (typeof node === "object" && "tag" in node) {
-    return renderElementH(node, ctx, false);
+  if (typeof tag === "function") {
+    return renderComponentToDOM(tag, props, parent, anchor, namespace);
   }
-  return escapeHtml(String(node));
+  if (typeof tag === "string") {
+    return renderIntrinsicToDOM(tag, props, children, parent, anchor, namespace);
+  }
+  return renderFragmentToDOM(children, parent, anchor, namespace);
+}
+function renderIntrinsicToDOM(tag, props, children, parent, anchor, parentNamespace) {
+  const namespace = getElementNamespace(tag, parentNamespace);
+  const el = namespace ? domOps.createElementNS(namespace, tag) : domOps.createElement(tag);
+  const attrDisposers = applyAttributes(el, props);
+  const eventCleanups = bindEvents(el, props);
+  let mountedChildren = [];
+  if (!VOID_ELEMENTS2.has(tag)) {
+    const dangerous = props.dangerouslySetInnerHTML;
+    if (dangerous && typeof dangerous.__html === "string") {
+      el.innerHTML = dangerous.__html;
+    } else {
+      mountedChildren = renderChildrenToDOM(children, el, getChildNamespace(tag, namespace));
+    }
+  }
+  if (anchor) {
+    domOps.insertBefore(parent, el, anchor);
+  } else {
+    domOps.appendChild(parent, el);
+  }
+  const refCleanup = applyRef(el, props.ref);
+  return {
+    type: "element",
+    node: el,
+    children: mountedChildren,
+    eventCleanups,
+    attrDisposers,
+    refCleanup
+  };
+}
+function renderComponentToDOM(component, props, parent, anchor, namespace) {
+  const parentInstance = getCurrentInstance();
+  const instance = createComponentInstance(component, props, parentInstance);
+  if (parentInstance) {
+    parentInstance.children.push(instance);
+  }
+  const prevInstance = setCurrentInstance(instance);
+  let result;
+  let child;
+  try {
+    result = component(props);
+    if (result && typeof result === "object" && "tag" in result) {
+      child = renderElementToDOM(result, parent, anchor, namespace);
+    } else {
+      child = renderNodeToDOM(result, parent, anchor, namespace);
+    }
+  } catch (err) {
+    setCurrentInstance(prevInstance);
+    handleComponentError(instance, err);
+    const text = domOps.createTextNode("");
+    if (anchor) {
+      domOps.insertBefore(parent, text, anchor);
+    } else {
+      domOps.appendChild(parent, text);
+    }
+    return {
+      type: "component",
+      children: [{ type: "text", node: text }],
+      disposers: [],
+      instance
+    };
+  }
+  setCurrentInstance(prevInstance);
+  instance.element = child;
+  return {
+    type: "component",
+    children: [child],
+    disposers: instance.effects,
+    instance
+  };
+}
+function renderFragmentToDOM(children, parent, anchor, namespace) {
+  const anchorComment = domOps.createComment("Sinwan-f");
+  if (anchor) {
+    domOps.insertBefore(parent, anchorComment, anchor);
+  } else {
+    domOps.appendChild(parent, anchorComment);
+  }
+  const mounted = [];
+  for (const child of children) {
+    mounted.push(renderNodeToDOM(child, parent, anchor, namespace));
+  }
+  return { type: "fragment", children: mounted, anchor: anchorComment };
+}
+function getElementNamespace(tag, parentNamespace) {
+  if (tag === "svg")
+    return SVG_NS;
+  if (tag === "math")
+    return MATH_NS;
+  return parentNamespace;
+}
+function getChildNamespace(tag, namespace) {
+  if (namespace === SVG_NS && tag === "foreignObject") {
+    return null;
+  }
+  return namespace;
+}
+function applyRef(el, ref) {
+  const value = ref;
+  if (!value) {
+    return null;
+  }
+  if (typeof value === "function") {
+    value(el);
+    return () => value(null);
+  }
+  if (typeof value === "object" && "current" in value) {
+    value.current = el;
+    return () => {
+      value.current = null;
+    };
+  }
+  return null;
+}
+
+// src/renderer/render-children.ts
+function renderNodeToDOM(node, parent, anchor = null, namespace = null) {
+  if (node == null || typeof node === "boolean") {
+    const text2 = domOps.createTextNode("");
+    insertNode2(parent, text2, anchor);
+    return { type: "text", node: text2 };
+  }
+  if (typeof node === "string") {
+    const text2 = domOps.createTextNode(node);
+    insertNode2(parent, text2, anchor);
+    return { type: "text", node: text2 };
+  }
+  if (typeof node === "number") {
+    const text2 = domOps.createTextNode(String(node));
+    insertNode2(parent, text2, anchor);
+    return { type: "text", node: text2 };
+  }
+  if (node instanceof HtmlEscapedString) {
+    const text2 = domOps.createTextNode(node.value);
+    insertNode2(parent, text2, anchor);
+    return { type: "text", node: text2 };
+  }
+  if (isSignal(node) || isComputed(node)) {
+    const text2 = domOps.createTextNode(String(node.value));
+    insertNode2(parent, text2, anchor);
+    const owner = getCurrentInstance();
+    let initialized = false;
+    const dispose = effect(() => {
+      domOps.setTextContent(text2, String(node.value));
+      if (initialized) {
+        queueUpdatedHooks(owner);
+      }
+      initialized = true;
+    });
+    return { type: "reactive-text", node: text2, dispose };
+  }
+  if (Array.isArray(node)) {
+    return renderArrayToDOM(node, parent, anchor, namespace);
+  }
+  if (node instanceof Promise) {
+    const placeholder = domOps.createTextNode("");
+    insertNode2(parent, placeholder, anchor);
+    node.then((resolved) => {
+      const mounted = renderNodeToDOM(resolved, parent, placeholder, namespace);
+      domOps.remove(placeholder);
+    });
+    return { type: "text", node: placeholder };
+  }
+  if (typeof node === "object" && "tag" in node) {
+    return renderElementToDOM(node, parent, anchor, namespace);
+  }
+  const text = domOps.createTextNode(String(node));
+  insertNode2(parent, text, anchor);
+  return { type: "text", node: text };
+}
+function renderArrayToDOM(nodes, parent, anchor, namespace) {
+  const anchorComment = domOps.createComment("Sinwan-f");
+  insertNode2(parent, anchorComment, anchor);
+  const children = [];
+  for (const child of nodes) {
+    children.push(renderNodeToDOM(child, parent, anchor, namespace));
+  }
+  return { type: "fragment", children, anchor: anchorComment };
+}
+function renderChildrenToDOM(children, parent, namespace = null) {
+  const mounted = [];
+  for (const child of children) {
+    mounted.push(renderNodeToDOM(child, parent, null, namespace));
+  }
+  return mounted;
+}
+function insertNode2(parent, child, anchor) {
+  if (anchor) {
+    domOps.insertBefore(parent, child, anchor);
+  } else {
+    domOps.appendChild(parent, child);
+  }
+}
+
+// src/renderer/mount.ts
+function mount(component, container, props) {
+  container.innerHTML = "";
+  const mergedProps = props ?? {};
+  const instance = createComponentInstance(component, mergedProps, null);
+  let result;
+  let root;
+  setCurrentInstance(instance);
+  try {
+    result = component(mergedProps);
+    if (result instanceof Promise) {
+      const placeholder = document.createTextNode("");
+      container.appendChild(placeholder);
+      root = { type: "text", node: placeholder };
+      result.then((resolved) => {
+        container.innerHTML = "";
+        setCurrentInstance(instance);
+        root = renderElementToDOM(resolved, container);
+        setCurrentInstance(null);
+        instance.element = root;
+        fireMountedHooks(instance);
+      });
+    } else if (result && typeof result === "object" && "tag" in result) {
+      root = renderElementToDOM(result, container);
+    } else {
+      root = renderNodeToDOM(result, container);
+    }
+  } catch (err) {
+    setCurrentInstance(null);
+    handleComponentError(instance, err);
+    return {
+      root: { type: "text", node: document.createTextNode("") },
+      unmount() {}
+    };
+  }
+  setCurrentInstance(null);
+  instance.element = root;
+  fireMountedHooks(instance);
+  return {
+    root,
+    unmount() {
+      fireUnmountedHooks(instance);
+      unmountNode(root);
+      container.innerHTML = "";
+    }
+  };
+}
+function render(node, container) {
+  container.innerHTML = "";
+  const root = renderNodeToDOM(node, container);
+  return {
+    root,
+    unmount() {
+      unmountNode(root);
+      container.innerHTML = "";
+    }
+  };
+}
+// src/server/index.ts
+var exports_server = {};
+__export(exports_server, {
+  streamPage: () => streamPage,
+  streamHydratablePage: () => streamHydratablePage,
+  streamHydratableNode: () => streamHydratableNode,
+  renderToString: () => renderToString,
+  renderToHydratableString: () => renderToHydratableString,
+  renderPage: () => renderPage,
+  renderNodeToHydratableString: () => renderNodeToHydratableString,
+  registerPage: () => registerPage,
+  isSlots: () => isSlots,
+  hasPage: () => hasPage,
+  getPage: () => getPage
+});
+module.exports = __toCommonJS(exports_server);
+
+// src/escaper.ts
+var _bun = globalThis.Bun;
+var _nativeEscape = typeof _bun?.escapeHTML === "function" ? _bun.escapeHTML.bind(_bun) : undefined;
+var HTML_ESCAPE_RE = /[&<>"']/g;
+var HTML_ESCAPE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function portableEscape(str) {
+  HTML_ESCAPE_RE.lastIndex = 0;
+  if (!HTML_ESCAPE_RE.test(str))
+    return str;
+  return str.replace(HTML_ESCAPE_RE, (c) => HTML_ESCAPE_MAP[c]);
+}
+function escapeHtml(value) {
+  if (value == null || typeof value === "boolean")
+    return "";
+  if (typeof value === "number")
+    return String(value);
+  if (value instanceof HtmlEscapedString)
+    return value.value;
+  const s = String(value);
+  return _nativeEscape ? _nativeEscape(s) : portableEscape(s);
+}
+function safeHtml(html) {
+  return raw(html);
+}
+function isSafeHtml(value) {
+  return value instanceof HtmlEscapedString;
+}
+
+// src/server/renderer.ts
+var componentCache = new WeakMap;
+var pageRegistry = new Map;
+function registerPage(name, page) {
+  pageRegistry.set(name, page);
+}
+function getPage(name) {
+  return pageRegistry.get(name);
+}
+function hasPage(name) {
+  return pageRegistry.has(name);
+}
+async function renderPage(name, data) {
+  const page = getPage(name);
+  if (!page) {
+    throw new Error(`Page "${name}" not found in registry`);
+  }
+  const element = await page(data);
+  return renderToString(element);
+}
+async function renderToString(node) {
+  if (node == null || typeof node === "boolean") {
+    return "";
+  }
+  if (typeof node === "string") {
+    return escapeHtml(node);
+  }
+  if (typeof node === "number") {
+    return String(node);
+  }
+  if (node instanceof HtmlEscapedString) {
+    return node.value;
+  }
+  if (isSignal(node) || isComputed(node)) {
+    return escapeHtml(String(node.value));
+  }
+  if (Array.isArray(node)) {
+    const results = await Promise.all(node.map((child) => renderToString(child)));
+    return results.join("");
+  }
+  if (node instanceof Promise) {
+    return renderElement(await node);
+  }
+  return renderElement(node);
+}
+async function renderElement(element) {
+  const { tag, props, children } = element;
+  if (isShowElement(element)) {
+    const when = readReactive2(props.when);
+    return renderToString(when ? resolveShowChildren2(element, when) : props.fallback);
+  }
+  if (isForElement(element)) {
+    return renderForElement(element);
+  }
+  if (typeof tag === "function") {
+    const result = await tag(props);
+    return renderToString(result);
+  }
+  if (typeof tag === "string") {
+    return renderIntrinsicElement(tag, props, children);
+  }
+  return renderToString(children);
+}
+var VOID_ELEMENTS3 = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+async function renderIntrinsicElement(tag, props, children) {
+  const attrs = renderAttributes(props);
+  if (VOID_ELEMENTS3.has(tag)) {
+    return attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+  }
+  const childrenHtml = await renderChildren(children, props);
+  return attrs ? `<${tag}${attrs}>${childrenHtml}</${tag}>` : `<${tag}>${childrenHtml}</${tag}>`;
+}
+function renderAttributes(props) {
+  let attrs = "";
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
+      continue;
+    }
+    const resolvedValue = readReactive2(value);
+    if (resolvedValue == null || resolvedValue === false)
+      continue;
+    const attrName = key === "className" ? "class" : key;
+    const finalName = attrName === "htmlFor" ? "for" : attrName;
+    if (resolvedValue === true) {
+      attrs += ` ${finalName}`;
+      continue;
+    }
+    const attrValue = escapeHtml(String(resolvedValue));
+    attrs += ` ${finalName}="${attrValue}"`;
+  }
+  return attrs;
+}
+async function renderChildren(children, props) {
+  const dangerous = props.dangerouslySetInnerHTML;
+  if (dangerous && typeof dangerous.__html === "string") {
+    return dangerous.__html;
+  }
+  return renderToString(children);
+}
+function isSlots(children) {
+  return children != null && typeof children === "object" && !Array.isArray(children) && !(children instanceof HtmlEscapedString);
+}
+async function renderForElement(element) {
+  const props = element.props;
+  const each = readReactive2(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return "";
+  }
+  const rendered = await Promise.all(each.map((item, index) => renderToString(props.children(item, () => index))));
+  return rendered.join("");
+}
+function resolveShowChildren2(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function readReactive2(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+// src/hydration/markers.ts
+var COMP_ID_ATTR = "data-sinwan-id";
+var COMP_ID_PREFIX = "c";
+var TEXT_MARKER_OPEN = "sinwan-t:";
+var TEXT_MARKER_CLOSE = "/sinwan-t";
+var EVENT_ATTR = "data-sinwan-ev";
+function compId(index) {
+  return `${COMP_ID_PREFIX}${index}`;
+}
+function textMarkerOpen(index) {
+  return `<!--${TEXT_MARKER_OPEN}${index}-->`;
+}
+function textMarkerCloseStr() {
+  return `<!--${TEXT_MARKER_CLOSE}-->`;
+}
+function parseTextOpenMarker(node) {
+  const data = node.data;
+  if (data.startsWith(TEXT_MARKER_OPEN)) {
+    const idx = parseInt(data.slice(TEXT_MARKER_OPEN.length), 10);
+    return Number.isNaN(idx) ? -1 : idx;
+  }
+  return -1;
+}
+function isTextCloseMarker(node) {
+  return node.data === TEXT_MARKER_CLOSE;
+}
+
+// src/server/stream.ts
+function createHydratableStreamContext() {
+  return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
+}
+var VOID_ELEMENTS4 = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function streamPage(page, data) {
+  const encoder = new TextEncoder;
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        const element = await page(data);
+        await streamNode(element, controller, encoder);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    }
+  });
+}
+function streamHydratablePage(component, props) {
+  const encoder = new TextEncoder;
+  const ctx = createHydratableStreamContext();
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        await streamHydratableComponent(component, props ?? {}, controller, encoder, ctx, true);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    }
+  });
+}
+function streamHydratableNode(node) {
+  const encoder = new TextEncoder;
+  const ctx = createHydratableStreamContext();
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        await streamHydratableNodeToController(node, controller, encoder, ctx);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    }
+  });
 }
-function renderElementH(element, ctx, isComponentRoot) {
+async function streamNode(node, controller, encoder) {
+  if (node == null || typeof node === "boolean") {
+    return;
+  }
+  if (typeof node === "string") {
+    controller.enqueue(encoder.encode(escapeHtml(node)));
+    return;
+  }
+  if (typeof node === "number") {
+    controller.enqueue(encoder.encode(String(node)));
+    return;
+  }
+  if (node instanceof HtmlEscapedString) {
+    controller.enqueue(encoder.encode(node.value));
+    return;
+  }
+  if (isSignal(node) || isComputed(node)) {
+    controller.enqueue(encoder.encode(escapeHtml(String(node.value))));
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      await streamNode(child, controller, encoder);
+    }
+    return;
+  }
+  if (node instanceof Promise) {
+    const resolved = await node;
+    await streamElement(resolved, controller, encoder);
+    return;
+  }
+  await streamElement(node, controller, encoder);
+}
+async function streamElement(element, controller, encoder) {
   const { tag, props, children } = element;
-  if (tag === "") {
-    return children.map((child) => renderNodeH(child, ctx)).join("");
+  if (isShowElement(element)) {
+    const when = readReactive3(props.when);
+    await streamNode(when ? resolveShowChildren3(element, when) : props.fallback, controller, encoder);
+    return;
+  }
+  if (isForElement(element)) {
+    await streamForElement(element, controller, encoder);
+    return;
   }
   if (typeof tag === "function") {
-    return renderComponentH(tag, props, ctx);
+    const result = await tag(props);
+    await streamNode(result, controller, encoder);
+    return;
   }
   if (typeof tag === "string") {
-    return renderIntrinsicH(tag, props, children, ctx, isComponentRoot);
+    await streamIntrinsicElement(tag, props, children, controller, encoder);
+    return;
   }
-  return children.map((child) => renderNodeH(child, ctx)).join("");
+  await streamNode(children, controller, encoder);
 }
-function renderComponentH(component, props, ctx) {
-  const parentInstance = globalThis.__SinwanCurrentInstance;
-  const instance = createComponentInstance(component, props, null);
-  const prev = setCurrentInstance(instance);
-  const result = component(props);
-  setCurrentInstance(prev);
-  if (result && typeof result === "object" && "tag" in result) {
-    return renderElementH(result, ctx, true);
+async function streamIntrinsicElement(tag, props, children, controller, encoder) {
+  const attrs = renderAttributes2(props);
+  const dangerous = props.dangerouslySetInnerHTML;
+  if (VOID_ELEMENTS4.has(tag)) {
+    const html = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+    controller.enqueue(encoder.encode(html));
+    return;
+  }
+  const openTag = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+  controller.enqueue(encoder.encode(openTag));
+  if (dangerous && typeof dangerous.__html === "string") {
+    controller.enqueue(encoder.encode(dangerous.__html));
+  } else {
+    await streamNode(children, controller, encoder);
   }
-  return renderNodeH(result, ctx);
+  controller.enqueue(encoder.encode(`</${tag}>`));
 }
-function renderIntrinsicH(tag, props, children, ctx, isComponentRoot) {
+function renderAttributes2(props) {
   let attrs = "";
-  if (isComponentRoot) {
-    attrs += ` ${COMP_ID_ATTR}="${compId(ctx.componentIndex++)}"`;
-  }
-  const eventParts = [];
   for (const [key, value] of Object.entries(props)) {
-    if (key === "children" || key === "dangerouslySetInnerHTML")
-      continue;
-    if (isEventProp(key)) {
-      const eventName = toEventName(key);
-      eventParts.push(`${eventName}:${ctx.eventIndex++}`);
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
       continue;
     }
-    if (value == null || value === false)
+    const resolvedValue = readReactive3(value);
+    if (resolvedValue == null || resolvedValue === false)
       continue;
-    let resolvedValue = value;
-    if (isSignal(value) || isComputed(value)) {
-      resolvedValue = value.value;
-    }
+    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
     if (resolvedValue === true) {
-      const attrName2 = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-      attrs += ` ${attrName2}`;
+      attrs += ` ${attrName}`;
       continue;
     }
-    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-    attrs += ` ${attrName}="${escapeHtml(String(resolvedValue))}"`;
-  }
-  if (eventParts.length > 0) {
-    attrs += ` ${EVENT_ATTR}="${eventParts.join(",")}"`;
+    const attrValue = escapeHtml(String(resolvedValue));
+    attrs += ` ${attrName}="${attrValue}"`;
   }
-  if (VOID_ELEMENTS4.has(tag)) {
-    return `<${tag}${attrs}>`;
+  return attrs;
+}
+async function streamHydratableNodeToController(node, controller, encoder, ctx, isComponentRoot = false) {
+  if (node == null || typeof node === "boolean") {
+    return;
   }
-  const dangerous = props.dangerouslySetInnerHTML;
-  if (dangerous && typeof dangerous.__html === "string") {
-    return `<${tag}${attrs}>${dangerous.__html}</${tag}>`;
+  if (typeof node === "string") {
+    enqueue(controller, encoder, escapeHtml(node));
+    return;
   }
-  const childrenHtml = children.map((child) => renderNodeH(child, ctx)).join("");
-  return `<${tag}${attrs}>${childrenHtml}</${tag}>`;
-}
-// src/index.ts
-var exports_src = {};
-__export(exports_src, {
-  unmountNode: () => unmountNode,
-  streamPage: () => streamPage,
-  signal: () => signal,
-  safeHtml: () => safeHtml,
-  renderToString: () => renderToString,
-  renderToHydratableString: () => renderToHydratableString,
-  renderPage: () => renderPage,
-  renderNodeToHydratableString: () => renderNodeToHydratableString,
-  renderNodeToDOM: () => renderNodeToDOM,
-  renderElementToDOM: () => renderElementToDOM,
-  render: () => render,
-  registerPage: () => registerPage,
-  raw: () => raw,
-  provide: () => provide,
-  onUpdated: () => onUpdated,
-  onUnmounted: () => onUnmounted,
-  onMounted: () => onMounted,
-  onError: () => onError,
-  nextTick: () => nextTick,
-  mount: () => mount,
-  jsxs: () => jsxs,
-  jsxDEV: () => jsxDEV,
-  jsx: () => jsx,
-  isSignal: () => isSignal,
-  isSafeHtml: () => isSafeHtml,
-  isComputed: () => isComputed,
-  inject: () => inject,
-  hydrate: () => hydrate,
-  hasPage: () => hasPage,
-  getPage: () => getPage,
-  getCurrentInstance: () => getCurrentInstance,
-  escapeHtml: () => escapeHtml,
-  effect: () => effect,
-  createPage: () => createPage,
-  createLayout: () => createLayout,
-  createComponent: () => createComponent,
-  computed: () => computed,
-  batch: () => batch,
-  HtmlEscapedString: () => HtmlEscapedString,
-  Fragment: () => Fragment
-});
-module.exports = __toCommonJS(exports_src);
-// src/reactivity/batch.ts
-var batchDepth = 0;
-function batch(fn) {
-  batchDepth++;
-  try {
-    fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      flushSync();
-    }
+  if (typeof node === "number") {
+    enqueue(controller, encoder, String(node));
+    return;
   }
-}
-// src/component/lifecycle.ts
-function onMounted(fn) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("onMounted() called outside of component setup.");
+  if (node instanceof HtmlEscapedString) {
+    enqueue(controller, encoder, node.value);
+    return;
   }
-  instance._mountedHooks.push(fn);
-}
-function onUnmounted(fn) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("onUnmounted() called outside of component setup.");
+  if (isSignal(node) || isComputed(node)) {
+    const idx = ctx.textIndex++;
+    enqueue(controller, encoder, `${textMarkerOpen(idx)}${escapeHtml(String(node.value))}${textMarkerCloseStr()}`);
+    return;
   }
-  instance._unmountedHooks.push(fn);
-}
-function onUpdated(fn) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("onUpdated() called outside of component setup.");
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      await streamHydratableNodeToController(child, controller, encoder, ctx);
+    }
+    return;
   }
-  instance._updatedHooks.push(fn);
-}
-function onError(fn) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("onError() called outside of component setup.");
+  if (node instanceof Promise) {
+    await streamHydratableElement(await node, controller, encoder, ctx, isComponentRoot);
+    return;
   }
-  instance._errorHooks.push(fn);
-}
-// src/component/create.ts
-function createComponent(fn) {
-  const component = (props) => fn(props);
-  component._SinwanComponent = true;
-  component._displayName = fn.name || "AnonymousComponent";
-  return component;
-}
-function createPage(fn) {
-  const page = (data) => fn(data);
-  page._SinwanPage = true;
-  page._displayName = fn.name || "AnonymousPage";
-  return page;
-}
-function createLayout(fn) {
-  return createComponent(fn);
+  await streamHydratableElement(node, controller, encoder, ctx, isComponentRoot);
 }
-// src/component/provide-inject.ts
-function provide(key, value) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("provide() called outside of component setup.");
+async function streamHydratableElement(element, controller, encoder, ctx, isComponentRoot) {
+  const { tag, props, children } = element;
+  if (tag === "") {
+    for (const child of children) {
+      await streamHydratableNodeToController(child, controller, encoder, ctx);
+    }
+    return;
   }
-  instance.provides[key] = value;
-}
-function inject(key, defaultValue) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("inject() called outside of component setup.");
+  if (tag === Show || tag === For) {
+    await streamHydratableElement(tag(props), controller, encoder, ctx, isComponentRoot);
+    return;
   }
-  if (key in instance.provides) {
-    return instance.provides[key];
+  if (isShowElement(element)) {
+    const when = readReactive3(props.when);
+    await streamHydratableNodeToController(when ? resolveShowChildren3(element, when) : props.fallback, controller, encoder, ctx, isComponentRoot);
+    return;
   }
-  if (arguments.length >= 2) {
-    return defaultValue;
+  if (isForElement(element)) {
+    await streamHydratableForElement(element, controller, encoder, ctx);
+    return;
   }
-  console.warn(`[Sinwan] inject() key "${String(key)}" not found and no default provided.`);
-  return;
-}
-// src/renderer/attributes.ts
-var SKIP_PROPS = new Set(["children", "key", "ref", "dangerouslySetInnerHTML"]);
-var DOM_PROPERTIES = new Set(["value", "checked", "selected", "disabled", "readOnly", "multiple", "indeterminate"]);
-var PROP_ALIASES = {
-  className: "class",
-  htmlFor: "for",
-  tabIndex: "tabindex",
-  crossOrigin: "crossorigin"
-};
-function applyAttributes(el, props) {
-  const disposers = [];
-  for (const [key, value] of Object.entries(props)) {
-    if (SKIP_PROPS.has(key) || isEventProp(key))
-      continue;
-    if (isSignal(value) || isComputed(value)) {
-      const dispose = effect(() => {
-        setSingleAttribute(el, key, value.value);
-      });
-      disposers.push(dispose);
-    } else {
-      setSingleAttribute(el, key, value);
-    }
+  if (typeof tag === "function") {
+    await streamHydratableComponent(tag, props, controller, encoder, ctx, true);
+    return;
   }
-  return disposers;
-}
-function setSingleAttribute(el, key, value) {
-  const attrName = PROP_ALIASES[key] ?? key;
-  if (attrName === "style" && typeof value === "object" && value !== null) {
-    applyStyle(el, value);
+  if (typeof tag === "string") {
+    await streamHydratableIntrinsic(tag, props, children, controller, encoder, ctx, isComponentRoot);
     return;
   }
-  if (attrName === "class" && typeof value === "object" && value !== null) {
-    applyClass(el, value);
+  await streamHydratableNodeToController(children, controller, encoder, ctx);
+}
+async function streamHydratableComponent(component, props, controller, encoder, ctx, isComponentRoot) {
+  const parentInstance = getCurrentInstance();
+  const instance = createComponentInstance(component, props, parentInstance);
+  if (parentInstance) {
+    parentInstance.children.push(instance);
+  }
+  const prev = setCurrentInstance(instance);
+  try {
+    const result = await component(props);
+    await streamHydratableNodeToController(result, controller, encoder, ctx, isComponentRoot);
+  } finally {
+    setCurrentInstance(prev);
+  }
+}
+async function streamHydratableIntrinsic(tag, props, children, controller, encoder, ctx, isComponentRoot) {
+  const attrs = renderHydratableAttributes(props, ctx, isComponentRoot);
+  const dangerous = props.dangerouslySetInnerHTML;
+  enqueue(controller, encoder, attrs ? `<${tag}${attrs}>` : `<${tag}>`);
+  if (VOID_ELEMENTS4.has(tag)) {
     return;
   }
-  if (value == null || value === false) {
-    domOps.removeAttribute(el, attrName);
-    if (DOM_PROPERTIES.has(attrName)) {
-      domOps.setProperty(el, attrName, attrName === "value" ? "" : false);
+  if (dangerous && typeof dangerous.__html === "string") {
+    enqueue(controller, encoder, dangerous.__html);
+  } else {
+    for (const child of children) {
+      await streamHydratableNodeToController(child, controller, encoder, ctx);
     }
+  }
+  enqueue(controller, encoder, `</${tag}>`);
+}
+async function streamHydratableForElement(element, controller, encoder, ctx) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
     return;
   }
-  if (value === true) {
-    domOps.setAttribute(el, attrName, "");
-    if (DOM_PROPERTIES.has(attrName)) {
-      domOps.setProperty(el, attrName, true);
+  for (let index = 0;index < each.length; index++) {
+    await streamHydratableNodeToController(props.children(each[index], () => index), controller, encoder, ctx);
+  }
+}
+function renderHydratableAttributes(props, ctx, isComponentRoot) {
+  let attrs = "";
+  if (isComponentRoot) {
+    attrs += ` ${COMP_ID_ATTR}="${compId(ctx.componentIndex++)}"`;
+  }
+  const eventParts = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML") {
+      continue;
     }
-    return;
+    if (isEventProp(key)) {
+      eventParts.push(`${toEventName(key)}:${ctx.eventIndex++}`);
+      continue;
+    }
+    const resolvedValue = readReactive3(value);
+    if (resolvedValue == null || resolvedValue === false)
+      continue;
+    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
+    if (resolvedValue === true) {
+      attrs += ` ${attrName}`;
+      continue;
+    }
+    attrs += ` ${attrName}="${escapeHtml(String(resolvedValue))}"`;
   }
-  if (DOM_PROPERTIES.has(attrName)) {
-    domOps.setProperty(el, attrName, value);
+  if (eventParts.length > 0) {
+    attrs += ` ${EVENT_ATTR}="${eventParts.join(",")}"`;
+  }
+  return attrs;
+}
+function enqueue(controller, encoder, html) {
+  controller.enqueue(encoder.encode(html));
+}
+async function streamForElement(element, controller, encoder) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
     return;
   }
-  domOps.setAttribute(el, attrName, String(value));
+  for (let index = 0;index < each.length; index++) {
+    await streamNode(props.children(each[index], () => index), controller, encoder);
+  }
 }
-function applyStyle(el, styles) {
-  for (const [prop, val] of Object.entries(styles)) {
-    if (prop.includes("-")) {
-      el.style.setProperty(prop, val);
-    } else {
-      el.style[prop] = val;
-    }
+function resolveShowChildren3(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
   }
+  return children;
 }
-function applyClass(el, value) {
-  let classStr;
-  if (Array.isArray(value)) {
-    classStr = value.filter(Boolean).join(" ");
-  } else if (typeof value === "object" && value !== null) {
-    classStr = Object.entries(value).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ");
-  } else {
-    classStr = String(value);
+function readReactive3(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+// src/server/hydration-markers.ts
+function createHydrationContext() {
+  return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
+}
+async function renderToHydratableString(component, props) {
+  const ctx = createHydrationContext();
+  const mergedProps = props ?? {};
+  const instance = createComponentInstance(component, mergedProps, null);
+  const prev = setCurrentInstance(instance);
+  try {
+    const result = await component(mergedProps);
+    if (result && typeof result === "object" && "tag" in result) {
+      return renderElementH(result, ctx, true);
+    }
+    return renderNodeH(result, ctx);
+  } finally {
+    setCurrentInstance(prev);
   }
-  domOps.setAttribute(el, "class", classStr);
 }
-
-// src/renderer/render-element.ts
+async function renderNodeToHydratableString(node) {
+  const ctx = createHydrationContext();
+  return renderNodeH(node, ctx);
+}
 var VOID_ELEMENTS5 = new Set([
   "area",
   "base",
@@ -1142,273 +1732,269 @@ var VOID_ELEMENTS5 = new Set([
   "track",
   "wbr"
 ]);
-function renderElementToDOM(element, parent, anchor = null) {
-  const { tag, props, children } = element;
-  if (tag === "" || tag === Fragment) {
-    return renderFragmentToDOM(children, parent, anchor);
+function renderNodeH(node, ctx) {
+  if (node == null || typeof node === "boolean")
+    return "";
+  if (typeof node === "string")
+    return escapeHtml(node);
+  if (typeof node === "number")
+    return String(node);
+  if (node instanceof HtmlEscapedString)
+    return node.value;
+  if (isSignal(node) || isComputed(node)) {
+    const value = node.value;
+    const idx = ctx.textIndex++;
+    return `${textMarkerOpen(idx)}${escapeHtml(String(value))}${textMarkerCloseStr()}`;
   }
-  if (typeof tag === "function") {
-    return renderComponentToDOM(tag, props, parent, anchor);
+  if (Array.isArray(node)) {
+    return node.map((child) => renderNodeH(child, ctx)).join("");
   }
-  if (typeof tag === "string") {
-    return renderIntrinsicToDOM(tag, props, children, parent, anchor);
+  if (node instanceof Promise) {
+    return "";
+  }
+  if (typeof node === "object" && "tag" in node) {
+    return renderElementH(node, ctx, false);
   }
-  return renderFragmentToDOM(children, parent, anchor);
+  return escapeHtml(String(node));
 }
-function renderIntrinsicToDOM(tag, props, children, parent, anchor) {
-  const el = domOps.createElement(tag);
-  const attrDisposers = applyAttributes(el, props);
-  const eventCleanups = bindEvents(el, props);
-  let mountedChildren = [];
-  if (!VOID_ELEMENTS5.has(tag)) {
-    const dangerous = props.dangerouslySetInnerHTML;
-    if (dangerous && typeof dangerous.__html === "string") {
-      el.innerHTML = dangerous.__html;
-    } else {
-      mountedChildren = renderChildrenToDOM(children, el);
-    }
+function renderElementH(element, ctx, isComponentRoot) {
+  const { tag, props, children } = element;
+  if (tag === "") {
+    return children.map((child) => renderNodeH(child, ctx)).join("");
   }
-  if (anchor) {
-    domOps.insertBefore(parent, el, anchor);
-  } else {
-    domOps.appendChild(parent, el);
+  if (tag === Show || tag === For) {
+    return renderElementH(tag(props), ctx, isComponentRoot);
   }
-  return {
-    type: "element",
-    node: el,
-    children: mountedChildren,
-    eventCleanups,
-    attrDisposers
-  };
+  if (isShowElement(element)) {
+    const when = readReactive4(props.when);
+    const content = when ? resolveShowChildren4(element, when) : props.fallback;
+    return renderNodeMaybeRoot(content, ctx, isComponentRoot);
+  }
+  if (isForElement(element)) {
+    return renderForElementH(element, ctx);
+  }
+  if (typeof tag === "function") {
+    return renderComponentH(tag, props, ctx);
+  }
+  if (typeof tag === "string") {
+    return renderIntrinsicH(tag, props, children, ctx, isComponentRoot);
+  }
+  return children.map((child) => renderNodeH(child, ctx)).join("");
 }
-function renderComponentToDOM(component, props, parent, anchor) {
+function renderComponentH(component, props, ctx) {
   const parentInstance = getCurrentInstance();
   const instance = createComponentInstance(component, props, parentInstance);
   if (parentInstance) {
     parentInstance.children.push(instance);
   }
-  const prevInstance = setCurrentInstance(instance);
-  let result;
-  let child;
+  const prev = setCurrentInstance(instance);
   try {
-    result = component(props);
+    const result = component(props);
     if (result && typeof result === "object" && "tag" in result) {
-      child = renderElementToDOM(result, parent, anchor);
-    } else {
-      child = renderNodeToDOM(result, parent, anchor);
-    }
-  } catch (err) {
-    setCurrentInstance(prevInstance);
-    handleComponentError(instance, err);
-    const text = domOps.createTextNode("");
-    if (anchor) {
-      domOps.insertBefore(parent, text, anchor);
-    } else {
-      domOps.appendChild(parent, text);
+      return renderElementH(result, ctx, true);
     }
-    return {
-      type: "component",
-      children: [{ type: "text", node: text }],
-      disposers: [],
-      instance
-    };
-  }
-  setCurrentInstance(prevInstance);
-  instance.element = child;
-  return {
-    type: "component",
-    children: [child],
-    disposers: instance.effects,
-    instance
-  };
-}
-function renderFragmentToDOM(children, parent, anchor) {
-  const anchorComment = domOps.createComment("Sinwan-f");
-  if (anchor) {
-    domOps.insertBefore(parent, anchorComment, anchor);
-  } else {
-    domOps.appendChild(parent, anchorComment);
-  }
-  const mounted = [];
-  for (const child of children) {
-    mounted.push(renderNodeToDOM(child, parent, anchor));
+    return renderNodeH(result, ctx);
+  } finally {
+    setCurrentInstance(prev);
   }
-  return { type: "fragment", children: mounted, anchor: anchorComment };
 }
-
-// src/renderer/render-children.ts
-function renderNodeToDOM(node, parent, anchor = null) {
-  if (node == null || typeof node === "boolean") {
-    const text2 = domOps.createTextNode("");
-    insertNode(parent, text2, anchor);
-    return { type: "text", node: text2 };
-  }
-  if (typeof node === "string") {
-    const text2 = domOps.createTextNode(node);
-    insertNode(parent, text2, anchor);
-    return { type: "text", node: text2 };
-  }
-  if (typeof node === "number") {
-    const text2 = domOps.createTextNode(String(node));
-    insertNode(parent, text2, anchor);
-    return { type: "text", node: text2 };
-  }
-  if (node instanceof HtmlEscapedString) {
-    const text2 = domOps.createTextNode(node.value);
-    insertNode(parent, text2, anchor);
-    return { type: "text", node: text2 };
-  }
-  if (isSignal(node) || isComputed(node)) {
-    const text2 = domOps.createTextNode(String(node.value));
-    insertNode(parent, text2, anchor);
-    const dispose = effect(() => {
-      domOps.setTextContent(text2, String(node.value));
-    });
-    return { type: "reactive-text", node: text2, dispose };
+function renderIntrinsicH(tag, props, children, ctx, isComponentRoot) {
+  let attrs = "";
+  if (isComponentRoot) {
+    attrs += ` ${COMP_ID_ATTR}="${compId(ctx.componentIndex++)}"`;
   }
-  if (Array.isArray(node)) {
-    return renderArrayToDOM(node, parent, anchor);
+  const eventParts = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML") {
+      continue;
+    }
+    if (isEventProp(key)) {
+      const eventName = toEventName(key);
+      eventParts.push(`${eventName}:${ctx.eventIndex++}`);
+      continue;
+    }
+    if (value == null || value === false)
+      continue;
+    let resolvedValue = value;
+    if (isSignal(value) || isComputed(value)) {
+      resolvedValue = value.value;
+    }
+    if (resolvedValue === true) {
+      const attrName2 = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
+      attrs += ` ${attrName2}`;
+      continue;
+    }
+    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
+    attrs += ` ${attrName}="${escapeHtml(String(resolvedValue))}"`;
   }
-  if (node instanceof Promise) {
-    const placeholder = domOps.createTextNode("");
-    insertNode(parent, placeholder, anchor);
-    node.then((resolved) => {
-      const mounted = renderNodeToDOM(resolved, parent, placeholder);
-      domOps.remove(placeholder);
-    });
-    return { type: "text", node: placeholder };
+  if (eventParts.length > 0) {
+    attrs += ` ${EVENT_ATTR}="${eventParts.join(",")}"`;
   }
-  if (typeof node === "object" && "tag" in node) {
-    return renderElementToDOM(node, parent, anchor);
+  if (VOID_ELEMENTS5.has(tag)) {
+    return `<${tag}${attrs}>`;
   }
-  const text = domOps.createTextNode(String(node));
-  insertNode(parent, text, anchor);
-  return { type: "text", node: text };
+  const dangerous = props.dangerouslySetInnerHTML;
+  if (dangerous && typeof dangerous.__html === "string") {
+    return `<${tag}${attrs}>${dangerous.__html}</${tag}>`;
+  }
+  const childrenHtml = children.map((child) => renderNodeH(child, ctx)).join("");
+  return `<${tag}${attrs}>${childrenHtml}</${tag}>`;
 }
-function renderArrayToDOM(nodes, parent, anchor) {
-  const anchorComment = domOps.createComment("Sinwan-f");
-  insertNode(parent, anchorComment, anchor);
-  const children = [];
-  for (const child of nodes) {
-    children.push(renderNodeToDOM(child, parent, anchor));
+function renderNodeMaybeRoot(node, ctx, isComponentRoot) {
+  if (isComponentRoot && node && typeof node === "object" && !Array.isArray(node) && "tag" in node) {
+    return renderElementH(node, ctx, true);
   }
-  return { type: "fragment", children, anchor: anchorComment };
+  return renderNodeH(node, ctx);
 }
-function renderChildrenToDOM(children, parent) {
-  const mounted = [];
-  for (const child of children) {
-    mounted.push(renderNodeToDOM(child, parent));
+function renderForElementH(element, ctx) {
+  const props = element.props;
+  const each = readReactive4(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return "";
   }
-  return mounted;
+  return each.map((item, index) => renderNodeH(props.children(item, () => index), ctx)).join("");
 }
-function insertNode(parent, child, anchor) {
-  if (anchor) {
-    domOps.insertBefore(parent, child, anchor);
-  } else {
-    domOps.appendChild(parent, child);
+function resolveShowChildren4(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
   }
+  return children;
 }
-
-// src/renderer/mount.ts
-function mount(component, container, props) {
-  container.innerHTML = "";
-  const mergedProps = props ?? {};
-  const instance = createComponentInstance(component, mergedProps, null);
-  let result;
-  let root;
-  setCurrentInstance(instance);
+function readReactive4(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  unmountNode: () => unmountNode,
+  streamPage: () => streamPage,
+  streamHydratablePage: () => streamHydratablePage,
+  streamHydratableNode: () => streamHydratableNode,
+  signal: () => signal,
+  setDOMOps: () => setDOMOps,
+  safeHtml: () => safeHtml,
+  resetDOMOps: () => resetDOMOps,
+  renderToString: () => renderToString,
+  renderToHydratableString: () => renderToHydratableString,
+  renderPage: () => renderPage,
+  renderNodeToHydratableString: () => renderNodeToHydratableString,
+  renderNodeToDOM: () => renderNodeToDOM,
+  renderElementToDOM: () => renderElementToDOM,
+  render: () => render,
+  registerPage: () => registerPage,
+  raw: () => raw,
+  provide: () => provide,
+  onUpdated: () => onUpdated,
+  onUnmounted: () => onUnmounted,
+  onMounted: () => onMounted,
+  onError: () => onError,
+  nextTick: () => nextTick,
+  mount: () => mount,
+  jsxs: () => jsxs,
+  jsxDEV: () => jsxDEV,
+  jsx: () => jsx,
+  isSignal: () => isSignal,
+  isSafeHtml: () => isSafeHtml,
+  isComputed: () => isComputed,
+  inject: () => inject,
+  hydrate: () => hydrate,
+  hasPage: () => hasPage,
+  getPage: () => getPage,
+  getCurrentInstance: () => getCurrentInstance,
+  escapeHtml: () => escapeHtml,
+  effect: () => effect,
+  domOps: () => domOps,
+  createPage: () => createPage,
+  createLayout: () => createLayout,
+  createComponent: () => createComponent,
+  computed: () => computed,
+  batch: () => batch,
+  Show: () => Show,
+  HtmlEscapedString: () => HtmlEscapedString,
+  Fragment: () => Fragment,
+  For: () => For
+});
+module.exports = __toCommonJS(exports_src);
+// src/reactivity/batch.ts
+var batchDepth = 0;
+function batch(fn) {
+  batchDepth++;
   try {
-    result = component(mergedProps);
-    if (result instanceof Promise) {
-      const placeholder = document.createTextNode("");
-      container.appendChild(placeholder);
-      root = { type: "text", node: placeholder };
-      result.then((resolved) => {
-        container.innerHTML = "";
-        setCurrentInstance(instance);
-        root = renderElementToDOM(resolved, container);
-        setCurrentInstance(null);
-        instance.element = root;
-        fireMountedHooks(instance);
-      });
-    } else if (result && typeof result === "object" && "tag" in result) {
-      root = renderElementToDOM(result, container);
-    } else {
-      root = renderNodeToDOM(result, container);
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) {
+      flushSync();
     }
-  } catch (err) {
-    setCurrentInstance(null);
-    handleComponentError(instance, err);
-    return {
-      root: { type: "text", node: document.createTextNode("") },
-      unmount() {}
-    };
   }
-  setCurrentInstance(null);
-  instance.element = root;
-  fireMountedHooks(instance);
-  return {
-    root,
-    unmount() {
-      fireUnmountedHooks(instance);
-      unmountNode(root);
-      container.innerHTML = "";
-    }
-  };
 }
-function render(node, container) {
-  container.innerHTML = "";
-  const root = renderNodeToDOM(node, container);
-  return {
-    root,
-    unmount() {
-      unmountNode(root);
-      container.innerHTML = "";
-    }
-  };
+// src/component/lifecycle.ts
+function onMounted(fn) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("onMounted() called outside of component setup.");
+  }
+  instance._mountedHooks.push(() => withInstance(instance, fn));
 }
-function unmountNode(node) {
-  switch (node.type) {
-    case "text":
-      break;
-    case "reactive-text":
-      node.dispose();
-      break;
-    case "element":
-      for (const dispose of node.attrDisposers) {
-        dispose();
-      }
-      for (const cleanup of node.eventCleanups) {
-        cleanup();
-      }
-      for (const child of node.children) {
-        unmountNode(child);
-      }
-      break;
-    case "fragment":
-      for (const child of node.children) {
-        unmountNode(child);
-      }
-      break;
-    case "reactive-block":
-      node.dispose();
-      for (const child of node.children) {
-        unmountNode(child);
-      }
-      break;
-    case "component":
-      if (node.instance) {
-        fireUnmountedHooks(node.instance);
-      } else {
-        for (const dispose of node.disposers) {
-          dispose();
-        }
-      }
-      for (const child of node.children) {
-        unmountNode(child);
-      }
-      break;
+function onUnmounted(fn) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("onUnmounted() called outside of component setup.");
+  }
+  instance._unmountedHooks.push(() => withInstance(instance, fn));
+}
+function onUpdated(fn) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("onUpdated() called outside of component setup.");
+  }
+  instance._updatedHooks.push(() => withInstance(instance, fn));
+}
+function onError(fn) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("onError() called outside of component setup.");
+  }
+  instance._errorHooks.push((err) => withInstance(instance, () => fn(err)));
+}
+// src/component/create.ts
+function createComponent(fn) {
+  const component = (props) => fn(props);
+  component._SinwanComponent = true;
+  component._displayName = fn.name || "AnonymousComponent";
+  return component;
+}
+function createPage(fn) {
+  const page = (data) => fn(data);
+  page._SinwanPage = true;
+  page._displayName = fn.name || "AnonymousPage";
+  return page;
+}
+function createLayout(fn) {
+  return createComponent(fn);
+}
+// src/component/provide-inject.ts
+function provide(key, value) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("provide() called outside of component setup.");
+  }
+  instance.provides[key] = value;
+}
+function inject(key, defaultValue) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("inject() called outside of component setup.");
+  }
+  if (key in instance.provides) {
+    return instance.provides[key];
+  }
+  if (arguments.length >= 2) {
+    return defaultValue;
   }
+  console.warn(`[Sinwan] inject() key "${String(key)}" not found and no default provided.`);
+  return;
 }
 // src/hydration/walk.ts
 function advance(cursor) {
@@ -1449,6 +2035,7 @@ function hydrateNode(node, cursor) {
 }
 function hydrateReactiveText(reactive, cursor) {
   const openComment = cursor.current;
+  const owner = getCurrentInstance();
   if (openComment && openComment.nodeType === 8 && parseTextOpenMarker(openComment) >= 0) {
     advance(cursor);
     const textNode2 = advance(cursor);
@@ -1456,21 +2043,36 @@ function hydrateReactiveText(reactive, cursor) {
     if (closeComment && closeComment.nodeType === 8 && isTextCloseMarker(closeComment)) {
       advance(cursor);
     }
+    let initialized2 = false;
     const dispose2 = effect(() => {
       textNode2.data = String(reactive.value);
+      if (initialized2) {
+        queueUpdatedHooks(owner);
+      }
+      initialized2 = true;
     });
     return { type: "reactive-text", node: textNode2, dispose: dispose2 };
   }
   const textNode = advance(cursor);
   if (textNode) {
+    let initialized2 = false;
     const dispose2 = effect(() => {
       textNode.data = String(reactive.value);
+      if (initialized2) {
+        queueUpdatedHooks(owner);
+      }
+      initialized2 = true;
     });
     return { type: "reactive-text", node: textNode, dispose: dispose2 };
   }
   const newText = document.createTextNode(String(reactive.value));
+  let initialized = false;
   const dispose = effect(() => {
     newText.data = String(reactive.value);
+    if (initialized) {
+      queueUpdatedHooks(owner);
+    }
+    initialized = true;
   });
   return { type: "reactive-text", node: newText, dispose };
 }
@@ -1479,6 +2081,12 @@ function hydrateElement(element, cursor) {
   if (tag === "") {
     return hydrateArray(children, cursor);
   }
+  if (tag === Show || tag === For) {
+    return hydrateElement(tag(props), cursor);
+  }
+  if (isShowElement(element) || isForElement(element)) {
+    return hydrateControlFlow(element, cursor);
+  }
   if (typeof tag === "function") {
     return hydrateComponent(tag, props, cursor);
   }
@@ -1497,6 +2105,7 @@ function hydrateIntrinsic(tag, props, children, cursor) {
   el.removeAttribute("data-sinwan-ev");
   const attrDisposers = hydrateAttributes(el, props);
   const eventCleanups = bindEvents(el, props);
+  const refCleanup = applyRef2(el, props.ref);
   const childCursor = {
     parent: el,
     current: el.firstChild
@@ -1510,15 +2119,18 @@ function hydrateIntrinsic(tag, props, children, cursor) {
     node: el,
     children: mountedChildren,
     eventCleanups,
-    attrDisposers
+    attrDisposers,
+    refCleanup
   };
 }
 function hydrateAttributes(el, props) {
   const disposers = [];
+  const owner = getCurrentInstance();
   for (const [key, value] of Object.entries(props)) {
     if (key === "children" || key === "key" || key === "ref" || isEventProp(key))
       continue;
     if (isSignal(value) || isComputed(value)) {
+      let initialized = false;
       const dispose = effect(() => {
         const v = value.value;
         const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
@@ -1529,12 +2141,63 @@ function hydrateAttributes(el, props) {
         } else {
           el.setAttribute(attrName, String(v));
         }
+        if (initialized) {
+          queueUpdatedHooks(owner);
+        }
+        initialized = true;
       });
       disposers.push(dispose);
     }
   }
   return disposers;
 }
+function hydrateControlFlow(element, cursor) {
+  if (isShowElement(element)) {
+    const when = readReactive5(element.props.when);
+    const content = when ? resolveShowChildren5(element, when) : element.props.fallback;
+    return hydrateContent(content, cursor);
+  }
+  if (isForElement(element)) {
+    const props = element.props;
+    const items = readReactive5(props.each);
+    const children = Array.isArray(items) && typeof props.children === "function" ? items.map((item, index) => props.children(item, () => index)) : [];
+    return hydrateArray(children, cursor);
+  }
+  return hydrateArray(element.children, cursor);
+}
+function hydrateContent(content, cursor) {
+  if (content == null || typeof content === "boolean") {
+    return hydrateArray([], cursor);
+  }
+  return Array.isArray(content) ? hydrateArray(content, cursor) : hydrateNode(content, cursor);
+}
+function resolveShowChildren5(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function readReactive5(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+function applyRef2(el, ref) {
+  const value = ref;
+  if (!value) {
+    return null;
+  }
+  if (typeof value === "function") {
+    value(el);
+    return () => value(null);
+  }
+  if (typeof value === "object" && "current" in value) {
+    value.current = el;
+    return () => {
+      value.current = null;
+    };
+  }
+  return null;
+}
 function hydrateComponent(component, props, cursor) {
   const parentInstance = getCurrentInstance();
   const instance = createComponentInstance(component, props, parentInstance);
@@ -1621,5 +2284,5 @@ function hydrate(component, container, props) {
   };
 }
 
-//# debugId=F8718FCED5F52B5764756E2164756E21
+//# debugId=82414CC0A24D81DC64756E2164756E21
 //# sourceMappingURL=index.development.js.map