streetui 1.8.0 → 2.0.0

package/dist/index.cjs

@@ -37,6 +37,8 @@ __export(src_exports, {
   FOCUSABLE_SELECTOR: () => FOCUSABLE_SELECTOR,
   FormBuilderImpl: () => FormBuilderImpl,
   GraphNode: () => GraphNode,
+  HeadManager: () => HeadManager,
+  HttpError: () => HttpError,
   Lifecycle: () => Lifecycle,
   ListBuilderImpl: () => ListBuilderImpl,
   NodeInstance: () => NodeInstance,
@@ -60,6 +62,7 @@ __export(src_exports, {
   StreetFrameworkError: () => StreetFrameworkError,
   StreetRenderHandle: () => StreetRenderHandle,
   StreetRendererImpl: () => StreetRendererImpl,
+  TransitionController: () => TransitionController,
   VERSION: () => VERSION,
   a11yIds: () => a11yIds,
   applyNodeProps: () => applyNodeProps,
@@ -74,8 +77,11 @@ __export(src_exports, {
   consoleDiagnosticSink: () => consoleDiagnosticSink,
   consoleHydrationDiagnosticSink: () => consoleHydrationDiagnosticSink,
   containFocus: () => containFocus,
+  createAnnouncer: () => createAnnouncer,
   createApplication: () => createApplication,
+  createAuthSession: () => createAuthSession,
   createBrowserHistory: () => createBrowserHistory,
+  createClient: () => createClient,
   createContext: () => createContext,
   createDevTools: () => createDevTools,
   createForm: () => createForm,
@@ -91,10 +97,12 @@ __export(src_exports, {
   createStreetEvent: () => createStreetEvent,
   defineConfig: () => defineConfig,
   derived: () => derived,
+  describeError: () => describeError,
   diagnosePerformance: () => diagnosePerformance,
   effect: () => effect,
   email: () => email,
   environment: () => environment,
+  escapeHtml: () => escapeHtml,
   escapeHtmlAttr: () => escapeHtmlAttr,
   escapeHtmlText: () => escapeHtmlText,
   flushSync: () => flushSync,
@@ -108,6 +116,7 @@ __export(src_exports, {
   generateApplicationId: () => generateApplicationId,
   generateNodeId: () => generateNodeId,
   getFocusable: () => getFocusable,
+  getResolvedTransition: () => getResolvedTransition,
   globalEventBus: () => globalEventBus,
   headingUpdate: () => headingUpdate,
   hydrateGraph: () => hydrateGraph,
@@ -118,12 +127,16 @@ __export(src_exports, {
   inspectForm: () => inspectForm,
   inspectGraph: () => inspectGraph,
   inspectI18n: () => inspectI18n,
+  inspectInteractions: () => inspectInteractions,
   inspectResource: () => inspectResource,
   inspectRouter: () => inspectRouter,
   inspectSignal: () => inspectSignal,
   interpolate: () => interpolate,
   isBatching: () => isBatching,
   isComponentDefinition: () => isComponentDefinition,
+  isHeadContribution: () => isHeadContribution,
+  isTransitionConfig: () => isTransitionConfig,
+  linkUpdate: () => linkUpdate,
   matchPattern: () => matchPattern,
   matchRoutes: () => matchRoutes,
   maxLength: () => maxLength,
@@ -131,6 +144,7 @@ __export(src_exports, {
   mountGraph: () => mountGraph,
   mountNode: () => mountNode,
   mountRouter: () => mountRouter,
+  mutation: () => mutation,
   nextId: () => nextId,
   nodeIdPrefix: () => nodeIdPrefix,
   nodeTypeStats: () => nodeTypeStats,
@@ -147,14 +161,21 @@ __export(src_exports, {
   readState: () => readState,
   reconcileChildren: () => reconcileChildren,
   reconcileChildrenByPlan: () => reconcileChildrenByPlan,
+  renderDevToolsHTML: () => renderDevToolsHTML,
+  renderHead: () => renderHead,
   renderToString: () => renderToString,
   reportDiagnostic: () => reportDiagnostic,
+  reportError: () => reportError,
   required: () => required,
   resetIdCounter: () => resetIdCounter,
+  resolveHead: () => resolveHead,
   resolveTag: () => resolveTag,
+  resolveTransition: () => resolveTransition,
   resource: () => resource,
   restoreFocus: () => restoreFocus,
   routerOutlet: () => routerOutlet,
+  rovingMenu: () => rovingMenu,
+  runElementTransition: () => runElementTransition,
   runValidators: () => runValidators,
   saveFocus: () => saveFocus,
   scheduleImmediate: () => scheduleImmediate,
@@ -175,6 +196,7 @@ __export(src_exports, {
   validateGraph: () => validateGraph,
   wireComponentBehavior: () => wireComponentBehavior,
   wireEvents: () => wireEvents,
+  wireHeadBehavior: () => wireHeadBehavior,
   wireOverlayBehavior: () => wireOverlayBehavior,
   wireReactiveList: () => wireReactiveList,
   wireSignalBindings: () => wireSignalBindings
@@ -182,7 +204,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/version.ts
-var VERSION = "1.8.0";
+var VERSION = "2.0.0";
 
 // ../state/src/signal.ts
 var _activeConsumer = null;
@@ -522,6 +544,198 @@ function resource(loader, options = {}) {
   };
 }
 
+// ../state/src/mutation.ts
+function mutation(mutator, options = {}) {
+  const status = signal("idle");
+  const data = signal(void 0);
+  const error = signal(void 0);
+  const pending = derived(() => status.get() === "loading");
+  let disposed = false;
+  let runId = 0;
+  const mutate = async (args) => {
+    if (disposed) {
+      return await mutator(args);
+    }
+    const myRun = ++runId;
+    batch(() => {
+      error.set(void 0);
+      status.set("loading");
+    });
+    try {
+      const result = await mutator(args);
+      if (!disposed && myRun === runId) {
+        batch(() => {
+          data.set(result);
+          error.set(void 0);
+          status.set("success");
+        });
+      }
+      if (!disposed && myRun === runId) {
+        await options.onSuccess?.(result, args);
+        await options.onSettled?.(args);
+      }
+      return result;
+    } catch (err) {
+      if (!disposed && myRun === runId) {
+        batch(() => {
+          error.set(err);
+          status.set("error");
+        });
+        await options.onError?.(err, args);
+        await options.onSettled?.(args);
+      }
+      throw err;
+    }
+  };
+  const reset = () => {
+    batch(() => {
+      status.set("idle");
+      data.set(void 0);
+      error.set(void 0);
+    });
+  };
+  const dispose = () => {
+    disposed = true;
+  };
+  if (options.onCleanup !== void 0) options.onCleanup(dispose);
+  return { status, data, error, pending, mutate, reset, dispose };
+}
+
+// ../state/src/client.ts
+var HttpError = class extends Error {
+  status;
+  statusText;
+  url;
+  body;
+  constructor(status, statusText, url, body) {
+    super(`HTTP ${status} ${statusText} for ${url}`);
+    this.name = "HttpError";
+    this.status = status;
+    this.statusText = statusText;
+    this.url = url;
+    this.body = body;
+  }
+};
+function joinUrl(baseUrl, path) {
+  if (baseUrl === void 0 || baseUrl === "") return path;
+  const b = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+  const p = path.startsWith("/") ? path : `/${path}`;
+  return `${b}${p}`;
+}
+function withQuery(url, query) {
+  if (query === void 0) return url;
+  const params = new URLSearchParams();
+  for (const [k, v] of Object.entries(query)) params.set(k, String(v));
+  const qs = params.toString();
+  if (qs === "") return url;
+  return url.includes("?") ? `${url}&${qs}` : `${url}?${qs}`;
+}
+function createClient(config = {}) {
+  const doFetch = config.fetch ?? ((input, init) => {
+    if (typeof fetch === "undefined") {
+      throw new Error("createClient: no global fetch; pass { fetch } explicitly");
+    }
+    return fetch(input, init);
+  });
+  async function request(method, path, body, reqConfig = {}) {
+    const url = withQuery(joinUrl(config.baseUrl, path), reqConfig.query);
+    const headers = { ...config.headers, ...reqConfig.headers };
+    const init = { method, headers };
+    if (reqConfig.signal !== void 0) init.signal = reqConfig.signal;
+    if (body !== void 0) {
+      if (headers["Content-Type"] === void 0) headers["Content-Type"] = "application/json";
+      init.body = JSON.stringify(body);
+    }
+    const response = await doFetch(url, init);
+    const parsed = await parseBody(response);
+    if (!response.ok) {
+      throw new HttpError(response.status, response.statusText, url, parsed);
+    }
+    return parsed;
+  }
+  return {
+    request,
+    get: (path, c) => request("GET", path, void 0, c),
+    post: (path, b, c) => request("POST", path, b, c),
+    put: (path, b, c) => request("PUT", path, b, c),
+    patch: (path, b, c) => request("PATCH", path, b, c),
+    del: (path, c) => request("DELETE", path, void 0, c),
+    resource: (path, options = {}) => {
+      const { query, ...resourceOptions } = options;
+      return resource(
+        (ctx) => request("GET", path, void 0, { signal: ctx.signal, ...query !== void 0 ? { query } : {} }),
+        resourceOptions
+      );
+    },
+    mutation: (method, path, options) => mutation((args) => request(method, path, args), options ?? {})
+  };
+}
+async function parseBody(response) {
+  const text = await response.text();
+  if (text === "") return void 0;
+  const type = response.headers.get("content-type") ?? "";
+  if (type.includes("application/json")) {
+    try {
+      return JSON.parse(text);
+    } catch {
+      return text;
+    }
+  }
+  return text;
+}
+
+// ../state/src/auth.ts
+function createAuthSession(config) {
+  const session = resource(
+    (ctx) => config.loadUser(ctx),
+    {
+      ...config.immediate !== void 0 ? { immediate: config.immediate } : {},
+      ...config.onCleanup !== void 0 ? { onCleanup: config.onCleanup } : {}
+    }
+  );
+  const status = derived(() => {
+    const s = session.status.get();
+    const d = session.data.get();
+    if (s === "error") return "error";
+    if (s === "idle" || s === "loading" && d === void 0) return "loading";
+    return d === null || d === void 0 ? "unauthenticated" : "authenticated";
+  });
+  const user = derived(() => {
+    const d = session.data.get();
+    return d === null ? void 0 : d;
+  });
+  const authenticated = derived(() => status.get() === "authenticated");
+  const unauthenticated = derived(() => status.get() === "unauthenticated");
+  const loading = derived(() => status.get() === "loading");
+  const logoutMutation = mutation(
+    async () => {
+      await config.logout?.();
+    },
+    { onSuccess: () => session.refetch() }
+  );
+  const dispose = () => {
+    session.dispose();
+    status.dispose();
+    user.dispose();
+    authenticated.dispose();
+    unauthenticated.dispose();
+    loading.dispose();
+    logoutMutation.dispose();
+  };
+  return {
+    status,
+    user,
+    error: session.error,
+    authenticated,
+    unauthenticated,
+    loading,
+    loggingOut: logoutMutation.pending,
+    refresh: () => session.refetch(),
+    logout: () => logoutMutation.mutate(void 0),
+    dispose
+  };
+}
+
 // ../core/src/a11y-ids.ts
 var UNSAFE = /[^A-Za-z0-9_-]+/g;
 function toIdToken(base) {
@@ -537,6 +751,9 @@ function a11yIds(base) {
     description: `${token}-description`,
     error: `${token}-error`,
     title: `${token}-title`,
+    trigger: `${token}-trigger`,
+    controls: `${token}-controls`,
+    owns: `${token}-owns`,
     id: (suffix) => `${token}-${toIdToken(suffix)}`
   };
 }
@@ -785,9 +1002,13 @@ function formatDiagnosticContext(context) {
   const parts = [];
   if (context.package !== void 0) parts.push(`package=${context.package}`);
   if (context.operation !== void 0) parts.push(`operation=${context.operation}`);
+  if (context.component !== void 0) parts.push(`component=${context.component}`);
+  if (context.phase !== void 0) parts.push(`phase=${context.phase}`);
   if (context.nodeId !== void 0) parts.push(`node=${context.nodeId}`);
+  if (context.element !== void 0) parts.push(`element=${context.element}`);
   if (context.route !== void 0) parts.push(`route=${context.route}`);
   if (context.resource !== void 0) parts.push(`resource=${context.resource}`);
+  if (context.signal !== void 0) parts.push(`signal=${context.signal}`);
   return parts.length > 0 ? ` [${parts.join(", ")}]` : "";
 }
 var StreetFrameworkError = class extends Error {
@@ -818,6 +1039,42 @@ function consoleDiagnosticSink(logger = console) {
     error: (m, c) => logger.error?.(`${m}${formatDiagnosticContext(c)}`)
   };
 }
+function describeErrorAt(error, context, options, depth) {
+  const isError = error instanceof Error;
+  const name = isError ? error.name : "Error";
+  const message = isError ? error.message : safeStringify(error);
+  const report = { name, message, isError };
+  if (context !== void 0) report.context = context;
+  if (options.includeStack === true && isError && typeof error.stack === "string") {
+    report.stack = error.stack;
+  }
+  if (options.includeCause === true && isError && depth < 4) {
+    const cause = error.cause;
+    if (cause !== void 0 && cause !== null) {
+      report.cause = describeErrorAt(cause, void 0, options, depth + 1);
+    }
+  }
+  return report;
+}
+function safeStringify(value) {
+  if (typeof value === "string") return value;
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  const t = typeof value;
+  if (t === "number" || t === "boolean" || t === "bigint" || t === "symbol") {
+    return String(value);
+  }
+  const ctor = t === "object" && value !== null ? value.constructor?.name ?? "Object" : t;
+  return `[non-Error ${ctor}]`;
+}
+function describeError(error, context, options = {}) {
+  return describeErrorAt(error, context, options, 0);
+}
+function reportError(sink, error, context, options = {}) {
+  const report = describeError(error, context, options);
+  reportDiagnostic(sink, "error", report.message, report.context);
+  return report;
+}
 
 // ../graph/src/graph-node.ts
 var GraphNode = class _GraphNode {
@@ -987,6 +1244,8 @@ var ApplicationGraph = class {
     this.handlers.delete(`__listplan__${node.id}`);
     this.handlers.delete(`__overlay__${node.id}`);
     this.handlers.delete(`__component__${node.id}`);
+    this.handlers.delete(`__transition__${node.id}`);
+    this.handlers.delete(`__head__${node.id}`);
   }
   // ── Handler registry ──────────────────────────────────────────────────────
   registerHandler(key, fn) {
@@ -1075,6 +1334,162 @@ var ApplicationGraph = class {
   }
 };
 
+// ../dsl/src/transition.ts
+function classes(value) {
+  if (value === void 0) return [];
+  const out = [];
+  for (const token of value.split(/\s+/)) {
+    if (token.length > 0 && !out.includes(token)) out.push(token);
+  }
+  return out;
+}
+function merge(a, b) {
+  const out = [...a];
+  for (const token of b) if (!out.includes(token)) out.push(token);
+  return out;
+}
+function resolveTransition(config) {
+  const n = config.name;
+  const enterActive = merge(
+    classes(config.enter),
+    classes(config.enterActive ?? (n !== void 0 ? `${n}-enter-active` : void 0))
+  );
+  const leaveActive = merge(
+    classes(config.leave),
+    classes(config.leaveActive ?? (n !== void 0 ? `${n}-leave-active` : void 0))
+  );
+  return {
+    enterActive,
+    enterFrom: classes(config.enterFrom ?? (n !== void 0 ? `${n}-enter-from` : void 0)),
+    enterTo: classes(config.enterTo ?? (n !== void 0 ? `${n}-enter-to` : void 0)),
+    leaveActive,
+    leaveFrom: classes(config.leaveFrom ?? (n !== void 0 ? `${n}-leave-from` : void 0)),
+    leaveTo: classes(config.leaveTo ?? (n !== void 0 ? `${n}-leave-to` : void 0)),
+    appear: config.appear ?? false,
+    duration: config.duration ?? 1e3
+  };
+}
+function isTransitionConfig(value) {
+  if (value === null || typeof value !== "object") return false;
+  const o = value;
+  return typeof o["name"] === "string" || typeof o["enter"] === "string" || typeof o["enterActive"] === "string" || typeof o["enterFrom"] === "string" || typeof o["leave"] === "string" || typeof o["leaveActive"] === "string" || typeof o["leaveFrom"] === "string";
+}
+
+// ../dsl/src/head.ts
+function metaDedupKey(m) {
+  if (m.charset !== void 0) return "meta:charset";
+  if (m.name !== void 0) return `meta:name=${m.name}`;
+  if (m.property !== void 0) return `meta:property=${m.property}`;
+  if (m.httpEquiv !== void 0) return `meta:http-equiv=${m.httpEquiv}`;
+  return void 0;
+}
+function metaAttrs(m) {
+  const attrs = {};
+  if (m.charset !== void 0) attrs["charset"] = m.charset;
+  if (m.name !== void 0) attrs["name"] = m.name;
+  if (m.property !== void 0) attrs["property"] = m.property;
+  if (m.httpEquiv !== void 0) attrs["http-equiv"] = m.httpEquiv;
+  if (m.content !== void 0) attrs["content"] = m.content;
+  return attrs;
+}
+function linkAttrs(l) {
+  const attrs = { rel: l.rel, href: l.href };
+  if (l.sizes !== void 0) attrs["sizes"] = l.sizes;
+  if (l.type !== void 0) attrs["type"] = l.type;
+  if (l.media !== void 0) attrs["media"] = l.media;
+  if (l.as !== void 0) attrs["as"] = l.as;
+  if (l.crossorigin !== void 0) attrs["crossorigin"] = l.crossorigin;
+  if (l.hreflang !== void 0) attrs["hreflang"] = l.hreflang;
+  return attrs;
+}
+function resolveHead(config) {
+  const entries = [];
+  if (config.charset !== void 0) {
+    entries.push({ tag: "meta", dedupKey: "meta:charset", attrs: { charset: config.charset } });
+  }
+  if (config.base !== void 0) {
+    entries.push({ tag: "base", dedupKey: "base", attrs: { href: config.base } });
+  }
+  if (config.title !== void 0) {
+    entries.push({ tag: "title", dedupKey: "title", attrs: {}, text: config.title });
+  }
+  if (config.description !== void 0) {
+    entries.push({
+      tag: "meta",
+      dedupKey: "meta:name=description",
+      attrs: { name: "description", content: config.description }
+    });
+  }
+  if (config.canonical !== void 0) {
+    entries.push({
+      tag: "link",
+      dedupKey: "link:rel=canonical",
+      attrs: { rel: "canonical", href: config.canonical }
+    });
+  }
+  if (config.robots !== void 0) {
+    entries.push({
+      tag: "meta",
+      dedupKey: "meta:name=robots",
+      attrs: { name: "robots", content: config.robots }
+    });
+  }
+  if (config.themeColor !== void 0) {
+    entries.push({
+      tag: "meta",
+      dedupKey: "meta:name=theme-color",
+      attrs: { name: "theme-color", content: config.themeColor }
+    });
+  }
+  if (config.viewport !== void 0) {
+    entries.push({
+      tag: "meta",
+      dedupKey: "meta:name=viewport",
+      attrs: { name: "viewport", content: config.viewport }
+    });
+  }
+  if (config.favicon !== void 0) {
+    const l = typeof config.favicon === "string" ? { rel: "icon", href: config.favicon } : config.favicon;
+    entries.push({ tag: "link", dedupKey: `link:rel=${l.rel}`, attrs: linkAttrs(l) });
+  }
+  if (config.openGraph !== void 0) {
+    for (const key of Object.keys(config.openGraph)) {
+      const property = `og:${key}`;
+      entries.push({
+        tag: "meta",
+        dedupKey: `meta:property=${property}`,
+        attrs: { property, content: config.openGraph[key] }
+      });
+    }
+  }
+  if (config.twitter !== void 0) {
+    for (const key of Object.keys(config.twitter)) {
+      const name = `twitter:${key}`;
+      entries.push({
+        tag: "meta",
+        dedupKey: `meta:name=${name}`,
+        attrs: { name, content: config.twitter[key] }
+      });
+    }
+  }
+  if (config.meta !== void 0) {
+    for (const m of config.meta) {
+      const key = metaDedupKey(m);
+      if (key === void 0) continue;
+      entries.push({ tag: "meta", dedupKey: key, attrs: metaAttrs(m) });
+    }
+  }
+  if (config.link !== void 0) {
+    for (const l of config.link) {
+      entries.push({ tag: "link", dedupKey: `link:rel=${l.rel}:href=${l.href}`, attrs: linkAttrs(l) });
+    }
+  }
+  return { entries };
+}
+function isHeadContribution(value) {
+  return value !== null && typeof value === "object" && Array.isArray(value["entries"]);
+}
+
 // ../dsl/src/builders.ts
 function isSignal(v) {
   return v !== null && typeof v === "object" && typeof v["get"] === "function" && typeof v["subscribe"] === "function";
@@ -1102,6 +1517,18 @@ function applyA11yProps(props, options) {
   if (options.ariaInvalid !== void 0) props["aria-invalid"] = String(options.ariaInvalid);
   if (options.ariaRequired !== void 0) props["aria-required"] = String(options.ariaRequired);
   if (options.ariaModal !== void 0) props["aria-modal"] = String(options.ariaModal);
+  if (options.ariaOwns !== void 0) props["aria-owns"] = options.ariaOwns;
+  if (options.ariaActiveDescendant !== void 0) props["aria-activedescendant"] = options.ariaActiveDescendant;
+  if (options.ariaHasPopup !== void 0) props["aria-haspopup"] = String(options.ariaHasPopup);
+  if (options.ariaSelected !== void 0) props["aria-selected"] = String(options.ariaSelected);
+}
+function registerTransition(graph, node, config) {
+  if (config === void 0) return;
+  const resolved = resolveTransition(config);
+  graph.registerHandler(
+    `__transition__${node.id}`,
+    () => resolved
+  );
 }
 function containerProps(options) {
   const props = {};
@@ -1162,6 +1589,7 @@ var OVERLAY_KINDS = {
     role: "menu",
     modal: false,
     takesFocus: true,
+    menu: true,
     ariaModal: false,
     defaultCloseOnEscape: true,
     defaultRestoreFocus: true
@@ -1294,6 +1722,7 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       parent: this._node,
       props: containerProps(options)
     });
+    registerTransition(this._graph, node, options.transition);
     builder(new SectionBuilderImpl(node, this._graph));
   }
   container(key, builder, options = {}) {
@@ -1302,6 +1731,7 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       parent: this._node,
       props: containerProps(options)
     });
+    registerTransition(this._graph, node, options.transition);
     builder(new ContainerBuilderImpl(node, this._graph));
   }
   list(key, builder, options = {}) {
@@ -1310,6 +1740,7 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       parent: this._node,
       props: containerProps(options)
     });
+    registerTransition(this._graph, node, options.transition);
     builder(new ListBuilderImpl(node, this._graph));
   }
   listOf(key, items, renderItem, options = {}) {
@@ -1319,6 +1750,7 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       parent: this._node,
       props: containerProps(options)
     });
+    registerTransition(graph, node, options.transition);
     const signalId = `${node.id}:items`;
     node.stateRefs.push({ signalId, propKey: "items" });
     graph.registerHandler(`__signal__${signalId}`, items);
@@ -1340,6 +1772,7 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
         }
       });
       renderItem(item, index, new ContainerBuilderImpl(itemNode, graph));
+      registerTransition(graph, itemNode, options.itemTransition);
       return itemNode;
     };
     const buildPlan = (raw) => {
@@ -1371,6 +1804,7 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       parent: this._node,
       props
     });
+    registerTransition(this._graph, node, options.transition);
     if (options.onSubmit !== void 0) {
       const handlerKey = `submit:${node.id}`;
       this._graph.registerHandler(handlerKey, options.onSubmit);
@@ -1378,18 +1812,20 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
     }
     builder(new FormBuilderImpl(node, this._graph));
   }
-  when(condition, builder, elseBuilder) {
+  when(condition, builder, elseBuilder, options = {}) {
     const graph = this._graph;
     const node = graph.createNode("conditional", {
       parent: this._node,
       props: containerProps({})
     });
+    const branchTransition = options.transition !== void 0 && options.appear === true ? { ...options.transition, appear: true } : options.transition;
     const buildBranch = (build, tag) => {
       const branchKey = `when-${tag}:${node.id}`;
       const branch = graph.createNode("container", {
         key: branchKey,
         props: { key: branchKey }
       });
+      registerTransition(graph, branch, branchTransition);
       build(new ContainerBuilderImpl(branch, graph));
       return branch;
     };
@@ -1435,8 +1871,14 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
     this.container(id, (c) => {
       c.when(
         hasError,
-        // Error state → fallback.
-        (fb) => options.fallback(fb, readError(), retry),
+        // Error state → fallback. The fallback branch mounts exactly when the
+        // boundary enters its error state, so this is also where the optional
+        // `onError` reporting hook fires (observe-only; §6/§7).
+        (fb) => {
+          const currentError = readError();
+          options.onError?.(currentError);
+          options.fallback(fb, currentError, retry);
+        },
         // Healthy state → body, guarded against synchronous build throws.
         (body) => {
           try {
@@ -1448,6 +1890,24 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       );
     }, { id });
   }
+  asyncBoundary(key, res, branches) {
+    const isError = derived(() => res.status.get() === "error");
+    const showSuccess = derived(
+      () => res.status.get() !== "error" && res.data.get() !== void 0
+    );
+    const showLoading = derived(
+      () => res.status.get() !== "error" && res.data.get() === void 0
+    );
+    const dataSignal = derived(() => res.data.get());
+    const retry = () => {
+      void res.refetch();
+    };
+    this.container(key, (c) => {
+      c.when(isError, (fb) => branches.error?.(fb, res.error.peek(), retry));
+      c.when(showSuccess, (sb) => branches.success(sb, dataSignal));
+      c.when(showLoading, (lb) => branches.loading?.(lb));
+    }, { key });
+  }
   // ── Portals & overlays ──────────────────────────────────────────────────────
   portal(key, builder, options = {}) {
     const node = this._graph.createNode("portal", {
@@ -1457,6 +1917,31 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
     });
     builder(new ContainerBuilderImpl(node, this._graph));
   }
+  /**
+   * Declare document metadata (2.0 §1–§3). Creates a `'head'` node — a neutral,
+   * empty inline anchor at this position (one node / one element, so positional
+   * hydration is preserved) — and registers a `__head__<id>` descriptor holding
+   * this call's normalized, dedup-keyed {@link resolveHead} contribution. The
+   * renderer applies it to `document.head` on the browser (adopting server tags
+   * on hydration, cleaning up on unmount / route change) and emits the active
+   * graph's merged metadata as a string on the server (`renderHead`).
+   *
+   * Multiple `head()` nodes may be live at once (app default + route + component)
+   * — the renderer merges them and, per dedup key, the last in document order
+   * wins (see head.ts). No new render path: this reuses the same graph-node +
+   * handler-registry convention as overlays/transitions/components.
+   */
+  head(metadata) {
+    const node = this._graph.createNode("head", {
+      parent: this._node,
+      props: { "data-streetui-head-anchor": "" }
+    });
+    const contribution = resolveHead(metadata);
+    this._graph.registerHandler(
+      `__head__${node.id}`,
+      () => contribution
+    );
+  }
   /**
    * Shared assembly for every overlay kind: a `portal` node whose single child
    * is a `when(open, panel)` conditional. The panel container carries the
@@ -1484,13 +1969,24 @@ var ContainerBuilderBase = class extends ContentBuilderBase {
       ...options.ariaDescribedBy !== void 0 ? { ariaDescribedBy: options.ariaDescribedBy } : {}
     };
     const portalBuilder = new ContainerBuilderImpl(portalNode, graph);
-    portalBuilder.when(openSignal, (panelHost) => {
-      panelHost.container(`${key}__panel`, builder, panelOptions);
-    });
+    portalBuilder.when(
+      openSignal,
+      (panelHost) => {
+        panelHost.container(`${key}__panel`, builder, panelOptions);
+      },
+      void 0,
+      // Overlay open/close rides the panel's `when`; a transition animates the
+      // panel in on open and — via the reconciler's deferred-leave — plays the
+      // leave before the panel is removed (§10). Focus is restored at close-
+      // request time (see wireOverlayBehavior), so it never stays trapped inside
+      // a panel that is animating away.
+      options.transition !== void 0 ? { transition: options.transition } : {}
+    );
     const descriptor = {
       open: openSignal,
       modal: kind.modal,
       takesFocus: kind.takesFocus,
+      menu: kind.menu ?? false,
       closeOnEscape: options.closeOnEscape ?? kind.defaultCloseOnEscape,
       restoreFocus: options.restoreFocus ?? kind.defaultRestoreFocus,
       ...options.initialFocusId !== void 0 ? { initialFocusId: options.initialFocusId } : {},
@@ -1587,6 +2083,7 @@ var ListBuilderImpl = class extends ContentBuilderBase {
       parent: this._node,
       props: containerProps(options)
     });
+    registerTransition(this._graph, node, options.transition);
     builder(new ContainerBuilderImpl(node, this._graph));
   }
 };
@@ -1816,8 +2313,8 @@ var RuntimeNodeInstance = class {
     this.children.push(instance);
   }
   /** Subscribe to a signal and register the unsubscribe for cleanup. */
-  trackSignal(signal2, handler) {
-    const unsub = signal2.subscribe(handler);
+  trackSignal(signal3, handler) {
+    const unsub = signal3.subscribe(handler);
     this.cleanup.add(unsub);
   }
   /** Register an arbitrary cleanup function (e.g. DOM event removal). */
@@ -2188,6 +2685,9 @@ var BrowserDOMAdapter = class {
   body() {
     return document.body ?? null;
   }
+  head() {
+    return document.head ?? null;
+  }
   activeElement() {
     return document.activeElement ?? null;
   }
@@ -2567,6 +3067,9 @@ var ServerDOMAdapter = class {
   body() {
     return null;
   }
+  head() {
+    return null;
+  }
   activeElement() {
     return null;
   }
@@ -2681,18 +3184,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) => {
@@ -2701,6 +3211,84 @@ 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);
+}
+
+// ../dom/src/live-region.ts
+var VISUALLY_HIDDEN = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;";
+function makeRegion(dom, politeness) {
+  const el = dom.createElement("div");
+  dom.setAttribute(el, "aria-live", politeness);
+  dom.setAttribute(el, "aria-atomic", "true");
+  dom.setAttribute(el, "role", politeness === "assertive" ? "alert" : "status");
+  dom.setAttribute(el, "data-streetui-live", politeness);
+  dom.setAttribute(el, "style", VISUALLY_HIDDEN);
+  return el;
+}
+function createAnnouncer(dom) {
+  const body = dom.body();
+  if (body === null) {
+    return { announce() {
+    }, clear() {
+    }, destroy() {
+    } };
+  }
+  const polite = makeRegion(dom, "polite");
+  const assertive = makeRegion(dom, "assertive");
+  dom.appendChild(body, polite);
+  dom.appendChild(body, assertive);
+  let destroyed = false;
+  const write = (region, message) => {
+    dom.setTextContent(region, "");
+    void Promise.resolve().then(() => {
+      if (!destroyed) dom.setTextContent(region, message);
+    });
+  };
+  return {
+    announce(message, options) {
+      if (destroyed) return;
+      write(options?.assertive === true ? assertive : polite, message);
+    },
+    clear() {
+      if (destroyed) return;
+      dom.setTextContent(polite, "");
+      dom.setTextContent(assertive, "");
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      for (const region of [polite, assertive]) {
+        const parent = dom.parentNode(region);
+        if (parent !== null) dom.removeChild(parent, region);
+      }
+    }
+  };
+}
 
 // ../renderer/src/render-context.ts
 function createRenderContext(dom, graph, container, hydrationDiagnostics, staticHTML) {
@@ -2864,7 +3452,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";
@@ -2912,7 +3506,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;
@@ -2933,28 +3527,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);
@@ -2981,21 +3580,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 };
@@ -3121,6 +3733,365 @@ 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, classes2) {
+  if (classes2.length === 0) return;
+  const current = splitClass(dom.getAttribute(el, "class"));
+  let changed = false;
+  for (const c of classes2) {
+    if (!current.includes(c)) {
+      current.push(c);
+      changed = true;
+    }
+  }
+  if (changed) dom.setAttribute(el, "class", current.join(" "));
+}
+function removeClasses(dom, el, classes2) {
+  if (classes2.length === 0) return;
+  const current = splitClass(dom.getAttribute(el, "class"));
+  const next = current.filter((c) => !classes2.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);
+    }
+  };
+}
+function runElementTransition(dom, el, rt, phase, onDone) {
+  if (dom.body() === null || !dom.isElement(el)) {
+    onDone();
+    return { cancel: () => {
+    } };
+  }
+  const active = phase === "enter" ? rt.enterActive : rt.leaveActive;
+  const from = phase === "enter" ? rt.enterFrom : rt.leaveFrom;
+  const to = phase === "enter" ? rt.enterTo : rt.leaveTo;
+  return startRun(dom, el, active, from, to, rt.duration, onDone);
+}
+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",
@@ -3243,6 +4214,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;
   }
@@ -3273,7 +4247,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") {
@@ -3298,6 +4272,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);
@@ -3362,6 +4346,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) {
@@ -3382,32 +4377,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);
@@ -3422,14 +4427,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);
@@ -3465,11 +4471,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));
       }
@@ -3582,7 +4591,12 @@ function hydrateNode(ctx, graphNode, domNode, path) {
     case "link": {
       const instance = new NodeInstance(graphNode, domNode);
       ctx.instances.set(graphNode.id, instance);
-      if (graphNode.type === "link") wireEvents(dom, graph, graphNode, domNode, instance);
+      if (graphNode.type === "link") {
+        wireEvents(dom, graph, graphNode, domNode, instance);
+        if (graphNode.stateRefs.length !== 0) {
+          wireSignalBindings(ctx, graphNode, instance, linkUpdate(dom, domNode));
+        }
+      }
       return instance;
     }
     case "reactive-list":
@@ -3612,6 +4626,12 @@ function hydrateNode(ctx, graphNode, domNode, path) {
       wireOverlayBehavior(ctx, graphNode, instance, target);
       return instance;
     }
+    case "head": {
+      const instance = new NodeInstance(graphNode, domNode);
+      ctx.instances.set(graphNode.id, instance);
+      wireHeadBehavior(ctx, graphNode, instance);
+      return instance;
+    }
     default: {
       const instance = new NodeInstance(graphNode, domNode);
       ctx.instances.set(graphNode.id, instance);
@@ -3858,7 +4878,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,
@@ -4204,16 +5225,38 @@ function mountRouter(router, options) {
   } else {
     outlet = container;
   }
+  const routeTransition = options.transition !== void 0 ? resolveTransition(options.transition) : void 0;
+  const txDom = routeTransition !== void 0 ? new BrowserDOMAdapter() : void 0;
   let active = null;
+  const pendingLeaves = /* @__PURE__ */ new Map();
   let firstRender = hydrateMode;
+  const teardownRoute = (route) => {
+    route.registry.run();
+    route.mounted.unmount();
+    if (route.host !== null && txDom !== void 0) {
+      const parent = txDom.parentNode(route.host);
+      if (parent !== null) txDom.removeChild(parent, route.host);
+    }
+  };
   const disposeActive = () => {
     if (active === null) return;
-    active.registry.run();
-    active.mounted.unmount();
+    teardownRoute(active);
     active = null;
   };
-  const renderRoute = (match) => {
-    disposeActive();
+  const wrapOutletChildren = (dom) => {
+    const host2 = dom.createElement("div");
+    dom.setAttribute(host2, "data-streetui-route", "");
+    const moved = [];
+    let child = dom.firstChild(outlet);
+    while (child !== null) {
+      moved.push(child);
+      child = dom.nextSibling(child);
+    }
+    for (const n of moved) dom.appendChild(host2, n);
+    dom.appendChild(outlet, host2);
+    return host2;
+  };
+  const buildRoute = (match, target, hydrate) => {
     const registry = new CleanupRegistry();
     const ctx = {
       path: match.path,
@@ -4226,9 +5269,53 @@ function mountRouter(router, options) {
     routeApp.page("route", (page) => match.route.builder(page, ctx));
     const runtime = createRuntime({ renderer });
     const routeCompiled = compile(routeApp);
-    const mounted = firstRender ? runtime.hydrate(routeCompiled, outlet) : runtime.mount(routeCompiled, outlet);
+    const mounted = hydrate ? runtime.hydrate(routeCompiled, target) : runtime.mount(routeCompiled, target);
+    return { registry, mounted, host: null, enterRun: null };
+  };
+  const renderRoute = (match) => {
+    if (routeTransition === void 0 || txDom === void 0) {
+      disposeActive();
+      active = buildRoute(match, outlet, firstRender);
+      firstRender = false;
+      return;
+    }
+    if (active === null) {
+      if (firstRender) {
+        active = buildRoute(match, outlet, true);
+        active.host = wrapOutletChildren(txDom);
+      } else {
+        const host2 = txDom.createElement("div");
+        txDom.setAttribute(host2, "data-streetui-route", "");
+        txDom.appendChild(outlet, host2);
+        active = buildRoute(match, host2, false);
+        active.host = host2;
+      }
+      firstRender = false;
+      return;
+    }
     firstRender = false;
-    active = { registry, mounted };
+    const leaving = active;
+    leaving.enterRun?.cancel();
+    leaving.enterRun = null;
+    const leaveHost = leaving.host;
+    const enterHost = txDom.createElement("div");
+    txDom.setAttribute(enterHost, "data-streetui-route", "");
+    txDom.appendChild(outlet, enterHost);
+    const next = buildRoute(match, enterHost, false);
+    next.host = enterHost;
+    next.enterRun = runElementTransition(txDom, enterHost, routeTransition, "enter", () => {
+      next.enterRun = null;
+    });
+    active = next;
+    if (leaveHost !== null) {
+      const run = runElementTransition(txDom, leaveHost, routeTransition, "leave", () => {
+        pendingLeaves.delete(leaving);
+        teardownRoute(leaving);
+      });
+      pendingLeaves.set(leaving, run);
+    } else {
+      teardownRoute(leaving);
+    }
   };
   renderRoute(router.currentRoute.peek());
   const stopRouteSub = router.currentRoute.subscribe((match) => renderRoute(match));
@@ -4256,6 +5343,11 @@ function mountRouter(router, options) {
     unmount() {
       if (interceptLinks) container.removeEventListener("click", onClick);
       stopRouteSub();
+      for (const [route, run] of pendingLeaves) {
+        run.cancel();
+        teardownRoute(route);
+      }
+      pendingLeaves.clear();
       disposeActive();
       shellMounted?.unmount();
       router.destroy();
@@ -4580,6 +5672,40 @@ function inspectComponents(graph) {
   });
   return out;
 }
+function inspectInteractions(graph) {
+  const overlays = [];
+  const transitions = [];
+  graph.walk((node, depth) => {
+    const overlayFn = graph.getHandler(`__overlay__${node.id}`);
+    if (overlayFn !== void 0) {
+      const d = overlayFn();
+      overlays.push({
+        id: node.id,
+        key: node.key,
+        open: d.open.peek(),
+        modal: d.modal,
+        takesFocus: d.takesFocus,
+        menu: d.menu,
+        closeOnEscape: d.closeOnEscape,
+        restoreFocus: d.restoreFocus,
+        depth
+      });
+    }
+    const transitionFn = graph.getHandler(`__transition__${node.id}`);
+    if (transitionFn !== void 0) {
+      const t = transitionFn();
+      transitions.push({
+        id: node.id,
+        key: node.key,
+        nodeType: node.type,
+        duration: t.duration,
+        appear: t.appear,
+        depth
+      });
+    }
+  });
+  return { overlays, transitions };
+}
 
 // ../devtools/src/application.ts
 function collectPerf(node, distinctSignals, acc) {
@@ -4815,11 +5941,22 @@ function capture(compiled, sources, options) {
     snapshot: app.perf,
     diagnostics: diagnosePerformance(compiled, options.perfThresholds)
   };
+  const components = inspectComponents(compiled.graph);
+  const interactions = inspectInteractions(compiled.graph);
+  const diagnostics = {
+    errors: app.diagnostics.errors,
+    warnings: app.diagnostics.warnings,
+    messages: app.diagnostics.messages
+  };
   const snapshot = {
     application,
     graph: app.graph,
     signals,
     performance,
+    components,
+    overlays: interactions.overlays,
+    transitions: interactions.transitions,
+    diagnostics,
     ...sources.router !== void 0 ? { router: inspectRouter(sources.router) } : {},
     ...sources.resources !== void 0 ? { resources: mapInspect(sources.resources, (r) => inspectResource(r)) } : {},
     ...sources.forms !== void 0 ? { forms: mapInspect(sources.forms, (f) => inspectForm(f)) } : {},
@@ -4860,6 +5997,25 @@ function formatSnapshot(s) {
   for (const [label, sig] of Object.entries(s.signals.live)) {
     lines.push(`  ${label} [${sig.kind}] = ${format(sig.value)} \xB7 observers ${sig.observerCount ?? "?"}`);
   }
+  if (s.components.length > 0) {
+    lines.push(`Components: ${s.components.length}`);
+    for (const c of s.components) {
+      lines.push(`  ${"  ".repeat(c.depth)}${c.name}${c.key !== void 0 ? ` (#${c.key})` : ""} \xB7 children ${c.childCount}`);
+    }
+  }
+  if (s.overlays.length > 0) {
+    lines.push(`Overlays: ${s.overlays.length}`);
+    for (const o of s.overlays) {
+      const kind = o.modal ? "modal" : o.menu ? "menu" : o.takesFocus ? "focusable" : "non-modal";
+      lines.push(`  ${o.key ?? o.id} [${kind}] ${o.open ? "open" : "closed"}`);
+    }
+  }
+  if (s.transitions.length > 0) {
+    lines.push(`Transitions: ${s.transitions.length}`);
+    for (const t of s.transitions) {
+      lines.push(`  ${t.key ?? t.id} on <${t.nodeType}> \xB7 ${t.duration}ms${t.appear ? " \xB7 appear" : ""}`);
+    }
+  }
   if (s.router !== void 0) {
     lines.push(`Router: ${s.router.path} (${s.router.pattern})${s.router.isFallback ? " [fallback]" : ""}`);
   }
@@ -4893,6 +6049,12 @@ function formatSnapshot(s) {
   for (const d of s.performance.diagnostics) {
     lines.push(`  ${d.code}: ${d.message}`);
   }
+  lines.push(
+    `Diagnostics: ${s.diagnostics.errors} error(s), ${s.diagnostics.warnings} warning(s)`
+  );
+  for (const m of s.diagnostics.messages) {
+    lines.push(`  ${m}`);
+  }
   return lines.join("\n");
 }
 function format(value) {
@@ -4908,6 +6070,176 @@ function format(value) {
   return String(value);
 }
 
+// ../devtools/src/view.ts
+function escapeHtml(value) {
+  const s = typeof value === "string" ? value : stringifyValue(value);
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function stringifyValue(value) {
+  if (value === null || value === void 0) return String(value);
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "[object]";
+    }
+  }
+  return String(value);
+}
+function section(title, count, body) {
+  const badge = count === void 0 ? "" : ` <span class="st-count">${count}</span>`;
+  return `<section class="st-panel"><h2>${escapeHtml(title)}${badge}</h2>${body}</section>`;
+}
+function ul(items) {
+  if (items.length === 0) return '<p class="st-empty">(none)</p>';
+  return `<ul>${items.map((i) => `<li>${i}</li>`).join("")}</ul>`;
+}
+function renderDevToolsHTML(s) {
+  const app = s.application;
+  const parts = [];
+  parts.push(
+    section(
+      "Application",
+      void 0,
+      `<p>${escapeHtml(app.identity.name)} <span class="st-dim">v${escapeHtml(app.identity.version)}</span></p><p class="st-dim">${app.nodeCount} nodes \xB7 depth ${app.maxDepth} \xB7 ${app.pages.length} page(s) \xB7 ${app.signalCount} signals \xB7 ${app.eventHandlers} handlers \xB7 ${app.stateBindings} bindings</p>`
+    )
+  );
+  parts.push(
+    section(
+      "Components",
+      s.components.length,
+      ul(
+        s.components.map(
+          (c) => `<span class="st-depth" style="--d:${c.depth}"></span><code>${escapeHtml(c.name)}</code>` + (c.key !== void 0 ? ` <span class="st-key">#${escapeHtml(c.key)}</span>` : "") + ` <span class="st-dim">${c.childCount} child(ren)</span>`
+        )
+      )
+    )
+  );
+  parts.push(section("Graph", void 0, `<pre class="st-tree">${escapeHtml(renderNodeTree(s.graph))}</pre>`));
+  parts.push(
+    section(
+      "Signals",
+      s.signals.boundSignalIds.length,
+      `<p class="st-dim">${s.signals.boundSignalIds.length} bound in graph \xB7 effects shown as observer counts (no global effect registry)</p>` + ul(
+        Object.entries(s.signals.live).map(
+          ([label, sig]) => `<code>${escapeHtml(label)}</code> <span class="st-key">[${escapeHtml(sig.kind)}]</span> = <code>${escapeHtml(sig.value)}</code> <span class="st-dim">observers ${escapeHtml(sig.observerCount ?? "?")}</span>`
+        )
+      )
+    )
+  );
+  if (s.router !== void 0) {
+    parts.push(
+      section(
+        "Router",
+        void 0,
+        `<p><code>${escapeHtml(s.router.path)}</code> <span class="st-dim">(${escapeHtml(s.router.pattern)})${s.router.isFallback ? " \xB7 fallback" : ""}</span></p>`
+      )
+    );
+  }
+  if (s.resources !== void 0) {
+    parts.push(
+      section(
+        "Resources",
+        Object.keys(s.resources).length,
+        ul(
+          Object.entries(s.resources).map(
+            ([label, r]) => `<code>${escapeHtml(label)}</code>: ${escapeHtml(r.status)}` + (r.loading ? ' <span class="st-dim">(loading)</span>' : "") + (r.hasError ? ` <span class="st-err">!${escapeHtml(r.errorName)}</span>` : "")
+          )
+        )
+      )
+    );
+  }
+  parts.push(
+    section(
+      "Overlays",
+      s.overlays.length,
+      ul(
+        s.overlays.map((o) => {
+          const kind = o.modal ? "modal" : o.menu ? "menu" : o.takesFocus ? "focusable" : "non-modal";
+          return `<code>${escapeHtml(o.key ?? o.id)}</code> <span class="st-key">[${kind}]</span> <span class="st-dim">${o.open ? "open" : "closed"}${o.closeOnEscape ? " \xB7 esc" : ""}${o.restoreFocus ? " \xB7 restore" : ""}</span>`;
+        })
+      )
+    )
+  );
+  parts.push(
+    section(
+      "Transitions",
+      s.transitions.length,
+      ul(
+        s.transitions.map(
+          (t) => `<code>${escapeHtml(t.key ?? t.id)}</code> on <code>&lt;${escapeHtml(t.nodeType)}&gt;</code> <span class="st-dim">${t.duration}ms${t.appear ? " \xB7 appear" : ""}</span>`
+        )
+      )
+    )
+  );
+  if (s.forms !== void 0) {
+    parts.push(
+      section(
+        "Forms",
+        Object.keys(s.forms).length,
+        ul(
+          Object.entries(s.forms).map(
+            ([label, f]) => `<code>${escapeHtml(label)}</code>: ${f.valid ? "valid" : "invalid"} \xB7 ${escapeHtml(f.status)} \xB7 ${f.fields.length} field(s)`
+          )
+        )
+      )
+    );
+  }
+  if (s.i18n !== void 0) {
+    const missing = s.i18n.missingKeys;
+    parts.push(
+      section(
+        "i18n",
+        void 0,
+        `<p><code>${escapeHtml(s.i18n.locale)}</code> of [${s.i18n.locales.map(escapeHtml).join(", ")}]${missing !== void 0 ? ` <span class="st-dim">\xB7 missing ${missing.length}</span>` : ""}</p>`
+      )
+    );
+  }
+  parts.push(
+    section(
+      "Performance",
+      s.performance.diagnostics.length,
+      `<p class="st-dim">Structural counts, not runtime timings \u2014 not a production profiler.</p>` + ul(s.performance.diagnostics.map((d) => `<code>${escapeHtml(d.code)}</code>: ${escapeHtml(d.message)}`))
+    )
+  );
+  parts.push(
+    section(
+      "Diagnostics",
+      s.diagnostics.errors + s.diagnostics.warnings,
+      `<p class="st-dim">${s.diagnostics.errors} error(s) \xB7 ${s.diagnostics.warnings} warning(s)</p>` + ul(s.diagnostics.messages.map((m) => escapeHtml(m)))
+    )
+  );
+  const title = `StreetUI DevTools \u2014 ${escapeHtml(app.identity.name)}`;
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${title}</title><style>${DEVTOOLS_CSS}</style></head><body class="st-devtools"><header class="st-header"><h1>${title} <span class="st-dim">v${escapeHtml(app.identity.version)}</span></h1></header><main>${parts.join("")}</main></body></html>`;
+}
+function renderNodeTree(node) {
+  const lines = [];
+  const walk = (n) => {
+    const indent = "  ".repeat(n.depth);
+    const key = n.key !== void 0 ? ` #${n.key}` : "";
+    lines.push(`${indent}<${n.type}${key}> ${n.id}`);
+    for (const c of n.children) walk(c);
+  };
+  walk(node);
+  return lines.join("\n");
+}
+var DEVTOOLS_CSS = [
+  ".st-devtools{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;color:#e6e6e6;background:#1e1e28}",
+  ".st-header{padding:12px 16px;border-bottom:1px solid #333;background:#15151c}",
+  ".st-header h1{font-size:14px;margin:0}",
+  "main{padding:8px 16px}",
+  ".st-panel{margin:12px 0;border:1px solid #2c2c38;border-radius:6px;overflow:hidden}",
+  ".st-panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:0;padding:6px 10px;background:#23232e}",
+  ".st-panel ul{list-style:none;margin:0;padding:6px 10px}",
+  ".st-panel li{padding:1px 0}",
+  ".st-panel p{margin:6px 10px}",
+  ".st-count{background:#3a3a4a;border-radius:10px;padding:0 7px;font-size:11px;float:right}",
+  ".st-dim{color:#8a8a9a}.st-key{color:#7db4ff}.st-err{color:#ff8a8a}.st-empty{color:#6a6a7a}",
+  ".st-tree{margin:6px 10px;white-space:pre;overflow:auto;color:#c8c8d4}",
+  ".st-depth{display:inline-block}.st-depth{width:calc(var(--d,0)*12px)}",
+  "code{color:#d7d7e0}"
+].join("");
+
 // src/config.ts
 function defineConfig(config) {
   return config;
@@ -4931,6 +6263,8 @@ function defineConfig(config) {
   FOCUSABLE_SELECTOR,
   FormBuilderImpl,
   GraphNode,
+  HeadManager,
+  HttpError,
   Lifecycle,
   ListBuilderImpl,
   NodeInstance,
@@ -4954,6 +6288,7 @@ function defineConfig(config) {
   StreetFrameworkError,
   StreetRenderHandle,
   StreetRendererImpl,
+  TransitionController,
   VERSION,
   a11yIds,
   applyNodeProps,
@@ -4968,8 +6303,11 @@ function defineConfig(config) {
   consoleDiagnosticSink,
   consoleHydrationDiagnosticSink,
   containFocus,
+  createAnnouncer,
   createApplication,
+  createAuthSession,
   createBrowserHistory,
+  createClient,
   createContext,
   createDevTools,
   createForm,
@@ -4985,10 +6323,12 @@ function defineConfig(config) {
   createStreetEvent,
   defineConfig,
   derived,
+  describeError,
   diagnosePerformance,
   effect,
   email,
   environment,
+  escapeHtml,
   escapeHtmlAttr,
   escapeHtmlText,
   flushSync,
@@ -5002,6 +6342,7 @@ function defineConfig(config) {
   generateApplicationId,
   generateNodeId,
   getFocusable,
+  getResolvedTransition,
   globalEventBus,
   headingUpdate,
   hydrateGraph,
@@ -5012,12 +6353,16 @@ function defineConfig(config) {
   inspectForm,
   inspectGraph,
   inspectI18n,
+  inspectInteractions,
   inspectResource,
   inspectRouter,
   inspectSignal,
   interpolate,
   isBatching,
   isComponentDefinition,
+  isHeadContribution,
+  isTransitionConfig,
+  linkUpdate,
   matchPattern,
   matchRoutes,
   maxLength,
@@ -5025,6 +6370,7 @@ function defineConfig(config) {
   mountGraph,
   mountNode,
   mountRouter,
+  mutation,
   nextId,
   nodeIdPrefix,
   nodeTypeStats,
@@ -5041,14 +6387,21 @@ function defineConfig(config) {
   readState,
   reconcileChildren,
   reconcileChildrenByPlan,
+  renderDevToolsHTML,
+  renderHead,
   renderToString,
   reportDiagnostic,
+  reportError,
   required,
   resetIdCounter,
+  resolveHead,
   resolveTag,
+  resolveTransition,
   resource,
   restoreFocus,
   routerOutlet,
+  rovingMenu,
+  runElementTransition,
   runValidators,
   saveFocus,
   scheduleImmediate,
@@ -5069,6 +6422,7 @@ function defineConfig(config) {
   validateGraph,
   wireComponentBehavior,
   wireEvents,
+  wireHeadBehavior,
   wireOverlayBehavior,
   wireReactiveList,
   wireSignalBindings