@aparte/core 0.15.0 → 0.16.0

package/dist/index.js

@@ -1,6 +1,5 @@
-import { Z as resolveConfig, a2 as subscribeConfigChange, $ as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, I as escapeAttr, E as cssEscape, a5 as mergeSegmentUpdate, J as escapeHtml, a6 as writeStreamedMarkdown, M as getSegmentRenderer, N as installDefaultRenderersOnce, r as AparteMessageRepository, a7 as stampSegmentActivity, a8 as stampSegmentOnInsert, a9 as stampSegmentOnUpdate, aa as renumberSegments, ab as openSegmentIds, ac as isTerminalStatus, ad as adoptMessageSegments, O as isAwaitingReply, U as populateBubbleFromMessage, a4 as uuid, _ as revokeAttachmentUrls } from "./is-awaiting-reply-BZ_iJ3s3.js";
-import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, p, q, s, t, u, v, y, z, B, C, D, F, G, H, K, L, P, Q, R, S, T, V, W, X, Y, a0, a1, a3 } from "./is-awaiting-reply-BZ_iJ3s3.js";
-import { deriveArtifactKind } from "@aparte/engine";
+import { $ as resolveConfig, a4 as subscribeConfigChange, a1 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, J as escapeAttr, F as cssEscape, a7 as mergeSegmentUpdate, K as escapeHtml, a8 as writeStreamedMarkdown, C as copyText, N as getSegmentRenderer, O as installDefaultRenderersOnce, r as AparteMessageRepository, a9 as stampSegmentActivity, aa as stampSegmentOnInsert, ab as stampSegmentOnUpdate, ac as renumberSegments, ad as openSegmentIds, ae as isTerminalStatus, af as adoptMessageSegments, Q as isAwaitingReply, W as populateBubbleFromMessage, a6 as uuid, a0 as revokeAttachmentUrls, e as APARTE_DEFAULT_LOCALE, P as installDialogTriggersOnce } from "./dialog-triggers-CVCxqKg3.js";
+import { A, a, b, c, d, f, g, h, i, j, k, l, m, n, p, q, s, t, u, v, y, z, B, D, E, G, H, I, L, M, R, S, T, U, V, X, Y, Z, _, a2, a3, a5 } from "./dialog-triggers-CVCxqKg3.js";
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -136,8 +135,8 @@ class AparteOptgroup extends HTMLElement {
           chevron.innerHTML = resolveConfig(this).getIcon("expand");
           header.appendChild(chevron);
           header.style.cursor = "pointer";
-          header.addEventListener("click", (e2) => {
-            e2.stopPropagation();
+          header.addEventListener("click", (e) => {
+            e.stopPropagation();
             this._toggleCollapse();
           });
         }
@@ -278,6 +277,7 @@ class AparteSelect extends HTMLElement {
       return;
     }
     const slottedChildren = Array.from(this.children);
+    const cfg = resolveConfig(this);
     const trigger = document.createElement("div");
     trigger.className = "aparte-select-trigger";
     trigger.setAttribute("tabindex", "0");
@@ -296,7 +296,7 @@ class AparteSelect extends HTMLElement {
     labelSpan.append(labelText, sizer);
     const chevronSpan = document.createElement("span");
     chevronSpan.className = "aparte-select-chevron";
-    chevronSpan.innerHTML = resolveConfig(this).getIcon("expand");
+    chevronSpan.innerHTML = cfg.getIcon("expand");
     trigger.append(labelSpan, chevronSpan);
     const dropdown = document.createElement("div");
     dropdown.className = "aparte-select-dropdown";
@@ -305,8 +305,8 @@ class AparteSelect extends HTMLElement {
       const searchInput = document.createElement("input");
       searchInput.type = "text";
       searchInput.className = "aparte-select-search";
-      searchInput.placeholder = "Search...";
-      searchInput.setAttribute("aria-label", "Search options");
+      searchInput.placeholder = cfg.t("selectSearchPlaceholder") || "Search…";
+      searchInput.setAttribute("aria-label", cfg.t("selectSearchLabel") || "Search options");
       dropdown.appendChild(searchInput);
     }
     const optionsContainer = document.createElement("div");
@@ -382,68 +382,68 @@ class AparteSelect extends HTMLElement {
   }
   _setupEventListeners() {
     this._trigger?.addEventListener("click", () => this._toggle());
-    this._trigger?.addEventListener("keydown", (e2) => {
-      if (e2.key === "Enter" || e2.key === " ") {
+    this._trigger?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
         if (this._isOpen) return;
-        e2.preventDefault();
+        e.preventDefault();
         this._toggle();
       }
-      if (e2.key === "ArrowDown" && !this._isOpen) {
-        e2.preventDefault();
+      if (e.key === "ArrowDown" && !this._isOpen) {
+        e.preventDefault();
         this._openDropdown();
       }
     });
     this.removeEventListener("click", this._boundHandleOptionClick);
     this.addEventListener("click", this._boundHandleOptionClick);
-    this._searchInput?.addEventListener("input", (e2) => {
-      const query = e2.target.value.toLowerCase();
+    this._searchInput?.addEventListener("input", (e) => {
+      const query = e.target.value.toLowerCase();
       this._filterOptions(query);
     });
     document.addEventListener("click", this._boundHandleDocumentClick);
     document.addEventListener("keydown", this._boundHandleKeydown);
   }
-  _handleOptionClick(e2) {
-    const option = e2.target.closest("aparte-option");
+  _handleOptionClick(e) {
+    const option = e.target.closest("aparte-option");
     if (option && !option.hasAttribute("disabled")) {
       this._selectOption(option);
     }
   }
-  _handleDocumentClick(e2) {
-    if (!this.contains(e2.target)) {
+  _handleDocumentClick(e) {
+    if (!this.contains(e.target)) {
       this._closeDropdown();
     }
   }
-  _handleKeydown(e2) {
+  _handleKeydown(e) {
     if (!this._isOpen) return;
     const inSearch = document.activeElement === this._searchInput;
-    switch (e2.key) {
+    switch (e.key) {
       case "Escape":
-        e2.preventDefault();
+        e.preventDefault();
         this._closeDropdown();
         this._trigger?.focus();
         break;
       case "ArrowDown":
-        e2.preventDefault();
+        e.preventDefault();
         this._moveActive(1);
         break;
       case "ArrowUp":
-        e2.preventDefault();
+        e.preventDefault();
         this._moveActive(-1);
         break;
       case "Home":
         if (inSearch) break;
-        e2.preventDefault();
+        e.preventDefault();
         this._setActive(0);
         break;
       case "End":
         if (inSearch) break;
-        e2.preventDefault();
+        e.preventDefault();
         this._setActive(this._visibleOptions().length - 1);
         break;
       case "Enter": {
         const active = this._visibleOptions()[this._activeIndex];
         if (active) {
-          e2.preventDefault();
+          e.preventDefault();
           this._selectOption(active);
         }
         break;
@@ -695,8 +695,8 @@ class AparteElicitation extends HTMLElement {
    * cannot identify accepts everything rather than becoming deaf. Only a
    * MISMATCH is ignored.
    */
-  _onTurnEnd = (e2) => {
-    const evtTargetId = e2.detail?.targetId;
+  _onTurnEnd = (e) => {
+    const evtTargetId = e.detail?.targetId;
     const own = this._pendingTargetId();
     if (evtTargetId && own && evtTargetId !== own) return;
     this._cancelPending();
@@ -783,7 +783,7 @@ class AparteElicitation extends HTMLElement {
         const approvalMode = () => panel2.isComplete() ? "submit" : "none";
         const panel2 = runWithConfig(cfg, () => buildApprovalPanel(request.message, request.options ?? [], () => {
           composer.setPanelSubmitEnabled(panel2.isComplete(), approvalMode());
-        }));
+        }, request.details));
         panel2.onSettle((answer) => settle({ action: "accept", content: answer }));
         this._pending = { abort: () => fail(), composer, relabel: () => panel2.relabel() };
         slot.token = composer.showPanel(panel2.el, {
@@ -829,11 +829,6 @@ class AparteElicitation extends HTMLElement {
          */
         onEvict: () => fail(),
         onSubmit: () => {
-          if (panel.mode() === "advance") {
-            panel.proceed();
-            composer.setPanelSubmitEnabled(panel.canProceed(), panel.mode());
-            return;
-          }
           if (panel.isComplete()) settle({ action: "accept", content: panel.getContent() });
         }
       });
@@ -1034,11 +1029,17 @@ function resolveSegmentRenderer(type, config) {
   installDefaultRenderersOnce(config);
   return getSegmentRenderer(type, config);
 }
-function segmentRenderResultToElement(result) {
-  if (result instanceof HTMLElement) return result;
-  const wrapper = document.createElement("div");
-  wrapper.innerHTML = result;
-  return wrapper.firstElementChild;
+function segmentRenderResultToElement(result, segment) {
+  let el2;
+  if (result instanceof HTMLElement) {
+    el2 = result;
+  } else {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = result;
+    el2 = wrapper.firstElementChild;
+  }
+  if (el2 && segment && !el2.hasAttribute("data-segment-id")) el2.setAttribute("data-segment-id", segment.id);
+  return el2;
 }
 class AparteChatBubble extends HTMLElement {
   _contentEl = null;
@@ -1072,8 +1073,8 @@ class AparteChatBubble extends HTMLElement {
   // Rebuild the action bar when the global config changes (e.g. a live skin
   // switch calling setBubbleActions / setIconProvider) so already-rendered
   // bubbles pick up the new per-role actions + icons without being re-created.
-  _onConfigChange = (e2) => {
-    const detail = e2.detail;
+  _onConfigChange = (e) => {
+    const detail = e.detail;
     if (detail?.config && detail.config !== this._cfg) return;
     this._updateActionBar();
     this._updateName();
@@ -1140,10 +1141,12 @@ class AparteChatBubble extends HTMLElement {
     this._updateTimestamp(this.getAttribute("timestamp"));
     window.addEventListener("aparte-config-change", this._onConfigChange);
     this.addEventListener("click", this._onBranchPickerClick);
+    this.addEventListener("click", this._onLinkClick);
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
     this.removeEventListener("click", this._onBranchPickerClick);
+    this.removeEventListener("click", this._onLinkClick);
     if (this._avatarCleanup) {
       try {
         this._avatarCleanup();
@@ -1307,7 +1310,7 @@ class AparteChatBubble extends HTMLElement {
       this._updateContent();
     }
     if ("segments" in updates) {
-      this._segments = updates.segments;
+      this._segments = [...updates.segments];
       this._renderSegments();
     }
     if ("timestamp" in updates) {
@@ -1333,7 +1336,7 @@ class AparteChatBubble extends HTMLElement {
     }
     const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (renderer) {
-      const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+      const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
       if (el2) {
         this._segmentsEl.appendChild(el2);
         runWithConfig(this._cfg, () => renderer.setup?.(el2, segment));
@@ -1355,7 +1358,7 @@ class AparteChatBubble extends HTMLElement {
     if (renderer.update) {
       runWithConfig(this._cfg, () => renderer.update(el2, segment));
     } else {
-      const newEl = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+      const newEl = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
       if (newEl) {
         el2.replaceWith(newEl);
         runWithConfig(this._cfg, () => renderer.setup?.(newEl, segment));
@@ -1438,6 +1441,7 @@ class AparteChatBubble extends HTMLElement {
     this._segmentsEl = this.querySelector(".aparte-segments");
     this._attachmentsEl = this.querySelector(".aparte-attachments");
     this._actionBarEl = this.querySelector(".aparte-action-bar");
+    this._actionBarEl?.addEventListener("keydown", this._onActionBarKeydown);
     this._branchPickerEl = this.querySelector(".aparte-branch-picker");
     this._footerEl = this.querySelector(".aparte-footer");
     this._transcriptBusy = !!this.closest("aparte-chat-viewport")?.hasAttribute("data-busy");
@@ -1572,7 +1576,7 @@ class AparteChatBubble extends HTMLElement {
     for (const segment of this._segments) {
       const renderer = resolveSegmentRenderer(segment.type, this._cfg);
       if (renderer) {
-        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)), segment);
         if (el2) {
           this._segmentsEl.appendChild(el2);
           runWithConfig(this._cfg, () => renderer.setup?.(el2, segment));
@@ -1631,18 +1635,18 @@ class AparteChatBubble extends HTMLElement {
     const customAttachment = this._cfg.getAttachmentRenderer?.();
     if (customAttachment) {
       this._attachmentsEl.replaceChildren();
-      for (const a2 of this._attachments) {
-        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a2)));
+      for (const a4 of this._attachments) {
+        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a4)));
         if (el2) this._attachmentsEl.appendChild(el2);
       }
       return;
     }
-    this._attachmentsEl.innerHTML = this._attachments.map((a2) => {
-      const name = escapeHtml(a2.name);
-      if (a2.type.startsWith("image/")) {
-        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeHtml(a2.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+    this._attachmentsEl.innerHTML = this._attachments.map((a4) => {
+      const name = escapeHtml(a4.name);
+      if (a4.type.startsWith("image/")) {
+        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeHtml(a4.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
       }
-      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._fileExt(a2.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
+      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._fileExt(a4.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
     }).join("");
     if (!this._cfg.getHostHandlers().attachmentPreview) return;
     this._attachmentsEl.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
@@ -1658,10 +1662,10 @@ class AparteChatBubble extends HTMLElement {
         }));
       };
       tile.addEventListener("click", open);
-      tile.addEventListener("keydown", (e2) => {
-        const key = e2.key;
+      tile.addEventListener("keydown", (e) => {
+        const key = e.key;
         if (key !== "Enter" && key !== " ") return;
-        e2.preventDefault();
+        e.preventDefault();
         open();
       });
     });
@@ -1707,6 +1711,33 @@ class AparteChatBubble extends HTMLElement {
       detail
     }));
   };
+  /**
+   * A link the MODEL wrote is about to be followed. Announced as a cancelable event
+   * before the browser acts, so a host can route it — an external browser, a
+   * confirmation, an embedded view — without intercepting the DOM (issue #38). With
+   * no listener the browser follows it, which the sanitizer has already made open in
+   * a new tab for an external URL; `preventDefault()` on the event cancels the click.
+   *
+   * Only anchors inside the message body: the action bar and the branch picker are
+   * buttons, and an attachment tile is its own event.
+   */
+  _onLinkClick = (event) => {
+    const target = event.target;
+    const anchor = target?.closest?.("a[href]");
+    if (!anchor || !this.contains(anchor)) return;
+    const detail = {
+      href: anchor.getAttribute("href") ?? "",
+      anchor,
+      messageId: this.getAttribute("message-id")
+    };
+    const announced = this.dispatchEvent(new CustomEvent("aparte-link-click", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail
+    }));
+    if (!announced) event.preventDefault();
+  };
   /**
    * Whether a reply is streaming somewhere in this bubble's transcript. Set by the
    * viewport (`data-busy` on it, pushed here), read once on connect for a bubble
@@ -1771,14 +1802,14 @@ class AparteChatBubble extends HTMLElement {
     const buttons = [];
     if (this._role === "user") {
       if (config.user) {
-        for (const a2 of config.user) buttons.push(this._actionButtonHtml(a2, icons, locale));
+        for (const a4 of config.user) buttons.push(this._actionButtonHtml(a4, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.edit) buttons.push(this._actionButtonHtml("edit", icons, locale));
       }
     } else if (this._role === "assistant") {
       if (config.assistant) {
-        for (const a2 of config.assistant) buttons.push(this._actionButtonHtml(a2, icons, locale));
+        for (const a4 of config.assistant) buttons.push(this._actionButtonHtml(a4, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.retry) buttons.push(this._actionButtonHtml("retry", icons, locale));
@@ -1793,10 +1824,71 @@ class AparteChatBubble extends HTMLElement {
     this._appendCustomActions(icons);
     this._applyTranscriptBusy();
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
-      btn.addEventListener("click", (e2) => this._handleActionClick(e2));
+      btn.addEventListener("click", (e) => this._handleActionClick(e));
     });
     this._syncFooterVisibility();
   }
+  /**
+   * `role="toolbar"` promises a keyboard model. This is it.
+   *
+   * The bar has announced itself as a toolbar since it existed, and a toolbar is ONE
+   * tab stop whose members are reached with the arrow keys — that is the whole of what
+   * the role means to a screen-reader user. What shipped was five independent tab
+   * stops per message, so the role described a behaviour that did not exist: a reader
+   * told to press Right heard nothing move, and tabbing through a long transcript
+   * walked every button of every message.
+   *
+   * The roving index is re-applied from `_syncFooterVisibility`, which is the single
+   * funnel all three build paths already run through (the flag-driven bar, the edit
+   * bar, and the branch picker's own visibility pass). Re-deriving it there rather
+   * than in each builder is what keeps the invariant true after a `setBubbleActions`
+   * rebuild — the drift this pattern usually dies of.
+   *
+   * DISABLED buttons are skipped, not merely un-tabbable: while the transcript is busy
+   * retry and edit are disabled, and a toolbar whose arrows stop on a dead control
+   * reads as broken. If every button is disabled the bar keeps one tab stop anyway, so
+   * focus sitting there when the turn ends is not thrown to the top of the page.
+   */
+  _rovingButtons() {
+    if (!this._actionBarEl) return [];
+    return [...this._actionBarEl.querySelectorAll("button")];
+  }
+  _setRovingIndex() {
+    const buttons = this._rovingButtons();
+    if (!buttons.length) return;
+    const usable = buttons.filter((b2) => !b2.disabled);
+    const current = buttons.find((b2) => b2.tabIndex === 0 && !b2.disabled);
+    const stop = current ?? usable[0] ?? buttons[0];
+    for (const button of buttons) button.tabIndex = button === stop ? 0 : -1;
+  }
+  /**
+   * Left/Right walk the bar, Home/End jump to its ends, and both wrap.
+   *
+   * Arrow keys follow the READING direction, per the ARIA practices: in an RTL
+   * transcript Left is "next". `dir` is resolved from the nearest ancestor that sets
+   * it — the viewport writes it from `locale.direction` — because a bubble has none of
+   * its own and `getComputedStyle` is not something jsdom can answer.
+   */
+  _onActionBarKeydown = (e) => {
+    const event = e;
+    const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (!keys.includes(event.key)) return;
+    const buttons = this._rovingButtons().filter((b2) => !b2.disabled);
+    if (buttons.length === 0) return;
+    const active = document.activeElement;
+    const from = buttons.findIndex((b2) => b2 === active);
+    if (from === -1 && event.key !== "Home" && event.key !== "End") return;
+    const rtl = (this.closest("[dir]")?.getAttribute("dir") ?? document.documentElement.dir) === "rtl";
+    const forward = rtl ? "ArrowLeft" : "ArrowRight";
+    let next;
+    if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = buttons.length - 1;
+    else if (event.key === forward) next = (from + 1) % buttons.length;
+    else next = (from - 1 + buttons.length) % buttons.length;
+    event.preventDefault();
+    for (const button of this._rovingButtons()) button.tabIndex = button === buttons[next] ? 0 : -1;
+    buttons[next]?.focus();
+  };
   /**
    * An empty action bar is not a bar: with every action off it was still a
    * `role="toolbar"` with nothing in it (announced as such), and it still reserved
@@ -1806,6 +1898,7 @@ class AparteChatBubble extends HTMLElement {
    */
   _syncFooterVisibility() {
     if (this._actionBarEl) this._actionBarEl.hidden = this._actionBarEl.children.length === 0;
+    this._setRovingIndex();
     if (!this._footerEl) return;
     const barEmpty = !this._actionBarEl || this._actionBarEl.hidden;
     const pickerHidden = !this._branchPickerEl || this._branchPickerEl.hidden;
@@ -1815,16 +1908,16 @@ class AparteChatBubble extends HTMLElement {
   /** Append the registered custom action buttons for this bubble's role. */
   _appendCustomActions(icons) {
     if (!this._actionBarEl) return;
-    for (const a2 of this._cfg.getActions("bubble")) {
-      const roles = a2.bubble?.roles ?? ["user", "assistant"];
+    for (const a4 of this._cfg.getActions("bubble")) {
+      const roles = a4.bubble?.roles ?? ["user", "assistant"];
       if (!roles.includes(this._role)) continue;
       const btn = document.createElement("button");
       btn.className = "aparte-btn aparte-btn--icon aparte-action-btn aparte-action-custom";
-      btn.dataset["action"] = `custom:${a2.id}`;
-      btn.setAttribute("aria-label", a2.label);
-      btn.setAttribute("title", a2.label);
-      const fromProvider = icons[a2.icon];
-      btn.innerHTML = a2.icon.startsWith("<") ? a2.icon : typeof fromProvider === "function" ? fromProvider() : a2.iconFallback ?? "";
+      btn.dataset["action"] = `custom:${a4.id}`;
+      btn.setAttribute("aria-label", a4.label);
+      btn.setAttribute("title", a4.label);
+      const fromProvider = icons[a4.icon];
+      btn.innerHTML = a4.icon.startsWith("<") ? a4.icon : typeof fromProvider === "function" ? fromProvider() : a4.iconFallback ?? "";
       this._actionBarEl.appendChild(btn);
     }
   }
@@ -1868,12 +1961,12 @@ class AparteChatBubble extends HTMLElement {
     const cancelLabel = locale.editCancel ?? "Cancel";
     this._actionBarEl.innerHTML = `<button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--success aparte-action-btn aparte-action-edit-save" data-action="edit-save" aria-label="${escapeAttr(saveLabel)}" title="${escapeAttr(saveLabel)}">${this._cfg.getIcon("check")}</button><button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--danger aparte-action-btn aparte-action-edit-cancel" data-action="edit-cancel" aria-label="${escapeAttr(cancelLabel)}" title="${escapeAttr(cancelLabel)}">${this._cfg.getIcon("close")}</button>`;
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
-      btn.addEventListener("click", (e2) => this._handleActionClick(e2));
+      btn.addEventListener("click", (e) => this._handleActionClick(e));
     });
     this._syncFooterVisibility();
   }
-  _handleActionClick(e2) {
-    const btn = e2.currentTarget;
+  _handleActionClick(e) {
+    const btn = e.currentTarget;
     const action = btn.dataset["action"];
     const messageId = this.getAttribute("message-id");
     if (action?.startsWith("custom:") && messageId) {
@@ -1890,7 +1983,7 @@ class AparteChatBubble extends HTMLElement {
         composed: true,
         detail
       }));
-      this._cfg.getActions("bubble").find((x) => x.id === actionId)?.onClick?.(e2);
+      this._cfg.getActions("bubble").find((x) => x.id === actionId)?.onClick?.(e);
       return;
     }
     switch (action) {
@@ -1898,7 +1991,7 @@ class AparteChatBubble extends HTMLElement {
         const text = this._content || this._segments.filter((s2) => s2.type !== "thinking").map((s2) => s2.content ?? "").join("\n");
         const icons = this._cfg.getIconProvider();
         const locale = this._cfg.getLocale();
-        navigator.clipboard.writeText(text).then(() => {
+        copyText(text).then(() => {
           btn.innerHTML = icons.check();
           btn.setAttribute("data-copied", "");
           const copiedLabel = locale.copied ?? locale.copy ?? "Copied";
@@ -1988,9 +2081,9 @@ class AparteChatBubble extends HTMLElement {
     this._contentEl.insertAdjacentElement("afterend", input);
     input.setValue(this._content);
     input.addEventListener("aparte-composer-submit", () => this._exitEditMode(true));
-    input.addEventListener("keydown", (e2) => {
-      if (e2.key === "Escape" && !e2.isComposing) {
-        e2.preventDefault();
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && !e.isComposing) {
+        e.preventDefault();
         this._exitEditMode(false);
       }
     });
@@ -2086,8 +2179,8 @@ class AparteChatStatus extends HTMLElement {
   disconnectedCallback() {
     window.removeEventListener("aparte-config-change", this._onConfigChange);
   }
-  _onConfigChange = (e2) => {
-    const detail = e2.detail;
+  _onConfigChange = (e) => {
+    const detail = e.detail;
     if (detail?.config && detail.config !== this._cfg) return;
     this.innerHTML = "";
     this._render();
@@ -2215,6 +2308,12 @@ class AparteChatViewport extends HTMLElement {
   _readerInputAt = Number.NEGATIVE_INFINITY;
   /** A decrease inside this window after our own scroll, with no gesture, is the browser's. */
   _ownScrollWindowMs = 1e3;
+  /** How long after a scroll of ours we keep re-anchoring while the layout churns.
+   *  Not `readonly`: a test shortens it to run past the window's end in a few frames. */
+  _settleWindowMs = 400;
+  /** Deadline of the settle in flight (0 = none). Pushed forward, never stacked. */
+  _settleUntil = 0;
+  _settleRafId = null;
   /** The keys that scroll a focused scroll container — the only keydowns that are a gesture. */
   _scrollKeys = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
   _scrollThreshold = 50;
@@ -2257,12 +2356,43 @@ class AparteChatViewport extends HTMLElement {
    * render — so a chat already on screen never flipped to RTL until a reload.
    * Only OUR config: an instance-scoped change elsewhere must not touch us.
    */
-  _onConfigChange = (e2) => {
-    const detail = e2.detail;
+  _onConfigChange = (e) => {
+    const detail = e.detail;
     if (detail?.config && detail.config !== resolveConfig(this)) return;
     this._applyDirection();
     this._scrollBtn?.setAttribute("aria-label", resolveConfig(this).t("scrollToBottom"));
+    const surface = this._frameworkManagedDOM ? this : this.querySelector(".aparte-viewport-container");
+    surface?.setAttribute("aria-label", resolveConfig(this).t("transcript"));
   };
+  /**
+   * The transcript is a TAB STOP, with a name.
+   *
+   * A scrollable region that no element can hold focus in cannot be scrolled from
+   * the keyboard in WebKit: Chromium and Firefox hand an unfocusable overflow box a
+   * caret or a "scroller" tab stop of their own, Safari does not. So a plain-text
+   * transcript — no links, no code blocks, nothing focusable inside — was unreadable
+   * past the first screen for a Safari keyboard user, with no error and nothing on
+   * screen to say so.
+   *
+   * `tabindex="0"` on the surface itself, in BOTH DOM modes. The framework mode
+   * appeared to work already, and only by accident: the scroll button is inside the
+   * host and stays tabbable while it is visually hidden, so Tab happened to land
+   * somewhere that scrolled. A tab stop that exists because a hidden button happens
+   * to sit there is not an affordance, it is a coincidence.
+   *
+   * The name ships WITH the tab stop rather than after it: a focusable `role="log"`
+   * with no accessible name is announced as an unnamed region, which is a worse
+   * answer than no tab stop at all. And the ROLE ships with both: a name on a
+   * generic element is the same defect mirrored — `aria-label` is prohibited on an
+   * element whose role resolves to none, which is what a bare custom element is. The
+   * default mode already writes `role="log"` on the container before this runs, so
+   * the guard here is what gives the framework-mode host the same declaration.
+   */
+  _nameScrollSurface(el2) {
+    el2.setAttribute("tabindex", "0");
+    if (!el2.hasAttribute("role")) el2.setAttribute("role", "log");
+    el2.setAttribute("aria-label", resolveConfig(this).t("transcript"));
+  }
   /** Mirror `locale.direction` onto the scroll container. */
   _applyDirection() {
     const container = this.querySelector(".aparte-viewport-container");
@@ -2389,7 +2519,18 @@ class AparteChatViewport extends HTMLElement {
    * framework's DOM, reads the attribute itself when it connects.
    */
   _syncBusy() {
-    const busy = this._streamingMessageId() !== null;
+    if (this._frameworkManagedDOM) return;
+    this.setTranscriptBusy(this._streamingMessageId() !== null);
+  }
+  _busy = false;
+  /**
+   * The transcript's read-only-while-streaming flag — `data-busy` on this element and
+   * fanned out to the bubbles it holds. The vanilla path derives it from the
+   * repository (`_syncBusy`); a framework host, whose messages live outside the
+   * repository during a turn, writes it directly from its own streaming id.
+   */
+  setTranscriptBusy(busy) {
+    this._busy = busy;
     this.toggleAttribute("data-busy", busy);
     for (const bubble of this.querySelectorAll("aparte-chat-bubble")) {
       bubble.setTranscriptBusy?.(busy);
@@ -2415,10 +2556,10 @@ class AparteChatViewport extends HTMLElement {
     this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
-  updateSegment(a2, b2, c2) {
+  updateSegment(a4, b2, c2) {
     const clientForm = c2 === void 0 && typeof b2 === "object";
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a4;
+    const segmentId = clientForm ? a4 : b2;
     const updates = clientForm ? b2 : c2;
     if (!messageId) return;
     const message = this._repo.getMessageById(messageId);
@@ -2431,10 +2572,10 @@ class AparteChatViewport extends HTMLElement {
       this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
-  removeSegment(a2, b2) {
+  removeSegment(a4, b2) {
     const clientForm = b2 === void 0;
-    const messageId = clientForm ? this._activeMessageId() : a2;
-    const segmentId = clientForm ? a2 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a4;
+    const segmentId = clientForm ? a4 : b2;
     if (!messageId || !segmentId) return;
     const message = this._repo.getMessageById(messageId);
     if (message?.segments) {
@@ -2529,7 +2670,9 @@ class AparteChatViewport extends HTMLElement {
    * which both records the message and creates its bubble element.
    */
   addMessage(message) {
-    this._repo.addOrUpdateMessage(this._repo.headId, adoptMessageSegments({ ...message }));
+    const stored = adoptMessageSegments({ ...message });
+    if (isAwaitingReply(message)) stored.isStreaming = true;
+    this._repo.addOrUpdateMessage(this._repo.headId, stored);
     this._pruneRenderedBubbles();
     this._syncBusy();
     this._autoScroll();
@@ -2562,6 +2705,7 @@ class AparteChatViewport extends HTMLElement {
         const bubble = document.createElement("aparte-chat-bubble");
         bubble.setAttribute("message-id", message.id);
         bubble.setAttribute("data-role", message.role);
+        if (message.compaction) bubble.setAttribute("data-kind", "compaction");
         if (message.timestamp) bubble.setAttribute("timestamp", String(message.timestamp));
         if (message.content) bubble.setAttribute("content", message.content);
         if (isAwaitingReply(message)) {
@@ -2653,7 +2797,7 @@ class AparteChatViewport extends HTMLElement {
    * Triggers a full re-render of the active path.
    */
   navigateBranch(messageId, direction) {
-    if (this._streamingMessageId() !== null) return;
+    if (this._busy) return;
     const siblings = this._repo.getBranches(messageId);
     const currentIdx = siblings.indexOf(messageId);
     if (currentIdx === -1) return;
@@ -2909,6 +3053,7 @@ class AparteChatViewport extends HTMLElement {
       const bubble = document.createElement("aparte-chat-bubble");
       bubble.setAttribute("message-id", message.id);
       bubble.setAttribute("data-role", message.role);
+      if (message.compaction) bubble.setAttribute("data-kind", "compaction");
       if (message.timestamp) bubble.setAttribute("timestamp", String(message.timestamp));
       if (isAwaitingReply(message)) {
         bubble.setAttribute("streaming", "");
@@ -2968,6 +3113,7 @@ class AparteChatViewport extends HTMLElement {
       container.setAttribute("aria-live", "polite");
       container.setAttribute("aria-atomic", "false");
       container.setAttribute("aria-relevant", "additions");
+      this._nameScrollSurface(container);
       const wrapper = document.createElement("div");
       wrapper.className = "aparte-messages-wrapper";
       while (this.firstChild) {
@@ -3013,6 +3159,7 @@ class AparteChatViewport extends HTMLElement {
       return;
     }
     this.classList.add("aparte-viewport--framework");
+    this._nameScrollSurface(this);
     const scrollBtn = document.createElement("button");
     scrollBtn.className = "aparte-btn aparte-btn--surface aparte-btn--circle aparte-btn--lg aparte-scroll-btn aparte-scroll-btn--hidden";
     scrollBtn.setAttribute("type", "button");
@@ -3069,12 +3216,12 @@ class AparteChatViewport extends HTMLElement {
    * 1 run in 6: the rebuild's height churn moved scrollTop within the second after
    * the click, and the click made that look like the reader's).
    */
-  _noteReaderInput = (e2) => {
-    if (e2.type === "keydown" && !this._scrollKeys.has(e2.key)) return;
-    if (e2.type === "pointerdown") {
+  _noteReaderInput = (e) => {
+    if (e.type === "keydown" && !this._scrollKeys.has(e.key)) return;
+    if (e.type === "pointerdown") {
       const container = this._container;
       if (!container) return;
-      const { clientX } = e2;
+      const { clientX } = e;
       const rect = container.getBoundingClientRect();
       const rtl = getComputedStyle(container).direction === "rtl";
       const inGutter = rtl ? clientX <= rect.right - container.clientWidth : clientX >= rect.left + container.clientWidth;
@@ -3082,8 +3229,8 @@ class AparteChatViewport extends HTMLElement {
     }
     this._readerInputAt = performance.now();
   };
-  _onBranchNavigate = (e2) => {
-    const evt = e2;
+  _onBranchNavigate = (e) => {
+    const evt = e;
     evt.stopPropagation();
     this.navigateBranch(evt.detail.messageId, evt.detail.direction);
   };
@@ -3149,6 +3296,8 @@ class AparteChatViewport extends HTMLElement {
       this._isAutoScrollEnabled = true;
     } else if (readerWentUp) {
       this._isAutoScrollEnabled = false;
+    } else if (drop > 1 && settlingOurs && this._isAutoScrollEnabled) {
+      this._settleAtBottom();
     }
     this._updateScrollButton();
   }
@@ -3156,7 +3305,7 @@ class AparteChatViewport extends HTMLElement {
     if (!this._container) return;
     this._ownScrollAt = performance.now();
     this._container.scrollTop = this._container.scrollHeight;
-    this._settleAtBottom(4);
+    this._settleAtBottom();
   }
   /**
    * Confirm over the next few frames that we actually reached the bottom.
@@ -3179,19 +3328,38 @@ class AparteChatViewport extends HTMLElement {
    * A BOUNDED retry, not one corrective frame: a single frame lands on the same
    * stale layout and was measured leaving a wider gap than doing nothing. Bounded
    * so it always terminates; re-reads `_isAutoScrollEnabled` every frame so a
-   * reader who scrolls away mid-settle is left alone; stops as soon as the gap is
-   * closed, so the common case costs one frame that does nothing.
+   * reader who scrolls away mid-settle is left alone.
+   *
+   * Bounded by TIME, and it does not stop at the first closed gap — both of those
+   * were the second half of the same bug. It used to be four frames (~64ms on an
+   * idle 60Hz machine) and to return permanently the frame the gap first closed.
+   * A branch swap at the bottom of a long transcript on react-webkit falsified
+   * both at once: the rebuild's scrollable max churned 891 -> 1091 -> 891, the gap
+   * WAS closed for a frame against the tall layout, the chain returned, the height
+   * fell back with WebKit holding `scrollTop` at 720 — and the transcript stood
+   * 171px short with auto-follow still armed. A frame count is a proxy for time
+   * that fails exactly on the slow engine, so the budget is real milliseconds now,
+   * and a closed gap only ends the chain when the window is over. One chain, not
+   * one per call: during a stream every token used to start its own.
    */
-  _settleAtBottom(framesLeft) {
-    if (framesLeft <= 0) return;
-    requestAnimationFrame(() => {
-      if (!this._container || !this._isAutoScrollEnabled) return;
+  _settleAtBottom() {
+    this._settleUntil = performance.now() + this._settleWindowMs;
+    if (this._settleRafId !== null) return;
+    const step = () => {
+      this._settleRafId = null;
+      if (!this.isConnected || !this._container || !this._isAutoScrollEnabled) {
+        this._settleUntil = 0;
+        return;
+      }
       const max = this._container.scrollHeight - this._container.clientHeight;
-      if (max - this._container.scrollTop <= 1) return;
-      this._ownScrollAt = performance.now();
-      this._container.scrollTop = max;
-      this._settleAtBottom(framesLeft - 1);
-    });
+      if (max - this._container.scrollTop > 1) {
+        this._ownScrollAt = performance.now();
+        this._container.scrollTop = max;
+      }
+      if (performance.now() < this._settleUntil) this._settleRafId = requestAnimationFrame(step);
+      else this._settleUntil = 0;
+    };
+    this._settleRafId = requestAnimationFrame(step);
   }
   _smoothScrollToBottom() {
     if (!this._container) return;
@@ -3219,7 +3387,18 @@ class AparteChatViewport extends HTMLElement {
    * whatever a framework's render timing does in between.
    */
   _updateScrollButton() {
-    this._scrollBtn?.classList.toggle("aparte-scroll-btn--hidden", this._isAtBottom());
+    const btn = this._scrollBtn;
+    if (!btn) return;
+    const hidden = this._isAtBottom();
+    if (btn.classList.contains("aparte-scroll-btn--hidden") === hidden && btn.hasAttribute("tabindex") === hidden) return;
+    btn.classList.toggle("aparte-scroll-btn--hidden", hidden);
+    if (hidden) {
+      btn.setAttribute("tabindex", "-1");
+      btn.setAttribute("aria-hidden", "true");
+    } else {
+      btn.removeAttribute("tabindex");
+      btn.removeAttribute("aria-hidden");
+    }
   }
   /**
    * Recalculate the bottom spacer height so the last user message is always
@@ -3315,6 +3494,11 @@ class AparteChatViewport extends HTMLElement {
       cancelAnimationFrame(this._spacerRafId);
       this._spacerRafId = null;
     }
+    if (this._settleRafId !== null) {
+      cancelAnimationFrame(this._settleRafId);
+      this._settleRafId = null;
+    }
+    this._settleUntil = 0;
   }
 }
 if (!customElements.get("aparte-chat-viewport")) {
@@ -3372,8 +3556,8 @@ class AparteComposer extends HTMLElement {
     return resolveConfig(this);
   }
   /** Only OUR config: a change on another chat's instance must not touch us. */
-  _onConfigChangeEvent = (e2) => {
-    const detail = e2.detail;
+  _onConfigChangeEvent = (e) => {
+    const detail = e.detail;
     if (detail?.config && detail.config !== this._cfg) return;
     this._onConfigChange();
   };
@@ -3526,9 +3710,8 @@ class AparteComposer extends HTMLElement {
    * are the user's state and not an action to offer — hiding them would look like
    * losing them; and the toolbar, because switching model still does something.
    *
-   * The send button is the part the PANEL decides, through `mode`. `'submit'` and
-   * `'advance'` keep it; `'none'` says this panel has no act for it and it is not
-   * drawn. That third value is what a panel whose options settle on the first click
+   * The send button is the part the PANEL decides, through `mode`. `'submit'`
+   * keeps it; `'none'` says this panel has no act for it and it is not drawn. That third value is what a panel whose options settle on the first click
    * needs — a single-choice question, an approval — and until it existed such a
    * panel left a permanently disabled button beside options that never routed
    * through it. Flip between them at any time with {@link setPanelSubmitEnabled},
@@ -3631,10 +3814,10 @@ class AparteComposer extends HTMLElement {
   /**
    * Update the send button's state while a panel is active.
    *
-   * `mode` moves with it because both change on the same event — answering the
-   * question you are on can enable the button AND turn it from "advance" into
-   * "submit" (when it was the last one), and two separate calls would flash a
-   * wrong icon between them.
+   * `mode` moves with it because both can change on the same event — opening the
+   * "Other…" field of a panel whose options settle on the click gives the button
+   * an act it did not have — and two separate calls would flash a wrong state
+   * between them.
    */
   setPanelSubmitEnabled(enabled, mode) {
     if (!this._panelActive) return;
@@ -3742,8 +3925,8 @@ class AparteComposer extends HTMLElement {
   /** A window lifecycle event is for THIS composer when neither side is scoped
    *  (single-instance broadcast) or the target ids match (multi-chat page).
    *  Without this filter, streaming in one chat flips every composer's state. */
-  _isForThisComposer(e2) {
-    const evtTargetId = e2.detail?.targetId;
+  _isForThisComposer(e) {
+    const evtTargetId = e.detail?.targetId;
     return !evtTargetId || !this._ownTargetId() || evtTargetId === this._ownTargetId();
   }
   /**
@@ -3786,13 +3969,13 @@ class AparteComposer extends HTMLElement {
     }
     return void 0;
   }
-  _handleMessageStart(e2) {
-    if (!this._isForThisComposer(e2)) return;
+  _handleMessageStart(e) {
+    if (!this._isForThisComposer(e)) return;
     this._streaming = true;
     this._emit("streaming-change", { streaming: true });
   }
-  _handleMessageDone(e2) {
-    if (!this._isForThisComposer(e2)) return;
+  _handleMessageDone(e) {
+    if (!this._isForThisComposer(e)) return;
     this._streaming = false;
     this._emit("streaming-change", { streaming: false });
     if (this._panelActive) this._evictPanel();
@@ -3950,13 +4133,13 @@ class AparteComposerInput extends HTMLElement {
     const value = this.getValue();
     this._getRoot()?.setValue(value);
   }
-  _handleKeydown(e2) {
-    if (e2.isComposing || e2.keyCode === 229) return;
-    if (e2.key !== "Enter") return;
+  _handleKeydown(e) {
+    if (e.isComposing || e.keyCode === 229) return;
+    if (e.key !== "Enter") return;
     const submitOnEnter = this._getRoot()?.submitOnEnter ?? true;
-    const submits = submitOnEnter ? !e2.shiftKey : e2.shiftKey;
+    const submits = submitOnEnter ? !e.shiftKey : e.shiftKey;
     if (submits) {
-      e2.preventDefault();
+      e.preventDefault();
       const root = this._getRoot();
       if (root) {
         if (root.streaming) return;
@@ -3965,7 +4148,7 @@ class AparteComposerInput extends HTMLElement {
         this.dispatchEvent(new CustomEvent("aparte-composer-submit", { bubbles: true }));
       }
     } else {
-      e2.preventDefault();
+      e.preventDefault();
       if (!this._editor?.textContent) return;
       this.ownerDocument?.execCommand("insertLineBreak");
     }
@@ -3976,9 +4159,9 @@ class AparteComposerInput extends HTMLElement {
   _handleBlur() {
     this.classList.remove("aparte-is-focused");
   }
-  _handlePaste(e2) {
-    e2.preventDefault();
-    const cd = e2.clipboardData;
+  _handlePaste(e) {
+    e.preventDefault();
+    const cd = e.clipboardData;
     if (!cd) return;
     const imageFile = Array.from(cd.items).find((i2) => i2.type.startsWith("image/"))?.getAsFile();
     if (imageFile) {
@@ -4128,14 +4311,14 @@ class AparteComposerSend extends HTMLElement {
     this._syncState();
   }
   /**
-   * Panel open: this one button now means "answer", and WHICH answer depends on
-   * where you are in the form.
+   * Panel open: this one button now means "submit the answer".
    *
    * The icon has to move with the meaning: it drew a paper plane while the label
    * already said "Submit", so it read as "send a message" while it meant "answer
-   * this question". And a check on a form with three questions left was just as
-   * wrong — hence a chevron while there is more ahead. The visual is what a user
-   * reads.
+   * this question". It used to draw a chevron too, while a form had questions
+   * ahead, and turn into a "Next" — a second way to do what the panel's chips do,
+   * and a button whose meaning changed under the pointer. It is disabled instead
+   * until every question has an answer, which is what the chips' marks explain.
    */
   _syncPanelState() {
     const panel = this._panel;
@@ -4145,16 +4328,15 @@ class AparteComposerSend extends HTMLElement {
       this._button.disabled = true;
       return;
     }
-    const advancing = panel.mode === "advance";
     this._button.disabled = !panel.submitEnabled;
-    this._button.innerHTML = advancing ? cfg.getIcon("nextBranch") : this._getSubmitIcon();
-    const label = advancing ? cfg.t("elicitationNext") || "Next" : cfg.t("submitButton") || "Submit";
+    this._button.innerHTML = this._getSubmitIcon();
+    const label = cfg.t("submitButton") || "Submit";
     this._button.setAttribute("aria-label", label);
     this._button.setAttribute("title", label);
     this._button.classList.remove("aparte-is-streaming");
   }
-  _handleClick(e2) {
-    e2.preventDefault();
+  _handleClick(e) {
+    e.preventDefault();
     this._getRoot()?.submit();
   }
   _syncState() {
@@ -4241,8 +4423,8 @@ class AparteComposerCancel extends HTMLElement {
     );
     if (root.streaming && this._button) this._button.hidden = false;
   }
-  _handleClick(e2) {
-    e2.preventDefault();
+  _handleClick(e) {
+    e.preventDefault();
     this._getRoot()?.cancel();
   }
   /**
@@ -4299,19 +4481,21 @@ class AparteComposerAttachments extends HTMLElement {
   _render(files) {
     this.hidden = files.length === 0;
     this._revokeUrls();
+    const cfg = resolveConfig(this);
+    const removeLabel = (file) => (cfg.t("removeAttachment") || "Remove {name}").replace("{name}", file.name);
     this.innerHTML = files.map((file) => {
-      const name = this._escape(file.name);
-      const remove = `<button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-thumb__remove" type="button" aria-label="Remove ${name}">${resolveConfig(this).getIcon("close")}</button>`;
+      const name = escapeHtml(file.name);
+      const remove = `<button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-thumb__remove" type="button" aria-label="${escapeAttr(removeLabel(file))}">${cfg.getIcon("close")}</button>`;
       if (file.type.startsWith("image/")) {
         const url = URL.createObjectURL(file);
         this._objectUrls.push(url);
-        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${escapeAttr(name)}"><img class="aparte-thumb__img" src="${escapeAttr(url)}" alt="${escapeAttr(name)}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeAttr(url)}" alt="${name}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
       }
-      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${escapeAttr(name)}"><span class="aparte-thumb__ext">${this._escape(this._ext(file.name))}</span><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._ext(file.name))}</span><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
     }).join("");
     this.querySelectorAll(".aparte-thumb__remove").forEach((btn, i2) => {
-      btn.addEventListener("click", (e2) => {
-        e2.stopPropagation();
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
         const root = this._getRoot();
         if (root) root.removeAttachment(root.attachments[i2]);
       });
@@ -4330,10 +4514,10 @@ class AparteComposerAttachments extends HTMLElement {
         }));
       };
       tile.addEventListener("click", open);
-      tile.addEventListener("keydown", (e2) => {
-        const key = e2.key;
+      tile.addEventListener("keydown", (e) => {
+        const key = e.key;
         if (key !== "Enter" && key !== " ") return;
-        e2.preventDefault();
+        e.preventDefault();
         open();
       });
     });
@@ -4343,9 +4527,6 @@ class AparteComposerAttachments extends HTMLElement {
     const dot = filename.lastIndexOf(".");
     return dot > 0 ? filename.slice(dot + 1).toUpperCase().slice(0, 4) : "FILE";
   }
-  _escape(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-  }
 }
 if (!customElements.get("aparte-composer-attachments")) {
   customElements.define("aparte-composer-attachments", AparteComposerAttachments);
@@ -4443,24 +4624,24 @@ class AparteComposerAddAttachment extends HTMLElement {
   _setupDragDrop() {
     const root = this._getRoot();
     if (!root) return;
-    const prevent = (e2) => {
-      e2.preventDefault();
-      e2.stopPropagation();
+    const prevent = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
     };
-    const onDragOver = (e2) => {
+    const onDragOver = (e) => {
       if (root.disabled) return;
-      prevent(e2);
+      prevent(e);
       root.classList.add("aparte-is-dragover");
     };
-    const onDragLeave = (e2) => {
-      prevent(e2);
+    const onDragLeave = (e) => {
+      prevent(e);
       root.classList.remove("aparte-is-dragover");
     };
-    const onDrop = (e2) => {
-      prevent(e2);
+    const onDrop = (e) => {
+      prevent(e);
       root.classList.remove("aparte-is-dragover");
       if (root.disabled) return;
-      const files = e2.dataTransfer?.files;
+      const files = e.dataTransfer?.files;
       if (files?.length) this._getRoot()?.addAttachments(files);
     };
     root.addEventListener("dragover", onDragOver);
@@ -4591,11 +4772,16 @@ class AparteComposerToolbar extends HTMLElement {
 if (!customElements.get("aparte-composer-toolbar")) {
   customElements.define("aparte-composer-toolbar", AparteComposerToolbar);
 }
+const DAY = 864e5;
+const MENU_GAP = 4;
+const VIEWPORT_MARGIN = 8;
 class AparteConversationList extends HTMLElement {
   _conversations = [];
   _activeId = null;
+  _open = null;
+  _renaming = null;
   static get observedAttributes() {
-    return ["active-id"];
+    return ["active-id", "no-groups"];
   }
   // ─── Lifecycle ────────────────────────────────────────────────────────
   connectedCallback() {
@@ -4605,10 +4791,17 @@ class AparteConversationList extends HTMLElement {
     if (!this.getAttribute("role")) {
       this.setAttribute("role", "navigation");
     }
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("keydown", this._onKeydown);
+    this.addEventListener("focusout", this._onFocusOut);
     this._render();
     window.addEventListener("aparte-config-change", this._onConfigChange);
   }
   disconnectedCallback() {
+    this._closeMenu();
+    this.removeEventListener("click", this._onClick);
+    this.removeEventListener("keydown", this._onKeydown);
+    this.removeEventListener("focusout", this._onFocusOut);
     window.removeEventListener("aparte-config-change", this._onConfigChange);
   }
   attributeChangedCallback(name, oldValue, newValue) {
@@ -4616,15 +4809,18 @@ class AparteConversationList extends HTMLElement {
     if (name === "active-id") {
       this._activeId = newValue;
       this._updateActiveState();
+    } else if (name === "no-groups" && this.isConnected) {
+      this._render();
     }
   }
   /**
-   * Re-render on a locale switch: every row's title fallback and both button
-   * labels come from the locale, so without this the list stayed in the previous
-   * language until something else happened to re-render it. Only OUR config.
+   * Re-render on a locale switch: every row's title fallback, the `⋯` button's name
+   * and the group headings come from the locale, so without this the list stayed in
+   * the previous language until something else happened to re-render it. Only OUR
+   * config.
    */
-  _onConfigChange = (e2) => {
-    const detail = e2.detail;
+  _onConfigChange = (e) => {
+    const detail = e.detail;
     if (detail?.config && detail.config !== resolveConfig(this)) return;
     this._render();
   };
@@ -4639,94 +4835,387 @@ class AparteConversationList extends HTMLElement {
   }
   // ─── Rendering ────────────────────────────────────────────────────────
   _render() {
-    this.innerHTML = this._conversations.map((conv) => this._renderItem(conv)).join("");
-    this._bindEvents();
+    this._closeMenu();
+    this._renaming = null;
+    this.innerHTML = this._groups().map((g2) => this._renderGroup(g2)).join("");
   }
-  _renderItem(conv) {
+  _t(key) {
     const locale = resolveConfig(this).getLocale();
+    return locale[key] ?? APARTE_DEFAULT_LOCALE[key] ?? "";
+  }
+  /**
+   * Pinned first, then the calendar buckets every chat product uses, then a heading
+   * per month (newest first), then whatever carries no date. Flat when nothing is
+   * dated or the host asked for `no-groups`: a heading over the only group would say
+   * nothing.
+   */
+  _groups() {
+    const items = this._conversations;
+    if (this.hasAttribute("no-groups") || !items.some((c2) => typeof c2.updatedAt === "number")) {
+      return [{ key: "all", label: null, items }];
+    }
+    const now = /* @__PURE__ */ new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    const tag = resolveConfig(this).getLocale().tag;
+    const buckets = /* @__PURE__ */ new Map();
+    const push = (key, label, item) => {
+      let g2 = buckets.get(key);
+      if (!g2) {
+        g2 = { key, label, items: [] };
+        buckets.set(key, g2);
+      }
+      g2.items.push(item);
+    };
+    for (const c2 of items) {
+      if (c2.pinnedAt) {
+        push("pinned", this._t("conversationGroupPinned"), c2);
+        continue;
+      }
+      const at = c2.updatedAt;
+      if (typeof at !== "number") {
+        push("undated", null, c2);
+        continue;
+      }
+      if (at >= today) push("today", this._t("conversationGroupToday"), c2);
+      else if (at >= today - DAY) push("yesterday", this._t("conversationGroupYesterday"), c2);
+      else if (at >= today - 7 * DAY) push("week", this._t("conversationGroupWeek"), c2);
+      else if (at >= today - 30 * DAY) push("month", this._t("conversationGroupMonth"), c2);
+      else {
+        const d2 = new Date(at);
+        const sameYear = d2.getFullYear() === now.getFullYear();
+        const raw = new Intl.DateTimeFormat(tag, sameYear ? { month: "long" } : { month: "long", year: "numeric" }).format(d2);
+        const label = raw.charAt(0).toLocaleUpperCase(tag) + raw.slice(1);
+        push(`m-${d2.getFullYear()}-${String(d2.getMonth()).padStart(2, "0")}`, label, c2);
+      }
+    }
+    const fixed = ["pinned", "today", "yesterday", "week", "month"].map((k2) => buckets.get(k2)).filter((g2) => !!g2);
+    const months = [...buckets.keys()].filter((k2) => k2.startsWith("m-")).sort((a4, b2) => b2.localeCompare(a4)).map((k2) => buckets.get(k2));
+    const undated = buckets.get("undated");
+    return [...fixed, ...months, ...undated ? [undated] : []];
+  }
+  _renderGroup(group) {
+    const rows = group.items.map((conv) => this._renderItem(conv)).join("");
+    if (group.label === null) {
+      return `<div class="aparte-conv-group">${rows}</div>`;
+    }
+    const label = escapeHtml(group.label);
+    return `
+<div class="aparte-conv-group" role="group" aria-label="${escapeAttr(group.label)}">
+  <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">${label}</div>
+  ${rows}
+</div>`;
+  }
+  _renderItem(conv) {
     const isActive = conv.id === this._activeId;
-    const isArchived = !!conv.archivedAt;
-    const activeClass = isActive ? " aparte-conv-item--active" : "";
-    const archivedClass = isArchived ? " aparte-conv-item--archived" : "";
-    const escapedId = this._esc(conv.id);
-    const escapedTitle = this._esc(conv.title || locale.newChat);
-    const deleteLabel = this._esc(locale.deleteConversation);
-    const archiveLabel = this._esc(locale["archiveConversation"] ?? "Archive conversation");
-    const unarchiveLabel = this._esc(locale["unarchiveConversation"] ?? "Unarchive conversation");
-    const archiveAction = isArchived ? "unarchive" : "archive";
-    const archiveAriaLabel = isArchived ? unarchiveLabel : archiveLabel;
-    const archiveGlyph = resolveConfig(this).getIcon(isArchived ? "unarchive" : "archive");
+    const classes = [
+      "aparte-menu__item aparte-conv-item",
+      isActive ? "aparte-conv-item--active" : "",
+      conv.archivedAt ? "aparte-conv-item--archived" : "",
+      conv.pinnedAt ? "aparte-conv-item--pinned" : ""
+    ].filter(Boolean).join(" ");
+    const escapedId = escapeAttr(conv.id);
+    const title = escapeHtml(conv.title || this._t("newChat"));
+    const actionsLabel = escapeAttr(this._t("conversationActions"));
+    const moreGlyph = resolveConfig(this).getIcon("more");
     return `
-<div
-  class="aparte-menu__item aparte-conv-item${activeClass}${archivedClass}"
-  role="button"
-  tabindex="0"
-  data-conv-id="${escapedId}"
-  aria-current="${isActive ? "page" : "false"}"
->
-  <span class="aparte-conv-item__title">${escapedTitle}</span>
+<div class="${escapeAttr(classes)}" data-conv-id="${escapedId}">
   <button
-    class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-conv-item__archive"
+    class="aparte-conv-item__select"
     type="button"
-    data-archive-id="${escapedId}"
-    data-archive-action="${escapeAttr(archiveAction)}"
-    aria-label="${escapeAttr(archiveAriaLabel)}"
-    tabindex="0"
-  >${archiveGlyph}</button>
+    data-select-id="${escapedId}"
+    aria-current="${isActive ? "page" : "false"}"
+  ><span class="aparte-conv-item__title">${title}</span></button>
   <button
-    class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-conv-item__delete"
+    class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-conv-item__more"
     type="button"
-    data-delete-id="${escapedId}"
-    aria-label="${deleteLabel}"
-    tabindex="0"
-  >
-    ${resolveConfig(this).getIcon("close")}
-  </button>
+    data-more-id="${escapedId}"
+    aria-label="${actionsLabel}"
+    title="${actionsLabel}"
+    aria-haspopup="menu"
+    aria-expanded="false"
+  >${moreGlyph}</button>
 </div>`;
   }
-  _bindEvents() {
-    this.addEventListener("click", this._onClick);
-    this.addEventListener("keydown", this._onKeydown);
+  // ─── The row's menu ───────────────────────────────────────────────────
+  _menuMarkup(conv) {
+    const config = resolveConfig(this);
+    const editGlyph = config.getIcon("edit");
+    const pinGlyph = config.getIcon("pin");
+    const archiveGlyph = config.getIcon(conv.archivedAt ? "unarchive" : "archive");
+    const trashGlyph = config.getIcon("trash");
+    const rename = escapeHtml(this._t("renameConversation"));
+    const pin = escapeHtml(this._t(conv.pinnedAt ? "unpinConversation" : "pinConversation"));
+    const archive = escapeHtml(this._t(conv.archivedAt ? "unarchiveConversation" : "archiveConversation"));
+    const remove = escapeHtml(this._t("deleteConversation"));
+    return `
+<button type="button" class="aparte-menu__item" role="menuitem" data-menu-action="rename">${editGlyph}<span>${rename}</span></button>
+<button type="button" class="aparte-menu__item" role="menuitem" data-menu-action="pin">${pinGlyph}<span>${pin}</span></button>
+<button type="button" class="aparte-menu__item" role="menuitem" data-menu-action="archive">${archiveGlyph}<span>${archive}</span></button>
+<div class="aparte-menu__separator" role="separator"></div>
+<button type="button" class="aparte-menu__item aparte-conv-menu__item--danger" role="menuitem" data-menu-action="delete">${trashGlyph}<span>${remove}</span></button>`;
+  }
+  _confirmMarkup(conv) {
+    const question = escapeHtml(this._t("deleteConversationConfirm").replace("{title}", conv.title || this._t("newChat")));
+    const cancel = escapeHtml(this._t("cancel"));
+    const remove = escapeHtml(this._t("deleteConversation"));
+    return `
+<div class="aparte-conv-menu__confirm" role="group" aria-label="${escapeAttr(question)}">
+  <p class="aparte-conv-menu__question">${question}</p>
+  <div class="aparte-conv-menu__actions">
+    <button type="button" class="aparte-btn aparte-btn--sm aparte-btn--ghost" data-menu-action="cancel">${cancel}</button>
+    <button type="button" class="aparte-btn aparte-btn--sm aparte-btn--danger aparte-btn--solid" data-menu-action="confirm-delete">${remove}</button>
+  </div>
+</div>`;
   }
-  _onClick = (e2) => {
-    const target = e2.target;
-    const archiveBtn = target.closest("[data-archive-id]");
-    if (archiveBtn) {
-      e2.stopPropagation();
-      const id = archiveBtn.dataset["archiveId"];
-      const action = archiveBtn.dataset["archiveAction"];
-      const eventName = action === "unarchive" ? "aparte-unarchive-conversation" : "aparte-archive-conversation";
-      this.dispatchEvent(new CustomEvent(
-        eventName,
-        { detail: { id }, bubbles: true, composed: true }
-      ));
+  _openMenu(row, button) {
+    this._closeMenu();
+    const id = row.dataset["convId"];
+    const conv = this._conversations.find((c2) => c2.id === id);
+    if (!conv) return;
+    const menu = document.createElement("div");
+    menu.className = "aparte-menu aparte-conv-menu";
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", conv.title || this._t("newChat"));
+    menu.innerHTML = this._menuMarkup(conv);
+    row.appendChild(menu);
+    button.setAttribute("aria-expanded", "true");
+    this._open = { id, row, button, menu };
+    this._placeMenu(button, menu);
+    menu.querySelector('[role="menuitem"]')?.focus();
+    document.addEventListener("pointerdown", this._onDocumentPointerDown, true);
+    window.addEventListener("scroll", this._onWindowScroll, true);
+    window.addEventListener("resize", this._onWindowScroll);
+  }
+  /**
+   * Fixed, below the button's end edge, flipped above it when the viewport ends
+   * first. Fixed rather than absolute because a sidebar scrolls: an absolute menu on
+   * the last rows would be clipped by the list's own overflow. No anchoring library —
+   * the menu closes on any scroll or resize, which is what makes the arithmetic
+   * safe to do once.
+   */
+  _placeMenu(button, menu) {
+    const r = button.getBoundingClientRect();
+    const m2 = menu.getBoundingClientRect();
+    let top = r.bottom + MENU_GAP;
+    if (top + m2.height > window.innerHeight - VIEWPORT_MARGIN && r.top - m2.height - MENU_GAP >= VIEWPORT_MARGIN) {
+      top = r.top - m2.height - MENU_GAP;
+    }
+    const rtl = getComputedStyle(this).direction === "rtl";
+    let left = rtl ? r.left : r.right - m2.width;
+    left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - m2.width - VIEWPORT_MARGIN));
+    menu.style.top = `${top}px`;
+    menu.style.left = `${left}px`;
+  }
+  _closeMenu(returnFocus = false) {
+    const open = this._open;
+    if (!open) return;
+    this._open = null;
+    open.menu.remove();
+    open.button.setAttribute("aria-expanded", "false");
+    document.removeEventListener("pointerdown", this._onDocumentPointerDown, true);
+    window.removeEventListener("scroll", this._onWindowScroll, true);
+    window.removeEventListener("resize", this._onWindowScroll);
+    if (returnFocus && open.button.isConnected) open.button.focus();
+  }
+  _onDocumentPointerDown = (e) => {
+    const open = this._open;
+    if (!open) return;
+    const target = e.target;
+    if (open.menu.contains(target) || open.button.contains(target)) return;
+    this._closeMenu();
+  };
+  _onWindowScroll = () => {
+    this._closeMenu();
+  };
+  _onFocusOut = (e) => {
+    const open = this._open;
+    if (!open) return;
+    const next = e.relatedTarget;
+    if (next && (open.menu.contains(next) || open.button.contains(next))) return;
+    if (open.menu.contains(e.target)) this._closeMenu();
+  };
+  _onMenuAction(action) {
+    const open = this._open;
+    if (!open) return;
+    const conv = this._conversations.find((c2) => c2.id === open.id);
+    if (!conv) {
+      this._closeMenu();
       return;
     }
-    const deleteBtn = target.closest("[data-delete-id]");
-    if (deleteBtn) {
-      e2.stopPropagation();
-      const id = deleteBtn.dataset["deleteId"];
+    const id = conv.id;
+    switch (action) {
+      case "rename":
+        this._closeMenu();
+        this._startRename(open.row, conv);
+        return;
+      // The two toggles dispatch each name as a LITERAL, in its own branch: the
+      // manifest analyzer records a dispatch whose name is a ternary as an event
+      // with no name (the Angular generator then crashes on it), and one whose
+      // name is a local as an event called after the local.
+      case "pin":
+        this._closeMenu(true);
+        if (conv.pinnedAt) {
+          this.dispatchEvent(new CustomEvent(
+            "aparte-unpin-conversation",
+            { detail: { id }, bubbles: true, composed: true }
+          ));
+        } else {
+          this.dispatchEvent(new CustomEvent(
+            "aparte-pin-conversation",
+            { detail: { id }, bubbles: true, composed: true }
+          ));
+        }
+        return;
+      case "archive":
+        this._closeMenu(true);
+        if (conv.archivedAt) {
+          this.dispatchEvent(new CustomEvent(
+            "aparte-unarchive-conversation",
+            { detail: { id }, bubbles: true, composed: true }
+          ));
+        } else {
+          this.dispatchEvent(new CustomEvent(
+            "aparte-archive-conversation",
+            { detail: { id }, bubbles: true, composed: true }
+          ));
+        }
+        return;
+      case "delete":
+        open.menu.innerHTML = this._confirmMarkup(conv);
+        this._placeMenu(open.button, open.menu);
+        open.menu.querySelector('[data-menu-action="cancel"]')?.focus();
+        return;
+      case "cancel":
+        this._closeMenu(true);
+        return;
+      case "confirm-delete":
+        this._closeMenu(true);
+        this.dispatchEvent(new CustomEvent(
+          "aparte-delete-conversation",
+          { detail: { id }, bubbles: true, composed: true }
+        ));
+        return;
+    }
+  }
+  _menuFocusables() {
+    const open = this._open;
+    if (!open) return [];
+    return Array.from(open.menu.querySelectorAll('[role="menuitem"], [data-menu-action]'));
+  }
+  _onMenuKeydown(e) {
+    const items = this._menuFocusables();
+    const index = items.indexOf(document.activeElement);
+    const focusAt = (i2) => {
+      e.preventDefault();
+      items[(i2 + items.length) % items.length]?.focus();
+    };
+    switch (e.key) {
+      case "Escape":
+        e.preventDefault();
+        this._closeMenu(true);
+        return;
+      case "Tab":
+        e.preventDefault();
+        this._closeMenu(true);
+        return;
+      case "ArrowDown":
+        focusAt(index + 1);
+        return;
+      case "ArrowUp":
+        focusAt(index - 1);
+        return;
+      case "Home":
+        focusAt(0);
+        return;
+      case "End":
+        focusAt(items.length - 1);
+        return;
+    }
+  }
+  // ─── Rename ───────────────────────────────────────────────────────────
+  _startRename(row, conv) {
+    const select = row.querySelector(".aparte-conv-item__select");
+    if (!select) return;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "aparte-field aparte-field--sm aparte-conv-item__input";
+    input.value = conv.title;
+    input.setAttribute("aria-label", this._t("conversationTitle"));
+    input.dataset["renameId"] = conv.id;
+    select.replaceWith(input);
+    this._renaming = { id: conv.id, input, done: false };
+    input.addEventListener("blur", () => this._finishRename(true, false));
+    input.focus();
+    input.select();
+  }
+  /**
+   * One exit for the three ways out (Enter, Escape, leaving the field), guarded so
+   * the blur a removal causes cannot commit a second time. The row is re-rendered
+   * from the array either way: the list shows data, and the host's re-assignment is
+   * what makes the new title appear.
+   */
+  _finishRename(commit, viaKeyboard) {
+    const renaming = this._renaming;
+    if (!renaming || renaming.done) return;
+    renaming.done = true;
+    const conv = this._conversations.find((c2) => c2.id === renaming.id);
+    const title = renaming.input.value.trim();
+    this._render();
+    if (viaKeyboard) {
+      this.querySelector(`[data-select-id="${cssEscape(renaming.id)}"]`)?.focus();
+    }
+    if (commit && conv && title && title !== conv.title) {
       this.dispatchEvent(new CustomEvent(
-        "aparte-delete-conversation",
-        { detail: { id }, bubbles: true, composed: true }
+        "aparte-rename-conversation",
+        { detail: { id: conv.id, title }, bubbles: true, composed: true }
       ));
+    }
+  }
+  // ─── Events ───────────────────────────────────────────────────────────
+  _onClick = (e) => {
+    const target = e.target;
+    const menuAction = target.closest("[data-menu-action]");
+    if (menuAction && this._open?.menu.contains(menuAction)) {
+      e.stopPropagation();
+      this._onMenuAction(menuAction.dataset["menuAction"]);
+      return;
+    }
+    const more = target.closest("[data-more-id]");
+    if (more) {
+      e.stopPropagation();
+      if (this._open?.button === more) {
+        this._closeMenu(true);
+      } else {
+        this._openMenu(more.closest("[data-conv-id]"), more);
+      }
       return;
     }
-    const item = target.closest("[data-conv-id]");
-    if (item) {
-      const id = item.dataset["convId"];
+    if (target.closest("[data-rename-id]")) return;
+    const select = target.closest("[data-select-id]");
+    if (select) {
+      this._closeMenu();
       this.dispatchEvent(new CustomEvent(
         "aparte-select-conversation",
-        { detail: { id }, bubbles: true, composed: true }
+        { detail: { id: select.dataset["selectId"] }, bubbles: true, composed: true }
       ));
     }
   };
-  _onKeydown = (e2) => {
-    if (e2.key !== "Enter" && e2.key !== " ") return;
-    const target = e2.target;
-    if (!target.matches("[data-conv-id]")) return;
-    e2.preventDefault();
-    target.click();
+  _onKeydown = (e) => {
+    const target = e.target;
+    if (this._open?.menu.contains(target)) {
+      this._onMenuKeydown(e);
+      return;
+    }
+    if (target.matches("[data-rename-id]")) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this._finishRename(true, true);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this._finishRename(false, true);
+      }
+      return;
+    }
   };
   /** Update active class without full re-render (perf optimisation). */
   _updateActiveState() {
@@ -4734,13 +5223,9 @@ class AparteConversationList extends HTMLElement {
     items.forEach((el2) => {
       const isActive = el2.dataset["convId"] === this._activeId;
       el2.classList.toggle("aparte-conv-item--active", isActive);
-      el2.setAttribute("aria-current", isActive ? "page" : "false");
+      el2.querySelector("[data-select-id]")?.setAttribute("aria-current", isActive ? "page" : "false");
     });
   }
-  // ─── Helpers ──────────────────────────────────────────────────────────
-  _esc(str) {
-    return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#039;");
-  }
 }
 if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
 const isSuggestion = (value) => typeof value === "string" || typeof value === "object" && value !== null && typeof value.label === "string";
@@ -4888,15 +5373,31 @@ const el = (tag, className) => {
   node.className = className;
   return node;
 };
+const SVG_NS = "http://www.w3.org/2000/svg";
+const ringSvg = () => {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "aparte-context__ring");
+  svg.setAttribute("viewBox", "0 0 36 36");
+  for (const part of ["track", "value"]) {
+    const circle = document.createElementNS(SVG_NS, "circle");
+    circle.setAttribute("class", `aparte-context__${part}`);
+    circle.setAttribute("cx", "18");
+    circle.setAttribute("cy", "18");
+    circle.setAttribute("r", "15.5");
+    if (part === "value") circle.setAttribute("pathLength", "100");
+    svg.appendChild(circle);
+  }
+  return svg;
+};
 class AparteContext extends HTMLElement {
   static get observedAttributes() {
-    return ["window", "warn", "danger", "target"];
+    return ["window", "warn", "danger", "target", "variant"];
   }
   _used = null;
   _level = null;
   _compactRequested = false;
-  _onDone = (e2) => {
-    const detail = e2.detail;
+  _onDone = (e) => {
+    const detail = e.detail;
     if (!detail?.usage || !this._isMine(detail.targetId)) return;
     const { usage } = detail;
     this._used = usage.totalTokens ?? usage.inputTokens + usage.outputTokens;
@@ -4905,16 +5406,24 @@ class AparteContext extends HTMLElement {
   /**
    * After a real compaction the context is smaller by an amount nobody has measured
    * yet — the next turn's usage will say. Until then the gauge shows nothing rather
-   * than a number it knows to be wrong. (`aparte-compact-done` names no chat: on a
-   * multi-chat page every gauge resets, and each is right again one turn later.)
+   * than a number it knows to be wrong. The event names the chat it compacted, so on a
+   * multi-chat page only that chat's gauge resets; an unnamed one resets every gauge,
+   * and each is right again one turn later.
    */
-  _onCompacted = (e2) => {
-    const detail = e2.detail;
+  _onCompacted = (e) => {
+    const detail = e.detail;
+    if (!this._isMine(detail?.targetId)) return;
+    this._compactRequested = false;
     if (detail?.skipped) return;
     this._used = null;
-    this._compactRequested = false;
     this._render();
   };
+  /** A failed compaction spends the request too; the next `danger` asks again. */
+  _onCompactError = (e) => {
+    const detail = e.detail;
+    if (!this._isMine(detail?.targetId)) return;
+    this._compactRequested = false;
+  };
   _onRerender = () => this._render();
   /** Tokens the last turn reported, or `null` before the first turn. */
   get used() {
@@ -4931,12 +5440,14 @@ class AparteContext extends HTMLElement {
   connectedCallback() {
     window.addEventListener("aparte-message-done", this._onDone);
     window.addEventListener("aparte-compact-done", this._onCompacted);
+    window.addEventListener("aparte-compact-error", this._onCompactError);
     window.addEventListener("aparte-config-change", this._onRerender);
     this._render();
   }
   disconnectedCallback() {
     window.removeEventListener("aparte-message-done", this._onDone);
     window.removeEventListener("aparte-compact-done", this._onCompacted);
+    window.removeEventListener("aparte-compact-error", this._onCompactError);
     window.removeEventListener("aparte-config-change", this._onRerender);
   }
   attributeChangedCallback() {
@@ -4980,58 +5491,1345 @@ class AparteContext extends HTMLElement {
     const danger = fraction(this.getAttribute("danger"), 0.9);
     const level = ratio >= danger ? "danger" : ratio >= warn ? "warn" : "ok";
     this.setAttribute("data-level", level);
-    let bar = this.querySelector(".aparte-progress");
+    const ring = this.getAttribute("variant") === "ring";
+    let root = this.querySelector(".aparte-context");
+    if (root && root.classList.contains("aparte-context--ring") !== ring) {
+      this.replaceChildren();
+      root = null;
+    }
+    let meter = this.querySelector('[role="meter"]');
     let text = this.querySelector(".aparte-context__text");
-    if (!bar || !text) {
-      const root = el("div", "aparte-context");
-      bar = el("div", "aparte-progress");
-      bar.setAttribute("role", "meter");
-      bar.appendChild(el("div", "aparte-progress__bar"));
+    if (!root || !meter || !text) {
+      root = el("div", ring ? "aparte-context aparte-context--ring" : "aparte-context");
+      meter = ring ? ringSvg() : el("div", "aparte-progress");
+      meter.setAttribute("role", "meter");
+      if (!ring) meter.appendChild(el("div", "aparte-progress__bar"));
       text = el("span", "aparte-context__text");
-      root.append(bar, text);
+      root.append(meter, text);
       this.replaceChildren(root);
     }
-    const format = new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 1 });
+    const cfg = resolveConfig(this);
+    const tag = cfg.getLocale().tag || void 0;
+    const format = new Intl.NumberFormat(tag, { notation: "compact", maximumFractionDigits: 1 });
     const reading = `${format.format(used)} / ${format.format(capacity)}`;
-    const label = resolveConfig(this).t("contextLabel") || "Context window";
-    bar.style.setProperty("--aparte-progress-value", String(Math.round(ratio * 100)));
-    bar.setAttribute("aria-valuemin", "0");
-    bar.setAttribute("aria-valuemax", String(capacity));
-    bar.setAttribute("aria-valuenow", String(used));
-    bar.setAttribute("aria-label", `${label}: ${reading}`);
-    text.textContent = reading;
+    const percent = Math.round(ratio * 100);
+    const label = cfg.t("contextLabel") || "Context window";
+    if (ring) {
+      const value = meter.querySelector(".aparte-context__value");
+      value?.style.setProperty("--aparte-context-ratio", String(percent));
+      value?.classList.toggle("aparte-context__value--empty", percent === 0);
+      root.title = reading;
+    } else {
+      meter.style.setProperty("--aparte-progress-value", String(percent));
+    }
+    meter.setAttribute("aria-valuemin", "0");
+    meter.setAttribute("aria-valuemax", String(capacity));
+    meter.setAttribute("aria-valuenow", String(used));
+    meter.setAttribute("aria-label", `${label}: ${reading}`);
+    text.textContent = ring ? new Intl.NumberFormat(tag, { style: "percent", maximumFractionDigits: 0 }).format(percent / 100) : reading;
     if (level !== this._level) {
       this._level = level;
       const targetId = this._ownTargetId();
       const detail = { level, used, window: capacity, ratio, targetId };
       this.dispatchEvent(new CustomEvent("aparte-context-threshold", { detail, bubbles: true, composed: true }));
-      if (level === "danger" && this.hasAttribute("auto-compact") && !this._compactRequested) {
-        this._compactRequested = true;
-        window.dispatchEvent(new CustomEvent("aparte-compact", { detail: { targetId } }));
-      }
       if (level !== "danger") this._compactRequested = false;
     }
+    if (level === "danger" && this.hasAttribute("auto-compact") && !this._compactRequested) {
+      this._compactRequested = true;
+      window.dispatchEvent(new CustomEvent("aparte-compact", { detail: { targetId: this._ownTargetId() } }));
+    }
   }
 }
 if (!customElements.get("aparte-context")) {
   customElements.define("aparte-context", AparteContext);
 }
+const EXCERPT_LENGTH = 60;
+class AparteScrollRail extends HTMLElement {
+  static get observedAttributes() {
+    return ["target", "every"];
+  }
+  _host = null;
+  _mutations = null;
+  _intersections = null;
+  _rebuildQueued = false;
+  _currentId = null;
+  /** Visible ratio per message id, from the intersection observer. */
+  _visible = /* @__PURE__ */ new Map();
+  _onConfigChange = () => this._rebuild();
+  /** The id of the message the rail currently marks, or `null`. */
+  get currentMessageId() {
+    return this._currentId;
+  }
+  connectedCallback() {
+    if (!this.classList.contains("aparte-scroll-rail")) this.classList.add("aparte-scroll-rail");
+    if (!this.getAttribute("role")) this.setAttribute("role", "navigation");
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("keydown", this._onKeydown);
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+    this._attach();
+  }
+  disconnectedCallback() {
+    this._detach();
+    this.removeEventListener("click", this._onClick);
+    this.removeEventListener("keydown", this._onKeydown);
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
+  }
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (name === "target") this._attach();
+    else this._rebuild();
+  }
+  // ─── Wiring ───────────────────────────────────────────────────────────
+  /** The chat this rail follows: `target`, else the host above it — the gauge's rule. */
+  _findHost() {
+    const target = this.getAttribute("target");
+    if (target) return document.getElementById(target);
+    let node = this.parentElement;
+    while (node) {
+      if (node.tagName.toLowerCase() === "aparte-chat" || node.hasAttribute("data-aparte-chat")) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+  _attach() {
+    this._detach();
+    this._host = this._findHost();
+    if (!this._host) {
+      this._rebuild();
+      return;
+    }
+    if (typeof MutationObserver !== "undefined") {
+      this._mutations = new MutationObserver(() => this._queueRebuild());
+      this._mutations.observe(this._host, { childList: true, subtree: true, characterData: true });
+    }
+    this._rebuild();
+  }
+  _detach() {
+    this._mutations?.disconnect();
+    this._mutations = null;
+    this._intersections?.disconnect();
+    this._intersections = null;
+    this._visible.clear();
+    this._host = null;
+  }
+  /** Coalesce a burst of mutations (a streaming reply is one per token) into one rebuild. */
+  _queueRebuild() {
+    if (this._rebuildQueued) return;
+    this._rebuildQueued = true;
+    requestAnimationFrame(() => {
+      this._rebuildQueued = false;
+      this._rebuild();
+    });
+  }
+  _viewport() {
+    return this._host?.querySelector("aparte-chat-viewport") ?? null;
+  }
+  /** The element that scrolls: the vanilla container, or the viewport itself under a wrapper. */
+  _scrollSurface() {
+    const viewport = this._viewport();
+    if (!viewport) return null;
+    return viewport.querySelector(".aparte-viewport-container") ?? viewport;
+  }
+  _bubbles() {
+    const viewport = this._viewport();
+    if (!viewport) return [];
+    const every = this.getAttribute("every") === "message" ? "message" : "user";
+    const all = Array.from(viewport.querySelectorAll("aparte-chat-bubble[message-id]"));
+    return every === "message" ? all : all.filter((b2) => b2.getAttribute("data-role") === "user");
+  }
+  // ─── Rendering ────────────────────────────────────────────────────────
+  /** The first words of a message, for the tick's name. An excerpt, never a summary. */
+  _excerpt(bubble) {
+    const body = bubble.querySelector(".aparte-message-content") ?? bubble;
+    const text = (body.textContent ?? "").replace(/\s+/g, " ").trim();
+    return text.length > EXCERPT_LENGTH ? `${text.slice(0, EXCERPT_LENGTH - 1).trimEnd()}…` : text;
+  }
+  _tickLabel(bubble) {
+    const locale = resolveConfig(this).getLocale();
+    const role = bubble.getAttribute("data-role") === "user" ? locale.roleNameUser ?? "You" : locale.roleNameAssistant ?? "Assistant";
+    const excerpt = this._excerpt(bubble);
+    return excerpt ? `${role}: ${excerpt}` : role;
+  }
+  _rebuild() {
+    const bubbles = this._bubbles();
+    const locale = resolveConfig(this).getLocale();
+    this.setAttribute("aria-label", locale.scrollRailLabel ?? "Conversation outline");
+    if (bubbles.length < 2) {
+      this.setAttribute("data-empty", "");
+      this.replaceChildren();
+      this._intersections?.disconnect();
+      this._intersections = null;
+      this._visible.clear();
+      this._currentId = null;
+      return;
+    }
+    this.removeAttribute("data-empty");
+    const list = document.createElement("ol");
+    list.className = "aparte-scroll-rail__list";
+    const known = /* @__PURE__ */ new Set();
+    for (const bubble of bubbles) {
+      const id = bubble.getAttribute("message-id");
+      known.add(id);
+      const item = document.createElement("li");
+      const tick = document.createElement("button");
+      tick.type = "button";
+      tick.className = "aparte-scroll-rail__tick";
+      tick.dataset["messageId"] = id;
+      const label = this._tickLabel(bubble);
+      tick.setAttribute("aria-label", label);
+      tick.title = label;
+      if (id === this._currentId) tick.setAttribute("aria-current", "true");
+      item.appendChild(tick);
+      list.appendChild(item);
+    }
+    this.replaceChildren(list);
+    if (this._currentId && !known.has(this._currentId)) this._currentId = null;
+    this._observe(bubbles);
+  }
+  /**
+   * Which tick is current is read, not computed: the scroll surface is the root, and
+   * the bubble with the largest visible share of a reading band near the top wins.
+   * Scroll arithmetic was the alternative, and every scroll-position rule in the
+   * viewport carries a regression note — this one has none to carry.
+   */
+  _observe(bubbles) {
+    this._intersections?.disconnect();
+    this._intersections = null;
+    this._visible.clear();
+    if (typeof IntersectionObserver === "undefined") return;
+    const root = this._scrollSurface();
+    if (!root) return;
+    this._intersections = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const id = entry.target.getAttribute("message-id");
+        if (id) this._visible.set(id, entry.isIntersecting ? entry.intersectionRatio : 0);
+      }
+      this._pickCurrent(bubbles);
+    }, { root, rootMargin: "-15% 0px -55% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] });
+    for (const bubble of bubbles) this._intersections.observe(bubble);
+  }
+  _pickCurrent(bubbles) {
+    let best = null;
+    let bestRatio = 0;
+    for (const bubble of bubbles) {
+      const id = bubble.getAttribute("message-id");
+      const ratio = this._visible.get(id) ?? 0;
+      if (ratio > bestRatio) {
+        bestRatio = ratio;
+        best = id;
+      }
+    }
+    if (best !== null) this._setCurrent(best);
+  }
+  _setCurrent(id) {
+    if (this._currentId === id) return;
+    this._currentId = id;
+    for (const tick of this.querySelectorAll(".aparte-scroll-rail__tick")) {
+      if (tick.dataset["messageId"] === id) tick.setAttribute("aria-current", "true");
+      else tick.removeAttribute("aria-current");
+    }
+  }
+  // ─── Interaction ──────────────────────────────────────────────────────
+  _onClick = (e) => {
+    const tick = e.target.closest(".aparte-scroll-rail__tick");
+    if (!tick || !this.contains(tick)) return;
+    const messageId = tick.dataset["messageId"];
+    if (!messageId) return;
+    this.jumpTo(messageId);
+  };
+  /** The ticks are buttons; the arrows walk them, as in any toolbar. */
+  _onKeydown = (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+    const ticks = Array.from(this.querySelectorAll(".aparte-scroll-rail__tick"));
+    const index = ticks.indexOf(document.activeElement);
+    if (index === -1) return;
+    e.preventDefault();
+    const next = e.key === "Home" ? 0 : e.key === "End" ? ticks.length - 1 : e.key === "ArrowDown" ? Math.min(ticks.length - 1, index + 1) : Math.max(0, index - 1);
+    ticks[next]?.focus();
+  };
+  /**
+   * Scroll the transcript to a message. Announced first, cancelable; then a
+   * `scrollIntoView` on the bubble, smooth unless the reader prefers reduced motion.
+   */
+  jumpTo(messageId) {
+    const announced = this.dispatchEvent(new CustomEvent("aparte-scroll-rail-jump", {
+      detail: { messageId },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+    if (!announced) return;
+    const viewport = this._viewport();
+    const bubble = viewport?.querySelector(`aparte-chat-bubble[message-id="${cssEscape(messageId)}"]`);
+    if (!bubble) return;
+    const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    bubble.scrollIntoView({ block: "start", behavior: reduced ? "auto" : "smooth" });
+    this._setCurrent(messageId);
+  }
+}
+if (!customElements.get("aparte-scroll-rail")) {
+  customElements.define("aparte-scroll-rail", AparteScrollRail);
+}
+const DRAWER_QUERY = "(max-width: 48rem)";
+class AparteSidebar extends HTMLElement {
+  static get observedAttributes() {
+    return ["collapsed", "breakpoint"];
+  }
+  _media = null;
+  _scrim = null;
+  /** The control that last opened the drawer, to hand the focus back to. */
+  _opener = null;
+  _lastCollapsed = null;
+  /**
+   * `connectedCallback` has run and the element knows what its markup asked for.
+   *
+   * Not `isConnected`: during an UPGRADE the element is already in the document, so
+   * `attributeChangedCallback` fires for every authored attribute — connected, and
+   * before `connectedCallback` — which is the ordinary case for a server-rendered
+   * `<aparte-sidebar collapsed>` upgraded when the module loads. Announcing there
+   * tells the host its sidebar just closed when all that happened is that the markup
+   * was read, and says `drawer: false` because the media query has not run yet.
+   */
+  _ready = false;
+  /**
+   * The host (or the markup) asked for the column to be folded, so widening the
+   * window must not unfold it. Only a collapse taken OUTSIDE the drawer state counts:
+   * dismissing an overlay says nothing about what a wide window should show.
+   */
+  _closedByHost = false;
+  /**
+   * `_closedByHost` has been taken from the markup once. A re-parent runs
+   * `connectedCallback` again, and by then `collapsed` may be the BREAKPOINT's own
+   * write — a drawer closes itself on the way in — so reading it back a second time
+   * records the element's own doing as the host's word and the column never reopens.
+   * Like `_initialCaptured` on `<aparte-split>`, it must survive the move.
+   */
+  _hostIntentSeeded = false;
+  /** Raised around `_applyDrawer`'s own writes, so the breakpoint is never read as a host's intent. */
+  _auto = false;
+  /**
+   * The element wrote `inert`/`aria-hidden` and may take them back. A host that inerts
+   * the sidebar behind its own modal wrote them itself, and `_syncHidden` runs on every
+   * breakpoint re-evaluation: without this it would un-inert the page behind the overlay.
+   * Same convention as `_relabel`, which leaves a host-authored `aria-label` alone.
+   */
+  _ownHidden = false;
+  /** Whether the sidebar is collapsed (hidden in the flow, or closed as a drawer). */
+  get collapsed() {
+    return this.hasAttribute("collapsed");
+  }
+  set collapsed(value) {
+    this.toggleAttribute("collapsed", value);
+  }
+  /** True while the window is under the breakpoint and the sidebar is a drawer. */
+  get drawer() {
+    return this.hasAttribute("data-drawer");
+  }
+  connectedCallback() {
+    if (!this.classList.contains("aparte-sidebar")) this.classList.add("aparte-sidebar");
+    if (!this.getAttribute("role")) this.setAttribute("role", "complementary");
+    this._relabel();
+    if (!this._hostIntentSeeded) {
+      this._closedByHost = this.collapsed;
+      this._hostIntentSeeded = true;
+    }
+    this.addEventListener("input", this._onInput);
+    document.addEventListener("keydown", this._onKeydown);
+    document.addEventListener("click", this._onDocumentClick);
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+    this._watchBreakpoint();
+    this._syncHidden();
+    this._lastCollapsed = this.collapsed;
+    this._ready = true;
+  }
+  /**
+   * The drawer's media query, from the `breakpoint` attribute: a length (`48rem`, the
+   * default, or `640px`), or `none` for a column that never becomes a drawer — which
+   * a narrow host that has room for it wants, and a documentation frame needs.
+   */
+  _watchBreakpoint() {
+    this._media?.removeEventListener("change", this._onMediaChange);
+    this._media = null;
+    const attr = (this.getAttribute("breakpoint") ?? "").trim();
+    if (attr === "none") {
+      this._applyDrawer(false);
+      return;
+    }
+    if (typeof matchMedia !== "function") return;
+    const query = attr ? `(max-width: ${attr})` : DRAWER_QUERY;
+    this._media = matchMedia(query);
+    this._media.addEventListener("change", this._onMediaChange);
+    this._applyDrawer(this._media.matches);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("input", this._onInput);
+    document.removeEventListener("keydown", this._onKeydown);
+    document.removeEventListener("click", this._onDocumentClick);
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
+    this._media?.removeEventListener("change", this._onMediaChange);
+    this._media = null;
+    this._ready = false;
+  }
+  attributeChangedCallback(name) {
+    if (!this._ready) return;
+    if (name === "breakpoint") {
+      this._watchBreakpoint();
+      return;
+    }
+    if (name !== "collapsed") return;
+    const collapsed = this.collapsed;
+    if (collapsed === this._lastCollapsed) return;
+    this._lastCollapsed = collapsed;
+    if (!this._auto && !this.drawer) this._closedByHost = collapsed;
+    this._syncScrim();
+    this._syncHidden();
+    if (collapsed && this.drawer && this._opener?.isConnected) {
+      this._opener.focus();
+      this._opener = null;
+    } else if (!collapsed && this.drawer) {
+      this._focusFirst();
+    }
+    this.dispatchEvent(new CustomEvent("aparte-sidebar-toggle", {
+      detail: { collapsed, drawer: this.drawer },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  // ─── Public API ───────────────────────────────────────────────────────
+  /** Open the sidebar. `opener` is the control to hand the focus back to when it closes. */
+  open(opener) {
+    if (opener) this._opener = opener;
+    this.collapsed = false;
+  }
+  close() {
+    this.collapsed = true;
+  }
+  toggle(opener) {
+    if (this.collapsed) this.open(opener);
+    else this.close();
+  }
+  // ─── Drawer ───────────────────────────────────────────────────────────
+  _onMediaChange = (e) => this._applyDrawer(e.matches);
+  /**
+   * Entering the drawer state closes the sidebar: a narrow window that opens on an
+   * overlay covering the chat is the wrong first screen. Leaving it reopens, since
+   * a wide window has room for the column — unless the host had collapsed it before.
+   */
+  _applyDrawer(drawer) {
+    const was = this.drawer;
+    this.toggleAttribute("data-drawer", drawer);
+    this._auto = true;
+    try {
+      if (drawer && !was) this.collapsed = true;
+      else if (!drawer && was && !this._closedByHost) this.collapsed = false;
+    } finally {
+      this._auto = false;
+    }
+    this._syncScrim();
+    this._syncHidden();
+  }
+  /**
+   * A collapsed sidebar is invisible — folded to nothing in the flow, slid off the
+   * screen as a drawer — so it must not keep its tab stops or its place in the
+   * accessibility tree. `inert` covers focus and the pointer, `aria-hidden` covers
+   * the readers that predate it; a browser without `inert` still gets the second.
+   *
+   * It removes only what it wrote. Both are standard global attributes a host sets
+   * itself — inerting the sidebar behind its own modal is the ordinary pattern — and
+   * this runs on every breakpoint re-evaluation, so clearing them unconditionally lets
+   * an unrelated resize re-expose the page under an overlay. Same convention as
+   * `_relabel`, which leaves a host-authored `aria-label` alone.
+   *
+   * Neither is declared `@attr`, and `data-drawer` is not the precedent: a `@attr` on a
+   * STANDARD name displaces the wrappers' own prop for it — React's JSX props are
+   * `Omit<HTMLAttributes, keyof T>`, so declaring `inert` here would retype
+   * `<aparte-sidebar inert={busy}>` out of existence. The class docblock says it in prose.
+   */
+  _syncHidden() {
+    if (this.collapsed) {
+      this.toggleAttribute("inert", true);
+      this.setAttribute("aria-hidden", "true");
+      this._ownHidden = true;
+    } else if (this._ownHidden) {
+      this.removeAttribute("inert");
+      this.removeAttribute("aria-hidden");
+      this._ownHidden = false;
+    }
+  }
+  /**
+   * The drawer covers the page, so the focus has to follow it in — otherwise the next
+   * Tab walks the transcript under the overlay. The host owns the children, so this
+   * takes the first thing that can hold focus and leaves the rest alone; a drawer with
+   * nothing focusable in it keeps the focus where it was, which is the honest outcome.
+   */
+  _focusFirst() {
+    this.querySelector(FOCUSABLE)?.focus();
+  }
+  _syncScrim() {
+    const wanted = this.drawer && !this.collapsed;
+    if (wanted && !this._scrim) {
+      this._scrim = document.createElement("div");
+      this._scrim.className = "aparte-sidebar__scrim";
+      this._scrim.setAttribute("aria-hidden", "true");
+      this._scrim.addEventListener("click", () => this.close());
+      this.appendChild(this._scrim);
+    } else if (!wanted && this._scrim) {
+      this._scrim.remove();
+      this._scrim = null;
+    }
+  }
+  _onKeydown = (e) => {
+    if (e.key === "Escape" && this.drawer && !this.collapsed) {
+      e.preventDefault();
+      this.close();
+    }
+  };
+  /** A `[data-aparte-sidebar-toggle]` anywhere toggles this sidebar — no script in the host. */
+  _onDocumentClick = (e) => {
+    const control = e.target?.closest?.("[data-aparte-sidebar-toggle]");
+    if (!control) return;
+    const named = control.getAttribute("data-aparte-sidebar-toggle");
+    if (named) {
+      if (named !== this.id) return;
+    } else if (nearestSidebar(control) !== this) {
+      return;
+    }
+    this.toggle(control);
+  };
+  // ─── Search ───────────────────────────────────────────────────────────
+  _onInput = (e) => {
+    const input = e.target;
+    if (!input?.matches?.("[data-aparte-sidebar-search]")) return;
+    this.filter(input.value);
+  };
+  /**
+   * Hide the conversation rows whose title does not contain `query`, and the date
+   * groups left empty. Case- and accent-insensitive. An empty query shows everything.
+   */
+  filter(query) {
+    const needle = fold(query);
+    for (const list of this.querySelectorAll("aparte-conversation-list")) {
+      for (const row of list.querySelectorAll("[data-conv-id]")) {
+        const title = row.querySelector(".aparte-conv-item__title")?.textContent ?? row.textContent ?? "";
+        row.hidden = needle !== "" && !fold(title).includes(needle);
+      }
+      for (const group of list.querySelectorAll(".aparte-conv-group")) {
+        group.hidden = needle !== "" && !Array.from(group.querySelectorAll("[data-conv-id]")).some((r) => !r.hidden);
+      }
+    }
+  }
+  // ─── Locale ───────────────────────────────────────────────────────────
+  _onConfigChange = () => this._relabel();
+  _relabel() {
+    if (this.hasAttribute("aria-label") && this.dataset["ownLabel"] !== "locale") return;
+    const locale = resolveConfig(this).getLocale();
+    this.setAttribute("aria-label", locale.sidebarLabel ?? "Conversations");
+    this.dataset["ownLabel"] = "locale";
+  }
+}
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function nearestSidebar(control) {
+  return control.closest("aparte-sidebar") ?? document.querySelector("aparte-sidebar");
+}
+function fold(text) {
+  return text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+if (!customElements.get("aparte-sidebar")) {
+  customElements.define("aparte-sidebar", AparteSidebar);
+}
+function clamp(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return value < min ? min : value > max ? max : value;
+}
+function nextPosition(step) {
+  const start = Number.isFinite(step.startPercent) ? step.startPercent : 0;
+  if (!Number.isFinite(step.containerPx) || step.containerPx <= 0) return clamp(start, 0, 100);
+  const inverted = (!step.vertical && step.rtl) !== (step.primaryEnd === true);
+  const sign = inverted ? -1 : 1;
+  const moved = sign * step.deltaPx * 100 / step.containerPx;
+  return clamp(start + moved, 0, 100);
+}
+function keyDelta(key, shift, rtl, vertical, primaryEnd = false) {
+  if (key === "Home") return -100;
+  if (key === "End") return 100;
+  const step = (shift ? 10 : 1) * (primaryEnd ? -1 : 1);
+  if (vertical) {
+    if (key === "ArrowUp") return -step;
+    if (key === "ArrowDown") return step;
+    return null;
+  }
+  if (key === "ArrowLeft") return rtl ? step : -step;
+  if (key === "ArrowRight") return rtl ? -step : step;
+  return null;
+}
+const STACK_QUERY = "(max-width: 48rem)";
+const DEFAULT_POSITION = 38;
+const SCRIM_RETIRE_MS = 300;
+function toPercent(raw, fallback) {
+  const value = Number.parseFloat(raw ?? "");
+  if (!Number.isFinite(value)) return fallback;
+  return value < 0 ? 0 : value > 100 ? 100 : value;
+}
+class AparteSplit extends HTMLElement {
+  static get observedAttributes() {
+    return ["position", "orientation", "primary", "collapsed", "breakpoint", "pane", "disabled", "label"];
+  }
+  _handle = null;
+  _scrim = null;
+  _media = null;
+  _observer = null;
+  /** The pending `_measureBounds()` from a resize, batched to one per frame. */
+  _measureRafId = null;
+  /** The host size the last resize tick measured, so an unchanged one does nothing. */
+  _observedPx = 0;
+  /** Ids for the panes `aria-controls` names — a counter, the way the primitives do it. */
+  static _paneIdSeq = 0;
+  /** The live position. The attribute holds it only after a commit. */
+  _position = DEFAULT_POSITION;
+  /** What `reset()` — and a double-click on the seam — goes back to. */
+  _initialPosition = DEFAULT_POSITION;
+  /**
+   * `_initialPosition` has been taken from the markup once. A re-parent runs
+   * `connectedCallback` again, and by then the attribute holds the LAST COMMIT, not
+   * what the author wrote: capturing a second time makes a framework re-render, a tab
+   * switch or a drag-and-drop of the panel redefine what "reset" means.
+   */
+  _initialCaptured = false;
+  /** The size the primary pane had before it was collapsed, for the second Enter. */
+  _preCollapsePosition = null;
+  /** Committed values, so a reflection of our own does not read as a host's change. */
+  _lastPosition = null;
+  _lastCollapsed = null;
+  _lastPane = null;
+  /** What an attribute-driven commit blames. Raised around a key that changes state. */
+  _source = "api";
+  /**
+   * `connectedCallback` has run and the element knows what its markup asked for.
+   *
+   * Not `isConnected`: during an UPGRADE the element is already in the document, so
+   * `attributeChangedCallback` fires for every authored attribute — connected, and
+   * before `connectedCallback` — which is the ordinary case for a server-rendered
+   * `<aparte-split position="38">` upgraded when the module loads. Committing there
+   * measures a layout the element has not set up yet (no `data-stacked`, so on a
+   * phone the probe reads the stacked pane and writes `position="84"`), reflects that
+   * over the authored number, and sends it to whatever the host persists.
+   */
+  _ready = false;
+  _dragging = false;
+  _captured = false;
+  /** The gesture actually moved the seam. A press that did not commits nothing. */
+  _moved = false;
+  _pointerId = null;
+  _dragStartPercent = DEFAULT_POSITION;
+  _dragOriginPx = 0;
+  _dragContainerPx = 0;
+  /** A key is down and has moved the seam; its keyup is the commit. */
+  _keying = false;
+  // ─── Properties ───────────────────────────────────────────────────────
+  /** The primary pane's size, as a percentage of the container. Setting it commits. */
+  get position() {
+    return this._position;
+  }
+  set position(value) {
+    const next = toPercent(String(value), this._position);
+    if (this.isConnected && next === this._lastPosition) return;
+    this._position = next;
+    this._setLive(next);
+    if (this.isConnected) this._commit("api");
+  }
+  /** The container's axis: `horizontal` (side by side) or `vertical` (stacked). */
+  get orientation() {
+    return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+  }
+  set orientation(value) {
+    this.setAttribute("orientation", value);
+  }
+  /** Which pane `position` sizes. */
+  get primary() {
+    return this.getAttribute("primary") === "end" ? "end" : "start";
+  }
+  set primary(value) {
+    this.setAttribute("primary", value);
+  }
+  /** The primary pane is folded to its minimum. */
+  get collapsed() {
+    return this.hasAttribute("collapsed");
+  }
+  set collapsed(value) {
+    this.toggleAttribute("collapsed", value);
+  }
+  /** Which pane is shown while the split is stacked. */
+  get pane() {
+    return this.getAttribute("pane") === "end" ? "end" : "start";
+  }
+  set pane(value) {
+    this.setAttribute("pane", value);
+  }
+  /** No drag, no keys, no tab stop. The seam stays drawn. */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttribute("disabled", value);
+  }
+  /**
+   * True while the split is showing one pane. Read-only.
+   *
+   * Both routes into that state count. `data-stacked` is the one this element writes
+   * from its own breakpoint; `.aparte-split--only-start` / `--only-end` are the CSS
+   * route a host takes when it owns its breakpoints and sets `breakpoint="none"`. The
+   * sheet gives the two byte-identical rules, so the element has to read them the same
+   * way — every guard downstream keys on this getter, and a split stacked by the class
+   * alone would measure a one-track grid and commit `position="100"`.
+   */
+  get stacked() {
+    return this.hasAttribute("data-stacked") || this.classList.contains("aparte-split--only-start") || this.classList.contains("aparte-split--only-end");
+  }
+  // ─── Public API ───────────────────────────────────────────────────────
+  /** Fold the primary pane to its minimum, remembering the size it had. */
+  collapse() {
+    this.collapsed = true;
+  }
+  /** Unfold it, back to the size it had before it collapsed. */
+  expand() {
+    this.collapsed = false;
+  }
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+  }
+  /** Show one pane, which only has a visible effect while the split is stacked. */
+  showPane(which) {
+    this.pane = which;
+  }
+  /**
+   * Back to the position the split was FIRST connected with — a re-parent restores
+   * that, it does not redefine it. What a double-click on the seam does.
+   */
+  reset() {
+    this._position = this._initialPosition;
+    this._setLive(this._position);
+    if (this.isConnected) this._commit("api");
+  }
+  // ─── Lifecycle ────────────────────────────────────────────────────────
+  connectedCallback() {
+    if (!this.classList.contains("aparte-split")) this.classList.add("aparte-split");
+    this._handle = this._ensureHandle();
+    const attr = this.getAttribute("position");
+    if (attr !== null) {
+      this._position = toPercent(attr, DEFAULT_POSITION);
+      this._setLive(this._position);
+    } else {
+      this._position = toPercent(
+        getComputedStyle(this).getPropertyValue("--aparte-split-position"),
+        DEFAULT_POSITION
+      );
+    }
+    if (!this._initialCaptured) {
+      this._initialPosition = this._position;
+      this._initialCaptured = true;
+    }
+    if (this.collapsed) {
+      if (this._lastCollapsed !== true) this._preCollapsePosition = this._position;
+      this._position = 0;
+      this._setLive(0);
+    }
+    this._lastPosition = this._position;
+    this._lastCollapsed = this.collapsed;
+    this._lastPane = this.pane;
+    this._stampHandle();
+    this._relabel();
+    this._measureBounds();
+    this._handle.addEventListener("pointerdown", this._onPointerDown);
+    this._handle.addEventListener("dblclick", this._onDoubleClick);
+    this._handle.addEventListener("focusout", this._onFocusOut);
+    this.addEventListener("keydown", this._onKeydown);
+    this.addEventListener("keyup", this._onKeyup);
+    document.addEventListener("click", this._onDocumentClick);
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+    this._watchBreakpoint();
+    this._watchSize();
+    this._ready = true;
+  }
+  disconnectedCallback() {
+    this._handle?.removeEventListener("pointerdown", this._onPointerDown);
+    this._handle?.removeEventListener("dblclick", this._onDoubleClick);
+    this._handle?.removeEventListener("focusout", this._onFocusOut);
+    this.removeEventListener("keydown", this._onKeydown);
+    this.removeEventListener("keyup", this._onKeyup);
+    document.removeEventListener("click", this._onDocumentClick);
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
+    this._releasePointer();
+    this._media?.removeEventListener("change", this._onMediaChange);
+    this._media = null;
+    this._observer?.disconnect();
+    this._observer = null;
+    if (this._measureRafId !== null) {
+      cancelAnimationFrame(this._measureRafId);
+      this._measureRafId = null;
+    }
+    this._removeScrim();
+    this._handle?.removeAttribute("data-dragging");
+    this._dragging = false;
+    this._keying = false;
+    this._ready = false;
+  }
+  attributeChangedCallback(name) {
+    if (!this._ready) return;
+    switch (name) {
+      case "position": {
+        const next = toPercent(this.getAttribute("position"), this._position);
+        if (next === this._lastPosition) return;
+        this._position = next;
+        this._setLive(next);
+        this._commit();
+        return;
+      }
+      case "collapsed": {
+        const collapsed = this.collapsed;
+        if (collapsed === this._lastCollapsed) return;
+        this._lastCollapsed = collapsed;
+        if (collapsed) {
+          this._preCollapsePosition = this._position;
+          this._position = 0;
+        } else {
+          this._position = this._preCollapsePosition ?? this._initialPosition;
+        }
+        this._setLive(this._position);
+        this._commit();
+        return;
+      }
+      case "pane": {
+        const pane = this.pane;
+        if (pane === this._lastPane) return;
+        this._lastPane = pane;
+        this._commit();
+        return;
+      }
+      case "orientation":
+      case "primary":
+        this._stampHandle();
+        this._measureBounds();
+        return;
+      case "disabled":
+        if (this.disabled && this._dragging) this._endDrag("pointer", this._dragStartPercent);
+        this._stampHandle();
+        return;
+      case "breakpoint":
+        this._watchBreakpoint();
+        return;
+      case "label":
+        this._relabel();
+    }
+  }
+  // ─── Structure ────────────────────────────────────────────────────────
+  /**
+   * The seam. An author-written `.aparte-split__handle` is ADOPTED — a second one
+   * would be a second tab stop drawn over the first — otherwise one is inserted
+   * between the first two children, which is where a two-pane grid needs it.
+   *
+   * An adopted one is MOVED there if the author put it elsewhere. The sheet is
+   * positional — three tracks with the seam in the middle, and the stacked rules hide
+   * `:nth-child(1)` / `:nth-child(3)` — so a handle written first would take the
+   * primary pane's track and make stacking hide the wrong child.
+   */
+  _ensureHandle() {
+    const own = Array.from(this.children).find(
+      (child) => child instanceof HTMLElement && child.classList.contains("aparte-split__handle")
+    );
+    if (own) {
+      if (this.children[1] !== own) {
+        const second2 = Array.from(this.children).filter((child) => child !== own)[1] ?? null;
+        this.insertBefore(own, second2);
+      }
+      return own;
+    }
+    const handle = document.createElement("div");
+    handle.className = "aparte-split__handle";
+    const second = this.children[1] ?? null;
+    if (second) this.insertBefore(handle, second);
+    else this.appendChild(handle);
+    return handle;
+  }
+  /** The panes: every element child that is not the seam. */
+  _panes() {
+    return Array.from(this.children).filter(
+      (child) => child instanceof HTMLElement && !child.classList.contains("aparte-split__handle")
+    );
+  }
+  _primaryPane() {
+    const panes = this._panes();
+    return (this.primary === "end" ? panes[panes.length - 1] : panes[0]) ?? null;
+  }
+  /**
+   * The APG's window splitter, plus the two states that take it out of the tab order.
+   *
+   * `aria-orientation` is the INVERSE of `orientation`: the attribute names the
+   * separator's own axis, so a split whose panes sit side by side has a VERTICAL
+   * separator between them.
+   */
+  _stampHandle() {
+    const handle = this._handle;
+    if (!handle) return;
+    handle.setAttribute("role", "separator");
+    handle.setAttribute("aria-orientation", this.orientation === "vertical" ? "horizontal" : "vertical");
+    if (this.disabled || this.stacked) handle.removeAttribute("tabindex");
+    else handle.setAttribute("tabindex", "0");
+    handle.setAttribute("aria-valuenow", String(Math.round(this._achievedPercent())));
+    const pane = this._primaryPane();
+    if (pane) {
+      if (!pane.id) pane.id = `aparte-split-pane-${++AparteSplit._paneIdSeq}`;
+      handle.setAttribute("aria-controls", pane.id);
+    }
+  }
+  // ─── Measurement ──────────────────────────────────────────────────────
+  _measure(el2) {
+    const box = el2.getBoundingClientRect();
+    return this.orientation === "vertical" ? box.height : box.width;
+  }
+  /**
+   * What the pane ACTUALLY got, which is not what was asked for: the CSS clamp between
+   * `--aparte-split-min` and `--aparte-split-max` has the last word, and announcing the
+   * requested value instead is how a splitter comes to tell a screen reader 5% while
+   * the pane sits at 22%. Without layout (jsdom, `display: none`, before first paint)
+   * the request is all there is, so it stands.
+   *
+   * While STACKED there is nothing to read: one pane is `display: none` and the other
+   * spans the single track, so the ratio is 0 or 100 whatever the seam was set to.
+   * Measuring it there is how tapping "Preview" on a phone used to write `position="0"`
+   * into the attribute, the event and the host's storage.
+   */
+  _achievedPercent() {
+    if (this.stacked) return this._position;
+    const total = this._measure(this);
+    const pane = this._primaryPane();
+    if (!pane || !(total > 0)) return this._position;
+    return Math.max(0, Math.min(100, this._measure(pane) / total * 100));
+  }
+  /**
+   * The range the seam can actually reach, written onto the separator: park the pane
+   * at 0% and read it, park it at 100% and read it, put the position back. Two forced
+   * layouts in one synchronous task, so nothing paints in between.
+   *
+   * It also reconciles `aria-valuenow`, because the two have to be one story: the
+   * requested percentage can sit outside the clamped range the probe just announced —
+   * with a `--aparte-split-min` of `20rem`, `position="38"` on a 700px container asks
+   * for 38 and gets ~46 — and a separator whose value is below its own minimum is the
+   * unclamped-announcement bug this probe exists to prevent, just at rest. `_position`
+   * is left alone: it is the REQUESTED value, and `reset()` means it.
+   *
+   * Gated on `!_dragging`: a ResizeObserver tick mid-gesture would move the pane to
+   * both ends under the pointer. Gated on `!stacked` for the reason
+   * `_achievedPercent()` is: a pane that spans everything measures the same at 0% and
+   * at 100%, which would announce a range of one number.
+   */
+  _measureBounds() {
+    const handle = this._handle;
+    if (!handle || this._dragging || this.stacked) return;
+    const pane = this._primaryPane();
+    const total = this._measure(this);
+    if (!pane || !(total > 0)) {
+      handle.setAttribute("aria-valuemin", "0");
+      handle.setAttribute("aria-valuemax", "100");
+      return;
+    }
+    const saved = this.style.getPropertyValue("--aparte-split-position");
+    this.style.setProperty("--aparte-split-position", "0%");
+    const min = this._measure(pane) / total * 100;
+    this.style.setProperty("--aparte-split-position", "100%");
+    const max = this._measure(pane) / total * 100;
+    if (saved) this.style.setProperty("--aparte-split-position", saved);
+    else this.style.removeProperty("--aparte-split-position");
+    handle.setAttribute("aria-valuemin", String(Math.round(min)));
+    handle.setAttribute("aria-valuemax", String(Math.round(max)));
+    handle.setAttribute("aria-valuenow", String(Math.round(this._achievedPercent())));
+  }
+  /**
+   * Re-measure when the container's size changes — and only then. The probe writes the
+   * host's `style` three times, and the reflection is commit-only precisely because a
+   * `MutationObserver({ attributes: true })` (the docs' preview frame has one) reposts
+   * a frame height per mutation, which resizes the split, which re-ticks this observer.
+   * So: ignore a tick that did not move the size, and batch the rest to one per frame.
+   */
+  _watchSize() {
+    if (typeof ResizeObserver !== "function") return;
+    this._observer = new ResizeObserver(() => {
+      const px = this._measure(this);
+      if (Math.abs(px - this._observedPx) <= 1) return;
+      this._observedPx = px;
+      if (this._measureRafId !== null) return;
+      this._measureRafId = requestAnimationFrame(() => {
+        this._measureRafId = null;
+        this._measureBounds();
+      });
+    });
+    this._observer.observe(this);
+  }
+  // ─── The one write, and the one event ─────────────────────────────────
+  _setLive(value) {
+    this.style.setProperty("--aparte-split-position", `${Math.round(value * 1e3) / 1e3}%`);
+  }
+  /**
+   * The commit: reflect, announce, dispatch — once. Everything downstream reads the
+   * ACHIEVED size, so the attribute, `aria-valuenow` and the detail are one number.
+   *
+   * There is no per-frame event on purpose. A bubbling, composed CustomEvent per
+   * pointermove is a reconciler in the drag loop, and no pane in this repo re-lays
+   * itself out in JS — they resize in CSS. The trigger for adding
+   * `aparte-split-resizing` is a consumer whose pane needs a JS measurement mid-drag.
+   */
+  _commit(source = this._source) {
+    const position = Math.round(this._achievedPercent());
+    this._position = position;
+    this._setLive(position);
+    this._lastPosition = position;
+    if (this.getAttribute("position") !== String(position)) this.setAttribute("position", String(position));
+    this._handle?.setAttribute("aria-valuenow", String(position));
+    this.dispatchEvent(
+      new CustomEvent("aparte-split-resize", {
+        detail: {
+          position,
+          collapsed: this.collapsed,
+          stacked: this.stacked,
+          pane: this.pane,
+          orientation: this.orientation,
+          source
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ─── Pointer ──────────────────────────────────────────────────────────
+  /** The computed direction, never `document.dir`: a host can flip one subtree. */
+  _rtl() {
+    return getComputedStyle(this).direction === "rtl";
+  }
+  _onPointerDown = (event) => {
+    if (this.disabled || this.stacked || this._dragging) return;
+    if (event.button > 0) return;
+    event.preventDefault();
+    this._handle?.focus();
+    this._dragging = true;
+    this._captured = false;
+    this._moved = false;
+    this._pointerId = event.pointerId;
+    this._dragStartPercent = this._position;
+    this._dragOriginPx = this.orientation === "vertical" ? event.clientY : event.clientX;
+    this._dragContainerPx = this._measure(this);
+    this._handle?.setAttribute("data-dragging", "");
+    this._addScrim();
+    window.addEventListener("pointermove", this._onPointerMove);
+    window.addEventListener("pointerup", this._onPointerUp);
+    window.addEventListener("pointercancel", this._onPointerCancel);
+  };
+  /**
+   * Only the pointer that started the gesture. On a hybrid device a hovering pen or a
+   * stray touch delivers a `pointermove` with `buttons === 0`, which would otherwise
+   * fall into the release branch below and end someone else's mouse drag.
+   */
+  _isOurPointer(event) {
+    return this._pointerId === null || event.pointerId === this._pointerId;
+  }
+  _onPointerMove = (event) => {
+    if (!this._dragging || !this._isOurPointer(event)) return;
+    if (event.buttons === 0) {
+      this._endDrag("pointer");
+      return;
+    }
+    if (!this._captured && this._pointerId !== null) {
+      this._captured = true;
+      try {
+        this._handle?.setPointerCapture(this._pointerId);
+      } catch {
+      }
+    }
+    const point = this.orientation === "vertical" ? event.clientY : event.clientX;
+    this._position = nextPosition({
+      startPercent: this._dragStartPercent,
+      deltaPx: point - this._dragOriginPx,
+      containerPx: this._dragContainerPx,
+      rtl: this._rtl(),
+      vertical: this.orientation === "vertical",
+      primaryEnd: this.primary === "end"
+    });
+    this._moved = true;
+    this._setLive(this._position);
+  };
+  _onPointerUp = (event) => {
+    if (this._isOurPointer(event)) this._endDrag("pointer");
+  };
+  _onPointerCancel = (event) => {
+    if (this._isOurPointer(event)) this._endDrag("pointer");
+  };
+  _endDrag(source, restore) {
+    if (!this._dragging) return;
+    const moved = this._moved;
+    this._dragging = false;
+    this._moved = false;
+    this._releasePointer();
+    this._handle?.removeAttribute("data-dragging");
+    this._removeScrim(!moved);
+    if (restore !== void 0) {
+      this._position = restore;
+      this._setLive(restore);
+    }
+    if (!moved && restore === void 0) return;
+    this._measureBounds();
+    this._commit(source);
+  }
+  _releasePointer() {
+    window.removeEventListener("pointermove", this._onPointerMove);
+    window.removeEventListener("pointerup", this._onPointerUp);
+    window.removeEventListener("pointercancel", this._onPointerCancel);
+    if (this._captured && this._pointerId !== null) {
+      try {
+        this._handle?.releasePointerCapture(this._pointerId);
+      } catch {
+      }
+    }
+    this._captured = false;
+    this._pointerId = null;
+  }
+  /**
+   * The drag overlay: a fixed, transparent child of the HANDLE, alive for one gesture.
+   * Topmost, so it swallows an iframe pane's hit-testing — the case this exists for —
+   * and paints the drag cursor across the page. A child of the handle rather than of
+   * the body so `click`, and therefore `dblclick`, still dispatches at the handle.
+   */
+  _addScrim() {
+    if (this._scrim || !this._handle) return;
+    const scrim = document.createElement("div");
+    scrim.className = "aparte-split__scrim";
+    scrim.setAttribute("aria-hidden", "true");
+    this._handle.appendChild(scrim);
+    this._scrim = scrim;
+  }
+  /**
+   * Take the overlay off.
+   *
+   * `retire` is the press that never moved — the one a click, and then a double-click,
+   * is built from. Its release happened ON the scrim (nothing captured the pointer
+   * yet), and WebKit works out what a click hit by walking the pointerup target's LIVE
+   * ancestors: take the node out here and that chain is rooted nowhere, so no `click`
+   * fires at all, no `dblclick` follows, and the seam never resets. Chromium and Gecko
+   * resolve the target before dispatch and do not care.
+   *
+   * So a retired scrim goes INERT immediately — `pointer-events: none`, which is what
+   * actually matters, since a full-page overlay left hit-testable is a page dead to the
+   * pointer — and leaves the document a moment later. Not on the next task: a first
+   * measurement removed it there and it still raced the click under a loaded machine
+   * (the trace is in `e2e/tests/layout.spec.ts`). The reference is dropped either way,
+   * so the next press builds its own; an inert one on its way out costs nothing.
+   *
+   * Teardown never retires: `disconnectedCallback` takes the live one out at once.
+   */
+  _removeScrim(retire = false) {
+    const scrim = this._scrim;
+    this._scrim = null;
+    if (!scrim) return;
+    if (!retire) {
+      scrim.remove();
+      return;
+    }
+    scrim.style.pointerEvents = "none";
+    setTimeout(() => scrim.remove(), SCRIM_RETIRE_MS);
+  }
+  _onDoubleClick = () => {
+    if (this.disabled || this.stacked) return;
+    this.reset();
+  };
+  // ─── Keyboard ─────────────────────────────────────────────────────────
+  _onKeydown = (event) => {
+    if (this._dragging && event.key === "Escape") {
+      event.preventDefault();
+      this._endDrag("pointer", this._dragStartPercent);
+      return;
+    }
+    if (this.disabled || this.stacked || event.target !== this._handle) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this._source = "keyboard";
+      try {
+        this.toggleCollapse();
+      } finally {
+        this._source = "api";
+      }
+      return;
+    }
+    const delta = keyDelta(
+      event.key,
+      event.shiftKey,
+      this._rtl(),
+      this.orientation === "vertical",
+      this.primary === "end"
+    );
+    if (delta === null) return;
+    event.preventDefault();
+    this._keying = true;
+    this._position = toPercent(String(this._position + delta), this._position);
+    this._setLive(this._position);
+  };
+  /**
+   * The keyup commits, not the keydown: a held arrow repeats, and one release should
+   * write one attribute and send one event, not thirty.
+   */
+  _onKeyup = (event) => {
+    if (!this._keying || event.target !== this._handle) return;
+    if (keyDelta(event.key, event.shiftKey, this._rtl(), this.orientation === "vertical") === null) return;
+    this._keying = false;
+    this._commit("keyboard");
+  };
+  /**
+   * The other end of a key step. If focus leaves the seam while the key is still down —
+   * alt-tab, a click into a pane, a host moving focus — the keyup never arrives, and
+   * the pane would stay where the keydown put it while the attribute and
+   * `aria-valuenow` kept the old number for good. What is rendered is what commits.
+   */
+  _onFocusOut = () => {
+    if (!this._keying) return;
+    this._keying = false;
+    this._commit("keyboard");
+  };
+  // ─── The breakpoint ───────────────────────────────────────────────────
+  /**
+   * The stacking query, from the `breakpoint` attribute: a length (`48rem`, the
+   * default, or `640px`), or `none` for a split that stays two panes at any width —
+   * which a documentation frame needs and a host with its own breakpoint wants.
+   */
+  _watchBreakpoint() {
+    this._media?.removeEventListener("change", this._onMediaChange);
+    this._media = null;
+    const attr = (this.getAttribute("breakpoint") ?? "").trim();
+    if (attr === "none") {
+      this._applyStacked(false);
+      return;
+    }
+    if (typeof matchMedia !== "function") return;
+    const query = attr ? `(max-width: ${attr})` : STACK_QUERY;
+    this._media = matchMedia(query);
+    this._media.addEventListener("change", this._onMediaChange);
+    this._applyStacked(this._media.matches);
+  }
+  _onMediaChange = (e) => this._applyStacked(e.matches);
+  /**
+   * Entering the stacked state shows the START pane: the chat, never a preview of
+   * nothing — the same judgement that makes the sidebar's drawer enter closed. Unless
+   * the markup already named one, which is an answer to the same question and a better
+   * one. Leaving it restores both panes, and with them the seam and its tab stop.
+   *
+   * `was` is the ATTRIBUTE, not the `stacked` getter: the getter also counts
+   * `.aparte-split--only-*`, the CSS route a host takes when it owns its breakpoints
+   * and sets `breakpoint="none"`. Read through the getter, that mount looks like a
+   * split leaving a stacked state it never entered — and the `pane` the author wrote
+   * is deleted on the way in.
+   */
+  _applyStacked(stacked) {
+    const was = this.hasAttribute("data-stacked");
+    if (stacked && !was && this._dragging) this._endDrag("pointer", this._dragStartPercent);
+    this.toggleAttribute("data-stacked", stacked);
+    if (stacked && !was) {
+      if (!this.hasAttribute("pane")) this.showPane("start");
+    } else if (!stacked && was) {
+      this.removeAttribute("pane");
+    }
+    this._lastPane = this.pane;
+    this._stampHandle();
+    if (stacked !== was) this._measureBounds();
+  }
+  /**
+   * A `[data-aparte-split-pane]` anywhere on the page switches a split's pane, so a
+   * two-button toggle in a header needs no script.
+   *
+   * The value is `start` or `end` — the pane to show. Any other non-empty value names
+   * a split's `id` and TOGGLES that one; empty toggles the nearest split, else the
+   * first on the page. Same shape as `[data-aparte-sidebar-toggle]`.
+   */
+  _onDocumentClick = (e) => {
+    const control = e.target?.closest?.("[data-aparte-split-pane]");
+    if (!control) return;
+    const value = (control.getAttribute("data-aparte-split-pane") ?? "").trim();
+    const which = value === "start" || value === "end" ? value : null;
+    const named = which ? "" : value;
+    if (named) {
+      if (named !== this.id) return;
+    } else if ((control.closest("aparte-split") ?? document.querySelector("aparte-split")) !== this) {
+      return;
+    }
+    this.showPane(which ?? (this.pane === "start" ? "end" : "start"));
+  };
+  // ─── Locale ───────────────────────────────────────────────────────────
+  _onConfigChange = () => this._relabel();
+  /**
+   * The seam's accessible name. A host that wrote its own `aria-label` — or an
+   * `aria-labelledby` pointing at a heading — keeps it: `data-own-label` marks the
+   * one we set, so a language switch replaces ours and never theirs.
+   */
+  _relabel() {
+    const handle = this._handle;
+    if (!handle) return;
+    if (handle.hasAttribute("aria-labelledby")) return;
+    if (handle.hasAttribute("aria-label") && handle.dataset["ownLabel"] !== "locale") return;
+    const locale = resolveConfig(this).getLocale();
+    handle.setAttribute("aria-label", this.getAttribute("label") ?? locale.splitHandleLabel ?? "Resize the panes");
+    handle.dataset["ownLabel"] = "locale";
+  }
+}
+if (!customElements.get("aparte-split")) {
+  customElements.define("aparte-split", AparteSplit);
+}
+const APARTE_ELEMENTS = [
+  // Chat shell + transcript
+  ["aparte-chat", AparteChat],
+  ["aparte-chat-viewport", AparteChatViewport],
+  ["aparte-chat-bubble", AparteChatBubble],
+  ["aparte-chat-status", AparteChatStatus],
+  // Composer and its primitives
+  ["aparte-composer", AparteComposer],
+  ["aparte-composer-input", AparteComposerInput],
+  ["aparte-composer-send", AparteComposerSend],
+  ["aparte-composer-cancel", AparteComposerCancel],
+  ["aparte-composer-attachments", AparteComposerAttachments],
+  ["aparte-composer-add-attachment", AparteComposerAddAttachment],
+  ["aparte-composer-action", AparteComposerAction],
+  ["aparte-composer-toolbar", AparteComposerToolbar],
+  // Standalone components
+  ["aparte-conversation-list", AparteConversationList],
+  ["aparte-elicitation", AparteElicitation],
+  ["aparte-scroll-rail", AparteScrollRail],
+  ["aparte-sidebar", AparteSidebar],
+  ["aparte-split", AparteSplit],
+  ["aparte-suggestions", AparteSuggestions],
+  ["aparte-context", AparteContext],
+  // Primitives
+  ["aparte-select", AparteSelect],
+  ["aparte-option", AparteOption],
+  ["aparte-optgroup", AparteOptgroup],
+  ["aparte-progress-spinner", AparteProgressSpinner],
+  ["aparte-icon", AparteIcon]
+];
 function registerAllComponents() {
-  const _chat = customElements.get("aparte-chat");
-  const _viewport = customElements.get("aparte-chat-viewport");
-  const _bubble = customElements.get("aparte-chat-bubble");
-  const _status = customElements.get("aparte-chat-status");
-  if (!_chat || !_viewport || !_bubble || !_status) {
-    console.warn("[Aparte] Some components may not be registered. Ensure all component files are imported.");
+  const missing = APARTE_ELEMENTS.filter(([tag]) => !customElements.get(tag)).map(([tag]) => tag);
+  if (missing.length > 0) {
+    console.warn(
+      `[aparte] ${missing.length} of ${APARTE_ELEMENTS.length} elements are not registered: ${missing.join(", ")}. Import '@aparte/core' at module scope (not behind a lazy import()), and check that your bundler is honouring the package's sideEffects field.`
+    );
   }
 }
+if (typeof document !== "undefined") installDialogTriggersOnce();
 export {
   A as APARTE_CONFIG_CHANGE,
   a as APARTE_CONVERSATION_SCHEMA_VERSION,
   b as APARTE_DEFAULT_BUBBLE_ACTIONS,
   c as APARTE_DEFAULT_HOST_HANDLERS,
   d as APARTE_DEFAULT_ICON_FALLBACKS,
-  e as APARTE_DEFAULT_LOCALE,
+  APARTE_DEFAULT_LOCALE,
   f as APARTE_DEFAULT_UI_EVENTS,
   g as APARTE_HOST_ATTR,
   h as AparteBackendTransport,
@@ -5064,7 +6862,10 @@ export {
   AparteOptgroup,
   AparteOption,
   AparteProgressSpinner,
+  AparteScrollRail,
   AparteSelect,
+  AparteSidebar,
+  AparteSplit,
   s as AparteStreamParser,
   AparteSuggestions,
   t as aparteGlobalConfig,
@@ -5075,38 +6876,39 @@ export {
   y as collectRendererStyles,
   z as contentToText,
   B as contextConfig,
-  C as createAparteChatHandler,
-  D as createStreamAdapter,
+  copyText,
+  D as createAparteChatHandler,
+  E as createStreamAdapter,
   cssEscape,
-  F as declineDefaultRenderers,
-  G as defaultSanitizer,
-  deriveArtifactKind,
-  H as detachConfig,
+  G as declineDefaultRenderers,
+  H as defaultSanitizer,
+  I as detachConfig,
   escapeAttr,
   escapeHtml,
-  K as filesToAttachments,
-  L as getAllRenderers,
+  L as filesToAttachments,
+  M as getAllRenderers,
   getSegmentRenderer,
   installDefaultRenderersOnce,
+  installDialogTriggersOnce,
   isAwaitingReply,
-  P as isFormatAdapter,
-  Q as isSafeUrl,
-  R as isSegmentSettled,
-  S as parseAparteEventStream,
-  T as parseMarkdownToSegments,
+  R as isFormatAdapter,
+  S as isSafeUrl,
+  T as isSegmentSettled,
+  U as parseAparteEventStream,
+  V as parseMarkdownToSegments,
   populateBubbleFromMessage,
-  V as readableToAsyncIterable,
+  X as readableToAsyncIterable,
   registerAllComponents,
-  W as registerDefaultRenderers,
-  X as registerSegmentRenderer,
-  Y as requestUserInput,
+  Y as registerDefaultRenderers,
+  Z as registerSegmentRenderer,
+  _ as requestUserInput,
   resolveConfig,
   revokeAttachmentUrls,
   runWithConfig,
-  a0 as segmentDuration,
-  a1 as segmentTiming,
+  a2 as segmentDuration,
+  a3 as segmentTiming,
   subscribeConfigChange,
-  a3 as unregisterSegmentRenderer,
+  a5 as unregisterSegmentRenderer,
   uuid
 };
 //# sourceMappingURL=index.js.map