@aparte/core 0.16.7 → 0.16.9

package/dist/index.js

@@ -1,5 +1,8 @@
-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-Dw_DIlQ7.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-Dw_DIlQ7.js";
+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-CApC7K1I.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-CApC7K1I.js";
+function presenceOn(value) {
+  return value === "" ? true : Boolean(value);
+}
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -34,21 +37,13 @@ class AparteOption extends HTMLElement {
     return this.hasAttribute("disabled");
   }
   set disabled(val) {
-    if (val) {
-      this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-    }
+    this.toggleAttribute("disabled", presenceOn(val));
   }
   get selected() {
     return this.hasAttribute("selected");
   }
   set selected(val) {
-    if (val) {
-      this.setAttribute("selected", "");
-    } else {
-      this.removeAttribute("selected");
-    }
+    this.toggleAttribute("selected", presenceOn(val));
   }
   _updateAriaSelected() {
     this.setAttribute("aria-selected", this.selected ? "true" : "false");
@@ -104,18 +99,13 @@ class AparteOptgroup extends HTMLElement {
     return this.hasAttribute("collapsed");
   }
   set collapsed(val) {
-    if (val) {
-      this.setAttribute("collapsed", "");
-    } else {
-      this.removeAttribute("collapsed");
-    }
+    this.toggleAttribute("collapsed", presenceOn(val));
   }
   get loading() {
     return this.hasAttribute("loading");
   }
   set loading(val) {
-    if (val) this.setAttribute("loading", "");
-    else this.removeAttribute("loading");
+    this.toggleAttribute("loading", presenceOn(val));
   }
   _render() {
     if (this.label) {
@@ -152,7 +142,9 @@ class AparteOptgroup extends HTMLElement {
       if (!loader) {
         loader = document.createElement("div");
         loader.className = "aparte-optgroup-loader";
-        loader.innerHTML = '<span class="aparte-spinner-small"></span> Fetching models...';
+        const spinner = document.createElement("span");
+        spinner.className = "aparte-spinner-small";
+        loader.replaceChildren(spinner, ` ${resolveConfig(this).t("loading") || "Loading…"}`);
         this.appendChild(loader);
       }
     } else if (loader) {
@@ -211,14 +203,16 @@ class AparteSelect extends HTMLElement {
   _boundHandleDocumentClick = this._handleDocumentClick.bind(this);
   _boundHandleKeydown = this._handleKeydown.bind(this);
   static get observedAttributes() {
-    return ["value", "placeholder", "disabled", "grouped", "searchable", "open"];
+    return ["value", "placeholder", "disabled", "searchable", "open"];
   }
   connectedCallback() {
     this._value = this.getAttribute("value") || "";
-    this._isOpen = this.hasAttribute("open");
+    const wantsOpen = this.hasAttribute("open") && !this._isOpen;
     this._render();
+    this._applyDisabled();
     this._setupEventListeners();
     this._setupMutationObserver();
+    if (wantsOpen) this._openDropdown();
   }
   disconnectedCallback() {
     this.removeEventListener("click", this._boundHandleOptionClick);
@@ -233,14 +227,19 @@ class AparteSelect extends HTMLElement {
       this._updateTriggerLabel();
     }
     if (name === "open") {
-      this._isOpen = this.hasAttribute("open");
-      if (this._isOpen) {
-        this._dropdown?.removeAttribute("hidden");
-        this._searchInput?.focus();
-      } else {
-        this._dropdown?.setAttribute("hidden", "");
+      const wanted = this.hasAttribute("open");
+      if (wanted !== this._isOpen) {
+        if (wanted) this._openDropdown();
+        else this._closeDropdown();
       }
     }
+    if (name === "placeholder") {
+      this._updateTriggerLabel();
+    }
+    if (name === "disabled") {
+      this._applyDisabled();
+      if (!this.hasAttribute("disabled") && this.hasAttribute("open")) this._openDropdown();
+    }
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Public API
@@ -260,11 +259,7 @@ class AparteSelect extends HTMLElement {
     return this._isOpen;
   }
   set open(val) {
-    if (val) {
-      this.setAttribute("open", "");
-    } else {
-      this.removeAttribute("open");
-    }
+    this.toggleAttribute("open", presenceOn(val));
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Rendering
@@ -281,7 +276,7 @@ class AparteSelect extends HTMLElement {
     const trigger = document.createElement("div");
     trigger.className = "aparte-select-trigger";
     trigger.setAttribute("tabindex", "0");
-    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("role", searchable ? "button" : "combobox");
     trigger.setAttribute("aria-haspopup", "listbox");
     trigger.setAttribute("aria-expanded", "false");
     trigger.setAttribute("aria-label", this.getAttribute("aria-label") || placeholder);
@@ -301,12 +296,17 @@ class AparteSelect extends HTMLElement {
     const dropdown = document.createElement("div");
     dropdown.className = "aparte-select-dropdown";
     dropdown.hidden = !this._isOpen;
+    let searchInput = null;
     if (searchable) {
-      const searchInput = document.createElement("input");
+      searchInput = document.createElement("input");
       searchInput.type = "text";
       searchInput.className = "aparte-select-search";
       searchInput.placeholder = cfg.t("selectSearchPlaceholder") || "Search…";
       searchInput.setAttribute("aria-label", cfg.t("selectSearchLabel") || "Search options");
+      searchInput.setAttribute("role", "combobox");
+      searchInput.setAttribute("aria-haspopup", "listbox");
+      searchInput.setAttribute("aria-autocomplete", "list");
+      searchInput.setAttribute("aria-expanded", String(this._isOpen));
       dropdown.appendChild(searchInput);
     }
     const optionsContainer = document.createElement("div");
@@ -315,6 +315,7 @@ class AparteSelect extends HTMLElement {
     optionsContainer.setAttribute("aria-label", trigger.getAttribute("aria-label") ?? placeholder);
     optionsContainer.id = this.id ? `${this.id}-listbox` : `aparte-listbox-${++AparteSelect._listboxSeq}`;
     trigger.setAttribute("aria-controls", optionsContainer.id);
+    searchInput?.setAttribute("aria-controls", optionsContainer.id);
     slottedChildren.forEach((child) => {
       if (child.tagName === "APARTE-OPTION" || child.tagName === "APARTE-OPTGROUP") {
         optionsContainer.appendChild(child);
@@ -463,6 +464,20 @@ class AparteSelect extends HTMLElement {
     const base = this._activeIndex < 0 ? delta > 0 ? -1 : 0 : this._activeIndex;
     this._setActive(base + delta);
   }
+  /**
+   * The element that holds DOM focus while the list is being driven, and therefore
+   * the one that must carry the combobox state a reader follows: the filter field
+   * when the select is `searchable` (it is focused on open), the trigger otherwise.
+   */
+  _activeHost() {
+    return this._searchInput ?? this._trigger;
+  }
+  /** `aria-expanded` belongs to the combobox — write it wherever the combobox is. */
+  _setExpanded(open) {
+    const flag = String(open);
+    this._trigger?.setAttribute("aria-expanded", flag);
+    this._searchInput?.setAttribute("aria-expanded", flag);
+  }
   /** Highlight the option at `index` (clamped) and point aria-activedescendant at it. */
   _setActive(index) {
     const all = this.querySelectorAll("aparte-option");
@@ -470,7 +485,7 @@ class AparteSelect extends HTMLElement {
     const opts = this._visibleOptions();
     if (opts.length === 0) {
       this._activeIndex = -1;
-      this._trigger?.removeAttribute("aria-activedescendant");
+      this._activeHost()?.removeAttribute("aria-activedescendant");
       return;
     }
     const clamped = Math.max(0, Math.min(index, opts.length - 1));
@@ -478,13 +493,13 @@ class AparteSelect extends HTMLElement {
     const active = opts[clamped];
     if (!active.id) active.id = `aparte-option-${++AparteSelect._optIdSeq}`;
     active.setAttribute("data-active", "");
-    this._trigger?.setAttribute("aria-activedescendant", active.id);
+    this._activeHost()?.setAttribute("aria-activedescendant", active.id);
     active.scrollIntoView?.({ block: "nearest" });
   }
   /** Clear the keyboard highlight (on close). */
   _clearActive() {
     this._activeIndex = -1;
-    this._trigger?.removeAttribute("aria-activedescendant");
+    this._activeHost()?.removeAttribute("aria-activedescendant");
     this.querySelectorAll("aparte-option").forEach((o) => o.removeAttribute("data-active"));
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -498,10 +513,11 @@ class AparteSelect extends HTMLElement {
     }
   }
   _openDropdown() {
+    if (this._isOpen) return;
     if (this.hasAttribute("disabled")) return;
     this._isOpen = true;
     this._dropdown?.removeAttribute("hidden");
-    this._trigger?.setAttribute("aria-expanded", "true");
+    this._setExpanded(true);
     this.setAttribute("open", "");
     this._updatePosition();
     this._searchInput?.focus();
@@ -514,7 +530,7 @@ class AparteSelect extends HTMLElement {
     this._isOpen = false;
     this._clearActive();
     this._dropdown?.setAttribute("hidden", "");
-    this._trigger?.setAttribute("aria-expanded", "false");
+    this._setExpanded(false);
     this.removeAttribute("open");
     this.removeAttribute("position");
     if (this._dropdown) {
@@ -558,6 +574,47 @@ class AparteSelect extends HTMLElement {
     this._emitChange(previousValue);
     this._trigger?.focus();
   }
+  /**
+   * The combobox and its listbox are named by the host's `aria-label`, else by the
+   * placeholder — the same rule the first render applies, re-applied whenever the
+   * placeholder or the selection changes. Written only when different: the mutation
+   * observer watches this subtree.
+   *
+   * A `combobox` is NAMED by that attribute and VALUED by its visible label span, so
+   * the name is the control and nothing else. A `button` — the shape a `searchable`
+   * trigger takes, since the filter field is then the combobox — is named by its
+   * CONTENT, which this very attribute overrides: the searchable trigger announced
+   * "Pick a model, button" and never said which model was selected. So the button's
+   * name carries both halves, and drops the second when it would only repeat the
+   * first (nothing selected: the value IS the placeholder).
+   */
+  _updateNames() {
+    const placeholder = this.getAttribute("placeholder") || "Select...";
+    const name = this.getAttribute("aria-label") || placeholder;
+    const list = this.querySelector(".aparte-select-options");
+    if (list && list.getAttribute("aria-label") !== name) list.setAttribute("aria-label", name);
+    const trigger = this._trigger;
+    if (!trigger) return;
+    const value = this._getSelectedLabel() || placeholder;
+    const wanted = trigger.getAttribute("role") === "button" && value !== name ? `${name}: ${value}` : name;
+    if (trigger.getAttribute("aria-label") !== wanted) trigger.setAttribute("aria-label", wanted);
+  }
+  /**
+   * `disabled` takes the trigger out of the tab order and says so — opacity alone
+   * left it focusable and announced as operable. An open dropdown closes.
+   */
+  _applyDisabled() {
+    const trigger = this._trigger;
+    if (!trigger) return;
+    const disabled = this.hasAttribute("disabled");
+    trigger.setAttribute("tabindex", disabled ? "-1" : "0");
+    if (disabled) {
+      trigger.setAttribute("aria-disabled", "true");
+      if (this._isOpen) this._closeDropdown();
+    } else {
+      trigger.removeAttribute("aria-disabled");
+    }
+  }
   _updateTriggerLabel() {
     const placeholder = this.getAttribute("placeholder") || "Select...";
     const labelText = this._trigger?.querySelector(".aparte-select-label-text");
@@ -577,6 +634,7 @@ class AparteSelect extends HTMLElement {
         }));
       }
     }
+    this._updateNames();
     const options = this.querySelectorAll("aparte-option");
     options.forEach((opt) => {
       const isSelected = opt.getAttribute("value") === this._value;
@@ -895,7 +953,7 @@ if (typeof customElements !== "undefined" && !customElements.get("aparte-elicita
 }
 class AparteChat extends HTMLElement {
   static get observedAttributes() {
-    return ["placeholder", "disabled", "center-empty", "attachments"];
+    return ["placeholder", "disabled", "submit-on-enter", "center-empty", "attachments"];
   }
   _observer = null;
   /**
@@ -908,6 +966,7 @@ class AparteChat extends HTMLElement {
     this._render();
     this._forwardAttr("placeholder");
     this._forwardAttr("disabled");
+    this._forwardAttr("submit-on-enter");
     this._syncEmptyWatch();
   }
   disconnectedCallback() {
@@ -1064,6 +1123,12 @@ class AparteChatBubble extends HTMLElement {
   _editing = false;
   /** The live inline editor (the composer's contenteditable primitive), present only while `_editing`. */
   _editInput = null;
+  /**
+   * The `data-action` of the button the editor was opened from, so leaving it can hand
+   * the keyboard back. The STRING, not the node: entering and leaving edit mode rewrite
+   * the action bar's `innerHTML`, so the opener's identity is destroyed twice.
+   */
+  _editReturnAction = null;
   static get observedAttributes() {
     return ["data-role", "content", "timestamp", "message-id", "streaming", "name"];
   }
@@ -1187,6 +1252,7 @@ class AparteChatBubble extends HTMLElement {
   appendToken(chunk) {
     this._content += chunk;
     this._updateContent();
+    this._syncCopyAction();
   }
   /** Set content directly */
   setContent(content) {
@@ -1194,6 +1260,7 @@ class AparteChatBubble extends HTMLElement {
     this.setAttribute("content", content);
     this._resetMarkdownStream();
     this._updateContent();
+    this._syncCopyAction();
   }
   /**
    * Drop the incremental Markdown parser's state.
@@ -1229,6 +1296,7 @@ class AparteChatBubble extends HTMLElement {
       const updated = mergeSegmentUpdate(this._segments[index], updates);
       this._segments[index] = updated;
       this._applySegmentUpdate(segmentId, updated, updates);
+      this._syncCopyAction();
     }
   }
   /** Append content to a segment */
@@ -1237,6 +1305,7 @@ class AparteChatBubble extends HTMLElement {
     if (segment && "content" in segment) {
       segment.content += content;
       this._applySegmentUpdate(segmentId, segment, { content: segment.content });
+      this._syncCopyAction();
     }
   }
   /** Get all segments */
@@ -1266,6 +1335,7 @@ class AparteChatBubble extends HTMLElement {
     const el2 = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
     el2?.remove();
     this._updateWaiting();
+    this._syncCopyAction();
   }
   /** Set attachments (chips shown above message content, user role only) */
   setAttachments(attachments) {
@@ -1420,7 +1490,7 @@ class AparteChatBubble extends HTMLElement {
           </div>
           <div class="aparte-footer">
             <div class="aparte-branch-picker" hidden>
-              <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-branch-prev" aria-label="${escapeAttr(this._cfg.getLocale().previousResponse ?? "Previous response")}">&#8249;</button>
+              <button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-branch-prev" aria-label="${escapeAttr(this._cfg.getLocale().previousResponse ?? "Previous response")}">${this._cfg.getIcon("prevBranch")}</button>
               <span class="aparte-branch-label">1 / 1</span>
               <!-- The move has to be ANNOUNCED. Pressing the arrows deliberately does not
                    take focus, so without a live region a screen-reader user gets the new
@@ -1429,7 +1499,7 @@ class AparteChatBubble extends HTMLElement {
                    dots, which reads as nothing. No new locale key — the position is
                    digits, and the buttons beside it already carry translated labels. -->
               <span class="aparte-sr-only aparte-branch-status" aria-live="polite"></span>
-              <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-branch-next" aria-label="${escapeAttr(this._cfg.getLocale().nextResponse ?? "Next response")}">&#8250;</button>
+              <button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-branch-next" aria-label="${escapeAttr(this._cfg.getLocale().nextResponse ?? "Next response")}">${this._cfg.getIcon("nextBranch")}</button>
             </div>
             <div class="aparte-action-bar" role="toolbar" aria-label="${escapeAttr(this._cfg.getLocale().messageActions ?? "Message actions")}"></div>
           </div>
@@ -1589,6 +1659,7 @@ class AparteChatBubble extends HTMLElement {
       this._contentEl.style.display = this._segments.length > 0 ? "none" : "";
     }
     this._reflectError();
+    this._syncCopyAction();
   }
   /**
    * Reflect the error state on the bubble: `data-error` on `.aparte-message` while
@@ -1644,16 +1715,16 @@ class AparteChatBubble extends HTMLElement {
     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--image" title="${name}"><img class="aparte-thumbnail__image" 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(a4.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-thumbnail__label">${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) => {
       tile.setAttribute("role", "button");
       tile.setAttribute("tabindex", "0");
       const open = () => {
-        const img = tile.querySelector(".aparte-thumb__img");
+        const img = tile.querySelector(".aparte-thumbnail__image");
         if (!img) return;
         this.dispatchEvent(new CustomEvent("aparte-attachment-preview", {
           bubbles: true,
@@ -1790,6 +1861,27 @@ class AparteChatBubble extends HTMLElement {
   // ─────────────────────────────────────────────────────────────────────────
   // Action Bar
   // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * What the copy action copies: the reply, not the reasoning. A `thinking` segment is
+   * the model's scratchpad, and the client already keeps it out of the history it sends
+   * back (`_segmentsToText`) for the same reason — copying it along with the answer
+   * pasted a paragraph of deliberation above every reply, which no assistant on the
+   * market does. Segments with no `content` (a tool call) contribute nothing, so a
+   * turn made only of those copies as `''` — and the action bar reads this to decide
+   * whether to offer the button at all.
+   */
+  _copyableText() {
+    return (this._content || this._segments.filter((s2) => s2.type !== "thinking").map((s2) => s2.content ?? "").join("\n")).trim();
+  }
+  /**
+   * The copy button is for text. `hidden` rather than removed: the bar is rebuilt
+   * rarely and the text changes on every streamed token, so the button is toggled in
+   * place from each path that changes what a copy would paste.
+   */
+  _syncCopyAction() {
+    const btn = this._actionBarEl?.querySelector(".aparte-action-copy");
+    if (btn) btn.hidden = this._copyableText() === "";
+  }
   _updateActionBar() {
     if (!this._actionBarEl) return;
     if (this._editing) {
@@ -1821,6 +1913,7 @@ class AparteChatBubble extends HTMLElement {
       }
     }
     this._actionBarEl.innerHTML = buttons.join("");
+    this._syncCopyAction();
     this._appendCustomActions(icons);
     this._applyTranscriptBusy();
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
@@ -1912,7 +2005,8 @@ class AparteChatBubble extends HTMLElement {
       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.type = "button";
+      btn.className = "aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-custom";
       btn.dataset["action"] = `custom:${a4.id}`;
       btn.setAttribute("aria-label", a4.label);
       btn.setAttribute("title", a4.label);
@@ -1926,28 +2020,28 @@ class AparteChatBubble extends HTMLElement {
     switch (action) {
       case "copy": {
         const l2 = locale.copy ?? "Copy";
-        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.copy()}</button>`;
+        return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.copy()}</button>`;
       }
       case "edit": {
         const l2 = locale.edit ?? "Edit message";
-        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-edit" data-action="edit" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.edit()}</button>`;
+        return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-edit" data-action="edit" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.edit()}</button>`;
       }
       case "retry": {
         const l2 = locale.retry ?? "Retry";
-        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-retry" data-action="retry" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.retry()}</button>`;
+        return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-retry" data-action="retry" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.retry()}</button>`;
       }
       case "thumbUp": {
         const l2 = locale.feedbackPositive ?? "Good response";
-        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-feedback-pos" data-action="feedback-positive" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbUp()}</button>`;
+        return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-feedback-pos" data-action="feedback-positive" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbUp()}</button>`;
       }
       case "thumbDown": {
         const l2 = locale.feedbackNegative ?? "Bad response";
-        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbDown()}</button>`;
+        return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbDown()}</button>`;
       }
       case "info": {
         if (!this._usage) return "";
         const l2 = locale.messageInfo ?? "Details";
-        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-info" data-action="info" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${this._cfg.getIcon("info")}</button>`;
+        return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-action-btn aparte-action-info" data-action="info" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${this._cfg.getIcon("info")}</button>`;
       }
       default:
         return "";
@@ -1959,7 +2053,7 @@ class AparteChatBubble extends HTMLElement {
     const locale = this._cfg.getLocale();
     const saveLabel = locale.editConfirm ?? "Save";
     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.innerHTML = `<button type="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 type="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", (e) => this._handleActionClick(e));
     });
@@ -1988,7 +2082,7 @@ class AparteChatBubble extends HTMLElement {
     }
     switch (action) {
       case "copy": {
-        const text = this._content || this._segments.filter((s2) => s2.type !== "thinking").map((s2) => s2.content ?? "").join("\n");
+        const text = this._copyableText();
         const icons = this._cfg.getIconProvider();
         const locale = this._cfg.getLocale();
         copyText(text).then(() => {
@@ -2072,6 +2166,8 @@ class AparteChatBubble extends HTMLElement {
    */
   _enterEditMode() {
     if (this._editing || !this._contentEl) return;
+    const opener = document.activeElement;
+    this._editReturnAction = opener instanceof HTMLElement && this.contains(opener) ? opener.getAttribute("data-action") ?? "edit" : null;
     this._editing = true;
     this.querySelector(".aparte-message")?.setAttribute("data-editing", "");
     const input = document.createElement("aparte-composer-input");
@@ -2105,6 +2201,16 @@ class AparteChatBubble extends HTMLElement {
     this.querySelector(".aparte-message")?.removeAttribute("data-editing");
     this._editing = false;
     this._updateActionBar();
+    const returnTo = this._editReturnAction;
+    this._editReturnAction = null;
+    if (returnTo && this._actionBarEl) {
+      const back = Array.from(this._actionBarEl.querySelectorAll("[data-action]")).find((btn) => btn.getAttribute("data-action") === returnTo);
+      const target = back && !back.disabled ? back : this._actionBarEl.querySelector("button:not([disabled])");
+      if (target) {
+        for (const button of this._rovingButtons()) button.tabIndex = button === target ? 0 : -1;
+        target.focus();
+      }
+    }
     if (save && newContent && newContent !== original) {
       const messageId = this.getAttribute("message-id");
       if (messageId) {
@@ -2252,27 +2358,63 @@ class AparteChatStatus extends HTMLElement {
               <span class="aparte-dot"></span>
             </div>
             <span class="aparte-status-text"></span>
+            <span class="aparte-sr-only aparte-status-sr"></span>
           </div>
         </div>
       </div>
     `;
     this.querySelector(".aparte-status-container")?.setAttribute("aria-label", text);
-    if (this.hasAttribute("text")) {
-      const textEl = this.querySelector(".aparte-status-text");
-      if (textEl) textEl.textContent = text;
-    }
+    this._writeText(this.getAttribute("text"));
+  }
+  /**
+   * The one writer for both text nodes, so exactly ONE of them is ever populated.
+   *
+   * The container is a polite live region, and a live region announces its CONTENT.
+   * The dots-only default had none — an `aria-hidden` dot and an empty span — so the
+   * whole state rode on `aria-label`, which names the region rather than reporting it,
+   * and nothing was announced. The screen-reader span carries the fallback word in that
+   * case; when `text` is set the visible span already carries the same string, and
+   * populating both would have the region read it twice.
+   */
+  _writeText(text) {
+    const line = text || null;
+    const textEl = this.querySelector(".aparte-status-text");
+    if (textEl) textEl.textContent = line ?? "";
+    this._syncLiveWord();
+  }
+  /**
+   * The fallback word enters and leaves the live region WITH the element's visibility.
+   *
+   * Writing it at render time put it in the region while the host was still
+   * `display: none` — every wrapper mounts `<aparte-chat-status>` once and flips
+   * `visible` — so by the time the region was exposed its content had not changed, and
+   * on the second and third turn there was not even a reveal to notice: the text was
+   * byte-identical to what was already sitting there. Revealing a region that already
+   * holds its text is the path assistive tech is documented not to announce reliably;
+   * mutating one that is already exposed is the path that works. So the word is written
+   * when `visible` arrives and cleared when it leaves, which makes every turn a real
+   * change.
+   *
+   * With `text` set the visible span is the region's content and the screen-reader span
+   * stays empty — one copy, read once.
+   */
+  _syncLiveWord() {
+    const srEl = this.querySelector(".aparte-status-sr");
+    if (!srEl) return;
+    const dotsOnly = !this.getAttribute("text");
+    srEl.textContent = dotsOnly && this.hasAttribute("visible") ? "Typing" : "";
   }
   _updateVisibility(visible) {
     const container = this.querySelector(".aparte-status-container");
     if (container) {
       container.setAttribute("data-visible", String(visible));
     }
+    this._syncLiveWord();
   }
   _updateText(text) {
-    const textEl = this.querySelector(".aparte-status-text");
     const container = this.querySelector(".aparte-status-container");
     if (!container) return;
-    if (textEl) textEl.textContent = text ?? "";
+    this._writeText(text);
     container.setAttribute("aria-label", text || "Typing");
   }
 }
@@ -2352,6 +2494,8 @@ class AparteChatViewport extends HTMLElement {
   _overlayObserver = null;
   /** Last `--aparte-bottom-inset` written, in px — style writes only when it changes. */
   _overlayInset = -1;
+  /** Last `--aparte-transcript-inset` written on the host, in px — same write-on-change rule. */
+  _transcriptInset = -1;
   _boundResetHandler = null;
   /**
    * When true, _reRenderActivePath() only dispatches aparte-path-changed without
@@ -2372,6 +2516,7 @@ class AparteChatViewport extends HTMLElement {
     this._render();
     this._setupEventListeners();
     this._setupObservers();
+    this._updateTranscriptInset();
     this._boundResetHandler = () => this.clearAll();
     window.addEventListener("aparte-reset", this._boundResetHandler);
     window.addEventListener("aparte-config-change", this._onConfigChange);
@@ -3275,6 +3420,7 @@ class AparteChatViewport extends HTMLElement {
   _setupObservers() {
     this._resizeObserver = new ResizeObserver(() => {
       this._updateOverlayInset();
+      this._updateTranscriptInset();
       if (this._isAutoScrollEnabled) {
         this._scrollToBottom();
       }
@@ -3355,6 +3501,32 @@ class AparteChatViewport extends HTMLElement {
     this._overlayInset = inset;
     this.style.setProperty("--aparte-bottom-inset", `${inset}px`);
   }
+  /**
+   * Publish, on the chat host, how far from the host's inline edge the rows start —
+   * the transcript's padding plus the scrollbar gutter the scroller reserves on both
+   * edges, at whatever step its container query has taken — as
+   * `--aparte-transcript-inset`. The composer pads by it (composer.css), so its box
+   * lands on the row's box at every width. The two used to be independent stacks: the
+   * composer cannot know the gutter and a container query cannot reach it, so they sat
+   * 10px apart at 768 and the gutter's half apart at 1280, and the reading-column demo
+   * showed three left edges 12px apart. Written only when the value changes, for the
+   * same reason `_updateOverlayInset` is. On the HOST, not on this element: the
+   * composer is a sibling, and a custom property only travels down.
+   */
+  _updateTranscriptInset() {
+    const host = this.parentElement;
+    if (!host) return;
+    const ref = this.querySelector(".aparte-messages-wrapper") ?? this._container ?? this;
+    const pad = parseFloat(getComputedStyle(ref).paddingInlineStart) || 0;
+    const rtl = getComputedStyle(host).direction === "rtl";
+    const refRect = ref.getBoundingClientRect();
+    const hostRect = host.getBoundingClientRect();
+    const raw = rtl ? hostRect.right - refRect.right : refRect.left - hostRect.left;
+    const inset = Math.max(0, Math.round((raw + pad) * 10) / 10);
+    if (inset === this._transcriptInset) return;
+    this._transcriptInset = inset;
+    host.style.setProperty("--aparte-transcript-inset", `${inset}px`);
+  }
   /** Is the scroll surface within `_scrollThreshold` of its bottom, right now? */
   _isAtBottom() {
     if (!this._container) return true;
@@ -3617,6 +3789,7 @@ class AparteChatViewport extends HTMLElement {
     this._overlayObserver = null;
     this._overlayRoot = null;
     this._overlayInset = -1;
+    this._transcriptInset = -1;
     this._resizeObserver = null;
     this._mutationObserver = null;
     if (this._spacerRafId !== null) {
@@ -3927,6 +4100,8 @@ class AparteComposer extends HTMLElement {
     onEvict?.();
   }
   _teardownPanel() {
+    const active = document.activeElement;
+    const hadFocus = active instanceof Node && this.contains(active);
     const existing = this.querySelector("[data-aparte-panel]");
     if (existing) existing.remove();
     this.removeAttribute("data-panel-active");
@@ -3938,7 +4113,7 @@ class AparteComposer extends HTMLElement {
     this._panelOnEvict = null;
     this._panelToken = null;
     this._emit("panel-change", { active: false, submitEnabled: false, mode: "submit" });
-    this.focus();
+    if (hadFocus) this.focus();
   }
   /**
    * Update the send button's state while a panel is active.
@@ -4000,7 +4175,14 @@ class AparteComposer extends HTMLElement {
     const detail = {
       content: value,
       timestamp: Date.now(),
-      targetId: this.targetId ?? void 0,
+      /*
+       * `_ownTargetId()`, not the bare attribute — the same resolution `cancel()`
+       * uses, and for the same reason. The wrappers all set `target`, so this is
+       * byte-identical there; in RAW core nothing writes it, so every send carried
+       * `targetId: undefined` and a page with two hand-written chats delivered the
+       * reply to whichever one the host resolved first.
+       */
+      targetId: this._ownTargetId(),
       files: this._attachments.length > 0 ? [...this._attachments] : void 0
     };
     this.dispatchEvent(new CustomEvent("aparte-send", {
@@ -4400,6 +4582,7 @@ class AparteComposerSend extends HTMLElement {
     const root = this._getRoot();
     const disabled = !root || root.disabled || root.value.trim() === "";
     this.innerHTML = `<button
+            type="button"
             class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-btn--icon aparte-cs-button aparte-send-button"
             aria-label="${escapeAttr(label)}"
             title="${escapeAttr(label)}"
@@ -4551,6 +4734,7 @@ class AparteComposerCancel extends HTMLElement {
     const label = resolveConfig(this).t("stopButton") || "Stop";
     const icon = this._getStopIcon();
     this.innerHTML = `<button
+            type="button"
             class="aparte-btn aparte-btn--icon aparte-cc-button"
             aria-label="${escapeAttr(label)}"
             title="${escapeAttr(label)}"
@@ -4633,9 +4817,9 @@ class AparteComposerAttachments extends HTMLElement {
       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="${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--image" title="${name}"><img class="aparte-thumbnail__image" 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="${name}"><span class="aparte-thumb__ext">${escapeHtml(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-thumbnail__label">${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", (e) => {
@@ -4645,20 +4829,22 @@ class AparteComposerAttachments extends HTMLElement {
       });
     });
     if (!resolveConfig(this).getHostHandlers().attachmentPreview) return;
-    this.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
-      tile.setAttribute("role", "button");
-      tile.setAttribute("tabindex", "0");
+    const images = files.filter((f2) => f2.type.startsWith("image/"));
+    this.querySelectorAll(".aparte-thumb--image").forEach((tile, i2) => {
+      const img = tile.querySelector(".aparte-thumbnail__image");
+      if (!img) return;
+      img.setAttribute("role", "button");
+      img.setAttribute("tabindex", "0");
+      img.setAttribute("aria-label", images[i2]?.name ?? "");
       const open = () => {
-        const img = tile.querySelector(".aparte-thumb__img");
-        if (!img) return;
         this.dispatchEvent(new CustomEvent("aparte-attachment-preview", {
           bubbles: true,
           composed: true,
-          detail: { url: img.src, name: tile.getAttribute("title") ?? "" }
+          detail: { url: img.src, name: images[i2]?.name ?? "" }
         }));
       };
-      tile.addEventListener("click", open);
-      tile.addEventListener("keydown", (e) => {
+      img.addEventListener("click", open);
+      img.addEventListener("keydown", (e) => {
         const key = e.key;
         if (key !== "Enter" && key !== " ") return;
         e.preventDefault();
@@ -5288,7 +5474,10 @@ class AparteConversationList extends HTMLElement {
     input.dataset["renameId"] = conv.id;
     select.replaceWith(input);
     this._renaming = { id: conv.id, input, done: false };
-    input.addEventListener("blur", () => this._finishRename(true, false));
+    input.addEventListener("blur", (e) => {
+      const next = e.relatedTarget;
+      this._finishRename(true, !next || this.contains(next));
+    });
     input.focus();
     input.select();
   }
@@ -5297,23 +5486,28 @@ class AparteConversationList extends HTMLElement {
    * 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.
+   *
+   * `restoreFocus` puts the keyboard back on the row: every exit destroys the field
+   * the reader was in, so without it the focus lands on `<body>` and the next Tab
+   * restarts at the top of the page. The caller decides — the blur path says no when
+   * the focus is already heading somewhere live outside this list.
    */
-  _finishRename(commit, viaKeyboard) {
+  _finishRename(commit, restoreFocus) {
     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-rename-conversation",
         { detail: { id: conv.id, title }, bubbles: true, composed: true }
       ));
     }
+    if (restoreFocus) {
+      this.querySelector(`[data-select-id="${cssEscape(renaming.id)}"]`)?.focus();
+    }
   }
   // ─── Events ───────────────────────────────────────────────────────────
   _onClick = (e) => {
@@ -5914,9 +6108,6 @@ class AparteScrollRail extends HTMLElement {
 if (!customElements.get("aparte-scroll-rail")) {
   customElements.define("aparte-scroll-rail", AparteScrollRail);
 }
-function presenceOn(value) {
-  return value === "" ? true : Boolean(value);
-}
 const DRAWER_QUERY = "(max-width: 48rem)";
 class AparteSidebar extends HTMLElement {
   static get observedAttributes() {
@@ -5987,6 +6178,8 @@ class AparteSidebar extends HTMLElement {
     this._watchBreakpoint();
     this._syncHidden();
     this._lastCollapsed = this.collapsed;
+    if (!this.id) this.id = `aparte-sidebar-${++sidebarIdSeq}`;
+    this._syncToggles();
     this._ready = true;
   }
   /**
@@ -6030,6 +6223,7 @@ class AparteSidebar extends HTMLElement {
     if (!this._auto && !this.drawer) this._closedByHost = collapsed;
     this._syncScrim();
     this._syncHidden();
+    this._syncToggles();
     if (collapsed && this.drawer && this._opener?.isConnected) {
       this._opener.focus();
       this._opener = null;
@@ -6074,6 +6268,26 @@ class AparteSidebar extends HTMLElement {
     }
     this._syncScrim();
     this._syncHidden();
+    this._syncToggles();
+  }
+  /**
+   * Every `[data-aparte-sidebar-toggle]` that drives THIS sidebar says what it does:
+   * `aria-expanded` follows the state, `aria-controls` names the element. Synced from
+   * the three places the state settles (connect, the attribute, the breakpoint), never
+   * from `open()` alone — a close on Escape would otherwise leave an "expanded" that
+   * lies. The row's own `⋯` button already did this; the sidebar's toggle did not.
+   */
+  _syncToggles() {
+    for (const control of document.querySelectorAll("[data-aparte-sidebar-toggle]")) {
+      if (!this._drives(control)) continue;
+      control.setAttribute("aria-expanded", String(!this.collapsed));
+      control.setAttribute("aria-controls", this.id);
+    }
+  }
+  /** Whether a toggle control targets this sidebar: named by id, else the nearest one. */
+  _drives(control) {
+    const named = control.getAttribute("data-aparte-sidebar-toggle");
+    return named ? named === this.id : nearestSidebar(control) === this;
   }
   /**
    * A collapsed sidebar is invisible — folded to nothing in the flow, slid off the
@@ -6110,7 +6324,7 @@ class AparteSidebar extends HTMLElement {
    * nothing focusable in it keeps the focus where it was, which is the honest outcome.
    */
   _focusFirst() {
-    this.querySelector(FOCUSABLE)?.focus();
+    visibleFocusable(this)[0]?.focus();
   }
   _syncScrim() {
     const wanted = this.drawer && !this.collapsed;
@@ -6126,21 +6340,35 @@ class AparteSidebar extends HTMLElement {
     }
   }
   _onKeydown = (e) => {
-    if (e.key === "Escape" && this.drawer && !this.collapsed) {
+    if (!this.drawer || this.collapsed) return;
+    if (e.key === "Escape") {
       e.preventDefault();
       this.close();
+      return;
+    }
+    if (e.key === "Tab") {
+      const focusable = visibleFocusable(this);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (!this.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      } else if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
     }
   };
   /** 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;
-    }
+    if (!this._drives(control)) return;
     this.toggle(control);
   };
   // ─── Search ───────────────────────────────────────────────────────────
@@ -6174,6 +6402,7 @@ class AparteSidebar extends HTMLElement {
     this.dataset["ownLabel"] = "locale";
   }
 }
+let sidebarIdSeq = 0;
 const FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -6182,6 +6411,9 @@ const FOCUSABLE = [
   "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(",");
+function visibleFocusable(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el2) => !el2.closest("[hidden]") && el2.checkVisibility?.() !== false);
+}
 function nearestSidebar(control) {
   return control.closest("aparte-sidebar") ?? document.querySelector("aparte-sidebar");
 }