streetui 1.6.0 → 1.7.0

package/dist/testing.d.cts

@@ -1,6 +1,6 @@
-import { S as StreetApp } from './compile-CEom4hkp.cjs';
-export { V as VERSION } from './compile-CEom4hkp.cjs';
-import { R as RenderHandle, H as HydrationDiagnostic } from './hydration-diagnostics-D286jpZZ.cjs';
+import { S as StreetApp } from './compile-Cte0nf06.cjs';
+export { V as VERSION } from './compile-Cte0nf06.cjs';
+import { R as RenderHandle, H as HydrationDiagnostic } from './hydration-diagnostics-zK-fihvd.cjs';
 export * from 'streetui/diagnostics';
 
 /**

package/dist/testing.d.ts

@@ -1,6 +1,6 @@
-import { S as StreetApp } from './compile-CEom4hkp.js';
-export { V as VERSION } from './compile-CEom4hkp.js';
-import { R as RenderHandle, H as HydrationDiagnostic } from './hydration-diagnostics-YrG-OJJe.js';
+import { S as StreetApp } from './compile-Cte0nf06.js';
+export { V as VERSION } from './compile-Cte0nf06.js';
+import { R as RenderHandle, H as HydrationDiagnostic } from './hydration-diagnostics-Ddgs3Puu.js';
 export * from 'streetui/diagnostics';
 
 /**

package/dist/testing.js

@@ -253,6 +253,18 @@ var BrowserDOMAdapter = class {
   focus(element) {
     element.focus?.();
   }
+  body() {
+    return document.body ?? null;
+  }
+  activeElement() {
+    return document.activeElement ?? null;
+  }
+  contains(ancestor, node) {
+    return ancestor.contains(node);
+  }
+  matches(element, selector) {
+    return typeof element.matches === "function" && element.matches(selector);
+  }
   isElement(node) {
     return node.nodeType === Node.ELEMENT_NODE;
   }
@@ -310,6 +322,14 @@ var ServerFragment = class {
   parent = null;
   children = [];
 };
+var ServerRawHTML = class {
+  kind = "raw";
+  parent = null;
+  html;
+  constructor(html) {
+    this.html = html;
+  }
+};
 var ServerElement = class {
   kind = "element";
   parent = null;
@@ -460,6 +480,8 @@ function serializeServerNode(node) {
       return `<!--${node.data}-->`;
     case "fragment":
       return serializeChildren(node);
+    case "raw":
+      return node.html;
     case "element": {
       const el = node;
       const tag = el.tagName;
@@ -499,6 +521,15 @@ var ServerDOMAdapter = class {
   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);
@@ -600,6 +631,18 @@ var ServerDOMAdapter = class {
   }
   focus() {
   }
+  body() {
+    return null;
+  }
+  activeElement() {
+    return null;
+  }
+  contains(_ancestor, _node) {
+    return false;
+  }
+  matches(_element, _selector) {
+    return false;
+  }
   isElement(node) {
     return asServer(node).kind === "element";
   }
@@ -650,14 +693,90 @@ var ServerDOMAdapter = class {
   }
 };
 
+// ../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 focusFirst(dom, container, selector = FOCUSABLE_SELECTOR) {
+  const el = dom.querySelector(container, selector);
+  if (el === null) return false;
+  dom.focus(el);
+  return true;
+}
+function getFocusable(dom, container, selector = FOCUSABLE_SELECTOR) {
+  return Array.from(dom.querySelectorAll(container, selector)).filter(
+    (el) => dom.matches(el, selector)
+  );
+}
+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 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 onEscape(dom, target, handler) {
+  const onKeydown = (event) => {
+    if (event.key === "Escape") handler();
+  };
+  dom.addEventListener(target, "keydown", onKeydown);
+  return () => dom.removeEventListener(target, "keydown", onKeydown);
+}
+
 // ../renderer/src/render-context.ts
-function createRenderContext(dom, graph, container, hydrationDiagnostics) {
+function createRenderContext(dom, graph, container, hydrationDiagnostics, staticHTML) {
   return {
     dom,
     graph,
     instances: /* @__PURE__ */ new Map(),
     container,
-    ...hydrationDiagnostics !== void 0 ? { hydrationDiagnostics } : {}
+    ...hydrationDiagnostics !== void 0 ? { hydrationDiagnostics } : {},
+    ...staticHTML !== void 0 ? { staticHTML } : {}
   };
 }
 
@@ -806,7 +925,12 @@ var TAG_MAP = {
   component: "div",
   slot: "div",
   fragment: "div",
-  "reactive-list": "ul"
+  "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";
@@ -1085,6 +1209,17 @@ function mountGraph(ctx) {
 }
 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;
+    }
+  }
   if (graphNode.type === "application") {
     const instance2 = new NodeInstance(graphNode, parentDom);
     ctx.instances.set(graphNode.id, instance2);
@@ -1207,6 +1342,28 @@ function mountNode(ctx, graphNode, parentDom) {
     wireReactiveList(ctx, graphNode, instance2, el2);
     return instance2;
   }
+  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;
+  }
   const tag = resolveTag(graphNode.type);
   const el = dom.createElement(tag);
   applyNodeProps(ctx, graphNode, el);
@@ -1356,6 +1513,44 @@ 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;
+      }
+    }
+  };
+  const unsub = openSig.subscribe(onOpenChange);
+  instance.trackCleanup(unsub);
+  instance.trackCleanup(teardown);
+  if (openSig.peek() === true) onOpenChange(true);
+}
 
 // ../renderer/src/hydration-diagnostics.ts
 function formatHydrationDiagnostic(d) {
@@ -1451,6 +1646,25 @@ function hydrateNode(ctx, graphNode, domNode, path) {
       wireReactiveList(ctx, graphNode, instance, domNode);
       return instance;
     }
+    case "portal": {
+      const instance = new NodeInstance(graphNode, domNode);
+      ctx.instances.set(graphNode.id, instance);
+      const body = dom.body();
+      let target = domNode;
+      if (body !== null) {
+        const portalContainer = dom.createElement("div");
+        dom.setAttribute(portalContainer, "data-streetui-portal-container", "");
+        for (const child of dom.childNodes(domNode)) {
+          dom.appendChild(portalContainer, child);
+        }
+        dom.appendChild(body, portalContainer);
+        instance.trackCleanup(() => dom.removeChild(body, portalContainer));
+        target = portalContainer;
+      }
+      hydrateChildren(ctx, graphNode, instance, target, path);
+      wireOverlayBehavior(ctx, graphNode, instance, target);
+      return instance;
+    }
     default: {
       const instance = new NodeInstance(graphNode, domNode);
       ctx.instances.set(graphNode.id, instance);
@@ -1629,11 +1843,167 @@ function createRenderer(options) {
   return new StreetRendererImpl(options);
 }
 
+// ../compiler/dist/diagnostics.js
+var TEXT_PROP_KEYS = /* @__PURE__ */ new Set(["text", "label", "value"]);
+function analyzeGraph(graph) {
+  const nodes = /* @__PURE__ */ new Map();
+  const summary = {
+    totalNodes: 0,
+    staticNodes: 0,
+    staticSubtrees: 0,
+    dynamicTextNodes: 0,
+    dynamicAttrNodes: 0,
+    eventNodes: 0,
+    lists: 0,
+    conditionals: 0
+  };
+  const visit = (node) => {
+    let allChildrenStatic = true;
+    for (const child of node.children) {
+      const childSubtreeStatic = visit(child);
+      if (!childSubtreeStatic) allChildrenStatic = false;
+    }
+    let hasDynamicText = false;
+    let hasDynamicAttr = false;
+    for (const ref of node.stateRefs) {
+      if (TEXT_PROP_KEYS.has(ref.propKey)) hasDynamicText = true;
+      else hasDynamicAttr = true;
+    }
+    const hasEvents = node.events.length > 0;
+    const isList = node.type === "reactive-list";
+    const isConditional = node.type === "conditional";
+    const isPortal = node.type === "portal";
+    const isStatic = node.stateRefs.length === 0 && !hasEvents && !isList && !isConditional && !isPortal;
+    const isStaticSubtree = isStatic && allChildrenStatic;
+    nodes.set(node.id, {
+      isStatic,
+      isStaticSubtree,
+      hasDynamicText,
+      hasDynamicAttr,
+      hasEvents,
+      isList,
+      isConditional
+    });
+    summary.totalNodes += 1;
+    if (isStatic) summary.staticNodes += 1;
+    if (isStaticSubtree) summary.staticSubtrees += 1;
+    if (hasDynamicText) summary.dynamicTextNodes += 1;
+    if (hasDynamicAttr) summary.dynamicAttrNodes += 1;
+    if (hasEvents) summary.eventNodes += 1;
+    if (isList) summary.lists += 1;
+    if (isConditional) summary.conditionals += 1;
+    return isStaticSubtree;
+  };
+  visit(graph.root);
+  return { nodes, summary };
+}
+function inspectCompilation(graph) {
+  const analysis = analyzeGraph(graph);
+  const nodes = [];
+  const walk = (node, depth) => {
+    const a = analysis.nodes.get(node.id);
+    if (a !== void 0) {
+      const classification = a.isStaticSubtree ? "static-subtree-root" : a.isStatic ? "static" : "dynamic";
+      nodes.push({
+        id: node.id,
+        type: node.type,
+        depth,
+        classification,
+        dynamicText: a.hasDynamicText,
+        dynamicAttrs: a.hasDynamicAttr,
+        events: node.events.map((e) => e.type),
+        boundProps: node.stateRefs.map((r) => r.propKey),
+        isList: a.isList,
+        isConditional: a.isConditional,
+        hydration: a.isStaticSubtree ? "adopt-static" : "verify-dynamic"
+      });
+    }
+    for (const child of node.children) walk(child, depth + 1);
+  };
+  walk(graph.root, 0);
+  const staticRatio = analysis.summary.totalNodes === 0 ? 0 : analysis.summary.staticNodes / analysis.summary.totalNodes;
+  return {
+    name: graph.name,
+    version: graph.version,
+    summary: { ...analysis.summary, staticRatio: +staticRatio.toFixed(4) },
+    nodes
+  };
+}
+function formatInspection(inspection) {
+  const s = inspection.summary;
+  const lines = [];
+  lines.push(`StreetUI compiler inspection \u2014 ${inspection.name} v${inspection.version}`);
+  lines.push(
+    `  nodes=${s.totalNodes} static=${s.staticNodes} staticSubtrees=${s.staticSubtrees} dynamicText=${s.dynamicTextNodes} dynamicAttrs=${s.dynamicAttrNodes} events=${s.eventNodes} lists=${s.lists} conditionals=${s.conditionals} staticRatio=${(s.staticRatio * 100).toFixed(1)}%`
+  );
+  for (const n of inspection.nodes) {
+    const flags = [];
+    if (n.dynamicText) flags.push("text");
+    if (n.dynamicAttrs) flags.push("attr:" + n.boundProps.join(","));
+    if (n.events.length > 0) flags.push("on:" + n.events.join(","));
+    if (n.isList) flags.push("list");
+    if (n.isConditional) flags.push("cond");
+    lines.push(
+      `  ${"  ".repeat(n.depth)}${n.type}#${n.id} [${n.classification}]` + (flags.length > 0 ? ` {${flags.join(" ")}}` : "")
+    );
+  }
+  return lines.join("\n");
+}
+
+// ../renderer/src/static-ssr-plan.ts
+function collectMaximalStaticRoots(graph) {
+  const analysis = analyzeGraph(graph);
+  const roots = [];
+  const walk = (node) => {
+    if (node.type !== "application") {
+      const a = analysis.nodes.get(node.id);
+      if (a !== void 0 && a.isStaticSubtree) {
+        roots.push(node);
+        return;
+      }
+    }
+    for (const child of node.children) walk(child);
+  };
+  walk(graph.root);
+  return roots;
+}
+function serializeStaticSubtree(dom, graph, root) {
+  const container = dom.createElement("div");
+  const ctx = createRenderContext(dom, graph, container);
+  const instance = mountNode(ctx, root, container);
+  const html = dom.serializeInner(container);
+  instance.dispose();
+  ctx.instances.clear();
+  return html;
+}
+function buildStaticSSRPlan(compiled) {
+  const graph = compiled.graph;
+  const roots = collectMaximalStaticRoots(graph);
+  const plan = /* @__PURE__ */ new Map();
+  if (roots.length === 0) return plan;
+  const dom = new ServerDOMAdapter();
+  for (const root of roots) {
+    plan.set(root.id, serializeStaticSubtree(dom, graph, root));
+  }
+  return plan;
+}
+var PLAN_CACHE = /* @__PURE__ */ new WeakMap();
+function getStaticSSRPlan(compiled) {
+  let plan = PLAN_CACHE.get(compiled);
+  if (plan === void 0) {
+    plan = buildStaticSSRPlan(compiled);
+    PLAN_CACHE.set(compiled, plan);
+  }
+  return plan;
+}
+
 // ../renderer/src/ssr.ts
 function renderToString(compiled, options = {}) {
   const dom = options.domAdapter ?? new ServerDOMAdapter();
+  const plan = options.staticPlan === null ? void 0 : options.staticPlan ?? getStaticSSRPlan(compiled);
+  const staticHTML = plan !== void 0 && plan.size > 0 ? plan : void 0;
   const container = dom.createElement("div");
-  const ctx = createRenderContext(dom, compiled.graph, container);
+  const ctx = createRenderContext(dom, compiled.graph, container, void 0, staticHTML);
   const rootInstance = mountGraph(ctx);
   const html = dom.serializeInner(container);
   rootInstance.dispose();
@@ -1928,114 +2298,8 @@ function renderServerThenHydrate(build, options = {}) {
   };
 }
 
-// ../compiler/dist/diagnostics.js
-var TEXT_PROP_KEYS = /* @__PURE__ */ new Set(["text", "label", "value"]);
-function analyzeGraph(graph) {
-  const nodes = /* @__PURE__ */ new Map();
-  const summary = {
-    totalNodes: 0,
-    staticNodes: 0,
-    staticSubtrees: 0,
-    dynamicTextNodes: 0,
-    dynamicAttrNodes: 0,
-    eventNodes: 0,
-    lists: 0,
-    conditionals: 0
-  };
-  const visit = (node) => {
-    let allChildrenStatic = true;
-    for (const child of node.children) {
-      const childSubtreeStatic = visit(child);
-      if (!childSubtreeStatic) allChildrenStatic = false;
-    }
-    let hasDynamicText = false;
-    let hasDynamicAttr = false;
-    for (const ref of node.stateRefs) {
-      if (TEXT_PROP_KEYS.has(ref.propKey)) hasDynamicText = true;
-      else hasDynamicAttr = true;
-    }
-    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 isStaticSubtree = isStatic && allChildrenStatic;
-    nodes.set(node.id, {
-      isStatic,
-      isStaticSubtree,
-      hasDynamicText,
-      hasDynamicAttr,
-      hasEvents,
-      isList,
-      isConditional
-    });
-    summary.totalNodes += 1;
-    if (isStatic) summary.staticNodes += 1;
-    if (isStaticSubtree) summary.staticSubtrees += 1;
-    if (hasDynamicText) summary.dynamicTextNodes += 1;
-    if (hasDynamicAttr) summary.dynamicAttrNodes += 1;
-    if (hasEvents) summary.eventNodes += 1;
-    if (isList) summary.lists += 1;
-    if (isConditional) summary.conditionals += 1;
-    return isStaticSubtree;
-  };
-  visit(graph.root);
-  return { nodes, summary };
-}
-function inspectCompilation(graph) {
-  const analysis = analyzeGraph(graph);
-  const nodes = [];
-  const walk = (node, depth) => {
-    const a = analysis.nodes.get(node.id);
-    if (a !== void 0) {
-      const classification = a.isStaticSubtree ? "static-subtree-root" : a.isStatic ? "static" : "dynamic";
-      nodes.push({
-        id: node.id,
-        type: node.type,
-        depth,
-        classification,
-        dynamicText: a.hasDynamicText,
-        dynamicAttrs: a.hasDynamicAttr,
-        events: node.events.map((e) => e.type),
-        boundProps: node.stateRefs.map((r) => r.propKey),
-        isList: a.isList,
-        isConditional: a.isConditional,
-        hydration: a.isStaticSubtree ? "adopt-static" : "verify-dynamic"
-      });
-    }
-    for (const child of node.children) walk(child, depth + 1);
-  };
-  walk(graph.root, 0);
-  const staticRatio = analysis.summary.totalNodes === 0 ? 0 : analysis.summary.staticNodes / analysis.summary.totalNodes;
-  return {
-    name: graph.name,
-    version: graph.version,
-    summary: { ...analysis.summary, staticRatio: +staticRatio.toFixed(4) },
-    nodes
-  };
-}
-function formatInspection(inspection) {
-  const s = inspection.summary;
-  const lines = [];
-  lines.push(`StreetUI compiler inspection \u2014 ${inspection.name} v${inspection.version}`);
-  lines.push(
-    `  nodes=${s.totalNodes} static=${s.staticNodes} staticSubtrees=${s.staticSubtrees} dynamicText=${s.dynamicTextNodes} dynamicAttrs=${s.dynamicAttrNodes} events=${s.eventNodes} lists=${s.lists} conditionals=${s.conditionals} staticRatio=${(s.staticRatio * 100).toFixed(1)}%`
-  );
-  for (const n of inspection.nodes) {
-    const flags = [];
-    if (n.dynamicText) flags.push("text");
-    if (n.dynamicAttrs) flags.push("attr:" + n.boundProps.join(","));
-    if (n.events.length > 0) flags.push("on:" + n.events.join(","));
-    if (n.isList) flags.push("list");
-    if (n.isConditional) flags.push("cond");
-    lines.push(
-      `  ${"  ".repeat(n.depth)}${n.type}#${n.id} [${n.classification}]` + (flags.length > 0 ? ` {${flags.join(" ")}}` : "")
-    );
-  }
-  return lines.join("\n");
-}
-
 // src/version.ts
-var VERSION = "1.6.0";
+var VERSION = "1.7.0";
 export {
   VERSION,
   analyzeGraph,