@aparte/core 0.16.8 → 0.16.9

package/dist/index.js

@@ -1,5 +1,5 @@
-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";
+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);
 }
@@ -207,11 +207,12 @@ class AparteSelect extends HTMLElement {
   }
   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);
@@ -226,20 +227,18 @@ 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();
-      this._updateNames();
     }
     if (name === "disabled") {
       this._applyDisabled();
+      if (!this.hasAttribute("disabled") && this.hasAttribute("open")) this._openDropdown();
     }
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -277,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);
@@ -297,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");
@@ -311,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);
@@ -459,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");
@@ -466,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));
@@ -474,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"));
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -494,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();
@@ -510,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) {
@@ -556,15 +576,28 @@ class AparteSelect extends HTMLElement {
   }
   /**
    * 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.
+   * 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 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);
-    }
+    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
@@ -601,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;
@@ -1089,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"];
   }
@@ -2126,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");
@@ -2159,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) {
@@ -2306,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");
   }
 }
@@ -4012,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");
@@ -4023,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.
@@ -4085,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", {
@@ -4732,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-thumbnail__image");
-        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();
@@ -5375,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();
   }
@@ -5384,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) => {
@@ -6217,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;
@@ -6240,7 +6347,7 @@ class AparteSidebar extends HTMLElement {
       return;
     }
     if (e.key === "Tab") {
-      const focusable = Array.from(this.querySelectorAll(FOCUSABLE));
+      const focusable = visibleFocusable(this);
       if (focusable.length === 0) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
@@ -6304,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");
 }