@aparte/core 0.12.1 → 0.13.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a4 as subscribeConfigChange, $ as resolveConfig, a1 as runWithConfig, p as AparteElicitationAbortError, x as buildApprovalPanel, y as buildElicitationPanel, K as escapeAttr, F as cssEscape, a7 as mergeSegmentUpdate, L as escapeHtml, O as getSegmentRenderer, P as installDefaultRenderersOnce, s as AparteMessageRepository, a8 as stampSegmentActivity, a9 as stampSegmentOnInsert, aa as stampSegmentOnUpdate, ab as renumberSegments, ac as openSegmentIds, ad as isTerminalStatus, ae as adoptMessageSegments, Q as isAwaitingReply, W as populateBubbleFromMessage, a6 as uuid, a0 as revokeAttachmentUrls } from "./is-awaiting-reply-BWTDvQ__.js";
-import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, q, r, t, u, v, w, z, B, C, D, E, G, H, I, J, M, N, R, S, T, U, V, X, Y, Z, _, a2, a3, a5 } from "./is-awaiting-reply-BWTDvQ__.js";
+import { $ as resolveConfig, a4 as subscribeConfigChange, a1 as runWithConfig, p as AparteElicitationAbortError, x as buildApprovalPanel, y as buildElicitationPanel, K as escapeAttr, F as cssEscape, a7 as mergeSegmentUpdate, L as escapeHtml, a8 as writeStreamedMarkdown, O as getSegmentRenderer, P as installDefaultRenderersOnce, s 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 } from "./is-awaiting-reply-CWp1ffHh.js";
+import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, q, r, t, u, v, w, z, B, C, D, E, G, H, I, J, M, N, R, S, T, U, V, X, Y, Z, _, a2, a3, a5 } from "./is-awaiting-reply-CWp1ffHh.js";
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -132,6 +132,7 @@ class AparteOptgroup extends HTMLElement {
         if (this.collapsible) {
           const chevron = document.createElement("span");
           chevron.className = "aparte-optgroup-chevron";
+          chevron.innerHTML = resolveConfig(this).getIcon("expand");
           header.appendChild(chevron);
           header.style.cursor = "pointer";
           header.addEventListener("click", (e2) => {
@@ -204,8 +205,7 @@ class AparteSelect extends HTMLElement {
    * document-level handlers and could not touch this one.
    *
    * This is verbatim the bug class `aparte-chat-viewport` documents having fixed
-   * for its own listeners; a repo sweep found this as the last inline-arrow
-   * listener on a persistent node.
+   * for its own listeners.
    */
   _boundHandleOptionClick = this._handleOptionClick.bind(this);
   _boundHandleDocumentClick = this._handleDocumentClick.bind(this);
@@ -289,7 +289,7 @@ class AparteSelect extends HTMLElement {
     labelSpan.textContent = placeholder;
     const chevronSpan = document.createElement("span");
     chevronSpan.className = "aparte-select-chevron";
-    chevronSpan.innerHTML = `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>`;
+    chevronSpan.innerHTML = resolveConfig(this).getIcon("expand");
     trigger.append(labelSpan, chevronSpan);
     const dropdown = document.createElement("div");
     dropdown.className = "aparte-select-dropdown";
@@ -631,6 +631,32 @@ class AparteProgressSpinner extends HTMLElement {
 if (!customElements.get("aparte-progress-spinner")) {
   customElements.define("aparte-progress-spinner", AparteProgressSpinner);
 }
+class AparteIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["name"];
+  }
+  _unsubscribe = null;
+  connectedCallback() {
+    this._render();
+    this._unsubscribe = subscribeConfigChange(this, () => this._render());
+  }
+  disconnectedCallback() {
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+  _render() {
+    const name = this.getAttribute("name");
+    const glyph = name ? resolveConfig(this).getIconProvider()[name]?.() : null;
+    this.innerHTML = glyph ?? "";
+    this.firstElementChild?.setAttribute("aria-hidden", "true");
+  }
+}
+if (!customElements.get("aparte-icon")) {
+  customElements.define("aparte-icon", AparteIcon);
+}
 class AparteElicitation extends HTMLElement {
   _pending = null;
   /**
@@ -705,11 +731,17 @@ class AparteElicitation extends HTMLElement {
     return new Promise((resolve, reject) => {
       let done = false;
       const slot = {};
+      const focusedBefore = document.activeElement;
       const close = () => {
         if (done) return false;
         done = true;
         this._pending = null;
+        const active = document.activeElement;
+        const focusWasInPanel = active instanceof Node && composer.contains(active);
         composer.hidePanel(slot.token);
+        if (focusWasInPanel && focusedBefore instanceof HTMLElement && focusedBefore.isConnected) {
+          focusedBefore.focus();
+        }
         return true;
       };
       const settle = (result) => {
@@ -727,17 +759,15 @@ class AparteElicitation extends HTMLElement {
       }
       const cfg = resolveConfig(this);
       if (request.kind === "approval") {
+        const approvalMode = () => panel2.isComplete() ? "submit" : "none";
         const panel2 = runWithConfig(cfg, () => buildApprovalPanel(request.message, request.options ?? [], () => {
-          composer.setPanelSubmitEnabled(panel2.isComplete(), "submit");
+          composer.setPanelSubmitEnabled(panel2.isComplete(), approvalMode());
         }));
         panel2.onSettle((answer) => settle({ action: "accept", content: answer }));
         this._pending = { abort: () => fail(), composer, relabel: () => panel2.relabel() };
         slot.token = composer.showPanel(panel2.el, {
           submitEnabled: panel2.isComplete(),
-          mode: "submit",
-          // The composer's button carries the INSTRUCTION, which is written
-          // text — exactly the act that button already means. The options
-          // never route through it: a decision is its own click.
+          mode: approvalMode(),
           onSubmit: () => {
             if (panel2.isComplete()) settle({ action: "accept", content: panel2.getContent() });
           },
@@ -752,10 +782,11 @@ class AparteElicitation extends HTMLElement {
       }));
       const skip = document.createElement("button");
       skip.type = "button";
-      skip.className = "aparte-elic-skip";
+      skip.className = "aparte-btn aparte-elic-skip";
       skip.textContent = cfg.t("elicitationSkip");
       skip.addEventListener("click", () => settle({ action: "decline" }));
       panel.dismiss.appendChild(skip);
+      panel.onSettle((content) => settle({ action: "accept", content }));
       this._pending = {
         abort: () => fail(),
         composer,
@@ -968,6 +999,14 @@ function warnMissingRenderer(type) {
   _warnedNoRenderer = true;
   console.warn(`[aparte] No renderer for segment "${type}". Register one with registerSegmentRenderer({ type: '${type}', render }) from @aparte/core — see https://apartejs.dev/guides/customization/#custom-segment-types`);
 }
+function unrenderedSegment(segment) {
+  const fallback = typeof segment.fallback === "string" && segment.fallback.trim() ? segment.fallback : null;
+  if (!fallback) warnMissingRenderer(segment.type);
+  const el = document.createElement("div");
+  el.className = fallback ? "aparte-segment aparte-segment-fallback" : "aparte-segment aparte-segment-unknown";
+  el.textContent = fallback ?? `[Unknown segment type: ${segment.type}]`;
+  return el;
+}
 function resolveSegmentRenderer(type, config) {
   const renderer = getSegmentRenderer(type, config);
   if (renderer) return renderer;
@@ -980,7 +1019,6 @@ function segmentRenderResultToElement(result) {
   wrapper.innerHTML = result;
   return wrapper.firstElementChild;
 }
-const INFO_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>';
 class AparteChatBubble extends HTMLElement {
   _contentEl = null;
   _segmentsEl = null;
@@ -1106,6 +1144,7 @@ class AparteChatBubble extends HTMLElement {
         break;
       case "content":
         this._content = newValue || "";
+        this._resetMarkdownStream();
         this._updateContent();
         break;
       case "timestamp":
@@ -1131,8 +1170,20 @@ class AparteChatBubble extends HTMLElement {
   setContent(content) {
     this._content = content;
     this.setAttribute("content", content);
+    this._resetMarkdownStream();
     this._updateContent();
   }
+  /**
+   * Drop the incremental Markdown parser's state.
+   *
+   * Only needed where `_content` is REPLACED rather than grown. `appendToken` grows it, so
+   * the parser's cursor stays valid there — which is the whole point of the seam.
+   */
+  _resetMarkdownStream() {
+    const host = this;
+    if (host._aparteSmd) host._aparteSmd.renderer.end();
+    host._aparteSmd = void 0;
+  }
   /** Get current content */
   getContent() {
     return this._content;
@@ -1267,11 +1318,7 @@ class AparteChatBubble extends HTMLElement {
         runWithConfig(this._cfg, () => renderer.setup?.(el, segment));
       }
     } else {
-      warnMissingRenderer(segment.type);
-      const fallback = document.createElement("div");
-      fallback.className = "aparte-segment aparte-segment-unknown";
-      fallback.textContent = `[Unknown segment type: ${segment.type}]`;
-      this._segmentsEl.appendChild(fallback);
+      this._segmentsEl.appendChild(unrenderedSegment(segment));
     }
     if (this._contentEl) this._contentEl.style.display = "none";
     this._reflectError();
@@ -1350,9 +1397,16 @@ class AparteChatBubble extends HTMLElement {
           </div>
           <div class="aparte-footer">
             <div class="aparte-branch-picker" hidden>
-              <button class="aparte-branch-prev" aria-label="${escapeAttr(this._cfg.getLocale().previousResponse ?? "Previous response")}">&#8249;</button>
+              <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-branch-prev" aria-label="${escapeAttr(this._cfg.getLocale().previousResponse ?? "Previous response")}">&#8249;</button>
               <span class="aparte-branch-label">1 / 1</span>
-              <button class="aparte-branch-next" aria-label="${escapeAttr(this._cfg.getLocale().nextResponse ?? "Next response")}">&#8250;</button>
+              <!-- The move has to be ANNOUNCED. Pressing the arrows deliberately does not
+                   take focus, so without a live region a screen-reader user gets the new
+                   branch and no indication anything changed. The visible label cannot be
+                   the region itself: a custom sibling-nav renderer may replace it with
+                   dots, which reads as nothing. No new locale key — the position is
+                   digits, and the buttons beside it already carry translated labels. -->
+              <span class="aparte-sr-only aparte-branch-status" aria-live="polite"></span>
+              <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-branch-next" aria-label="${escapeAttr(this._cfg.getLocale().nextResponse ?? "Next response")}">&#8250;</button>
             </div>
             <div class="aparte-action-bar" role="toolbar" aria-label="${escapeAttr(this._cfg.getLocale().messageActions ?? "Message actions")}"></div>
           </div>
@@ -1453,7 +1507,10 @@ class AparteChatBubble extends HTMLElement {
       return;
     }
     this._contentEl.style.display = "";
-    this._contentEl.innerHTML = this._cfg.renderMarkdown(this._content);
+    runWithConfig(
+      this._cfg,
+      () => writeStreamedMarkdown(this, this._contentEl, this._content, this._streaming)
+    );
     this._updateWaiting();
     if (!this._streaming) this._highlightContentCode();
   }
@@ -1496,11 +1553,7 @@ class AparteChatBubble extends HTMLElement {
           runWithConfig(this._cfg, () => renderer.setup?.(el, segment));
         }
       } else {
-        warnMissingRenderer(segment.type);
-        const fallback = document.createElement("div");
-        fallback.className = "aparte-segment aparte-segment-unknown";
-        fallback.textContent = `[Unknown segment type: ${segment.type}]`;
-        this._segmentsEl.appendChild(fallback);
+        this._segmentsEl.appendChild(unrenderedSegment(segment));
       }
     }
     if (this._contentEl) {
@@ -1649,6 +1702,11 @@ class AparteChatBubble extends HTMLElement {
         label.textContent = `${this._siblingIndex + 1} / ${this._siblingCount}`;
       }
     }
+    const status = this._branchPickerEl.querySelector(".aparte-branch-status");
+    if (status) {
+      const position = `${this._siblingIndex + 1} / ${this._siblingCount}`;
+      if (status.textContent !== position) status.textContent = position;
+    }
     const prevBtn = this._branchPickerEl.querySelector(".aparte-branch-prev");
     const nextBtn = this._branchPickerEl.querySelector(".aparte-branch-next");
     if (prevBtn) prevBtn.disabled = this._siblingIndex === 0;
@@ -1715,7 +1773,7 @@ class AparteChatBubble extends HTMLElement {
       const roles = a4.bubble?.roles ?? ["user", "assistant"];
       if (!roles.includes(this._role)) continue;
       const btn = document.createElement("button");
-      btn.className = "aparte-action-btn aparte-action-custom";
+      btn.className = "aparte-btn aparte-btn--icon aparte-action-btn aparte-action-custom";
       btn.dataset["action"] = `custom:${a4.id}`;
       btn.setAttribute("aria-label", a4.label);
       btn.setAttribute("title", a4.label);
@@ -1729,28 +1787,28 @@ class AparteChatBubble extends HTMLElement {
     switch (action) {
       case "copy": {
         const l2 = locale.copy ?? "Copy";
-        return `<button class="aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.copy()}</button>`;
+        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.copy()}</button>`;
       }
       case "edit": {
         const l2 = locale.edit ?? "Edit message";
-        return `<button class="aparte-action-btn aparte-action-edit" data-action="edit" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.edit()}</button>`;
+        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-edit" data-action="edit" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.edit()}</button>`;
       }
       case "retry": {
         const l2 = locale.retry ?? "Retry";
-        return `<button class="aparte-action-btn aparte-action-retry" data-action="retry" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.retry()}</button>`;
+        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-retry" data-action="retry" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.retry()}</button>`;
       }
       case "thumbUp": {
         const l2 = locale.feedbackPositive ?? "Good response";
-        return `<button class="aparte-action-btn aparte-action-feedback-pos" data-action="feedback-positive" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbUp()}</button>`;
+        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-feedback-pos" data-action="feedback-positive" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbUp()}</button>`;
       }
       case "thumbDown": {
         const l2 = locale.feedbackNegative ?? "Bad response";
-        return `<button class="aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbDown()}</button>`;
+        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${icons.thumbDown()}</button>`;
       }
       case "info": {
         if (!this._usage) return "";
         const l2 = locale.messageInfo ?? "Details";
-        return `<button class="aparte-action-btn aparte-action-info" data-action="info" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${INFO_ICON_SVG}</button>`;
+        return `<button class="aparte-btn aparte-btn--icon aparte-action-btn aparte-action-info" data-action="info" aria-label="${escapeAttr(l2)}" title="${escapeAttr(l2)}">${this._cfg.getIcon("info")}</button>`;
       }
       default:
         return "";
@@ -1762,7 +1820,7 @@ class AparteChatBubble extends HTMLElement {
     const locale = this._cfg.getLocale();
     const saveLabel = locale.editConfirm ?? "Save";
     const cancelLabel = locale.editCancel ?? "Cancel";
-    this._actionBarEl.innerHTML = `<button class="aparte-action-btn aparte-action-edit-save" data-action="edit-save" aria-label="${escapeAttr(saveLabel)}" title="${escapeAttr(saveLabel)}">${this._cfg.getIcon("check")}</button><button class="aparte-action-btn aparte-action-edit-cancel" data-action="edit-cancel" aria-label="${escapeAttr(cancelLabel)}" title="${escapeAttr(cancelLabel)}">${this._cfg.getIcon("close")}</button>`;
+    this._actionBarEl.innerHTML = `<button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--success aparte-action-btn aparte-action-edit-save" data-action="edit-save" aria-label="${escapeAttr(saveLabel)}" title="${escapeAttr(saveLabel)}">${this._cfg.getIcon("check")}</button><button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--danger aparte-action-btn aparte-action-edit-cancel" data-action="edit-cancel" aria-label="${escapeAttr(cancelLabel)}" title="${escapeAttr(cancelLabel)}">${this._cfg.getIcon("close")}</button>`;
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
       btn.addEventListener("click", (e2) => this._handleActionClick(e2));
     });
@@ -2100,6 +2158,8 @@ class AparteChatViewport extends HTMLElement {
   _layoutTransitionMs = 0;
   _repo = new AparteMessageRepository();
   _isAutoScrollEnabled = true;
+  /** The last scroll position we saw, so growth can be told from a gesture. */
+  _lastScrollTop = 0;
   _scrollThreshold = 50;
   /** When true, the next _autoScroll() call uses smooth instead of instant, then resets. */
   _smoothScrollOnce = false;
@@ -2572,6 +2632,11 @@ class AparteChatViewport extends HTMLElement {
   getMessage(messageId) {
     return this._repo.getMessageById(messageId);
   }
+  /**
+   * The messages on the currently ACTIVE path, root → head — not the whole tree.
+   * A message that was retried contributes only the branch currently selected;
+   * `exportTree()` is what returns every sibling.
+   */
   getMessages() {
     return this._repo.getMessages();
   }
@@ -2836,11 +2901,11 @@ class AparteChatViewport extends HTMLElement {
       this.appendChild(container);
       this._container = container;
       this._scrollBtn = document.createElement("button");
-      this._scrollBtn.className = "aparte-scroll-btn aparte-scroll-btn--hidden";
+      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");
       this._scrollBtn.setAttribute("aria-label", "Scroll to bottom");
       const scrollIcon = resolveConfig(this).getIcon("scrollDown");
-      this._scrollBtn.innerHTML = scrollIcon || `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>`;
+      this._scrollBtn.innerHTML = scrollIcon;
       this.appendChild(this._scrollBtn);
     } else {
       this._container = this.querySelector(".aparte-viewport-container");
@@ -2869,11 +2934,11 @@ class AparteChatViewport extends HTMLElement {
     }
     this.classList.add("aparte-viewport--framework");
     const scrollBtn = document.createElement("button");
-    scrollBtn.className = "aparte-scroll-btn aparte-scroll-btn--hidden";
+    scrollBtn.className = "aparte-btn aparte-btn--surface aparte-btn--circle aparte-btn--lg aparte-scroll-btn aparte-scroll-btn--hidden";
     scrollBtn.setAttribute("type", "button");
     scrollBtn.setAttribute("aria-label", "Scroll to bottom");
     const scrollIcon = resolveConfig(this).getIcon("scrollDown");
-    scrollBtn.innerHTML = scrollIcon || `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>`;
+    scrollBtn.innerHTML = scrollIcon;
     this.appendChild(scrollBtn);
     this._scrollBtn = scrollBtn;
   }
@@ -2932,6 +2997,7 @@ class AparteChatViewport extends HTMLElement {
         this._scrollToBottom();
       }
       this._recalculateSpacer();
+      this._updateScrollButton();
     });
     const wrapper = this.querySelector(".aparte-messages-wrapper");
     if (this._container) {
@@ -2964,7 +3030,14 @@ class AparteChatViewport extends HTMLElement {
   }
   _handleScroll() {
     if (!this._container) return;
-    this._isAutoScrollEnabled = this._isAtBottom();
+    const top = this._container.scrollTop;
+    const readerWentUp = top < this._lastScrollTop - 1;
+    this._lastScrollTop = top;
+    if (this._isAtBottom()) {
+      this._isAutoScrollEnabled = true;
+    } else if (readerWentUp) {
+      this._isAutoScrollEnabled = false;
+    }
     this._updateScrollButton();
   }
   _scrollToBottom() {
@@ -3293,18 +3366,31 @@ class AparteComposer extends HTMLElement {
       submitEnabled: this._panelSubmitEnabled
     };
   }
+  /**
+   * Set the composer's value — both what a send will submit and what the editor
+   * shows. `<aparte-composer-input>` writes through any value it does not already
+   * hold, so this prefills the visible field (a template button, a restored draft)
+   * as readily as it stages text for an immediate `submit()`.
+   */
   setValue(value) {
     this._value = value;
     this._emit("value-change", { value });
   }
+  /** Append files to the pending attachments and notify. Does not de-duplicate. */
   addAttachments(files) {
     this._attachments = [...this._attachments, ...Array.from(files)];
     this._emit("attachments-change", { attachments: this._attachments });
   }
+  /**
+   * Drop one pending attachment and notify. Matched by IDENTITY — pass the same
+   * `File` object the composer handed you, not an equal one; two picks of the same
+   * file on disk are two distinct objects.
+   */
   removeAttachment(file) {
     this._attachments = this._attachments.filter((f2) => f2 !== file);
     this._emit("attachments-change", { attachments: this._attachments });
   }
+  /** Drop every pending attachment and notify. */
   clearAttachments() {
     this._attachments = [];
     this._emit("attachments-change", { attachments: [] });
@@ -3323,6 +3409,15 @@ class AparteComposer extends HTMLElement {
    * are the user's state and not an action to offer — hiding them would look like
    * losing them; and the toolbar, because switching model still does something.
    *
+   * The send button is the part the PANEL decides, through `mode`. `'submit'` and
+   * `'advance'` keep it; `'none'` says this panel has no act for it and it is not
+   * drawn. That third value is what a panel whose options settle on the first click
+   * needs — a single-choice question, an approval — and until it existed such a
+   * panel left a permanently disabled button beside options that never routed
+   * through it. Flip between them at any time with {@link setPanelSubmitEnabled},
+   * which is how a panel that grows an act (an "Other…" field, a written
+   * instruction) turns the button back on.
+   *
    * Declared with an attribute + CSS rather than the inline `style.display` this
    * used to set on a child: an attribute is themeable, is visible to a consumer's
    * own rules, and does not clobber a `display` the consumer had set (the restore
@@ -3346,6 +3441,7 @@ class AparteComposer extends HTMLElement {
     this._panelActive = true;
     this._panelSubmitEnabled = options?.submitEnabled ?? false;
     this._panelMode = options?.mode ?? "submit";
+    this._reflectPanelMode();
     this._panelOnSubmit = options?.onSubmit ?? null;
     this._panelOnEvict = options?.onEvict ?? null;
     const token = Symbol("aparte-composer-panel");
@@ -3405,6 +3501,7 @@ class AparteComposer extends HTMLElement {
     this._panelActive = false;
     this._panelSubmitEnabled = false;
     this._panelMode = "submit";
+    this._reflectPanelMode();
     this._panelOnSubmit = null;
     this._panelOnEvict = null;
     this._panelToken = null;
@@ -3423,8 +3520,21 @@ class AparteComposer extends HTMLElement {
     if (!this._panelActive) return;
     this._panelSubmitEnabled = enabled;
     if (mode) this._panelMode = mode;
+    this._reflectPanelMode();
     this._emit("panel-change", { active: true, submitEnabled: enabled, mode: this._panelMode });
   }
+  /**
+   * Publish the panel mode as an attribute, so CSS can act on it.
+   *
+   * The same reasoning `data-panel-active` is set for and the same one that took
+   * the old `style.display` off a child: an attribute is themeable, is visible to
+   * a consumer's own rules, and does not clobber what the consumer set. It is what
+   * lets `'none'` remove the send button without this component reaching into it.
+   */
+  _reflectPanelMode() {
+    if (this._panelActive) this.setAttribute("data-panel-mode", this._panelMode);
+    else this.removeAttribute("data-panel-mode");
+  }
   get panelActive() {
     return this._panelActive;
   }
@@ -3443,7 +3553,7 @@ class AparteComposer extends HTMLElement {
   /** Submit the current value. Called by aparte-composer-send or programmatically. */
   submit() {
     if (this._panelActive) {
-      if (this._panelSubmitEnabled) this._panelOnSubmit?.();
+      if (this._panelMode !== "none" && this._panelSubmitEnabled) this._panelOnSubmit?.();
       return;
     }
     if (this._streaming) {
@@ -3596,6 +3706,10 @@ class AparteComposerInput extends HTMLElement {
     if (name === "disabled") this._updateDisabled(value !== null);
   }
   // ── Public API ──────────────────────────────────────────────────────────
+  /**
+   * The editor's text, with `<br>` serialized back to newlines — `textContent`
+   * alone would collapse a multi-line draft onto a single line.
+   */
   getValue() {
     if (!this._editor) return "";
     let out = "";
@@ -3609,6 +3723,7 @@ class AparteComposerInput extends HTMLElement {
     walk(this._editor);
     return out.trim();
   }
+  /** Replace the editor's content and mirror the value onto the parent composer. */
   setValue(value) {
     if (!this._editor) return;
     this._editor.textContent = value;
@@ -3616,6 +3731,7 @@ class AparteComposerInput extends HTMLElement {
     this._adjustHeight();
     this._getRoot()?.setValue(value);
   }
+  /** Empty the editor and mirror the empty value onto the parent composer. */
   clear() {
     if (!this._editor) return;
     this._editor.innerHTML = "";
@@ -3623,9 +3739,11 @@ class AparteComposerInput extends HTMLElement {
     this._adjustHeight();
     this._getRoot()?.setValue("");
   }
+  /** Focus the inner contenteditable rather than the host element. */
   focus() {
     this._editor?.focus();
   }
+  /** Blur the inner contenteditable rather than the host element. */
   blur() {
     this._editor?.blur();
   }
@@ -3678,7 +3796,9 @@ class AparteComposerInput extends HTMLElement {
     );
     this._unsubscribes.push(
       root._on("value-change", ({ value }) => {
-        if (value === "" && this.getValue() !== "") this.clear();
+        if (this.getValue() === value.trim()) return;
+        if (value === "") this.clear();
+        else this.setValue(value);
       })
     );
     this._unsubscribes.push(
@@ -3814,7 +3934,7 @@ class AparteComposerSend extends HTMLElement {
     const root = this._getRoot();
     const disabled = !root || root.disabled || root.value.trim() === "";
     this.innerHTML = `<button
-            class="aparte-cs-button aparte-send-button"
+            class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-btn--icon aparte-cs-button aparte-send-button"
             aria-label="${escapeAttr(label)}"
             title="${escapeAttr(label)}"
             ${disabled ? "disabled" : ""}
@@ -3884,6 +4004,10 @@ class AparteComposerSend extends HTMLElement {
     const panel = this._panel;
     if (!this._button || !panel?.active) return;
     const cfg = resolveConfig(this);
+    if (panel.mode === "none") {
+      this._button.disabled = true;
+      return;
+    }
     const advancing = panel.mode === "advance";
     this._button.disabled = !panel.submitEnabled;
     this._button.innerHTML = advancing ? cfg.getIcon("nextBranch") : this._getSubmitIcon();
@@ -3962,7 +4086,7 @@ class AparteComposerCancel extends HTMLElement {
     const label = resolveConfig(this).t("stopButton") || "Stop";
     const icon = this._getStopIcon();
     this.innerHTML = `<button
-            class="aparte-cc-button"
+            class="aparte-btn aparte-btn--icon aparte-cc-button"
             aria-label="${escapeAttr(label)}"
             title="${escapeAttr(label)}"
             hidden
@@ -4005,7 +4129,6 @@ class AparteComposerCancel extends HTMLElement {
 if (!customElements.get("aparte-composer-cancel")) {
   customElements.define("aparte-composer-cancel", AparteComposerCancel);
 }
-const REMOVE_ICON = '<svg width="10" height="10" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5 2.5 3.205 5.295 6 2.5 8.795l.705.705L6 6.705l2.795 2.795.705-.705L6.705 6z"/></svg>';
 class AparteComposerAttachments extends HTMLElement {
   _unsubscribes = [];
   /** Object URLs minted for image previews — revoked on re-render/disconnect. */
@@ -4041,13 +4164,13 @@ class AparteComposerAttachments extends HTMLElement {
     this._revokeUrls();
     this.innerHTML = files.map((file) => {
       const name = this._escape(file.name);
-      const remove = `<button class="aparte-thumb__remove" type="button" aria-label="Remove ${name}">${REMOVE_ICON}</button>`;
+      const remove = `<button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-thumb__remove" type="button" aria-label="Remove ${name}">${resolveConfig(this).getIcon("close")}</button>`;
       if (file.type.startsWith("image/")) {
         const url = URL.createObjectURL(file);
         this._objectUrls.push(url);
-        return `<div class="aparte-thumb aparte-thumb--image" title="${escapeAttr(name)}"><img class="aparte-thumb__img" src="${escapeAttr(url)}" alt="${escapeAttr(name)}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${escapeAttr(name)}"><img class="aparte-thumb__img" src="${escapeAttr(url)}" alt="${escapeAttr(name)}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
       }
-      return `<div class="aparte-thumb aparte-thumb--file" title="${escapeAttr(name)}"><span class="aparte-thumb__ext">${this._escape(this._ext(file.name))}</span><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${escapeAttr(name)}"><span class="aparte-thumb__ext">${this._escape(this._ext(file.name))}</span><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
     }).join("");
     this.querySelectorAll(".aparte-thumb__remove").forEach((btn, i2) => {
       btn.addEventListener("click", (e2) => {
@@ -4136,15 +4259,15 @@ class AparteComposerAddAttachment extends HTMLElement {
     const label = cfg.t("actionUpload") || "Attach file";
     this._button.setAttribute("aria-label", label);
     this._button.setAttribute("title", label);
-    this._button.innerHTML = cfg.getIcon("paperclip") || this._defaultIcon();
+    this._button.innerHTML = cfg.getIcon("paperclip");
   }
   _render() {
     if (this.querySelector(".aparte-caa-button")) return;
     const label = resolveConfig(this).t("actionUpload") || "Attach file";
-    const icon = resolveConfig(this).getIcon("paperclip") || this._defaultIcon();
+    const icon = resolveConfig(this).getIcon("paperclip");
     const disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
     this.innerHTML = `<button
-            class="aparte-caa-button aparte-action-button"
+            class="aparte-btn aparte-btn--icon aparte-caa-button aparte-action-button"
             aria-label="${escapeAttr(label)}"
             title="${escapeAttr(label)}"
             type="button"
@@ -4213,9 +4336,6 @@ class AparteComposerAddAttachment extends HTMLElement {
       root.removeEventListener("drop", onDrop);
     };
   }
-  _defaultIcon() {
-    return `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>`;
-  }
 }
 if (!customElements.get("aparte-composer-add-attachment")) {
   customElements.define("aparte-composer-add-attachment", AparteComposerAddAttachment);
@@ -4263,7 +4383,7 @@ class AparteComposerAction extends HTMLElement {
     const icon = this._resolveIcon(this.getAttribute("icon") ?? "");
     const disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
     this.innerHTML = `<button
-            class="aparte-cact-button aparte-action-button"
+            class="aparte-btn aparte-btn--icon aparte-cact-button aparte-action-button"
             aria-label="${label}"
             title="${label}"
             type="button"
@@ -4298,7 +4418,6 @@ class AparteComposerAction extends HTMLElement {
     if (icon.trimStart().startsWith("<")) return icon;
     return resolveConfig(this).getIcon(icon) ?? icon;
   }
-  /** Escape a value before it lands in a double-quoted HTML attribute. */
 }
 if (!customElements.get("aparte-composer-action")) {
   customElements.define("aparte-composer-action", AparteComposerAction);
@@ -4400,10 +4519,10 @@ class AparteConversationList extends HTMLElement {
     const unarchiveLabel = this._esc(locale["unarchiveConversation"] ?? "Unarchive conversation");
     const archiveAction = isArchived ? "unarchive" : "archive";
     const archiveAriaLabel = isArchived ? unarchiveLabel : archiveLabel;
-    const archiveIcon = isArchived ? `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 8 21 8"/><path d="M5 8v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8"/><polyline points="9 14 12 11 15 14"/><line x1="12" y1="11" x2="12" y2="19"/></svg>` : `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 8 21 8"/><path d="M5 8v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8"/><polyline points="9 14 12 17 15 14"/><line x1="12" y1="11" x2="12" y2="17"/></svg>`;
+    const archiveGlyph = resolveConfig(this).getIcon(isArchived ? "unarchive" : "archive");
     return `
 <div
-  class="aparte-conv-item${activeClass}${archivedClass}"
+  class="aparte-menu__item aparte-conv-item${activeClass}${archivedClass}"
   role="button"
   tabindex="0"
   data-conv-id="${escapedId}"
@@ -4411,24 +4530,21 @@ class AparteConversationList extends HTMLElement {
 >
   <span class="aparte-conv-item__title">${escapedTitle}</span>
   <button
-    class="aparte-conv-item__archive"
+    class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-conv-item__archive"
     type="button"
     data-archive-id="${escapedId}"
     data-archive-action="${escapeAttr(archiveAction)}"
     aria-label="${escapeAttr(archiveAriaLabel)}"
     tabindex="0"
-  >${archiveIcon}</button>
+  >${archiveGlyph}</button>
   <button
-    class="aparte-conv-item__delete"
+    class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-conv-item__delete"
     type="button"
     data-delete-id="${escapedId}"
     aria-label="${deleteLabel}"
     tabindex="0"
   >
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-      stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-      <path d="M18 6L6 18M6 6l12 12"/>
-    </svg>
+    ${resolveConfig(this).getIcon("close")}
   </button>
 </div>`;
   }
@@ -4471,11 +4587,10 @@ class AparteConversationList extends HTMLElement {
   };
   _onKeydown = (e2) => {
     if (e2.key !== "Enter" && e2.key !== " ") return;
-    const item = e2.target.closest("[data-conv-id]");
-    if (item) {
-      e2.preventDefault();
-      item.click();
-    }
+    const target = e2.target;
+    if (!target.matches("[data-conv-id]")) return;
+    e2.preventDefault();
+    target.click();
   };
   /** Update active class without full re-render (perf optimisation). */
   _updateActiveState() {
@@ -4535,6 +4650,7 @@ export {
   AparteElicitationAbortError,
   q as AparteError,
   r as AparteErrorCode,
+  AparteIcon,
   AparteMessageRepository,
   AparteOptgroup,
   AparteOption,