@aparte/core 0.16.6 → 0.16.8

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-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";
+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-D8wNICrT.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-D8wNICrT.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,12 +203,13 @@ 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");
     this._render();
+    this._applyDisabled();
     this._setupEventListeners();
     this._setupMutationObserver();
   }
@@ -241,6 +234,13 @@ class AparteSelect extends HTMLElement {
         this._dropdown?.setAttribute("hidden", "");
       }
     }
+    if (name === "placeholder") {
+      this._updateTriggerLabel();
+      this._updateNames();
+    }
+    if (name === "disabled") {
+      this._applyDisabled();
+    }
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Public API
@@ -260,11 +260,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
@@ -558,6 +554,34 @@ 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 when the
+   * placeholder changes. Written only when different: the mutation observer watches
+   * this subtree.
+   */
+  _updateNames() {
+    const name = this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select...";
+    for (const el2 of [this._trigger, this.querySelector(".aparte-select-options")]) {
+      if (el2 && el2.getAttribute("aria-label") !== name) el2.setAttribute("aria-label", name);
+    }
+  }
+  /**
+   * `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");
@@ -895,7 +919,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 +932,7 @@ class AparteChat extends HTMLElement {
     this._render();
     this._forwardAttr("placeholder");
     this._forwardAttr("disabled");
+    this._forwardAttr("submit-on-enter");
     this._syncEmptyWatch();
   }
   disconnectedCallback() {
@@ -1187,6 +1212,7 @@ class AparteChatBubble extends HTMLElement {
   appendToken(chunk) {
     this._content += chunk;
     this._updateContent();
+    this._syncCopyAction();
   }
   /** Set content directly */
   setContent(content) {
@@ -1194,6 +1220,7 @@ class AparteChatBubble extends HTMLElement {
     this.setAttribute("content", content);
     this._resetMarkdownStream();
     this._updateContent();
+    this._syncCopyAction();
   }
   /**
    * Drop the incremental Markdown parser's state.
@@ -1229,6 +1256,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 +1265,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 +1295,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 +1450,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 +1459,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 +1619,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 +1675,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 +1821,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 +1873,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 +1965,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 +1980,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 +2013,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 +2042,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(() => {
@@ -2352,6 +2406,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 +2428,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 +3332,7 @@ class AparteChatViewport extends HTMLElement {
   _setupObservers() {
     this._resizeObserver = new ResizeObserver(() => {
       this._updateOverlayInset();
+      this._updateTranscriptInset();
       if (this._isAutoScrollEnabled) {
         this._scrollToBottom();
       }
@@ -3355,6 +3413,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 +3701,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) {
@@ -4400,6 +4485,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 +4637,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 +4720,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) => {
@@ -4649,7 +4736,7 @@ class AparteComposerAttachments extends HTMLElement {
       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,
@@ -5914,9 +6001,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 +6071,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 +6116,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 +6161,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
@@ -6126,21 +6233,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 = Array.from(this.querySelectorAll(FOCUSABLE));
+      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 +6295,7 @@ class AparteSidebar extends HTMLElement {
     this.dataset["ownLabel"] = "locale";
   }
 }
+let sidebarIdSeq = 0;
 const FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",