@aparte/core 0.2.0-alpha.0

package/dist/index.js

@@ -0,0 +1,3763 @@
+import { N as resolveConfig, y as getSegmentRenderer, O as runWithConfig, M as MessageRepository, H as populateBubbleFromMessage, d as AparteConfig, p as buildElicitationPanel } from "./index-D89k-n2Q.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-D89k-n2Q.js";
+class AparteOption extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "disabled", "selected", "data-status"];
+  }
+  connectedCallback() {
+    this.setAttribute("role", "option");
+    this._updateAriaSelected();
+    this._updateStatusDot();
+  }
+  attributeChangedCallback(name) {
+    if (name === "selected") {
+      this._updateAriaSelected();
+    }
+    if (name === "disabled") {
+      this.setAttribute("aria-disabled", this.hasAttribute("disabled") ? "true" : "false");
+    }
+    if (name === "data-status") {
+      this._updateStatusDot();
+    }
+  }
+  get value() {
+    return this.getAttribute("value") || this.textContent?.trim() || "";
+  }
+  set value(val) {
+    this.setAttribute("value", val);
+  }
+  get label() {
+    const textNode = Array.from(this.childNodes).find((n2) => n2.nodeType === Node.TEXT_NODE);
+    return textNode?.textContent?.trim() || this.value;
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(val) {
+    if (val) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(val) {
+    if (val) {
+      this.setAttribute("selected", "");
+    } else {
+      this.removeAttribute("selected");
+    }
+  }
+  _updateAriaSelected() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  _updateStatusDot() {
+    const status = this.getAttribute("data-status");
+    let dot = this.querySelector(".aparte-status-dot");
+    if (!status) {
+      dot?.remove();
+      return;
+    }
+    if (!dot) {
+      dot = document.createElement("span");
+      dot.className = "aparte-status-dot";
+      dot.setAttribute("aria-hidden", "true");
+      this.appendChild(dot);
+    }
+    dot.setAttribute("data-status", status);
+  }
+}
+if (!customElements.get("aparte-option")) {
+  customElements.define("aparte-option", AparteOption);
+}
+class AparteOptgroup extends HTMLElement {
+  static get observedAttributes() {
+    return ["label", "collapsible", "collapsed", "loading"];
+  }
+  connectedCallback() {
+    this.setAttribute("role", "group");
+    this._render();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "collapsed") {
+      this._updateCollapsedState();
+    }
+    if (this.isConnected) {
+      this._render();
+    }
+  }
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  set label(val) {
+    this.setAttribute("label", val);
+  }
+  get collapsible() {
+    return this.hasAttribute("collapsible");
+  }
+  get collapsed() {
+    return this.hasAttribute("collapsed");
+  }
+  set collapsed(val) {
+    if (val) {
+      this.setAttribute("collapsed", "");
+    } else {
+      this.removeAttribute("collapsed");
+    }
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(val) {
+    if (val) this.setAttribute("loading", "");
+    else this.removeAttribute("loading");
+  }
+  _render() {
+    if (this.label) {
+      const existingHeader = this.querySelector(".aparte-optgroup-header");
+      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.textContent = this.label;
+        header.appendChild(labelSpan);
+        if (this.collapsible) {
+          const chevron = document.createElement("span");
+          chevron.className = "aparte-optgroup-chevron";
+          header.appendChild(chevron);
+          header.style.cursor = "pointer";
+          header.addEventListener("click", (e2) => {
+            e2.stopPropagation();
+            this._toggleCollapse();
+          });
+        }
+        this.insertBefore(header, this.firstChild);
+      }
+    }
+    this._updateLoadingState();
+    this._updateCollapsedState();
+  }
+  _updateLoadingState() {
+    let loader = this.querySelector(".aparte-optgroup-loader");
+    if (this.loading) {
+      if (!loader) {
+        loader = document.createElement("div");
+        loader.className = "aparte-optgroup-loader";
+        loader.innerHTML = '<span class="aparte-spinner-small"></span> Fetching models...';
+        this.appendChild(loader);
+      }
+    } else if (loader) {
+      loader.remove();
+    }
+  }
+  _toggleCollapse() {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent("aparte-optgroup-toggle", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        label: this.label,
+        collapsed: this.collapsed
+      }
+    }));
+    this._updateCollapsedState();
+  }
+  _updateCollapsedState() {
+    const options = this.querySelectorAll("aparte-option");
+    options.forEach((opt) => {
+      opt.style.display = this.collapsed ? "none" : "";
+    });
+  }
+}
+if (!customElements.get("aparte-optgroup")) {
+  customElements.define("aparte-optgroup", AparteOptgroup);
+}
+class AparteSelect extends HTMLElement {
+  static _optIdSeq = 0;
+  _value = "";
+  _isOpen = false;
+  _activeIndex = -1;
+  _trigger = null;
+  _dropdown = null;
+  _searchInput = null;
+  _observer = null;
+  // Bound handlers for cleanup
+  _boundHandleDocumentClick = this._handleDocumentClick.bind(this);
+  _boundHandleKeydown = this._handleKeydown.bind(this);
+  static get observedAttributes() {
+    return ["value", "placeholder", "disabled", "grouped", "searchable", "open"];
+  }
+  connectedCallback() {
+    this._value = this.getAttribute("value") || "";
+    this._isOpen = this.hasAttribute("open");
+    this._render();
+    this._setupEventListeners();
+    this._setupMutationObserver();
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this._boundHandleDocumentClick);
+    document.removeEventListener("keydown", this._boundHandleKeydown);
+    this._observer?.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isConnected) return;
+    if (name === "value" && oldValue !== newValue && newValue !== this._value) {
+      this._value = newValue || "";
+      this._updateTriggerLabel();
+    }
+    if (name === "open") {
+      this._isOpen = this.hasAttribute("open");
+      if (this._isOpen) {
+        this._dropdown?.removeAttribute("hidden");
+        this._searchInput?.focus();
+      } else {
+        this._dropdown?.setAttribute("hidden", "");
+      }
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Public API
+  // ─────────────────────────────────────────────────────────────────────────
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    if (val === this._value) return;
+    const previousValue = this._value;
+    this._value = val;
+    this.setAttribute("value", val);
+    this._updateTriggerLabel();
+    this._emitChange(previousValue);
+  }
+  get open() {
+    return this._isOpen;
+  }
+  set open(val) {
+    if (val) {
+      this.setAttribute("open", "");
+    } else {
+      this.removeAttribute("open");
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Rendering
+  // ─────────────────────────────────────────────────────────────────────────
+  _render() {
+    const placeholder = this.getAttribute("placeholder") || "Select...";
+    const searchable = this.hasAttribute("searchable");
+    if (this.querySelector(".aparte-select-dropdown")) {
+      this._updateTriggerLabel();
+      return;
+    }
+    const slottedChildren = Array.from(this.children);
+    const trigger = document.createElement("div");
+    trigger.className = "aparte-select-trigger";
+    trigger.setAttribute("tabindex", "0");
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    const labelSpan = document.createElement("span");
+    labelSpan.className = "aparte-select-label";
+    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>`;
+    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...";
+      dropdown.appendChild(searchInput);
+    }
+    const optionsContainer = document.createElement("div");
+    optionsContainer.className = "aparte-select-options";
+    slottedChildren.forEach((child) => {
+      if (child.tagName === "APARTE-OPTION" || child.tagName === "APARTE-OPTGROUP") {
+        optionsContainer.appendChild(child);
+      }
+    });
+    dropdown.appendChild(optionsContainer);
+    this._observer?.disconnect();
+    this.innerHTML = "";
+    this.appendChild(trigger);
+    this.appendChild(dropdown);
+    this._trigger = trigger;
+    this._dropdown = dropdown;
+    this._searchInput = dropdown.querySelector(".aparte-select-search");
+    if (this.isConnected) {
+      this._setupMutationObserver();
+    }
+    this._updateTriggerLabel();
+  }
+  _setupMutationObserver() {
+    this._observer = new MutationObserver(() => {
+      this._updateDropdownContent();
+    });
+    this._observer.observe(this, { childList: true });
+  }
+  _updateDropdownContent() {
+    if (!this._trigger || !this.contains(this._trigger)) {
+      this._render();
+      return;
+    }
+    const optionsContainer = this.querySelector(".aparte-select-options");
+    if (!optionsContainer) {
+      this._render();
+      return;
+    }
+    const lightChildren = Array.from(this.children).filter(
+      (child) => child.className !== "aparte-select-trigger" && child.className !== "aparte-select-dropdown"
+    );
+    if (lightChildren.length === 0) return;
+    this._observer?.disconnect();
+    optionsContainer.innerHTML = "";
+    lightChildren.forEach((child) => {
+      optionsContainer.appendChild(child);
+    });
+    if (this.isConnected) {
+      this._observer?.observe(this, { childList: true });
+    }
+    this._updateTriggerLabel();
+  }
+  _setupEventListeners() {
+    this._trigger?.addEventListener("click", () => this._toggle());
+    this._trigger?.addEventListener("keydown", (e2) => {
+      if (e2.key === "Enter" || e2.key === " ") {
+        if (this._isOpen) return;
+        e2.preventDefault();
+        this._toggle();
+      }
+      if (e2.key === "ArrowDown" && !this._isOpen) {
+        e2.preventDefault();
+        this._openDropdown();
+      }
+    });
+    this.addEventListener("click", (e2) => {
+      const option = e2.target.closest("aparte-option");
+      if (option && !option.hasAttribute("disabled")) {
+        this._selectOption(option);
+      }
+    });
+    this._searchInput?.addEventListener("input", (e2) => {
+      const query = e2.target.value.toLowerCase();
+      this._filterOptions(query);
+    });
+    document.addEventListener("click", this._boundHandleDocumentClick);
+    document.addEventListener("keydown", this._boundHandleKeydown);
+  }
+  _handleDocumentClick(e2) {
+    if (!this.contains(e2.target)) {
+      this._closeDropdown();
+    }
+  }
+  _handleKeydown(e2) {
+    if (!this._isOpen) return;
+    const inSearch = document.activeElement === this._searchInput;
+    switch (e2.key) {
+      case "Escape":
+        e2.preventDefault();
+        this._closeDropdown();
+        this._trigger?.focus();
+        break;
+      case "ArrowDown":
+        e2.preventDefault();
+        this._moveActive(1);
+        break;
+      case "ArrowUp":
+        e2.preventDefault();
+        this._moveActive(-1);
+        break;
+      case "Home":
+        if (inSearch) break;
+        e2.preventDefault();
+        this._setActive(0);
+        break;
+      case "End":
+        if (inSearch) break;
+        e2.preventDefault();
+        this._setActive(this._visibleOptions().length - 1);
+        break;
+      case "Enter": {
+        const active = this._visibleOptions()[this._activeIndex];
+        if (active) {
+          e2.preventDefault();
+          this._selectOption(active);
+        }
+        break;
+      }
+    }
+  }
+  /** Non-disabled, non-filtered options in DOM order. */
+  _visibleOptions() {
+    return Array.from(this.querySelectorAll("aparte-option")).filter(
+      (opt) => !opt.hasAttribute("disabled") && opt.style.display !== "none"
+    );
+  }
+  /** Move the active (keyboard-highlighted) option by `delta`, clamped. */
+  _moveActive(delta) {
+    const opts = this._visibleOptions();
+    if (opts.length === 0) return;
+    const base = this._activeIndex < 0 ? delta > 0 ? -1 : 0 : this._activeIndex;
+    this._setActive(base + delta);
+  }
+  /** Highlight the option at `index` (clamped) and point aria-activedescendant at it. */
+  _setActive(index) {
+    const all = this.querySelectorAll("aparte-option");
+    all.forEach((o2) => o2.removeAttribute("data-active"));
+    const opts = this._visibleOptions();
+    if (opts.length === 0) {
+      this._activeIndex = -1;
+      this._trigger?.removeAttribute("aria-activedescendant");
+      return;
+    }
+    const clamped = Math.max(0, Math.min(index, opts.length - 1));
+    this._activeIndex = clamped;
+    const active = opts[clamped];
+    if (!active.id) active.id = `aparte-option-${++AparteSelect._optIdSeq}`;
+    active.setAttribute("data-active", "");
+    this._trigger?.setAttribute("aria-activedescendant", active.id);
+    active.scrollIntoView?.({ block: "nearest" });
+  }
+  /** Clear the keyboard highlight (on close). */
+  _clearActive() {
+    this._activeIndex = -1;
+    this._trigger?.removeAttribute("aria-activedescendant");
+    this.querySelectorAll("aparte-option").forEach((o2) => o2.removeAttribute("data-active"));
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Actions
+  // ─────────────────────────────────────────────────────────────────────────
+  _toggle() {
+    if (this._isOpen) {
+      this._closeDropdown();
+    } else {
+      this._openDropdown();
+    }
+  }
+  _openDropdown() {
+    if (this.hasAttribute("disabled")) return;
+    this._isOpen = true;
+    this._dropdown?.removeAttribute("hidden");
+    this._trigger?.setAttribute("aria-expanded", "true");
+    this.setAttribute("open", "");
+    this._updatePosition();
+    this._searchInput?.focus();
+    const opts = this._visibleOptions();
+    const selectedIdx = opts.findIndex((o2) => o2.getAttribute("value") === this._value);
+    this._setActive(selectedIdx >= 0 ? selectedIdx : 0);
+    this.dispatchEvent(new CustomEvent("aparte-select-open", { bubbles: true }));
+  }
+  _closeDropdown() {
+    this._isOpen = false;
+    this._clearActive();
+    this._dropdown?.setAttribute("hidden", "");
+    this._trigger?.setAttribute("aria-expanded", "false");
+    this.removeAttribute("open");
+    this.removeAttribute("position");
+    if (this._dropdown) {
+      this._dropdown.style.top = "";
+      this._dropdown.style.bottom = "";
+      this._dropdown.style.left = "";
+      this._dropdown.style.width = "";
+    }
+    if (this._searchInput) {
+      this._searchInput.value = "";
+      this._filterOptions("");
+    }
+    this.dispatchEvent(new CustomEvent("aparte-select-close", { bubbles: true }));
+  }
+  _updatePosition() {
+    if (!this._dropdown || !this._trigger) return;
+    const rect = this._trigger.getBoundingClientRect();
+    const dropdownHeight = this._dropdown.offsetHeight || 300;
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const GAP = 4;
+    this._dropdown.style.left = `${rect.left}px`;
+    this._dropdown.style.width = `${rect.width}px`;
+    if (spaceBelow < dropdownHeight && rect.top > dropdownHeight) {
+      this._dropdown.style.top = "";
+      this._dropdown.style.bottom = `${viewportHeight - rect.top + GAP}px`;
+      this.setAttribute("position", "top");
+    } else {
+      this._dropdown.style.top = `${rect.bottom + GAP}px`;
+      this._dropdown.style.bottom = "";
+      this.removeAttribute("position");
+    }
+  }
+  _selectOption(option) {
+    const value = option.getAttribute("value") || option.textContent?.trim() || "";
+    const previousValue = this._value;
+    this._value = value;
+    this.setAttribute("value", value);
+    this._updateTriggerLabel();
+    this._closeDropdown();
+    this._emitChange(previousValue);
+    this._trigger?.focus();
+  }
+  _updateTriggerLabel() {
+    const labelEl = this._trigger?.querySelector(".aparte-select-label");
+    if (labelEl) {
+      const selectedLabel = this._getSelectedLabel();
+      labelEl.textContent = selectedLabel || this.getAttribute("placeholder") || "Select...";
+    }
+    const options = this.querySelectorAll("aparte-option");
+    options.forEach((opt) => {
+      const isSelected = opt.getAttribute("value") === this._value;
+      if (isSelected) {
+        opt.setAttribute("selected", "");
+      } else {
+        opt.removeAttribute("selected");
+      }
+    });
+  }
+  _getSelectedLabel() {
+    for (const opt of this.querySelectorAll("aparte-option")) {
+      if (opt.getAttribute("value") === this._value) return opt.textContent?.trim() || "";
+    }
+    return "";
+  }
+  _filterOptions(query) {
+    const options = this.querySelectorAll("aparte-option");
+    options.forEach((opt) => {
+      const label = opt.textContent?.toLowerCase() || "";
+      const matches = label.includes(query);
+      opt.style.display = matches ? "" : "none";
+    });
+    if (this._isOpen) this._setActive(0);
+  }
+  _emitChange(previousValue) {
+    const detail = {
+      value: this._value,
+      label: this._getSelectedLabel(),
+      previousValue
+    };
+    this.dispatchEvent(new CustomEvent("aparte-select-change", {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+  }
+}
+if (!customElements.get("aparte-select")) {
+  customElements.define("aparte-select", AparteSelect);
+}
+class AparteProgressSpinner extends HTMLElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+  /** Radius of the SVG circle (viewBox is 0 0 24 24, center at 12,12) */
+  _r = 9;
+  get _circ() {
+    return 2 * Math.PI * this._r;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this._render();
+  }
+  _render() {
+    const raw = this.getAttribute("value");
+    const value = raw !== null ? Math.min(100, Math.max(0, parseFloat(raw) || 0)) : null;
+    this.setAttribute("role", "progressbar");
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("aria-valuemax", "100");
+    if (value !== null) {
+      this.setAttribute("aria-valuenow", String(value));
+    } else {
+      this.removeAttribute("aria-valuenow");
+    }
+    const dashoffset = value !== null ? this._circ * (1 - value / 100) : 0;
+    const dasharray = value !== null ? `${this._circ.toFixed(2)}` : `${(this._circ * 0.72).toFixed(2)} ${(this._circ * 0.28).toFixed(2)}`;
+    this.innerHTML = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="aparte-spinner-track" cx="12" cy="12" r="${this._r}"/><circle class="aparte-spinner-fill" cx="12" cy="12" r="${this._r}" stroke-dasharray="${dasharray}" stroke-dashoffset="${dashoffset.toFixed(2)}"/></svg>`;
+  }
+}
+if (!customElements.get("aparte-progress-spinner")) {
+  customElements.define("aparte-progress-spinner", AparteProgressSpinner);
+}
+class AparteChat extends HTMLElement {
+  static get observedAttributes() {
+    return ["placeholder", "disabled", "center-empty"];
+  }
+  _observer = null;
+  connectedCallback() {
+    this._render();
+    this._forwardAttr("placeholder");
+    this._forwardAttr("disabled");
+    this._syncEmptyWatch();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect();
+    this._observer = null;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "center-empty") {
+      this._syncEmptyWatch();
+      return;
+    }
+    const composer = this.querySelector("aparte-composer");
+    if (!composer) return;
+    if (newValue !== null) composer.setAttribute(name, newValue);
+    else composer.removeAttribute(name);
+  }
+  /** The message viewport (yours or the default), or `null` before connect. */
+  get viewport() {
+    return this.querySelector("aparte-chat-viewport");
+  }
+  /** The composer (yours or the default), or `null` before connect. */
+  get composer() {
+    return this.querySelector("aparte-composer");
+  }
+  _render() {
+    if (this.hasAttribute("framework-managed")) return;
+    if (this.querySelector("aparte-chat-viewport")) return;
+    const placeholder = this.getAttribute("placeholder");
+    const composerAttrs = (placeholder !== null ? ` placeholder="${this._escapeAttr(placeholder)}"` : "") + (this.hasAttribute("disabled") ? " disabled" : "");
+    this.innerHTML = `
+      <aparte-chat-viewport></aparte-chat-viewport>
+      <aparte-composer${composerAttrs}>
+        <div class="aparte-composer-shell">
+          <div class="aparte-composer-row">
+            <aparte-composer-input></aparte-composer-input>
+            <aparte-composer-send></aparte-composer-send>
+          </div>
+        </div>
+      </aparte-composer>
+    `;
+  }
+  /** Set an attribute on the inner composer only when the shell carries it. */
+  _forwardAttr(name) {
+    if (!this.hasAttribute(name)) return;
+    this.querySelector("aparte-composer")?.setAttribute(name, this.getAttribute(name) ?? "");
+  }
+  /** Start/stop watching the viewport so `center-empty` toggles itself. */
+  _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 });
+  }
+  _updateEmpty() {
+    const viewport = this.querySelector("aparte-chat-viewport");
+    const empty = !viewport || !viewport.querySelector("aparte-chat-bubble");
+    this.toggleAttribute("data-empty", empty);
+  }
+  _escapeAttr(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  }
+}
+if (!customElements.get("aparte-chat")) {
+  customElements.define("aparte-chat", AparteChat);
+}
+function cssEscape(value) {
+  return value.replace(/["\\]/g, "\\$&");
+}
+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?`);
+}
+function segmentRenderResultToElement(result) {
+  if (result instanceof HTMLElement) return result;
+  const wrapper = document.createElement("div");
+  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;
+  _attachmentsEl = null;
+  _actionBarEl = null;
+  _branchPickerEl = null;
+  _content = "";
+  _streaming = false;
+  _segments = [];
+  _role = "assistant";
+  _attachments = [];
+  _usage = null;
+  /** Cleanup returned by the avatar provider — called on disconnect/re-render. */
+  _avatarCleanup = null;
+  /** Sibling count for tree-based branch navigation (set by setSiblings()) */
+  _siblingCount = 1;
+  /** Sibling index for tree-based branch navigation (set by setSiblings()) */
+  _siblingIndex = 0;
+  /** True while the user-message inline editor is open. */
+  _editing = false;
+  /** The live inline editor (the composer's contenteditable primitive), present only while `_editing`. */
+  _editInput = null;
+  static get observedAttributes() {
+    return ["role", "data-role", "content", "timestamp", "message-id", "streaming", "name"];
+  }
+  constructor() {
+    super();
+  }
+  // Rebuild the action bar when the global config changes (e.g. a live skin
+  // switch calling setBubbleActions / setIconProvider) so already-rendered
+  // bubbles pick up the new per-role actions + icons without being re-created.
+  _onConfigChange = (e2) => {
+    const detail = e2.detail;
+    if (detail?.config && detail.config !== this._cfg) return;
+    this._updateActionBar();
+  };
+  /**
+   * Config governing this bubble: the instance config of the nearest
+   * `[data-aparte-host]` boundary, else the global singleton. Resolved live
+   * (a single `closest()`) rather than cached — the boundary may be attached
+   * AFTER this bubble mounts (AparteChatHost.bind() runs post-mount), so a
+   * connect-time cache would freeze the wrong config.
+   */
+  get _cfg() {
+    return resolveConfig(this);
+  }
+  connectedCallback() {
+    this._render();
+    this._updateContent();
+    this._updateTimestamp(this.getAttribute("timestamp"));
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
+    if (this._avatarCleanup) {
+      try {
+        this._avatarCleanup();
+      } catch {
+      }
+      this._avatarCleanup = null;
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "role":
+      case "data-role":
+        if (newValue === "article") return;
+        if (newValue === "user" || newValue === "assistant") {
+          this._role = newValue;
+          this._updateRole();
+        }
+        break;
+      case "content":
+        this._content = newValue || "";
+        this._updateContent();
+        break;
+      case "timestamp":
+        this._updateTimestamp(newValue);
+        break;
+      case "streaming":
+        this._updateStreaming(newValue !== null && newValue !== "false");
+        break;
+      case "name":
+        this._updateName();
+        break;
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Public API
+  // ─────────────────────────────────────────────────────────────────────────
+  /** Append a token chunk (for streaming) */
+  appendToken(chunk) {
+    this._content += chunk;
+    this._updateContent();
+  }
+  /** Set content directly */
+  setContent(content) {
+    this._content = content;
+    this.setAttribute("content", content);
+    this._updateContent();
+  }
+  /** Get current content */
+  getContent() {
+    return this._content;
+  }
+  /** Set segments for rich content */
+  setSegments(segments) {
+    this._segments = segments;
+    this._renderSegments();
+  }
+  /** Add a segment */
+  addSegment(segment) {
+    this._segments.push(segment);
+    this._appendSegmentEl(segment);
+  }
+  /** Update a specific segment */
+  updateSegment(segmentId, updates) {
+    const index = this._segments.findIndex((s2) => s2.id === segmentId);
+    if (index !== -1) {
+      const updated = { ...this._segments[index], ...updates };
+      this._segments[index] = updated;
+      this._applySegmentUpdate(segmentId, updated, updates);
+    }
+  }
+  /** Append content to a segment */
+  appendToSegment(segmentId, content) {
+    const segment = this._segments.find((s2) => s2.id === segmentId);
+    if (segment && "content" in segment) {
+      segment.content += content;
+      this._applySegmentUpdate(segmentId, segment, { content: segment.content });
+    }
+  }
+  /** Get all segments */
+  getSegments() {
+    return [...this._segments];
+  }
+  /** Remove a segment by id (e.g. to discard a transient waiting indicator) */
+  removeSegment(segmentId) {
+    const index = this._segments.findIndex((s2) => s2.id === segmentId);
+    if (index !== -1) {
+      this._segments.splice(index, 1);
+    }
+    const el = this._segmentsEl?.querySelector(`[data-segment-id="${cssEscape(segmentId)}"]`);
+    el?.remove();
+  }
+  /** Set attachments (chips shown above message content, user role only) */
+  setAttachments(attachments) {
+    this._attachments = attachments;
+    this._updateAttachments();
+  }
+  /**
+   * 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`).
+   */
+  setUsage(usage) {
+    this._usage = usage ?? null;
+    this._updateActionBar();
+  }
+  /**
+   * Update the branch picker UI for tree-based navigation.
+   * The viewport calls this after a branch switch or re-render.
+   * Prev/Next clicks dispatch `aparte-branch-navigate` (bubbles: true) so
+   * the viewport can handle the actual tree switch.
+   */
+  setSiblings(count, index) {
+    this._siblingCount = count;
+    this._siblingIndex = index;
+    this._updateBranchPicker();
+  }
+  /**
+   * Atomic update for the message
+   */
+  updateMessage(updates) {
+    if ("role" in updates) {
+      this._role = updates.role;
+      this._updateRole();
+    }
+    if ("content" in updates) {
+      this._content = updates.content;
+      this._updateContent();
+    }
+    if ("segments" in updates) {
+      this._segments = updates.segments;
+      this._renderSegments();
+    }
+    if ("timestamp" in updates) {
+      this._updateTimestamp(updates.timestamp);
+    }
+    if ("status" in updates) {
+      const isStreaming = updates.status === "streaming" || updates.status === "pending";
+      this._updateStreaming(isStreaming);
+    }
+    if ("attachments" in updates) {
+      this._attachments = updates.attachments ?? [];
+      this._updateAttachments();
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Private Methods
+  // ─────────────────────────────────────────────────────────────────────────
+  _appendSegmentEl(segment) {
+    if (!this._segmentsEl) {
+      console.warn(`[AparteChatBubble] _appendSegmentEl ABORT: _segmentsEl is null`);
+      return;
+    }
+    const renderer = getSegmentRenderer(segment.type);
+    if (renderer) {
+      const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+      if (el) {
+        this._segmentsEl.appendChild(el);
+        runWithConfig(this._cfg, () => renderer.setup?.(el, segment));
+      }
+    } else {
+      warnMissingRenderer(segment.type);
+      const fallback = document.createElement("div");
+      fallback.className = "segment segment-unknown";
+      fallback.textContent = `[Unknown segment type: ${segment.type}]`;
+      this._segmentsEl.appendChild(fallback);
+    }
+    if (this._contentEl) this._contentEl.style.display = "none";
+    this._reflectError();
+  }
+  _applySegmentUpdate(segmentId, segment, updates) {
+    const el = this._segmentsEl?.querySelector(`[data-segment-id="${cssEscape(segmentId)}"]`);
+    if (!el) {
+      this._renderSegments();
+      return;
+    }
+    const renderer = getSegmentRenderer(segment.type);
+    if (!renderer) return;
+    if (renderer.update) {
+      runWithConfig(this._cfg, () => renderer.update(el, segment));
+    } else {
+      const newEl = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+      if (newEl) {
+        el.replaceWith(newEl);
+        runWithConfig(this._cfg, () => renderer.setup?.(newEl, segment));
+      }
+    }
+    if ("collapsed" in updates) {
+      if (updates.collapsed) {
+        el.removeAttribute("open");
+      } else {
+        el.setAttribute("open", "");
+      }
+    }
+  }
+  _getDisplayName() {
+    const nameAttr = this.getAttribute("name");
+    if (nameAttr) return nameAttr;
+    const locale = this._cfg.getLocale();
+    return this._role === "user" ? locale.roleNameUser ?? "You" : locale.roleNameAssistant ?? "Assistant";
+  }
+  _getAvatarInitial() {
+    const name = this._getDisplayName();
+    return name.length > 0 ? name[0] : this._role === "user" ? "U" : "A";
+  }
+  _render() {
+    const dataRole = this.getAttribute("data-role");
+    const legacyRole = this.getAttribute("role");
+    const role = dataRole && dataRole !== "article" ? dataRole : legacyRole && legacyRole !== "article" ? legacyRole : "assistant";
+    this._role = role;
+    if (this.getAttribute("role") !== "article") {
+      this.setAttribute("role", "article");
+    }
+    if (!this.hasAttribute("data-role")) {
+      this.setAttribute("data-role", role);
+    }
+    if (this.querySelector(".aparte-message")) return;
+    const displayName = this._getDisplayName();
+    const initial = this._getAvatarInitial();
+    const shell = this._cfg.getBubbleShellRenderer?.();
+    if (shell) {
+      const out = runWithConfig(this._cfg, () => shell({ role: this._role, name: displayName, avatarInitial: initial }));
+      if (out instanceof HTMLElement) this.replaceChildren(out);
+      else this.innerHTML = out;
+    } else {
+      this.innerHTML = `
+      <div class="aparte-message" data-role="${role}" role="article" aria-label="${this._getAriaLabel()}">
+        <div class="aparte-avatar" data-role="${role}"></div>
+        <div class="aparte-body">
+          <div class="aparte-header">
+            <span class="aparte-name">${this._escapeHtml(displayName)}</span>
+            <span class="aparte-timestamp"></span>
+          </div>
+          <div class="aparte-attachments" hidden></div>
+          <div class="aparte-message-content">
+            <div class="aparte-segments"></div>
+            <div class="aparte-content"></div>
+          </div>
+          <div class="aparte-footer">
+            <div class="aparte-branch-picker" hidden>
+              <button class="aparte-branch-prev" aria-label="${this._cfg.getLocale().previousResponse ?? "Previous response"}">&#8249;</button>
+              <span class="aparte-branch-label">1 / 1</span>
+              <button class="aparte-branch-next" aria-label="${this._cfg.getLocale().nextResponse ?? "Next response"}">&#8250;</button>
+            </div>
+            <div class="aparte-action-bar" role="toolbar" aria-label="${this._cfg.getLocale().messageActions ?? "Message actions"}"></div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    this._contentEl = this.querySelector(".aparte-content");
+    this._segmentsEl = this.querySelector(".aparte-segments");
+    this._attachmentsEl = this.querySelector(".aparte-attachments");
+    this._actionBarEl = this.querySelector(".aparte-action-bar");
+    this._branchPickerEl = this.querySelector(".aparte-branch-picker");
+    this._setupBranchPickerListeners();
+    this._updateActionBar();
+    this._renderAvatar();
+  }
+  /**
+   * Hand the avatar host element off to the registered AvatarProvider, if
+   * any. Falls back to the default initial / image rendered by `_render()`
+   * when no provider is set.
+   */
+  _renderAvatar() {
+    const avatar = this.querySelector(".aparte-avatar");
+    if (!avatar) return;
+    if (this._avatarCleanup) {
+      try {
+        this._avatarCleanup();
+      } catch {
+      }
+      this._avatarCleanup = null;
+    }
+    const provider = this._cfg.getAvatarProvider();
+    if (!provider) return;
+    avatar.textContent = "";
+    const cleanup = provider.render(this._role, avatar);
+    if (typeof cleanup === "function") this._avatarCleanup = cleanup;
+  }
+  _updateRole() {
+    const message = this.querySelector(".aparte-message");
+    const avatar = this.querySelector(".aparte-avatar");
+    const nameEl = this.querySelector(".aparte-name");
+    if (message) {
+      message.setAttribute("data-role", this._role);
+      message.setAttribute("aria-label", this._getAriaLabel());
+    }
+    if (avatar) {
+      avatar.setAttribute("data-role", this._role);
+      avatar.textContent = this._getAvatarInitial();
+    }
+    if (nameEl) {
+      nameEl.textContent = this._getDisplayName();
+    }
+    this._updateActionBar();
+    this._renderAvatar();
+  }
+  _updateName() {
+    const avatar = this.querySelector(".aparte-avatar");
+    const nameEl = this.querySelector(".aparte-name");
+    if (avatar && !this._cfg.getAvatarProvider()) avatar.textContent = this._getAvatarInitial();
+    if (nameEl) nameEl.textContent = this._getDisplayName();
+  }
+  _updateContent() {
+    if (!this._contentEl) return;
+    if (this._segments.length > 0) {
+      this._contentEl.style.display = "none";
+      return;
+    }
+    this._contentEl.style.display = "";
+    this._contentEl.innerHTML = this._cfg.renderMarkdown(this._content);
+    if (!this._streaming) this._highlightContentCode();
+  }
+  /**
+   * Apply the registered syntax-highlight provider to the code blocks produced
+   * by the Markdown provider in the simple-content path. Provider-agnostic: a
+   * full-block provider (e.g. Shiki) returns `<pre>…</pre>` so we replace the
+   * element; a token provider (e.g. Prism, highlight.js) returns inner HTML so
+   * we fill the existing `<code>`. No-op when no highlighter is installed.
+   */
+  _highlightContentCode() {
+    if (!this._contentEl || !this._cfg.hasHighlightProvider()) return;
+    this._contentEl.querySelectorAll("pre > code").forEach((codeEl) => {
+      const code = codeEl.textContent ?? "";
+      if (!code.trim()) return;
+      const match = codeEl.className.match(/language-([\w+#-]+)/i);
+      const lang = match?.[1] ?? "";
+      const pre = codeEl.parentElement;
+      Promise.resolve(this._cfg.highlightCode(code, lang)).then((html) => {
+        const out = (html ?? "").trim();
+        if (!out || !pre || !pre.isConnected) return;
+        if (/^<pre[\s>]/i.test(out)) {
+          pre.outerHTML = out;
+        } else {
+          codeEl.innerHTML = out;
+        }
+      }).catch(() => {
+      });
+    });
+  }
+  _renderSegments() {
+    if (!this._segmentsEl) return;
+    this._segmentsEl.innerHTML = "";
+    for (const segment of this._segments) {
+      const renderer = getSegmentRenderer(segment.type);
+      if (renderer) {
+        const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+        if (el) {
+          this._segmentsEl.appendChild(el);
+          runWithConfig(this._cfg, () => renderer.setup?.(el, segment));
+        }
+      } else {
+        warnMissingRenderer(segment.type);
+        const fallback = document.createElement("div");
+        fallback.className = "segment segment-unknown";
+        fallback.textContent = `[Unknown segment type: ${segment.type}]`;
+        this._segmentsEl.appendChild(fallback);
+      }
+    }
+    if (this._contentEl) {
+      this._contentEl.style.display = this._segments.length > 0 ? "none" : "";
+    }
+    this._reflectError();
+  }
+  /**
+   * Reflect the error state on the bubble: `data-error` on `.aparte-message` while
+   * an error segment is present. Derived from segments (not the message `status`
+   * attribute) so it works identically in vanilla and in every wrapper — the
+   * error segment flows through the reactive list in all of them. CSS themes
+   * `.aparte-message[data-error]`; custom error content is via setErrorRenderer.
+   */
+  _reflectError() {
+    const message = this.querySelector(".aparte-message");
+    if (!message) return;
+    const hasError = this._segments.some((s2) => s2.type === "error");
+    if (hasError) message.setAttribute("data-error", "");
+    else message.removeAttribute("data-error");
+  }
+  _updateTimestamp(value) {
+    const timestampEl = this.querySelector(".aparte-timestamp");
+    if (!timestampEl || !value) return;
+    try {
+      const date = new Date(isNaN(Number(value)) ? value : Number(value));
+      timestampEl.textContent = date.toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    } catch {
+      timestampEl.textContent = "";
+    }
+  }
+  _getAriaLabel() {
+    const locale = this._cfg.getLocale();
+    return this._role === "user" ? locale.yourMessage ?? "Your message" : locale.assistantResponse ?? "Assistant response";
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Attachments
+  // ─────────────────────────────────────────────────────────────────────────
+  _updateAttachments() {
+    if (!this._attachmentsEl) return;
+    if (this._role !== "user" || this._attachments.length === 0) {
+      this._attachmentsEl.hidden = true;
+      this._attachmentsEl.innerHTML = "";
+      return;
+    }
+    this._attachmentsEl.hidden = false;
+    const customAttachment = this._cfg.getAttachmentRenderer?.();
+    if (customAttachment) {
+      this._attachmentsEl.replaceChildren();
+      for (const a2 of this._attachments) {
+        const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a2)));
+        if (el) this._attachmentsEl.appendChild(el);
+      }
+      return;
+    }
+    this._attachmentsEl.innerHTML = this._attachments.map((a2) => {
+      const name = this._escapeHtml(a2.name);
+      if (a2.type.startsWith("image/")) {
+        return `<div class="aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${this._escapeHtml(a2.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+      }
+      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("");
+    this._attachmentsEl.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
+      tile.addEventListener("click", () => {
+        const img = tile.querySelector(".aparte-thumb__img");
+        if (!img) return;
+        this.dispatchEvent(new CustomEvent("aparte-attachment-preview", {
+          bubbles: true,
+          composed: true,
+          detail: { url: img.src, name: tile.getAttribute("title") ?? "" }
+        }));
+      });
+    });
+  }
+  /** Uppercased file extension (≤4 chars), or 'FILE' when there is none. */
+  _fileExt(filename) {
+    const dot = filename.lastIndexOf(".");
+    return dot > 0 ? filename.slice(dot + 1).toUpperCase().slice(0, 4) : "FILE";
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Branch Picker
+  // ─────────────────────────────────────────────────────────────────────────
+  _setupBranchPickerListeners() {
+    const prevBtn = this._branchPickerEl?.querySelector(".aparte-branch-prev");
+    const nextBtn = this._branchPickerEl?.querySelector(".aparte-branch-next");
+    const dispatchNav = (direction) => {
+      const messageId = this.getAttribute("message-id");
+      if (!messageId) return;
+      const detail = { messageId, direction };
+      this.dispatchEvent(new CustomEvent("aparte-branch-navigate", {
+        bubbles: true,
+        composed: true,
+        detail
+      }));
+    };
+    prevBtn?.addEventListener("click", () => dispatchNav("prev"));
+    nextBtn?.addEventListener("click", () => dispatchNav("next"));
+  }
+  _updateBranchPicker() {
+    if (!this._branchPickerEl) return;
+    if (this._siblingCount <= 1 || this._role !== "assistant") {
+      this._branchPickerEl.hidden = true;
+      return;
+    }
+    this._branchPickerEl.hidden = false;
+    const label = this._branchPickerEl.querySelector(".aparte-branch-label");
+    if (label) {
+      const customNav = this._cfg.getSiblingNavRenderer?.();
+      if (customNav) {
+        const out = runWithConfig(this._cfg, () => customNav({ count: this._siblingCount, index: this._siblingIndex }));
+        if (out instanceof HTMLElement) label.replaceChildren(out);
+        else label.innerHTML = out;
+      } else {
+        label.textContent = `${this._siblingIndex + 1} / ${this._siblingCount}`;
+      }
+    }
+    const prevBtn = this._branchPickerEl.querySelector(".aparte-branch-prev");
+    const nextBtn = this._branchPickerEl.querySelector(".aparte-branch-next");
+    if (prevBtn) prevBtn.disabled = this._siblingIndex === 0;
+    if (nextBtn) nextBtn.disabled = this._siblingIndex === this._siblingCount - 1;
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Action Bar
+  // ─────────────────────────────────────────────────────────────────────────
+  _updateActionBar() {
+    if (!this._actionBarEl) return;
+    if (this._editing) {
+      this._renderEditActions();
+      return;
+    }
+    const config = this._cfg.getBubbleActions();
+    const icons = this._cfg.getIconProvider();
+    const locale = this._cfg.getLocale();
+    const buttons = [];
+    if (this._role === "user") {
+      if (config.user) {
+        for (const a2 of config.user) buttons.push(this._actionButtonHtml(a2, icons, locale));
+      } else {
+        if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
+        if (config.edit) buttons.push(this._actionButtonHtml("edit", icons, locale));
+      }
+    } else if (this._role === "assistant") {
+      if (config.assistant) {
+        for (const a2 of config.assistant) buttons.push(this._actionButtonHtml(a2, icons, locale));
+      } else {
+        if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
+        if (config.retry) buttons.push(this._actionButtonHtml("retry", icons, locale));
+        if (config.feedback) {
+          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>`);
+        }
+      }
+    }
+    this._actionBarEl.innerHTML = buttons.join("");
+    this._appendCustomActions(icons);
+    this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
+      btn.addEventListener("click", (e2) => this._handleActionClick(e2));
+    });
+  }
+  /** Append the registered custom action buttons for this bubble's role. */
+  _appendCustomActions(icons) {
+    if (!this._actionBarEl) return;
+    for (const a2 of this._cfg.getActions("bubble")) {
+      const roles = a2.bubble?.roles ?? ["user", "assistant"];
+      if (!roles.includes(this._role)) continue;
+      const btn = document.createElement("button");
+      btn.className = "aparte-action-btn aparte-action-custom";
+      btn.dataset["action"] = `custom:${a2.id}`;
+      btn.setAttribute("aria-label", a2.label);
+      btn.setAttribute("title", a2.label);
+      const fromProvider = icons[a2.icon];
+      btn.innerHTML = a2.icon.startsWith("<") ? a2.icon : typeof fromProvider === "function" ? fromProvider() : a2.iconFallback ?? "";
+      this._actionBarEl.appendChild(btn);
+    }
+  }
+  /** Build the `<button>` HTML for a single named action (shared by flag + per-role rendering). */
+  _actionButtonHtml(action, icons, locale) {
+    switch (action) {
+      case "copy": {
+        const l2 = locale.copy ?? "Copy";
+        return `<button class="aparte-action-btn aparte-action-copy" data-action="copy" aria-label="${l2}" title="${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="${l2}" title="${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="${l2}" title="${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="${l2}" title="${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="${l2}" title="${l2}">${icons.thumbDown()}</button>`;
+      }
+      default:
+        return "";
+    }
+  }
+  /** Render the edit-mode action bar: ✓ save (green) + ✗ cancel (red). */
+  _renderEditActions() {
+    if (!this._actionBarEl) return;
+    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="${saveLabel}" title="${saveLabel}">${this._cfg.getIcon("check")}</button><button class="aparte-action-btn aparte-action-edit-cancel" data-action="edit-cancel" aria-label="${cancelLabel}" title="${cancelLabel}">${this._cfg.getIcon("close")}</button>`;
+    this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
+      btn.addEventListener("click", (e2) => this._handleActionClick(e2));
+    });
+  }
+  _handleActionClick(e2) {
+    const btn = e2.currentTarget;
+    const action = btn.dataset["action"];
+    const messageId = this.getAttribute("message-id");
+    if (action?.startsWith("custom:") && messageId) {
+      const actionId = action.slice("custom:".length);
+      const detail = {
+        actionId,
+        zone: "bubble",
+        messageId,
+        role: this._role,
+        targetId: this._resolveTargetId()
+      };
+      this.dispatchEvent(new CustomEvent("aparte-action", {
+        bubbles: true,
+        composed: true,
+        detail
+      }));
+      this._cfg.getActions("bubble").find((x2) => x2.id === actionId)?.onClick?.(e2);
+      return;
+    }
+    switch (action) {
+      case "copy": {
+        const text = this._content || this._segments.map((s2) => s2.content ?? "").join("\n");
+        const icons = this._cfg.getIconProvider();
+        const locale = this._cfg.getLocale();
+        navigator.clipboard.writeText(text).then(() => {
+          btn.innerHTML = icons.check();
+          btn.setAttribute("data-copied", "");
+          const copiedLabel = locale.copied ?? locale.copy ?? "Copied";
+          btn.setAttribute("title", copiedLabel);
+          btn.setAttribute("aria-label", copiedLabel);
+          setTimeout(() => {
+            btn.removeAttribute("data-copied");
+            btn.innerHTML = icons.copy();
+            const copyLabel = locale.copy ?? "Copy";
+            btn.setAttribute("title", copyLabel);
+            btn.setAttribute("aria-label", copyLabel);
+          }, 2e3);
+        }).catch(() => {
+          console.warn("[aparte] Clipboard write failed");
+        });
+        break;
+      }
+      case "retry": {
+        if (!messageId) break;
+        const targetId = this._resolveTargetId();
+        const detail = { messageId, targetId };
+        this.dispatchEvent(new CustomEvent("aparte-retry", {
+          bubbles: true,
+          composed: true,
+          detail
+        }));
+        break;
+      }
+      case "edit": {
+        this._enterEditMode();
+        break;
+      }
+      case "edit-save": {
+        this._exitEditMode(true);
+        break;
+      }
+      case "edit-cancel": {
+        this._exitEditMode(false);
+        break;
+      }
+      case "feedback-positive":
+      case "feedback-negative": {
+        if (!messageId) break;
+        const value = action === "feedback-positive" ? "positive" : "negative";
+        btn.setAttribute("data-submitted", "");
+        const detail = { messageId, value };
+        this.dispatchEvent(new CustomEvent("aparte-feedback", {
+          bubbles: true,
+          composed: true,
+          detail
+        }));
+        break;
+      }
+      case "info": {
+        if (!messageId) break;
+        const detail = {
+          messageId,
+          usage: this._usage ?? void 0
+        };
+        this.dispatchEvent(new CustomEvent("aparte-message-info", {
+          bubbles: true,
+          composed: true,
+          detail
+        }));
+        break;
+      }
+    }
+  }
+  /**
+   * Open the inline editor for a user message. Idempotent — a second `edit`
+   * click while already editing is a no-op (no stacked editors).
+   *
+   * The editor reuses the composer's contenteditable primitive
+   * (`<aparte-composer-input>`) so editing is iso with composing: same autosize,
+   * IME, paste and styling. With no `<aparte-composer>` root it runs standalone —
+   * `Enter` (Shift+Enter = newline) surfaces as `aparte-composer-submit`, which we
+   * treat as save; `Esc` cancels.
+   */
+  _enterEditMode() {
+    if (this._editing || !this._contentEl) return;
+    this._editing = true;
+    this.querySelector(".aparte-message")?.setAttribute("data-editing", "");
+    const input = document.createElement("aparte-composer-input");
+    input.setAttribute("placeholder", this._cfg.getLocale().edit ?? "Edit message");
+    this._editInput = input;
+    this._contentEl.style.display = "none";
+    this._contentEl.insertAdjacentElement("afterend", input);
+    input.setValue(this._content);
+    input.addEventListener("aparte-composer-submit", () => this._exitEditMode(true));
+    input.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && !e2.isComposing) {
+        e2.preventDefault();
+        this._exitEditMode(false);
+      }
+    });
+    this._updateActionBar();
+    input.focusEnd();
+  }
+  /**
+   * Leave edit mode. When `save` is true and the text actually changed, emits
+   * `aparte-edit`; otherwise restores the original message untouched. Always
+   * restores the normal action bar and removes the inline editor.
+   */
+  _exitEditMode(save) {
+    if (!this._editing) return;
+    const newContent = this._editInput?.getValue() ?? "";
+    const original = this._content;
+    this._editInput?.remove();
+    this._editInput = null;
+    if (this._contentEl) this._contentEl.style.display = "";
+    this.querySelector(".aparte-message")?.removeAttribute("data-editing");
+    this._editing = false;
+    this._updateActionBar();
+    if (save && newContent && newContent !== original) {
+      const messageId = this.getAttribute("message-id");
+      if (messageId) {
+        const detail = {
+          messageId,
+          content: newContent,
+          targetId: this._resolveTargetId()
+        };
+        this.dispatchEvent(new CustomEvent("aparte-edit", {
+          bubbles: true,
+          composed: true,
+          detail
+        }));
+      }
+    }
+  }
+  _resolveTargetId() {
+    let el = this.parentElement;
+    while (el) {
+      const tag = el.tagName?.toLowerCase();
+      const isHost = tag === "aparte-chat" || tag === "aparte-chat-component" || el.hasAttribute?.("data-aparte-chat");
+      if (isHost && el.id) return el.id;
+      el = el.parentElement;
+    }
+    return void 0;
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Utilities
+  // ─────────────────────────────────────────────────────────────────────────
+  _escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+  _updateStreaming(streaming) {
+    const wasStreaming = this._streaming;
+    this._streaming = streaming;
+    const message = this.querySelector(".aparte-message");
+    if (message) {
+      message.setAttribute("data-streaming", String(streaming));
+      if (streaming) {
+        message.setAttribute("aria-busy", "true");
+        message.classList.add("aparte-message-streaming");
+      } else {
+        message.removeAttribute("aria-busy");
+        message.classList.remove("aparte-message-streaming");
+      }
+    }
+    if (wasStreaming && !streaming) this._highlightContentCode();
+  }
+}
+if (!customElements.get("aparte-chat-bubble")) {
+  customElements.define("aparte-chat-bubble", AparteChatBubble);
+}
+class AparteChatStatus extends HTMLElement {
+  static get observedAttributes() {
+    return ["visible", "text"];
+  }
+  _cfg;
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this._cfg = resolveConfig(this);
+    this._render();
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
+  }
+  _onConfigChange = (e2) => {
+    const detail = e2.detail;
+    if (detail?.config && detail.config !== this._cfg) return;
+    this.innerHTML = "";
+    this._render();
+  };
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "visible":
+        this._updateVisibility(newValue !== null);
+        break;
+      case "text":
+        this._updateText(newValue);
+        break;
+    }
+  }
+  /**
+   * Show the typing indicator
+   */
+  show() {
+    this.setAttribute("visible", "");
+  }
+  /**
+   * Hide the typing indicator
+   */
+  hide() {
+    this.removeAttribute("visible");
+  }
+  /**
+   * Toggle visibility
+   */
+  toggle() {
+    if (this.hasAttribute("visible")) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  /**
+   * Check if visible
+   */
+  isVisible() {
+    return this.hasAttribute("visible");
+  }
+  _render() {
+    const text = this.getAttribute("text") || "Typing";
+    const visible = this.hasAttribute("visible");
+    if (this.querySelector(".aparte-status-container")) return;
+    const custom = this._cfg?.getStatusRenderer?.();
+    if (custom) {
+      this.innerHTML = `<div class="aparte-message aparte-status-container" data-visible="${visible}" role="status" aria-live="polite"></div>`;
+      const container = this.querySelector(".aparte-status-container");
+      container.setAttribute("aria-label", text);
+      const result = runWithConfig(this._cfg, () => custom(text));
+      if (result instanceof HTMLElement) container.appendChild(result);
+      else container.innerHTML = result;
+      return;
+    }
+    this.innerHTML = `
+      <div
+        class="aparte-message aparte-status-container"
+        data-visible="${visible}"
+        role="status"
+        aria-live="polite"
+      >
+        <div class="aparte-avatar" data-role="assistant" style="visibility: hidden"></div>
+        <div class="aparte-body">
+          <div class="aparte-status-content">
+            <div class="aparte-dots" aria-hidden="true">
+              <span class="aparte-dot"></span>
+            </div>
+            <span class="aparte-status-text"></span>
+          </div>
+        </div>
+      </div>
+    `;
+    this.querySelector(".aparte-status-container")?.setAttribute("aria-label", text);
+    if (this.hasAttribute("text")) {
+      const textEl = this.querySelector(".aparte-status-text");
+      if (textEl) textEl.textContent = text;
+    }
+  }
+  _updateVisibility(visible) {
+    const container = this.querySelector(".aparte-status-container");
+    if (container) {
+      container.setAttribute("data-visible", String(visible));
+    }
+  }
+  _updateText(text) {
+    const textEl = this.querySelector(".aparte-status-text");
+    const container = this.querySelector(".aparte-status-container");
+    if (!container) return;
+    if (textEl) textEl.textContent = text ?? "";
+    container.setAttribute("aria-label", text || "Typing");
+  }
+}
+if (!customElements.get("aparte-chat-status")) {
+  customElements.define("aparte-chat-status", AparteChatStatus);
+}
+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.
+  _container = null;
+  _scrollBtn = null;
+  _bottomSpacer = null;
+  /**
+   * In framework-managed mode there is no spacer ELEMENT (an extra child would
+   * collide with the framework's own DOM reconciliation). The spacer is an
+   * additive `padding-bottom` on the host, tracked here so `_recalculateSpacer`
+   * can read the current value without measuring an element.
+   */
+  _fwSpacerHeight = 0;
+  _spacerRafId = null;
+  _spacerFrozenUntil = 0;
+  _layoutTransitionMs = 0;
+  _repo = new MessageRepository();
+  _isAutoScrollEnabled = true;
+  _scrollThreshold = 50;
+  /** When true, the next _autoScroll() call uses smooth instead of instant, then resets. */
+  _smoothScrollOnce = false;
+  /**
+   * DOM render cap: the max number of `<aparte-chat-bubble>` elements kept in the
+   * DOM at once (a perf ceiling for very long conversations). This NEVER evicts
+   * messages from the repository — the full conversation tree and its persistence
+   * snapshot stay intact; only the oldest rendered bubbles are dropped from view.
+   */
+  _maxRenderedBubbles = 1e3;
+  /** One-time guard for the deprecated `maxMessages` warning. */
+  _warnedMaxMessagesDeprecation = false;
+  _resizeObserver = null;
+  _mutationObserver = null;
+  _boundResetHandler = null;
+  /**
+   * When true, _reRenderActivePath() only dispatches aparte-path-changed without
+   * touching the DOM. Set via setFrameworkManagedDOM(true) when a framework
+   * (e.g. Angular) owns the bubble elements.
+   */
+  _frameworkManagedDOM = false;
+  static get observedAttributes() {
+    return ["scroll-threshold", "max-rendered-bubbles", "max-messages"];
+  }
+  constructor() {
+    super();
+    this._handleScroll = this._handleScroll.bind(this);
+  }
+  connectedCallback() {
+    if (this.hasAttribute("framework-managed")) this._frameworkManagedDOM = true;
+    this._render();
+    this._setupEventListeners();
+    this._setupObservers();
+    this._boundResetHandler = () => this.clearAll();
+    window.addEventListener("aparte-reset", this._boundResetHandler);
+  }
+  disconnectedCallback() {
+    if (this._boundResetHandler) {
+      window.removeEventListener("aparte-reset", this._boundResetHandler);
+      this._boundResetHandler = null;
+    }
+    this._cleanup();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "scroll-threshold":
+        this._scrollThreshold = parseInt(newValue || "50", 10);
+        break;
+      case "max-rendered-bubbles":
+        this._maxRenderedBubbles = parseInt(newValue || "1000", 10);
+        this._pruneRenderedBubbles();
+        break;
+      case "max-messages":
+        this._warnMaxMessagesDeprecated();
+        this._maxRenderedBubbles = parseInt(newValue || "1000", 10);
+        this._pruneRenderedBubbles();
+        break;
+    }
+  }
+  /**
+   * Configure viewport with options
+   */
+  configure(config) {
+    if (config.scrollThreshold !== void 0) {
+      this._scrollThreshold = config.scrollThreshold;
+    }
+    if (config.maxRenderedBubbles !== void 0) {
+      this._maxRenderedBubbles = config.maxRenderedBubbles;
+      this._pruneRenderedBubbles();
+    }
+    if (config.maxMessages !== void 0) {
+      this._warnMaxMessagesDeprecated();
+      this._maxRenderedBubbles = config.maxMessages;
+      this._pruneRenderedBubbles();
+    }
+    if (config.layoutTransitionMs !== void 0) {
+      this._layoutTransitionMs = config.layoutTransitionMs;
+    }
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Simple Content Streaming
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * Append a token chunk to a message's content (simple text streaming)
+   * @param messageId - Unique identifier for the message
+   * @param chunk - Token chunk to append
+   */
+  appendToken(messageId, chunk) {
+    const message = this._getOrCreateMessage(messageId);
+    message.content = (message.content || "") + chunk;
+    this._notifyBubble(messageId, "appendToken", chunk);
+    this._autoScroll();
+    this._scheduleSpacerUpdate();
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segment-Aware Streaming
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * Append content to a specific segment within a message
+   * @param messageId - Message containing the segment
+   * @param segmentId - Target segment ID
+   * @param chunk - Content to append
+   */
+  appendToSegment(messageId, segmentId, chunk) {
+    const message = this._getOrCreateMessage(messageId);
+    if (!message.segments) {
+      message.segments = [];
+    }
+    const segment = message.segments.find((s2) => s2.id === segmentId);
+    if (segment && "content" in segment) {
+      segment.content += chunk;
+    }
+    this.dispatchEvent(new CustomEvent("aparte-segment-update", {
+      bubbles: true,
+      composed: true,
+      detail: { messageId, segmentId, content: chunk, append: true }
+    }));
+    this._notifyBubble(messageId, "appendToSegment", chunk, segmentId);
+    this._autoScroll();
+  }
+  /**
+   * The active (head) message id — the target of `AparteClient`'s 1-argument
+   * streaming convention (`addSegment(segment)`, `updateSegment(segmentId,
+   * updates)`, …) which operates on "the current message". Lets a bare
+   * `<aparte-chat-viewport>` be a valid `AparteClient` target, exactly like a
+   * framework wrapper's host element.
+   */
+  _activeMessageId() {
+    return this._repo.headId;
+  }
+  addSegment(messageIdOrSegment, maybeSegment) {
+    const messageId = typeof messageIdOrSegment === "string" ? messageIdOrSegment : this._activeMessageId();
+    const segment = typeof messageIdOrSegment === "string" ? maybeSegment : messageIdOrSegment;
+    if (!messageId || !segment) return;
+    const message = this._getOrCreateMessage(messageId);
+    if (!message.segments) {
+      message.segments = [];
+    }
+    message.segments.push(segment);
+    this._notifyBubble(messageId, "addSegment", segment);
+    this._autoScroll();
+  }
+  updateSegment(a2, b2, c2) {
+    const clientForm = c2 === void 0 && typeof b2 === "object";
+    const messageId = clientForm ? this._activeMessageId() : a2;
+    const segmentId = clientForm ? a2 : b2;
+    const updates = clientForm ? b2 : c2;
+    if (!messageId) return;
+    const message = this._repo.getMessageById(messageId);
+    if (!message?.segments) return;
+    const segmentIndex = message.segments.findIndex((s2) => s2.id === segmentId);
+    if (segmentIndex !== -1) {
+      message.segments[segmentIndex] = {
+        ...message.segments[segmentIndex],
+        ...updates
+      };
+      this._notifyBubble(messageId, "updateSegment", { segmentId, updates });
+    }
+  }
+  removeSegment(a2, b2) {
+    const clientForm = b2 === void 0;
+    const messageId = clientForm ? this._activeMessageId() : a2;
+    const segmentId = clientForm ? a2 : b2;
+    if (!messageId || !segmentId) return;
+    const message = this._repo.getMessageById(messageId);
+    if (message?.segments) {
+      const idx = message.segments.findIndex((s2) => s2.id === segmentId);
+      if (idx !== -1) message.segments.splice(idx, 1);
+    }
+    this._notifyBubble(messageId, "removeSegment", segmentId);
+  }
+  /**
+   * Start a new streaming segment (e.g., thinking or code block)
+   * Creates the segment and marks it as streaming
+   */
+  startSegment(messageId, segment) {
+    const streamingSegment = { ...segment, isStreaming: true };
+    this.addSegment(messageId, streamingSegment);
+  }
+  /**
+   * Complete a streaming segment
+   */
+  completeSegment(messageId, segmentId) {
+    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.
+   */
+  setUsage(messageId, usage) {
+    const message = this._repo.getMessageById(messageId);
+    if (message) message.usage = usage;
+    this._notifyBubble(messageId, "setUsage", usage);
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Message Management
+  // ─────────────────────────────────────────────────────────────────────────
+  /**
+   * Mark a message as finished streaming
+   */
+  completeMessage(messageId) {
+    const message = this._repo.getMessageById(messageId);
+    if (message) {
+      message.isStreaming = false;
+      message.status = "completed";
+      message.segments?.forEach((s2) => {
+        s2.isStreaming = false;
+      });
+      this._notifyBubble(messageId, "complete", { status: "completed" });
+      this._recalculateSpacer();
+    }
+  }
+  /**
+   * Atomic update for a message by ID
+   * Supports updating content, status, segments, and other metadata
+   */
+  updateMessage(messageId, updates) {
+    const message = this._repo.getMessageById(messageId);
+    if (!message) return;
+    Object.assign(message, updates);
+    if (updates.status) {
+      message.isStreaming = updates.status === "streaming" || updates.status === "pending";
+    }
+    this._notifyBubble(messageId, "update", updates);
+    this._autoScroll();
+  }
+  /**
+   * Add a complete message to the message registry.
+   *
+   * @remarks
+   * **Framework-managed DOM only.** Records the message in the tree but does NOT
+   * paint a bubble on its own (a framework wrapper reconciles the DOM from the
+   * list). For standalone / vanilla usage call {@link appendMessage} instead,
+   * which both records the message and creates its bubble element.
+   */
+  addMessage(message) {
+    this._repo.addOrUpdateMessage(this._repo.headId, { ...message });
+    this._pruneRenderedBubbles();
+    this._autoScroll();
+  }
+  /**
+   * Append a new message and create its bubble in the DOM.
+   * Implements the same contract as the Angular wrapper's appendMessage(),
+   * making aparte-chat-viewport a fully standalone target for aparte-client.
+   * When `_frameworkManagedDOM` is true, only the internal repo is updated —
+   * the framework owns the DOM and will create the bubble element itself.
+   */
+  appendMessage(message) {
+    this._repo.addOrUpdateMessage(this._repo.headId, { ...message });
+    if (!this._frameworkManagedDOM) {
+      const wrapper = this.querySelector(".aparte-messages-wrapper");
+      if (wrapper) {
+        const bubble = document.createElement("aparte-chat-bubble");
+        bubble.setAttribute("message-id", message.id);
+        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") {
+          bubble.setAttribute("streaming", "");
+        }
+        if (this._bottomSpacer && this._bottomSpacer.parentNode === wrapper) {
+          wrapper.insertBefore(bubble, this._bottomSpacer);
+        } else {
+          wrapper.appendChild(bubble);
+        }
+      }
+    }
+    this._pruneRenderedBubbles();
+    this._recalculateSpacer();
+    if (message.role === "user") {
+      this._isAutoScrollEnabled = true;
+      requestAnimationFrame(() => this._smoothScrollToBottom());
+    } else {
+      this._autoScroll();
+    }
+  }
+  /**
+   * Update the last message content, optionally appending.
+   * Implements the same contract as the Angular wrapper's updateLastMessage(),'
+   * making aparte-chat-viewport a fully standalone streaming target for aparte-client.
+   */
+  updateLastMessage(content, options) {
+    const lastId = this._repo.headId;
+    if (!lastId) return;
+    if (options?.append) {
+      this.appendToken(lastId, content);
+    } else {
+      const message = this._repo.getMessageById(lastId);
+      if (message) message.content = content;
+      this._notifyBubble(lastId, "appendToken", content);
+    }
+  }
+  /**
+   * Add a new sibling branch to an assistant message (retry flow).
+   * Creates a new empty assistant message as a sibling of `messageId`
+   * under the same parent, switches the active branch to it, and
+   * re-renders the active path.
+   * @returns The index of the new branch in the siblings array, or 0 on failure.
+   */
+  addBranch(messageId) {
+    const meta = this._repo.getMessage(messageId);
+    if (!meta) return 0;
+    const newMsg = {
+      id: crypto.randomUUID(),
+      role: "assistant",
+      content: "",
+      status: "pending",
+      timestamp: Date.now()
+    };
+    this._repo.addOrUpdateMessage(meta.parentId, newMsg);
+    this._repo.switchToBranch(newMsg.id);
+    this._reRenderActivePath();
+    const siblings = this._repo.getBranches(newMsg.id);
+    return siblings.indexOf(newMsg.id);
+  }
+  /**
+   * Add a new message relative to `existingId`, switch to it, and re-render.
+   *
+   * Role-aware semantics:
+   *  - existingId is an **assistant** message → create a sibling (same parent),
+   *    so the active path replaces the old response with the new one.
+   *  - existingId is a **user** message → create a child of that message,
+   *    so the user message stays on the active path and the new response follows it.
+   *
+   * Returns the new message's ID, or null if `existingId` is not found.
+   */
+  addSiblingOf(existingId, newMessage) {
+    const meta = this._repo.getMessage(existingId);
+    if (!meta) return null;
+    const parentId = meta.message.role === "user" ? existingId : meta.parentId;
+    this._repo.addOrUpdateMessage(parentId, { ...newMessage });
+    this._repo.switchToBranch(newMessage.id);
+    this._reRenderActivePath();
+    return newMessage.id;
+  }
+  /**
+   * Navigate to the previous or next sibling branch of a message.
+   * Triggers a full re-render of the active path.
+   */
+  navigateBranch(messageId, direction) {
+    const siblings = this._repo.getBranches(messageId);
+    const currentIdx = siblings.indexOf(messageId);
+    if (currentIdx === -1) return;
+    const targetIdx = direction === "prev" ? currentIdx - 1 : currentIdx + 1;
+    if (targetIdx < 0 || targetIdx >= siblings.length) return;
+    this._isAutoScrollEnabled = false;
+    this._updateScrollButton();
+    this._repo.switchToBranch(siblings[targetIdx]);
+    this._reRenderActivePath();
+  }
+  /**
+   * Remove ALL responses to a user message (every child branch) and set head
+   * back to `userMessageId`. Cleaner than `truncateFrom` for edit flows: it
+   * discards stale sibling branches so the regenerated response starts alone.
+   */
+  truncateResponsesAfter(userMessageId) {
+    const prevMessages = this._repo.getMessages();
+    this._repo.clearChildren(userMessageId);
+    if (!this._frameworkManagedDOM) {
+      const wrapper = this.querySelector(".aparte-messages-wrapper");
+      if (wrapper) {
+        const startIdx = prevMessages.findIndex((m2) => m2.id === userMessageId);
+        const toRemove = startIdx >= 0 ? prevMessages.slice(startIdx + 1) : [];
+        for (const m2 of toRemove) {
+          wrapper.querySelector(`aparte-chat-bubble[message-id="${cssEscape(m2.id)}"]`)?.remove();
+        }
+      }
+    }
+  }
+  /**
+   * Remove all messages from `messageId` onwards (inclusive) from state and DOM.
+   * Used by edit to truncate history before re-generating.
+   */
+  truncateFrom(messageId) {
+    const allMsgs = this._repo.getMessages();
+    const startIdx = allMsgs.findIndex((m2) => m2.id === messageId);
+    if (startIdx === -1) return;
+    const toRemove = allMsgs.slice(startIdx).map((m2) => m2.id);
+    this._repo.resetHead(messageId);
+    if (!this._frameworkManagedDOM) {
+      const wrapper = this.querySelector(".aparte-messages-wrapper");
+      for (const id of toRemove) {
+        wrapper?.querySelector(`aparte-chat-bubble[message-id="${cssEscape(id)}"]`)?.remove();
+      }
+    }
+  }
+  /**
+   * Get a message by ID
+   */
+  getMessage(messageId) {
+    return this._repo.getMessageById(messageId);
+  }
+  getMessages() {
+    return this._repo.getMessages();
+  }
+  /**
+   * Export the full conversation tree (all branches, not just the active path).
+   * The returned snapshot can be persisted and restored via `importTree()`.
+   */
+  exportTree() {
+    return this._repo.export();
+  }
+  /**
+   * Import a previously-exported tree snapshot, restoring the full branch
+   * topology and the active head. Replaces any existing repo content.
+   *
+   * Always calls `_reRenderActivePath()`:
+   * - In native DOM mode: rebuilds bubble elements.
+   * - In framework-managed mode: skips DOM manipulation but dispatches
+   *   `aparte-path-changed` with sibling metadata so the wrapper can update
+   *   branch arrows on already-rendered bubbles.
+   */
+  importTree(tree) {
+    this.clearAll();
+    this._repo.import(tree);
+    this._reRenderActivePath();
+  }
+  /**
+   * Clear all messages and remove all bubble elements from the DOM.
+   * Also dispatches a aparte-reset-done event.
+   *
+   * In framework-managed mode the DOM is owned by the host framework
+   * (Angular @for, React, etc.) and we must not clear `innerHTML` — doing
+   * so desynchronises the framework's view tree from the live DOM and the
+   * next change-detection pass throws `NotFoundError` on insertBefore.
+   */
+  clearAll() {
+    this._repo.clear();
+    if (!this._frameworkManagedDOM) {
+      const wrapper = this.querySelector(".aparte-messages-wrapper");
+      if (wrapper) {
+        Array.from(wrapper.querySelectorAll("aparte-chat-bubble")).forEach((b2) => b2.remove());
+      }
+    }
+    this._setSpacerHeight(0);
+    this._isAutoScrollEnabled = true;
+    this._updateScrollButton();
+    this.dispatchEvent(new CustomEvent("aparte-reset-done", { bubbles: true, composed: true }));
+  }
+  /**
+   * Clear all messages
+   * @deprecated Use clearAll() to also remove DOM bubbles
+   */
+  clearMessages() {
+    this._repo.clear();
+  }
+  /**
+   * Replace the entire message list in one shot. Used when switching
+   * conversations: clears existing repo + DOM, then appends each message.
+   *
+   * In framework-managed mode the framework re-renders the bubble DOM
+   * itself; we only update the internal repo (used by aparte-client to
+   * build chat history).
+   */
+  setMessages(messages) {
+    this.clearAll();
+    for (const m2 of messages) {
+      this.appendMessage(m2);
+    }
+  }
+  /**
+   * Scroll to bottom of viewport
+   */
+  scrollToBottom() {
+    this._scrollToBottom();
+  }
+  /**
+   * Reset the bottom spacer to 0 height immediately and freeze it for
+   * 350 ms so the host-app layout transition (e.g. flex: 0→1 animation)
+   * does not trigger a premature recalculation with mid-animation geometry.
+   * Call before a full messages swap.
+   */
+  resetSpacer() {
+    this._setSpacerHeight(0);
+    if (this._layoutTransitionMs > 0) {
+      this._spacerFrozenUntil = Date.now() + this._layoutTransitionMs;
+    }
+  }
+  /**
+   * Enable or disable auto-scroll
+   */
+  setAutoScroll(enabled) {
+    this._isAutoScrollEnabled = enabled;
+  }
+  /**
+   * Signal that a framework (e.g. Angular) manages the bubble DOM.
+   * When true, branch navigation dispatches `aparte-path-changed` without
+   * clearing/rebuilding the messages wrapper — the framework re-renders instead.
+   */
+  setFrameworkManagedDOM(managed) {
+    this._frameworkManagedDOM = managed;
+  }
+  // ─────────────────────────────────────────────────────────────────────────
+  // Private Helpers
+  // ─────────────────────────────────────────────────────────────────────────
+  _getOrCreateMessage(messageId) {
+    const existing = this._repo.getMessageById(messageId);
+    if (existing) return existing;
+    const message = {
+      id: messageId,
+      role: "assistant",
+      content: "",
+      timestamp: Date.now(),
+      isStreaming: true,
+      status: "streaming"
+    };
+    this._repo.addOrUpdateMessage(this._repo.headId, message);
+    return message;
+  }
+  _notifyBubble(messageId, action, payload, segmentId) {
+    const bubble = this.querySelector(
+      `aparte-chat-bubble[message-id="${cssEscape(messageId)}"], [data-aparte-bubble][message-id="${cssEscape(messageId)}"]`
+    );
+    if (!bubble) return;
+    switch (action) {
+      case "appendToken":
+        bubble.appendToken?.(payload);
+        break;
+      case "appendToSegment":
+        bubble.appendToSegment?.(segmentId, payload);
+        break;
+      case "addSegment":
+        bubble.addSegment?.(payload);
+        break;
+      case "updateSegment": {
+        const { segmentId: sid, updates: segUpdates } = payload;
+        bubble.updateSegment?.(sid, segUpdates);
+        break;
+      }
+      case "removeSegment":
+        bubble.removeSegment?.(payload);
+        break;
+      case "setUsage":
+        bubble.setUsage?.(payload);
+        break;
+      case "update":
+        if ("status" in payload || "segments" in payload) {
+          bubble.updateMessage?.(payload);
+        }
+        break;
+      case "complete":
+        bubble.updateMessage?.(payload);
+        break;
+    }
+  }
+  /**
+   * Re-render the active path: clears the messages wrapper and rebuilds bubbles
+   * for every message on the current active branch path (root → head).
+   * Calls `setSiblings(count, index)` on each bubble that has siblings, and
+   * dispatches `aparte-path-changed` so Angular wrapper can sync its signal.
+   *
+   * When `_frameworkManagedDOM` is true (set via setFrameworkManagedDOM), the DOM
+   * manipulation is skipped — only `aparte-path-changed` is dispatched so the
+   * framework can re-render from updated signal state.
+   */
+  _reRenderActivePath() {
+    const activeMessages = this._repo.getMessages();
+    const siblingsInfo = activeMessages.map((m2) => {
+      const sibs = this._repo.getBranches(m2.id);
+      return { id: m2.id, count: sibs.length, index: sibs.indexOf(m2.id) };
+    });
+    if (this._frameworkManagedDOM) {
+      this._dispatchPathChanged(activeMessages, siblingsInfo);
+      return;
+    }
+    const wrapper = this.querySelector(".aparte-messages-wrapper");
+    if (!wrapper) return;
+    wrapper.innerHTML = "";
+    const startIdx = Math.max(0, activeMessages.length - this._maxRenderedBubbles);
+    for (let i2 = startIdx; i2 < activeMessages.length; i2++) {
+      const message = activeMessages[i2];
+      const sibInfo = siblingsInfo[i2];
+      const bubble = document.createElement("aparte-chat-bubble");
+      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") {
+        bubble.setAttribute("streaming", "");
+      }
+      wrapper.appendChild(bubble);
+      populateBubbleFromMessage(bubble, message, sibInfo);
+    }
+    this._dispatchPathChanged(activeMessages, siblingsInfo);
+    this._recalculateSpacer();
+    requestAnimationFrame(() => this._handleScroll());
+  }
+  _dispatchPathChanged(messages, siblings) {
+    const detail = { messages, siblings };
+    this.dispatchEvent(new CustomEvent("aparte-path-changed", {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+  }
+  _autoScroll() {
+    if (this._isAutoScrollEnabled) {
+      if (this._smoothScrollOnce) {
+        this._smoothScrollOnce = false;
+        requestAnimationFrame(() => this._smoothScrollToBottom());
+      } else {
+        requestAnimationFrame(() => this._scrollToBottom());
+      }
+    }
+    this._pruneRenderedBubbles();
+  }
+  /**
+   * Request that the next auto-scroll triggered by a DOM mutation uses
+   * smooth behaviour instead of instant. Call this just before adding a
+   * user message bubble so the viewport animates down rather than jumping.
+   * Resets automatically after the first auto-scroll fires.
+   */
+  requestSmoothScroll() {
+    this._smoothScrollOnce = true;
+  }
+  _render() {
+    if (this._frameworkManagedDOM) {
+      this._setupFrameworkDOM();
+      return;
+    }
+    if (!this.querySelector(".aparte-viewport-container")) {
+      const container = document.createElement("div");
+      container.className = "aparte-viewport-container";
+      const locale = resolveConfig(this).getLocale();
+      if (locale.direction) {
+        container.setAttribute("dir", locale.direction);
+      }
+      container.setAttribute("role", "log");
+      container.setAttribute("aria-live", "polite");
+      container.setAttribute("aria-atomic", "false");
+      container.setAttribute("aria-relevant", "additions");
+      const wrapper = document.createElement("div");
+      wrapper.className = "aparte-messages-wrapper";
+      while (this.firstChild) {
+        wrapper.appendChild(this.firstChild);
+      }
+      this._bottomSpacer = document.createElement("div");
+      this._bottomSpacer.className = "aparte-bottom-spacer";
+      this._bottomSpacer.setAttribute("aria-hidden", "true");
+      wrapper.appendChild(this._bottomSpacer);
+      container.appendChild(wrapper);
+      this.appendChild(container);
+      this._container = container;
+      this._scrollBtn = document.createElement("button");
+      this._scrollBtn.className = "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.appendChild(this._scrollBtn);
+    } else {
+      this._container = this.querySelector(".aparte-viewport-container");
+      this._scrollBtn = this.querySelector(".aparte-scroll-btn");
+      this._bottomSpacer = this.querySelector(".aparte-bottom-spacer");
+    }
+  }
+  /**
+   * DOM setup for framework-managed mode. The framework (React/Vue/Svelte/
+   * Angular) renders the bubble elements as DIRECT children of the host, so we
+   * must NOT relocate them into an internal wrapper — that desyncs the
+   * framework's virtual DOM from the real DOM and throws NotFoundError on the
+   * next append. Instead the HOST itself is the scroll surface, the spacer is
+   * additive `padding-bottom` (no element), and the scroll button is a
+   * `position: sticky` TRAILING foreign child (kept last by the framework
+   * MutationObserver). A present foreign node is still a valid `insertBefore`
+   * reference for the framework — the crash came from a RELOCATED node, not a
+   * foreign one.
+   */
+  _setupFrameworkDOM() {
+    this._container = this;
+    this._bottomSpacer = null;
+    if (this.classList.contains("aparte-viewport--framework")) {
+      this._scrollBtn = this.querySelector(":scope > .aparte-scroll-btn");
+      return;
+    }
+    this.classList.add("aparte-viewport--framework");
+    const scrollBtn = document.createElement("button");
+    scrollBtn.className = "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>`;
+    this.appendChild(scrollBtn);
+    this._scrollBtn = scrollBtn;
+  }
+  /**
+   * Keep the sticky scroll button as the last child in framework-managed mode.
+   * The framework usually inserts bubbles before its own trailing nodes (so the
+   * button stays last), but a plain `appendChild` at the very end (e.g. some
+   * Angular @for paths) can land a bubble after it — move it back. Idempotent:
+   * a no-op when already last, so it never loops the MutationObserver.
+   */
+  _keepScrollButtonLast() {
+    if (!this._scrollBtn) return;
+    if (this.lastElementChild !== this._scrollBtn) {
+      this.appendChild(this._scrollBtn);
+    }
+  }
+  /** Current spacer height — a padding value (framework) or the element's height (core). */
+  _getSpacerHeight() {
+    if (this._frameworkManagedDOM) return this._fwSpacerHeight;
+    return this._bottomSpacer?.offsetHeight ?? 0;
+  }
+  /** Set the spacer — host padding (framework, additive to base padding) or element height (core). */
+  _setSpacerHeight(px) {
+    if (this._frameworkManagedDOM) {
+      this._fwSpacerHeight = px;
+      this.style.setProperty("--aparte-fw-spacer", `${px}px`);
+    } else if (this._bottomSpacer) {
+      this._bottomSpacer.style.height = `${px}px`;
+    }
+  }
+  _setupEventListeners() {
+    this._container?.addEventListener("scroll", this._handleScroll, { passive: true });
+    this._scrollBtn?.addEventListener("click", () => {
+      this._isAutoScrollEnabled = true;
+      this._smoothScrollToBottom();
+      this._updateScrollButton();
+    });
+    this.addEventListener("aparte-branch-navigate", (e2) => {
+      const evt = e2;
+      evt.stopPropagation();
+      this.navigateBranch(evt.detail.messageId, evt.detail.direction);
+    });
+  }
+  _setupObservers() {
+    this._resizeObserver = new ResizeObserver(() => {
+      if (this._isAutoScrollEnabled) {
+        this._scrollToBottom();
+      }
+      this._recalculateSpacer();
+    });
+    const wrapper = this.querySelector(".aparte-messages-wrapper");
+    if (this._container) {
+      if (this._frameworkManagedDOM) {
+        this._resizeObserver.observe(this._container, { box: "border-box" });
+      } else {
+        this._resizeObserver.observe(this._container);
+      }
+    }
+    this._mutationObserver = new MutationObserver(() => {
+      if (this._frameworkManagedDOM) this._keepScrollButtonLast();
+      if (this._isAutoScrollEnabled) {
+        requestAnimationFrame(() => this._scrollToBottom());
+      }
+      this._scheduleSpacerUpdate();
+    });
+    const observeTarget = this._frameworkManagedDOM ? this : wrapper;
+    if (observeTarget) {
+      this._mutationObserver.observe(observeTarget, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  _handleScroll() {
+    if (!this._container) return;
+    const { scrollTop, scrollHeight, clientHeight } = this._container;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    this._isAutoScrollEnabled = distanceFromBottom <= this._scrollThreshold;
+    this._updateScrollButton();
+  }
+  _scrollToBottom() {
+    if (!this._container) return;
+    this._container.scrollTop = this._container.scrollHeight;
+  }
+  _smoothScrollToBottom() {
+    if (!this._container) return;
+    if (typeof this._container.scrollTo === "function" && !this._prefersReducedMotion()) {
+      this._container.scrollTo({ top: this._container.scrollHeight, behavior: "smooth" });
+    } else {
+      this._container.scrollTop = this._container.scrollHeight;
+    }
+  }
+  _prefersReducedMotion() {
+    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).
+   */
+  _updateScrollButton() {
+    this._scrollBtn?.classList.toggle("aparte-scroll-btn--hidden", this._isAutoScrollEnabled);
+  }
+  /**
+   * Recalculate the bottom spacer height so the last user message is always
+   * pinned to the top of the scroll area when a response is being generated.
+   *
+   * spacer = max(0, viewportHeight - lastUserBubble.offsetHeight - lastAssistantBubble.offsetHeight)
+   *
+   * The spacer shrinks progressively as the assistant streams content, eventually
+   * reaching 0 when the combined height fills the viewport.
+   */
+  _recalculateSpacer() {
+    if (!this._container) return;
+    if (!this._frameworkManagedDOM && !this._bottomSpacer) return;
+    if (Date.now() < this._spacerFrozenUntil) return;
+    const allBubbles = Array.from(
+      this.querySelectorAll("aparte-chat-bubble")
+    );
+    if (allBubbles.length === 0) {
+      this._setSpacerHeight(0);
+      return;
+    }
+    const lastUserBubble = [...allBubbles].reverse().find((b2) => b2.getAttribute("role") === "user");
+    if (!lastUserBubble) {
+      this._setSpacerHeight(0);
+      return;
+    }
+    const currentSpacerH = this._getSpacerHeight();
+    const containerRect = this._container.getBoundingClientRect();
+    const userRect = lastUserBubble.getBoundingClientRect();
+    const userTopInContent = userRect.top - containerRect.top + this._container.scrollTop;
+    const scrollHeightWithoutSpacer = this._container.scrollHeight - currentSpacerH;
+    if (scrollHeightWithoutSpacer <= this._container.clientHeight) {
+      this._setSpacerHeight(0);
+      return;
+    }
+    const contentBelowUserTop = scrollHeightWithoutSpacer - userTopInContent;
+    const needed = this._container.clientHeight - contentBelowUserTop;
+    const maxSpacer = this._container.clientHeight;
+    this._setSpacerHeight(Math.min(Math.max(0, needed), maxSpacer));
+    if (this._isAutoScrollEnabled) {
+      this._scrollToBottom();
+    }
+  }
+  /**
+   * Schedule a spacer recalculation on the next animation frame.
+   * Batches multiple rapid calls (e.g. during token streaming) into one.
+   *
+   * Single-RAF intentional: both the scroll-to-bottom queued by MutationObserver
+   * and this spacer recalculation must land in the *same* frame so the browser
+   * paints exactly once — with the correct scroll position *and* the correct
+   * spacer height. A double-RAF would put the spacer shrink one frame after the
+   * scroll, causing a 1-frame layout jump during streaming.
+   */
+  _scheduleSpacerUpdate() {
+    if (this._spacerRafId !== null) return;
+    this._spacerRafId = requestAnimationFrame(() => {
+      this._spacerRafId = null;
+      this._recalculateSpacer();
+    });
+  }
+  /**
+   * Cap the number of rendered bubbles in the DOM (perf ceiling only).
+   *
+   * Drops the oldest `<aparte-chat-bubble>` elements beyond `_maxRenderedBubbles`
+   * from the DOM. It **never** touches the MessageRepository — the conversation
+   * model and its persistence snapshot stay complete (retention/eviction is a
+   * consumer/persistence concern, not the viewport's). No-op when a framework
+   * owns the DOM.
+   */
+  _pruneRenderedBubbles() {
+    if (this._frameworkManagedDOM) return;
+    const wrapper = this.querySelector(".aparte-messages-wrapper");
+    if (!wrapper) return;
+    const bubbles = wrapper.querySelectorAll("aparte-chat-bubble");
+    const excess = bubbles.length - this._maxRenderedBubbles;
+    for (let i2 = 0; i2 < excess; i2++) {
+      bubbles[i2]?.remove();
+    }
+  }
+  _warnMaxMessagesDeprecated() {
+    if (this._warnedMaxMessagesDeprecation) return;
+    this._warnedMaxMessagesDeprecation = true;
+    console.warn(
+      "[Aparte] `maxMessages` / `max-messages` on aparte-chat-viewport is deprecated: it used to silently evict messages from the conversation model. It now only caps rendered bubbles in the DOM — use `maxRenderedBubbles` / `max-rendered-bubbles`. For actual history retention, configure it on your ConversationManager instead."
+    );
+  }
+  _cleanup() {
+    this._container?.removeEventListener("scroll", this._handleScroll);
+    this._resizeObserver?.disconnect();
+    this._mutationObserver?.disconnect();
+    this._resizeObserver = null;
+    this._mutationObserver = null;
+    if (this._spacerRafId !== null) {
+      cancelAnimationFrame(this._spacerRafId);
+      this._spacerRafId = null;
+    }
+  }
+}
+if (!customElements.get("aparte-chat-viewport")) {
+  customElements.define("aparte-chat-viewport", AparteChatViewport);
+}
+class AparteComposer extends HTMLElement {
+  _value = "";
+  _streaming = false;
+  _attachments = [];
+  _listeners = /* @__PURE__ */ new Map();
+  _panelActive = false;
+  _panelSubmitEnabled = false;
+  _panelOnSubmit = null;
+  // Internal bus events that represent an observable STATE change — these are
+  // mirrored to the public `aparte-composer-change` DOM event. `submit`/`cancel`
+  // are actions, not state, and are covered by `aparte-send`/`aparte-cancel`.
+  static _STATE_EVENTS = /* @__PURE__ */ new Set([
+    "value-change",
+    "streaming-change",
+    "disabled-change",
+    "attachments-change",
+    "panel-change"
+  ]);
+  // Window event bindings
+  _onMessageStart = this._handleMessageStart.bind(this);
+  _onMessageDone = this._handleMessageDone.bind(this);
+  /** Config governing THIS composer (nearest instance boundary, else global). */
+  _cfg = AparteConfig;
+  _configUnsub = null;
+  /** True while `requireModelSelection` is on AND no model is selected — blocks send. */
+  _modelGated = false;
+  _onConfigChange = () => {
+    this._evaluateModelGate();
+  };
+  static get observedAttributes() {
+    return ["placeholder", "disabled", "target"];
+  }
+  connectedCallback() {
+    window.addEventListener("aparte-message-start", this._onMessageStart);
+    window.addEventListener("aparte-message-done", this._onMessageDone);
+    window.addEventListener("aparte-message-error", this._onMessageDone);
+    window.addEventListener("aparte-message-aborted", this._onMessageDone);
+    this._cfg = resolveConfig(this);
+    this._configUnsub = this._cfg.subscribe(this._onConfigChange);
+    this._evaluateModelGate();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("aparte-message-start", this._onMessageStart);
+    window.removeEventListener("aparte-message-done", this._onMessageDone);
+    window.removeEventListener("aparte-message-error", this._onMessageDone);
+    window.removeEventListener("aparte-message-aborted", this._onMessageDone);
+    this._configUnsub?.();
+    this._configUnsub = null;
+    this._listeners.clear();
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "disabled") {
+      this._emit("disabled-change", { disabled: value !== null });
+    }
+  }
+  // ── Public API ─────────────────────────────────────────────────────────
+  get value() {
+    return this._value;
+  }
+  get streaming() {
+    return this._streaming;
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * When false, Shift+Enter submits and a bare Enter inserts a newline —
+   * the inverse of the default. Driven by the `submit-on-enter` attribute.
+   */
+  get submitOnEnter() {
+    return this.getAttribute("submit-on-enter") !== "false";
+  }
+  get attachments() {
+    return this._attachments;
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? "";
+  }
+  get targetId() {
+    return this.getAttribute("target");
+  }
+  /**
+   * Snapshot of the composer's observable state. Pair with the
+   * `aparte-composer-change` DOM event to drive a custom send button or footer
+   * control that lives outside the composer package:
+   *
+   * @example
+   * // A custom send button. Keep it CLICKABLE while streaming — submit()
+   * // routes to cancel() when a response is in flight, so one button is
+   * // Send/Stop. Disabling it on `streaming` would make "stop" unreachable.
+   * composer.addEventListener('aparte-composer-change', (e) => {
+   *   const { streaming, disabled, value, attachments } = e.detail.state;
+   *   myButton.textContent = streaming ? 'Stop' : 'Send';
+   *   myButton.disabled = disabled || (!streaming && !value.trim() && attachments.length === 0);
+   * });
+   * myButton.addEventListener('click', () => composer.submit()); // send or stop
+   */
+  getState() {
+    return {
+      value: this._value,
+      streaming: this._streaming,
+      disabled: this.disabled,
+      attachments: [...this._attachments],
+      panelActive: this._panelActive,
+      submitEnabled: this._panelSubmitEnabled
+    };
+  }
+  setValue(value) {
+    this._value = value;
+    this._emit("value-change", { value });
+  }
+  addAttachments(files) {
+    this._attachments = [...this._attachments, ...Array.from(files)];
+    this._emit("attachments-change", { attachments: this._attachments });
+  }
+  removeAttachment(file) {
+    this._attachments = this._attachments.filter((f2) => f2 !== file);
+    this._emit("attachments-change", { attachments: this._attachments });
+  }
+  clearAttachments() {
+    this._attachments = [];
+    this._emit("attachments-change", { attachments: [] });
+  }
+  /** Inject a panel into the composer, hiding the text input. The send button calls onSubmit when clicked. */
+  showPanel(panel, options) {
+    this.hidePanel();
+    const inputEl = this.querySelector("aparte-composer-input");
+    if (inputEl) inputEl.style.display = "none";
+    panel.dataset["apartePanel"] = "true";
+    if (inputEl) {
+      inputEl.insertAdjacentElement("afterend", panel);
+    } else {
+      this.appendChild(panel);
+    }
+    this._panelActive = true;
+    this._panelSubmitEnabled = options?.submitEnabled ?? false;
+    this._panelOnSubmit = options?.onSubmit ?? null;
+    this._emit("panel-change", { active: true, submitEnabled: this._panelSubmitEnabled });
+  }
+  /** Remove the panel and restore the text input. */
+  hidePanel() {
+    const existing = this.querySelector("[data-aparte-panel]");
+    if (existing) existing.remove();
+    const inputEl = this.querySelector("aparte-composer-input");
+    if (inputEl) inputEl.style.display = "";
+    this._panelActive = false;
+    this._panelSubmitEnabled = false;
+    this._panelOnSubmit = null;
+    this._emit("panel-change", { active: false, submitEnabled: false });
+    this.focus();
+  }
+  /** Update the send button enabled state while a panel is active. */
+  setPanelSubmitEnabled(enabled) {
+    if (!this._panelActive) return;
+    this._panelSubmitEnabled = enabled;
+    this._emit("panel-change", { active: true, submitEnabled: enabled });
+  }
+  get panelActive() {
+    return this._panelActive;
+  }
+  /**
+   * Recompute the model gate from the resolved config. When
+   * `requireModelSelection` is on and no model is selected, block sending and
+   * reflect `data-model-gated` so the shipped CSS greys the composer. Re-runs on
+   * every config change (e.g. the model selector's auto-select firing).
+   */
+  _evaluateModelGate() {
+    const gated = this._cfg.getRequireModelSelection() && !this._cfg.hasSelectedModel();
+    if (gated === this._modelGated) return;
+    this._modelGated = gated;
+    this.toggleAttribute("data-model-gated", gated);
+  }
+  /** Submit the current value. Called by aparte-composer-send or programmatically. */
+  submit() {
+    if (this._panelActive) {
+      if (this._panelSubmitEnabled) this._panelOnSubmit?.();
+      return;
+    }
+    if (this._streaming) {
+      this.cancel();
+      return;
+    }
+    const value = this._value.trim();
+    if (!value && this._attachments.length === 0) return;
+    if (this.disabled) return;
+    if (this._modelGated) return;
+    this._emit("submit", { value, attachments: this._attachments });
+    const detail = {
+      content: value,
+      timestamp: Date.now(),
+      targetId: this.targetId ?? void 0,
+      files: this._attachments.length > 0 ? [...this._attachments] : void 0
+    };
+    this.dispatchEvent(new CustomEvent("aparte-send", {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+    this.setValue("");
+    this.clearAttachments();
+  }
+  /** Cancel the current streaming response. */
+  cancel() {
+    this._emit("cancel", {});
+    this.dispatchEvent(new CustomEvent("aparte-cancel", { bubbles: true, composed: true }));
+    const abortDetail = { targetId: this.targetId ?? void 0 };
+    window.dispatchEvent(new CustomEvent("aparte-abort", { bubbles: false, detail: abortDetail }));
+    window.dispatchEvent(new CustomEvent("aparte-message-aborted", { bubbles: false, detail: abortDetail }));
+  }
+  /**
+   * Reset the composer to its initial state.
+   * Clears value, attachments, and hides any active panel.
+   * Call this when switching conversations.
+   */
+  reset() {
+    this.setValue("");
+    this.clearAttachments();
+    if (this._panelActive) this.hidePanel();
+  }
+  /** Focus the input primitive inside this composer. */
+  focus() {
+    const input = this.querySelector("aparte-composer-input");
+    input?.focus();
+  }
+  // ── Internal pub/sub ────────────────────────────────────────────────────
+  _emit(event, payload) {
+    this._listeners.get(event)?.forEach((cb) => cb(payload));
+    if (AparteComposer._STATE_EVENTS.has(event)) {
+      this.dispatchEvent(new CustomEvent("aparte-composer-change", {
+        bubbles: true,
+        composed: true,
+        detail: { state: this.getState(), composer: this }
+      }));
+    }
+  }
+  _on(event, cb) {
+    if (!this._listeners.has(event)) this._listeners.set(event, /* @__PURE__ */ new Set());
+    this._listeners.get(event).add(cb);
+    return () => this._listeners.get(event)?.delete(cb);
+  }
+  // ── Window events ───────────────────────────────────────────────────────
+  /** A window lifecycle event is for THIS composer when neither side is scoped
+   *  (single-instance broadcast) or the target ids match (multi-chat page).
+   *  Without this filter, streaming in one chat flips every composer's state. */
+  _isForThisComposer(e2) {
+    const evtTargetId = e2.detail?.targetId;
+    return !evtTargetId || !this.targetId || evtTargetId === this.targetId;
+  }
+  _handleMessageStart(e2) {
+    if (!this._isForThisComposer(e2)) return;
+    this._streaming = true;
+    this._emit("streaming-change", { streaming: true });
+  }
+  _handleMessageDone(e2) {
+    if (!this._isForThisComposer(e2)) return;
+    this._streaming = false;
+    this._emit("streaming-change", { streaming: false });
+    if (this._panelActive) this.hidePanel();
+  }
+}
+if (!customElements.get("aparte-composer")) {
+  customElements.define("aparte-composer", AparteComposer);
+}
+class AparteComposerInput extends HTMLElement {
+  _editor = null;
+  _maxHeight = 200;
+  _minHeight = 44;
+  _unsubscribes = [];
+  // Bound handlers
+  _onInput = this._handleInput.bind(this);
+  _onKeydown = this._handleKeydown.bind(this);
+  _onFocus = this._handleFocus.bind(this);
+  _onBlur = this._handleBlur.bind(this);
+  _onPaste = this._handlePaste.bind(this);
+  static get observedAttributes() {
+    return ["placeholder", "max-height", "min-height", "disabled"];
+  }
+  connectedCallback() {
+    this._render();
+    this._connectToRoot();
+    this._scheduleInitialReflow();
+  }
+  disconnectedCallback() {
+    this._editor?.removeEventListener("input", this._onInput);
+    this._editor?.removeEventListener("keydown", this._onKeydown);
+    this._editor?.removeEventListener("focus", this._onFocus);
+    this._editor?.removeEventListener("blur", this._onBlur);
+    this._editor?.removeEventListener("paste", this._onPaste);
+    this._unsubscribes.forEach((fn) => fn());
+    this._unsubscribes = [];
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "placeholder") this._updatePlaceholder();
+    if (name === "max-height") this._maxHeight = parseInt(value || "200", 10);
+    if (name === "min-height") this._minHeight = parseInt(value || "44", 10);
+    if (name === "disabled") this._updateDisabled(value !== null);
+  }
+  // ── Public API ──────────────────────────────────────────────────────────
+  getValue() {
+    if (!this._editor) return "";
+    let out = "";
+    const walk = (node) => {
+      node.childNodes.forEach((child) => {
+        if (child.nodeType === Node.TEXT_NODE) out += child.textContent ?? "";
+        else if (child.nodeName === "BR") out += "\n";
+        else walk(child);
+      });
+    };
+    walk(this._editor);
+    return out.trim();
+  }
+  setValue(value) {
+    if (!this._editor) return;
+    this._editor.textContent = value;
+    this._updatePlaceholderVisibility();
+    this._adjustHeight();
+    this._getRoot()?.setValue(value);
+  }
+  clear() {
+    if (!this._editor) return;
+    this._editor.innerHTML = "";
+    this._updatePlaceholderVisibility();
+    this._adjustHeight();
+    this._getRoot()?.setValue("");
+  }
+  focus() {
+    this._editor?.focus();
+  }
+  blur() {
+    this._editor?.blur();
+  }
+  /** Focus the editor and place the caret at the very end of its content. */
+  focusEnd() {
+    if (!this._editor) return;
+    this._editor.focus();
+    const sel = this.ownerDocument?.getSelection();
+    if (!sel) return;
+    const range = this.ownerDocument.createRange();
+    range.selectNodeContents(this._editor);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+  // ── Private ─────────────────────────────────────────────────────────────
+  _getRoot() {
+    return this.closest("aparte-composer");
+  }
+  _getPlaceholder() {
+    return this.getAttribute("placeholder") || this._getRoot()?.placeholder || resolveConfig(this).t("inputPlaceholder") || "Type a message...";
+  }
+  _render() {
+    if (this.querySelector(".aparte-ci-editor")) return;
+    const disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
+    const placeholder = this._escapeAttr(this._getPlaceholder());
+    this.innerHTML = `<div
+            class="aparte-ci-editor"
+            contenteditable="${!disabled}"
+            role="textbox"
+            aria-multiline="true"
+            aria-label="${placeholder}"
+            tabindex="0"
+            aria-disabled="${disabled}"
+            data-placeholder="${placeholder}"
+        ></div>`;
+    this._editor = this.querySelector(".aparte-ci-editor");
+    this._editor?.addEventListener("input", this._onInput);
+    this._editor?.addEventListener("keydown", this._onKeydown);
+    this._editor?.addEventListener("focus", this._onFocus);
+    this._editor?.addEventListener("blur", this._onBlur);
+    this._editor?.addEventListener("paste", this._onPaste);
+    this._adjustHeight();
+  }
+  _connectToRoot() {
+    const root = this._getRoot();
+    if (!root) return;
+    this._unsubscribes.push(
+      root._on("disabled-change", ({ disabled }) => this._updateDisabled(disabled))
+    );
+    this._unsubscribes.push(
+      root._on("value-change", ({ value }) => {
+        if (value === "" && this.getValue() !== "") this.clear();
+      })
+    );
+    this._unsubscribes.push(
+      root._on("streaming-change", ({ streaming }) => {
+        this._updateDisabled(streaming || root.disabled);
+      })
+    );
+  }
+  _handleInput() {
+    this._adjustHeight();
+    if (this._editor && !this._editor.textContent?.trim() && this._editor.innerHTML !== "") {
+      this._editor.innerHTML = "";
+    }
+    this._updatePlaceholderVisibility();
+    const value = this.getValue();
+    this._getRoot()?.setValue(value);
+  }
+  _handleKeydown(e2) {
+    if (e2.isComposing || e2.keyCode === 229) return;
+    if (e2.key !== "Enter") return;
+    const submitOnEnter = this._getRoot()?.submitOnEnter ?? true;
+    const submits = submitOnEnter ? !e2.shiftKey : e2.shiftKey;
+    if (submits) {
+      e2.preventDefault();
+      const root = this._getRoot();
+      if (root) {
+        root.submit();
+      } else {
+        this.dispatchEvent(new CustomEvent("aparte-composer-submit", { bubbles: true }));
+      }
+    } else {
+      e2.preventDefault();
+      if (!this._editor?.textContent) return;
+      this.ownerDocument?.execCommand("insertLineBreak");
+    }
+  }
+  _handleFocus() {
+    this.classList.add("is-focused");
+  }
+  _handleBlur() {
+    this.classList.remove("is-focused");
+  }
+  _handlePaste(e2) {
+    e2.preventDefault();
+    const cd = e2.clipboardData;
+    if (!cd) return;
+    const imageFile = Array.from(cd.items).find((i2) => i2.type.startsWith("image/"))?.getAsFile();
+    if (imageFile) {
+      this._getRoot()?.addAttachments([imageFile]);
+      return;
+    }
+    const text = cd.getData("text/plain");
+    if (text) {
+      document.execCommand("insertText", false, text);
+    }
+  }
+  _adjustHeight() {
+    if (!this._editor) return;
+    this._editor.style.height = "0px";
+    const floor = this.hasAttribute("min-height") ? this._minHeight : 0;
+    const contentHeight = this._editor.scrollHeight;
+    const h2 = Math.min(Math.max(contentHeight, floor), this._maxHeight);
+    this._editor.style.height = `${h2}px`;
+    this._editor.style.overflowY = contentHeight > this._maxHeight ? "auto" : "hidden";
+  }
+  /**
+   * The first `_adjustHeight()` runs synchronously in `_render()` on connect —
+   * before the stylesheet, flex layout and web fonts have necessarily settled.
+   * On an unstabilized layout `scrollHeight` can read inflated, leaving the
+   * editor stuck tall (misaligned with the composer controls) until the first
+   * keystroke re-measures it. Re-measure once the layout is ready so it's
+   * correct from the first paint.
+   */
+  _scheduleInitialReflow() {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => this._adjustHeight());
+    }
+    const fonts = document.fonts;
+    fonts?.ready?.then(() => this._adjustHeight()).catch(() => {
+    });
+  }
+  _updatePlaceholder() {
+    if (this._editor) {
+      const p = this._getPlaceholder();
+      this._editor.setAttribute("data-placeholder", p);
+      this._editor.setAttribute("aria-label", p);
+    }
+  }
+  _updatePlaceholderVisibility() {
+  }
+  _updateDisabled(disabled) {
+    if (!this._editor) return;
+    this._editor.setAttribute("contenteditable", String(!disabled));
+    this._editor.setAttribute("aria-disabled", String(disabled));
+  }
+  /** Escape a value before it lands in a double-quoted HTML attribute. */
+  _escapeAttr(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+}
+if (!customElements.get("aparte-composer-input")) {
+  customElements.define("aparte-composer-input", AparteComposerInput);
+}
+class AparteComposerSend extends HTMLElement {
+  _button = null;
+  _unsubscribes = [];
+  // Bound handler
+  _onClick = this._handleClick.bind(this);
+  connectedCallback() {
+    this._render();
+    this._connectToRoot();
+  }
+  disconnectedCallback() {
+    this._button?.removeEventListener("click", this._onClick);
+    this._unsubscribes.forEach((fn) => fn());
+    this._unsubscribes = [];
+  }
+  // ── Private ─────────────────────────────────────────────────────────────
+  _getRoot() {
+    return this.closest("aparte-composer");
+  }
+  _render() {
+    if (this.querySelector(".aparte-cs-button")) return;
+    const label = resolveConfig(this).t("sendButton") || "Send";
+    const icon = this._getSendIcon();
+    const root = this._getRoot();
+    const disabled = !root || root.disabled || root.value.trim() === "";
+    this.innerHTML = `<button
+            class="aparte-cs-button aparte-send-button"
+            aria-label="${label}"
+            title="${label}"
+            ${disabled ? "disabled" : ""}
+        >${icon}</button>`;
+    this._button = this.querySelector(".aparte-cs-button");
+    this._button?.addEventListener("click", this._onClick);
+  }
+  _connectToRoot() {
+    const root = this._getRoot();
+    if (!root) return;
+    this._unsubscribes.push(
+      root._on("value-change", () => this._syncState())
+    );
+    this._unsubscribes.push(
+      root._on("disabled-change", () => this._syncState())
+    );
+    this._unsubscribes.push(
+      root._on("streaming-change", ({ streaming }) => {
+        if (this._getRoot()?.panelActive) return;
+        this._syncStreamingState(streaming);
+      })
+    );
+    this._unsubscribes.push(
+      root._on("attachments-change", () => this._syncState())
+    );
+    this._unsubscribes.push(
+      root._on("panel-change", ({ active, submitEnabled }) => {
+        if (!this._button) return;
+        if (active) {
+          this._button.disabled = !submitEnabled;
+          this._button.innerHTML = this._getSendIcon();
+          const label = resolveConfig(this).t("submitButton") || "Submit";
+          this._button.setAttribute("aria-label", label);
+          this._button.setAttribute("title", label);
+          this._button.classList.remove("is-streaming");
+        } else {
+          const root2 = this._getRoot();
+          if (root2?.streaming) {
+            this._syncStreamingState(true);
+          } else {
+            this._syncState();
+          }
+        }
+      })
+    );
+  }
+  _handleClick(e2) {
+    e2.preventDefault();
+    this._getRoot()?.submit();
+  }
+  _syncState() {
+    const root = this._getRoot();
+    if (!root || !this._button) return;
+    if (root.streaming) return;
+    const isEmpty = root.value.trim() === "" && root.attachments.length === 0;
+    this._button.disabled = root.disabled || isEmpty;
+    this._button.innerHTML = this._getSendIcon();
+    const label = resolveConfig(this).t("sendButton") || "Send";
+    this._button.setAttribute("aria-label", label);
+    this._button.setAttribute("title", label);
+    this._button.classList.remove("is-streaming");
+  }
+  _syncStreamingState(streaming) {
+    if (!this._button) return;
+    if (streaming) {
+      this._button.disabled = false;
+      this._button.innerHTML = this._getStopIcon();
+      this._button.setAttribute("aria-label", "Stop");
+      this._button.setAttribute("title", "Stop");
+      this._button.classList.add("is-streaming");
+    } else {
+      this._syncState();
+    }
+  }
+  _getSendIcon() {
+    return resolveConfig(this).getIcon("send") || "Send";
+  }
+  _getStopIcon() {
+    return resolveConfig(this).getIcon("stop");
+  }
+}
+if (!customElements.get("aparte-composer-send")) {
+  customElements.define("aparte-composer-send", AparteComposerSend);
+}
+class AparteComposerCancel extends HTMLElement {
+  _button = null;
+  _unsubscribes = [];
+  // Bound handler
+  _onClick = this._handleClick.bind(this);
+  connectedCallback() {
+    this._render();
+    this._connectToRoot();
+  }
+  disconnectedCallback() {
+    this._button?.removeEventListener("click", this._onClick);
+    this._unsubscribes.forEach((fn) => fn());
+    this._unsubscribes = [];
+  }
+  // ── Private ─────────────────────────────────────────────────────────────
+  _getRoot() {
+    return this.closest("aparte-composer");
+  }
+  _render() {
+    if (this.querySelector(".aparte-cc-button")) return;
+    const label = resolveConfig(this).t("stopButton") || "Stop";
+    const icon = this._getStopIcon();
+    this.innerHTML = `<button
+            class="aparte-cc-button"
+            aria-label="${label}"
+            title="${label}"
+            hidden
+        >${icon}</button>`;
+    this._button = this.querySelector(".aparte-cc-button");
+    this._button?.addEventListener("click", this._onClick);
+  }
+  _connectToRoot() {
+    const root = this._getRoot();
+    if (!root) return;
+    this._unsubscribes.push(
+      root._on("streaming-change", ({ streaming }) => {
+        if (this._button) this._button.hidden = !streaming;
+      })
+    );
+    if (root.streaming && this._button) this._button.hidden = false;
+  }
+  _handleClick(e2) {
+    e2.preventDefault();
+    this._getRoot()?.cancel();
+  }
+  _getStopIcon() {
+    return resolveConfig(this).getIcon("stop");
+  }
+}
+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. */
+  _objectUrls = [];
+  connectedCallback() {
+    this._render([]);
+    this._connectToRoot();
+  }
+  disconnectedCallback() {
+    this._unsubscribes.forEach((fn) => fn());
+    this._unsubscribes = [];
+    this._revokeUrls();
+  }
+  // ── Private ─────────────────────────────────────────────────────────────
+  _getRoot() {
+    return this.closest("aparte-composer");
+  }
+  _connectToRoot() {
+    const root = this._getRoot();
+    if (!root) return;
+    this._unsubscribes.push(
+      root._on("attachments-change", ({ attachments }) => this._render(attachments))
+    );
+    this._render(root.attachments);
+  }
+  /** Release the previous render's blob URLs so they don't leak. */
+  _revokeUrls() {
+    this._objectUrls.forEach((url) => URL.revokeObjectURL(url));
+    this._objectUrls = [];
+  }
+  _render(files) {
+    this.hidden = files.length === 0;
+    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>`;
+      if (file.type.startsWith("image/")) {
+        const url = URL.createObjectURL(file);
+        this._objectUrls.push(url);
+        return `<div class="aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${url}" alt="${name}" /><span class="aparte-thumb__name">${name}</span>${remove}</div>`;
+      }
+      return `<div class="aparte-thumb aparte-thumb--file" title="${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) => {
+        e2.stopPropagation();
+        const root = this._getRoot();
+        if (root) root.removeAttachment(root.attachments[i2]);
+      });
+    });
+    this.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
+      tile.addEventListener("click", () => {
+        const img = tile.querySelector(".aparte-thumb__img");
+        if (!img) return;
+        this.dispatchEvent(new CustomEvent("aparte-attachment-preview", {
+          bubbles: true,
+          composed: true,
+          detail: { url: img.src, name: tile.getAttribute("title") ?? "" }
+        }));
+      });
+    });
+  }
+  /** Uppercased file extension (≤4 chars), or 'FILE' when there is none. */
+  _ext(filename) {
+    const dot = filename.lastIndexOf(".");
+    return dot > 0 ? filename.slice(dot + 1).toUpperCase().slice(0, 4) : "FILE";
+  }
+  _escape(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+}
+if (!customElements.get("aparte-composer-attachments")) {
+  customElements.define("aparte-composer-attachments", AparteComposerAttachments);
+}
+class AparteComposerAddAttachment extends HTMLElement {
+  _button = null;
+  _dragCleanup = null;
+  _unsubscribes = [];
+  // Bound handler
+  _onClick = this._handleClick.bind(this);
+  static get observedAttributes() {
+    return ["accept", "multiple", "disabled"];
+  }
+  connectedCallback() {
+    this._render();
+    this._connectToRoot();
+    this._setupDragDrop();
+  }
+  disconnectedCallback() {
+    this._button?.removeEventListener("click", this._onClick);
+    this._dragCleanup?.();
+    this._unsubscribes.forEach((fn) => fn());
+    this._unsubscribes = [];
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "disabled" && this._button) {
+      this._button.disabled = value !== null;
+    }
+  }
+  // ── Private ─────────────────────────────────────────────────────────────
+  _getRoot() {
+    return this.closest("aparte-composer");
+  }
+  _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 disabled = this.hasAttribute("disabled") || this._getRoot()?.disabled || false;
+    this.innerHTML = `<button
+            class="aparte-caa-button aparte-action-button"
+            aria-label="${label}"
+            title="${label}"
+            type="button"
+            ${disabled ? "disabled" : ""}
+        >${icon}</button>`;
+    this._button = this.querySelector(".aparte-caa-button");
+    this._button?.addEventListener("click", this._onClick);
+  }
+  _connectToRoot() {
+    const root = this._getRoot();
+    if (!root) return;
+    this._unsubscribes.push(
+      root._on("disabled-change", ({ disabled }) => {
+        if (this._button) this._button.disabled = disabled;
+      })
+    );
+    this._unsubscribes.push(
+      root._on("streaming-change", ({ streaming }) => {
+        if (this._button) this._button.disabled = streaming || root.disabled;
+      })
+    );
+  }
+  _handleClick() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = !this.hasAttribute("multiple") || this.getAttribute("multiple") !== "false";
+    const accept = this.getAttribute("accept");
+    if (accept) input.accept = accept;
+    input.style.display = "none";
+    document.body.appendChild(input);
+    input.addEventListener("change", () => {
+      if (input.files?.length) this._getRoot()?.addAttachments(input.files);
+      document.body.removeChild(input);
+    }, { once: true });
+    input.click();
+  }
+  _setupDragDrop() {
+    const root = this._getRoot();
+    if (!root) return;
+    const prevent = (e2) => {
+      e2.preventDefault();
+      e2.stopPropagation();
+    };
+    const onDragOver = (e2) => {
+      if (root.disabled) return;
+      prevent(e2);
+      root.classList.add("is-dragover");
+    };
+    const onDragLeave = (e2) => {
+      prevent(e2);
+      root.classList.remove("is-dragover");
+    };
+    const onDrop = (e2) => {
+      prevent(e2);
+      root.classList.remove("is-dragover");
+      if (root.disabled) return;
+      const files = e2.dataTransfer?.files;
+      if (files?.length) this._getRoot()?.addAttachments(files);
+    };
+    root.addEventListener("dragover", onDragOver);
+    root.addEventListener("dragleave", onDragLeave);
+    root.addEventListener("drop", onDrop);
+    this._dragCleanup = () => {
+      root.removeEventListener("dragover", onDragOver);
+      root.removeEventListener("dragleave", onDragLeave);
+      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);
+}
+class AparteComposerAction extends HTMLElement {
+  _button = null;
+  _unsubscribes = [];
+  // Bound handler
+  _onClick = this._handleClick.bind(this);
+  static get observedAttributes() {
+    return ["icon", "label", "disabled"];
+  }
+  connectedCallback() {
+    this._render();
+    this._connectToRoot();
+  }
+  disconnectedCallback() {
+    this._button?.removeEventListener("click", this._onClick);
+    this._unsubscribes.forEach((fn) => fn());
+    this._unsubscribes = [];
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (!this._button) return;
+    if (name === "disabled") {
+      this._button.disabled = value !== null;
+    }
+    if (name === "label") {
+      this._button.setAttribute("aria-label", value ?? "");
+      this._button.setAttribute("title", value ?? "");
+    }
+    if (name === "icon") {
+      this._button.innerHTML = this._resolveIcon(value ?? "");
+    }
+  }
+  // ── Private ─────────────────────────────────────────────────────────────
+  _getRoot() {
+    return this.closest("aparte-composer");
+  }
+  _render() {
+    if (this.querySelector(".aparte-cact-button")) return;
+    const label = this._escapeAttr(this.getAttribute("label") ?? "");
+    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"
+            aria-label="${label}"
+            title="${label}"
+            type="button"
+            ${disabled ? "disabled" : ""}
+        >${icon}</button>`;
+    this._button = this.querySelector(".aparte-cact-button");
+    this._button?.addEventListener("click", this._onClick);
+  }
+  _connectToRoot() {
+    const root = this._getRoot();
+    if (!root) return;
+    this._unsubscribes.push(
+      root._on("disabled-change", ({ disabled }) => {
+        if (this._button) this._button.disabled = disabled || this.hasAttribute("disabled");
+      })
+    );
+    this._unsubscribes.push(
+      root._on("streaming-change", ({ streaming }) => {
+        if (this._button) this._button.disabled = streaming || root.disabled || this.hasAttribute("disabled");
+      })
+    );
+  }
+  _handleClick(_e) {
+    this.dispatchEvent(new CustomEvent("aparte-action-click", {
+      bubbles: true,
+      composed: true,
+      detail: { actionId: this.getAttribute("action-id") ?? "", composer: this._getRoot() }
+    }));
+  }
+  _resolveIcon(icon) {
+    if (!icon) return "";
+    if (icon.trimStart().startsWith("<")) return icon;
+    return resolveConfig(this).getIcon(icon) ?? icon;
+  }
+  /** Escape a value before it lands in a double-quoted HTML attribute. */
+  _escapeAttr(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+}
+if (!customElements.get("aparte-composer-action")) {
+  customElements.define("aparte-composer-action", AparteComposerAction);
+}
+class AparteConversationList extends HTMLElement {
+  _conversations = [];
+  _activeId = null;
+  static get observedAttributes() {
+    return ["active-id"];
+  }
+  // ─── Lifecycle ────────────────────────────────────────────────────────
+  connectedCallback() {
+    if (!this.classList.contains("aparte-conv-list")) {
+      this.classList.add("aparte-conv-list");
+    }
+    if (!this.getAttribute("role")) {
+      this.setAttribute("role", "navigation");
+    }
+    this._render();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "active-id") {
+      this._activeId = newValue;
+      this._updateActiveState();
+    }
+  }
+  // ─── Public API ───────────────────────────────────────────────────────
+  /** Set the list of conversations to display. Triggers a re-render. */
+  set conversations(items) {
+    this._conversations = Array.isArray(items) ? items : [];
+    this._render();
+  }
+  get conversations() {
+    return this._conversations;
+  }
+  // ─── Rendering ────────────────────────────────────────────────────────
+  _render() {
+    this.innerHTML = this._conversations.map((conv) => this._renderItem(conv)).join("");
+    this._bindEvents();
+  }
+  _renderItem(conv) {
+    const locale = resolveConfig(this).getLocale();
+    const isActive = conv.id === this._activeId;
+    const isArchived = !!conv.archivedAt;
+    const activeClass = isActive ? " aparte-conv-item--active" : "";
+    const archivedClass = isArchived ? " aparte-conv-item--archived" : "";
+    const escapedId = this._esc(conv.id);
+    const escapedTitle = this._esc(conv.title || locale.newChat);
+    const deleteLabel = this._esc(locale.deleteConversation);
+    const archiveLabel = this._esc(locale["archiveConversation"] ?? "Archive conversation");
+    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>`;
+    return `
+<div
+  class="aparte-conv-item${activeClass}${archivedClass}"
+  role="button"
+  tabindex="0"
+  data-conv-id="${escapedId}"
+  aria-current="${isActive ? "page" : "false"}"
+>
+  <span class="aparte-conv-item__title">${escapedTitle}</span>
+  <button
+    class="aparte-conv-item__archive"
+    type="button"
+    data-archive-id="${escapedId}"
+    data-archive-action="${archiveAction}"
+    aria-label="${archiveAriaLabel}"
+    tabindex="0"
+  >${archiveIcon}</button>
+  <button
+    class="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>
+  </button>
+</div>`;
+  }
+  _bindEvents() {
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("keydown", this._onKeydown);
+  }
+  _onClick = (e2) => {
+    const target = e2.target;
+    const archiveBtn = target.closest("[data-archive-id]");
+    if (archiveBtn) {
+      e2.stopPropagation();
+      const id = archiveBtn.dataset["archiveId"];
+      const action = archiveBtn.dataset["archiveAction"];
+      const eventName = action === "unarchive" ? "aparte-unarchive-conversation" : "aparte-archive-conversation";
+      this.dispatchEvent(new CustomEvent(
+        eventName,
+        { detail: { id }, bubbles: true, composed: true }
+      ));
+      return;
+    }
+    const deleteBtn = target.closest("[data-delete-id]");
+    if (deleteBtn) {
+      e2.stopPropagation();
+      const id = deleteBtn.dataset["deleteId"];
+      this.dispatchEvent(new CustomEvent(
+        "aparte-delete-conversation",
+        { detail: { id }, bubbles: true, composed: true }
+      ));
+      return;
+    }
+    const item = target.closest("[data-conv-id]");
+    if (item) {
+      const id = item.dataset["convId"];
+      this.dispatchEvent(new CustomEvent(
+        "aparte-select-conversation",
+        { detail: { id }, bubbles: true, composed: true }
+      ));
+    }
+  };
+  _onKeydown = (e2) => {
+    if (e2.key !== "Enter" && e2.key !== " ") return;
+    const item = e2.target.closest("[data-conv-id]");
+    if (item) {
+      e2.preventDefault();
+      item.click();
+    }
+  };
+  /** Update active class without full re-render (perf optimisation). */
+  _updateActiveState() {
+    const items = this.querySelectorAll("[data-conv-id]");
+    items.forEach((el) => {
+      const isActive = el.dataset["convId"] === this._activeId;
+      el.classList.toggle("aparte-conv-item--active", isActive);
+      el.setAttribute("aria-current", isActive ? "page" : "false");
+    });
+  }
+  // ─── Helpers ──────────────────────────────────────────────────────────
+  _esc(str) {
+    return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#039;");
+  }
+}
+if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
+class AparteElicitation extends HTMLElement {
+  _pending = null;
+  _onTurnEnd = () => this._cancelPending();
+  connectedCallback() {
+    this.style.display = "none";
+    this._injectStyles();
+    resolveConfig(this).setElicitationPresenter(this._present);
+    window.addEventListener("aparte-message-aborted", this._onTurnEnd);
+    window.addEventListener("aparte-message-error", this._onTurnEnd);
+  }
+  disconnectedCallback() {
+    const cfg = resolveConfig(this);
+    if (cfg.getElicitationPresenter() === this._present) cfg.setElicitationPresenter(null);
+    window.removeEventListener("aparte-message-aborted", this._onTurnEnd);
+    window.removeEventListener("aparte-message-error", this._onTurnEnd);
+    this._cancelPending();
+  }
+  _present = (request) => {
+    if (this._pending) return Promise.resolve({ action: "cancel" });
+    const composer = this._getComposer();
+    if (!composer) return Promise.resolve({ action: "cancel" });
+    return new Promise((resolve) => {
+      let done = false;
+      const settle = (result) => {
+        if (done) return;
+        done = true;
+        this._pending = null;
+        composer.hidePanel();
+        resolve(result);
+      };
+      if (request.signal) {
+        if (request.signal.aborted) {
+          settle({ action: "cancel" });
+          return;
+        }
+        request.signal.addEventListener("abort", () => settle({ action: "cancel" }), { once: true });
+      }
+      const panel = buildElicitationPanel(request.message, request.schema, () => {
+        composer.setPanelSubmitEnabled(panel.isComplete());
+      });
+      const footer = document.createElement("div");
+      footer.className = "aparte-elic-footer";
+      const skip = document.createElement("button");
+      skip.type = "button";
+      skip.className = "aparte-elic-skip";
+      skip.textContent = "Skip";
+      skip.addEventListener("click", () => settle({ action: "decline" }));
+      footer.appendChild(skip);
+      panel.el.appendChild(footer);
+      this._pending = { settle, composer };
+      composer.showPanel(panel.el, {
+        submitEnabled: panel.isComplete(),
+        onSubmit: () => {
+          if (panel.isComplete()) settle({ action: "accept", content: panel.getContent() });
+        }
+      });
+      panel.focus();
+    });
+  };
+  _cancelPending() {
+    this._pending?.settle({ action: "cancel" });
+  }
+  _getComposer() {
+    let node = this.parentElement;
+    while (node) {
+      const composer = node.querySelector("aparte-composer");
+      if (composer && typeof composer.showPanel === "function") return composer;
+      node = node.parentElement;
+    }
+    const doc = document.querySelector("aparte-composer");
+    return doc && typeof doc.showPanel === "function" ? doc : null;
+  }
+  _injectStyles() {
+    const id = "aparte-elicitation-styles";
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = `
+.aparte-elic-panel { display:flex; flex-direction:column; gap:6px; padding:6px 4px; width:100%; box-sizing:border-box; max-height:50vh; overflow-y:auto; }
+.aparte-elic-message { margin:0 6px 6px; font-size:.82rem; font-weight:600; color:var(--aparte-text); line-height:1.4; }
+.aparte-elic-field + .aparte-elic-field { margin-top:8px; padding-top:8px; border-top:1px solid var(--aparte-border, rgba(128,128,128,0.12)); }
+.aparte-elic-title { margin:0 6px 4px; font-size:.8rem; font-weight:600; color:var(--aparte-text); }
+.aparte-elic-desc { margin:0 6px 6px; font-size:.76rem; color:var(--aparte-text-muted, rgba(128,128,128,0.75)); }
+.aparte-elic-options { display:flex; flex-direction:column; gap:1px; }
+.aparte-elic-option { display:flex; align-items:flex-start; gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; border:1px solid transparent; transition:background .12s,border-color .12s; }
+.aparte-elic-option:hover { background:var(--aparte-surface-2, rgba(128,128,128,0.08)); border-color:var(--aparte-border, rgba(128,128,128,0.15)); }
+.aparte-elic-control { margin-top:3px; flex-shrink:0; accent-color:var(--aparte-primary, #6366f1); width:15px; height:15px; cursor:pointer; }
+.aparte-elic-option-body { display:flex; flex-direction:column; gap:2px; flex:1; }
+.aparte-elic-option-title { font-size:.875rem; font-weight:500; color:var(--aparte-text, inherit); line-height:1.4; }
+.aparte-elic-option-desc { font-size:.78rem; color:var(--aparte-text-muted, rgba(128,128,128,0.75)); line-height:1.4; }
+.aparte-elic-other-input, .aparte-elic-text { margin-top:4px; width:100%; padding:6px 8px; border:1px solid var(--aparte-border, rgba(128,128,128,0.2)); border-radius:6px; font-size:.875rem; background:var(--aparte-surface-2, rgba(128,128,128,0.06)); color:var(--aparte-text, inherit); outline:none; box-sizing:border-box; font-family:inherit; }
+textarea.aparte-elic-text { min-height:64px; resize:vertical; }
+.aparte-elic-other-input:focus, .aparte-elic-text:focus { border-color:var(--aparte-primary, #6366f1); }
+.aparte-elic-option--recommended { border-color:var(--aparte-primary, #6366f1) !important; background:color-mix(in srgb, var(--aparte-primary, #6366f1) 6%, transparent); }
+.aparte-elic-footer { display:flex; justify-content:flex-end; margin-top:6px; }
+.aparte-elic-skip { border:none; background:transparent; color:var(--aparte-text-muted, rgba(128,128,128,0.75)); font-size:.8rem; cursor:pointer; padding:4px 8px; border-radius:6px; font-family:inherit; }
+.aparte-elic-skip:hover { background:var(--aparte-surface-2, rgba(128,128,128,0.08)); color:var(--aparte-text); }
+`;
+    document.head.appendChild(style);
+  }
+}
+if (typeof customElements !== "undefined" && !customElements.get("aparte-elicitation")) {
+  customElements.define("aparte-elicitation", AparteElicitation);
+}
+function registerAllComponents() {
+  const _chat = customElements.get("aparte-chat");
+  const _viewport = customElements.get("aparte-chat-viewport");
+  const _bubble = customElements.get("aparte-chat-bubble");
+  const _status = customElements.get("aparte-chat-status");
+  if (!_chat || !_viewport || !_bubble || !_status) {
+    console.warn("[Aparte] Some components may not be registered. Ensure all component files are imported.");
+  }
+}
+export {
+  A as APARTE_CONVERSATION_SCHEMA_VERSION,
+  a as APARTE_HOST_ATTR,
+  AparteChat,
+  AparteChatBubble,
+  b as AparteChatHost,
+  AparteChatStatus,
+  AparteChatViewport,
+  c as AparteClient,
+  AparteComposer,
+  AparteComposerAction,
+  AparteComposerAddAttachment,
+  AparteComposerAttachments,
+  AparteComposerCancel,
+  AparteComposerInput,
+  AparteComposerSend,
+  AparteConfig,
+  e as AparteConfigClass,
+  f as AparteConversationController,
+  AparteConversationList,
+  AparteElicitation,
+  g as AparteError,
+  h as AparteErrorCode,
+  AparteOptgroup,
+  AparteOption,
+  AparteProgressSpinner,
+  AparteSelect,
+  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,
+  MessageRepository,
+  n as applyElementProps,
+  o 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,
+  getSegmentRenderer,
+  z as isFormatAdapter,
+  E as isSafeUrl,
+  F as parseAparteEventStream,
+  G as parseMarkdownToSegments,
+  populateBubbleFromMessage,
+  I as readableToAsyncIterable,
+  registerAllComponents,
+  J as registerDefaultRenderers,
+  K as registerSegmentRenderer,
+  L as requestUserInput,
+  resolveConfig,
+  runWithConfig,
+  P as unregisterSegmentRenderer
+};
+//# sourceMappingURL=index.js.map