streetui 1.6.1 → 1.7.0

package/dist/server.cjs

@@ -185,978 +185,1130 @@ function wireEvents(dom, graph, node, element, instance) {
   }
 }
 
-// ../renderer/src/tag-map.ts
-var TAG_MAP = {
-  application: "div",
-  page: "div",
-  section: "section",
-  container: "div",
-  heading: "h1",
-  text: "span",
-  button: "button",
-  input: "input",
-  form: "form",
-  list: "ul",
-  "list-item": "li",
-  image: "img",
-  link: "a",
-  component: "div",
-  slot: "div",
-  fragment: "div",
-  "reactive-list": "ul"
+// ../dom/src/server-node.ts
+var ServerStyle = class {
+  declarations = /* @__PURE__ */ new Map();
+  setProperty(name, value) {
+    this.declarations.set(name, value);
+  }
+  get isEmpty() {
+    return this.declarations.size === 0;
+  }
+  toCss() {
+    return [...this.declarations.entries()].map(([k, v]) => `${k}: ${v}`).join("; ");
+  }
 };
-function resolveTag(type) {
-  return TAG_MAP[type] ?? "div";
-}
-
-// ../renderer/src/patch.ts
-function patchNode(ctx, graphNode, propKey, newValue) {
-  const instance = ctx.instances.get(graphNode.id);
-  if (instance === void 0) return;
-  const domNode = instance.domNode;
-  if (!ctx.dom.isElement(domNode)) return;
-  const oldValue = graphNode.getProp(propKey);
-  switch (propKey) {
-    case "text":
-      if (!Object.is(oldValue, newValue)) {
-        ctx.dom.setTextContent(domNode, String(newValue ?? ""));
-        graphNode.setProp("text", String(newValue ?? ""));
-      }
-      break;
-    case "label":
-      if (!Object.is(oldValue, newValue)) {
-        ctx.dom.setTextContent(domNode, String(newValue ?? ""));
-        graphNode.setProp("label", String(newValue ?? ""));
-      }
-      break;
-    case "disabled":
-      if (newValue === true) {
-        ctx.dom.setAttribute(domNode, "disabled", "");
-      } else {
-        ctx.dom.removeAttribute(domNode, "disabled");
-      }
-      graphNode.setProp("disabled", Boolean(newValue));
-      break;
-    case "value":
-      if (!Object.is(oldValue, newValue)) {
-        ctx.dom.setProperty(domNode, "value", String(newValue ?? ""));
-        graphNode.setProp("value", String(newValue ?? ""));
-      }
-      break;
-    default:
-      patchProp(ctx.dom, domNode, propKey, oldValue, newValue);
-      graphNode.setProp(propKey, newValue);
-      break;
+var ServerText = class {
+  kind = "text";
+  parent = null;
+  data;
+  constructor(data) {
+    this.data = data;
   }
-}
-
-// ../renderer/src/reconciliation.ts
-function reconcileChildren(ctx, parentDom, oldInstances, newNodes, mountFn) {
-  const oldByKey = /* @__PURE__ */ new Map();
-  for (const inst of oldInstances) {
-    const key = inst.graphNode.key ?? inst.graphNode.id;
-    oldByKey.set(key, inst);
+};
+var ServerComment = class {
+  kind = "comment";
+  parent = null;
+  data;
+  constructor(data) {
+    this.data = data;
   }
-  const newInstances = [];
-  const usedKeys = /* @__PURE__ */ new Set();
-  for (const newNode of newNodes) {
-    const key = newNode.key ?? newNode.id;
-    const existing = oldByKey.get(key);
-    if (existing !== void 0) {
-      usedKeys.add(key);
-      const oldSig = existing.graphNode.getProp("_sig");
-      const newSig = newNode.getProp("_sig");
-      patchExistingInstance(ctx, existing, newNode);
-      if (!Object.is(oldSig, newSig)) {
-        reconcileItemChildren(ctx, existing, newNode, mountFn);
-      }
-      newInstances.push(existing);
-    } else {
-      const inst = mountFn(newNode, parentDom);
-      newInstances.push(inst);
-    }
+};
+var ServerFragment = class {
+  kind = "fragment";
+  parent = null;
+  children = [];
+};
+var ServerRawHTML = class {
+  kind = "raw";
+  parent = null;
+  html;
+  constructor(html) {
+    this.html = html;
   }
-  const removed = [];
-  for (const inst of oldInstances) {
-    const key = inst.graphNode.key ?? inst.graphNode.id;
-    if (!usedKeys.has(key)) {
-      removed.push(inst);
+};
+var ServerElement = class {
+  kind = "element";
+  parent = null;
+  tagName;
+  attributes = /* @__PURE__ */ new Map();
+  children = [];
+  // Lazily-allocated stores. On the 10k-row SSR corpus ~0% of elements carry JS
+  // properties or inline styles (measured, §5: 1 of 80,029 elements uses
+  // `properties`, 0 use `style`), so eagerly allocating a `properties` Map plus
+  // a `ServerStyle` (which itself holds a Map) per element wasted ~240k
+  // allocations per /users render — all in the dominant mount phase. These are
+  // created on first WRITE via the `properties`/`style` getters; the serializer
+  // reads the raw `_properties`/`_style` fields so a READ never forces an
+  // allocation. Output is byte-identical: an unset store previously serialized
+  // to nothing (empty `properties.has(...)` / `style.isEmpty`), and a null store
+  // is skipped the same way.
+  _properties = null;
+  _style = null;
+  constructor(tagName) {
+    this.tagName = tagName.toLowerCase();
+  }
+  /** JS properties set via `setProperty` (e.g. input `value`, `checked`). Allocated on first access. */
+  get properties() {
+    return this._properties ??= /* @__PURE__ */ new Map();
+  }
+  /** Inline-style holder mirroring `element.style`. Allocated on first access. */
+  get style() {
+    return this._style ??= new ServerStyle();
+  }
+};
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var SERIALIZED_PROPERTIES = {
+  value: "attr",
+  checked: "boolean",
+  selected: "boolean"
+};
+var SERIALIZED_PROPERTY_ENTRIES = Object.entries(SERIALIZED_PROPERTIES);
+var TEXT_SPECIAL = /[&<>]/;
+var ATTR_SPECIAL = /[&<>"]/;
+function escapeHtmlText(value) {
+  if (!TEXT_SPECIAL.test(value)) return value;
+  let out = "";
+  let last = 0;
+  for (let i = 0; i < value.length; i++) {
+    let esc;
+    switch (value.charCodeAt(i)) {
+      case 38:
+        esc = "&amp;";
+        break;
+      // &
+      case 60:
+        esc = "&lt;";
+        break;
+      // <
+      case 62:
+        esc = "&gt;";
+        break;
+      // >
+      default:
+        continue;
     }
+    out += value.slice(last, i) + esc;
+    last = i + 1;
   }
-  for (const inst of removed) {
-    const parent = ctx.dom.parentNode(inst.domNode);
-    if (parent !== null) {
-      ctx.dom.removeChild(parent, inst.domNode);
+  return out + value.slice(last);
+}
+function escapeHtmlAttr(value) {
+  if (!ATTR_SPECIAL.test(value)) return value;
+  let out = "";
+  let last = 0;
+  for (let i = 0; i < value.length; i++) {
+    let esc;
+    switch (value.charCodeAt(i)) {
+      case 38:
+        esc = "&amp;";
+        break;
+      // &
+      case 60:
+        esc = "&lt;";
+        break;
+      // <
+      case 62:
+        esc = "&gt;";
+        break;
+      // >
+      case 34:
+        esc = "&quot;";
+        break;
+      // "
+      default:
+        continue;
     }
-    inst.dispose();
+    out += value.slice(last, i) + esc;
+    last = i + 1;
   }
-  reorderDom(ctx, parentDom, newInstances);
-  return { instances: newInstances, removed };
+  return out + value.slice(last);
 }
-function reconcileChildrenByPlan(ctx, parentDom, oldInstances, plan, mountFn) {
-  const oldByKey = /* @__PURE__ */ new Map();
-  for (const inst of oldInstances) {
-    oldByKey.set(inst.graphNode.key ?? inst.graphNode.id, inst);
+function serializeAttributes(el) {
+  const parts = [];
+  for (const [name, value] of el.attributes) {
+    if (value === "") {
+      parts.push(` ${name}`);
+    } else {
+      parts.push(` ${name}="${escapeHtmlAttr(value)}"`);
+    }
   }
-  const newInstances = [];
-  const usedKeys = /* @__PURE__ */ new Set();
-  const built = [];
-  for (const entry of plan) {
-    const existing = oldByKey.get(entry.key);
-    if (existing !== void 0) {
-      usedKeys.add(entry.key);
-      const oldItem = existing.graphNode.getProp("_item");
-      if (!Object.is(oldItem, entry.item)) {
-        const newSig = entry.sig();
-        const oldSig = existing.graphNode.getProp("_sig");
-        if (!Object.is(oldSig, newSig)) {
-          const freshNode = entry.build();
-          built.push(freshNode);
-          patchExistingInstance(ctx, existing, freshNode);
-          reconcileItemChildren(ctx, existing, freshNode, mountFn);
-          existing.graphNode.setProp("_sig", newSig);
+  const props = el._properties;
+  if (props !== null) {
+    for (const [name, kind] of SERIALIZED_PROPERTY_ENTRIES) {
+      if (!props.has(name)) continue;
+      if (el.attributes.has(name)) continue;
+      const raw = props.get(name);
+      if (kind === "boolean") {
+        if (raw === true) parts.push(` ${name}`);
+      } else {
+        if (raw !== void 0 && raw !== null) {
+          parts.push(` ${name}="${escapeHtmlAttr(String(raw))}"`);
         }
-        existing.graphNode.setProp("_item", entry.item);
       }
-      newInstances.push(existing);
-    } else {
-      const freshNode = entry.build();
-      built.push(freshNode);
-      const inst = mountFn(freshNode, parentDom);
-      newInstances.push(inst);
     }
   }
-  const removed = [];
-  for (const inst of oldInstances) {
-    const key = inst.graphNode.key ?? inst.graphNode.id;
-    if (!usedKeys.has(key)) removed.push(inst);
-  }
-  for (const inst of removed) {
-    const parent = ctx.dom.parentNode(inst.domNode);
-    if (parent !== null) ctx.dom.removeChild(parent, inst.domNode);
-    inst.dispose();
+  const style = el._style;
+  if (style !== null && !style.isEmpty && !el.attributes.has("style")) {
+    parts.push(` style="${escapeHtmlAttr(style.toCss())}"`);
   }
-  reorderDomMinimal(ctx, parentDom, oldInstances, newInstances);
-  return { instances: newInstances, removed, built };
+  return parts.join("");
 }
-function reorderDomMinimal(ctx, parentDom, oldInstances, newInstances) {
-  const n = newInstances.length;
-  if (n === 0) return;
-  const oldIndexOf = /* @__PURE__ */ new Map();
-  for (let i = 0; i < oldInstances.length; i++) oldIndexOf.set(oldInstances[i], i);
-  const source = new Array(n);
-  let moved = false;
-  let lastSeen = -1;
-  for (let i = 0; i < n; i++) {
-    const oi = oldIndexOf.get(newInstances[i]);
-    if (oi === void 0) {
-      source[i] = -1;
-      moved = true;
-    } else {
-      source[i] = oi;
-      if (oi < lastSeen) moved = true;
-      else lastSeen = oi;
-    }
-  }
-  if (!moved) return;
-  const keep = longestIncreasingSubsequence(source);
-  let refNode = null;
-  for (let i = n - 1; i >= 0; i--) {
-    const domNode = newInstances[i].domNode;
-    if (source[i] === -1 || !keep.has(i)) {
-      if (ctx.dom.nextSibling(domNode) !== refNode) {
-        ctx.dom.insertBefore(parentDom, domNode, refNode);
+function serializeServerNode(node) {
+  switch (node.kind) {
+    case "text":
+      return escapeHtmlText(node.data);
+    case "comment":
+      return `<!--${node.data}-->`;
+    case "fragment":
+      return serializeChildren(node);
+    case "raw":
+      return node.html;
+    case "element": {
+      const el = node;
+      const tag = el.tagName;
+      const attrs = serializeAttributes(el);
+      if (VOID_ELEMENTS.has(tag)) {
+        return `<${tag}${attrs}>`;
       }
+      return `<${tag}${attrs}>${serializeChildren(el)}</${tag}>`;
     }
-    refNode = domNode;
   }
 }
-function longestIncreasingSubsequence(source) {
-  const keep = /* @__PURE__ */ new Set();
-  const n = source.length;
-  const tails = [];
-  const prev = new Array(n).fill(-1);
-  for (let i = 0; i < n; i++) {
-    const v = source[i];
-    if (v < 0) continue;
-    let lo = 0;
-    let hi = tails.length;
-    while (lo < hi) {
-      const mid = lo + hi >> 1;
-      if (source[tails[mid]] < v) lo = mid + 1;
-      else hi = mid;
+function serializeChildren(node) {
+  let out = "";
+  for (const child of node.children) {
+    out += serializeServerNode(child);
+  }
+  return out;
+}
+
+// ../dom/src/server-adapter.ts
+function asServer(node) {
+  return node;
+}
+function asParent(node) {
+  return node;
+}
+var ServerDOMAdapter = class {
+  createElement(tag, _ns) {
+    return new ServerElement(tag);
+  }
+  createTextNode(data) {
+    return new ServerText(data);
+  }
+  createComment(data) {
+    return new ServerComment(data);
+  }
+  createFragment() {
+    return new ServerFragment();
+  }
+  /**
+   * Create a verbatim pre-serialized HTML node (v1.7 static SSR plan, §6).
+   * Server-only: the browser adapter does not implement this, and the renderer
+   * fast path only invokes it when a static SSR plan is present (SSR). The
+   * stored HTML was produced by this same serializer, so it is emitted as-is.
+   */
+  createRawHTML(html) {
+    return new ServerRawHTML(html);
+  }
+  appendChild(parent, child) {
+    const p = asParent(parent);
+    const c = asServer(child);
+    this._detach(c);
+    c.parent = p;
+    p.children.push(c);
+  }
+  insertBefore(parent, child, reference) {
+    const p = asParent(parent);
+    const c = asServer(child);
+    this._detach(c);
+    c.parent = p;
+    if (reference === null) {
+      p.children.push(c);
+      return;
     }
-    if (lo > 0) prev[i] = tails[lo - 1];
-    tails[lo] = i;
+    const ref = asServer(reference);
+    const idx = p.children.indexOf(ref);
+    if (idx === -1) p.children.push(c);
+    else p.children.splice(idx, 0, c);
   }
-  let idx = tails.length > 0 ? tails[tails.length - 1] : -1;
-  while (idx >= 0) {
-    keep.add(idx);
-    idx = prev[idx];
+  removeChild(parent, child) {
+    const p = asParent(parent);
+    const c = asServer(child);
+    const idx = p.children.indexOf(c);
+    if (idx !== -1) {
+      p.children.splice(idx, 1);
+      c.parent = null;
+    }
   }
-  return keep;
-}
-function reconcileItemChildren(ctx, itemInstance, newItemNode, mountFn) {
-  const el = itemInstance.domNode;
-  if (!ctx.dom.isElement(el)) return;
-  const oldChildren = [...itemInstance.children];
-  const newChildNodes = [...newItemNode.children];
-  const nextChildren = [];
-  const kept = /* @__PURE__ */ new Set();
-  for (let i = 0; i < newChildNodes.length; i++) {
-    const newChild = newChildNodes[i];
-    const oldChild = oldChildren[i];
-    if (oldChild !== void 0 && oldChild.graphNode.type === newChild.type) {
-      patchExistingInstance(ctx, oldChild, newChild);
-      reconcileItemChildren(ctx, oldChild, newChild, mountFn);
-      nextChildren.push(oldChild);
-      kept.add(oldChild);
-    } else {
-      itemInstance.graphNode.appendChild(newChild);
-      const inst = mountFn(newChild, el);
-      nextChildren.push(inst);
+  replaceChild(parent, newChild, oldChild) {
+    const p = asParent(parent);
+    const nc = asServer(newChild);
+    const oc = asServer(oldChild);
+    const idx = p.children.indexOf(oc);
+    if (idx === -1) return;
+    this._detach(nc);
+    nc.parent = p;
+    p.children.splice(idx, 1, nc);
+    oc.parent = null;
+  }
+  _detach(node) {
+    if (node.parent !== null) {
+      const siblings = node.parent.children;
+      const idx = siblings.indexOf(node);
+      if (idx !== -1) siblings.splice(idx, 1);
+      node.parent = null;
     }
   }
-  for (const old of oldChildren) {
-    if (kept.has(old)) continue;
-    const parent = ctx.dom.parentNode(old.domNode);
-    if (parent !== null) ctx.dom.removeChild(parent, old.domNode);
-    old.dispose();
-    forgetInstanceTree(ctx, old);
-    ctx.graph.detachNode(old.graphNode);
+  setAttribute(element, name, value) {
+    element.attributes.set(name, value);
+  }
+  removeAttribute(element, name) {
+    element.attributes.delete(name);
+  }
+  getAttribute(element, name) {
+    return element.attributes.get(name) ?? null;
   }
-  reorderDom(ctx, el, nextChildren);
-  itemInstance.children.length = 0;
-  for (const c of nextChildren) itemInstance.children.push(c);
-  for (const c of [...itemInstance.graphNode.children]) {
-    itemInstance.graphNode.removeChild(c);
+  setProperty(element, name, value) {
+    element.properties.set(name, value);
   }
-  for (const c of nextChildren) itemInstance.graphNode.appendChild(c.graphNode);
-}
-function reorderDom(ctx, parentDom, instances) {
-  let referenceNode = null;
-  for (let i = instances.length - 1; i >= 0; i--) {
-    const inst = instances[i];
-    if (inst === void 0) continue;
-    const domNode = inst.domNode;
-    const currentNext = ctx.dom.nextSibling(domNode);
-    if (currentNext !== referenceNode) {
-      ctx.dom.insertBefore(parentDom, domNode, referenceNode);
+  setTextContent(node, text) {
+    const n = asServer(node);
+    if (n.kind === "element" || n.kind === "fragment") {
+      const el = n;
+      el.children.length = 0;
+      const t = new ServerText(text);
+      t.parent = el;
+      el.children.push(t);
+    } else if (n.kind === "text") {
+      n.data = text;
     }
-    referenceNode = domNode;
   }
-}
-function forgetInstanceTree(ctx, instance) {
-  ctx.instances.delete(instance.graphNode.id);
-  for (const child of instance.children) forgetInstanceTree(ctx, child);
-}
-function patchExistingInstance(ctx, instance, newNode) {
-  const oldNode = instance.graphNode;
-  for (const [key, newVal] of Object.entries(newNode.props)) {
-    const oldVal = oldNode.getProp(key);
-    if (!Object.is(oldVal, newVal)) {
-      patchNode(ctx, instance.graphNode, key, newVal);
+  getTextContent(node) {
+    const n = asServer(node);
+    if (n.kind === "text") return n.data;
+    if (n.kind === "element" || n.kind === "fragment") {
+      let out = "";
+      for (const c of n.children) {
+        out += this.getTextContent(c) ?? "";
+      }
+      return out;
     }
+    return null;
   }
-}
-
-// ../renderer/src/mount.ts
-var SKIP_PROP_KEYS = /* @__PURE__ */ new Set([
-  "text",
-  "label",
-  "level",
-  "inputType",
-  "src",
-  "alt",
-  "href",
-  "external",
-  "value",
-  "placeholder",
-  "disabled",
-  "_renderKey",
-  "key",
-  "name"
-]);
-function mountGraph(ctx) {
-  return mountNode(ctx, ctx.graph.root, ctx.container);
-}
-function mountNode(ctx, graphNode, parentDom) {
-  const { dom, graph } = ctx;
-  const staticHTML = ctx.staticHTML;
-  if (staticHTML !== void 0 && dom.createRawHTML !== void 0) {
-    const precomputed = staticHTML.get(graphNode.id);
-    if (precomputed !== void 0) {
-      const raw = dom.createRawHTML(precomputed);
-      dom.appendChild(parentDom, raw);
-      const instance2 = new NodeInstance(graphNode, raw);
-      ctx.instances.set(graphNode.id, instance2);
-      return instance2;
-    }
+  // Server nodes never dispatch events — listeners are a no-op on the server.
+  addEventListener() {
   }
-  if (graphNode.type === "application") {
-    const instance2 = new NodeInstance(graphNode, parentDom);
-    ctx.instances.set(graphNode.id, instance2);
-    for (const child of graphNode.children) {
-      const childInstance = mountNode(ctx, child, parentDom);
-      instance2.addChild(childInstance);
-    }
-    return instance2;
+  removeEventListener() {
   }
-  if (graphNode.type === "text") {
-    const text = String(graphNode.getProp("text") ?? "");
-    const el2 = dom.createElement("span");
-    const textNode = dom.createTextNode(text);
-    dom.appendChild(el2, textNode);
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    wireEvents(dom, graph, graphNode, el2, instance2);
-    if (graphNode.stateRefs.length !== 0) {
-      wireSignalBindings(ctx, graphNode, instance2, textUpdate(dom, el2, textNode));
-    }
-    dom.appendChild(parentDom, el2);
-    return instance2;
+  querySelector() {
+    return null;
   }
-  if (graphNode.type === "heading") {
-    const level = graphNode.getProp("level") ?? 1;
-    const tag2 = `h${level}`;
-    const el2 = dom.createElement(tag2);
-    const text = String(graphNode.getProp("text") ?? "");
-    dom.setTextContent(el2, text);
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    wireEvents(dom, graph, graphNode, el2, instance2);
-    if (graphNode.stateRefs.length !== 0) {
-      wireSignalBindings(ctx, graphNode, instance2, headingUpdate(dom, el2));
-    }
-    dom.appendChild(parentDom, el2);
-    return instance2;
+  querySelectorAll() {
+    return [];
   }
-  if (graphNode.type === "input") {
-    const el2 = dom.createElement("input");
-    const inputType = String(graphNode.getProp("inputType") ?? "text");
-    dom.setAttribute(el2, "type", inputType);
-    const placeholder = graphNode.getProp("placeholder");
-    if (placeholder !== void 0) dom.setAttribute(el2, "placeholder", String(placeholder));
-    const value = graphNode.getProp("value");
-    if (value !== void 0) dom.setProperty(el2, "value", String(value));
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    wireEvents(dom, graph, graphNode, el2, instance2);
-    if (graphNode.stateRefs.length !== 0) {
-      wireSignalBindings(ctx, graphNode, instance2, inputUpdate(dom, el2));
-    }
-    dom.appendChild(parentDom, el2);
-    return instance2;
+  getElementById() {
+    return null;
   }
-  if (graphNode.type === "image") {
-    const el2 = dom.createElement("img");
-    const src = graphNode.getProp("src");
-    const alt = graphNode.getProp("alt");
-    if (src !== void 0) dom.setAttribute(el2, "src", String(src));
-    if (alt !== void 0) dom.setAttribute(el2, "alt", String(alt));
-    const width = graphNode.getProp("width");
-    const height = graphNode.getProp("height");
-    if (width !== void 0) dom.setAttribute(el2, "width", String(width));
-    if (height !== void 0) dom.setAttribute(el2, "height", String(height));
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    dom.appendChild(parentDom, el2);
-    return instance2;
+  focus() {
   }
-  if (graphNode.type === "link") {
-    const el2 = dom.createElement("a");
-    const href = graphNode.getProp("href");
-    const label = graphNode.getProp("label");
-    const external = graphNode.getProp("external");
-    if (href !== void 0) dom.setAttribute(el2, "href", String(href));
-    if (label !== void 0) dom.setTextContent(el2, String(label));
-    if (external === true) {
-      dom.setAttribute(el2, "target", "_blank");
-      dom.setAttribute(el2, "rel", "noopener noreferrer");
-    }
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    wireEvents(dom, graph, graphNode, el2, instance2);
-    dom.appendChild(parentDom, el2);
-    return instance2;
+  body() {
+    return null;
   }
-  if (graphNode.type === "button") {
-    const el2 = dom.createElement("button");
-    const label = graphNode.getProp("label");
-    if (label !== void 0) dom.setTextContent(el2, String(label));
-    const disabled = graphNode.getProp("disabled");
-    if (disabled === true) dom.setAttribute(el2, "disabled", "");
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    wireEvents(dom, graph, graphNode, el2, instance2);
-    if (graphNode.stateRefs.length !== 0) {
-      wireSignalBindings(ctx, graphNode, instance2, buttonUpdate(dom, el2));
+  activeElement() {
+    return null;
+  }
+  contains(_ancestor, _node) {
+    return false;
+  }
+  matches(_element, _selector) {
+    return false;
+  }
+  isElement(node) {
+    return asServer(node).kind === "element";
+  }
+  isTextNode(node) {
+    return asServer(node).kind === "text";
+  }
+  tagName(element) {
+    return element.tagName;
+  }
+  parentNode(node) {
+    return asServer(node).parent ?? null;
+  }
+  nextSibling(node) {
+    const n = asServer(node);
+    const parent = n.parent;
+    if (parent === null) return null;
+    const idx = parent.children.indexOf(n);
+    if (idx === -1 || idx + 1 >= parent.children.length) return null;
+    return parent.children[idx + 1];
+  }
+  firstChild(node) {
+    const n = asServer(node);
+    if (n.kind === "element" || n.kind === "fragment") {
+      const el = n;
+      return el.children[0] ?? null;
     }
-    dom.appendChild(parentDom, el2);
-    return instance2;
+    return null;
   }
-  if (graphNode.type === "reactive-list" || graphNode.type === "conditional") {
-    const tag2 = resolveTag(graphNode.type);
-    const el2 = dom.createElement(tag2);
-    applyNodeProps(ctx, graphNode, el2);
-    const instance2 = new NodeInstance(graphNode, el2);
-    ctx.instances.set(graphNode.id, instance2);
-    for (const child of graphNode.children) {
-      const childInstance = mountNode(ctx, child, el2);
-      instance2.addChild(childInstance);
+  childNodes(node) {
+    const n = asServer(node);
+    if (n.kind === "element" || n.kind === "fragment") {
+      return n.children;
     }
-    dom.appendChild(parentDom, el2);
-    wireReactiveList(ctx, graphNode, instance2, el2);
-    return instance2;
+    return [];
   }
-  const tag = resolveTag(graphNode.type);
-  const el = dom.createElement(tag);
-  applyNodeProps(ctx, graphNode, el);
-  if (graphNode.type === "list-item") {
-    const itemKey = graphNode.getProp("key");
-    if (itemKey !== void 0) {
-      dom.setAttribute(el, "data-streetui-key", String(itemKey));
+  // ── Server-only ────────────────────────────────────────────────────────────
+  /** Serialize a node's children ("inner HTML") to an HTML string. */
+  serializeInner(node) {
+    const n = asServer(node);
+    if (n.kind === "element" || n.kind === "fragment") {
+      return serializeChildren(n);
     }
+    return "";
   }
-  const instance = new NodeInstance(graphNode, el);
-  ctx.instances.set(graphNode.id, instance);
-  if (graphNode.type === "form") {
-    wireEvents(dom, graph, graphNode, el, instance);
-  }
-  for (const child of graphNode.children) {
-    const childInstance = mountNode(ctx, child, el);
-    instance.addChild(childInstance);
+  /** Serialize a node (including itself) to an HTML string. */
+  serializeOuter(node) {
+    return serializeServerNode(asServer(node));
   }
-  dom.appendChild(parentDom, el);
-  return instance;
+};
+
+// ../dom/src/focus.ts
+var FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function focusById(dom, root, id) {
+  const el = dom.querySelector(root, `[id="${id}"]`);
+  if (el === null) return false;
+  dom.focus(el);
+  return true;
 }
-function textUpdate(dom, el, textNode) {
-  return (propKey, value) => {
-    if (propKey === "text") {
-      dom.setTextContent(textNode, String(value ?? ""));
-    } else {
-      applyProp(dom, el, propKey, value);
-    }
-  };
+function focusFirst(dom, container, selector = FOCUSABLE_SELECTOR) {
+  const el = dom.querySelector(container, selector);
+  if (el === null) return false;
+  dom.focus(el);
+  return true;
 }
-function headingUpdate(dom, el) {
-  return (propKey, value) => {
-    if (propKey === "text") {
-      dom.setTextContent(el, String(value ?? ""));
-    } else {
-      applyProp(dom, el, propKey, value);
-    }
-  };
+function getFocusable(dom, container, selector = FOCUSABLE_SELECTOR) {
+  return Array.from(dom.querySelectorAll(container, selector)).filter(
+    (el) => dom.matches(el, selector)
+  );
 }
-function inputUpdate(dom, el) {
-  return (propKey, value) => {
-    if (propKey === "value") {
-      dom.setProperty(el, "value", String(value ?? ""));
-    } else {
-      applyProp(dom, el, propKey, value);
+function saveFocus(dom) {
+  return dom.activeElement();
+}
+function restoreFocus(dom, saved) {
+  if (saved !== null) dom.focus(saved);
+}
+function focusInitial(dom, container, initialFocusId) {
+  if (initialFocusId !== void 0 && focusById(dom, container, initialFocusId)) return;
+  focusFirst(dom, container);
+}
+function trapFocus(dom, container) {
+  const onKeydown = (event) => {
+    if (event.key !== "Tab") return;
+    const items = getFocusable(dom, container);
+    if (items.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = dom.activeElement();
+    if (active === null || !dom.contains(container, active)) {
+      event.preventDefault();
+      dom.focus(first);
+    } else if (event.shiftKey && active === first) {
+      event.preventDefault();
+      dom.focus(last);
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      dom.focus(first);
     }
   };
+  dom.addEventListener(container, "keydown", onKeydown);
+  return () => dom.removeEventListener(container, "keydown", onKeydown);
 }
-function buttonUpdate(dom, el) {
-  return (propKey, value) => {
-    if (propKey === "label") {
-      dom.setTextContent(el, String(value ?? ""));
-    } else if (propKey === "disabled") {
-      if (value === true) {
-        dom.setAttribute(el, "disabled", "");
-      } else {
-        dom.removeAttribute(el, "disabled");
-      }
-    } else {
-      applyProp(dom, el, propKey, value);
+function containFocus(dom, container) {
+  const body = dom.body();
+  if (body === null) return () => {
+  };
+  const onFocusIn = (event) => {
+    const target = event.target;
+    if (target !== null && !dom.contains(container, target)) {
+      focusFirst(dom, container);
     }
   };
+  dom.addEventListener(body, "focusin", onFocusIn);
+  return () => dom.removeEventListener(body, "focusin", onFocusIn);
 }
-function applyNodeProps(ctx, graphNode, el) {
-  const props = graphNode.props;
-  for (const key in props) {
-    if (!Object.hasOwn(props, key)) continue;
-    if (SKIP_PROP_KEYS.has(key)) continue;
-    applyProp(ctx.dom, el, key, props[key]);
-  }
+function onEscape(dom, target, handler) {
+  const onKeydown = (event) => {
+    if (event.key === "Escape") handler();
+  };
+  dom.addEventListener(target, "keydown", onKeydown);
+  return () => dom.removeEventListener(target, "keydown", onKeydown);
 }
-function wireSignalBindings(ctx, graphNode, instance, onUpdate) {
-  if (graphNode.stateRefs.length === 0) return;
-  for (const stateRef of graphNode.stateRefs) {
-    const signalKey = `__signal__${stateRef.signalId}`;
-    const maybeSig = ctx.graph.getHandler(signalKey);
-    if (maybeSig === void 0 || typeof maybeSig.subscribe !== "function") continue;
-    const unsub = maybeSig.subscribe((value) => {
-      onUpdate(stateRef.propKey, value);
-    });
-    instance.trackCleanup(unsub);
-  }
+
+// ../renderer/src/tag-map.ts
+var TAG_MAP = {
+  application: "div",
+  page: "div",
+  section: "section",
+  container: "div",
+  heading: "h1",
+  text: "span",
+  button: "button",
+  input: "input",
+  form: "form",
+  list: "ul",
+  "list-item": "li",
+  image: "img",
+  link: "a",
+  component: "div",
+  slot: "div",
+  fragment: "div",
+  "reactive-list": "ul",
+  // A portal renders as a neutral inline anchor <div> at its declaration site;
+  // its children are relocated to a document.body container on the browser
+  // (see the portal branch in mount.ts). On the server (no body) it renders
+  // inline, so the anchor tag is what SSR/hydration positionally match on.
+  portal: "div"
+};
+function resolveTag(type) {
+  return TAG_MAP[type] ?? "div";
 }
-function wireReactiveList(ctx, graphNode, instance, el) {
-  const plan = ctx.graph.getHandler(`__listplan__${graphNode.id}`);
-  const build = ctx.graph.getHandler(`__listbuild__${graphNode.id}`);
-  if (plan === void 0 && build === void 0) return;
-  for (const stateRef of graphNode.stateRefs) {
-    if (stateRef.propKey !== "items") continue;
-    const sig = ctx.graph.getHandler(`__signal__${stateRef.signalId}`);
-    if (sig === void 0 || typeof sig.subscribe !== "function") continue;
-    const unsub = sig.subscribe((value) => {
-      if (plan !== void 0) {
-        reconcileReactiveListByPlan(ctx, graphNode, instance, el, plan(value));
+
+// ../renderer/src/patch.ts
+function patchNode(ctx, graphNode, propKey, newValue) {
+  const instance = ctx.instances.get(graphNode.id);
+  if (instance === void 0) return;
+  const domNode = instance.domNode;
+  if (!ctx.dom.isElement(domNode)) return;
+  const oldValue = graphNode.getProp(propKey);
+  switch (propKey) {
+    case "text":
+      if (!Object.is(oldValue, newValue)) {
+        ctx.dom.setTextContent(domNode, String(newValue ?? ""));
+        graphNode.setProp("text", String(newValue ?? ""));
+      }
+      break;
+    case "label":
+      if (!Object.is(oldValue, newValue)) {
+        ctx.dom.setTextContent(domNode, String(newValue ?? ""));
+        graphNode.setProp("label", String(newValue ?? ""));
+      }
+      break;
+    case "disabled":
+      if (newValue === true) {
+        ctx.dom.setAttribute(domNode, "disabled", "");
       } else {
-        reconcileReactiveList(ctx, graphNode, instance, el, build(value));
+        ctx.dom.removeAttribute(domNode, "disabled");
       }
-    });
-    instance.trackCleanup(unsub);
-  }
-}
-function reconcileReactiveListByPlan(ctx, listNode, listInstance, listEl, plan) {
-  const oldInstances = [...listInstance.children];
-  const result = reconcileChildrenByPlan(
-    ctx,
-    listEl,
-    oldInstances,
-    plan,
-    (node, parent) => mountNode(ctx, node, parent)
-  );
-  listInstance.children.length = 0;
-  for (const inst of result.instances) listInstance.children.push(inst);
-  for (const removed of result.removed) {
-    forgetInstance(ctx, removed);
-    ctx.graph.detachNode(removed.graphNode);
-  }
-  const adopted = new Set(result.instances.map((i) => i.graphNode));
-  for (const node of result.built ?? []) {
-    if (!adopted.has(node)) ctx.graph.detachNode(node);
-  }
-  for (const child of [...listNode.children]) listNode.removeChild(child);
-  for (const inst of result.instances) listNode.appendChild(inst.graphNode);
-}
-function reconcileReactiveList(ctx, listNode, listInstance, listEl, newNodes) {
-  const oldInstances = [...listInstance.children];
-  const result = reconcileChildren(
-    ctx,
-    listEl,
-    oldInstances,
-    newNodes,
-    (node, parent) => mountNode(ctx, node, parent)
-  );
-  listInstance.children.length = 0;
-  for (const inst of result.instances) listInstance.children.push(inst);
-  for (const removed of result.removed) {
-    forgetInstance(ctx, removed);
-    ctx.graph.detachNode(removed.graphNode);
-  }
-  const adopted = new Set(result.instances.map((i) => i.graphNode));
-  for (const built of newNodes) {
-    if (!adopted.has(built)) ctx.graph.detachNode(built);
-  }
-  for (const child of [...listNode.children]) listNode.removeChild(child);
-  for (const inst of result.instances) listNode.appendChild(inst.graphNode);
-}
-function forgetInstance(ctx, instance) {
-  ctx.instances.delete(instance.graphNode.id);
-  for (const child of instance.children) forgetInstance(ctx, child);
-}
-
-// ../dom/src/server-node.ts
-var ServerStyle = class {
-  declarations = /* @__PURE__ */ new Map();
-  setProperty(name, value) {
-    this.declarations.set(name, value);
-  }
-  get isEmpty() {
-    return this.declarations.size === 0;
-  }
-  toCss() {
-    return [...this.declarations.entries()].map(([k, v]) => `${k}: ${v}`).join("; ");
-  }
-};
-var ServerText = class {
-  kind = "text";
-  parent = null;
-  data;
-  constructor(data) {
-    this.data = data;
-  }
-};
-var ServerComment = class {
-  kind = "comment";
-  parent = null;
-  data;
-  constructor(data) {
-    this.data = data;
-  }
-};
-var ServerFragment = class {
-  kind = "fragment";
-  parent = null;
-  children = [];
-};
-var ServerRawHTML = class {
-  kind = "raw";
-  parent = null;
-  html;
-  constructor(html) {
-    this.html = html;
-  }
-};
-var ServerElement = class {
-  kind = "element";
-  parent = null;
-  tagName;
-  attributes = /* @__PURE__ */ new Map();
-  children = [];
-  // Lazily-allocated stores. On the 10k-row SSR corpus ~0% of elements carry JS
-  // properties or inline styles (measured, §5: 1 of 80,029 elements uses
-  // `properties`, 0 use `style`), so eagerly allocating a `properties` Map plus
-  // a `ServerStyle` (which itself holds a Map) per element wasted ~240k
-  // allocations per /users render — all in the dominant mount phase. These are
-  // created on first WRITE via the `properties`/`style` getters; the serializer
-  // reads the raw `_properties`/`_style` fields so a READ never forces an
-  // allocation. Output is byte-identical: an unset store previously serialized
-  // to nothing (empty `properties.has(...)` / `style.isEmpty`), and a null store
-  // is skipped the same way.
-  _properties = null;
-  _style = null;
-  constructor(tagName) {
-    this.tagName = tagName.toLowerCase();
+      graphNode.setProp("disabled", Boolean(newValue));
+      break;
+    case "value":
+      if (!Object.is(oldValue, newValue)) {
+        ctx.dom.setProperty(domNode, "value", String(newValue ?? ""));
+        graphNode.setProp("value", String(newValue ?? ""));
+      }
+      break;
+    default:
+      patchProp(ctx.dom, domNode, propKey, oldValue, newValue);
+      graphNode.setProp(propKey, newValue);
+      break;
   }
-  /** JS properties set via `setProperty` (e.g. input `value`, `checked`). Allocated on first access. */
-  get properties() {
-    return this._properties ??= /* @__PURE__ */ new Map();
+}
+
+// ../renderer/src/reconciliation.ts
+function reconcileChildren(ctx, parentDom, oldInstances, newNodes, mountFn) {
+  const oldByKey = /* @__PURE__ */ new Map();
+  for (const inst of oldInstances) {
+    const key = inst.graphNode.key ?? inst.graphNode.id;
+    oldByKey.set(key, inst);
   }
-  /** Inline-style holder mirroring `element.style`. Allocated on first access. */
-  get style() {
-    return this._style ??= new ServerStyle();
+  const newInstances = [];
+  const usedKeys = /* @__PURE__ */ new Set();
+  for (const newNode of newNodes) {
+    const key = newNode.key ?? newNode.id;
+    const existing = oldByKey.get(key);
+    if (existing !== void 0) {
+      usedKeys.add(key);
+      const oldSig = existing.graphNode.getProp("_sig");
+      const newSig = newNode.getProp("_sig");
+      patchExistingInstance(ctx, existing, newNode);
+      if (!Object.is(oldSig, newSig)) {
+        reconcileItemChildren(ctx, existing, newNode, mountFn);
+      }
+      newInstances.push(existing);
+    } else {
+      const inst = mountFn(newNode, parentDom);
+      newInstances.push(inst);
+    }
   }
-};
-var VOID_ELEMENTS = /* @__PURE__ */ new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-var SERIALIZED_PROPERTIES = {
-  value: "attr",
-  checked: "boolean",
-  selected: "boolean"
-};
-var SERIALIZED_PROPERTY_ENTRIES = Object.entries(SERIALIZED_PROPERTIES);
-var TEXT_SPECIAL = /[&<>]/;
-var ATTR_SPECIAL = /[&<>"]/;
-function escapeHtmlText(value) {
-  if (!TEXT_SPECIAL.test(value)) return value;
-  let out = "";
-  let last = 0;
-  for (let i = 0; i < value.length; i++) {
-    let esc;
-    switch (value.charCodeAt(i)) {
-      case 38:
-        esc = "&amp;";
-        break;
-      // &
-      case 60:
-        esc = "&lt;";
-        break;
-      // <
-      case 62:
-        esc = "&gt;";
-        break;
-      // >
-      default:
-        continue;
+  const removed = [];
+  for (const inst of oldInstances) {
+    const key = inst.graphNode.key ?? inst.graphNode.id;
+    if (!usedKeys.has(key)) {
+      removed.push(inst);
     }
-    out += value.slice(last, i) + esc;
-    last = i + 1;
   }
-  return out + value.slice(last);
+  for (const inst of removed) {
+    const parent = ctx.dom.parentNode(inst.domNode);
+    if (parent !== null) {
+      ctx.dom.removeChild(parent, inst.domNode);
+    }
+    inst.dispose();
+  }
+  reorderDom(ctx, parentDom, newInstances);
+  return { instances: newInstances, removed };
 }
-function escapeHtmlAttr(value) {
-  if (!ATTR_SPECIAL.test(value)) return value;
-  let out = "";
-  let last = 0;
-  for (let i = 0; i < value.length; i++) {
-    let esc;
-    switch (value.charCodeAt(i)) {
-      case 38:
-        esc = "&amp;";
-        break;
-      // &
-      case 60:
-        esc = "&lt;";
-        break;
-      // <
-      case 62:
-        esc = "&gt;";
-        break;
-      // >
-      case 34:
-        esc = "&quot;";
-        break;
-      // "
-      default:
-        continue;
+function reconcileChildrenByPlan(ctx, parentDom, oldInstances, plan, mountFn) {
+  const oldByKey = /* @__PURE__ */ new Map();
+  for (const inst of oldInstances) {
+    oldByKey.set(inst.graphNode.key ?? inst.graphNode.id, inst);
+  }
+  const newInstances = [];
+  const usedKeys = /* @__PURE__ */ new Set();
+  const built = [];
+  for (const entry of plan) {
+    const existing = oldByKey.get(entry.key);
+    if (existing !== void 0) {
+      usedKeys.add(entry.key);
+      const oldItem = existing.graphNode.getProp("_item");
+      if (!Object.is(oldItem, entry.item)) {
+        const newSig = entry.sig();
+        const oldSig = existing.graphNode.getProp("_sig");
+        if (!Object.is(oldSig, newSig)) {
+          const freshNode = entry.build();
+          built.push(freshNode);
+          patchExistingInstance(ctx, existing, freshNode);
+          reconcileItemChildren(ctx, existing, freshNode, mountFn);
+          existing.graphNode.setProp("_sig", newSig);
+        }
+        existing.graphNode.setProp("_item", entry.item);
+      }
+      newInstances.push(existing);
+    } else {
+      const freshNode = entry.build();
+      built.push(freshNode);
+      const inst = mountFn(freshNode, parentDom);
+      newInstances.push(inst);
     }
-    out += value.slice(last, i) + esc;
-    last = i + 1;
   }
-  return out + value.slice(last);
+  const removed = [];
+  for (const inst of oldInstances) {
+    const key = inst.graphNode.key ?? inst.graphNode.id;
+    if (!usedKeys.has(key)) removed.push(inst);
+  }
+  for (const inst of removed) {
+    const parent = ctx.dom.parentNode(inst.domNode);
+    if (parent !== null) ctx.dom.removeChild(parent, inst.domNode);
+    inst.dispose();
+  }
+  reorderDomMinimal(ctx, parentDom, oldInstances, newInstances);
+  return { instances: newInstances, removed, built };
 }
-function serializeAttributes(el) {
-  const parts = [];
-  for (const [name, value] of el.attributes) {
-    if (value === "") {
-      parts.push(` ${name}`);
+function reorderDomMinimal(ctx, parentDom, oldInstances, newInstances) {
+  const n = newInstances.length;
+  if (n === 0) return;
+  const oldIndexOf = /* @__PURE__ */ new Map();
+  for (let i = 0; i < oldInstances.length; i++) oldIndexOf.set(oldInstances[i], i);
+  const source = new Array(n);
+  let moved = false;
+  let lastSeen = -1;
+  for (let i = 0; i < n; i++) {
+    const oi = oldIndexOf.get(newInstances[i]);
+    if (oi === void 0) {
+      source[i] = -1;
+      moved = true;
     } else {
-      parts.push(` ${name}="${escapeHtmlAttr(value)}"`);
+      source[i] = oi;
+      if (oi < lastSeen) moved = true;
+      else lastSeen = oi;
     }
   }
-  const props = el._properties;
-  if (props !== null) {
-    for (const [name, kind] of SERIALIZED_PROPERTY_ENTRIES) {
-      if (!props.has(name)) continue;
-      if (el.attributes.has(name)) continue;
-      const raw = props.get(name);
-      if (kind === "boolean") {
-        if (raw === true) parts.push(` ${name}`);
-      } else {
-        if (raw !== void 0 && raw !== null) {
-          parts.push(` ${name}="${escapeHtmlAttr(String(raw))}"`);
-        }
+  if (!moved) return;
+  const keep = longestIncreasingSubsequence(source);
+  let refNode = null;
+  for (let i = n - 1; i >= 0; i--) {
+    const domNode = newInstances[i].domNode;
+    if (source[i] === -1 || !keep.has(i)) {
+      if (ctx.dom.nextSibling(domNode) !== refNode) {
+        ctx.dom.insertBefore(parentDom, domNode, refNode);
       }
     }
+    refNode = domNode;
+  }
+}
+function longestIncreasingSubsequence(source) {
+  const keep = /* @__PURE__ */ new Set();
+  const n = source.length;
+  const tails = [];
+  const prev = new Array(n).fill(-1);
+  for (let i = 0; i < n; i++) {
+    const v = source[i];
+    if (v < 0) continue;
+    let lo = 0;
+    let hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (source[tails[mid]] < v) lo = mid + 1;
+      else hi = mid;
+    }
+    if (lo > 0) prev[i] = tails[lo - 1];
+    tails[lo] = i;
+  }
+  let idx = tails.length > 0 ? tails[tails.length - 1] : -1;
+  while (idx >= 0) {
+    keep.add(idx);
+    idx = prev[idx];
+  }
+  return keep;
+}
+function reconcileItemChildren(ctx, itemInstance, newItemNode, mountFn) {
+  const el = itemInstance.domNode;
+  if (!ctx.dom.isElement(el)) return;
+  const oldChildren = [...itemInstance.children];
+  const newChildNodes = [...newItemNode.children];
+  const nextChildren = [];
+  const kept = /* @__PURE__ */ new Set();
+  for (let i = 0; i < newChildNodes.length; i++) {
+    const newChild = newChildNodes[i];
+    const oldChild = oldChildren[i];
+    if (oldChild !== void 0 && oldChild.graphNode.type === newChild.type) {
+      patchExistingInstance(ctx, oldChild, newChild);
+      reconcileItemChildren(ctx, oldChild, newChild, mountFn);
+      nextChildren.push(oldChild);
+      kept.add(oldChild);
+    } else {
+      itemInstance.graphNode.appendChild(newChild);
+      const inst = mountFn(newChild, el);
+      nextChildren.push(inst);
+    }
   }
-  const style = el._style;
-  if (style !== null && !style.isEmpty && !el.attributes.has("style")) {
-    parts.push(` style="${escapeHtmlAttr(style.toCss())}"`);
+  for (const old of oldChildren) {
+    if (kept.has(old)) continue;
+    const parent = ctx.dom.parentNode(old.domNode);
+    if (parent !== null) ctx.dom.removeChild(parent, old.domNode);
+    old.dispose();
+    forgetInstanceTree(ctx, old);
+    ctx.graph.detachNode(old.graphNode);
   }
-  return parts.join("");
+  reorderDom(ctx, el, nextChildren);
+  itemInstance.children.length = 0;
+  for (const c of nextChildren) itemInstance.children.push(c);
+  for (const c of [...itemInstance.graphNode.children]) {
+    itemInstance.graphNode.removeChild(c);
+  }
+  for (const c of nextChildren) itemInstance.graphNode.appendChild(c.graphNode);
 }
-function serializeServerNode(node) {
-  switch (node.kind) {
-    case "text":
-      return escapeHtmlText(node.data);
-    case "comment":
-      return `<!--${node.data}-->`;
-    case "fragment":
-      return serializeChildren(node);
-    case "raw":
-      return node.html;
-    case "element": {
-      const el = node;
-      const tag = el.tagName;
-      const attrs = serializeAttributes(el);
-      if (VOID_ELEMENTS.has(tag)) {
-        return `<${tag}${attrs}>`;
-      }
-      return `<${tag}${attrs}>${serializeChildren(el)}</${tag}>`;
+function reorderDom(ctx, parentDom, instances) {
+  let referenceNode = null;
+  for (let i = instances.length - 1; i >= 0; i--) {
+    const inst = instances[i];
+    if (inst === void 0) continue;
+    const domNode = inst.domNode;
+    const currentNext = ctx.dom.nextSibling(domNode);
+    if (currentNext !== referenceNode) {
+      ctx.dom.insertBefore(parentDom, domNode, referenceNode);
     }
+    referenceNode = domNode;
   }
 }
-function serializeChildren(node) {
-  let out = "";
-  for (const child of node.children) {
-    out += serializeServerNode(child);
+function forgetInstanceTree(ctx, instance) {
+  ctx.instances.delete(instance.graphNode.id);
+  for (const child of instance.children) forgetInstanceTree(ctx, child);
+}
+function patchExistingInstance(ctx, instance, newNode) {
+  const oldNode = instance.graphNode;
+  for (const [key, newVal] of Object.entries(newNode.props)) {
+    const oldVal = oldNode.getProp(key);
+    if (!Object.is(oldVal, newVal)) {
+      patchNode(ctx, instance.graphNode, key, newVal);
+    }
   }
-  return out;
 }
 
-// ../dom/src/server-adapter.ts
-function asServer(node) {
-  return node;
-}
-function asParent(node) {
-  return node;
+// ../renderer/src/mount.ts
+var SKIP_PROP_KEYS = /* @__PURE__ */ new Set([
+  "text",
+  "label",
+  "level",
+  "inputType",
+  "src",
+  "alt",
+  "href",
+  "external",
+  "value",
+  "placeholder",
+  "disabled",
+  "_renderKey",
+  "key",
+  "name"
+]);
+function mountGraph(ctx) {
+  return mountNode(ctx, ctx.graph.root, ctx.container);
 }
-var ServerDOMAdapter = class {
-  createElement(tag, _ns) {
-    return new ServerElement(tag);
-  }
-  createTextNode(data) {
-    return new ServerText(data);
-  }
-  createComment(data) {
-    return new ServerComment(data);
+function mountNode(ctx, graphNode, parentDom) {
+  const { dom, graph } = ctx;
+  const staticHTML = ctx.staticHTML;
+  if (staticHTML !== void 0 && dom.createRawHTML !== void 0) {
+    const precomputed = staticHTML.get(graphNode.id);
+    if (precomputed !== void 0) {
+      const raw = dom.createRawHTML(precomputed);
+      dom.appendChild(parentDom, raw);
+      const instance2 = new NodeInstance(graphNode, raw);
+      ctx.instances.set(graphNode.id, instance2);
+      return instance2;
+    }
   }
-  createFragment() {
-    return new ServerFragment();
+  if (graphNode.type === "application") {
+    const instance2 = new NodeInstance(graphNode, parentDom);
+    ctx.instances.set(graphNode.id, instance2);
+    for (const child of graphNode.children) {
+      const childInstance = mountNode(ctx, child, parentDom);
+      instance2.addChild(childInstance);
+    }
+    return instance2;
   }
-  /**
-   * Create a verbatim pre-serialized HTML node (v1.7 static SSR plan, §6).
-   * Server-only: the browser adapter does not implement this, and the renderer
-   * fast path only invokes it when a static SSR plan is present (SSR). The
-   * stored HTML was produced by this same serializer, so it is emitted as-is.
-   */
-  createRawHTML(html) {
-    return new ServerRawHTML(html);
+  if (graphNode.type === "text") {
+    const text = String(graphNode.getProp("text") ?? "");
+    const el2 = dom.createElement("span");
+    const textNode = dom.createTextNode(text);
+    dom.appendChild(el2, textNode);
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    wireEvents(dom, graph, graphNode, el2, instance2);
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, textUpdate(dom, el2, textNode));
+    }
+    dom.appendChild(parentDom, el2);
+    return instance2;
   }
-  appendChild(parent, child) {
-    const p = asParent(parent);
-    const c = asServer(child);
-    this._detach(c);
-    c.parent = p;
-    p.children.push(c);
+  if (graphNode.type === "heading") {
+    const level = graphNode.getProp("level") ?? 1;
+    const tag2 = `h${level}`;
+    const el2 = dom.createElement(tag2);
+    const text = String(graphNode.getProp("text") ?? "");
+    dom.setTextContent(el2, text);
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    wireEvents(dom, graph, graphNode, el2, instance2);
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, headingUpdate(dom, el2));
+    }
+    dom.appendChild(parentDom, el2);
+    return instance2;
   }
-  insertBefore(parent, child, reference) {
-    const p = asParent(parent);
-    const c = asServer(child);
-    this._detach(c);
-    c.parent = p;
-    if (reference === null) {
-      p.children.push(c);
-      return;
+  if (graphNode.type === "input") {
+    const el2 = dom.createElement("input");
+    const inputType = String(graphNode.getProp("inputType") ?? "text");
+    dom.setAttribute(el2, "type", inputType);
+    const placeholder = graphNode.getProp("placeholder");
+    if (placeholder !== void 0) dom.setAttribute(el2, "placeholder", String(placeholder));
+    const value = graphNode.getProp("value");
+    if (value !== void 0) dom.setProperty(el2, "value", String(value));
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    wireEvents(dom, graph, graphNode, el2, instance2);
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, inputUpdate(dom, el2));
     }
-    const ref = asServer(reference);
-    const idx = p.children.indexOf(ref);
-    if (idx === -1) p.children.push(c);
-    else p.children.splice(idx, 0, c);
+    dom.appendChild(parentDom, el2);
+    return instance2;
   }
-  removeChild(parent, child) {
-    const p = asParent(parent);
-    const c = asServer(child);
-    const idx = p.children.indexOf(c);
-    if (idx !== -1) {
-      p.children.splice(idx, 1);
-      c.parent = null;
+  if (graphNode.type === "image") {
+    const el2 = dom.createElement("img");
+    const src = graphNode.getProp("src");
+    const alt = graphNode.getProp("alt");
+    if (src !== void 0) dom.setAttribute(el2, "src", String(src));
+    if (alt !== void 0) dom.setAttribute(el2, "alt", String(alt));
+    const width = graphNode.getProp("width");
+    const height = graphNode.getProp("height");
+    if (width !== void 0) dom.setAttribute(el2, "width", String(width));
+    if (height !== void 0) dom.setAttribute(el2, "height", String(height));
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    dom.appendChild(parentDom, el2);
+    return instance2;
+  }
+  if (graphNode.type === "link") {
+    const el2 = dom.createElement("a");
+    const href = graphNode.getProp("href");
+    const label = graphNode.getProp("label");
+    const external = graphNode.getProp("external");
+    if (href !== void 0) dom.setAttribute(el2, "href", String(href));
+    if (label !== void 0) dom.setTextContent(el2, String(label));
+    if (external === true) {
+      dom.setAttribute(el2, "target", "_blank");
+      dom.setAttribute(el2, "rel", "noopener noreferrer");
     }
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    wireEvents(dom, graph, graphNode, el2, instance2);
+    dom.appendChild(parentDom, el2);
+    return instance2;
   }
-  replaceChild(parent, newChild, oldChild) {
-    const p = asParent(parent);
-    const nc = asServer(newChild);
-    const oc = asServer(oldChild);
-    const idx = p.children.indexOf(oc);
-    if (idx === -1) return;
-    this._detach(nc);
-    nc.parent = p;
-    p.children.splice(idx, 1, nc);
-    oc.parent = null;
+  if (graphNode.type === "button") {
+    const el2 = dom.createElement("button");
+    const label = graphNode.getProp("label");
+    if (label !== void 0) dom.setTextContent(el2, String(label));
+    const disabled = graphNode.getProp("disabled");
+    if (disabled === true) dom.setAttribute(el2, "disabled", "");
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    wireEvents(dom, graph, graphNode, el2, instance2);
+    if (graphNode.stateRefs.length !== 0) {
+      wireSignalBindings(ctx, graphNode, instance2, buttonUpdate(dom, el2));
+    }
+    dom.appendChild(parentDom, el2);
+    return instance2;
   }
-  _detach(node) {
-    if (node.parent !== null) {
-      const siblings = node.parent.children;
-      const idx = siblings.indexOf(node);
-      if (idx !== -1) siblings.splice(idx, 1);
-      node.parent = null;
+  if (graphNode.type === "reactive-list" || graphNode.type === "conditional") {
+    const tag2 = resolveTag(graphNode.type);
+    const el2 = dom.createElement(tag2);
+    applyNodeProps(ctx, graphNode, el2);
+    const instance2 = new NodeInstance(graphNode, el2);
+    ctx.instances.set(graphNode.id, instance2);
+    for (const child of graphNode.children) {
+      const childInstance = mountNode(ctx, child, el2);
+      instance2.addChild(childInstance);
     }
+    dom.appendChild(parentDom, el2);
+    wireReactiveList(ctx, graphNode, instance2, el2);
+    return instance2;
   }
-  setAttribute(element, name, value) {
-    element.attributes.set(name, value);
+  if (graphNode.type === "portal") {
+    const anchor = dom.createElement(resolveTag("portal"));
+    dom.setAttribute(anchor, "data-streetui-portal", "");
+    applyNodeProps(ctx, graphNode, anchor);
+    const instance2 = new NodeInstance(graphNode, anchor);
+    ctx.instances.set(graphNode.id, instance2);
+    const body = dom.body();
+    let target = anchor;
+    if (body !== null) {
+      const portalContainer = dom.createElement("div");
+      dom.setAttribute(portalContainer, "data-streetui-portal-container", "");
+      dom.appendChild(body, portalContainer);
+      instance2.trackCleanup(() => dom.removeChild(body, portalContainer));
+      target = portalContainer;
+    }
+    for (const child of graphNode.children) {
+      instance2.addChild(mountNode(ctx, child, target));
+    }
+    dom.appendChild(parentDom, anchor);
+    wireOverlayBehavior(ctx, graphNode, instance2, target);
+    return instance2;
   }
-  removeAttribute(element, name) {
-    element.attributes.delete(name);
+  const tag = resolveTag(graphNode.type);
+  const el = dom.createElement(tag);
+  applyNodeProps(ctx, graphNode, el);
+  if (graphNode.type === "list-item") {
+    const itemKey = graphNode.getProp("key");
+    if (itemKey !== void 0) {
+      dom.setAttribute(el, "data-streetui-key", String(itemKey));
+    }
   }
-  getAttribute(element, name) {
-    return element.attributes.get(name) ?? null;
+  const instance = new NodeInstance(graphNode, el);
+  ctx.instances.set(graphNode.id, instance);
+  if (graphNode.type === "form") {
+    wireEvents(dom, graph, graphNode, el, instance);
   }
-  setProperty(element, name, value) {
-    element.properties.set(name, value);
+  for (const child of graphNode.children) {
+    const childInstance = mountNode(ctx, child, el);
+    instance.addChild(childInstance);
   }
-  setTextContent(node, text) {
-    const n = asServer(node);
-    if (n.kind === "element" || n.kind === "fragment") {
-      const el = n;
-      el.children.length = 0;
-      const t = new ServerText(text);
-      t.parent = el;
-      el.children.push(t);
-    } else if (n.kind === "text") {
-      n.data = text;
+  dom.appendChild(parentDom, el);
+  return instance;
+}
+function textUpdate(dom, el, textNode) {
+  return (propKey, value) => {
+    if (propKey === "text") {
+      dom.setTextContent(textNode, String(value ?? ""));
+    } else {
+      applyProp(dom, el, propKey, value);
     }
-  }
-  getTextContent(node) {
-    const n = asServer(node);
-    if (n.kind === "text") return n.data;
-    if (n.kind === "element" || n.kind === "fragment") {
-      let out = "";
-      for (const c of n.children) {
-        out += this.getTextContent(c) ?? "";
+  };
+}
+function headingUpdate(dom, el) {
+  return (propKey, value) => {
+    if (propKey === "text") {
+      dom.setTextContent(el, String(value ?? ""));
+    } else {
+      applyProp(dom, el, propKey, value);
+    }
+  };
+}
+function inputUpdate(dom, el) {
+  return (propKey, value) => {
+    if (propKey === "value") {
+      dom.setProperty(el, "value", String(value ?? ""));
+    } else {
+      applyProp(dom, el, propKey, value);
+    }
+  };
+}
+function buttonUpdate(dom, el) {
+  return (propKey, value) => {
+    if (propKey === "label") {
+      dom.setTextContent(el, String(value ?? ""));
+    } else if (propKey === "disabled") {
+      if (value === true) {
+        dom.setAttribute(el, "disabled", "");
+      } else {
+        dom.removeAttribute(el, "disabled");
       }
-      return out;
+    } else {
+      applyProp(dom, el, propKey, value);
     }
-    return null;
-  }
-  // Server nodes never dispatch events — listeners are a no-op on the server.
-  addEventListener() {
-  }
-  removeEventListener() {
-  }
-  querySelector() {
-    return null;
-  }
-  querySelectorAll() {
-    return [];
-  }
-  getElementById() {
-    return null;
-  }
-  focus() {
-  }
-  isElement(node) {
-    return asServer(node).kind === "element";
+  };
+}
+function applyNodeProps(ctx, graphNode, el) {
+  const props = graphNode.props;
+  for (const key in props) {
+    if (!Object.hasOwn(props, key)) continue;
+    if (SKIP_PROP_KEYS.has(key)) continue;
+    applyProp(ctx.dom, el, key, props[key]);
   }
-  isTextNode(node) {
-    return asServer(node).kind === "text";
+}
+function wireSignalBindings(ctx, graphNode, instance, onUpdate) {
+  if (graphNode.stateRefs.length === 0) return;
+  for (const stateRef of graphNode.stateRefs) {
+    const signalKey = `__signal__${stateRef.signalId}`;
+    const maybeSig = ctx.graph.getHandler(signalKey);
+    if (maybeSig === void 0 || typeof maybeSig.subscribe !== "function") continue;
+    const unsub = maybeSig.subscribe((value) => {
+      onUpdate(stateRef.propKey, value);
+    });
+    instance.trackCleanup(unsub);
   }
-  tagName(element) {
-    return element.tagName;
+}
+function wireReactiveList(ctx, graphNode, instance, el) {
+  const plan = ctx.graph.getHandler(`__listplan__${graphNode.id}`);
+  const build = ctx.graph.getHandler(`__listbuild__${graphNode.id}`);
+  if (plan === void 0 && build === void 0) return;
+  for (const stateRef of graphNode.stateRefs) {
+    if (stateRef.propKey !== "items") continue;
+    const sig = ctx.graph.getHandler(`__signal__${stateRef.signalId}`);
+    if (sig === void 0 || typeof sig.subscribe !== "function") continue;
+    const unsub = sig.subscribe((value) => {
+      if (plan !== void 0) {
+        reconcileReactiveListByPlan(ctx, graphNode, instance, el, plan(value));
+      } else {
+        reconcileReactiveList(ctx, graphNode, instance, el, build(value));
+      }
+    });
+    instance.trackCleanup(unsub);
   }
-  parentNode(node) {
-    return asServer(node).parent ?? null;
+}
+function reconcileReactiveListByPlan(ctx, listNode, listInstance, listEl, plan) {
+  const oldInstances = [...listInstance.children];
+  const result = reconcileChildrenByPlan(
+    ctx,
+    listEl,
+    oldInstances,
+    plan,
+    (node, parent) => mountNode(ctx, node, parent)
+  );
+  listInstance.children.length = 0;
+  for (const inst of result.instances) listInstance.children.push(inst);
+  for (const removed of result.removed) {
+    forgetInstance(ctx, removed);
+    ctx.graph.detachNode(removed.graphNode);
   }
-  nextSibling(node) {
-    const n = asServer(node);
-    const parent = n.parent;
-    if (parent === null) return null;
-    const idx = parent.children.indexOf(n);
-    if (idx === -1 || idx + 1 >= parent.children.length) return null;
-    return parent.children[idx + 1];
+  const adopted = new Set(result.instances.map((i) => i.graphNode));
+  for (const node of result.built ?? []) {
+    if (!adopted.has(node)) ctx.graph.detachNode(node);
   }
-  firstChild(node) {
-    const n = asServer(node);
-    if (n.kind === "element" || n.kind === "fragment") {
-      const el = n;
-      return el.children[0] ?? null;
-    }
-    return null;
+  for (const child of [...listNode.children]) listNode.removeChild(child);
+  for (const inst of result.instances) listNode.appendChild(inst.graphNode);
+}
+function reconcileReactiveList(ctx, listNode, listInstance, listEl, newNodes) {
+  const oldInstances = [...listInstance.children];
+  const result = reconcileChildren(
+    ctx,
+    listEl,
+    oldInstances,
+    newNodes,
+    (node, parent) => mountNode(ctx, node, parent)
+  );
+  listInstance.children.length = 0;
+  for (const inst of result.instances) listInstance.children.push(inst);
+  for (const removed of result.removed) {
+    forgetInstance(ctx, removed);
+    ctx.graph.detachNode(removed.graphNode);
   }
-  childNodes(node) {
-    const n = asServer(node);
-    if (n.kind === "element" || n.kind === "fragment") {
-      return n.children;
-    }
-    return [];
+  const adopted = new Set(result.instances.map((i) => i.graphNode));
+  for (const built of newNodes) {
+    if (!adopted.has(built)) ctx.graph.detachNode(built);
   }
-  // ── Server-only ────────────────────────────────────────────────────────────
-  /** Serialize a node's children ("inner HTML") to an HTML string. */
-  serializeInner(node) {
-    const n = asServer(node);
-    if (n.kind === "element" || n.kind === "fragment") {
-      return serializeChildren(n);
+  for (const child of [...listNode.children]) listNode.removeChild(child);
+  for (const inst of result.instances) listNode.appendChild(inst.graphNode);
+}
+function forgetInstance(ctx, instance) {
+  ctx.instances.delete(instance.graphNode.id);
+  for (const child of instance.children) forgetInstance(ctx, child);
+}
+function wireOverlayBehavior(ctx, graphNode, instance, target) {
+  const { dom, graph } = ctx;
+  if (dom.body() === null) return;
+  const descFn = graph.getHandler(`__overlay__${graphNode.id}`);
+  if (descFn === void 0) return;
+  const desc = descFn();
+  const openSig = desc.open;
+  if (openSig === void 0 || typeof openSig.subscribe !== "function") return;
+  let active = [];
+  let saved = null;
+  const teardown = () => {
+    for (const fn of active) fn();
+    active = [];
+  };
+  const onOpenChange = (isOpen) => {
+    if (isOpen) {
+      if (desc.restoreFocus) saved = saveFocus(dom);
+      if (desc.takesFocus) focusInitial(dom, target, desc.initialFocusId);
+      if (desc.modal) {
+        active.push(trapFocus(dom, target));
+        active.push(containFocus(dom, target));
+      }
+      if (desc.closeOnEscape && desc.onClose !== void 0) {
+        active.push(onEscape(dom, target, desc.onClose));
+      }
+    } else {
+      teardown();
+      if (desc.restoreFocus && saved !== null) {
+        restoreFocus(dom, saved);
+        saved = null;
+      }
     }
-    return "";
-  }
-  /** Serialize a node (including itself) to an HTML string. */
-  serializeOuter(node) {
-    return serializeServerNode(asServer(node));
-  }
-};
+  };
+  const unsub = openSig.subscribe(onOpenChange);
+  instance.trackCleanup(unsub);
+  instance.trackCleanup(teardown);
+  if (openSig.peek() === true) onOpenChange(true);
+}
 
 // ../renderer/src/dehydrate.ts
 var STATE_MARKER_ATTR = "data-streetui-state";
@@ -1223,7 +1375,8 @@ function analyzeGraph(graph) {
     const hasEvents = node.events.length > 0;
     const isList = node.type === "reactive-list";
     const isConditional = node.type === "conditional";
-    const isStatic = node.stateRefs.length === 0 && !hasEvents && !isList && !isConditional;
+    const isPortal = node.type === "portal";
+    const isStatic = node.stateRefs.length === 0 && !hasEvents && !isList && !isConditional && !isPortal;
     const isStaticSubtree = isStatic && allChildrenStatic;
     nodes.set(node.id, {
       isStatic,
@@ -1310,7 +1463,7 @@ function renderToString(compiled, options = {}) {
 }
 
 // src/version.ts
-var VERSION = "1.6.0";
+var VERSION = "1.7.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   STATE_MARKER_ATTR,