@aparte/core 0.16.8 → 0.16.10

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-cYGTlfZf.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-cYGTlfZf.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");
   }
 }
@@ -3382,11 +3470,18 @@ class AparteChatViewport extends HTMLElement {
       });
     }
   }
-  /** The overlay shell's element children that are not this viewport — the floating bottom stack. */
+  /**
+   * The overlay shell's element children that are the floating bottom stack: not this
+   * viewport, and not the scroll rail, which floats over the transcript by design —
+   * shell.css names it the same way (`:not(aparte-chat-viewport, aparte-scroll-rail)`).
+   * Counted, a rail centred on the transcript set the inset to the distance from its
+   * own top edge (398px on the vanilla example) and held it there while the composer
+   * grew under a draft.
+   */
   _overlayStack() {
     if (!this._overlayRoot) return [];
     return Array.from(this._overlayRoot.children).filter(
-      (el2) => el2 instanceof HTMLElement && el2 !== this
+      (el2) => el2 instanceof HTMLElement && el2 !== this && el2.tagName.toLowerCase() !== "aparte-scroll-rail"
     );
   }
   /**
@@ -4012,6 +4107,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 +4120,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 +4182,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 +4836,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 +5481,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 +5493,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) => {
@@ -5775,18 +5889,40 @@ if (!customElements.get("aparte-context")) {
   customElements.define("aparte-context", AparteContext);
 }
 const EXCERPT_LENGTH = 60;
+const MIN_PITCH = 6;
+const SETTLE_MS = 150;
+const MAX_ALIGN_PASSES = 4;
+const ALIGN_TOLERANCE = 1;
 class AparteScrollRail extends HTMLElement {
   static get observedAttributes() {
     return ["target", "every"];
   }
   _host = null;
   _mutations = null;
+  _resizes = null;
   _intersections = null;
+  /** The bubbles the intersection observer watches — compared by identity, so a re-rendered bubble is re-observed. */
+  _observedBubbles = [];
+  /** The scroll surface the observer is rooted on, and whose bottom edge is read. */
+  _observedSurface = null;
   _rebuildQueued = false;
+  _pickQueued = false;
   _currentId = null;
-  /** Visible ratio per message id, from the intersection observer. */
+  /** Visible ratio per message id in the reading band, from the intersection observer. */
   _visible = /* @__PURE__ */ new Map();
+  /** The bubbles on screen at all, from the second observer; only the last one is read. */
+  _onScreen = /* @__PURE__ */ new Set();
+  _onScreenObserver = null;
+  /** The mark a jump asked for, held until the transcript has stopped moving. */
+  _held = null;
+  _settleTimer = null;
+  _settleSurface = null;
+  /** Re-alignments done for the jump in flight. */
+  _alignPasses = 0;
+  /** The custom properties written on this element, so each is written only when it changes. */
+  _written = /* @__PURE__ */ new Map();
   _onConfigChange = () => this._rebuild();
+  _onSurfaceScroll = () => this._bumpSettle();
   /** The id of the message the rail currently marks, or `null`. */
   get currentMessageId() {
     return this._currentId;
@@ -5830,17 +5966,26 @@ class AparteScrollRail extends HTMLElement {
       return;
     }
     if (typeof MutationObserver !== "undefined") {
-      this._mutations = new MutationObserver(() => this._queueRebuild());
+      this._mutations = new MutationObserver((records) => {
+        if (records.some((record) => !this.contains(record.target))) this._queueRebuild();
+      });
       this._mutations.observe(this._host, { childList: true, subtree: true, characterData: true });
     }
+    if (typeof ResizeObserver !== "undefined") {
+      this._resizes = new ResizeObserver(() => this._layout());
+      this._resizes.observe(this._host);
+      const viewport = this._viewport();
+      if (viewport) this._resizes.observe(viewport);
+    }
     this._rebuild();
   }
   _detach() {
     this._mutations?.disconnect();
     this._mutations = null;
-    this._intersections?.disconnect();
-    this._intersections = null;
-    this._visible.clear();
+    this._resizes?.disconnect();
+    this._resizes = null;
+    this._unobserve();
+    this._release();
     this._host = null;
   }
   /** Coalesce a burst of mutations (a streaming reply is one per token) into one rebuild. */
@@ -5881,6 +6026,15 @@ class AparteScrollRail extends HTMLElement {
     const excerpt = this._excerpt(bubble);
     return excerpt ? `${role}: ${excerpt}` : role;
   }
+  _list() {
+    return this.querySelector(":scope > .aparte-scroll-rail__list");
+  }
+  /**
+   * Reconcile the ticks with the bubbles, by message id. A tick that already exists is
+   * kept — the same node, so the focus on it, its hover and its tooltip survive a turn
+   * being appended or a reply streaming beside it — moved only when its order changed,
+   * and dropped when its bubble left.
+   */
   _rebuild() {
     const bubbles = this._bubbles();
     const locale = resolveConfig(this).getLocale();
@@ -5888,45 +6042,71 @@ class AparteScrollRail extends HTMLElement {
     if (bubbles.length < 2) {
       this.setAttribute("data-empty", "");
       this.replaceChildren();
-      this._intersections?.disconnect();
-      this._intersections = null;
-      this._visible.clear();
+      this._unobserve();
       this._currentId = null;
+      this._write("--aparte-scroll-rail-hit-size", "");
       return;
     }
     this.removeAttribute("data-empty");
-    const list = document.createElement("ol");
-    list.className = "aparte-scroll-rail__list";
+    let list = this._list();
+    if (!list) {
+      list = document.createElement("ol");
+      list.className = "aparte-scroll-rail__list";
+      this.replaceChildren(list);
+    }
+    const existing = /* @__PURE__ */ new Map();
+    for (const item of Array.from(list.children)) {
+      const id = item.firstElementChild instanceof HTMLElement ? item.firstElementChild.dataset["messageId"] : void 0;
+      if (id) existing.set(id, item);
+    }
     const known = /* @__PURE__ */ new Set();
+    let index = 0;
     for (const bubble of bubbles) {
       const id = bubble.getAttribute("message-id");
       known.add(id);
-      const item = document.createElement("li");
-      const tick = document.createElement("button");
-      tick.type = "button";
-      tick.className = "aparte-scroll-rail__tick";
-      tick.dataset["messageId"] = id;
+      let item = existing.get(id);
+      if (item) {
+        existing.delete(id);
+      } else {
+        item = document.createElement("li");
+        const tick2 = document.createElement("button");
+        tick2.type = "button";
+        tick2.className = "aparte-scroll-rail__tick";
+        tick2.dataset["messageId"] = id;
+        item.appendChild(tick2);
+      }
+      const tick = item.firstElementChild;
       const label = this._tickLabel(bubble);
-      tick.setAttribute("aria-label", label);
-      tick.title = label;
+      if (tick.getAttribute("aria-label") !== label) {
+        tick.setAttribute("aria-label", label);
+        tick.title = label;
+      }
       if (id === this._currentId) tick.setAttribute("aria-current", "true");
-      item.appendChild(tick);
-      list.appendChild(item);
+      else tick.removeAttribute("aria-current");
+      const at = list.children[index] ?? null;
+      if (at !== item) list.insertBefore(item, at);
+      index++;
     }
-    this.replaceChildren(list);
+    for (const stale of existing.values()) stale.remove();
     if (this._currentId && !known.has(this._currentId)) this._currentId = null;
-    this._observe(bubbles);
+    if (!sameElements(this._observedBubbles, bubbles)) this._observe(bubbles);
+    this._layout();
   }
   /**
-   * Which tick is current is read, not computed: the scroll surface is the root, and
-   * the bubble with the largest visible share of a reading band near the top wins.
-   * Scroll arithmetic was the alternative, and every scroll-position rule in the
-   * viewport carries a regression note — this one has none to carry.
+   * Which tick is current is read, not computed: the scroll surface is the root and an
+   * intersection observer reports which bubbles reach a reading band — the top 30% of
+   * the surface, from its very top so that the bubble a jump aligned there counts. The
+   * rule is a scrollspy's: the LAST question that has reached the band is the one the
+   * reader is under. "The largest visible share" was the rule before, and at the bottom
+   * of a thread of short turns, where three questions sit in the band, it named the
+   * first of them. Scroll arithmetic was the alternative, and every scroll-position
+   * rule in the viewport carries a regression note; the one read here is the bottom,
+   * because at the bottom the reader is under the latest question whatever the band
+   * holds, and the observer has nothing to report on the last few pixels.
    */
   _observe(bubbles) {
-    this._intersections?.disconnect();
-    this._intersections = null;
-    this._visible.clear();
+    this._unobserve();
+    this._observedBubbles = bubbles;
     if (typeof IntersectionObserver === "undefined") return;
     const root = this._scrollSurface();
     if (!root) return;
@@ -5935,31 +6115,143 @@ class AparteScrollRail extends HTMLElement {
         const id = entry.target.getAttribute("message-id");
         if (id) this._visible.set(id, entry.isIntersecting ? entry.intersectionRatio : 0);
       }
-      this._pickCurrent(bubbles);
-    }, { root, rootMargin: "-15% 0px -55% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] });
-    for (const bubble of bubbles) this._intersections.observe(bubble);
+      this._pickCurrent();
+    }, { root, rootMargin: "0px 0px -70% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] });
+    this._onScreenObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const id = entry.target.getAttribute("message-id");
+        if (!id) continue;
+        if (entry.isIntersecting) this._onScreen.add(id);
+        else this._onScreen.delete(id);
+      }
+      this._pickCurrent();
+    }, { root, threshold: [0] });
+    for (const bubble of bubbles) {
+      this._intersections.observe(bubble);
+      this._onScreenObserver.observe(bubble);
+    }
+    this._observedSurface = root;
+    root.addEventListener("scroll", this._onRootScroll, { passive: true });
   }
-  _pickCurrent(bubbles) {
-    let best = null;
-    let bestRatio = 0;
+  _unobserve() {
+    this._intersections?.disconnect();
+    this._intersections = null;
+    this._onScreenObserver?.disconnect();
+    this._onScreenObserver = null;
+    this._observedSurface?.removeEventListener("scroll", this._onRootScroll);
+    this._observedSurface = null;
+    this._observedBubbles = [];
+    this._visible.clear();
+    this._onScreen.clear();
+  }
+  /** A scroll only matters at the bottom edge, where the observer is silent: one pick per frame. */
+  _onRootScroll = () => {
+    if (this._pickQueued) return;
+    this._pickQueued = true;
+    requestAnimationFrame(() => {
+      this._pickQueued = false;
+      this._pickCurrent();
+    });
+  };
+  /** At the bottom edge of a surface that scrolls; a surface with nothing to scroll has no bottom to be at. */
+  _atBottom() {
+    const surface = this._observedSurface;
+    if (!surface) return false;
+    const max = surface.scrollHeight - surface.clientHeight;
+    return max > 0 && max - surface.scrollTop <= 2;
+  }
+  _pickCurrent() {
+    if (this._held) return;
+    const bubbles = this._observedBubbles;
+    if (bubbles.length === 0) return;
+    const lastId = bubbles[bubbles.length - 1].getAttribute("message-id");
+    if (this._atBottom() || this._onScreen.has(lastId)) {
+      this._setCurrent(lastId);
+      return;
+    }
+    let last = null;
     for (const bubble of bubbles) {
       const id = bubble.getAttribute("message-id");
-      const ratio = this._visible.get(id) ?? 0;
-      if (ratio > bestRatio) {
-        bestRatio = ratio;
-        best = id;
-      }
+      if ((this._visible.get(id) ?? 0) > 0) last = id;
     }
-    if (best !== null) this._setCurrent(best);
+    if (last !== null) this._setCurrent(last);
   }
   _setCurrent(id) {
     if (this._currentId === id) return;
     this._currentId = id;
     for (const tick of this.querySelectorAll(".aparte-scroll-rail__tick")) {
-      if (tick.dataset["messageId"] === id) tick.setAttribute("aria-current", "true");
-      else tick.removeAttribute("aria-current");
+      if (tick.dataset["messageId"] === id) {
+        tick.setAttribute("aria-current", "true");
+        this._reveal(tick);
+      } else {
+        tick.removeAttribute("aria-current");
+      }
     }
   }
+  /** Past the floor the rail scrolls itself: the current tick is kept inside its window. */
+  _reveal(tick) {
+    const room = this.clientHeight;
+    if (!room) return;
+    const top = tick.offsetTop;
+    const bottom = top + tick.offsetHeight;
+    if (top < this.scrollTop) this.scrollTop = top;
+    else if (bottom > this.scrollTop + room) this.scrollTop = bottom - room;
+  }
+  // ─── Geometry ─────────────────────────────────────────────────────────
+  /** Write a custom property on this element only when its value changed; '' removes it. */
+  _write(name, value) {
+    if (this._written.get(name) === value) return;
+    this._written.set(name, value);
+    if (value) this.style.setProperty(name, value);
+    else this.style.removeProperty(name);
+  }
+  /**
+   * The three measurements the stylesheet positions the rail by, and the pitch.
+   *
+   * The scrollbar: `offsetWidth − clientWidth` of the scroll surface is the width of a
+   * classic bar and 0 for an overlay one, so the rail sits clear of the bar exactly
+   * where there is one. The extent: the transcript's box within the host, so the rail
+   * spans the messages and not the composer under them. The pitch: the stylesheet's
+   * 24px targets whenever `count × 24` fits the rail; otherwise the pitch that does,
+   * never under `MIN_PITCH` — the rail sets `--aparte-scroll-rail-hit-size` on itself
+   * and the gap, the padding and the zone all follow it, as they do for a consumer's
+   * value. Past the floor the rail scrolls (`_reveal`), and the arrows still walk it.
+   */
+  _layout() {
+    const host = this._host;
+    const viewport = this._viewport();
+    const surface = this._scrollSurface();
+    if (host && surface) {
+      this._write("--aparte-scroll-rail-bar", `${Math.max(0, surface.offsetWidth - surface.clientWidth)}px`);
+    }
+    if (host && viewport) {
+      const v2 = viewport.getBoundingClientRect();
+      const h2 = host.getBoundingClientRect();
+      if (v2.height > 0 && h2.height > 0) {
+        this._write("--aparte-scroll-rail-block-start", `${Math.max(0, Math.round(v2.top - h2.top))}px`);
+        this._write("--aparte-scroll-rail-block-end", `${Math.max(0, Math.round(h2.bottom - v2.bottom))}px`);
+      }
+    }
+    const count = this._list()?.children.length ?? 0;
+    const height = this.clientHeight;
+    if (!count || !height) {
+      this._write("--aparte-scroll-rail-hit-size", "");
+      this._write("--aparte-scroll-rail-gap", "");
+      return;
+    }
+    const above = host ?? document.documentElement;
+    const aboveStyle = getComputedStyle(above);
+    const hit = parseFloat(aboveStyle.getPropertyValue("--aparte-scroll-rail-hit-size")) || 24;
+    const thickness = parseFloat(aboveStyle.getPropertyValue("--aparte-scroll-rail-tick-thickness")) || 2;
+    if (count * hit <= height) {
+      this._write("--aparte-scroll-rail-hit-size", "");
+      this._write("--aparte-scroll-rail-gap", "");
+      return;
+    }
+    const pitch = Math.max(MIN_PITCH, Math.floor(height / count));
+    this._write("--aparte-scroll-rail-hit-size", `${pitch}px`);
+    this._write("--aparte-scroll-rail-gap", `${Math.max(0, pitch - thickness)}px`);
+  }
   // ─── Interaction ──────────────────────────────────────────────────────
   _onClick = (e) => {
     const tick = e.target.closest(".aparte-scroll-rail__tick");
@@ -5981,6 +6273,16 @@ class AparteScrollRail extends HTMLElement {
   /**
    * Scroll the transcript to a message. Announced first, cancelable; then a
    * `scrollIntoView` on the bubble, smooth unless the reader prefers reduced motion.
+   * The clicked tick is the mark until the transcript has stopped moving: while a
+   * smooth scroll crosses other questions the band would name each in turn, and it
+   * ended on the wrong one two times in three before this hold.
+   *
+   * Where the scroll lands is checked once it has settled, and corrected. The bubbles
+   * carry `content-visibility: auto`, so a bubble far from the reader has an estimated
+   * height until it is rendered: the scroll aims at an estimate, the bubbles above it
+   * take their real size on the way, and the message ends up above or below the top —
+   * measured from 36px to 1,213px off, in all three engines, the further the worse.
+   * A second `scrollIntoView` from a rendered neighbourhood lands; a few are allowed.
    */
   jumpTo(messageId) {
     const announced = this.dispatchEvent(new CustomEvent("aparte-scroll-rail-jump", {
@@ -5990,13 +6292,61 @@ class AparteScrollRail extends HTMLElement {
       cancelable: true
     }));
     if (!announced) return;
-    const viewport = this._viewport();
-    const bubble = viewport?.querySelector(`aparte-chat-bubble[message-id="${cssEscape(messageId)}"]`);
+    const bubble = this._bubbleOf(messageId);
     if (!bubble) return;
+    this._scrollTo(bubble);
+    this._setCurrent(messageId);
+    this._hold(messageId);
+  }
+  _bubbleOf(messageId) {
+    return this._viewport()?.querySelector(`aparte-chat-bubble[message-id="${cssEscape(messageId)}"]`) ?? null;
+  }
+  _scrollTo(bubble) {
     const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
     bubble.scrollIntoView({ block: "start", behavior: reduced ? "auto" : "smooth" });
-    this._setCurrent(messageId);
   }
+  /** Keep `id` as the mark until the scroll surface has been still for `SETTLE_MS`. */
+  _hold(id) {
+    this._release();
+    this._held = id;
+    this._alignPasses = 0;
+    this._settleSurface = this._scrollSurface();
+    this._settleSurface?.addEventListener("scroll", this._onSurfaceScroll);
+    this._bumpSettle();
+  }
+  _bumpSettle() {
+    if (this._settleTimer !== null) clearTimeout(this._settleTimer);
+    this._settleTimer = setTimeout(() => this._settle(), SETTLE_MS);
+  }
+  /** The transcript is still: land on the message if the scroll did not, else release the hold. */
+  _settle() {
+    const id = this._held;
+    const surface = this._settleSurface;
+    const bubble = id ? this._bubbleOf(id) : null;
+    if (id && bubble && surface && this._alignPasses < MAX_ALIGN_PASSES) {
+      const off = bubble.getBoundingClientRect().top - surface.getBoundingClientRect().top;
+      if (Math.abs(off) > ALIGN_TOLERANCE) {
+        this._alignPasses++;
+        this._scrollTo(bubble);
+        this._bumpSettle();
+        return;
+      }
+    }
+    this._release();
+    if (id) this._setCurrent(id);
+  }
+  _release() {
+    if (this._settleTimer !== null) clearTimeout(this._settleTimer);
+    this._settleTimer = null;
+    this._settleSurface?.removeEventListener("scroll", this._onSurfaceScroll);
+    this._settleSurface = null;
+    this._held = null;
+  }
+}
+function sameElements(a4, b2) {
+  if (a4.length !== b2.length) return false;
+  for (let i2 = 0; i2 < a4.length; i2++) if (a4[i2] !== b2[i2]) return false;
+  return true;
 }
 if (!customElements.get("aparte-scroll-rail")) {
   customElements.define("aparte-scroll-rail", AparteScrollRail);
@@ -6217,7 +6567,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 +6590,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 +6654,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");
 }