@aparte/core 0.24.0 → 0.25.0

package/dist/{dialog-triggers-BqXRdHWZ.js → defer-hydration-BwMqeRHq.js}

@@ -1,5 +1,5 @@
 import { toolRefusal as toolRefusal$1, unansweredTail, runStreamAgent } from "@aparte/engine";
-import { A as APARTE_ICON_GLYPHS } from "./glyphs-C8z2oJUg.js";
+import { A as APARTE_ICON_GLYPHS } from "./glyphs-2bym5jl5.js";
 function contentToText(content) {
   if (typeof content === "string") return content;
   return content.filter((p) => p.type === "text").map((p) => p.text).join("");
@@ -950,13 +950,13 @@ function stampSegmentOnInsert(segments, segment, messageId, defaults) {
     ...timingPatch(base, { startedAt: segmentTiming(segment)?.startedAt ?? Date.now() })
   };
 }
-function adoptSegment(segments, segment, messageId, live = false) {
+function adoptSegment(segments, segment, messageId, live2 = false) {
   return {
     ...segment,
     messageId,
     index: segments.length,
     isStreaming: false,
-    ...segment.type === "tool_call" && (segment.status === "awaiting-approval" || segment.status === "pending" && !live) && !segment.deferred?.ticket ? { status: "aborted" } : {}
+    ...segment.type === "tool_call" && (segment.status === "awaiting-approval" || segment.status === "pending" && !live2) && !segment.deferred?.ticket ? { status: "aborted" } : {}
   };
 }
 const RESERVED = /* @__PURE__ */ new Set(["id", "type", "messageId", "index"]);
@@ -1030,11 +1030,11 @@ function openSegmentIds(segments) {
 }
 function adoptMessageSegments(message) {
   if (!message.segments?.length) return { ...message };
-  const live = message.status === "streaming" || message.status === "pending";
+  const live2 = message.status === "streaming" || message.status === "pending";
   return {
     ...message,
     segments: message.segments.reduce((acc, segment) => {
-      acc.push(adoptSegment(acc, segment, message.id, live));
+      acc.push(adoptSegment(acc, segment, message.id, live2));
       return acc;
     }, [])
   };
@@ -1070,8 +1070,8 @@ function detachConfig(el2) {
   if (previous) notifyConfigChanged(el2, resolveConfig(el2.parentElement), previous);
 }
 function resolveConfig(el2) {
-  const host = el2?.closest?.(`[${APARTE_HOST_ATTR}]`);
-  return host?.[CONFIG_SLOT] ?? aparteGlobalConfig;
+  const host2 = el2?.closest?.(`[${APARTE_HOST_ATTR}]`);
+  return host2?.[CONFIG_SLOT] ?? aparteGlobalConfig;
 }
 let _renderConfig = null;
 function runWithConfig(config, fn) {
@@ -1928,6 +1928,33 @@ function renderingVersionOf(cfg) {
 function bumpRenderingVersion(cfg) {
   renderingVersions.set(cfg, renderingVersionOf(cfg) + 1);
 }
+const rendererListeners = /* @__PURE__ */ new Set();
+const pendingRendererChanges = /* @__PURE__ */ new Set();
+function onRenderersChange(listener) {
+  rendererListeners.add(listener);
+  return () => {
+    rendererListeners.delete(listener);
+  };
+}
+function notifyRenderersChanged(cfg) {
+  if (pendingRendererChanges.size === 0) {
+    queueMicrotask(() => {
+      const changed = [...pendingRendererChanges];
+      pendingRendererChanges.clear();
+      for (const config of changed) {
+        for (const listener of [...rendererListeners]) {
+          try {
+            listener(config);
+          } catch (err) {
+            console.error("[aparte] a renderer-change listener threw", err);
+          }
+        }
+      }
+    });
+  }
+  pendingRendererChanges.add(cfg);
+}
+const matcherKey = (match) => match instanceof RegExp ? `re:${String(match)}` : `name:${match}`;
 const ELEMENT_SHAPING = ["hidden", "open", "details", "quiet"];
 function drawingOf(provider, name) {
   if (!provider || !(name in provider) || name in Object.prototype) return void 0;
@@ -2039,6 +2066,11 @@ class AparteConfig {
   _tools = /* @__PURE__ */ new Map();
   // By exact name, pattern or '*' — see `tool-table.ts` for the one resolution rule.
   _toolRenderers = new ToolTable();
+  /** {@link overrideToolRenderer}'s stacks: what each matcher held below every override. */
+  /** Per matcher: what it held below every override, then one entry per override — an object of its own, so two overrides of the same renderer are told apart. */
+  _toolRendererOverrides = /* @__PURE__ */ new Map();
+  /** Bumped by `reset()`: a restore function from before it must not undo what came after. */
+  _overrideGeneration = 0;
   _toolDisplays = new ToolTable();
   /** Tagged blocks the stream parser recognises in the prose — see {@link registerStreamBlock}. */
   _streamBlocks = /* @__PURE__ */ new Map();
@@ -2880,12 +2912,64 @@ class AparteConfig {
    * // Custom pill for a web-search tool
    * aparteGlobalConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="aparte-tool-label">Searching...</div>` });
    *
+   * Calls already on screen follow: those this registration now draws are drawn again
+   * by it (the renderer that drew them before gets its `cleanup`), and nothing else on
+   * the page is touched.
+   *
    * @example
    * // One look for every tool an MCP server brings
    * aparteGlobalConfig.registerToolRenderer(/^mcp__/, { render: (seg) => myMcpCard(seg) });
    */
   registerToolRenderer(match, renderer) {
+    if (this._toolRenderers.get(match) === renderer) return;
     this._toolRenderers.set(match, renderer);
+    notifyRenderersChanged(this);
+  }
+  /**
+   * Put `renderer` over whatever this matcher holds, and get back the function that takes
+   * it off again — the registration a component makes for as long as it is mounted.
+   *
+   * Overrides stack per matcher. The function restores what was there before THIS
+   * override, and taking off an override that is no longer on top changes nothing on
+   * screen: two components declaring the same tool, the newer wins, and unmounting the
+   * older does not take the newer's away. When the last one goes, the matcher holds what
+   * it held before the first — another registration, or nothing. Calls on screen follow
+   * each change, as with {@link registerToolRenderer}. The returned function is safe to
+   * call twice.
+   *
+   * @example
+   * const restore = aparteGlobalConfig.overrideToolRenderer('get_weather', weatherCard);
+   * // …later, when the component that declared it unmounts:
+   * restore();
+   */
+  overrideToolRenderer(match, renderer) {
+    const key = matcherKey(match);
+    const current = this._toolRenderers.get(match);
+    let stack = this._toolRendererOverrides.get(key);
+    if (!stack) {
+      stack = [{ renderer: current }];
+      this._toolRendererOverrides.set(key, stack);
+    } else if (stack[stack.length - 1].renderer !== current) {
+      stack.splice(0, stack.length, { renderer: current });
+    }
+    const entry = { renderer };
+    stack.push(entry);
+    this.registerToolRenderer(match, renderer);
+    const generation = this._overrideGeneration;
+    let restored = false;
+    return () => {
+      if (restored || generation !== this._overrideGeneration) return;
+      restored = true;
+      const i = stack.indexOf(entry);
+      if (i <= 0) return;
+      const wasTop = i === stack.length - 1;
+      stack.splice(i, 1);
+      if (stack.length === 1 && this._toolRendererOverrides.get(key) === stack) this._toolRendererOverrides.delete(key);
+      if (!wasTop || this._toolRenderers.get(match) !== renderer) return;
+      const top = stack[stack.length - 1].renderer;
+      if (top) this.registerToolRenderer(match, top);
+      else this.unregisterToolRenderer(match);
+    };
   }
   /**
    * Field defaults for a segment TYPE, filled in when a segment enters a message.
@@ -2925,9 +3009,11 @@ class AparteConfig {
   clearSegmentDefaults(type) {
     this._segmentDefaults.delete(type);
   }
-  /** Unregister the renderer registered under this matcher. */
+  /** Unregister the renderer registered under this matcher. Calls on screen it drew go back to core's row. */
   unregisterToolRenderer(match) {
+    if (this._toolRenderers.get(match) === void 0) return;
     this._toolRenderers.delete(match);
+    notifyRenderersChanged(this);
   }
   /** The renderer that draws a tool named `toolName` — exact, pattern or `'*'` — or undefined. */
   getToolRenderer(toolName) {
@@ -3278,6 +3364,9 @@ class AparteConfig {
     this._fetchedModels.clear();
     this._tools.clear();
     this._toolRenderers.clear();
+    this._toolRendererOverrides.clear();
+    this._overrideGeneration++;
+    notifyRenderersChanged(this);
     this._toolDisplays.clear();
     this._streamBlocks.clear();
     this._modelConfig = {};
@@ -3329,19 +3418,19 @@ const ONE_SHOT_PROBE = "<i>a</i>";
 function hasOneShotMarkdownProvider() {
   return contextConfig().renderMarkdown(ONE_SHOT_PROBE) !== escapeHtml(ONE_SHOT_PROBE);
 }
-function writeStreamedMarkdown(host, contentEl, content, streaming) {
+function writeStreamedMarkdown(host2, contentEl, content, streaming) {
   if (streaming) {
-    if (host._aparteSmd === void 0) {
+    if (host2._aparteSmd === void 0) {
       settledFromParser.delete(contentEl);
       const renderer = contextConfig().createStreamingMarkdownRenderer(contentEl);
       if (renderer) {
         contentEl.textContent = "";
-        host._aparteSmd = { renderer, written: 0 };
+        host2._aparteSmd = { renderer, written: 0 };
       } else {
-        host._aparteSmd = null;
+        host2._aparteSmd = null;
       }
     }
-    const smd = host._aparteSmd;
+    const smd = host2._aparteSmd;
     if (smd) {
       const delta = content.slice(smd.written);
       if (delta) {
@@ -3350,15 +3439,15 @@ function writeStreamedMarkdown(host, contentEl, content, streaming) {
       }
       return;
     }
-  } else if (host._aparteSmd) {
-    const smd = host._aparteSmd;
+  } else if (host2._aparteSmd) {
+    const smd = host2._aparteSmd;
     const tail = content.slice(smd.written);
     if (tail) {
       smd.renderer.write(tail);
       smd.written = content.length;
     }
     smd.renderer.end();
-    host._aparteSmd = void 0;
+    host2._aparteSmd = void 0;
     if (!hasOneShotMarkdownProvider()) {
       contentEl.innerHTML = contextConfig().sanitizeHtml(contentEl.innerHTML);
       settledFromParser.set(contentEl, content);
@@ -3587,16 +3676,16 @@ function streamHighlight(element, paneSelector, content, lang, segId) {
   if (now - (_lastHighlightAt.get(segId) ?? 0) < HIGHLIGHT_DEBOUNCE_MS) return;
   markThrottle(_lastHighlightAt, segId, now);
   void contextConfig(element).highlightCode(content.slice(0, cut), lang).then((html) => {
-    const live = element.querySelector(paneSelector);
-    if (!live) return;
-    if (cut <= highlightedLen(live)) return;
-    live.innerHTML = html;
-    const codeEl = live.querySelector("code") ?? live;
+    const live2 = element.querySelector(paneSelector);
+    if (!live2) return;
+    if (cut <= highlightedLen(live2)) return;
+    live2.innerHTML = html;
+    const codeEl = live2.querySelector("code") ?? live2;
     const span = document.createElement("span");
     span.dataset.aparteTail = "";
     span.textContent = content.slice(cut);
     codeEl.appendChild(span);
-    live.dataset.aparteHlLen = String(cut);
+    live2.dataset.aparteHlLen = String(cut);
   }).catch(() => {
   });
 }
@@ -3820,9 +3909,9 @@ function sameShape(a, b) {
   }
   return true;
 }
-function patchChanges(live, prev, next) {
-  for (let i = 0; i < live.childNodes.length; i++) {
-    const l = live.childNodes[i];
+function patchChanges(live2, prev, next) {
+  for (let i = 0; i < live2.childNodes.length; i++) {
+    const l = live2.childNodes[i];
     const p = prev.childNodes[i];
     const n = next.childNodes[i];
     if (l instanceof Element && p instanceof Element && n instanceof Element) {
@@ -3989,16 +4078,26 @@ function placeholderMarkup(segment) {
   return `<div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(segment.status ?? "pending")}" data-tool-call-id="${escapeAttr(segment.toolCall?.id ?? "")}" data-tool-name="${escapeAttr(segment.toolCall?.name ?? "tool")}" hidden></div>`;
 }
 const isPlaceholder = (element) => element.hidden && element.classList.contains("aparte-segment-tool-call") && element.childElementCount === 0;
-function drawDefault(segment, behind) {
+const drawnBy = /* @__PURE__ */ new WeakMap();
+const behind = /* @__PURE__ */ new WeakMap();
+function toolRendererThatDrew(element) {
+  return behind.get(element) ?? null;
+}
+function drawerOf(element, current) {
+  const recorded = drawnBy.get(element);
+  if (recorded) return recorded;
+  return element.classList.contains("aparte-segment-tool-call") ? null : current;
+}
+function drawDefault(segment, behind2) {
   const name = segment.toolCall?.name ?? "tool";
   const status = segment.status ?? "pending";
   const toolCallId = segment.toolCall?.id ?? "";
   const pill = pillMarkup(segment);
   const quiet = isQuiet(segment) ? " data-quiet" : "";
   const toggle = contextConfig().getIcon("expand");
-  const input = behind.kind === "parts" ? describeInput(segment) : "";
-  const outcome = behind.kind === "parts" ? outcomeOf(segment) : null;
-  if (behind.kind === "none" || behind.kind === "parts" && !input && !outcome) {
+  const input = behind2.kind === "parts" ? describeInput(segment) : "";
+  const outcome = behind2.kind === "parts" ? outcomeOf(segment) : null;
+  if (behind2.kind === "none" || behind2.kind === "parts" && !input && !outcome) {
     return `
         <div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}><div class="aparte-tool-line">${pill}</div>
         </div>
@@ -4007,7 +4106,7 @@ function drawDefault(segment, behind) {
   const cfg = contextConfig();
   const copy = copyButtonMarkup("aparte-tool-copy");
   const open = segment.collapsed !== void 0 ? !segment.collapsed : cfg.getToolDisplay(name)?.open === true;
-  if (behind.kind === "body") {
+  if (behind2.kind === "body") {
     const tpl = document.createElement("template");
     tpl.innerHTML = `
         <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}${open ? " open" : ""}>
@@ -4015,7 +4114,7 @@ function drawDefault(segment, behind) {
             <div class="aparte-tool-detail" data-details="app"></div>
         </details>`.trim();
     const row = tpl.content.firstElementChild;
-    setBody(row, behind.body);
+    setBody(row, behind2.body);
     return row;
   }
   return `
@@ -4044,7 +4143,12 @@ const toolCallRenderer = {
     const customRenderer = contextConfig().getToolRenderer(name);
     if (customRenderer) {
       injectToolRendererStyles(name, customRenderer);
-      return customRenderer.render(segment) || placeholderMarkup(segment);
+      const out = customRenderer.render(segment);
+      if (out instanceof HTMLElement) {
+        drawnBy.set(out, customRenderer);
+        behind.set(out, customRenderer);
+      }
+      return out || placeholderMarkup(segment);
     }
     return drawDefault(segment, behindOf(segment));
   },
@@ -4061,7 +4165,7 @@ const toolCallRenderer = {
   relabel: (element, segment) => {
     if (isPlaceholder(element)) return;
     const cfg = contextConfig();
-    const custom = cfg.getToolRenderer(segment.toolCall?.name);
+    const custom = drawerOf(element, cfg.getToolRenderer(segment.toolCall?.name) ?? null);
     if (custom) {
       custom.relabel?.(element, segment);
       return;
@@ -4081,8 +4185,8 @@ const toolCallRenderer = {
     for (const button of element.querySelectorAll(".aparte-tool-copy")) relabelCopyButton(button);
     const appDetail = appDetailOf(element);
     if (appDetail) {
-      const behind = behindOf(segment);
-      if (behind.kind === "body") relabelBody(appDetail, behind.body);
+      const behind2 = behindOf(segment);
+      if (behind2.kind === "body") relabelBody(appDetail, behind2.body);
     }
     const statusEl = element.querySelector(".aparte-tool-state");
     if (statusEl) statusEl.innerHTML = stateBadge(segment);
@@ -4108,9 +4212,10 @@ const toolCallRenderer = {
       element.setAttribute("data-status", status);
       return;
     }
-    const custom = contextConfig().getToolRenderer(segment.toolCall?.name);
-    if (custom?.update && !hidden && !isPlaceholder(element)) {
-      custom.update(element, segment);
+    const custom = hidden ? null : contextConfig().getToolRenderer(segment.toolCall?.name) ?? null;
+    const drawn = isPlaceholder(element) ? null : drawerOf(element, custom);
+    if (drawn && drawn === custom && drawn.update && !isPlaceholder(element)) {
+      drawn.update(element, segment);
       return;
     }
     const rebuild = (out) => {
@@ -4119,21 +4224,22 @@ const toolCallRenderer = {
       const rebuilt = typeof out === "string" ? tpl.content.firstElementChild : out;
       if (rebuilt) {
         if (!rebuilt.hasAttribute("data-segment-id")) rebuilt.setAttribute("data-segment-id", segment.id);
+        toolCallRenderer.cleanup?.(element, segment);
         element.replaceWith(rebuilt);
         toolCallRenderer.setup?.(rebuilt, segment);
       }
     };
-    if (custom || hidden || isPlaceholder(element)) {
+    if (custom || drawn || hidden || isPlaceholder(element)) {
       rebuild(toolCallRenderer.render(segment));
       return;
     }
-    const behind = behindOf(segment);
-    const input = behind.kind === "parts" ? describeInput(segment) : "";
-    const outcome = behind.kind === "parts" ? outcomeOf(segment) : null;
-    const wantsDetail = behind.kind === "body" || !!input || !!outcome;
+    const behind2 = behindOf(segment);
+    const input = behind2.kind === "parts" ? describeInput(segment) : "";
+    const outcome = behind2.kind === "parts" ? outcomeOf(segment) : null;
+    const wantsDetail = behind2.kind === "body" || !!input || !!outcome;
     const holdsAppDetail = !!appDetailOf(element);
-    if (wantsDetail !== (element.tagName === "DETAILS") || wantsDetail && behind.kind === "body" !== holdsAppDetail) {
-      rebuild(drawDefault(segment, behind));
+    if (wantsDetail !== (element.tagName === "DETAILS") || wantsDetail && behind2.kind === "body" !== holdsAppDetail) {
+      rebuild(drawDefault(segment, behind2));
       return;
     }
     element.setAttribute("data-status", status);
@@ -4143,8 +4249,8 @@ const toolCallRenderer = {
     setName(element, segment);
     setTarget(element, segment);
     setNote(element, segment);
-    if (behind.kind === "body") {
-      setBody(element, behind.body);
+    if (behind2.kind === "body") {
+      setBody(element, behind2.body);
       return;
     }
     setPart(element, "input", input, "toolInput");
@@ -4152,12 +4258,31 @@ const toolCallRenderer = {
     highlightParts(element);
   },
   setup: (element, segment) => {
+    const hidden = contextConfig().isToolHidden(segment.toolCall?.name ?? "tool");
+    const customRenderer = hidden ? void 0 : contextConfig().getToolRenderer(segment.toolCall?.name);
+    if (customRenderer) behind.set(element, customRenderer);
     if (isPlaceholder(element)) return;
     wireParts(element);
     highlightParts(element);
-    const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
+    if (customRenderer) drawnBy.set(element, customRenderer);
     customRenderer?.setup?.(element, segment);
   },
+  /**
+   * The row leaves for good: the registered renderer that drew it, if any, cleans up. A
+   * cleanup that throws is reported and goes no further: the row is replaced or removed
+   * all the same, and the stream that caused it is not interrupted.
+   */
+  cleanup: (element, segment) => {
+    behind.delete(element);
+    const custom = drawnBy.get(element);
+    if (!custom) return;
+    drawnBy.delete(element);
+    try {
+      custom.cleanup?.(element, segment);
+    } catch (err) {
+      console.error("[aparte] a tool renderer's cleanup threw", err);
+    }
+  },
   // CSS lives in styles/segment/ — see that folder for why a
   // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
   // has no other way onto the page.
@@ -4181,8 +4306,51 @@ function effectiveRenderers(config) {
 }
 let styleElement = null;
 function registerSegmentRenderer(renderer, config = contextConfig()) {
-  registryFor(config).renderers.set(renderer.type, renderer);
+  const reg = registryFor(config);
+  if (reg.renderers.get(renderer.type) === renderer) return;
+  reg.renderers.set(renderer.type, renderer);
   injectRendererStyles(config);
+  notifyRenderersChanged(config);
+}
+const overrideStacks = /* @__PURE__ */ new WeakMap();
+function overrideSegmentRenderer(renderer, config = contextConfig()) {
+  const type = renderer.type;
+  const reg = registryFor(config);
+  let byType = overrideStacks.get(config);
+  if (!byType) {
+    byType = /* @__PURE__ */ new Map();
+    overrideStacks.set(config, byType);
+  }
+  const current = reg.renderers.get(type);
+  let stack = byType.get(type);
+  if (!stack) {
+    stack = [{ renderer: current }];
+    byType.set(type, stack);
+  } else if (stack[stack.length - 1].renderer !== current) stack.splice(0, stack.length, { renderer: current });
+  const entry = { renderer };
+  stack.push(entry);
+  registerSegmentRenderer(renderer, config);
+  let restored = false;
+  return () => {
+    if (restored) return;
+    restored = true;
+    const i = stack.indexOf(entry);
+    if (i <= 0) return;
+    const wasTop = i === stack.length - 1;
+    stack.splice(i, 1);
+    if (stack.length === 1 && byType.get(type) === stack) byType.delete(type);
+    if (!wasTop || reg.renderers.get(type) !== renderer) return;
+    const top = stack[stack.length - 1].renderer;
+    if (top) {
+      registerSegmentRenderer(top, config);
+      return;
+    }
+    unregisterSegmentRenderer(type, config);
+    if (!effectiveRenderers(config).has(type) && reg.defaultsInstalled && !reg.defaultsDeclined) {
+      const builtIn = DEFAULT_RENDERERS.find((r) => r.type === type);
+      if (builtIn) registerSegmentRenderer(builtIn, config);
+    }
+  };
 }
 function declineDefaultRenderers(config = contextConfig()) {
   registryFor(config).defaultsDeclined = true;
@@ -4197,7 +4365,10 @@ function installDefaultRenderersOnce(config = contextConfig()) {
   injectRendererStyles(config);
 }
 function unregisterSegmentRenderer(type, config = contextConfig()) {
-  registryFor(config).renderers.delete(type);
+  const reg = registryFor(config);
+  if (!reg.renderers.has(type)) return;
+  reg.renderers.delete(type);
+  notifyRenderersChanged(config);
 }
 function getSegmentRenderer(type, config = contextConfig()) {
   return effectiveRenderers(config).get(type);
@@ -4257,6 +4428,71 @@ const DEFAULT_RENDERERS = [
   errorRenderer,
   toolCallRenderer
 ];
+const mountedRenderers = /* @__PURE__ */ new WeakSet();
+function isMountedRenderer(renderer) {
+  return !!renderer && mountedRenderers.has(renderer);
+}
+function toToolCallView(segment) {
+  return {
+    id: segment.toolCall?.id ?? segment.id,
+    name: segment.toolCall?.name ?? "tool",
+    input: segment.toolCall?.input,
+    status: segment.status ?? "pending",
+    result: segment.result,
+    structuredResult: segment.structuredResult,
+    deferred: segment.deferred,
+    refusal: segment.refusal,
+    abortCause: segment.abortCause,
+    segment
+  };
+}
+function host(className, segmentId) {
+  const el2 = document.createElement("div");
+  el2.className = className;
+  el2.setAttribute("data-segment-id", segmentId);
+  return el2;
+}
+function defineMountedToolRenderer(mount) {
+  const mounted = /* @__PURE__ */ new WeakMap();
+  const renderer = {
+    render: (segment) => host("aparte-tool-ui", segment.id),
+    setup: (el2, segment) => {
+      if (!mounted.has(el2)) mounted.set(el2, mount(el2, toToolCallView(segment)));
+    },
+    update: (el2, segment) => {
+      mounted.get(el2)?.update(toToolCallView(segment));
+    },
+    cleanup: (el2) => {
+      const view = mounted.get(el2);
+      if (!view) return;
+      mounted.delete(el2);
+      view.destroy();
+    }
+  };
+  mountedRenderers.add(renderer);
+  return renderer;
+}
+function defineMountedSegmentRenderer(type, mount) {
+  const mounted = /* @__PURE__ */ new WeakMap();
+  const renderer = {
+    type,
+    render: (segment) => host("aparte-segment-ui", segment.id),
+    setup: (el2, segment) => {
+      if (!mounted.has(el2)) mounted.set(el2, mount(el2, segment));
+    },
+    update: (el2, segment) => {
+      mounted.get(el2)?.update(segment);
+    },
+    cleanup: (el2) => {
+      const view = mounted.get(el2);
+      if (!view) return;
+      mounted.delete(el2);
+      view.destroy();
+    }
+  };
+  mountedRenderers.add(renderer);
+  return renderer;
+}
 function populateBubbleFromMessage(bubble, message, siblingInfo) {
   if (message.segments && message.segments.length > 0) {
     const existing = bubble.getSegments?.() ?? [];
@@ -4902,7 +5138,7 @@ class AparteConversationController {
    * Attach event listeners to the binding host. Returns an unbind function.
    */
   bind() {
-    const host = this._binding.host;
+    const host2 = this._binding.host;
     this._onSendCapture = (e) => {
       const evt = e;
       const targetId = evt.detail?.targetId;
@@ -4921,13 +5157,13 @@ class AparteConversationController {
       evt.detail.echoed = true;
       void this._ensureConversationAndPersist(userMsg);
     };
-    host.addEventListener("aparte-send", this._onSendCapture, { capture: true });
+    host2.addEventListener("aparte-send", this._onSendCapture, { capture: true });
     this._onPathChanged = () => {
       if (!this._isLoadingConversation) {
         this._persistActive();
       }
     };
-    host.addEventListener("aparte-path-changed", this._onPathChanged);
+    host2.addEventListener("aparte-path-changed", this._onPathChanged);
     this._onMessageStart = (e) => {
       this._isStreaming = true;
       this._turnMessage = e.detail?.messageId ?? null;
@@ -4958,12 +5194,12 @@ class AparteConversationController {
     this._onMessageResumed = (e) => {
       if (this._ofThisTurn(e)) this._setTurn("running");
     };
-    host.addEventListener("aparte-message-start", this._onMessageStart);
-    host.addEventListener("aparte-message-done", this._onMessageDone);
-    host.addEventListener("aparte-message-error", this._onMessageError);
-    host.addEventListener("aparte-message-aborted", this._onMessageAborted);
-    host.addEventListener("aparte-message-paused", this._onMessagePaused);
-    host.addEventListener("aparte-message-resumed", this._onMessageResumed);
+    host2.addEventListener("aparte-message-start", this._onMessageStart);
+    host2.addEventListener("aparte-message-done", this._onMessageDone);
+    host2.addEventListener("aparte-message-error", this._onMessageError);
+    host2.addEventListener("aparte-message-aborted", this._onMessageAborted);
+    host2.addEventListener("aparte-message-paused", this._onMessagePaused);
+    host2.addEventListener("aparte-message-resumed", this._onMessageResumed);
     this._onSelectConversation = (e) => {
       const evt = e;
       const targetId = evt.detail?.targetId;
@@ -4995,37 +5231,37 @@ class AparteConversationController {
     this._turnMessage = null;
     this._stopHydrationRetry?.();
     this._stopHydrationRetry = null;
-    const host = this._binding.host;
+    const host2 = this._binding.host;
     if (this._onSendCapture) {
-      host.removeEventListener("aparte-send", this._onSendCapture, { capture: true });
+      host2.removeEventListener("aparte-send", this._onSendCapture, { capture: true });
       this._onSendCapture = null;
     }
     if (this._onPathChanged) {
-      host.removeEventListener("aparte-path-changed", this._onPathChanged);
+      host2.removeEventListener("aparte-path-changed", this._onPathChanged);
       this._onPathChanged = null;
     }
     if (this._onMessageStart) {
-      host.removeEventListener("aparte-message-start", this._onMessageStart);
+      host2.removeEventListener("aparte-message-start", this._onMessageStart);
       this._onMessageStart = null;
     }
     if (this._onMessageDone) {
-      host.removeEventListener("aparte-message-done", this._onMessageDone);
+      host2.removeEventListener("aparte-message-done", this._onMessageDone);
       this._onMessageDone = null;
     }
     if (this._onMessageError) {
-      host.removeEventListener("aparte-message-error", this._onMessageError);
+      host2.removeEventListener("aparte-message-error", this._onMessageError);
       this._onMessageError = null;
     }
     if (this._onMessageAborted) {
-      host.removeEventListener("aparte-message-aborted", this._onMessageAborted);
+      host2.removeEventListener("aparte-message-aborted", this._onMessageAborted);
       this._onMessageAborted = null;
     }
     if (this._onMessagePaused) {
-      host.removeEventListener("aparte-message-paused", this._onMessagePaused);
+      host2.removeEventListener("aparte-message-paused", this._onMessagePaused);
       this._onMessagePaused = null;
     }
     if (this._onMessageResumed) {
-      host.removeEventListener("aparte-message-resumed", this._onMessageResumed);
+      host2.removeEventListener("aparte-message-resumed", this._onMessageResumed);
       this._onMessageResumed = null;
     }
     if (this._onCompactDone && typeof window !== "undefined") {
@@ -5302,6 +5538,12 @@ class AparteChatHost {
   _tokenBuffer = null;
   /** Handle of the scheduled coalesced sync, or null when none is pending. */
   _flushHandle = null;
+  /**
+   * Lists reported through `onMessagesChange` that the parent has not handed back yet, oldest
+   * first — what {@link takeEcho} recognises. Bounded: a parent that never hands a list back
+   * (an uncontrolled chat) must not make it grow for the life of the page.
+   */
+  _pendingEchoes = [];
   _conversationId = null;
   _controller;
   _teardown = [];
@@ -5311,6 +5553,34 @@ class AparteChatHost {
     this.options = options;
     this._conversationId = options.conversationId ?? null;
   }
+  /** Every report goes through here, so {@link takeEcho} knows what the parent may hand back. */
+  _report(next) {
+    this._pendingEchoes.push(next);
+    if (this._pendingEchoes.length > 64) this._pendingEchoes.shift();
+    this.binding.onMessagesChange?.(next);
+  }
+  /**
+   * Whether a list the parent hands back is this host's own report coming back — the echo of
+   * `onMessagesChange` through a two-way binding (`bind:messages`, `v-model:messages`,
+   * `[(messages)]`, a controlled React prop). A wrapper asks before applying the list it is
+   * given, because applying an echo rolls back what the host did since without reporting (an
+   * optimistic append).
+   *
+   * True for a list reported and not handed back yet, however late it lands — a parent whose
+   * render comes after the host's next write hands back an EARLIER report — and that list and
+   * every older one are taken. False for any other list, the parent's own word, which clears
+   * them: a list the parent restores later (a reopened conversation, an undo) is applied,
+   * where remembering every list ever reported swallowed it.
+   */
+  takeEcho(list) {
+    const i = this._pendingEchoes.indexOf(list);
+    if (i < 0) {
+      this._pendingEchoes.length = 0;
+      return false;
+    }
+    this._pendingEchoes.splice(0, i + 1);
+    return true;
+  }
   // ── lifecycle ──────────────────────────────────────────────────────────
   /**
    * Install the host-method surface + event listeners and create the
@@ -5320,19 +5590,19 @@ class AparteChatHost {
   bind() {
     if (this._bound) return () => this.unbind();
     this._bound = true;
-    const host = this.binding.host;
-    if (!host.id) host.id = this.binding.hostId;
+    const host2 = this.binding.host;
+    if (!host2.id) host2.id = this.binding.hostId;
     if (this.options.config) attachConfig(this.binding.host, this.options.config);
     const vp = this._vp();
     vp?.setFrameworkManagedDOM?.(true);
     if (this.options.layoutTransitionMs && this.options.layoutTransitionMs > 0) {
       vp?.configure?.({ layoutTransitionMs: this.options.layoutTransitionMs });
     }
-    this._installHostMethods(host);
-    this._installLifecycleListeners(host);
-    this._teardown.push(gateGlide(host));
+    this._installHostMethods(host2);
+    this._installLifecycleListeners(host2);
+    this._teardown.push(gateGlide(host2));
     this._installViewportListeners();
-    this._createController(host);
+    this._createController(host2);
     return () => this.unbind();
   }
   unbind() {
@@ -5378,10 +5648,10 @@ class AparteChatHost {
     return this._controller?.setConversationId(id) ?? Promise.resolve();
   }
   _unbindController;
-  _createController(host) {
+  _createController(host2) {
     const convBinding = {
       hostId: this.binding.hostId,
-      host,
+      host: host2,
       // Controller-driven flushes mirror AparteConversationManager state, not
       // user intent — deliberately NOT emitted as `messagesChange` to
       // avoid a feedback loop with hosts using a two-way `messages` input.
@@ -5488,7 +5758,7 @@ class AparteChatHost {
     const merged = { ...next[index], ...updates };
     next[index] = merged;
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
     if (updates.status) {
       this._bubbleById(messageId)?.updateMessage?.({ status: updates.status });
     }
@@ -5508,7 +5778,7 @@ class AparteChatHost {
     const newContent = options?.append ? (last.content || "") + content : content;
     const next = [...msgs.slice(0, -1), { ...last, content: newContent }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Add a segment to the last message (immediate bubble + state sync). */
   addSegment(segment) {
@@ -5533,7 +5803,7 @@ class AparteChatHost {
     const segments = [...last.segments || [], stamped];
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Update a segment in the last message in place. */
   updateSegment(segmentId, updates) {
@@ -5550,7 +5820,7 @@ class AparteChatHost {
     );
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Remove a transient segment (a status row the host added itself). */
   removeSegment(segmentId) {
@@ -5564,7 +5834,7 @@ class AparteChatHost {
     renumberSegments(segments);
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /**
    * Append text to a segment's content in the last message — the streaming path
@@ -5620,8 +5890,8 @@ class AparteChatHost {
       this._flushHandle = null;
     }
     const tokens = this._tokenBuffer;
-    const pending = this._segmentBuffer.size > 0 ? new Map(this._segmentBuffer) : null;
-    if (!tokens && !pending) return;
+    const pending2 = this._segmentBuffer.size > 0 ? new Map(this._segmentBuffer) : null;
+    if (!tokens && !pending2) return;
     this._tokenBuffer = null;
     this._segmentBuffer.clear();
     let msgs = this.binding.getMessages();
@@ -5635,11 +5905,11 @@ class AparteChatHost {
         changed = true;
       }
     }
-    if (pending) {
+    if (pending2) {
       const last = msgs[msgs.length - 1];
       if (last?.segments) {
         const segments = last.segments.map((s) => {
-          const buffered = pending.get(s.id);
+          const buffered = pending2.get(s.id);
           if (buffered === void 0 || !("content" in s)) return s;
           return {
             ...s,
@@ -5653,7 +5923,7 @@ class AparteChatHost {
     }
     if (!changed) return;
     this.binding.setMessages(msgs);
-    this.binding.onMessagesChange?.(msgs);
+    this._report(msgs);
   }
   /** Read the current message list. */
   getMessages() {
@@ -5686,7 +5956,7 @@ class AparteChatHost {
     const idx = msgs.findIndex((m) => m.id === messageId);
     const next = idx >= 0 ? msgs.slice(0, idx) : msgs;
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   /** Keep up to and including a user message, drop later responses (retry). */
   truncateResponsesAfter(userMessageId) {
@@ -5695,7 +5965,7 @@ class AparteChatHost {
     const idx = msgs.findIndex((m) => m.id === userMessageId);
     const next = idx >= 0 ? msgs.slice(0, idx + 1) : msgs;
     this.binding.setMessages(next);
-    this.binding.onMessagesChange?.(next);
+    this._report(next);
   }
   // ── manual token streaming (agnostic core of injectTokenStream) ─────────
   /**
@@ -5723,14 +5993,14 @@ class AparteChatHost {
       }
       ac.signal.addEventListener("abort", () => resolve("aborted"), { once: true });
     });
-    const { host, hostId } = this.binding;
+    const { host: host2, hostId } = this.binding;
     const onAbort = (e) => {
       const target = e.detail?.targetId;
       if ((!target || target === hostId) && this._streamAbort === ac) this.stopTokenStream();
     };
     window.addEventListener("aparte-abort", onAbort);
     const replaced = () => this._streamAbort !== void 0 && this._streamAbort !== ac;
-    dispatchLifecycleEvent(host, "aparte-message-start", { messageId, role: "assistant" }, hostId);
+    dispatchLifecycleEvent(host2, "aparte-message-start", { messageId, role: "assistant" }, hostId);
     try {
       for (; ; ) {
         const res = await Promise.race([iterator.next(), aborted]);
@@ -5743,7 +6013,7 @@ class AparteChatHost {
       if (!replaced()) {
         this._setStreamingId(null);
         dispatchLifecycleEvent(
-          host,
+          host2,
           ac.signal.aborted ? "aparte-message-aborted" : "aparte-message-done",
           ac.signal.aborted ? { messageId } : { messageId, role: "assistant" },
           hostId
@@ -5753,7 +6023,7 @@ class AparteChatHost {
       this._flushStreamState();
       if (!replaced()) {
         this._setStreamingId(null);
-        dispatchLifecycleEvent(host, "aparte-message-error", { messageId, error: err }, hostId);
+        dispatchLifecycleEvent(host2, "aparte-message-error", { messageId, error: err }, hostId);
       }
       throw err;
     } finally {
@@ -5911,22 +6181,22 @@ class AparteChatHost {
     const all = vp.querySelectorAll("aparte-chat-bubble");
     return all.length ? all[all.length - 1] : null;
   }
-  _installHostMethods(host) {
-    host["appendMessage"] = (m) => this.appendMessage(m);
-    host["updateMessage"] = (id, u) => this.updateMessage(id, u);
-    host["updateLastMessage"] = (c, o) => this.updateLastMessage(c, o);
-    host["addSegment"] = (s) => this.addSegment(s);
-    host["updateSegment"] = (id, u) => this.updateSegment(id, u);
-    host["removeSegment"] = (id) => this.removeSegment(id);
-    host["appendToSegment"] = (id, c) => this.appendToSegment(id, c);
-    host["getMessages"] = () => this.getMessages();
-    host["addBranch"] = (id) => this.addBranch(id);
-    host["addSiblingOf"] = (id, m) => this.addSiblingOf(id, m);
-    host["truncateFrom"] = (id) => this.truncateFrom(id);
-    host["truncateResponsesAfter"] = (id) => this.truncateResponsesAfter(id);
-    host["clearAll"] = (options) => this.clearMessages(options);
-  }
-  _installLifecycleListeners(host) {
+  _installHostMethods(host2) {
+    host2["appendMessage"] = (m) => this.appendMessage(m);
+    host2["updateMessage"] = (id, u) => this.updateMessage(id, u);
+    host2["updateLastMessage"] = (c, o) => this.updateLastMessage(c, o);
+    host2["addSegment"] = (s) => this.addSegment(s);
+    host2["updateSegment"] = (id, u) => this.updateSegment(id, u);
+    host2["removeSegment"] = (id) => this.removeSegment(id);
+    host2["appendToSegment"] = (id, c) => this.appendToSegment(id, c);
+    host2["getMessages"] = () => this.getMessages();
+    host2["addBranch"] = (id) => this.addBranch(id);
+    host2["addSiblingOf"] = (id, m) => this.addSiblingOf(id, m);
+    host2["truncateFrom"] = (id) => this.truncateFrom(id);
+    host2["truncateResponsesAfter"] = (id) => this.truncateResponsesAfter(id);
+    host2["clearAll"] = (options) => this.clearMessages(options);
+  }
+  _installLifecycleListeners(host2) {
     const onStart = (e) => {
       const d = e?.detail;
       if (d?.messageId) this._setStreamingId(d.messageId);
@@ -5946,7 +6216,7 @@ class AparteChatHost {
         (m) => m.id === d.messageId ? { ...m, usage: d.usage } : m
       );
       this.binding.setMessages(next);
-      this.binding.onMessagesChange?.(next);
+      this._report(next);
       this._bubbleById(d.messageId)?.setUsage?.(d.usage);
     };
     const onEnd = (e) => {
@@ -5954,15 +6224,15 @@ class AparteChatHost {
       this.binding.onTypingChange?.(false);
       this._setStreamingId(null);
     };
-    host.addEventListener("aparte-message-start", onStart);
-    host.addEventListener("aparte-message-done", onDone);
-    host.addEventListener("aparte-message-error", onEnd);
-    host.addEventListener("aparte-message-aborted", onEnd);
+    host2.addEventListener("aparte-message-start", onStart);
+    host2.addEventListener("aparte-message-done", onDone);
+    host2.addEventListener("aparte-message-error", onEnd);
+    host2.addEventListener("aparte-message-aborted", onEnd);
     this._teardown.push(() => {
-      host.removeEventListener("aparte-message-start", onStart);
-      host.removeEventListener("aparte-message-done", onDone);
-      host.removeEventListener("aparte-message-error", onEnd);
-      host.removeEventListener("aparte-message-aborted", onEnd);
+      host2.removeEventListener("aparte-message-start", onStart);
+      host2.removeEventListener("aparte-message-done", onDone);
+      host2.removeEventListener("aparte-message-error", onEnd);
+      host2.removeEventListener("aparte-message-aborted", onEnd);
     });
   }
   _installViewportListeners() {
@@ -5979,7 +6249,7 @@ class AparteChatHost {
         return old?.usage !== void 0 ? { ...m, usage: old.usage } : m;
       });
       this.binding.setMessages(merged);
-      this.binding.onMessagesChange?.(merged);
+      this._report(merged);
       if (evt.detail.siblings.some((s) => s.count > 1)) {
         this._pendingSiblings = evt.detail.siblings;
         this.binding.afterRender(() => this._applyPendingSiblings());
@@ -6600,6 +6870,9 @@ function remoteProvider(id) {
 }
 class AparteClient {
   _boundHandler = null;
+  /** Between `start()` and `stop()`: the listeners are on `window`. The send handler alone is
+   *  not the sign — the constructor prepares it without listening. */
+  _listening = false;
   _boundAbortHandler = null;
   _boundLoadedHandler = null;
   _boundRetryHandler = null;
@@ -6734,11 +7007,12 @@ class AparteClient {
     if (!this._boundLoadedHandler) {
       this._boundLoadedHandler = (e) => {
         if (!this._isForThisInstance(e)) return;
-        const host = e.target instanceof HTMLElement ? e.target : void 0;
-        void this.resumeDeferred(host ?? e.detail?.targetId);
+        const host2 = e.target instanceof HTMLElement ? e.target : void 0;
+        void this.resumeDeferred(host2 ?? e.detail?.targetId);
       };
     }
     window.addEventListener("aparte-conversation-loaded", this._boundLoadedHandler);
+    this._listening = true;
   }
   /**
    * Stop answering: abort the reply in flight, take this client's `keyResolver` off the
@@ -6748,7 +7022,8 @@ class AparteClient {
     this.abort();
     this._releaseKeyResolver?.();
     this._releaseKeyResolver = null;
-    if (!this._boundHandler) return;
+    if (!this._listening || !this._boundHandler) return;
+    this._listening = false;
     window.removeEventListener("aparte-send", this._boundHandler);
     this._boundHandler = null;
     if (this._boundAbortHandler) {
@@ -7681,15 +7956,15 @@ ${content}
    * nobody answered — the turn was stopped, or the channel gave up — and there is no
    * resume. A channel that CRASHES fails the turn, as it does for a run in the page.
    */
-  async _answerDeferred(targetElement, pending, signal, rowEvents, approvedBefore = /* @__PURE__ */ new Set(), approvedNow = /* @__PURE__ */ new Set()) {
+  async _answerDeferred(targetElement, pending2, signal, rowEvents, approvedBefore = /* @__PURE__ */ new Set(), approvedNow = /* @__PURE__ */ new Set()) {
     const outcomes = {};
     const resolver = this._approvalResolverFor(targetElement, true);
     const refuseTheRest = (after) => {
-      for (const rest of pending.slice(after + 1)) {
+      for (const rest of pending2.slice(after + 1)) {
         outcomes[rest.toolCallId] = { kind: "decision", approved: false, reason: NOT_RUN_AFTER_A_REFUSAL, by: "earlier-refusal" };
       }
     };
-    for (const [index, p] of pending.entries()) {
+    for (const [index, p] of pending2.entries()) {
       if (signal.aborted) break;
       const call = { id: p.toolCallId, name: p.name, input: p.input ?? {} };
       if (p.reason === "approval") {
@@ -7849,8 +8124,8 @@ ${content}
    * @param target The chat — an element, or its id. Defaults to the one `targetResolver` names, else the first on the page.
    */
   async resumeDeferred(target) {
-    const host = typeof target === "string" ? this._byId(target) : target ?? this.options.targetResolver?.() ?? null;
-    const targetElement = host ? this._asRenderTarget(host) : this._scanForTarget();
+    const host2 = typeof target === "string" ? this._byId(target) : target ?? this.options.targetResolver?.() ?? null;
+    const targetElement = host2 ? this._asRenderTarget(host2) : this._scanForTarget();
     if (!targetElement) return false;
     const messages = targetElement.getMessages?.() ?? [];
     const last = [...messages].reverse().find((m) => m.role === "assistant");
@@ -7869,7 +8144,7 @@ ${content}
     this._resuming.add(last.id);
     try {
       const authConfig = provider.id ? await this._resolveAuth(provider.id) : void 0;
-      const pending = open.map((s) => ({
+      const pending2 = open.map((s) => ({
         toolCallId: s.toolCall.id,
         name: s.toolCall.name,
         input: s.toolCall.input,
@@ -7877,7 +8152,7 @@ ${content}
       }));
       const base = this._resumeBase(messages, messages.indexOf(last));
       await this._streamTurn(targetElement, last.id, provider, base, recorded?.modelId ?? config.defaultModel ?? "", authConfig, {
-        resume: { pending, ticket },
+        resume: { pending: pending2, ticket },
         ...recorded?.temperature !== void 0 ? { temperature: recorded.temperature } : {}
       });
     } finally {
@@ -8364,8 +8639,95 @@ function installDialogTriggersOnce(doc = document) {
   doc.addEventListener("pointerup", onPointerUp, true);
   doc.addEventListener("click", onClick);
 }
+const ATTR = "defer-hydration";
+const waiting = /* @__PURE__ */ new WeakMap();
+const holderOf = /* @__PURE__ */ new WeakMap();
+const pending = /* @__PURE__ */ new WeakSet();
+const live = /* @__PURE__ */ new WeakSet();
+const observers = /* @__PURE__ */ new WeakMap();
+const patched = /* @__PURE__ */ new WeakSet();
+function isHeld(el2) {
+  if (live.has(el2)) return false;
+  if (holderOf.has(el2)) return true;
+  const holder = el2.closest(`[${ATTR}]`);
+  if (!holder) return false;
+  holderOf.set(el2, holder);
+  let list = waiting.get(holder);
+  if (!list) {
+    list = [];
+    waiting.set(holder, list);
+    const observer = new MutationObserver(() => {
+      if (!holder.hasAttribute(ATTR)) release(holder);
+    });
+    observer.observe(holder, { attributes: true, attributeFilter: [ATTR] });
+    observers.set(holder, observer);
+  }
+  list.push(el2);
+  return true;
+}
+function release(holder) {
+  observers.get(holder)?.disconnect();
+  observers.delete(holder);
+  const list = waiting.get(holder) ?? [];
+  waiting.delete(holder);
+  for (const el2 of list) {
+    holderOf.delete(el2);
+    if (el2.isConnected && !live.has(el2)) el2.connectedCallback?.();
+  }
+}
+function releaseDeferredHydration(root) {
+  if (!root) return;
+  if (root.hasAttribute(ATTR)) root.removeAttribute(ATTR);
+  else if (!waiting.has(root)) return;
+  release(root);
+}
+function deferHydrationOf(ctor) {
+  if (patched.has(ctor)) return;
+  patched.add(ctor);
+  const proto = ctor.prototype;
+  const connected = proto.connectedCallback;
+  const changed = proto.attributeChangedCallback;
+  const disconnected = proto.disconnectedCallback;
+  const observed = ctor.observedAttributes ?? [];
+  proto.connectedCallback = function() {
+    if (isHeld(this)) {
+      pending.add(this);
+      return;
+    }
+    if (pending.has(this)) {
+      pending.delete(this);
+      for (const name of observed) {
+        const value = this.getAttribute(name);
+        if (value !== null) changed?.call(this, name, null, value);
+      }
+    }
+    live.add(this);
+    connected?.call(this);
+  };
+  if (changed) {
+    proto.attributeChangedCallback = function(name, oldValue, newValue) {
+      if (isHeld(this)) {
+        pending.add(this);
+        return;
+      }
+      changed.call(this, name, oldValue, newValue);
+    };
+  }
+  proto.disconnectedCallback = function() {
+    const holder = holderOf.get(this);
+    if (holder) {
+      holderOf.delete(this);
+      const list = waiting.get(holder);
+      if (list) list.splice(list.indexOf(this), 1);
+      return;
+    }
+    if (pending.has(this)) return;
+    live.delete(this);
+    disconnected?.call(this);
+  };
+}
 export {
-  registerSegmentRenderer as $,
+  parseMarkdownToSegments as $,
   APARTE_CONFIG_CHANGE as A,
   contextConfig as B,
   copyText as C,
@@ -8376,53 +8738,63 @@ export {
   cssEscape as H,
   declineDefaultRenderers as I,
   defaultSanitizer as J,
-  detachConfig as K,
-  escapeAttr as L,
-  escapeHtml as M,
-  filesToAttachments as N,
-  getAllRenderers as O,
-  getSegmentRenderer as P,
-  installDefaultRenderersOnce as Q,
-  installDialogTriggersOnce as R,
-  isAwaitingReply as S,
-  isFormatAdapter as T,
-  isSafeUrl as U,
-  isSegmentSettled as V,
-  parseAparteEventStream as W,
-  parseMarkdownToSegments as X,
-  populateBubbleFromMessage as Y,
-  readableToAsyncIterable as Z,
-  registerDefaultRenderers as _,
+  deferHydrationOf as K,
+  defineMountedSegmentRenderer as L,
+  defineMountedToolRenderer as M,
+  detachConfig as N,
+  escapeAttr as O,
+  escapeHtml as P,
+  filesToAttachments as Q,
+  getAllRenderers as R,
+  getSegmentRenderer as S,
+  installDefaultRenderersOnce as T,
+  installDialogTriggersOnce as U,
+  isAwaitingReply as V,
+  isFormatAdapter as W,
+  isSafeUrl as X,
+  isSegmentSettled as Y,
+  overrideSegmentRenderer as Z,
+  parseAparteEventStream as _,
   APARTE_CONVERSATION_SCHEMA_VERSION as a,
-  requestUserInput as a0,
-  resolveConfig as a1,
-  revokeAttachmentUrls as a2,
-  runWithConfig as a3,
-  segmentDuration as a4,
-  segmentTiming as a5,
-  subscribeConfigChange as a6,
-  toolRefusal as a7,
-  unregisterSegmentRenderer as a8,
-  uuid as a9,
-  eventOrigin as aa,
-  activeElementIn as ab,
-  gateGlide as ac,
-  renderingVersionOf as ad,
-  mergeSegmentUpdate as ae,
-  writeStreamedMarkdown as af,
-  stampSegmentActivity as ag,
-  stampSegmentOnInsert as ah,
-  stampSegmentOnUpdate as ai,
-  renumberSegments as aj,
-  openSegmentIds as ak,
-  isTerminalStatus as al,
-  adoptMessageSegments as am,
-  APARTE_DERIVED_SEGMENTS as an,
-  rememberConversationStatus as ao,
-  tellConversationStatus as ap,
-  conversationStatusOf as aq,
-  chatBoundaryOf as ar,
-  rootOf as as,
+  populateBubbleFromMessage as a0,
+  readableToAsyncIterable as a1,
+  registerDefaultRenderers as a2,
+  registerSegmentRenderer as a3,
+  releaseDeferredHydration as a4,
+  requestUserInput as a5,
+  resolveConfig as a6,
+  revokeAttachmentUrls as a7,
+  runWithConfig as a8,
+  segmentDuration as a9,
+  conversationStatusOf as aA,
+  chatBoundaryOf as aB,
+  rootOf as aC,
+  segmentTiming as aa,
+  subscribeConfigChange as ab,
+  toToolCallView as ac,
+  toolRefusal as ad,
+  unregisterSegmentRenderer as ae,
+  uuid as af,
+  eventOrigin as ag,
+  activeElementIn as ah,
+  gateGlide as ai,
+  toolCallRenderer as aj,
+  toolRendererThatDrew as ak,
+  isMountedRenderer as al,
+  renderingVersionOf as am,
+  onRenderersChange as an,
+  mergeSegmentUpdate as ao,
+  writeStreamedMarkdown as ap,
+  stampSegmentActivity as aq,
+  stampSegmentOnInsert as ar,
+  stampSegmentOnUpdate as as,
+  renumberSegments as at,
+  openSegmentIds as au,
+  isTerminalStatus as av,
+  adoptMessageSegments as aw,
+  APARTE_DERIVED_SEGMENTS as ax,
+  rememberConversationStatus as ay,
+  tellConversationStatus as az,
   APARTE_DEFAULT_BUBBLE_ACTIONS as b,
   APARTE_DEFAULT_HOST_HANDLERS as c,
   APARTE_DEFAULT_ICON_FALLBACKS as d,
@@ -8449,4 +8821,4 @@ export {
   collectRendererStyles as y,
   contentToText as z
 };
-//# sourceMappingURL=dialog-triggers-BqXRdHWZ.js.map
+//# sourceMappingURL=defer-hydration-BwMqeRHq.js.map