@aparte/core 0.3.0-alpha.0 → 0.5.0-alpha.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { N as resolveConfig, y as getSegmentRenderer, O as runWithConfig, M as MessageRepository, H as populateBubbleFromMessage, d as AparteConfig, p as buildElicitationPanel } from "./index-CW2BCAqn.js";
-import { A, a, b, c, e, f, g, h, i, B, C, D, j, k, l, m, n, o, q, r, s, t, u, v, w, x, z, E, F, G, I, J, K, L, P } from "./index-CW2BCAqn.js";
+import { R as resolveConfig, S as runWithConfig, F as getSegmentRenderer, U as installDefaultRenderersOnce, M as MessageRepository, G as isAwaitingReply, L as populateBubbleFromMessage, d as AparteConfig, r as buildElicitationPanel } from "./index-Dn7TH14G.js";
+import { A, a, b, c, e, f, g, h, i, B, C, D, j, k, l, m, n, o, p, q, s, t, u, v, w, x, y, z, E, H, I, J, K, N, O, P, Q, T } from "./index-Dn7TH14G.js";
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -73,6 +73,8 @@ if (!customElements.get("aparte-option")) {
   customElements.define("aparte-option", AparteOption);
 }
 class AparteOptgroup extends HTMLElement {
+  /** Ids for the label span the group points `aria-labelledby` at. */
+  static _labelIdSeq = 0;
   static get observedAttributes() {
     return ["label", "collapsible", "collapsed", "loading"];
   }
@@ -121,10 +123,11 @@ class AparteOptgroup extends HTMLElement {
       if (!existingHeader) {
         const header = document.createElement("div");
         header.className = "aparte-optgroup-header";
-        header.setAttribute("aria-label", this.label);
         const labelSpan = document.createElement("span");
         labelSpan.className = "aparte-optgroup-label";
+        labelSpan.id = `aparte-optgroup-label-${++AparteOptgroup._labelIdSeq}`;
         labelSpan.textContent = this.label;
+        this.setAttribute("aria-labelledby", labelSpan.id);
         header.appendChild(labelSpan);
         if (this.collapsible) {
           const chevron = document.createElement("span");
@@ -179,6 +182,8 @@ if (!customElements.get("aparte-optgroup")) {
 }
 class AparteSelect extends HTMLElement {
   static _optIdSeq = 0;
+  /** Fallback ids for the listbox `aria-controls` target when the host has no id. */
+  static _listboxSeq = 0;
   _value = "";
   _isOpen = false;
   _activeIndex = -1;
@@ -271,17 +276,21 @@ class AparteSelect extends HTMLElement {
     trigger.append(labelSpan, chevronSpan);
     const dropdown = document.createElement("div");
     dropdown.className = "aparte-select-dropdown";
-    dropdown.setAttribute("role", "listbox");
     dropdown.hidden = !this._isOpen;
     if (searchable) {
       const searchInput = document.createElement("input");
       searchInput.type = "text";
       searchInput.className = "aparte-select-search";
       searchInput.placeholder = "Search...";
+      searchInput.setAttribute("aria-label", "Search options");
       dropdown.appendChild(searchInput);
     }
     const optionsContainer = document.createElement("div");
     optionsContainer.className = "aparte-select-options";
+    optionsContainer.setAttribute("role", "listbox");
+    optionsContainer.setAttribute("aria-label", trigger.getAttribute("aria-label") ?? placeholder);
+    optionsContainer.id = this.id ? `${this.id}-listbox` : `aparte-listbox-${++AparteSelect._listboxSeq}`;
+    trigger.setAttribute("aria-controls", optionsContainer.id);
     slottedChildren.forEach((child) => {
       if (child.tagName === "APARTE-OPTION" || child.tagName === "APARTE-OPTGROUP") {
         optionsContainer.appendChild(child);
@@ -589,9 +598,15 @@ if (!customElements.get("aparte-progress-spinner")) {
 }
 class AparteChat extends HTMLElement {
   static get observedAttributes() {
-    return ["placeholder", "disabled", "center-empty"];
+    return ["placeholder", "disabled", "center-empty", "attachments"];
   }
   _observer = null;
+  /**
+   * True only for the composition THIS element injected. An author-provided
+   * composer (or a `framework-managed` host) is never edited by the attachments
+   * toggle below — those own their own markup.
+   */
+  _ownsShell = false;
   connectedCallback() {
     this._render();
     this._forwardAttr("placeholder");
@@ -608,6 +623,10 @@ class AparteChat extends HTMLElement {
       this._syncEmptyWatch();
       return;
     }
+    if (name === "attachments") {
+      this._syncAttachments();
+      return;
+    }
     const composer = this.querySelector("aparte-composer");
     if (!composer) return;
     if (newValue !== null) composer.setAttribute(name, newValue);
@@ -626,17 +645,43 @@ class AparteChat extends HTMLElement {
     if (this.querySelector("aparte-chat-viewport")) return;
     const placeholder = this.getAttribute("placeholder");
     const composerAttrs = (placeholder !== null ? ` placeholder="${this._escapeAttr(placeholder)}"` : "") + (this.hasAttribute("disabled") ? " disabled" : "");
+    const attachments = this.hasAttribute("attachments");
     this.innerHTML = `
       <aparte-chat-viewport></aparte-chat-viewport>
       <aparte-composer${composerAttrs}>
         <div class="aparte-composer-shell">
+          ${attachments ? "<aparte-composer-attachments></aparte-composer-attachments>" : ""}
           <div class="aparte-composer-row">
+            ${attachments ? "<aparte-composer-add-attachment></aparte-composer-add-attachment>" : ""}
             <aparte-composer-input></aparte-composer-input>
             <aparte-composer-send></aparte-composer-send>
           </div>
         </div>
       </aparte-composer>
     `;
+    this._ownsShell = true;
+  }
+  /**
+   * Add/remove the two attachment primitives on the composition we injected, so
+   * toggling the attribute after mount works like the wrappers' reactive prop
+   * (there, a re-render does it). Author-provided markup is left alone.
+   */
+  _syncAttachments() {
+    if (!this._ownsShell) return;
+    const composer = this.composer;
+    const shell = composer?.querySelector(".aparte-composer-shell");
+    const row = shell?.querySelector(".aparte-composer-row");
+    if (!composer || !shell || !row) return;
+    const strip = shell.querySelector("aparte-composer-attachments");
+    const picker = row.querySelector("aparte-composer-add-attachment");
+    if (this.hasAttribute("attachments")) {
+      if (!strip) shell.insertBefore(document.createElement("aparte-composer-attachments"), row);
+      if (!picker) row.insertBefore(document.createElement("aparte-composer-add-attachment"), row.firstChild);
+      return;
+    }
+    strip?.remove();
+    picker?.remove();
+    composer.clearAttachments();
   }
   /** Set an attribute on the inner composer only when the shell carries it. */
   _forwardAttr(name) {
@@ -676,7 +721,13 @@ let _warnedNoRenderer = false;
 function warnMissingRenderer(type) {
   if (_warnedNoRenderer) return;
   _warnedNoRenderer = true;
-  console.warn(`[aparte] No renderer for segment "${type}". Did you call registerDefaultRenderers() from @aparte/core?`);
+  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 resolveSegmentRenderer(type) {
+  const renderer = getSegmentRenderer(type);
+  if (renderer) return renderer;
+  installDefaultRenderersOnce();
+  return getSegmentRenderer(type);
 }
 function segmentRenderResultToElement(result) {
   if (result instanceof HTMLElement) return result;
@@ -691,6 +742,7 @@ class AparteChatBubble extends HTMLElement {
   _attachmentsEl = null;
   _actionBarEl = null;
   _branchPickerEl = null;
+  _footerEl = null;
   _content = "";
   _streaming = false;
   _segments = [];
@@ -795,11 +847,13 @@ class AparteChatBubble extends HTMLElement {
   setSegments(segments) {
     this._segments = segments;
     this._renderSegments();
+    this._updateWaiting();
   }
   /** Add a segment */
   addSegment(segment) {
     this._segments.push(segment);
     this._appendSegmentEl(segment);
+    this._updateWaiting();
   }
   /** Update a specific segment */
   updateSegment(segmentId, updates) {
@@ -830,6 +884,7 @@ class AparteChatBubble extends HTMLElement {
     }
     const el = this._segmentsEl?.querySelector(`[data-segment-id="${cssEscape(segmentId)}"]`);
     el?.remove();
+    this._updateWaiting();
   }
   /** Set attachments (chips shown above message content, user role only) */
   setAttachments(attachments) {
@@ -838,8 +893,12 @@ class AparteChatBubble extends HTMLElement {
   }
   /**
    * Set token usage + timing for this message (assistant only).
-   * Renders the info ("i") action in the action bar; clicking it opens
-   * the app-owned stats popover (`aparte-message-info`).
+   *
+   * This is the *precondition* for the info ("i") action, not the trigger: the
+   * button appears only if the app also declared it wants it —
+   * `AparteConfig.setBubbleActions({ info: true })` — because the stats popover it
+   * opens (`aparte-message-info`) is the app's, and core has none. Without usage
+   * there is nothing to show, so the button never renders either way.
    */
   setUsage(usage) {
     this._usage = usage ?? null;
@@ -892,7 +951,7 @@ class AparteChatBubble extends HTMLElement {
       console.warn(`[AparteChatBubble] _appendSegmentEl ABORT: _segmentsEl is null`);
       return;
     }
-    const renderer = getSegmentRenderer(segment.type);
+    const renderer = resolveSegmentRenderer(segment.type);
     if (renderer) {
       const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
       if (el) {
@@ -915,7 +974,7 @@ class AparteChatBubble extends HTMLElement {
       this._renderSegments();
       return;
     }
-    const renderer = getSegmentRenderer(segment.type);
+    const renderer = resolveSegmentRenderer(segment.type);
     if (!renderer) return;
     if (renderer.update) {
       runWithConfig(this._cfg, () => renderer.update(el, segment));
@@ -976,6 +1035,10 @@ class AparteChatBubble extends HTMLElement {
           <div class="aparte-message-content">
             <div class="aparte-segments"></div>
             <div class="aparte-content"></div>
+            <div class="aparte-waiting" hidden>
+              <span class="aparte-dots" aria-hidden="true"><span class="aparte-dot"></span><span class="aparte-dot"></span><span class="aparte-dot"></span></span>
+              <span class="aparte-sr-only"></span>
+            </div>
           </div>
           <div class="aparte-footer">
             <div class="aparte-branch-picker" hidden>
@@ -994,9 +1057,32 @@ class AparteChatBubble extends HTMLElement {
     this._attachmentsEl = this.querySelector(".aparte-attachments");
     this._actionBarEl = this.querySelector(".aparte-action-bar");
     this._branchPickerEl = this.querySelector(".aparte-branch-picker");
+    this._footerEl = this.querySelector(".aparte-footer");
     this._setupBranchPickerListeners();
     this._updateActionBar();
     this._renderAvatar();
+    if (this._streaming) this._updateStreaming(true);
+    this._updateWaiting();
+  }
+  /**
+   * Show the built-in waiting indicator while this bubble is in flight and has
+   * nothing to show yet — the gap between "user sends" and the first token, which
+   * used to be a bubble with a name and an empty body.
+   *
+   * The dots are CSS (no per-token work, themable, honours reduced-motion); the
+   * accessible name is `locale.typing`, next to the `aria-busy` the streaming state
+   * already sets. A custom bubble shell without the region simply has no indicator
+   * (same null-guarded degradation as the other region hooks).
+   */
+  _updateWaiting() {
+    const el = this.querySelector(".aparte-waiting");
+    if (!el) return;
+    const waiting = this._streaming && this._role !== "user" && this._segments.length === 0 && !this._content.trim();
+    el.hidden = !waiting;
+    if (!waiting) return;
+    const label = this._cfg.getLocale().typing;
+    const sr = el.querySelector(".aparte-sr-only");
+    if (sr && sr.textContent !== label) sr.textContent = label;
   }
   /**
    * Hand the avatar host element off to the registered AvatarProvider, if
@@ -1047,10 +1133,12 @@ class AparteChatBubble extends HTMLElement {
     if (!this._contentEl) return;
     if (this._segments.length > 0) {
       this._contentEl.style.display = "none";
+      this._updateWaiting();
       return;
     }
     this._contentEl.style.display = "";
     this._contentEl.innerHTML = this._cfg.renderMarkdown(this._content);
+    this._updateWaiting();
     if (!this._streaming) this._highlightContentCode();
   }
   /**
@@ -1084,7 +1172,7 @@ class AparteChatBubble extends HTMLElement {
     if (!this._segmentsEl) return;
     this._segmentsEl.innerHTML = "";
     for (const segment of this._segments) {
-      const renderer = getSegmentRenderer(segment.type);
+      const renderer = resolveSegmentRenderer(segment.type);
       if (renderer) {
         const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
         if (el) {
@@ -1162,8 +1250,11 @@ class AparteChatBubble extends HTMLElement {
       }
       return `<div class="aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${this._escapeHtml(this._fileExt(a2.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
     }).join("");
+    if (!this._cfg.getHostHandlers().attachmentPreview) return;
     this._attachmentsEl.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
-      tile.addEventListener("click", () => {
+      tile.setAttribute("role", "button");
+      tile.setAttribute("tabindex", "0");
+      const open = () => {
         const img = tile.querySelector(".aparte-thumb__img");
         if (!img) return;
         this.dispatchEvent(new CustomEvent("aparte-attachment-preview", {
@@ -1171,6 +1262,13 @@ class AparteChatBubble extends HTMLElement {
           composed: true,
           detail: { url: img.src, name: tile.getAttribute("title") ?? "" }
         }));
+      };
+      tile.addEventListener("click", open);
+      tile.addEventListener("keydown", (e2) => {
+        const key = e2.key;
+        if (key !== "Enter" && key !== " ") return;
+        e2.preventDefault();
+        open();
       });
     });
   }
@@ -1202,9 +1300,11 @@ class AparteChatBubble extends HTMLElement {
     if (!this._branchPickerEl) return;
     if (this._siblingCount <= 1 || this._role !== "assistant") {
       this._branchPickerEl.hidden = true;
+      this._syncFooterVisibility();
       return;
     }
     this._branchPickerEl.hidden = false;
+    this._syncFooterVisibility();
     const label = this._branchPickerEl.querySelector(".aparte-branch-label");
     if (label) {
       const customNav = this._cfg.getSiblingNavRenderer?.();
@@ -1251,12 +1351,7 @@ class AparteChatBubble extends HTMLElement {
           buttons.push(this._actionButtonHtml("thumbUp", icons, locale));
           buttons.push(this._actionButtonHtml("thumbDown", icons, locale));
         }
-        if (this._usage) {
-          const infoLabel = locale.messageInfo ?? "Details";
-          buttons.push(`<button class="aparte-action-btn aparte-action-info" data-action="info" aria-label="${infoLabel}" title="${infoLabel}">
-          ${INFO_ICON_SVG}
-        </button>`);
-        }
+        if (config.info) buttons.push(this._actionButtonHtml("info", icons, locale));
       }
     }
     this._actionBarEl.innerHTML = buttons.join("");
@@ -1264,6 +1359,21 @@ class AparteChatBubble extends HTMLElement {
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
       btn.addEventListener("click", (e2) => this._handleActionClick(e2));
     });
+    this._syncFooterVisibility();
+  }
+  /**
+   * An empty action bar is not a bar: with every action off it was still a
+   * `role="toolbar"` with nothing in it (announced as such), and it still reserved
+   * its fixed height plus the footer's under every bubble. So both follow their
+   * contents — the footer stays as long as the branch picker or the bar has
+   * something to show.
+   */
+  _syncFooterVisibility() {
+    if (this._actionBarEl) this._actionBarEl.hidden = this._actionBarEl.children.length === 0;
+    if (!this._footerEl) return;
+    const barEmpty = !this._actionBarEl || this._actionBarEl.hidden;
+    const pickerHidden = !this._branchPickerEl || this._branchPickerEl.hidden;
+    this._footerEl.hidden = barEmpty && pickerHidden;
   }
   /** Append the registered custom action buttons for this bubble's role. */
   _appendCustomActions(icons) {
@@ -1304,6 +1414,11 @@ class AparteChatBubble extends HTMLElement {
         const l2 = locale.feedbackNegative ?? "Bad response";
         return `<button class="aparte-action-btn aparte-action-feedback-neg" data-action="feedback-negative" aria-label="${l2}" title="${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="${l2}" title="${l2}">${INFO_ICON_SVG}</button>`;
+      }
       default:
         return "";
     }
@@ -1318,6 +1433,7 @@ class AparteChatBubble extends HTMLElement {
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
       btn.addEventListener("click", (e2) => this._handleActionClick(e2));
     });
+    this._syncFooterVisibility();
   }
   _handleActionClick(e2) {
     const btn = e2.currentTarget;
@@ -1505,6 +1621,7 @@ class AparteChatBubble extends HTMLElement {
         message.classList.remove("aparte-message-streaming");
       }
     }
+    this._updateWaiting();
     if (wasStreaming && !streaming) this._highlightContentCode();
   }
 }
@@ -1754,9 +1871,13 @@ class AparteChatViewport extends HTMLElement {
     if (!message.segments) {
       message.segments = [];
     }
-    const segment = message.segments.find((s2) => s2.id === segmentId);
+    const index = message.segments.findIndex((s2) => s2.id === segmentId);
+    const segment = index === -1 ? void 0 : message.segments[index];
     if (segment && "content" in segment) {
-      segment.content += chunk;
+      message.segments[index] = {
+        ...segment,
+        content: segment.content + chunk
+      };
     }
     this.dispatchEvent(new CustomEvent("aparte-segment-update", {
       bubbles: true,
@@ -1832,8 +1953,10 @@ class AparteChatViewport extends HTMLElement {
     this.updateSegment(messageId, segmentId, { isStreaming: false });
   }
   /**
-   * Persist token usage on a message and propagate to the live bubble so the
-   * perf chip (tokens/sec) renders in the action bar.
+   * Persist token usage on a message and propagate to the live bubble, which is
+   * what allows the info ("i") action to render — provided the app declared it
+   * with `AparteConfig.setBubbleActions({ info: true })`; it is off by default,
+   * since the popover it opens belongs to the app.
    */
   setUsage(messageId, usage) {
     const message = this._repo.getMessageById(messageId);
@@ -1903,7 +2026,7 @@ class AparteChatViewport extends HTMLElement {
         bubble.setAttribute("role", message.role);
         if (message.timestamp) bubble.setAttribute("timestamp", String(message.timestamp));
         if (message.content) bubble.setAttribute("content", message.content);
-        if (message.status === "streaming" || message.status === "pending") {
+        if (isAwaitingReply(message)) {
           bubble.setAttribute("streaming", "");
         }
         if (this._bottomSpacer && this._bottomSpacer.parentNode === wrapper) {
@@ -1911,6 +2034,7 @@ class AparteChatViewport extends HTMLElement {
         } else {
           wrapper.appendChild(bubble);
         }
+        populateBubbleFromMessage(bubble, message);
       }
     }
     this._pruneRenderedBubbles();
@@ -1991,7 +2115,7 @@ class AparteChatViewport extends HTMLElement {
     if (currentIdx === -1) return;
     const targetIdx = direction === "prev" ? currentIdx - 1 : currentIdx + 1;
     if (targetIdx < 0 || targetIdx >= siblings.length) return;
-    this._isAutoScrollEnabled = false;
+    this._isAutoScrollEnabled = this._isAtBottom();
     this._updateScrollButton();
     this._repo.switchToBranch(siblings[targetIdx]);
     this._reRenderActivePath();
@@ -2181,11 +2305,14 @@ class AparteChatViewport extends HTMLElement {
       case "setUsage":
         bubble.setUsage?.(payload);
         break;
-      case "update":
-        if ("status" in payload || "segments" in payload) {
+      case "update": {
+        const updates = payload;
+        const renderable = ["status", "segments", "content", "attachments", "usage"];
+        if (renderable.some((key) => key in updates)) {
           bubble.updateMessage?.(payload);
         }
         break;
+      }
       case "complete":
         bubble.updateMessage?.(payload);
         break;
@@ -2222,7 +2349,7 @@ class AparteChatViewport extends HTMLElement {
       bubble.setAttribute("message-id", message.id);
       bubble.setAttribute("role", message.role);
       if (message.timestamp) bubble.setAttribute("timestamp", String(message.timestamp));
-      if (message.status === "streaming" || message.status === "pending") {
+      if (isAwaitingReply(message)) {
         bubble.setAttribute("streaming", "");
       }
       wrapper.appendChild(bubble);
@@ -2230,7 +2357,6 @@ class AparteChatViewport extends HTMLElement {
     }
     this._dispatchPathChanged(activeMessages, siblingsInfo);
     this._recalculateSpacer();
-    requestAnimationFrame(() => this._handleScroll());
   }
   _dispatchPathChanged(messages, siblings) {
     const detail = { messages, siblings };
@@ -2400,11 +2526,15 @@ class AparteChatViewport extends HTMLElement {
       });
     }
   }
+  /** Is the scroll surface within `_scrollThreshold` of its bottom, right now? */
+  _isAtBottom() {
+    if (!this._container) return true;
+    const { scrollTop, scrollHeight, clientHeight } = this._container;
+    return scrollHeight - scrollTop - clientHeight <= this._scrollThreshold;
+  }
   _handleScroll() {
     if (!this._container) return;
-    const { scrollTop, scrollHeight, clientHeight } = this._container;
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    this._isAutoScrollEnabled = distanceFromBottom <= this._scrollThreshold;
+    this._isAutoScrollEnabled = this._isAtBottom();
     this._updateScrollButton();
   }
   _scrollToBottom() {
@@ -2423,11 +2553,20 @@ class AparteChatViewport extends HTMLElement {
     return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
   }
   /**
-   * Show/hide the scroll-to-bottom button based on the current auto-scroll state.
-   * Hidden when already at bottom (_isAutoScrollEnabled = true).
+   * Show/hide the scroll-to-bottom button from the **current geometry**, not from
+   * `_isAutoScrollEnabled`.
+   *
+   * The two answer different questions: the flag is intent ("should new content
+   * pull the view down"), the button is a fact ("is there anything below the
+   * fold"). Mirroring the flag made the button lie whenever the two diverged —
+   * `navigateBranch` deliberately disarms auto-follow, so swapping a branch while
+   * already at the bottom of a scrollable transcript left the button offering to
+   * scroll nowhere (reported from bonaparte, React). Re-derived on scroll, on the
+   * post-mutation frame and after a path swap, so it converges to the truth
+   * whatever a framework's render timing does in between.
    */
   _updateScrollButton() {
-    this._scrollBtn?.classList.toggle("aparte-scroll-btn--hidden", this._isAutoScrollEnabled);
+    this._scrollBtn?.classList.toggle("aparte-scroll-btn--hidden", this._isAtBottom());
   }
   /**
    * Recalculate the bottom spacer height so the last user message is always
@@ -2486,6 +2625,7 @@ class AparteChatViewport extends HTMLElement {
     this._spacerRafId = requestAnimationFrame(() => {
       this._spacerRafId = null;
       this._recalculateSpacer();
+      this._updateScrollButton();
     });
   }
   /**
@@ -2993,9 +3133,9 @@ class AparteComposerInput extends HTMLElement {
   }
   _updatePlaceholder() {
     if (this._editor) {
-      const p = this._getPlaceholder();
-      this._editor.setAttribute("data-placeholder", p);
-      this._editor.setAttribute("aria-label", p);
+      const p2 = this._getPlaceholder();
+      this._editor.setAttribute("data-placeholder", p2);
+      this._editor.setAttribute("aria-label", p2);
     }
   }
   _updatePlaceholderVisibility() {
@@ -3226,8 +3366,11 @@ class AparteComposerAttachments extends HTMLElement {
         if (root) root.removeAttachment(root.attachments[i2]);
       });
     });
+    if (!resolveConfig(this).getHostHandlers().attachmentPreview) return;
     this.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
-      tile.addEventListener("click", () => {
+      tile.setAttribute("role", "button");
+      tile.setAttribute("tabindex", "0");
+      const open = () => {
         const img = tile.querySelector(".aparte-thumb__img");
         if (!img) return;
         this.dispatchEvent(new CustomEvent("aparte-attachment-preview", {
@@ -3235,6 +3378,13 @@ class AparteComposerAttachments extends HTMLElement {
           composed: true,
           detail: { url: img.src, name: tile.getAttribute("title") ?? "" }
         }));
+      };
+      tile.addEventListener("click", open);
+      tile.addEventListener("keydown", (e2) => {
+        const key = e2.key;
+        if (key !== "Enter" && key !== " ") return;
+        e2.preventDefault();
+        open();
       });
     });
   }
@@ -3729,36 +3879,40 @@ export {
   i as AparteStreamParser,
   B as BackendTransport,
   C as ConversationManager,
-  D as DEFAULT_ICON_FALLBACKS,
-  j as DEFAULT_LOCALE,
-  k as DEFAULT_SKELETON_FALLBACKS,
-  l as DEFAULT_UI_EVENTS,
-  m as DirectTransport,
+  D as DEFAULT_BUBBLE_ACTIONS,
+  j as DEFAULT_HOST_HANDLERS,
+  k as DEFAULT_ICON_FALLBACKS,
+  l as DEFAULT_LOCALE,
+  m as DEFAULT_SKELETON_FALLBACKS,
+  n as DEFAULT_UI_EVENTS,
+  o as DirectTransport,
   MessageRepository,
-  n as applyElementProps,
-  o as attachConfig,
+  p as applyElementProps,
+  q as attachConfig,
   buildElicitationPanel,
-  q as collectRendererStyles,
-  r as contentToText,
-  s as contextConfig,
-  t as createAparteChatHandler,
-  u as createStreamAdapter,
-  v as defaultSanitizer,
-  w as deriveArtifactKind,
-  x as detachConfig,
+  s as collectRendererStyles,
+  t as contentToText,
+  u as contextConfig,
+  v as createAparteChatHandler,
+  w as createStreamAdapter,
+  x as defaultSanitizer,
+  y as deriveArtifactKind,
+  z as detachConfig,
+  E as filesToAttachments,
   getSegmentRenderer,
-  z as isFormatAdapter,
-  E as isSafeUrl,
-  F as parseAparteEventStream,
-  G as parseMarkdownToSegments,
+  isAwaitingReply,
+  H as isFormatAdapter,
+  I as isSafeUrl,
+  J as parseAparteEventStream,
+  K as parseMarkdownToSegments,
   populateBubbleFromMessage,
-  I as readableToAsyncIterable,
+  N as readableToAsyncIterable,
   registerAllComponents,
-  J as registerDefaultRenderers,
-  K as registerSegmentRenderer,
-  L as requestUserInput,
+  O as registerDefaultRenderers,
+  P as registerSegmentRenderer,
+  Q as requestUserInput,
   resolveConfig,
   runWithConfig,
-  P as unregisterSegmentRenderer
+  T as unregisterSegmentRenderer
 };
 //# sourceMappingURL=index.js.map