@aparte/core 0.9.0 → 0.10.0

package/dist/{index-hQQljwfX.js → index-BnKBciDG.js}

@@ -69,11 +69,21 @@ const APARTE_DEFAULT_LOCALE = {
   elicitationOtherPlaceholder: "Type your answer…",
   elicitationOtherLabel: "Custom answer",
   submitButton: "Submit",
+  stopButton: "Stop",
   elicitationNext: "Next",
   elicitationSkip: "Skip",
   elicitationYes: "Yes",
   elicitationNo: "No",
   elicitationAnswerLabel: "Your answer",
+  actionUpload: "Attach file",
+  download: "Download",
+  previewPending: "Press Preview to run this artifact.",
+  sandboxError: "The sandbox failed during generation.",
+  sandboxErrorHint: "Common cause: the model produced invalid code (undefined variable, wrong argument type). Retry the request — the model may produce different code.",
+  preview: "Preview",
+  code: "Code",
+  generating: "Generating…",
+  rebuildingPreview: "Rebuilding preview…",
   typing: "Typing...",
   error: "Error",
   running: "Running...",
@@ -551,7 +561,6 @@ class AparteStreamParser {
       id: this._options.autoGenerateIds ? this._generateId() : "",
       type: "thinking",
       content,
-      collapsed: false,
       label: "Thinking"
     };
   }
@@ -939,6 +948,9 @@ const SAFE_STYLE_PROPS = /* @__PURE__ */ new Set([
   "text-decoration-style",
   "white-space"
 ]);
+function isSafeCustomProperty(prop) {
+  return prop.startsWith("--") && !prop.startsWith("--aparte-");
+}
 function scrubStyle(value) {
   const kept = [];
   for (const decl of value.split(";")) {
@@ -947,7 +959,8 @@ function scrubStyle(value) {
     if (idx === -1) continue;
     const prop = trimmed.slice(0, idx).trim().toLowerCase();
     const val = trimmed.slice(idx + 1);
-    if (!val.trim() || !SAFE_STYLE_PROPS.has(prop)) continue;
+    if (!val.trim()) continue;
+    if (!SAFE_STYLE_PROPS.has(prop) && !isSafeCustomProperty(prop)) continue;
     if (val.includes("\\")) continue;
     if (/url\s*\(|expression\s*\(|javascript:|vbscript:|[<>]/i.test(val)) continue;
     kept.push(trimmed);
@@ -1034,7 +1047,6 @@ const APARTE_DEFAULT_BUBBLE_ACTIONS = {
 };
 const APARTE_DEFAULT_HOST_HANDLERS = {
   attachmentPreview: false,
-  terminalRun: false,
   artifactRedownload: false,
   artifactRehydrate: false
 };
@@ -1097,6 +1109,7 @@ class AparteConfig {
   // Tool Registry
   _tools = /* @__PURE__ */ new Map();
   _toolRenderers = /* @__PURE__ */ new Map();
+  _segmentDefaults = /* @__PURE__ */ new Map();
   // Host handlers — what the app declares it can actually complete.
   _hostHandlers = { ...APARTE_DEFAULT_HOST_HANDLERS };
   // Bubble Actions — APARTE_DEFAULT_BUBBLE_ACTIONS is the single source of truth
@@ -1177,7 +1190,6 @@ class AparteConfig {
   getHostHandlers() {
     return {
       attachmentPreview: this._hostHandlers.attachmentPreview ?? APARTE_DEFAULT_HOST_HANDLERS.attachmentPreview,
-      terminalRun: this._hostHandlers.terminalRun ?? APARTE_DEFAULT_HOST_HANDLERS.terminalRun,
       artifactRedownload: this._hostHandlers.artifactRedownload ?? APARTE_DEFAULT_HOST_HANDLERS.artifactRedownload,
       artifactRehydrate: this._hostHandlers.artifactRehydrate ?? APARTE_DEFAULT_HOST_HANDLERS.artifactRehydrate
     };
@@ -1804,6 +1816,44 @@ class AparteConfig {
   registerToolRenderer(toolName, renderer) {
     this._toolRenderers.set(toolName, renderer);
   }
+  /**
+   * Field defaults for a segment TYPE, filled in when a segment enters a message.
+   *
+   * One function for every type rather than one per field: a `setThinkingOpen()`
+   * would need a sibling the next time any type wanted a default, and the type key
+   * is a string, so a consumer's own segment type is covered by the same call.
+   *
+   * The problem it solves: a consumer streaming a reply does not CONSTRUCT its
+   * segments — the parser does — so there was no hook at all for "reasoning blocks
+   * open in my app". Per-segment fields only reach segments you build yourself.
+   *
+   * Applied where identity is stamped (`utils/segments.ts`), so it covers every
+   * path a segment can arrive by — the parser, `addSegment`, and the segments
+   * seeded on an `appendMessage` — and no renderer has to look anything up.
+   *
+   * A field the producer set always wins, and identity is never defaulted. Read at
+   * insertion and baked in: changing a default later does not reach segments already
+   * on screen, because a block the reader opened has state the data does not.
+   *
+   * @example
+   * // Reasoning blocks arrive open in this app, streaming or settled.
+   * aparteGlobalConfig.setSegmentDefaults('thinking', { collapsed: false });
+   *
+   * @example
+   * // A consumer's own type, same call.
+   * aparteGlobalConfig.setSegmentDefaults('my-chart', { theme: 'dark' });
+   */
+  setSegmentDefaults(type, defaults) {
+    this._segmentDefaults.set(type, { ...defaults });
+  }
+  /** The defaults registered for a type, or undefined. */
+  getSegmentDefaults(type) {
+    return this._segmentDefaults.get(type);
+  }
+  /** Drop the defaults for a type. */
+  clearSegmentDefaults(type) {
+    this._segmentDefaults.delete(type);
+  }
   /** Unregister a per-tool renderer */
   unregisterToolRenderer(toolName) {
     this._toolRenderers.delete(toolName);
@@ -1888,6 +1938,7 @@ class AparteConfig {
     this._siblingNavRenderer = void 0;
     this._bubbleShellRenderer = void 0;
     this._iconProvider = void 0;
+    this._segmentDefaults.clear();
     this._avatarProvider = void 0;
     this._artifactPreviewBuilder = void 0;
     this._keyProvider = void 0;
@@ -1983,6 +2034,16 @@ function runWithConfig(config, fn) {
 function contextConfig(el2) {
   return _renderConfig ?? resolveConfig(el2);
 }
+const APARTE_CONFIG_CHANGE = "aparte-config-change";
+function subscribeConfigChange(el2, handler) {
+  const listener = (e) => {
+    const detail = e.detail;
+    if (detail?.config && detail.config !== resolveConfig(el2)) return;
+    handler();
+  };
+  window.addEventListener(APARTE_CONFIG_CHANGE, listener);
+  return () => window.removeEventListener(APARTE_CONFIG_CHANGE, listener);
+}
 const APARTE_DEFAULT_SKELETON_FALLBACKS = {
   message: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading...</div>',
   code: '<div class="aparte-skeleton-fallback" style="padding:16px;background:#1e293b;color:#64748b;border-radius:8px;">Loading code...</div>',
@@ -2063,7 +2124,15 @@ const thinkingRenderer = {
    * new class of risk. With no Markdown provider registered it degrades to the
    * zero-dependency default (escape + `<br>`), which is what it used to be.
    */
-  render: (segment) => `<details class="segment segment-thinking" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed ? "" : "open"}><summary class="thinking-header"><span class="thinking-label">${escapeHtml(segment.label || contextConfig().t("thinking"))}</span><span class="thinking-toggle"></span></summary><div class="thinking-content">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
+  render: (segment) => `<details class="segment segment-thinking" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="thinking-header"><span class="thinking-label">${escapeHtml(segment.label || contextConfig().t("thinking"))}</span><span class="thinking-toggle"></span></summary><div class="thinking-content">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
+  /**
+   * The default label is the only config-derived text here — and `segment.label`
+   * still wins, exactly as in `render`, because that string is the app's.
+   */
+  relabel: (el2, segment) => {
+    const label = el2.querySelector(".thinking-label");
+    if (label) label.textContent = segment.label || contextConfig().t("thinking");
+  },
   update: (el2, segment) => {
     const contentEl = el2.querySelector(".thinking-content");
     if (!contentEl) return;
@@ -2075,6 +2144,53 @@ const thinkingRenderer = {
   },
   getStyles: () => ``
 };
+const HIGHLIGHT_DEBOUNCE_MS = 400;
+const MAX_THROTTLE_ENTRIES = 256;
+const _lastHighlightAt = /* @__PURE__ */ new Map();
+function markThrottle(map, id, at) {
+  map.delete(id);
+  if (map.size >= MAX_THROTTLE_ENTRIES) {
+    const oldest = map.keys().next().value;
+    if (oldest !== void 0) map.delete(oldest);
+  }
+  map.set(id, at);
+}
+function highlightedLen(pane) {
+  const n = Number(pane.dataset.aparteHlLen);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
+function streamHighlight(element, paneSelector, content, lang, segId) {
+  const pane = element.querySelector(paneSelector);
+  if (!pane) return;
+  const tail = pane.querySelector("[data-aparte-tail]");
+  const hlLen = highlightedLen(pane);
+  if (tail && hlLen <= content.length) {
+    tail.textContent = content.slice(hlLen);
+  } else {
+    delete pane.dataset.aparteHlLen;
+    const codeEl = pane.querySelector("code");
+    if (codeEl) codeEl.textContent = content;
+    else pane.innerHTML = `<pre><code class="language-${escapeHtml(lang || "text")}">${escapeHtml(content)}</code></pre>`;
+  }
+  const cut = content.lastIndexOf("\n") + 1;
+  if (cut <= hlLen) return;
+  const now = Date.now();
+  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 span = document.createElement("span");
+    span.dataset.aparteTail = "";
+    span.textContent = content.slice(cut);
+    codeEl.appendChild(span);
+    live.dataset.aparteHlLen = String(cut);
+  }).catch(() => {
+  });
+}
 const codeRenderer = {
   type: "code",
   render: (segment) => `
@@ -2091,6 +2207,13 @@ const codeRenderer = {
             </div>
         </div>
     `,
+  /** The copy button's icon and tooltip — nothing else here comes from config. */
+  relabel: (element) => {
+    const copyBtn = element.querySelector(".code-copy");
+    if (!copyBtn || copyBtn.dataset.copied) return;
+    copyBtn.setAttribute("title", contextConfig().t("copy"));
+    copyBtn.innerHTML = contextConfig().getIcon("copy");
+  },
   setup: (element, segment) => {
     const wrapper = element.querySelector(".code-content-wrapper");
     if (wrapper) {
@@ -2107,22 +2230,18 @@ const codeRenderer = {
         });
         copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
         copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
+        copyBtn.dataset.copied = "1";
         setTimeout(() => {
           copyBtn.innerHTML = contextConfig(copyBtn).getIcon("copy");
           copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
+          delete copyBtn.dataset.copied;
         }, 1500);
       });
     }
   },
   update: (element, segment) => {
     if (segment.isStreaming) {
-      const codeEl = element.querySelector(".code-content-wrapper code");
-      if (codeEl) {
-        codeEl.textContent = segment.content;
-      } else {
-        const wrapper = element.querySelector(".code-content-wrapper");
-        if (wrapper) wrapper.innerHTML = `<pre><code class="language-${escapeHtml(segment.language || "text")}">${escapeHtml(segment.content)}</code></pre>`;
-      }
+      streamHighlight(element, ".code-content-wrapper", segment.content, segment.language || "", segment.id);
     } else {
       const wrapper = element.querySelector(".code-content-wrapper");
       if (wrapper) {
@@ -2135,58 +2254,6 @@ const codeRenderer = {
   },
   getStyles: () => ``
 };
-const terminalRenderer = {
-  type: "terminal",
-  render: (segment) => `
-        <div class="segment segment-terminal" data-segment-id="${escapeHtml(segment.id)}">
-            <div class="terminal-command-block">
-                <div class="terminal-icon">
-                    ${contextConfig().getIcon("terminal")}
-                </div>
-                <code class="terminal-command">${escapeHtml(segment.command || "")}</code>
-                <div class="terminal-actions">
-                    ${segment.isRunning ? `<span class="terminal-running"><span class="spinner"></span>${contextConfig().t("running")}</span>` : contextConfig().getHostHandlers().terminalRun ? `<button class="terminal-run-btn" data-action="run" aria-label="${escapeAttr(contextConfig().t("run"))}" title="${escapeAttr(contextConfig().t("run"))}">${contextConfig().t("run")}</button>` : ""}
-                    <button class="terminal-copy-btn" data-action="copy" aria-label="${escapeAttr(contextConfig().t("copy"))}" title="${escapeAttr(contextConfig().t("copy"))}">
-                        ${contextConfig().getIcon("copy")}
-                    </button>
-                </div>
-            </div>
-            ${segment.output ? `<div class="terminal-output">${escapeHtml(segment.output)}</div>` : ""}
-            ${segment.exitCode !== void 0 && segment.exitCode !== 0 ? `<div class="terminal-error">Command failed with exit code ${segment.exitCode}</div>` : ""}
-        </div>
-    `,
-  setup: (element, segment) => {
-    const copyBtn = element.querySelector(".terminal-copy-btn");
-    const command = element.querySelector(".terminal-command");
-    if (copyBtn && command) {
-      copyBtn.addEventListener("click", () => {
-        void navigator.clipboard.writeText(command.textContent || "").catch(() => {
-        });
-        copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
-        copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
-        setTimeout(() => {
-          copyBtn.innerHTML = contextConfig(copyBtn).getIcon("copy");
-          copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
-        }, 1500);
-      });
-    }
-    const runBtn = element.querySelector(".terminal-run-btn");
-    if (runBtn) {
-      runBtn.addEventListener("click", () => {
-        element.dispatchEvent(new CustomEvent("aparte-terminal-run", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            segmentId: segment.id,
-            messageId: segment.messageId,
-            command: command?.textContent || ""
-          }
-        }));
-      });
-    }
-  },
-  getStyles: () => ``
-};
 const errorRenderer = {
   type: "error",
   render: (segment) => {
@@ -2205,13 +2272,28 @@ const errorRenderer = {
                 ${contextConfig().getIcon("error") || "⚠"}
             </div>
             <div class="error-content">
-                <div class="error-title">Error</div>
+                <div class="error-title">${escapeHtml(contextConfig().t("error"))}</div>
                 <div class="error-message">${escapeHtml(segment.content)}</div>
                 ${segment.details ? `<div class="error-details">${escapeHtml(segment.details)}</div>` : ""}
             </div>
         </div>
     `;
   },
+  /**
+   * The icon and the heading. The heading used to be the hardcoded literal `Error`
+   * while `locale.error` — a REQUIRED key, documented, and already translated to
+   * "Erreur" — was read by nothing at all. A translated string with no consumer and
+   * a literal with no translation, in the same card.
+   *
+   * Not the message: that is the model's or the transport's text, in whatever
+   * language it arrived in. Relabelling it would be inventing content.
+   */
+  relabel: (element) => {
+    const wrap = element.querySelector(".error-icon-wrapper");
+    if (wrap) wrap.innerHTML = contextConfig().getIcon("error") || "⚠";
+    const title = element.querySelector(".error-title");
+    if (title) title.textContent = contextConfig().t("error");
+  },
   getStyles: () => ``
 };
 const progressRenderer = {
@@ -2223,31 +2305,6 @@ const progressRenderer = {
   },
   getStyles: () => ``
 };
-function renderFileNode(node, depth = 0) {
-  const indent = depth * 16;
-  const icon = node.type === "directory" ? "📁" : "📄";
-  const statusClass = node.status ? `file-status-${escapeHtml(node.status)}` : "";
-  let html = `<div class="file-node ${statusClass}" style="padding-left: ${indent}px"><span class="file-icon">${icon}</span><span class="file-name">${escapeHtml(node.name)}</span></div>`;
-  if (node.children) {
-    for (const child of node.children) {
-      html += renderFileNode(child, depth + 1);
-    }
-  }
-  return html;
-}
-const fileTreeRenderer = {
-  type: "file-tree",
-  render: (segment) => {
-    let filesHtml = "";
-    if (segment.files) {
-      for (const file of segment.files) {
-        filesHtml += renderFileNode(file, 0);
-      }
-    }
-    return `<div class="segment segment-file-tree" data-segment-id="${escapeHtml(segment.id)}">${segment.title ? `<div class="file-tree-title">${escapeHtml(segment.title)}</div>` : ""}<div class="file-tree-content">${filesHtml}</div></div>`;
-  },
-  getStyles: () => ``
-};
 const toolCallRenderer = {
   type: "tool_call",
   render: (segment) => {
@@ -2289,6 +2346,39 @@ const toolCallRenderer = {
             </div>
         `;
   },
+  /**
+   * The pill's glyphs and — when the turn is paused for a person — the two labels
+   * on the approval gate. Those are the highest-stakes strings in the library: a
+   * reader deciding whether to let a tool run should not be reading them in a
+   * language they did not choose.
+   *
+   * No child node is added or removed, so the buttons keep their listeners and,
+   * critically, their FOCUS — this is the one control a keyboard user may be
+   * sitting on when a config change fires.
+   */
+  relabel: (element, segment) => {
+    const cfg = contextConfig();
+    const icon = element.querySelector(".tool-pill-icon");
+    if (icon) icon.innerHTML = cfg.getIcon("tool");
+    const statusEl = element.querySelector(".tool-pill-status");
+    if (statusEl) {
+      const s = segment.status;
+      statusEl.innerHTML = s === "resolved" ? cfg.getIcon("check") : s === "aborted" || s === "rejected" ? cfg.getIcon("close") : "";
+    }
+    const loc = cfg.getLocale();
+    const approve = element.querySelector(".tool-approve-btn");
+    if (approve) {
+      const label = loc.approveTool ?? "Approve";
+      approve.textContent = label;
+      approve.setAttribute("aria-label", label);
+    }
+    const reject = element.querySelector(".tool-reject-btn");
+    if (reject) {
+      const label = loc.rejectTool ?? "Reject";
+      reject.textContent = label;
+      reject.setAttribute("aria-label", label);
+    }
+  },
   setup: (element, segment) => {
     if (segment.status === "awaiting-approval") {
       const toolCallId = segment.toolCall?.id;
@@ -2355,11 +2445,12 @@ const toolCallRenderer = {
         @keyframes tool-spin { to { transform: rotate(360deg); } }
     `
 };
+const waitingLabel = () => contextConfig().t("generating");
 const pipelineWaitingRenderer = {
   type: "pipeline-waiting",
   render: (segment) => {
     return `
-        <div class="segment segment-pipeline-waiting" data-segment-id="${escapeHtml(segment.id)}" aria-label="Generating…" role="status">
+        <div class="segment segment-pipeline-waiting" data-segment-id="${escapeHtml(segment.id)}" aria-label="${escapeAttr(waitingLabel())}" role="status">
             <span class="pw-dot"></span>
             <span class="pw-dot"></span>
             <span class="pw-dot"></span>
@@ -2367,6 +2458,15 @@ const pipelineWaitingRenderer = {
   },
   update: () => {
   },
+  /**
+   * Three dots and an accessible name. The dots are CSS; the name is the whole
+   * content as far as a screen reader is concerned, and it was hardcoded English in
+   * every locale — the one string in this library where being untranslated is
+   * invisible to everyone who can see the screen.
+   */
+  relabel: (element) => {
+    element.setAttribute("aria-label", waitingLabel());
+  },
   setup: (el2) => {
     const parent = el2.parentElement;
     if (!parent) return;
@@ -2451,26 +2551,6 @@ function findClosingFence(s) {
   }
   return -1;
 }
-const _lastHighlightAt = /* @__PURE__ */ new Map();
-function markThrottle(map, id, at) {
-  map.delete(id);
-  if (map.size >= MAX_THROTTLE_ENTRIES) {
-    const oldest = map.keys().next().value;
-    if (oldest !== void 0) map.delete(oldest);
-  }
-  map.set(id, at);
-}
-function debounceHighlight(element, paneSelector, content, lang, segId) {
-  const now = Date.now();
-  const last = _lastHighlightAt.get(segId) ?? 0;
-  if (now - last < HIGHLIGHT_DEBOUNCE_MS) return;
-  markThrottle(_lastHighlightAt, segId, now);
-  void contextConfig(element).highlightCode(content, lang).then((html) => {
-    const wrapper = element.querySelector(paneSelector);
-    if (wrapper) wrapper.innerHTML = html;
-  }).catch(() => {
-  });
-}
 function labelForKind(kind) {
   switch (kind) {
     case "react":
@@ -2509,8 +2589,6 @@ function labelForKind(kind) {
       return "Artifact";
   }
 }
-const MAX_THROTTLE_ENTRIES = 256;
-const HIGHLIGHT_DEBOUNCE_MS = 400;
 const PREVIEW_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; font-src data:";
 function withMetaCsp(doc) {
   const meta = `<meta http-equiv="Content-Security-Policy" content="${escapeAttr(PREVIEW_CSP)}">`;
@@ -2527,9 +2605,18 @@ function buildPreviewBody(kind, body, title) {
       if (startsWithDoctype(body)) return body;
       return `<!doctype html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>${escapeAttr(title)}</title></head><body>${body}</body></html>`;
     }
+    // An SVG with only a `viewBox` — the recommended, responsive form, and the one
+    // a model writes most often — has NO intrinsic size. As a flex item its cross
+    // size then collapses to zero and the frame is blank: the preview worked for an
+    // SVG that declared `width`/`height` and silently showed nothing for the
+    // idiomatic one. Reported from the landing the moment its demo payload became a
+    // real file instead of a hand-written chart with dimensions on it.
+    //
+    // The rule is narrowed by attribute selector rather than applied to every SVG,
+    // so an SVG that DOES state its size keeps the size it asked for.
     case "svg":
       return `<!doctype html><html><head><meta charset="utf-8"/><title>${escapeAttr(title)}</title>
-<style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}svg{max-width:90%;max-height:90%}</style>
+<style>html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}svg{max-width:90%;max-height:90%}svg:not([width]):not([height]){width:90%;height:90%}</style>
 </head><body>${body}</body></html>`;
     case "js": {
       const safeBody = escapeClosingScriptTag(body);
@@ -2612,6 +2699,7 @@ function renderBinaryFileArtifact(segment, kind) {
   const iconLabel = FILE_ICON_LABEL[kind] ?? kind.toUpperCase();
   const isStreaming = !!segment.isStreaming;
   const canRedownload = contextConfig().getHostHandlers().artifactRedownload;
+  const downloadLabel = escapeHtml(contextConfig().t("download"));
   const cached = _binaryArtifactCache.get(segment.id);
   if (cached && !isStreaming) {
     const previewBody = cached.previewHtml ? contextConfig().sanitizeHtml(cached.previewHtml) : `<div class="aparte-art-file__preview-empty">Preview not available for ${escapeHtml(kind)} yet</div>`;
@@ -2627,7 +2715,7 @@ function renderBinaryFileArtifact(segment, kind) {
                         <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(formatBytes(cached.bytes))} · ${escapeHtml(kind.toUpperCase())}</div>
                     </div>
                     <div class="aparte-art-file__actions">
-                        ${canRedownload ? '<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">Download</button>' : ""}
+                        ${canRedownload ? `<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">${downloadLabel}</button>` : ""}
                     </div>
                 </div>
                 <div class="aparte-art-file__body">
@@ -2640,7 +2728,7 @@ function renderBinaryFileArtifact(segment, kind) {
         `;
   }
   const cleanContent = stripCodeFences(segment.content || "");
-  const subText = isStreaming ? "Generating…" : "Rebuilding preview…";
+  const subText = isStreaming ? contextConfig().t("generating") : contextConfig().t("rebuildingPreview");
   return `
         <div class="segment segment-artifact-file"
              data-segment-id="${escapeHtml(segment.id)}"
@@ -2653,7 +2741,7 @@ function renderBinaryFileArtifact(segment, kind) {
                     <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(subText)}</div>
                 </div>
                 <div class="aparte-art-file__actions">
-                    ${canRedownload ? '<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>Download</button>' : ""}
+                    ${canRedownload ? `<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>${downloadLabel}</button>` : ""}
                 </div>
             </div>
             <div class="aparte-art-file__body">
@@ -2759,12 +2847,11 @@ function updateBinaryFileArtifact(element, segment, isStreaming) {
   const state = element.getAttribute("data-state");
   if (state === "ready") return;
   const cleanContent = stripCodeFences(segment.content || "");
-  const codeEl = element.querySelector('[data-role="code-pane"] code');
-  if (codeEl) {
-    codeEl.textContent = cleanContent;
-  }
   if (isStreaming) {
-    debounceHighlight(element, '[data-role="code-pane"]', cleanContent, "js", segment.id);
+    streamHighlight(element, '[data-role="code-pane"]', cleanContent, "js", segment.id);
+  } else {
+    const codeEl = element.querySelector('[data-role="code-pane"] code');
+    if (codeEl) codeEl.textContent = cleanContent;
   }
   if (!isStreaming && state === "streaming") {
     element.setAttribute("data-state", "compiling");
@@ -2811,9 +2898,9 @@ function showSandboxError(element, phase, errorMsg) {
     const short = (errorMsg.split("\n")[0] ?? "").slice(0, 240);
     body.innerHTML = `
             <div class="aparte-art-file__error">
-                <div class="aparte-art-file__error-title">The sandbox failed during generation.</div>
+                <div class="aparte-art-file__error-title">${escapeHtml(contextConfig().t("sandboxError"))}</div>
                 <div class="aparte-art-file__error-msg">${escapeHtml(short)}</div>
-                <div class="aparte-art-file__error-hint">Common cause: the model produced invalid code (undefined variable, wrong argument type). Retry the request — the model may produce different code.</div>
+                <div class="aparte-art-file__error-hint">${escapeHtml(contextConfig().t("sandboxErrorHint"))}</div>
             </div>
         `;
   }
@@ -2831,6 +2918,10 @@ const artifactRenderer = {
     const displayLang = languageForKind(kind);
     const isStreaming = !!segment.isStreaming;
     const previewable = PREVIEWABLE_KINDS.has(kind);
+    const cfg = contextConfig();
+    const downloadLabel = cfg.t("download");
+    const previewLabel = cfg.t("preview");
+    const codeLabel = cfg.t("code");
     const isBinary = BINARY_FILE_KINDS.has(kind);
     const cleanContent = stripCodeFences(segment.content || "");
     return `
@@ -2848,17 +2939,17 @@ const artifactRenderer = {
                         ${isStreaming ? '<span class="aparte-art-card__pulse" aria-label="Streaming"></span>' : ""}
                     </div>
                     <div class="aparte-art-card__actions">
-                        <button type="button" class="aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="Copy">
+                        <button type="button" class="aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="${escapeAttr(contextConfig().t("copy"))}">
                             ${contextConfig().getIcon("copy")}
                         </button>
-                        <button type="button" class="aparte-art-card__btn" data-action="download" title="Download" aria-label="Download" ${isStreaming ? "disabled" : ""}>
+                        <button type="button" class="aparte-art-card__btn" data-action="download" title="${escapeAttr(downloadLabel)}" aria-label="${escapeAttr(downloadLabel)}" ${isStreaming ? "disabled" : ""}>
                             <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v9m0 0l-3-3m3 3l3-3M2 13h12"/></svg>
                         </button>
                     </div>
                 </header>
                 <nav class="aparte-art-card__tabs" role="tablist">
-                    ${previewable ? `<button type="button" role="tab" data-tab-target="preview" aria-selected="false" ${isStreaming ? "disabled" : ""}>Preview</button>` : ""}
-                    <button type="button" role="tab" data-tab-target="code" aria-selected="true">Code</button>
+                    <button type="button" role="tab" data-tab-target="code" aria-selected="true">${escapeHtml(codeLabel)}</button>
+                    ${previewable ? `<button type="button" role="tab" data-tab-target="preview" aria-selected="false" ${isStreaming ? "disabled" : ""}>${escapeHtml(previewLabel)}</button>` : ""}
                 </nav>
                 <div class="aparte-art-card__body">
                     <div class="aparte-art-card__pane" data-pane="code">
@@ -2868,13 +2959,44 @@ const artifactRenderer = {
                     </div>
                     ${previewable ? `
                         <div class="aparte-art-card__pane" data-pane="preview">
-                            <div class="aparte-art-card__pending">Press Preview to run this artifact.</div>
+                            <div class="aparte-art-card__pending">${escapeHtml(cfg.t("previewPending"))}</div>
                         </div>
                     ` : ""}
                 </div>
             </div>
         `;
   },
+  /**
+   * Every string this card shows: the copy button's tooltip, glyph and accessible
+   * name, the download button's title and label, and the two tab names. They were
+   * all hardcoded literals until they got locale keys — including the copy button's
+   * `aria-label`, which said "Copy" while its own `title` one attribute away already
+   * went through `t('copy')`, so a French reader got a French tooltip and an English
+   * announcement.
+   *
+   * Nothing here touches the tab state or the preview pane: a mounted iframe is
+   * running model-authored code, and re-rendering this card is exactly what the
+   * hook exists to avoid.
+   */
+  relabel: (element) => {
+    const cfg = contextConfig();
+    const copyBtn = element.querySelector('.aparte-art-card__btn[data-action="copy"]');
+    if (copyBtn) {
+      copyBtn.setAttribute("title", cfg.t("copy"));
+      copyBtn.setAttribute("aria-label", cfg.t("copy"));
+      copyBtn.innerHTML = cfg.getIcon("copy");
+    }
+    const dl = element.querySelector('.aparte-art-card__btn[data-action="download"]');
+    if (dl) {
+      const label = cfg.t("download");
+      dl.setAttribute("title", label);
+      dl.setAttribute("aria-label", label);
+    }
+    const previewTab = element.querySelector('[data-tab-target="preview"]');
+    if (previewTab) previewTab.textContent = cfg.t("preview");
+    const codeTab = element.querySelector('[data-tab-target="code"]');
+    if (codeTab) codeTab.textContent = cfg.t("code");
+  },
   setup: (element, segment) => {
     latestSegment.set(element, segment);
     const kind = (segment.artifactType || "").toLowerCase();
@@ -2955,22 +3077,24 @@ const artifactRenderer = {
     }
     const wasStreaming = element.getAttribute("data-streaming") === "true";
     const cleanContent = stripCodeFences(segment.content || "");
-    const codeEl = element.querySelector(".code-content-wrapper code");
-    if (codeEl) {
-      codeEl.textContent = cleanContent;
-    } else {
-      const wrapper = element.querySelector(".code-content-wrapper");
-      if (wrapper) {
-        const displayLang = languageForKind(kind);
-        wrapper.innerHTML = `<pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>`;
-      }
-    }
     if (isStreaming) {
       const segId = element.getAttribute("data-segment-id") ?? segment.id;
-      debounceHighlight(element, ".code-content-wrapper", cleanContent, languageForKind(kind), segId);
+      streamHighlight(element, ".code-content-wrapper", cleanContent, languageForKind(kind), segId);
+    } else {
+      const codeEl = element.querySelector(".code-content-wrapper code");
+      if (codeEl) {
+        codeEl.textContent = cleanContent;
+      } else {
+        const wrapper = element.querySelector(".code-content-wrapper");
+        if (wrapper) {
+          const displayLang = languageForKind(kind);
+          wrapper.innerHTML = `<pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>`;
+        }
+      }
     }
     if (wasStreaming && !isStreaming) {
       element.setAttribute("data-streaming", "false");
+      element.querySelector(".aparte-art-card__pulse")?.remove();
       const wrapper = element.querySelector(".code-content-wrapper");
       if (wrapper) {
         const displayLang = languageForKind(kind);
@@ -3042,7 +3166,24 @@ const artifactRenderer = {
         }
         .aparte-art-card__btn:disabled { opacity: 0.4; cursor: not-allowed; }
         .aparte-art-card__tabs {
-            display: flex; gap: 2px;
+            /* justify-content and the padding are DECLARED, not left to a default.
+               Core is light DOM on purpose - no shadow root, no ::part(), any selector
+               reaches in - and the corollary is that a component must state what its
+               layout depends on, because an undeclared property has nothing to override
+               a host rule with. A consuming page with a bare nav selector setting
+               justify-content: space-between and padding-top (this library's own docs
+               site had exactly that) otherwise pushes these two tabs to opposite ends of
+               the card and pads the row out. No backticks in here: this block is a JS
+               template literal, and one of them ended it.
+
+               flex-end, and Code first in the DOM. The card OPENS on Code - mounting the
+               preview would execute model-authored code with no gesture (ratified
+               decision #8) - and a selected tab sitting second reads backwards. Right,
+               because the header above puts the artifact's identity on the left and its
+               copy/download buttons on the right, so this keeps every control in one
+               column. DOM order is also keyboard order, so the tab a reader lands on
+               first is the one already showing. */
+            display: flex; justify-content: flex-end; align-items: stretch; gap: 2px;
             padding: 4px 8px 0;
             border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
             background: var(--aparte-surface-2, rgba(0,0,0,0.02));
@@ -3065,17 +3206,37 @@ const artifactRenderer = {
             font-weight: 500;
         }
         .aparte-art-card__tabs button:disabled { opacity: 0.4; cursor: not-allowed; }
+        /* The card's heights, as variables with ONE owner each.
+           They were four hardcoded numbers in the only part of this card that did not
+           use a variable - everything else here already reads var(--aparte-code-bg) and
+           friends - and two of them had to agree while a third contradicted a fourth:
+           the code pane repeated the body's 600px, and the "press Preview" placeholder
+           was 120px tall inside a body whose min-height said 80, so that minimum applied
+           to nothing.
+           The frame stays a FIXED height rather than an aspect ratio, which is what
+           embeds of arbitrary HTML actually do - CodeSandbox documents 500px, StackBlitz
+           takes a height parameter - because a frame with an opaque origin cannot be
+           measured and a 16/10 ratio on a wide card is enormous. The vh cap is the part
+           that was missing: a fixed 480px should not own a phone screen.
+           Each default lives in its read, as var(--x, literal), the way every other
+           value in this file already does - not in a declaration block on top of the
+           fallbacks, which would be two owners of one number again. It also means the
+           docs' CSS-variable generator finds them: its sweep looks for reads that
+           carry a fallback, so a read without one is a public knob nobody documents. */
         .aparte-art-card__body {
             position: relative;
-            min-height: 80px;
-            max-height: 600px;
+            /* The placeholder is the tallest thing this box can hold while empty, so it
+               IS the minimum - one number instead of two that disagreed. */
+            min-height: var(--aparte-artifact-pending-height, 120px);
+            max-height: var(--aparte-artifact-body-max, 600px);
             overflow: hidden;
         }
         .aparte-art-card__pane { display: none; height: 100%; }
         .segment-artifact-card[data-tab="code"]    .aparte-art-card__pane[data-pane="code"]    { display: block; }
         .segment-artifact-card[data-tab="preview"] .aparte-art-card__pane[data-pane="preview"] { display: block; }
         .aparte-art-card__pane[data-pane="code"] {
-            max-height: 600px; overflow: auto;
+            /* The body already caps this; repeating the number was the second owner. */
+            max-height: var(--aparte-artifact-body-max, 600px); overflow: auto;
         }
         .aparte-art-card__pane[data-pane="code"] pre {
             margin: 0; padding: 12px;
@@ -3084,13 +3245,14 @@ const artifactRenderer = {
         }
         .aparte-art-card__frame {
             display: block;
-            width: 100%; height: 480px;
+            width: 100%;
+            height: min(var(--aparte-artifact-frame-height, 480px), var(--aparte-artifact-frame-max, 70vh));
             border: 0;
             background: #fff;
         }
         .aparte-art-card__pending {
             display: flex; align-items: center; justify-content: center;
-            height: 120px;
+            height: var(--aparte-artifact-pending-height, 120px);
             color: var(--aparte-text-muted, rgba(0,0,0,0.5));
             font-size: 0.85rem;
             font-style: italic;
@@ -3116,7 +3278,7 @@ const artifactRenderer = {
             position: relative;
         }
         .aparte-art-file__code-pane {
-            max-height: 360px; overflow: auto;
+            max-height: var(--aparte-artifact-file-code-max, 360px); overflow: auto;
             background: var(--aparte-code-bg, #fafafa);
         }
         .aparte-art-file__code-pane pre {
@@ -3125,7 +3287,7 @@ const artifactRenderer = {
             font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
         }
         .aparte-art-file__preview-pane {
-            max-height: 460px;
+            max-height: var(--aparte-artifact-file-preview-max, 460px);
             overflow: auto;
             background: #fff;
             /* Preview is a document view — force light scheme regardless of
@@ -3385,10 +3547,8 @@ const DEFAULT_RENDERERS = [
   textRenderer,
   thinkingRenderer,
   codeRenderer,
-  terminalRenderer,
   errorRenderer,
   progressRenderer,
-  fileTreeRenderer,
   toolCallRenderer,
   artifactRenderer,
   pipelineWaitingRenderer
@@ -3398,14 +3558,47 @@ const ACTIVITY_KEYS = ["content", "output", "result"];
 function isActivity(updates) {
   return ACTIVITY_KEYS.some((key) => key in updates);
 }
-function stampSegmentOnInsert(segments, segment, messageId) {
+function stampSegmentOnInsert(segments, segment, messageId, defaults) {
+  const base = applyDefaults(segment, defaults);
   return {
-    ...segment,
+    ...base,
     messageId: segment.messageId ?? messageId,
     index: segment.index ?? segments.length,
-    startedAt: segment.startedAt ?? Date.now()
+    // A start already present is kept — a segment a consumer rebuilt from their own
+    // storage keeps the number it was persisted with. `adoptSegment` is the path
+    // that never writes one at all.
+    ...timingPatch(base, { startedAt: segmentTiming(segment)?.startedAt ?? Date.now() })
   };
 }
+function adoptSegment(segments, segment, messageId) {
+  return {
+    ...segment,
+    messageId,
+    index: segments.length,
+    isStreaming: false
+  };
+}
+const RESERVED = /* @__PURE__ */ new Set(["id", "type", "messageId", "index"]);
+function segmentTiming(segment) {
+  return segment.meta?.aparte;
+}
+function timingPatch(segment, timing) {
+  return { meta: { ...segment.meta, aparte: { ...segment.meta?.aparte, ...timing } } };
+}
+function applyDefaults(segment, defaults) {
+  if (!defaults) return segment;
+  const out = { ...segment };
+  for (const [key, value] of Object.entries(defaults)) {
+    if (RESERVED.has(key) || key in segment) continue;
+    if (key === "meta") {
+      const { aparte: _forged, ...rest } = value ?? {};
+      out.meta = rest;
+      continue;
+    }
+    out[key] = value;
+  }
+  return out;
+}
 function isSegmentSettled(segment) {
   if (segment.type === "tool_call") return !OPEN_TOOL_STATUSES.has(segment.status);
   return segment.isStreaming === false;
@@ -3414,17 +3607,32 @@ function stampSegmentOnUpdate(segment, updates) {
   if (isSegmentSettled(segment)) return updates;
   const merged = { ...segment, ...updates };
   if (isSegmentSettled(merged)) {
-    return { ...updates, endedAt: segment.endedAt ?? Date.now() };
+    const ended = segmentTiming(segment)?.endedAt;
+    return { ...updates, ...timingPatch(segment, { endedAt: ended ?? Date.now() }) };
   }
-  return isActivity(updates) ? { ...updates, endedAt: Date.now() } : updates;
+  return isActivity(updates) ? { ...updates, ...timingPatch(segment, { endedAt: Date.now() }) } : updates;
+}
+function mergeSegmentUpdate(segment, updates) {
+  const merged = { ...segment, ...updates };
+  if (!("meta" in updates)) return merged;
+  return {
+    ...merged,
+    meta: {
+      ...segment.meta,
+      ...updates.meta,
+      // Neither side's timing wins by accident: whichever one carries it, wins,
+      // and a consumer writing `meta` without an `aparte` key keeps ours.
+      ...segment.meta?.aparte || updates.meta?.aparte ? { aparte: { ...segment.meta?.aparte, ...updates.meta?.aparte } } : {}
+    }
+  };
 }
 function segmentDuration(segment) {
-  const { startedAt, endedAt } = segment;
+  const { startedAt, endedAt } = segmentTiming(segment) ?? {};
   if (startedAt == null || endedAt == null) return void 0;
   return endedAt - startedAt;
 }
 function stampSegmentActivity(segment) {
-  return isSegmentSettled(segment) ? {} : { endedAt: Date.now() };
+  return isSegmentSettled(segment) ? {} : timingPatch(segment, { endedAt: Date.now() });
 }
 function segmentContentUpdate(segment) {
   const content = segment.content;
@@ -3439,6 +3647,16 @@ function isTerminalStatus(status) {
 function openSegmentIds(segments) {
   return segments.filter((segment) => !isSegmentSettled(segment)).map((segment) => segment.id);
 }
+function adoptMessageSegments(message) {
+  if (!message.segments?.length) return { ...message };
+  return {
+    ...message,
+    segments: message.segments.reduce((acc, segment) => {
+      acc.push(adoptSegment(acc, segment, message.id));
+      return acc;
+    }, [])
+  };
+}
 function renumberSegments(segments) {
   for (let i = 0; i < segments.length; i++) {
     const segment = segments[i];
@@ -4139,10 +4357,14 @@ class AparteChatHost {
       // 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.
+      // Adopted here rather than passed through: this is the conversation
+      // controller handing back a stored list, and it goes STRAIGHT to the
+      // framework's own reactive setter — so in every wrapper it never met the
+      // stamping seam at all, tree or no tree.
       setMessages: (msgs) => {
         this._beginConversationSwap();
         this._vp()?.resetSpacer?.();
-        this.binding.setMessages([...msgs]);
+        this.binding.setMessages(msgs.map(adoptMessageSegments));
       },
       appendMessage: (msg) => this.appendMessage(msg),
       getMessages: () => this.binding.getMessages(),
@@ -4193,11 +4415,23 @@ class AparteChatHost {
    * spec guards ("optimistic-append + parent-push race"). `onMessageAppended`
    * is the append-specific signal instead.
    */
-  appendMessage(message) {
+  appendMessage(message, options) {
     this._flushStreamState();
     if (message.role === "user") this._vp()?.setAutoScroll?.(true);
-    this.binding.setMessages([...this.binding.getMessages(), message]);
-    this.binding.onMessageAppended?.(message);
+    const stored = options?.historical ? adoptMessageSegments(message) : message.segments?.length ? {
+      ...message,
+      segments: message.segments.reduce((acc, segment) => {
+        acc.push(stampSegmentOnInsert(
+          acc,
+          segment,
+          message.id,
+          resolveConfig(this.binding.host).getSegmentDefaults(segment.type)
+        ));
+        return acc;
+      }, [])
+    } : message;
+    this.binding.setMessages([...this.binding.getMessages(), stored]);
+    this.binding.onMessageAppended?.(stored);
   }
   /** Atomic partial update of a message by id. */
   updateMessage(messageId, updates) {
@@ -4240,7 +4474,15 @@ class AparteChatHost {
     this.binding.onTypingChange?.(false);
     const msgs = before;
     const last = target;
-    const stamped = last ? stampSegmentOnInsert(last.segments || [], segment, last.id) : segment;
+    const stamped = last ? stampSegmentOnInsert(
+      last.segments || [],
+      segment,
+      last.id,
+      // The host attaches its config to `binding.host`, so resolving from
+      // that element is what gives a framework-managed chat its OWN
+      // defaults rather than the page's.
+      resolveConfig(this.binding.host).getSegmentDefaults(segment.type)
+    ) : segment;
     this._lastBubble()?.addSegment?.(stamped);
     if (!last) return;
     const segments = [...last.segments || [], stamped];
@@ -4259,7 +4501,7 @@ class AparteChatHost {
     this._lastBubble()?.updateSegment?.(segmentId, stamped);
     if (!last || !last.segments) return;
     const segments = last.segments.map(
-      (s) => s.id === segmentId ? { ...s, ...stamped } : s
+      (s) => s.id === segmentId ? mergeSegmentUpdate(s, stamped) : s
     );
     const next = [...msgs.slice(0, -1), { ...last, segments }];
     this.binding.setMessages(next);
@@ -6847,6 +7089,10 @@ function isAwaitingReply(message) {
   if (message.status === "streaming" || message.status === "pending") return true;
   return message.status === void 0 && message.role === "assistant" && !message.content?.trim() && !message.segments?.length;
 }
+let _relabels = null;
+function onRelabel(fn) {
+  _relabels?.push(fn);
+}
 function el(tag, className, text) {
   const node = document.createElement(tag);
   if (className) node.className = className;
@@ -6903,12 +7149,20 @@ function buildEnumField(field, onChange, fallbackLabel) {
     control.value = "__other__";
     const body = el("span", "aparte-elic-option-body");
     const t = contextConfig();
-    body.appendChild(el("span", "aparte-elic-option-title", t.t("elicitationOther")));
+    const otherTitle = el("span", "aparte-elic-option-title", t.t("elicitationOther"));
+    body.appendChild(otherTitle);
     otherText = el("input", "aparte-elic-other-input");
     otherText.type = "text";
     otherText.placeholder = t.t("elicitationOtherPlaceholder");
     otherText.style.display = "none";
     otherText.setAttribute("aria-label", t.t("elicitationOtherLabel"));
+    const otherInput = otherText;
+    onRelabel(() => {
+      const now = contextConfig();
+      otherTitle.textContent = now.t("elicitationOther");
+      otherInput.placeholder = now.t("elicitationOtherPlaceholder");
+      otherInput.setAttribute("aria-label", now.t("elicitationOtherLabel"));
+    });
     body.appendChild(otherText);
     row.append(control, body);
     list.appendChild(row);
@@ -6952,7 +7206,7 @@ function buildBooleanField(field, onChange, fallbackLabel) {
   const list = el("div", "aparte-elic-options");
   labelGroup(list, { titleId, fallbackLabel });
   const name = `elic-${uuid()}`;
-  const mk = (val, label) => {
+  const mk = (val, label, defaulted) => {
     const row = el("label", "aparte-elic-option");
     const control = el("input", "aparte-elic-control");
     control.type = "radio";
@@ -6960,13 +7214,17 @@ function buildBooleanField(field, onChange, fallbackLabel) {
     control.value = val;
     if (field.default != null && String(field.default) === val) control.checked = true;
     const body = el("span", "aparte-elic-option-body");
-    body.appendChild(el("span", "aparte-elic-option-title", label));
+    const title = el("span", "aparte-elic-option-title", label);
+    if (defaulted) onRelabel(() => {
+      title.textContent = contextConfig().t(defaulted);
+    });
+    body.appendChild(title);
     row.append(control, body);
     list.appendChild(row);
   };
   const t = contextConfig();
-  mk("true", field.trueLabel ?? t.t("elicitationYes"));
-  mk("false", field.falseLabel ?? t.t("elicitationNo"));
+  mk("true", field.trueLabel ?? t.t("elicitationYes"), field.trueLabel ? void 0 : "elicitationYes");
+  mk("false", field.falseLabel ?? t.t("elicitationNo"), field.falseLabel ? void 0 : "elicitationNo");
   wrap.appendChild(list);
   list.addEventListener("change", onChange);
   const checked = () => list.querySelector("input:checked");
@@ -6985,7 +7243,14 @@ function buildStringField(field, onChange, fallbackLabel) {
   if (field.placeholder) input.setAttribute("placeholder", field.placeholder);
   if (field.default) input.value = field.default;
   if (field.maxLength != null) input.setAttribute("maxlength", String(field.maxLength));
-  input.setAttribute("aria-label", field.title ?? field.description ?? fallbackLabel ?? contextConfig().t("elicitationAnswerLabel"));
+  const ownName = field.title || field.description || fallbackLabel || void 0;
+  input.setAttribute("aria-label", ownName ?? contextConfig().t("elicitationAnswerLabel"));
+  if (ownName == null) {
+    const named = input;
+    onRelabel(() => {
+      named.setAttribute("aria-label", contextConfig().t("elicitationAnswerLabel"));
+    });
+  }
   wrap.appendChild(input);
   input.addEventListener("input", onChange);
   const required = field.required ?? true;
@@ -7021,6 +7286,19 @@ function buildField(field, onChange, fallbackLabel, key) {
   }
 }
 function buildElicitationPanel(message, schema, onChange) {
+  const relabels = [];
+  const outer = _relabels;
+  _relabels = relabels;
+  try {
+    const built = buildPanel(message, schema, onChange);
+    return { ...built, relabel: () => {
+      for (const fn of relabels) fn();
+    } };
+  } finally {
+    _relabels = outer;
+  }
+}
+function buildPanel(message, schema, onChange) {
   const panel = el("div", "aparte-elic-panel");
   if (message) panel.appendChild(el("p", "aparte-elic-message", message));
   const body = el("div", "aparte-elic-body");
@@ -7124,67 +7402,72 @@ function requestUserInput(request) {
   return resolveConfig(request.target ?? null).requestUserInput(request);
 }
 export {
-  segmentDuration as $,
-  APARTE_CONVERSATION_SCHEMA_VERSION as A,
-  createStreamAdapter as B,
-  cssEscape as C,
-  declineDefaultRenderers as D,
-  defaultSanitizer as E,
-  deriveArtifactKind as F,
-  detachConfig as G,
-  escapeAttr as H,
-  escapeHtml as I,
-  filesToAttachments as J,
-  getAllRenderers as K,
-  getSegmentRenderer as L,
-  installDefaultRenderersOnce as M,
-  isAwaitingReply as N,
-  isFormatAdapter as O,
-  isSafeUrl as P,
-  isSegmentSettled as Q,
-  parseAparteEventStream as R,
-  parseMarkdownToSegments as S,
-  populateBubbleFromMessage as T,
-  readableToAsyncIterable as U,
-  registerDefaultRenderers as V,
-  registerSegmentRenderer as W,
-  requestUserInput as X,
-  resolveConfig as Y,
-  revokeAttachmentUrls as Z,
-  runWithConfig as _,
-  APARTE_DEFAULT_BUBBLE_ACTIONS as a,
-  unregisterSegmentRenderer as a0,
-  uuid as a1,
-  stampSegmentActivity as a2,
-  stampSegmentOnInsert as a3,
-  stampSegmentOnUpdate as a4,
-  renumberSegments as a5,
-  openSegmentIds as a6,
-  isTerminalStatus as a7,
-  APARTE_DEFAULT_HOST_HANDLERS as b,
-  APARTE_DEFAULT_ICON_FALLBACKS as c,
-  APARTE_DEFAULT_LOCALE as d,
-  APARTE_DEFAULT_SKELETON_FALLBACKS as e,
-  APARTE_DEFAULT_UI_EVENTS as f,
-  APARTE_HOST_ATTR as g,
-  AparteBackendTransport as h,
-  AparteChatHost as i,
-  AparteClient as j,
-  AparteConfig as k,
-  AparteConversationController as l,
-  AparteConversationManager as m,
-  AparteDirectTransport as n,
-  AparteError as o,
-  AparteErrorCode as p,
-  AparteMessageRepository as q,
-  AparteStreamParser as r,
-  aparteGlobalConfig as s,
-  applyElementProps as t,
-  attachConfig as u,
-  buildElicitationPanel as v,
-  collectRendererStyles as w,
-  contentToText as x,
-  contextConfig as y,
-  createAparteChatHandler as z
+  runWithConfig as $,
+  APARTE_CONFIG_CHANGE as A,
+  createAparteChatHandler as B,
+  createStreamAdapter as C,
+  cssEscape as D,
+  declineDefaultRenderers as E,
+  defaultSanitizer as F,
+  deriveArtifactKind as G,
+  detachConfig as H,
+  escapeAttr as I,
+  escapeHtml as J,
+  filesToAttachments as K,
+  getAllRenderers as L,
+  getSegmentRenderer as M,
+  installDefaultRenderersOnce as N,
+  isAwaitingReply as O,
+  isFormatAdapter as P,
+  isSafeUrl as Q,
+  isSegmentSettled as R,
+  parseAparteEventStream as S,
+  parseMarkdownToSegments as T,
+  populateBubbleFromMessage as U,
+  readableToAsyncIterable as V,
+  registerDefaultRenderers as W,
+  registerSegmentRenderer as X,
+  requestUserInput as Y,
+  resolveConfig as Z,
+  revokeAttachmentUrls as _,
+  APARTE_CONVERSATION_SCHEMA_VERSION as a,
+  segmentDuration as a0,
+  segmentTiming as a1,
+  subscribeConfigChange as a2,
+  unregisterSegmentRenderer as a3,
+  uuid as a4,
+  mergeSegmentUpdate as a5,
+  stampSegmentActivity as a6,
+  stampSegmentOnInsert as a7,
+  stampSegmentOnUpdate as a8,
+  renumberSegments as a9,
+  openSegmentIds as aa,
+  isTerminalStatus as ab,
+  adoptMessageSegments as ac,
+  APARTE_DEFAULT_BUBBLE_ACTIONS as b,
+  APARTE_DEFAULT_HOST_HANDLERS as c,
+  APARTE_DEFAULT_ICON_FALLBACKS as d,
+  APARTE_DEFAULT_LOCALE as e,
+  APARTE_DEFAULT_SKELETON_FALLBACKS as f,
+  APARTE_DEFAULT_UI_EVENTS as g,
+  APARTE_HOST_ATTR as h,
+  AparteBackendTransport as i,
+  AparteChatHost as j,
+  AparteClient as k,
+  AparteConfig as l,
+  AparteConversationController as m,
+  AparteConversationManager as n,
+  AparteDirectTransport as o,
+  AparteError as p,
+  AparteErrorCode as q,
+  AparteMessageRepository as r,
+  AparteStreamParser as s,
+  aparteGlobalConfig as t,
+  applyElementProps as u,
+  attachConfig as v,
+  buildElicitationPanel as w,
+  collectRendererStyles as x,
+  contentToText as y,
+  contextConfig as z
 };
-//# sourceMappingURL=index-hQQljwfX.js.map
+//# sourceMappingURL=index-BnKBciDG.js.map