@aparte/core 0.16.11 → 0.17.1

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-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";
+import { $ as resolveConfig, a7 as eventOrigin, a8 as activeElementIn, a4 as subscribeConfigChange, a1 as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, J as escapeAttr, F as cssEscape, a9 as mergeSegmentUpdate, K as escapeHtml, aa as writeStreamedMarkdown, S as isSafeUrl, C as copyText, N as getSegmentRenderer, O as installDefaultRenderersOnce, r as AparteMessageRepository, ab as stampSegmentActivity, ac as stampSegmentOnInsert, ad as stampSegmentOnUpdate, ae as renumberSegments, af as openSegmentIds, ag as isTerminalStatus, ah as adoptMessageSegments, Q as isAwaitingReply, W as populateBubbleFromMessage, a6 as uuid, a0 as revokeAttachmentUrls, V as parseMarkdownToSegments, ai as APARTE_DERIVED_SEGMENTS, e as APARTE_DEFAULT_LOCALE, aj as chatBoundaryOf, ak as rootOf, P as installDialogTriggersOnce } from "./dialog-triggers-CJWw0P3l.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, T, U, X, Y, Z, _, a2, a3, a5 } from "./dialog-triggers-CJWw0P3l.js";
 function presenceOn(value) {
   return value === "" ? true : Boolean(value);
 }
@@ -95,6 +95,9 @@ class AparteOptgroup extends HTMLElement {
   get collapsible() {
     return this.hasAttribute("collapsible");
   }
+  set collapsible(val) {
+    this.toggleAttribute("collapsible", presenceOn(val));
+  }
   get collapsed() {
     return this.hasAttribute("collapsed");
   }
@@ -202,6 +205,31 @@ class AparteSelect extends HTMLElement {
   _boundHandleOptionClick = this._handleOptionClick.bind(this);
   _boundHandleDocumentClick = this._handleDocumentClick.bind(this);
   _boundHandleKeydown = this._handleKeydown.bind(this);
+  /**
+   * The trigger's own three, bound for the same reason and left inline for a whole
+   * release: they were arrows on `this`, so nothing could ever remove them, and the
+   * trigger element survives a re-connect. One re-parent made a click toggle twice —
+   * open and shut inside the same click, i.e. a control that looks dead — and two made
+   * it announce `aparte-select-open` twice. The docblock above describes exactly this,
+   * fixed for the option click and not for its neighbours.
+   */
+  _boundHandleTriggerClick = () => {
+    this._toggle();
+  };
+  _boundHandleTriggerKeydown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      if (this._isOpen) return;
+      e.preventDefault();
+      this._toggle();
+    }
+    if (e.key === "ArrowDown" && !this._isOpen) {
+      e.preventDefault();
+      this._openDropdown();
+    }
+  };
+  _boundHandleSearchInput = (e) => {
+    this._filterOptions(e.target.value.toLowerCase());
+  };
   static get observedAttributes() {
     return ["value", "placeholder", "disabled", "searchable", "open"];
   }
@@ -335,6 +363,7 @@ class AparteSelect extends HTMLElement {
     this._updateTriggerLabel();
   }
   _setupMutationObserver() {
+    this._observer?.disconnect();
     this._observer = new MutationObserver(() => {
       this._updateDropdownContent();
       this._updateTriggerLabel();
@@ -382,24 +411,14 @@ class AparteSelect extends HTMLElement {
     this._restoreActive();
   }
   _setupEventListeners() {
-    this._trigger?.addEventListener("click", () => this._toggle());
-    this._trigger?.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        if (this._isOpen) return;
-        e.preventDefault();
-        this._toggle();
-      }
-      if (e.key === "ArrowDown" && !this._isOpen) {
-        e.preventDefault();
-        this._openDropdown();
-      }
-    });
+    this._trigger?.removeEventListener("click", this._boundHandleTriggerClick);
+    this._trigger?.addEventListener("click", this._boundHandleTriggerClick);
+    this._trigger?.removeEventListener("keydown", this._boundHandleTriggerKeydown);
+    this._trigger?.addEventListener("keydown", this._boundHandleTriggerKeydown);
     this.removeEventListener("click", this._boundHandleOptionClick);
     this.addEventListener("click", this._boundHandleOptionClick);
-    this._searchInput?.addEventListener("input", (e) => {
-      const query = e.target.value.toLowerCase();
-      this._filterOptions(query);
-    });
+    this._searchInput?.removeEventListener("input", this._boundHandleSearchInput);
+    this._searchInput?.addEventListener("input", this._boundHandleSearchInput);
     document.addEventListener("click", this._boundHandleDocumentClick);
     document.addEventListener("keydown", this._boundHandleKeydown);
   }
@@ -410,13 +429,14 @@ class AparteSelect extends HTMLElement {
     }
   }
   _handleDocumentClick(e) {
-    if (!this.contains(e.target)) {
+    const origin = eventOrigin(e);
+    if (!origin || !this.contains(origin)) {
       this._closeDropdown();
     }
   }
   _handleKeydown(e) {
     if (!this._isOpen) return;
-    const inSearch = document.activeElement === this._searchInput;
+    const inSearch = activeElementIn(this) === this._searchInput;
     switch (e.key) {
       case "Escape":
         e.preventDefault();
@@ -951,11 +971,21 @@ class AparteElicitation extends HTMLElement {
 if (typeof customElements !== "undefined" && !customElements.get("aparte-elicitation")) {
   customElements.define("aparte-elicitation", AparteElicitation);
 }
+function isTranscriptEmpty(viewport) {
+  return !viewport.hasAttribute("loading") && !viewport.querySelector("aparte-chat-bubble");
+}
 class AparteChat extends HTMLElement {
   static get observedAttributes() {
-    return ["placeholder", "disabled", "submit-on-enter", "center-empty", "attachments"];
+    return ["placeholder", "disabled", "submit-on-enter", "attachments"];
   }
   _observer = null;
+  _loadingObserver = null;
+  /** Waits for a `<aparte-chat-viewport>` child to appear — see `_watchForViewport`. */
+  _childObserver = null;
+  /** The viewport is loading and the gate is on — see `_applyLoadingGate`. */
+  _gated = false;
+  /** The composer's `disabled` is the gate's to remove, not one the consumer set. */
+  _gateOwns = false;
   /**
    * True only for the composition THIS element injected. An author-provided
    * composer (or a `framework-managed` host) is never edited by the attachments
@@ -968,21 +998,27 @@ class AparteChat extends HTMLElement {
     this._forwardAttr("disabled");
     this._forwardAttr("submit-on-enter");
     this._syncEmptyWatch();
+    this._syncLoadingWatch();
+    this._watchForViewport();
   }
   disconnectedCallback() {
     this._observer?.disconnect();
     this._observer = null;
+    this._loadingObserver?.disconnect();
+    this._loadingObserver = null;
+    this._childObserver?.disconnect();
+    this._childObserver = null;
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
-    if (name === "center-empty") {
-      this._syncEmptyWatch();
-      return;
-    }
     if (name === "attachments") {
       this._syncAttachments();
       return;
     }
+    if (name === "disabled" && newValue === null && this._gated) {
+      this._gateOwns = true;
+      return;
+    }
     const composer = this.querySelector("aparte-composer");
     if (!composer) return;
     if (newValue !== null) composer.setAttribute(name, newValue);
@@ -1045,24 +1081,86 @@ class AparteChat extends HTMLElement {
     if (!this.hasAttribute(name)) return;
     this.querySelector("aparte-composer")?.setAttribute(name, this.getAttribute(name) ?? "");
   }
-  /** Start/stop watching the viewport so `center-empty` toggles itself. */
+  /**
+   * Watch the viewport so `data-empty` follows the conversation.
+   *
+   * It used to run only under `center-empty`, which made the chat's one statement of
+   * "this conversation is empty" a by-product of a layout option: an app that wanted
+   * starters on an empty thread, or a welcome of its own, had to count messages itself.
+   * Every selector core writes against it still requires `[center-empty]`, so reflecting
+   * it everywhere moves no layout.
+   */
   _syncEmptyWatch() {
     this._observer?.disconnect();
     this._observer = null;
-    if (!this.hasAttribute("center-empty")) {
-      this.removeAttribute("data-empty");
-      return;
-    }
     const viewport = this.querySelector("aparte-chat-viewport");
     if (!viewport) return;
     this._updateEmpty();
     this._observer = new MutationObserver(() => this._updateEmpty());
-    this._observer.observe(viewport, { childList: true, subtree: true });
+    this._observer.observe(viewport, { childList: true, subtree: true, attributes: true, attributeFilter: ["loading"] });
+  }
+  /**
+   * A transcript on its way cannot take a message: while the viewport says `loading`
+   * the composer is disabled, whatever else the chat is set to. A send in that window
+   * raced the fetch — the controller appended to a history that `setMessages`
+   * overwrote a moment later. Independent of `center-empty`: every chat gates.
+   */
+  _syncLoadingWatch() {
+    this._loadingObserver?.disconnect();
+    this._loadingObserver = null;
+    const viewport = this.querySelector("aparte-chat-viewport");
+    if (!viewport) return;
+    this._applyLoadingGate();
+    this._loadingObserver = new MutationObserver(() => this._applyLoadingGate());
+    this._loadingObserver.observe(viewport, { attributes: true, attributeFilter: ["loading"] });
+  }
+  /**
+   * Both watches above need a viewport to observe, and they were installed once, at
+   * connect, when there might not be one yet: `<aparte-chat framework-managed>` IS
+   * Angular's host element — upgraded on insert, filled by the template afterwards — and
+   * hand-written markup upgrades before its children are parsed. Neither ever got its
+   * observer, so the documented "every chat gates" was inert on exactly the chats whose
+   * transcript is fetched. This waits for the child to arrive, installs them, and stops.
+   */
+  _watchForViewport() {
+    this._childObserver?.disconnect();
+    this._childObserver = null;
+    if (this.querySelector("aparte-chat-viewport")) return;
+    this._childObserver = new MutationObserver(() => {
+      if (!this.querySelector("aparte-chat-viewport")) return;
+      this._childObserver?.disconnect();
+      this._childObserver = null;
+      this._syncEmptyWatch();
+      this._syncLoadingWatch();
+    });
+    this._childObserver.observe(this, { childList: true, subtree: true });
+  }
+  /**
+   * The gate only ever ADDS `disabled` and only ever removes what it added: a `disabled`
+   * the consumer set — on this element, or on a composer of their own — stays.
+   */
+  _applyLoadingGate() {
+    const composer = this.querySelector("aparte-composer");
+    const loading = this.querySelector("aparte-chat-viewport")?.hasAttribute("loading") ?? false;
+    if (!composer) return;
+    if (loading && !this._gated) {
+      this._gated = true;
+      this._gateOwns = !composer.hasAttribute("disabled");
+      composer.setAttribute("disabled", "");
+    } else if (!loading && this._gated) {
+      this._gated = false;
+      if (this._gateOwns && !this.hasAttribute("disabled")) composer.removeAttribute("disabled");
+      this._gateOwns = false;
+    }
   }
+  /**
+   * Empty means no message AND none on its way. A viewport that says `loading` holds
+   * no bubble yet, and it used to count as empty: the welcome and the centred composer
+   * showed while a conversation was being fetched.
+   */
   _updateEmpty() {
     const viewport = this.querySelector("aparte-chat-viewport");
-    const empty = !viewport || !viewport.querySelector("aparte-chat-bubble");
-    this.toggleAttribute("data-empty", empty);
+    this.toggleAttribute("data-empty", !viewport || isTranscriptEmpty(viewport));
   }
 }
 if (!customElements.get("aparte-chat")) {
@@ -1507,6 +1605,11 @@ class AparteChatBubble extends HTMLElement {
       </div>
     `;
     }
+    const messageEl = this.querySelector(".aparte-message");
+    if (messageEl && !messageEl.hasAttribute("role")) {
+      messageEl.setAttribute("role", "article");
+      messageEl.setAttribute("aria-label", this._getAriaLabel());
+    }
     this._contentEl = this.querySelector(".aparte-content");
     this._segmentsEl = this.querySelector(".aparte-segments");
     this._attachmentsEl = this.querySelector(".aparte-attachments");
@@ -1578,7 +1681,9 @@ class AparteChatBubble extends HTMLElement {
     const nameEl = this.querySelector(".aparte-name");
     if (message) {
       message.setAttribute("data-role", this._role);
-      message.setAttribute("aria-label", this._getAriaLabel());
+      if (message.getAttribute("role") === "article") {
+        message.setAttribute("aria-label", this._getAriaLabel());
+      }
     }
     if (avatar) {
       avatar.setAttribute("data-role", this._role);
@@ -1714,7 +1819,7 @@ class AparteChatBubble extends HTMLElement {
     }
     this._attachmentsEl.innerHTML = this._attachments.map((a4) => {
       const name = escapeHtml(a4.name);
-      if (a4.type.startsWith("image/")) {
+      if (a4.type.startsWith("image/") && this._isShowableUrl(a4.url)) {
         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-thumbnail__label">${escapeHtml(this._fileExt(a4.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
@@ -1742,6 +1847,24 @@ class AparteChatBubble extends HTMLElement {
     });
   }
   /** Uppercased file extension (≤4 chars), or 'FILE' when there is none. */
+  /**
+   * The same answer `copyAttributes` gives before it writes an `src`, plus `blob:`.
+   *
+   * An attachment's `url` is documented as "URL or data URI" and a storage adapter
+   * re-mints it when a conversation is restored, so it is the app's value, not the
+   * composer's — it was escaped and written, where every other URL core emits is
+   * asked whether its SCHEME is allowed at all. A picture whose URL is refused is
+   * not half-rendered: it falls back to the file chip, which still names the file.
+   *
+   * `blob:` is added because it is the shape core itself mints — `filesToAttachments`
+   * calls `URL.createObjectURL`, and `AparteMessage.attachments` documents the same
+   * on hydration. `isSafeUrl` refuses it, and rightly: that list governs MODEL
+   * markup, which has no way to make a blob URL resolve.
+   */
+  _isShowableUrl(url) {
+    if (!url) return false;
+    return isSafeUrl(url, "img") || /^blob:/i.test(url.trim());
+  }
   _fileExt(filename) {
     const dot = filename.lastIndexOf(".");
     return dot > 0 ? filename.slice(dot + 1).toUpperCase().slice(0, 4) : "FILE";
@@ -2255,7 +2378,7 @@ class AparteChatBubble extends HTMLElement {
       }
     }
     this._updateWaiting();
-    if (wasStreaming && !streaming) this._highlightContentCode();
+    if (wasStreaming && !streaming) this._updateContent();
   }
 }
 if (!customElements.get("aparte-chat-bubble")) {
@@ -2421,6 +2544,20 @@ class AparteChatStatus extends HTMLElement {
 if (!customElements.get("aparte-chat-status")) {
   customElements.define("aparte-chat-status", AparteChatStatus);
 }
+function withParsedSegments(message, blocks) {
+  if (message.role !== "assistant" || message.segments?.length) return message;
+  if (typeof message.content !== "string" || !message.content.trim()) return message;
+  const segments = parseMarkdownToSegments(message.content, { blocks });
+  const onlyProse = segments.length <= 1 && segments.every((s2) => s2.type === "text");
+  return onlyProse ? message : markDerivedSegments({ ...message, segments });
+}
+function markDerivedSegments(message) {
+  Object.defineProperty(message, APARTE_DERIVED_SEGMENTS, { value: true, enumerable: false });
+  return message;
+}
+function hasDerivedSegments(message) {
+  return message[APARTE_DERIVED_SEGMENTS] === true;
+}
 class AparteChatViewport extends HTMLElement {
   // The scroll surface: an internal `.aparte-viewport-container` div (core mode)
   // or the host element itself (framework-managed mode). HTMLElement covers both.
@@ -2443,6 +2580,11 @@ class AparteChatViewport extends HTMLElement {
   _lastScrollTop = 0;
   /** The scroll height at the last scroll event: how much it moved since bounds what churn can do. */
   _lastScrollHeight = 0;
+  /** When the transcript last mutated under our observer — an engine's settle adjustment follows one. */
+  _lastMutationAt = Number.NEGATIVE_INFINITY;
+  /** How long after a mutation an engine's settle adjustment can arrive, and how far it moves. */
+  _settleShadowMs = 100;
+  _settleBoundPx = 100;
   /** When this component last moved `scrollTop` itself — see `_handleScroll`. "Never" is
    *  -Infinity rather than 0: `performance.now()` can be under a second old. */
   _ownScrollAt = Number.NEGATIVE_INFINITY;
@@ -2504,7 +2646,53 @@ class AparteChatViewport extends HTMLElement {
    */
   _frameworkManagedDOM = false;
   static get observedAttributes() {
-    return ["scroll-threshold", "max-rendered-bubbles"];
+    return ["scroll-threshold", "max-rendered-bubbles", "loading"];
+  }
+  /**
+   * The transcript is on its way: a conversation was chosen and its messages are
+   * being fetched. Two skeleton turns stand where they will be, the scroll surface
+   * is `aria-busy`, and a visually hidden line names the wait. Reflected as the
+   * `loading` attribute — `AparteConversationController` sets it through its
+   * binding; a loop of your own sets it by hand. Not the same thing as `data-busy`,
+   * which is a reply streaming into a transcript that is already there.
+   */
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(value) {
+    this.toggleAttribute("loading", presenceOn(value));
+  }
+  setLoading(loading) {
+    this.loading = loading;
+  }
+  /** Draw or remove the wait, from the attribute. Safe before the structure exists. */
+  _syncLoading() {
+    const container = this._container;
+    if (!container) return;
+    const on = this.hasAttribute("loading");
+    container.setAttribute("aria-busy", on ? "true" : "false");
+    if (this._frameworkManagedDOM) return;
+    const existing = container.querySelector(":scope > .aparte-viewport-loading");
+    if (!on) {
+      existing?.remove();
+      container.querySelector(":scope > .aparte-viewport-loading-status")?.remove();
+      return;
+    }
+    if (existing) return;
+    const cfg = resolveConfig(this);
+    const skeleton = document.createElement("div");
+    skeleton.className = "aparte-viewport-loading";
+    skeleton.setAttribute("aria-hidden", "true");
+    skeleton.innerHTML = '<span class="aparte-skeleton aparte-skeleton--rect aparte-viewport-loading__user"></span><span class="aparte-skeleton aparte-skeleton--text"></span><span class="aparte-skeleton aparte-skeleton--text"></span><span class="aparte-skeleton aparte-skeleton--text"></span><span class="aparte-skeleton aparte-skeleton--text aparte-viewport-loading__last"></span>';
+    const status = document.createElement("span");
+    status.className = "aparte-viewport-loading-status aparte-sr-only";
+    status.setAttribute("role", "status");
+    container.prepend(skeleton, status);
+    const say = () => {
+      if (status.isConnected) status.textContent = cfg.t("loadingConversation");
+    };
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(say);
+    else say();
   }
   constructor() {
     super();
@@ -2589,6 +2777,9 @@ class AparteChatViewport extends HTMLElement {
         this._maxRenderedBubbles = parseInt(newValue || "1000", 10);
         this._pruneRenderedBubbles();
         break;
+      case "loading":
+        this._syncLoading();
+        break;
     }
   }
   /**
@@ -2670,12 +2861,32 @@ class AparteChatViewport extends HTMLElement {
     if (streaming !== null && streaming !== head) return null;
     return head;
   }
-  /** The id of the message currently streaming, if any. */
+  /**
+   * The id of the message currently streaming, if any — searched across the whole
+   * TREE, and answering with an OFF-HEAD one first when there are two.
+   *
+   * It used to scan `getMessages()`, the active path. A retry or an edit on an
+   * earlier bubble calls `addSiblingOf`, which switches the branch to the new pending
+   * reply: the turn still being written leaves the path, the scan found nothing, and
+   * the rest of that turn was appended to the message that had just replaced it.
+   *
+   * A new pending reply is itself marked streaming, so "the first one found" would
+   * answer the head and let the write through — the very case this exists to refuse.
+   * Answering the off-head one instead makes `_activeMessageId` refuse while ANY turn
+   * elsewhere in the tree is still open. That also refuses the new turn's own first
+   * deltas for as long as the superseded one has not settled, which is the trade this
+   * whole path already makes: losing the tail is visible, writing it onto someone
+   * else's message is not.
+   */
   _streamingMessageId() {
-    for (const message of this._repo.getMessages()) {
-      if (message.isStreaming) return message.id;
+    const head = this._repo.headId;
+    let atHead = null;
+    for (const message of this._repo.getAllMessages()) {
+      if (!message.isStreaming) continue;
+      if (message.id !== head) return message.id;
+      atHead = message.id;
     }
-    return null;
+    return atHead;
   }
   /**
    * While a reply streams, the transcript is read-only except for Stop.
@@ -2817,6 +3028,12 @@ class AparteChatViewport extends HTMLElement {
   /**
    * Atomic update for a message by ID
    * Supports updating content, status, segments, and other metadata
+   *
+   * An id the tree does not hold is a silent no-op, deliberately: the message may have
+   * been truncated away by an edit while a turn was still writing to it, and inventing
+   * it back would put a message the reader deleted on screen. It does mean a late error
+   * card can have nowhere to land — `aparte-message-error` still fires, so a host that
+   * wants to show one has the event.
    */
   updateMessage(messageId, updates) {
     const message = this._repo.getMessageById(messageId);
@@ -2855,6 +3072,7 @@ class AparteChatViewport extends HTMLElement {
    * the framework owns the DOM and will create the bubble element itself.
    */
   appendMessage(message, options) {
+    message = withParsedSegments(message, resolveConfig(this).getStreamBlocks());
     const stored = options?.historical ? adoptMessageSegments(message) : message.segments?.length ? { ...message, segments: message.segments.reduce(
       (acc, segment) => {
         acc.push(stampSegmentOnInsert(
@@ -2868,6 +3086,7 @@ class AparteChatViewport extends HTMLElement {
       []
     ) } : { ...message };
     if (!options?.historical && isAwaitingReply(message)) stored.isStreaming = true;
+    if (hasDerivedSegments(message)) markDerivedSegments(stored);
     this._repo.addOrUpdateMessage(this._repo.headId, stored);
     if (!this._frameworkManagedDOM) {
       const wrapper = this.querySelector(".aparte-messages-wrapper");
@@ -3050,12 +3269,15 @@ class AparteChatViewport extends HTMLElement {
    */
   importTree(tree) {
     this.clearAll({ revokeAttachments: false });
+    const blocks = resolveConfig(this).getStreamBlocks();
     this._repo.import({
       ...tree,
-      messages: tree.messages.map((entry) => ({
-        ...entry,
-        message: adoptMessageSegments(entry.message)
-      }))
+      messages: tree.messages.map((entry) => {
+        const parsed = withParsedSegments(entry.message, blocks);
+        const message = adoptMessageSegments(parsed);
+        if (hasDerivedSegments(parsed)) markDerivedSegments(message);
+        return { ...entry, message };
+      })
     });
     this._reRenderActivePath();
   }
@@ -3070,7 +3292,7 @@ class AparteChatViewport extends HTMLElement {
    */
   clearAll(options) {
     if (options?.revokeAttachments !== false) {
-      for (const message of this._repo.getMessages()) {
+      for (const message of this._repo.getAllMessages()) {
         revokeAttachmentUrls(message.attachments);
       }
     }
@@ -3292,6 +3514,7 @@ class AparteChatViewport extends HTMLElement {
       container.appendChild(wrapper);
       this.appendChild(container);
       this._container = container;
+      this._syncLoading();
       this._scrollBtn = document.createElement("button");
       this._scrollBtn.className = "aparte-btn aparte-btn--surface aparte-btn--circle aparte-btn--lg aparte-scroll-btn aparte-scroll-btn--hidden";
       this._scrollBtn.setAttribute("type", "button");
@@ -3382,6 +3605,19 @@ class AparteChatViewport extends HTMLElement {
    * 1 run in 6: the rebuild's height churn moved scrollTop within the second after
    * the click, and the click made that look like the reader's).
    */
+  /**
+   * Is a pointer pressed on the surface right now? A press on the TEXT is not a scroll
+   * gesture (`_noteReaderInput` counts only the gutter), but a hand that is down and
+   * dragging a selection past the edge scrolls the container all the same — and that
+   * decrease is the reader's. Held from the press to its release, wherever it lands.
+   */
+  _pointerHeld = false;
+  _holdPointer = () => {
+    this._pointerHeld = true;
+  };
+  _releasePointer = () => {
+    this._pointerHeld = false;
+  };
   _noteReaderInput = (e) => {
     if (e.type === "keydown" && !this._scrollKeys.has(e.key)) return;
     if (e.type === "pointerdown") {
@@ -3414,6 +3650,9 @@ class AparteChatViewport extends HTMLElement {
     for (const type of ["wheel", "touchmove", "pointerdown", "keydown"]) {
       this._container?.addEventListener(type, this._noteReaderInput, { passive: true });
     }
+    this._container?.addEventListener("pointerdown", this._holdPointer, { passive: true });
+    document.addEventListener("pointerup", this._releasePointer, true);
+    document.addEventListener("pointercancel", this._releasePointer, true);
     this._scrollBtn?.addEventListener("click", this._onScrollBtnClick);
     this.addEventListener("aparte-branch-navigate", this._onBranchNavigate);
   }
@@ -3446,6 +3685,7 @@ class AparteChatViewport extends HTMLElement {
       this._updateOverlayInset();
     }
     this._mutationObserver = new MutationObserver((mutations) => {
+      this._lastMutationAt = performance.now();
       if (this._frameworkManagedDOM) this._keepScrollButtonLast();
       if (this._isAutoScrollEnabled && !this._gliding()) {
         const added = mutations.flatMap((m2) => Array.from(m2.addedNodes)).filter((n2) => n2 instanceof Element && n2.tagName === "APARTE-CHAT-BUBBLE");
@@ -3547,7 +3787,8 @@ class AparteChatViewport extends HTMLElement {
     const drop = this._lastScrollTop - top;
     const churn = Math.abs(height - this._lastScrollHeight);
     const now = performance.now();
-    const settlingOurs = drop <= churn + 2 && now - this._ownScrollAt < this._ownScrollWindowMs && now - this._readerInputAt >= this._ownScrollWindowMs;
+    const afterMutation = now - this._lastMutationAt < this._settleShadowMs && drop <= this._settleBoundPx;
+    const settlingOurs = now - this._ownScrollAt < this._ownScrollWindowMs && now - this._readerInputAt >= this._ownScrollWindowMs && !this._pointerHeld && (drop <= churn + 2 || afterMutation);
     const readerWentUp = drop > 1 && !settlingOurs;
     const readerHandOnIt = drop > 1 && now - this._readerInputAt < this._ownScrollWindowMs;
     this._lastScrollTop = top;
@@ -3788,6 +4029,10 @@ class AparteChatViewport extends HTMLElement {
     for (const type of ["wheel", "touchmove", "pointerdown", "keydown"]) {
       this._container?.removeEventListener(type, this._noteReaderInput);
     }
+    this._container?.removeEventListener("pointerdown", this._holdPointer);
+    document.removeEventListener("pointerup", this._releasePointer, true);
+    document.removeEventListener("pointercancel", this._releasePointer, true);
+    this._pointerHeld = false;
     this._scrollBtn?.removeEventListener("click", this._onScrollBtnClick);
     this.removeEventListener("aparte-branch-navigate", this._onBranchNavigate);
     this._resizeObserver?.disconnect();
@@ -3934,6 +4179,16 @@ class AparteComposer extends HTMLElement {
   get disabled() {
     return this.hasAttribute("disabled");
   }
+  /**
+   * The attribute is the state, so the property writes it. It has to exist: React 19
+   * and Svelte assign the PROPERTY whenever the element has one of that name, and a
+   * getter alone made `<aparte-composer disabled="">` — a spelling the wrappers type
+   * as valid — throw and take the render down. `presenceOn` because `''` is what
+   * those templates hand a presence property (#62).
+   */
+  set disabled(value) {
+    this.toggleAttribute("disabled", presenceOn(value));
+  }
   /**
    * When false, Shift+Enter submits and a bare Enter inserts a newline —
    * the inverse of the default. Driven by the `submit-on-enter` attribute.
@@ -3947,6 +4202,11 @@ class AparteComposer extends HTMLElement {
   get placeholder() {
     return this.getAttribute("placeholder") ?? "";
   }
+  /** Writes the attribute the inputs read (see `disabled` for why the setter exists). */
+  set placeholder(value) {
+    if (value === null || value === void 0) this.removeAttribute("placeholder");
+    else this.setAttribute("placeholder", String(value));
+  }
   get targetId() {
     return this.getAttribute("target");
   }
@@ -4287,13 +4547,35 @@ class AparteComposer extends HTMLElement {
     }
     return void 0;
   }
+  /**
+   * The message this composer's turn is writing, when the event that started it said.
+   * Kept so the END of a DIFFERENT turn cannot be read as the end of this one — see
+   * `_isForThisTurn`.
+   */
+  _streamingMessageId = null;
+  /**
+   * Whether a terminal event ends the turn this composer is following.
+   *
+   * `_isForThisComposer` answers "is this chat's?", and both turns of a retry belong
+   * to the same chat: the client aborts the superseded reply, the engine emits
+   * `run-aborted` for it, and that unwind turned Stop back into Send while the new
+   * reply was still streaming — and evicted the open panel, i.e. the approval question
+   * a tool was still waiting on. An event with no `messageId` still ends the turn: a
+   * loop of one's own saying "done" has always meant this one.
+   */
+  _isForThisTurn(e) {
+    const id = e.detail?.messageId;
+    return !id || this._streamingMessageId === null || id === this._streamingMessageId;
+  }
   _handleMessageStart(e) {
     if (!this._isForThisComposer(e)) return;
+    this._streamingMessageId = e.detail?.messageId ?? null;
     this._streaming = true;
     this._emit("streaming-change", { streaming: true });
   }
   _handleMessageDone(e) {
-    if (!this._isForThisComposer(e)) return;
+    if (!this._isForThisComposer(e) || !this._isForThisTurn(e)) return;
+    this._streamingMessageId = null;
     this._streaming = false;
     this._emit("streaming-change", { streaming: false });
     if (this._panelActive) this._evictPanel();
@@ -5080,8 +5362,10 @@ class AparteComposerToolbar extends HTMLElement {
   _observer = null;
   connectedCallback() {
     this._syncEmpty();
-    this._observer ??= new MutationObserver(() => this._syncEmpty());
-    this._observer.observe(this, { childList: true });
+    this._observer ??= new MutationObserver((records) => {
+      if (records.some((r) => !(r.type === "attributes" && r.target === this))) this._syncEmpty();
+    });
+    this._observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["hidden", "data-empty"] });
   }
   disconnectedCallback() {
     this._observer?.disconnect();
@@ -5101,7 +5385,10 @@ class AparteComposerToolbar extends HTMLElement {
    * not empty, and hiding it would be a twenty-minute mystery for whoever wrote it.
    */
   _syncEmpty() {
-    const hasContent = Boolean(this.firstElementChild) || this.textContent?.trim() !== "";
+    const visibleChild = Array.from(this.children).some((c2) => !c2.hasAttribute("hidden") && !c2.hasAttribute("data-empty"));
+    const ownText = Array.from(this.childNodes).some((n2) => n2.nodeType === Node.TEXT_NODE && (n2.textContent ?? "").trim() !== "");
+    const hasContent = visibleChild || ownText;
+    if (hasContent === !this.hasAttribute("data-empty")) return;
     if (hasContent) this.removeAttribute("data-empty");
     else this.setAttribute("data-empty", "");
   }
@@ -5109,6 +5396,9 @@ class AparteComposerToolbar extends HTMLElement {
 if (!customElements.get("aparte-composer-toolbar")) {
   customElements.define("aparte-composer-toolbar", AparteComposerToolbar);
 }
+function rowSelector(attr, id) {
+  return `[${attr}="${cssEscape(id)}"]`;
+}
 const DAY = 864e5;
 const MENU_GAP = 4;
 const VIEWPORT_MARGIN = 8;
@@ -5117,8 +5407,37 @@ class AparteConversationList extends HTMLElement {
   _activeId = null;
   _open = null;
   _renaming = null;
+  _warnedNoManager = false;
   static get observedAttributes() {
-    return ["active-id", "no-groups"];
+    return ["active-id", "flat", "loading", "manage"];
+  }
+  /**
+   * The list is on its way: rows of the kit's skeleton stand where the rows will be,
+   * the element is `aria-busy`, and a visually hidden line names the wait. Reflected
+   * as the `loading` attribute, so a site sets it while its store answers and clears
+   * it when `conversations` is set. A list that is not there yet is not an empty list.
+   */
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(value) {
+    this.toggleAttribute("loading", presenceOn(value));
+  }
+  /**
+   * Let the list finish the gesture through the registered conversation manager.
+   * Reflected as the `manage` attribute.
+   *
+   * The property is not a nicety here: this is the attribute that authorises a WRITE,
+   * and Vue and both Sveltes stringify a bound `false` onto an element that has no
+   * property of that name — `manage="false"`, which `hasAttribute` reads as on. So
+   * turning management off turned it on, and a delete the host meant to handle itself
+   * was also done by the list. `presenceOn`, like `loading` above it.
+   */
+  get manage() {
+    return this.hasAttribute("manage");
+  }
+  set manage(value) {
+    this.toggleAttribute("manage", presenceOn(value));
   }
   // ─── Lifecycle ────────────────────────────────────────────────────────
   connectedCallback() {
@@ -5146,7 +5465,7 @@ class AparteConversationList extends HTMLElement {
     if (name === "active-id") {
       this._activeId = newValue;
       this._updateActiveState();
-    } else if (name === "no-groups" && this.isConnected) {
+    } else if ((name === "flat" || name === "loading") && this.isConnected) {
       this._render();
     }
   }
@@ -5174,7 +5493,42 @@ class AparteConversationList extends HTMLElement {
   _render() {
     this._closeMenu();
     this._renaming = null;
+    const focused = activeElementIn(this);
+    const held = focused && this.contains(focused) ? focused.closest("[data-select-id], [data-more-id]") : null;
+    const restore = held?.dataset["selectId"] ? rowSelector("data-select-id", held.dataset["selectId"]) : held?.dataset["moreId"] ? rowSelector("data-more-id", held.dataset["moreId"]) : null;
+    const heldRow = held?.closest("[data-conv-id]") ?? null;
+    const heldIndex = heldRow ? Array.from(this.querySelectorAll("[data-conv-id]")).indexOf(heldRow) : -1;
+    const loading = this.hasAttribute("loading");
+    this.setAttribute("aria-busy", loading ? "true" : "false");
+    if (loading) {
+      const row = '<span class="aparte-skeleton aparte-skeleton--text"></span>';
+      this.innerHTML = '<div class="aparte-conv-list-loading" aria-hidden="true">' + row + row + row + row + row + row + '</div><span class="aparte-conv-list-loading-status aparte-sr-only" role="status"></span>';
+      const status = this.querySelector(".aparte-conv-list-loading-status");
+      const say = () => {
+        if (status?.isConnected) status.textContent = this._t("loadingConversations");
+      };
+      if (typeof requestAnimationFrame === "function") requestAnimationFrame(say);
+      else say();
+      return;
+    }
     this.innerHTML = this._groups().map((g2) => this._renderGroup(g2)).join("");
+    if (!restore) return;
+    const back = this.querySelector(restore);
+    if (back) {
+      back.focus();
+      return;
+    }
+    const rows = Array.from(this.querySelectorAll("[data-select-id]"));
+    const next = heldIndex >= 0 ? rows[heldIndex] ?? rows[rows.length - 1] : null;
+    if (next) {
+      next.focus();
+      return;
+    }
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "-1");
+      this.addEventListener("blur", () => this.removeAttribute("tabindex"), { once: true });
+    }
+    this.focus();
   }
   _t(key) {
     const locale = resolveConfig(this).getLocale();
@@ -5183,12 +5537,12 @@ class AparteConversationList extends HTMLElement {
   /**
    * Pinned first, then the calendar buckets every chat product uses, then a heading
    * per month (newest first), then whatever carries no date. Flat when nothing is
-   * dated or the host asked for `no-groups`: a heading over the only group would say
+   * dated or the host asked for `flat`: a heading over the only group would say
    * nothing.
    */
   _groups() {
     const items = this._conversations;
-    if (this.hasAttribute("no-groups") || !items.some((c2) => typeof c2.updatedAt === "number")) {
+    if (this.hasAttribute("flat") || !items.some((c2) => typeof c2.updatedAt === "number")) {
       return [{ key: "all", label: null, items }];
     }
     const now = /* @__PURE__ */ new Date();
@@ -5291,12 +5645,16 @@ class AparteConversationList extends HTMLElement {
 <div class="aparte-menu__separator" role="separator"></div>
 <button type="button" class="aparte-menu__item aparte-conv-menu__item--danger" role="menuitem" data-menu-action="delete">${trashGlyph}<span>${remove}</span></button>`;
   }
+  /** The question the confirm step asks — the popover's accessible name while it asks it. */
+  _confirmQuestion(conv) {
+    return this._t("deleteConversationConfirm").replace("{title}", conv.title || this._t("newChat"));
+  }
   _confirmMarkup(conv) {
-    const question = escapeHtml(this._t("deleteConversationConfirm").replace("{title}", conv.title || this._t("newChat")));
+    const question = escapeHtml(this._confirmQuestion(conv));
     const cancel = escapeHtml(this._t("cancel"));
     const remove = escapeHtml(this._t("deleteConversation"));
     return `
-<div class="aparte-conv-menu__confirm" role="group" aria-label="${escapeAttr(question)}">
+<div class="aparte-conv-menu__confirm">
   <p class="aparte-conv-menu__question">${question}</p>
   <div class="aparte-conv-menu__actions">
     <button type="button" class="aparte-btn aparte-btn--sm aparte-btn--ghost" data-menu-action="cancel">${cancel}</button>
@@ -5320,6 +5678,8 @@ class AparteConversationList extends HTMLElement {
     this._placeMenu(button, menu);
     menu.querySelector('[role="menuitem"]')?.focus();
     document.addEventListener("pointerdown", this._onDocumentPointerDown, true);
+    document.addEventListener("pointerup", this._onDocumentPointerUp, true);
+    document.addEventListener("pointercancel", this._onDocumentPointerUp, true);
     window.addEventListener("scroll", this._onWindowScroll, true);
     window.addEventListener("resize", this._onWindowScroll);
   }
@@ -5350,14 +5710,29 @@ class AparteConversationList extends HTMLElement {
     open.menu.remove();
     open.button.setAttribute("aria-expanded", "false");
     document.removeEventListener("pointerdown", this._onDocumentPointerDown, true);
+    document.removeEventListener("pointerup", this._onDocumentPointerUp, true);
+    document.removeEventListener("pointercancel", this._onDocumentPointerUp, true);
+    this._pressInMenu = false;
     window.removeEventListener("scroll", this._onWindowScroll, true);
     window.removeEventListener("resize", this._onWindowScroll);
     if (returnFocus && open.button.isConnected) open.button.focus();
   }
+  /**
+   * A pointer is down inside the open menu. WebKit does not move the focus to a
+   * button on mousedown: the element that held it is blurred instead — `focusout`
+   * with no `relatedTarget` — before the click reaches the item. `_onFocusOut` used
+   * to read that as the focus leaving the menu and close it on the press, so with a
+   * mouse no item could be chosen at all. Held from the press to its release.
+   */
+  _pressInMenu = false;
+  _onDocumentPointerUp = () => {
+    this._pressInMenu = false;
+  };
   _onDocumentPointerDown = (e) => {
     const open = this._open;
     if (!open) return;
-    const target = e.target;
+    const target = eventOrigin(e);
+    this._pressInMenu = !!target && open.menu.contains(target);
     if (open.menu.contains(target) || open.button.contains(target)) return;
     this._closeMenu();
   };
@@ -5368,9 +5743,37 @@ class AparteConversationList extends HTMLElement {
     const open = this._open;
     if (!open) return;
     const next = e.relatedTarget;
+    if (!next && this._pressInMenu) return;
     if (next && (open.menu.contains(next) || open.button.contains(next))) return;
     if (open.menu.contains(e.target)) this._closeMenu();
   };
+  /**
+   * The gesture, finished. The event has already gone out — cancelable, so a host
+   * that wants the write for itself calls `preventDefault()` and this stands down —
+   * and what is left is the registered conversation manager doing it. Without
+   * `manage` the element behaves exactly as it did before the attribute existed.
+   *
+   * A `manage` with no manager registered is a menu that does nothing, so the first
+   * gesture says so and names the call that fixes it. Said here rather than at
+   * `connectedCallback` because a list in the page's HTML connects before the script
+   * that registers the manager runs: a warning at connect would fire on a setup that
+   * is perfectly correct one tick later.
+   */
+  _manage(event, run) {
+    if (!this.hasAttribute("manage") || event.defaultPrevented) return;
+    const manager = resolveConfig(this).getConversationManager();
+    if (!manager) {
+      if (this._warnedNoManager) return;
+      this._warnedNoManager = true;
+      console.warn(
+        "[aparte-conversation-list] `manage` is set but no conversation manager is registered, so the row menu writes nothing. Call setConversationManager(manager) on your config, or drop `manage` and handle the events yourself."
+      );
+      return;
+    }
+    void run(manager).catch((err) => {
+      console.warn("[aparte-conversation-list] the conversation manager refused the change:", err);
+    });
+  }
   _onMenuAction(action) {
     const open = this._open;
     if (!open) return;
@@ -5392,46 +5795,64 @@ class AparteConversationList extends HTMLElement {
       case "pin":
         this._closeMenu(true);
         if (conv.pinnedAt) {
-          this.dispatchEvent(new CustomEvent(
-            "aparte-unpin-conversation",
-            { detail: { id }, bubbles: true, composed: true }
-          ));
+          const unpin = new CustomEvent(
+            "aparte-conversation-unpin",
+            { detail: { id }, bubbles: true, composed: true, cancelable: true }
+          );
+          this.dispatchEvent(unpin);
+          this._manage(unpin, (m2) => m2.unpin(id));
         } else {
-          this.dispatchEvent(new CustomEvent(
-            "aparte-pin-conversation",
-            { detail: { id }, bubbles: true, composed: true }
-          ));
+          const pin = new CustomEvent(
+            "aparte-conversation-pin",
+            { detail: { id }, bubbles: true, composed: true, cancelable: true }
+          );
+          this.dispatchEvent(pin);
+          this._manage(pin, (m2) => m2.pin(id));
         }
         return;
       case "archive":
         this._closeMenu(true);
         if (conv.archivedAt) {
-          this.dispatchEvent(new CustomEvent(
-            "aparte-unarchive-conversation",
-            { detail: { id }, bubbles: true, composed: true }
-          ));
+          const unarchive = new CustomEvent(
+            "aparte-conversation-unarchive",
+            { detail: { id }, bubbles: true, composed: true, cancelable: true }
+          );
+          this.dispatchEvent(unarchive);
+          this._manage(unarchive, (m2) => m2.unarchive(id));
         } else {
-          this.dispatchEvent(new CustomEvent(
-            "aparte-archive-conversation",
-            { detail: { id }, bubbles: true, composed: true }
-          ));
+          const archive = new CustomEvent(
+            "aparte-conversation-archive",
+            { detail: { id }, bubbles: true, composed: true, cancelable: true }
+          );
+          this.dispatchEvent(archive);
+          this._manage(archive, (m2) => m2.archive(id));
         }
         return;
-      case "delete":
-        open.menu.innerHTML = this._confirmMarkup(conv);
-        this._placeMenu(open.button, open.menu);
+      case "delete": {
+        const previous = [...open.menu.childNodes];
+        const holder = document.createElement("div");
+        holder.innerHTML = this._confirmMarkup(conv);
+        open.menu.append(...holder.childNodes);
+        open.menu.setAttribute("role", "dialog");
+        open.menu.setAttribute("aria-label", this._confirmQuestion(conv));
         open.menu.querySelector('[data-menu-action="cancel"]')?.focus();
+        for (const node of previous) node.remove();
+        this._placeMenu(open.button, open.menu);
         return;
+      }
       case "cancel":
         this._closeMenu(true);
         return;
-      case "confirm-delete":
+      case "confirm-delete": {
         this._closeMenu(true);
-        this.dispatchEvent(new CustomEvent(
-          "aparte-delete-conversation",
-          { detail: { id }, bubbles: true, composed: true }
-        ));
+        const remove = new CustomEvent(
+          "aparte-conversation-delete",
+          { detail: { id }, bubbles: true, composed: true, cancelable: true }
+        );
+        this.dispatchEvent(remove);
+        this._manage(remove, (m2) => m2.delete(id));
         return;
+      }
     }
   }
   _menuFocusables() {
@@ -5441,7 +5862,7 @@ class AparteConversationList extends HTMLElement {
   }
   _onMenuKeydown(e) {
     const items = this._menuFocusables();
-    const index = items.indexOf(document.activeElement);
+    const index = items.indexOf(activeElementIn(this));
     const focusAt = (i2) => {
       e.preventDefault();
       items[(i2 + items.length) % items.length]?.focus();
@@ -5507,10 +5928,12 @@ class AparteConversationList extends HTMLElement {
     const title = renaming.input.value.trim();
     this._render();
     if (commit && conv && title && title !== conv.title) {
-      this.dispatchEvent(new CustomEvent(
-        "aparte-rename-conversation",
-        { detail: { id: conv.id, title }, bubbles: true, composed: true }
-      ));
+      const rename = new CustomEvent(
+        "aparte-conversation-rename",
+        { detail: { id: conv.id, title }, bubbles: true, composed: true, cancelable: true }
+      );
+      this.dispatchEvent(rename);
+      this._manage(rename, (m2) => m2.updateTitle(conv.id, title));
     }
     if (restoreFocus) {
       this.querySelector(`[data-select-id="${cssEscape(renaming.id)}"]`)?.focus();
@@ -5540,7 +5963,7 @@ class AparteConversationList extends HTMLElement {
     if (select) {
       this._closeMenu();
       this.dispatchEvent(new CustomEvent(
-        "aparte-select-conversation",
+        "aparte-conversation-select",
         { detail: { id: select.dataset["selectId"] }, bubbles: true, composed: true }
       ));
     }
@@ -5574,16 +5997,52 @@ class AparteConversationList extends HTMLElement {
 }
 if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
 const isSuggestion = (value) => typeof value === "string" || typeof value === "object" && value !== null && typeof value.label === "string";
+const parseSuggestions = (raw) => {
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter(isSuggestion) : [];
+  } catch {
+    console.warn('[aparte-suggestions] `suggestions` is not a JSON array. Use ["…"] or [{"label": "…", "prompt": "…"}].');
+    return [];
+  }
+};
 const labelOf = (s2) => typeof s2 === "string" ? s2 : s2.label;
 const promptOf = (s2) => typeof s2 === "string" ? s2 : s2.prompt ?? s2.label;
 class AparteSuggestions extends HTMLElement {
   static get observedAttributes() {
-    return ["suggestions", "target"];
+    return ["suggestions", "target", "empty-only"];
   }
   _suggestions = [];
   _composer = null;
+  /** The viewport of the chat this row serves, while `empty-only` follows it. */
+  _transcript = null;
+  _transcriptObserver = null;
+  /** The composer sent since the transcript was last seen empty. */
+  _sent = false;
+  _wasEmpty = true;
+  /** `hidden` was written by this element, so it is this element's to lift. */
+  _hidOwn = false;
+  /*
+   * `empty-only` used to read the send alone: hidden on the first one, and never shown
+   * again. Over a restored thread (nothing sent yet) the starters sat on top of the
+   * transcript, and after a new chat they never came back. The transcript is the
+   * signal now; the send stays as the other half, because it comes first — the row
+   * hides on the click rather than a frame later when the bubble lands — and because
+   * it is all there is to read when the messages are not `<aparte-chat-bubble>`s
+   * (a wrapper's `renderBubble`) or there is no transcript at all. A transcript seen
+   * going from full to empty is a new conversation, which forgets the send.
+   */
   _onSend = () => {
-    if (this.hasAttribute("empty-only")) this.hidden = true;
+    if (!this.hasAttribute("empty-only")) return;
+    if (!this._transcript) this._watchTranscript();
+    this._sent = true;
+    this._applyEmptyOnly();
+  };
+  _applyEmptyOnly = () => {
+    const empty = this._transcript ? isTranscriptEmpty(this._transcript) : true;
+    if (empty && !this._wasEmpty) this._sent = false;
+    this._wasEmpty = empty;
+    this._setHidden(!empty || this._sent);
   };
   _onConfigChange = () => {
     const row = this.querySelector(".aparte-suggestions");
@@ -5593,8 +6052,17 @@ class AparteSuggestions extends HTMLElement {
   get suggestions() {
     return this._suggestions;
   }
+  /**
+   * Takes the array, or the JSON string the attribute documents.
+   *
+   * Both, because both arrive: React 19 and Svelte assign the PROPERTY whenever the
+   * element has one of that name, so `<aparte-suggestions suggestions='[…]'>` — the
+   * documented spelling, typed valid by both wrappers — reached this setter as a
+   * string, `Array.isArray` said no, and the row rendered nothing while the attribute
+   * (and so `attributeChangedCallback`) was never written.
+   */
   set suggestions(value) {
-    this._suggestions = Array.isArray(value) ? value.filter(isSuggestion) : [];
+    this._suggestions = typeof value === "string" ? parseSuggestions(value) : Array.isArray(value) ? value.filter(isSuggestion) : [];
     if (this.isConnected) this._render();
   }
   connectedCallback() {
@@ -5606,6 +6074,9 @@ class AparteSuggestions extends HTMLElement {
   disconnectedCallback() {
     this._composer?.removeEventListener("aparte-send", this._onSend);
     this._composer = null;
+    this._transcriptObserver?.disconnect();
+    this._transcriptObserver = null;
+    this._transcript = null;
     window.removeEventListener("aparte-config-change", this._onConfigChange);
   }
   attributeChangedCallback(name) {
@@ -5615,6 +6086,12 @@ class AparteSuggestions extends HTMLElement {
       this._render();
     } else if (name === "target") {
       this._watchComposer();
+    } else if (name === "empty-only") {
+      this._watchTranscript();
+      if (!this.hasAttribute("empty-only")) {
+        this._sent = false;
+        this._setHidden(false);
+      }
     }
   }
   _groupLabel() {
@@ -5630,13 +6107,7 @@ class AparteSuggestions extends HTMLElement {
     const raw = this.getAttribute("suggestions");
     if (raw === null || raw === this._parsed) return;
     this._parsed = raw;
-    try {
-      const parsed = JSON.parse(raw);
-      this._suggestions = Array.isArray(parsed) ? parsed.filter(isSuggestion) : [];
-    } catch {
-      console.warn('[aparte-suggestions] `suggestions` is not a JSON array. Use ["…"] or [{"label": "…", "prompt": "…"}].');
-      this._suggestions = [];
-    }
+    this._suggestions = parseSuggestions(raw);
   }
   /**
    * The composer the click goes through, resolved the way the composer's own parts
@@ -5662,6 +6133,49 @@ class AparteSuggestions extends HTMLElement {
     this._composer?.removeEventListener("aparte-send", this._onSend);
     this._composer = this._resolveComposer();
     this._composer?.addEventListener("aparte-send", this._onSend);
+    this._watchTranscript();
+  }
+  /**
+   * The transcript of the chat the click goes to: the chat around the composer, else
+   * the one around this element, else the one `target` names (here, or on that
+   * composer). No last resort on the page, unlike the composer's: following another
+   * chat's transcript would be worse than following none, which falls back to the send.
+   */
+  _resolveTranscript() {
+    const id = this.getAttribute("target") ?? this._composer?.getAttribute("target") ?? null;
+    const chat = chatBoundaryOf(this._composer) ?? chatBoundaryOf(this) ?? (id ? document.getElementById(id) : null);
+    if (!chat) return null;
+    return chat.matches("aparte-chat-viewport") ? chat : chat.querySelector("aparte-chat-viewport");
+  }
+  /** Follow the transcript while `empty-only` is set, and stop following it when it is not. */
+  _watchTranscript() {
+    const transcript = this.hasAttribute("empty-only") ? this._resolveTranscript() : null;
+    if (transcript !== this._transcript) {
+      this._transcriptObserver?.disconnect();
+      this._transcriptObserver = null;
+      this._transcript = transcript;
+      if (transcript) {
+        this._transcriptObserver = new MutationObserver(this._applyEmptyOnly);
+        this._transcriptObserver.observe(transcript, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["loading"]
+        });
+      }
+    }
+    if (this.hasAttribute("empty-only")) this._applyEmptyOnly();
+  }
+  /** Set `hidden`, or lift it only when this element set it: a `hidden` the page wrote stays. */
+  _setHidden(hide) {
+    if (hide) {
+      if (this.hidden) return;
+      this.hidden = true;
+      this._hidOwn = true;
+    } else if (this._hidOwn) {
+      this.hidden = false;
+      this._hidOwn = false;
+    }
   }
   _render() {
     this.replaceChildren();
@@ -5778,6 +6292,17 @@ class AparteContext extends HTMLElement {
   get window() {
     return this._window();
   }
+  /**
+   * Writes the `window` attribute; `null` gives the model's own window back.
+   *
+   * The setter has to exist: React 19 and Svelte assign the PROPERTY whenever the
+   * element has one of that name, so `<aparte-context window={8000}>` — a spelling
+   * both wrappers type as valid — hit a getter alone and threw.
+   */
+  set window(value) {
+    if (value === null || value === void 0) this.removeAttribute("window");
+    else this.setAttribute("window", String(value));
+  }
   /** The current level, or `null` while nothing is shown. */
   get level() {
     return this._level;
@@ -6038,7 +6563,8 @@ class AparteScrollRail extends HTMLElement {
   _rebuild() {
     const bubbles = this._bubbles();
     const locale = resolveConfig(this).getLocale();
-    this.setAttribute("aria-label", locale.scrollRailLabel ?? "Conversation outline");
+    const railLabel = locale.scrollRailLabel ?? "Conversation outline";
+    if (this.getAttribute("aria-label") !== railLabel) this.setAttribute("aria-label", railLabel);
     if (bubbles.length < 2) {
       this.setAttribute("data-empty", "");
       this.replaceChildren();
@@ -6081,8 +6607,11 @@ class AparteScrollRail extends HTMLElement {
         tick.setAttribute("aria-label", label);
         tick.title = label;
       }
-      if (id === this._currentId) tick.setAttribute("aria-current", "true");
-      else tick.removeAttribute("aria-current");
+      if (id === this._currentId) {
+        if (tick.getAttribute("aria-current") !== "true") tick.setAttribute("aria-current", "true");
+      } else {
+        tick.removeAttribute("aria-current");
+      }
       const at = list.children[index] ?? null;
       if (at !== item) list.insertBefore(item, at);
       index++;
@@ -6264,7 +6793,7 @@ class AparteScrollRail extends HTMLElement {
   _onKeydown = (e) => {
     if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
     const ticks = Array.from(this.querySelectorAll(".aparte-scroll-rail__tick"));
-    const index = ticks.indexOf(document.activeElement);
+    const index = ticks.indexOf(activeElementIn(this));
     if (index === -1) return;
     e.preventDefault();
     const next = e.key === "Home" ? 0 : e.key === "End" ? ticks.length - 1 : e.key === "ArrowDown" ? Math.min(ticks.length - 1, index + 1) : Math.max(0, index - 1);
@@ -6521,7 +7050,10 @@ class AparteSidebar extends HTMLElement {
    * 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]")) {
+    const selector = "[data-aparte-sidebar-toggle]";
+    const root = rootOf(this);
+    const controls = root === document ? Array.from(document.querySelectorAll(selector)) : [...root.querySelectorAll(selector), ...document.querySelectorAll(selector)];
+    for (const control of controls) {
       if (!this._drives(control)) continue;
       control.setAttribute("aria-expanded", String(!this.collapsed));
       control.setAttribute("aria-controls", this.id);
@@ -6594,7 +7126,7 @@ class AparteSidebar extends HTMLElement {
       if (focusable.length === 0) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
-      const active = document.activeElement;
+      const active = activeElementIn(this);
       if (!this.contains(active)) {
         e.preventDefault();
         first.focus();
@@ -6609,7 +7141,7 @@ class AparteSidebar extends HTMLElement {
   };
   /** 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]");
+    const control = eventOrigin(e)?.closest?.("[data-aparte-sidebar-toggle]");
     if (!control) return;
     if (!this._drives(control)) return;
     this.toggle(control);
@@ -6658,7 +7190,7 @@ 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");
+  return control.closest("aparte-sidebar") ?? rootOf(control).querySelector("aparte-sidebar") ?? document.querySelector("aparte-sidebar");
 }
 function fold(text) {
   return text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
@@ -7385,15 +7917,16 @@ class AparteSplit extends HTMLElement {
    * first on the page. Same shape as `[data-aparte-sidebar-toggle]`.
    */
   _onDocumentClick = (e) => {
-    const control = e.target?.closest?.("[data-aparte-split-pane]");
+    const control = eventOrigin(e)?.closest?.("[data-aparte-split-pane]");
     if (!control) return;
     const value = (control.getAttribute("data-aparte-split-pane") ?? "").trim();
     const which = value === "start" || value === "end" ? value : null;
     const named = which ? "" : value;
     if (named) {
       if (named !== this.id) return;
-    } else if ((control.closest("aparte-split") ?? document.querySelector("aparte-split")) !== this) {
-      return;
+    } else {
+      const nearest = control.closest("aparte-split") ?? rootOf(control).querySelector("aparte-split") ?? document.querySelector("aparte-split");
+      if (nearest !== this) return;
     }
     this.showPane(which ?? (this.pane === "start" ? "end" : "start"));
   };
@@ -7525,10 +8058,10 @@ export {
   installDialogTriggersOnce,
   isAwaitingReply,
   R as isFormatAdapter,
-  S as isSafeUrl,
+  isSafeUrl,
   T as isSegmentSettled,
   U as parseAparteEventStream,
-  V as parseMarkdownToSegments,
+  parseMarkdownToSegments,
   populateBubbleFromMessage,
   X as readableToAsyncIterable,
   registerAllComponents,