streetui 1.8.0 → 2.0.0

package/dist/server.js

@@ -500,6 +500,9 @@ var ServerDOMAdapter = class {
   body() {
     return null;
   }
+  head() {
+    return null;
+  }
   activeElement() {
     return null;
   }
@@ -613,18 +616,25 @@ function trapFocus(dom, container) {
   dom.addEventListener(container, "keydown", onKeydown);
   return () => dom.removeEventListener(container, "keydown", onKeydown);
 }
+var containmentStack = [];
 function containFocus(dom, container) {
   const body = dom.body();
   if (body === null) return () => {
   };
+  containmentStack.push(container);
   const onFocusIn = (event) => {
+    if (containmentStack[containmentStack.length - 1] !== container) return;
     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);
+  return () => {
+    dom.removeEventListener(body, "focusin", onFocusIn);
+    const index = containmentStack.lastIndexOf(container);
+    if (index !== -1) containmentStack.splice(index, 1);
+  };
 }
 function onEscape(dom, target, handler) {
   const onKeydown = (event) => {
@@ -633,6 +643,33 @@ function onEscape(dom, target, handler) {
   dom.addEventListener(target, "keydown", onKeydown);
   return () => dom.removeEventListener(target, "keydown", onKeydown);
 }
+function rovingMenu(dom, container, selector = FOCUSABLE_SELECTOR) {
+  const onKeydown = (event) => {
+    const key = event.key;
+    const isActivate = key === "Enter" || key === " " || key === "Spacebar";
+    const isMove = key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
+    if (!isActivate && !isMove) return;
+    const items = getFocusable(dom, container, selector);
+    if (items.length === 0) return;
+    const active = dom.activeElement();
+    const index = active === null ? -1 : items.indexOf(active);
+    if (isActivate) {
+      if (index < 0) return;
+      event.preventDefault();
+      items[index].click?.();
+      return;
+    }
+    event.preventDefault();
+    let next;
+    if (key === "Home") next = 0;
+    else if (key === "End") next = items.length - 1;
+    else if (key === "ArrowDown") next = index < 0 ? 0 : (index + 1) % items.length;
+    else next = index <= 0 ? items.length - 1 : index - 1;
+    dom.focus(items[next]);
+  };
+  dom.addEventListener(container, "keydown", onKeydown);
+  return () => dom.removeEventListener(container, "keydown", onKeydown);
+}
 
 // ../renderer/src/tag-map.ts
 var TAG_MAP = {
@@ -657,7 +694,13 @@ var TAG_MAP = {
   // 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"
+  portal: "div",
+  // A `head()` node renders as a neutral, empty inline anchor <div> at its
+  // declaration site (like a portal anchor). Its actual contribution — title/
+  // meta/link/etc. — is applied to `document.head` by `wireHeadBehavior` on the
+  // browser, and emitted separately by `renderHead()` on the server. Keeping a
+  // one-node/one-element anchor preserves positional hydration.
+  head: "div"
 };
 function resolveTag(type) {
   return TAG_MAP[type] ?? "div";
@@ -705,7 +748,7 @@ function patchNode(ctx, graphNode, propKey, newValue) {
 }
 
 // ../renderer/src/reconciliation.ts
-function reconcileChildren(ctx, parentDom, oldInstances, newNodes, mountFn) {
+function reconcileChildren(ctx, parentDom, oldInstances, newNodes, mountFn, hooks) {
   const oldByKey = /* @__PURE__ */ new Map();
   for (const inst of oldInstances) {
     const key = inst.graphNode.key ?? inst.graphNode.id;
@@ -726,28 +769,33 @@ function reconcileChildren(ctx, parentDom, oldInstances, newNodes, mountFn) {
       }
       newInstances.push(existing);
     } else {
-      const inst = mountFn(newNode, parentDom);
-      newInstances.push(inst);
+      const reclaimed = hooks?.takeLeaving(key);
+      if (reclaimed !== void 0) {
+        patchExistingInstance(ctx, reclaimed, newNode);
+        reconcileItemChildren(ctx, reclaimed, newNode, mountFn);
+        hooks?.onEnter(reclaimed);
+        newInstances.push(reclaimed);
+      } else {
+        const inst = mountFn(newNode, parentDom);
+        hooks?.onEnter(inst);
+        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) {
+    if (usedKeys.has(key)) continue;
+    if (hooks !== void 0 && hooks.beginLeave(inst)) continue;
     const parent = ctx.dom.parentNode(inst.domNode);
-    if (parent !== null) {
-      ctx.dom.removeChild(parent, inst.domNode);
-    }
+    if (parent !== null) ctx.dom.removeChild(parent, inst.domNode);
     inst.dispose();
+    removed.push(inst);
   }
   reorderDom(ctx, parentDom, newInstances);
   return { instances: newInstances, removed };
 }
-function reconcileChildrenByPlan(ctx, parentDom, oldInstances, plan, mountFn) {
+function reconcileChildrenByPlan(ctx, parentDom, oldInstances, plan, mountFn, hooks) {
   const oldByKey = /* @__PURE__ */ new Map();
   for (const inst of oldInstances) {
     oldByKey.set(inst.graphNode.key ?? inst.graphNode.id, inst);
@@ -774,21 +822,34 @@ function reconcileChildrenByPlan(ctx, parentDom, oldInstances, plan, mountFn) {
       }
       newInstances.push(existing);
     } else {
-      const freshNode = entry.build();
-      built.push(freshNode);
-      const inst = mountFn(freshNode, parentDom);
-      newInstances.push(inst);
+      const reclaimed = hooks?.takeLeaving(entry.key);
+      if (reclaimed !== void 0) {
+        const freshNode = entry.build();
+        built.push(freshNode);
+        patchExistingInstance(ctx, reclaimed, freshNode);
+        reconcileItemChildren(ctx, reclaimed, freshNode, mountFn);
+        reclaimed.graphNode.setProp("_sig", freshNode.getProp("_sig"));
+        reclaimed.graphNode.setProp("_item", entry.item);
+        hooks?.onEnter(reclaimed);
+        newInstances.push(reclaimed);
+      } else {
+        const freshNode = entry.build();
+        built.push(freshNode);
+        const inst = mountFn(freshNode, parentDom);
+        hooks?.onEnter(inst);
+        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) {
+    if (usedKeys.has(key)) continue;
+    if (hooks !== void 0 && hooks.beginLeave(inst)) continue;
     const parent = ctx.dom.parentNode(inst.domNode);
     if (parent !== null) ctx.dom.removeChild(parent, inst.domNode);
     inst.dispose();
+    removed.push(inst);
   }
   reorderDomMinimal(ctx, parentDom, oldInstances, newInstances);
   return { instances: newInstances, removed, built };
@@ -914,6 +975,354 @@ function patchExistingInstance(ctx, instance, newNode) {
   }
 }
 
+// ../renderer/src/transition.ts
+function getResolvedTransition(graph, nodeId) {
+  const fn = graph.getHandler(`__transition__${nodeId}`);
+  return fn === void 0 ? void 0 : fn();
+}
+function host() {
+  return globalThis;
+}
+function nextFrame(cb) {
+  const h = host();
+  const raf = h.requestAnimationFrame;
+  if (typeof raf === "function") {
+    raf(() => raf(cb));
+  } else {
+    h.setTimeout(cb, 0);
+  }
+}
+function splitClass(value) {
+  if (value === null) return [];
+  const out = [];
+  for (const t of value.split(/\s+/)) if (t.length > 0) out.push(t);
+  return out;
+}
+function addClasses(dom, el, classes) {
+  if (classes.length === 0) return;
+  const current = splitClass(dom.getAttribute(el, "class"));
+  let changed = false;
+  for (const c of classes) {
+    if (!current.includes(c)) {
+      current.push(c);
+      changed = true;
+    }
+  }
+  if (changed) dom.setAttribute(el, "class", current.join(" "));
+}
+function removeClasses(dom, el, classes) {
+  if (classes.length === 0) return;
+  const current = splitClass(dom.getAttribute(el, "class"));
+  const next = current.filter((c) => !classes.includes(c));
+  if (next.length !== current.length) {
+    if (next.length === 0) dom.removeAttribute(el, "class");
+    else dom.setAttribute(el, "class", next.join(" "));
+  }
+}
+function startRun(dom, el, active, from, to, duration, onDone) {
+  const h = host();
+  let finished = false;
+  let timer = null;
+  const onEvent = (e) => {
+    if (e.target !== el) return;
+    finish();
+  };
+  const detach = () => {
+    dom.removeEventListener(el, "transitionend", onEvent);
+    dom.removeEventListener(el, "animationend", onEvent);
+    if (timer !== null) {
+      h.clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const finish = () => {
+    if (finished) return;
+    finished = true;
+    detach();
+    removeClasses(dom, el, active);
+    removeClasses(dom, el, to);
+    removeClasses(dom, el, from);
+    onDone();
+  };
+  addClasses(dom, el, from);
+  addClasses(dom, el, active);
+  dom.addEventListener(el, "transitionend", onEvent);
+  dom.addEventListener(el, "animationend", onEvent);
+  timer = h.setTimeout(finish, duration);
+  nextFrame(() => {
+    if (finished) return;
+    removeClasses(dom, el, from);
+    addClasses(dom, el, to);
+  });
+  return {
+    cancel: () => {
+      if (finished) return;
+      finished = true;
+      detach();
+      removeClasses(dom, el, active);
+      removeClasses(dom, el, to);
+      removeClasses(dom, el, from);
+    }
+  };
+}
+var TransitionController = class {
+  constructor(dom, graph, finalize) {
+    this.dom = dom;
+    this.graph = graph;
+    this.finalize = finalize;
+  }
+  leaving = /* @__PURE__ */ new Map();
+  /** True only in a real DOM environment (browser). */
+  get browser() {
+    return this.dom.body() !== null;
+  }
+  keyOf(inst) {
+    return inst.graphNode.key ?? inst.graphNode.id;
+  }
+  resolved(node) {
+    return getResolvedTransition(this.graph, node.id);
+  }
+  /** Run the enter animation for `inst` if it carries a transition (browser only). */
+  enter(inst) {
+    if (!this.browser) return;
+    const rt = this.resolved(inst.graphNode);
+    if (rt === void 0) return;
+    const el = inst.domNode;
+    if (!this.dom.isElement(el)) return;
+    startRun(this.dom, el, rt.enterActive, rt.enterFrom, rt.enterTo, rt.duration, () => {
+    });
+  }
+  /**
+   * Play `appear` for any initial child that opted into it (fresh browser mount
+   * only — hydration must never animate appear, §22, and this is called only on
+   * the mount path).
+   */
+  appear(children) {
+    if (!this.browser) return;
+    for (const child of children) {
+      const rt = this.resolved(child.graphNode);
+      if (rt !== void 0 && rt.appear) this.enter(child);
+    }
+  }
+  hooks() {
+    return {
+      takeLeaving: (key) => {
+        const entry = this.leaving.get(key);
+        if (entry === void 0) return void 0;
+        entry.run.cancel();
+        this.leaving.delete(key);
+        return entry.inst;
+      },
+      beginLeave: (inst) => {
+        if (!this.browser) return false;
+        const rt = this.resolved(inst.graphNode);
+        if (rt === void 0) return false;
+        const el = inst.domNode;
+        if (!this.dom.isElement(el)) return false;
+        const key = this.keyOf(inst);
+        const prior = this.leaving.get(key);
+        if (prior !== void 0) prior.run.cancel();
+        const run = startRun(
+          this.dom,
+          el,
+          rt.leaveActive,
+          rt.leaveFrom,
+          rt.leaveTo,
+          rt.duration,
+          () => {
+            const current = this.leaving.get(key);
+            if (current !== void 0 && current.run === run) {
+              this.leaving.delete(key);
+              this.finalize(inst);
+            }
+          }
+        );
+        this.leaving.set(key, { inst, run });
+        return true;
+      },
+      onEnter: (inst) => this.enter(inst)
+    };
+  }
+};
+
+// ../renderer/src/head.ts
+var HEAD_MARKER = "data-streetui-head";
+var HEAD_KEY = "data-streetui-head-key";
+function isSignalLike(v) {
+  return v !== null && typeof v === "object" && typeof v["subscribe"] === "function" && typeof v["peek"] === "function";
+}
+function readValue(v) {
+  if (isSignalLike(v)) return String(v.peek() ?? "");
+  return String(v ?? "");
+}
+function resolveEntry(entry) {
+  const attrs = {};
+  for (const key of Object.keys(entry.attrs)) {
+    attrs[key] = readValue(entry.attrs[key]);
+  }
+  const resolved = { tag: entry.tag, attrs };
+  if (entry.tag === "title") {
+    return { ...resolved, text: readValue(entry.text) };
+  }
+  return resolved;
+}
+var HeadManager = class {
+  _dom;
+  _head;
+  _contributions = /* @__PURE__ */ new Map();
+  _applied = /* @__PURE__ */ new Map();
+  _order = 0;
+  _adopted = false;
+  constructor(dom, head) {
+    this._dom = dom;
+    this._head = head;
+  }
+  /** Register (or replace) a node's contribution and re-apply the merged result. */
+  register(nodeId, entries) {
+    this._contributions.set(nodeId, { order: this._order++, entries });
+    this.apply();
+  }
+  /** Withdraw a node's contribution (unmount / route change) and re-apply. */
+  unregister(nodeId) {
+    if (this._contributions.delete(nodeId)) this.apply();
+  }
+  /** Recompute the merged head and patch `document.head` to match. */
+  apply() {
+    if (!this._adopted) {
+      this._adoptServerTags();
+      this._adopted = true;
+    }
+    const ordered = [...this._contributions.values()].sort((a, b) => a.order - b.order);
+    const merged = /* @__PURE__ */ new Map();
+    for (const contribution of ordered) {
+      for (const entry of contribution.entries) {
+        merged.set(entry.dedupKey, resolveEntry(entry));
+      }
+    }
+    for (const [key, desired] of merged) {
+      const existing = this._applied.get(key);
+      if (existing !== void 0 && existing.tag === desired.tag) {
+        this._reconcileAttrs(existing, desired);
+      } else {
+        if (existing !== void 0) {
+          this._dom.removeChild(this._head, existing.el);
+          this._applied.delete(key);
+        }
+        const el = this._createTag(key, desired);
+        this._dom.appendChild(this._head, el);
+        this._applied.set(key, { el, attrKeys: new Set(Object.keys(desired.attrs)), tag: desired.tag });
+      }
+    }
+    for (const [key, record] of [...this._applied]) {
+      if (!merged.has(key)) {
+        this._dom.removeChild(this._head, record.el);
+        this._applied.delete(key);
+      }
+    }
+  }
+  _createTag(key, desired) {
+    const el = this._dom.createElement(desired.tag);
+    this._dom.setAttribute(el, HEAD_MARKER, "");
+    this._dom.setAttribute(el, HEAD_KEY, key);
+    for (const attr of Object.keys(desired.attrs)) {
+      this._dom.setAttribute(el, attr, desired.attrs[attr]);
+    }
+    if (desired.tag === "title") this._dom.setTextContent(el, desired.text ?? "");
+    return el;
+  }
+  _reconcileAttrs(record, desired) {
+    const nextKeys = new Set(Object.keys(desired.attrs));
+    for (const attr of record.attrKeys) {
+      if (!nextKeys.has(attr)) this._dom.removeAttribute(record.el, attr);
+    }
+    for (const attr of nextKeys) {
+      this._dom.setAttribute(record.el, attr, desired.attrs[attr]);
+    }
+    if (desired.tag === "title") this._dom.setTextContent(record.el, desired.text ?? "");
+    record.attrKeys = nextKeys;
+  }
+  /**
+   * Seed `_applied` from server-emitted `[data-streetui-head-key]` tags already
+   * in `document.head`. The subsequent diff reuses these elements when the
+   * client desires the same key (no duplicate), rewrites them if the value
+   * changed, or removes them if the client graph no longer wants them.
+   */
+  _adoptServerTags() {
+    for (const child of this._dom.childNodes(this._head)) {
+      if (!this._dom.isElement(child)) continue;
+      const el = child;
+      const key = this._dom.getAttribute(el, HEAD_KEY);
+      if (key === null) continue;
+      this._applied.set(key, {
+        el,
+        attrKeys: new Set(this._attrNames(el)),
+        tag: this._dom.tagName(el)
+      });
+    }
+  }
+  /** The framework-managed attribute names currently on a server tag. */
+  _attrNames(el) {
+    const names = [];
+    if (this._dom.getAttribute(el, HEAD_MARKER) !== null) names.push(HEAD_MARKER);
+    if (this._dom.getAttribute(el, HEAD_KEY) !== null) names.push(HEAD_KEY);
+    return names;
+  }
+};
+function getHeadManager(ctx) {
+  const head = ctx.dom.head();
+  if (head === null) return null;
+  const mutable = ctx;
+  if (mutable.head === void 0) mutable.head = new HeadManager(ctx.dom, head);
+  return mutable.head;
+}
+function wireHeadBehavior(ctx, graphNode, instance) {
+  const manager = getHeadManager(ctx);
+  if (manager === null) return;
+  const descFn = ctx.graph.getHandler(`__head__${graphNode.id}`);
+  if (descFn === void 0) return;
+  const contribution = descFn();
+  const nodeId = graphNode.id;
+  manager.register(nodeId, contribution.entries);
+  for (const entry of contribution.entries) {
+    for (const attrKey of Object.keys(entry.attrs)) {
+      const v = entry.attrs[attrKey];
+      if (isSignalLike(v)) {
+        instance.trackCleanup(v.subscribe(() => manager.apply()));
+      }
+    }
+    if (isSignalLike(entry.text)) {
+      instance.trackCleanup(entry.text.subscribe(() => manager.apply()));
+    }
+  }
+  instance.trackCleanup(() => manager.unregister(nodeId));
+}
+function renderHead(compiled) {
+  const graph = compiled.graph;
+  const merged = /* @__PURE__ */ new Map();
+  graph.walk((node) => {
+    if (node.type !== "head") return;
+    const descFn = graph.getHandler(`__head__${node.id}`);
+    if (descFn === void 0) return;
+    for (const entry of descFn().entries) {
+      merged.set(entry.dedupKey, resolveEntry(entry));
+    }
+  });
+  if (merged.size === 0) return "";
+  const dom = new ServerDOMAdapter();
+  let out = "";
+  for (const [key, desired] of merged) {
+    const el = dom.createElement(desired.tag);
+    dom.setAttribute(el, HEAD_MARKER, "");
+    dom.setAttribute(el, HEAD_KEY, key);
+    for (const attr of Object.keys(desired.attrs)) {
+      dom.setAttribute(el, attr, desired.attrs[attr]);
+    }
+    if (desired.tag === "title") dom.setTextContent(el, desired.text ?? "");
+    out += dom.serializeOuter(el);
+  }
+  return out;
+}
+
 // ../renderer/src/mount.ts
 var SKIP_PROP_KEYS = /* @__PURE__ */ new Set([
   "text",
@@ -1036,6 +1445,9 @@ function mountNode(ctx, graphNode, parentDom) {
     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, linkUpdate(dom, el2));
+    }
     dom.appendChild(parentDom, el2);
     return instance2;
   }
@@ -1066,7 +1478,7 @@ function mountNode(ctx, graphNode, parentDom) {
       instance2.addChild(childInstance);
     }
     dom.appendChild(parentDom, el2);
-    wireReactiveList(ctx, graphNode, instance2, el2);
+    wireReactiveList(ctx, graphNode, instance2, el2, true);
     return instance2;
   }
   if (graphNode.type === "portal") {
@@ -1091,6 +1503,16 @@ function mountNode(ctx, graphNode, parentDom) {
     wireOverlayBehavior(ctx, graphNode, instance2, target);
     return instance2;
   }
+  if (graphNode.type === "head") {
+    const anchor = dom.createElement(resolveTag("head"));
+    dom.setAttribute(anchor, "data-streetui-head-anchor", "");
+    applyNodeProps(ctx, graphNode, anchor);
+    const instance2 = new NodeInstance(graphNode, anchor);
+    ctx.instances.set(graphNode.id, instance2);
+    dom.appendChild(parentDom, anchor);
+    wireHeadBehavior(ctx, graphNode, instance2);
+    return instance2;
+  }
   const tag = resolveTag(graphNode.type);
   const el = dom.createElement(tag);
   applyNodeProps(ctx, graphNode, el);
@@ -1155,6 +1577,17 @@ function buttonUpdate(dom, el) {
     }
   };
 }
+function linkUpdate(dom, el) {
+  return (propKey, value) => {
+    if (propKey === "label") {
+      dom.setTextContent(el, String(value ?? ""));
+    } else if (propKey === "href") {
+      dom.setAttribute(el, "href", String(value ?? ""));
+    } else {
+      applyProp(dom, el, propKey, value);
+    }
+  };
+}
 function applyNodeProps(ctx, graphNode, el) {
   const props = graphNode.props;
   for (const key in props) {
@@ -1175,32 +1608,42 @@ function wireSignalBindings(ctx, graphNode, instance, onUpdate) {
     instance.trackCleanup(unsub);
   }
 }
-function wireReactiveList(ctx, graphNode, instance, el) {
+function wireReactiveList(ctx, graphNode, instance, el, runAppear = false) {
   const plan = ctx.graph.getHandler(`__listplan__${graphNode.id}`);
   const build = ctx.graph.getHandler(`__listbuild__${graphNode.id}`);
   if (plan === void 0 && build === void 0) return;
+  const controller = new TransitionController(ctx.dom, ctx.graph, (leaving) => {
+    const parent = ctx.dom.parentNode(leaving.domNode);
+    if (parent !== null) ctx.dom.removeChild(parent, leaving.domNode);
+    leaving.dispose();
+    forgetInstance(ctx, leaving);
+    ctx.graph.detachNode(leaving.graphNode);
+  });
+  const hooks = controller.hooks();
+  if (runAppear) controller.appear(instance.children);
   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));
+        reconcileReactiveListByPlan(ctx, graphNode, instance, el, plan(value), hooks);
       } else {
-        reconcileReactiveList(ctx, graphNode, instance, el, build(value));
+        reconcileReactiveList(ctx, graphNode, instance, el, build(value), hooks);
       }
     });
     instance.trackCleanup(unsub);
   }
 }
-function reconcileReactiveListByPlan(ctx, listNode, listInstance, listEl, plan) {
+function reconcileReactiveListByPlan(ctx, listNode, listInstance, listEl, plan, hooks) {
   const oldInstances = [...listInstance.children];
   const result = reconcileChildrenByPlan(
     ctx,
     listEl,
     oldInstances,
     plan,
-    (node, parent) => mountNode(ctx, node, parent)
+    (node, parent) => mountNode(ctx, node, parent),
+    hooks
   );
   listInstance.children.length = 0;
   for (const inst of result.instances) listInstance.children.push(inst);
@@ -1215,14 +1658,15 @@ function reconcileReactiveListByPlan(ctx, listNode, listInstance, listEl, plan)
   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) {
+function reconcileReactiveList(ctx, listNode, listInstance, listEl, newNodes, hooks) {
   const oldInstances = [...listInstance.children];
   const result = reconcileChildren(
     ctx,
     listEl,
     oldInstances,
     newNodes,
-    (node, parent) => mountNode(ctx, node, parent)
+    (node, parent) => mountNode(ctx, node, parent),
+    hooks
   );
   listInstance.children.length = 0;
   for (const inst of result.instances) listInstance.children.push(inst);
@@ -1258,11 +1702,14 @@ function wireOverlayBehavior(ctx, graphNode, instance, target) {
   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.menu) {
+        active.push(rovingMenu(dom, target));
+      }
+      if (desc.takesFocus) focusInitial(dom, target, desc.initialFocusId);
       if (desc.closeOnEscape && desc.onClose !== void 0) {
         active.push(onEscape(dom, target, desc.onClose));
       }
@@ -1352,7 +1799,8 @@ function analyzeGraph(graph) {
     const isConditional = node.type === "conditional";
     const isPortal = node.type === "portal";
     const isComponent = node.type === "component";
-    const isStatic = node.stateRefs.length === 0 && !hasEvents && !isList && !isConditional && !isPortal && !isComponent;
+    const isHead = node.type === "head";
+    const isStatic = node.stateRefs.length === 0 && !hasEvents && !isList && !isConditional && !isPortal && !isComponent && !isHead;
     const isStaticSubtree = isStatic && allChildrenStatic;
     nodes.set(node.id, {
       isStatic,
@@ -1439,12 +1887,13 @@ function renderToString(compiled, options = {}) {
 }
 
 // src/version.ts
-var VERSION = "1.8.0";
+var VERSION = "2.0.0";
 export {
   STATE_MARKER_ATTR,
   ServerDOMAdapter,
   VERSION,
   readState,
+  renderHead,
   renderToString,
   serializeState
 };