@aparte/angular 0.16.10 → 0.17.0

package/dist/fesm2022/aparte-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideAppInitializer, DestroyRef, effect, ElementRef, signal, output, computed, numberAttribute, booleanAttribute, ViewChildren, ViewChild, Input, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, Renderer2, Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideAppInitializer, DestroyRef, effect, ElementRef, signal, computed, output, numberAttribute, booleanAttribute, ViewChildren, ViewChild, Input, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, Renderer2, Directive, EventEmitter, HostListener, Output } from '@angular/core';
 import { AparteClient, aparteGlobalConfig, isAwaitingReply, uuid, AparteChatHost, APARTE_DEFAULT_UI_EVENTS, applyElementProps, AparteConversationManager } from '@aparte/core';
 export { aparteGlobalConfig } from '@aparte/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
@@ -18,6 +18,15 @@ const APARTE_CLIENT_OPTIONS = new InjectionToken('APARTE_CLIENT_OPTIONS');
 class AparteAiService {
     _clientOptions = inject(APARTE_CLIENT_OPTIONS, { optional: true });
     _client = new AparteClient(this._clientOptions ?? {});
+    /**
+     * The `AparteClient` this service drives — the same object React's
+     * `useAparteClient`, Vue's and Svelte's `createAparteClient` return as
+     * `{ client, abort }`. Angular alone kept it private, so the instance was
+     * unreachable while each service's docblock called itself the others' equivalent.
+     */
+    get client() {
+        return this._client;
+    }
     /**
      * Start listening to `aparte-send` events globally.
      * This connects the <aparte-chat> components to the AI Providers.
@@ -30,7 +39,9 @@ class AparteAiService {
         this._client.start();
     }
     /**
-     * Stop listening.
+     * Stop listening. The client also takes its `keyResolver` back off the config,
+     * so a paused bridge no longer answers for keys — a model list refreshed while
+     * disconnected sees the config's other key sources only.
      */
     disconnect() {
         this._client.stop();
@@ -139,8 +150,22 @@ function applyThemeMode(mode, doc, destroyRef) {
  * `AparteAiService.connect()` needed.
  *
  * The components (`AparteChatComponent`, `AparteUiComponent`) are standalone and
- * work WITHOUT this — it is config sugar. You can equally call `aparteGlobalConfig.*`
- * yourself, exactly like the React/Vue/Svelte wrappers do.
+ * work WITHOUT this — it is config sugar. Angular is the only wrapper that has it,
+ * and the other three lose nothing: what this provider exists for is an initializer
+ * that runs before the first component and a `DestroyRef` to release the theme
+ * listener. Everything it configures is a plain call — bar `theme: 'auto'`, which is a
+ * `matchMedia` listener you own — so React, Vue and Svelte make the same ones at module
+ * scope, before the app mounts:
+ *
+ * ```ts
+ * aparteGlobalConfig.registerAIProvider(createOpenAICompatProvider(presets.OPENROUTER));
+ * aparteGlobalConfig.setModelConfig({ defaultModel: 'openai/gpt-4o-mini' });
+ * aparteGlobalConfig.setLocale(fr);
+ * document.documentElement.setAttribute('data-aparte-theme', 'dark');
+ * // 'auto' is the one option with no one-liner: match prefers-color-scheme, rewrite the
+ * // attribute on change, and drop the listener when your app tears down.
+ * // The client stays the wrapper's own: useAparteClient(), createAparteClient().
+ * ```
  *
  * @example
  * bootstrapApplication(App, {
@@ -200,15 +225,19 @@ class AparteChatComponent {
         // Debounced with requestAnimationFrame so rapid token bursts only trigger
         // one sync per paint frame instead of N syncs for N tokens.
         effect(() => {
-            const msgs = this.messages();
-            if (msgs.length > 0) {
-                if (this._syncRafId !== null)
-                    return;
-                this._syncRafId = requestAnimationFrame(() => {
-                    this._syncRafId = null;
-                    this._host?.syncBubbles();
-                });
-            }
+            // Read the signal so the effect tracks it — and react to EVERY value,
+            // the empty list included. React, Vue and Svelte all re-sync
+            // unconditionally, and emptying the transcript is exactly when the host
+            // has to let go of the bubbles that just went away. With the default
+            // bubbles `bubbleRefs.changes` hid the divergence; under a custom
+            // `[bubbleTemplate]` that query never fires and this was the only path.
+            this.messages();
+            if (this._syncRafId !== null)
+                return;
+            this._syncRafId = requestAnimationFrame(() => {
+                this._syncRafId = null;
+                this._host?.syncBubbles();
+            });
         });
     }
     elementRef = inject(ElementRef);
@@ -248,6 +277,35 @@ class AparteChatComponent {
      */
     set centerWhenEmptyInput(val) { this.centerWhenEmpty.set(val); }
     centerWhenEmpty = signal(false);
+    /**
+     * The conversation is on its way: the viewport draws two skeleton turns, the empty
+     * state stays off and the composer is disabled until it lands. The conversation
+     * controller sets this itself while it fetches through your adapter's `loadFull()`;
+     * the input is for a wait of your own. Off by default.
+     */
+    set loadingInput(val) { this.loading.set(val); }
+    loading = signal(false);
+    /** The controller's wait (a conversation fetched through the adapter). */
+    hostLoading = signal(false);
+    waiting = computed(() => this.loading() || this.hostLoading());
+    get loadingText() { return (this.config ?? aparteGlobalConfig).t('loadingConversation'); }
+    /**
+     * Class(es) merged onto the INNER `.aparte-chat-container`, not onto this
+     * component's own `<aparte-chat>` host.
+     *
+     * The other three wrappers have no such host: their root IS the container, so a
+     * consumer's `className` / `class` lands on the div that carries
+     * `.aparte-chat-container`, `[overlay-composer]` and `[data-aparte-empty]` — the
+     * three selectors core's shell recipe keys on. Here a class written on the tag
+     * lands one level above them, so overriding the shell needed a descendant
+     * selector on Angular alone. This input is that parity. Additive: the recipe's
+     * own classes stay.
+     */
+    set containerClassInput(val) { this.containerClass.set(val ?? ''); }
+    containerClass = signal('');
+    /** Inline style for the same div — a string or a `{ prop: value }` map. */
+    set containerStyleInput(val) { this.containerStyle.set(val ?? null); }
+    containerStyle = signal(null);
     /**
      * Overlay the composer on the transcript (the ChatGPT anatomy): the scroll
      * surface spans the whole column, the scrollbar runs edge to edge, and the
@@ -377,6 +435,7 @@ class AparteChatComponent {
             onMessageAppended: (msg) => this.messageAppended.emit(msg),
             onTypingChange: (typing) => { this.isTyping.set(typing); this.typingChange.emit(typing); },
             onStreamingChange: (id) => this._streamingId.set(id),
+            onLoadingChange: (on) => this.hostLoading.set(on),
             // Sibling-info / deferred work runs after Angular has re-rendered.
             afterRender: (cb) => { setTimeout(cb, 0); },
             resetComposer: () => {
@@ -443,8 +502,11 @@ class AparteChatComponent {
     }
     /** Read the current message list. */
     getMessages() { return this._host?.getMessages() ?? this.messages(); }
-    /** Clear all messages + reset state. */
-    clearMessages() { this._host?.clearMessages(); }
+    /**
+     * Clear all messages + reset state. `{ revokeAttachments: false }` keeps the
+     * attachments' object URLs alive — pass it when the same messages are going back.
+     */
+    clearMessages(options) { this._host?.clearMessages(options); }
     /** Scroll the viewport to the latest message. */
     scrollToBottom() {
         this.viewportRef?.nativeElement?.scrollToBottom?.();
@@ -571,15 +633,29 @@ class AparteChatComponent {
         this.messageSent.emit(detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AparteChatComponent, isStandalone: true, selector: "aparte-chat", inputs: { messagesInput: ["messages", "messagesInput"], placeholderInput: ["placeholder", "placeholderInput"], disabledInput: ["disabled", "disabledInput", booleanAttribute], submitOnEnterInput: ["submitOnEnter", "submitOnEnterInput", booleanAttribute], centerWhenEmptyInput: ["centerWhenEmpty", "centerWhenEmptyInput", booleanAttribute], overlayComposerInput: ["overlayComposer", "overlayComposerInput", booleanAttribute], attachmentsInput: ["attachments", "attachmentsInput", booleanAttribute], elicitationInput: ["elicitation", "elicitationInput", booleanAttribute], isTypingInput: ["isTyping", "isTypingInput", booleanAttribute], typingTextInput: ["typingText", "typingTextInput"], layoutTransitionMs: ["layoutTransitionMs", "layoutTransitionMs", numberAttribute], conversationIdInput: ["conversationId", "conversationIdInput"], config: "config", bubbleTemplate: "bubbleTemplate" }, outputs: { messageSent: "messageSent", action: "action", messagesChange: "messagesChange", messageAppended: "messageAppended", typingChange: "typingChange", conversationCreated: "conversationCreated" }, host: { attributes: { "framework-managed": "" } }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }, { propertyName: "bubbleRefs", predicate: ["bubble"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AparteChatComponent, isStandalone: true, selector: "aparte-chat", inputs: { messagesInput: ["messages", "messagesInput"], placeholderInput: ["placeholder", "placeholderInput"], disabledInput: ["disabled", "disabledInput", booleanAttribute], submitOnEnterInput: ["submitOnEnter", "submitOnEnterInput", booleanAttribute], centerWhenEmptyInput: ["centerWhenEmpty", "centerWhenEmptyInput", booleanAttribute], loadingInput: ["loading", "loadingInput", booleanAttribute], containerClassInput: ["containerClass", "containerClassInput"], containerStyleInput: ["containerStyle", "containerStyleInput"], overlayComposerInput: ["overlayComposer", "overlayComposerInput", booleanAttribute], attachmentsInput: ["attachments", "attachmentsInput", booleanAttribute], elicitationInput: ["elicitation", "elicitationInput", booleanAttribute], isTypingInput: ["isTyping", "isTypingInput", booleanAttribute], typingTextInput: ["typingText", "typingTextInput"], layoutTransitionMs: ["layoutTransitionMs", "layoutTransitionMs", numberAttribute], conversationIdInput: ["conversationId", "conversationIdInput"], config: "config", bubbleTemplate: "bubbleTemplate" }, outputs: { messageSent: "messageSent", action: "action", messagesChange: "messagesChange", messageAppended: "messageAppended", typingChange: "typingChange", conversationCreated: "conversationCreated" }, host: { attributes: { "framework-managed": "" } }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }, { propertyName: "bubbleRefs", predicate: ["bubble"], descendants: true }], ngImport: i0, template: `
     <div
       class="aparte-chat-container"
+      [class]="containerClass()"
+      [style]="containerStyle()"
       [class.aparte-chat-container--auto-center]="centerWhenEmpty()"
       [attr.overlay-composer]="overlayComposer() ? '' : null"
-      [attr.data-aparte-empty]="centerWhenEmpty() && messages().length === 0 ? '' : null"
+      [attr.data-aparte-empty]="centerWhenEmpty() && messages().length === 0 && !waiting() ? '' : null"
     >
-      <aparte-chat-viewport #viewport framework-managed="">
-        @if (messages().length === 0) {
+      <aparte-chat-viewport #viewport framework-managed="" [attr.loading]="waiting() ? '' : null">
+        @if (waiting()) {
+          <!-- The wait, drawn here because this DOM is Angular's: the kit's skeleton
+               recipe, and a line for a screen reader. -->
+          <div class="aparte-viewport-loading" aria-hidden="true">
+            <span class="aparte-skeleton aparte-skeleton--rect aparte-viewport-loading__user"></span>
+            <span class="aparte-skeleton aparte-skeleton--text"></span>
+            <span class="aparte-skeleton aparte-skeleton--text"></span>
+            <span class="aparte-skeleton aparte-skeleton--text"></span>
+            <span class="aparte-skeleton aparte-skeleton--text aparte-viewport-loading__last"></span>
+          </div>
+          <span class="aparte-viewport-loading-status aparte-sr-only" role="status">{{ loadingText }}</span>
+        }
+        @if (messages().length === 0 && !waiting()) {
           <!-- Welcome / placeholder shown inside the viewport while empty. -->
           <ng-content select="[slot='empty-state']"></ng-content>
         }
@@ -620,7 +696,7 @@ class AparteChatComponent {
       <aparte-composer
         #input
         [attr.placeholder]="placeholder()"
-        [attr.disabled]="disabled() ? '' : null"
+        [attr.disabled]="disabled() || waiting() ? '' : null"
         [attr.submit-on-enter]="submitOnEnter() ? null : 'false'"
         (aparte-send)="onAparteSend($event)"
       >
@@ -662,12 +738,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: 'aparte-chat', standalone: true, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, host: { 'framework-managed': '' }, template: `
     <div
       class="aparte-chat-container"
+      [class]="containerClass()"
+      [style]="containerStyle()"
       [class.aparte-chat-container--auto-center]="centerWhenEmpty()"
       [attr.overlay-composer]="overlayComposer() ? '' : null"
-      [attr.data-aparte-empty]="centerWhenEmpty() && messages().length === 0 ? '' : null"
+      [attr.data-aparte-empty]="centerWhenEmpty() && messages().length === 0 && !waiting() ? '' : null"
     >
-      <aparte-chat-viewport #viewport framework-managed="">
-        @if (messages().length === 0) {
+      <aparte-chat-viewport #viewport framework-managed="" [attr.loading]="waiting() ? '' : null">
+        @if (waiting()) {
+          <!-- The wait, drawn here because this DOM is Angular's: the kit's skeleton
+               recipe, and a line for a screen reader. -->
+          <div class="aparte-viewport-loading" aria-hidden="true">
+            <span class="aparte-skeleton aparte-skeleton--rect aparte-viewport-loading__user"></span>
+            <span class="aparte-skeleton aparte-skeleton--text"></span>
+            <span class="aparte-skeleton aparte-skeleton--text"></span>
+            <span class="aparte-skeleton aparte-skeleton--text"></span>
+            <span class="aparte-skeleton aparte-skeleton--text aparte-viewport-loading__last"></span>
+          </div>
+          <span class="aparte-viewport-loading-status aparte-sr-only" role="status">{{ loadingText }}</span>
+        }
+        @if (messages().length === 0 && !waiting()) {
           <!-- Welcome / placeholder shown inside the viewport while empty. -->
           <ng-content select="[slot='empty-state']"></ng-content>
         }
@@ -708,7 +798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       <aparte-composer
         #input
         [attr.placeholder]="placeholder()"
-        [attr.disabled]="disabled() ? '' : null"
+        [attr.disabled]="disabled() || waiting() ? '' : null"
         [attr.submit-on-enter]="submitOnEnter() ? null : 'false'"
         (aparte-send)="onAparteSend($event)"
       >
@@ -759,6 +849,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], centerWhenEmptyInput: [{
                 type: Input,
                 args: [{ alias: 'centerWhenEmpty', transform: booleanAttribute }]
+            }], loadingInput: [{
+                type: Input,
+                args: [{ alias: 'loading', transform: booleanAttribute }]
+            }], containerClassInput: [{
+                type: Input,
+                args: ['containerClass']
+            }], containerStyleInput: [{
+                type: Input,
+                args: ['containerStyle']
             }], overlayComposerInput: [{
                 type: Input,
                 args: [{ alias: 'overlayComposer', transform: booleanAttribute }]
@@ -1034,7 +1133,7 @@ class AparteChatBubbleDirective extends AparteElementBase {
     edit = new EventEmitter();
     /** The `‹1/2›` picker moved between sibling versions. */
     branchNavigate = new EventEmitter();
-    /** A link in the message body is about to be followed. Cancelable: `preventDefault()` keeps the browser from navigating, so a host can route the link itself. */
+    /** A link in the message body is about to be followed. Cancelable: `preventDefault()` keeps the browser from navigating, so a host can route the link itself. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-link-click)="$event.preventDefault()". */
     linkClick = new EventEmitter();
     onAttachmentPreview(e) { this.attachmentPreview.emit(e.detail); }
     onAction(e) { this.action.emit(e.detail); }
@@ -1128,6 +1227,8 @@ class AparteChatViewportDirective extends AparteElementBase {
     set scrollThreshold(v) { this.write('scroll-threshold', v); }
     /** Caps how many bubbles stay in the DOM; older ones are released. */
     set maxRenderedBubbles(v) { this.write('max-rendered-bubbles', v); }
+    /** The transcript is on its way: a conversation was chosen and its messages are being fetched. The element draws two skeleton turns, marks its scroll surface `aria-busy` and names the wait for a screen reader; `aparte-chat[center-empty]` does not count a loading viewport as empty. Set by `AparteConversationController` through its binding, or by hand from a loop of your own (`setLoading(true)`). */
+    set loading(v) { this.write('loading', v); }
     /** The wrapper's explicit hands-off signal: set it and this element builds no wrapper of its own and relocates none of the nodes the FRAMEWORK renders into it, because the framework owns them. Not "none of its children": core's own scroll-to-bottom button is re-appended whenever it stops being last, and that path runs in this mode only. All four wrappers set it. */
     set frameworkManaged(v) { this.write('framework-managed', v); }
     /** Reflected BY the element while a turn streams: the transcript is read-only meanwhile, and every bubble inside reads it (at connect, and when it changes). The vanilla path derives it from the repository; a framework host sets it through `setTranscriptBusy()`. Read-only from the outside. */
@@ -1142,7 +1243,7 @@ class AparteChatViewportDirective extends AparteElementBase {
     onResetDone() { this.resetDone.emit(); }
     onPathChanged(e) { this.pathChanged.emit(e.detail); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteChatViewportDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.25", type: AparteChatViewportDirective, isStandalone: true, selector: "aparte-chat-viewport", inputs: { scrollThreshold: ["scrollThreshold", "scrollThreshold", numberAttribute], maxRenderedBubbles: ["maxRenderedBubbles", "maxRenderedBubbles", numberAttribute], frameworkManaged: ["frameworkManaged", "frameworkManaged", booleanAttribute], dataBusy: ["dataBusy", "dataBusy", booleanAttribute] }, outputs: { segmentUpdate: "segmentUpdate", resetDone: "resetDone", pathChanged: "pathChanged" }, host: { listeners: { "aparte-segment-update": "onSegmentUpdate($event)", "aparte-reset-done": "onResetDone()", "aparte-path-changed": "onPathChanged($event)" } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.25", type: AparteChatViewportDirective, isStandalone: true, selector: "aparte-chat-viewport", inputs: { scrollThreshold: ["scrollThreshold", "scrollThreshold", numberAttribute], maxRenderedBubbles: ["maxRenderedBubbles", "maxRenderedBubbles", numberAttribute], loading: ["loading", "loading", booleanAttribute], frameworkManaged: ["frameworkManaged", "frameworkManaged", booleanAttribute], dataBusy: ["dataBusy", "dataBusy", booleanAttribute] }, outputs: { segmentUpdate: "segmentUpdate", resetDone: "resetDone", pathChanged: "pathChanged" }, host: { listeners: { "aparte-segment-update": "onSegmentUpdate($event)", "aparte-reset-done": "onResetDone()", "aparte-path-changed": "onPathChanged($event)" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteChatViewportDirective, decorators: [{
             type: Directive,
@@ -1153,6 +1254,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }], maxRenderedBubbles: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], frameworkManaged: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1242,7 +1346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             }] } });
 /** `<aparte-composer-action>` — Generic action button primitive for <aparte-composer>. */
 class AparteComposerActionDirective extends AparteElementBase {
-    /** Icon key for aparteGlobalConfig.getIcon(), or raw SVG/HTML starting with `<` */
+    /** Icon key for aparteGlobalConfig.getIcon(), or raw SVG/HTML starting with `<`. A key core's glyph set does not hold renders AS TEXT (`icon="star"` draws the word *star*), so bring your own set through `setIconProvider` or pass the SVG. */
     set icon(v) { this.write('icon', v); }
     /** Accessible label (also used as tooltip) */
     set label(v) { this.write('label', v); }
@@ -1457,79 +1561,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: HostListener,
                 args: ['aparte-compact', ['$event']]
             }] } });
-/** `<aparte-conversation-list>` — Conversation-history sidebar — a framework-agnostic web component. The host sets the `conversations` JS property and the `active-id` attribute; this renders the rows and fires the user's intent, never acting on it itself. */
+/** `<aparte-conversation-list>` — Conversation-history sidebar — a framework-agnostic web component. The host sets the `conversations` JS property and the `active-id` attribute; this renders the rows and fires the user's intent. Acting on it is the host's, unless `manage` hands the row menu's writes to the registered conversation manager. */
 class AparteConversationListDirective extends AparteElementBase {
     /** The id of the conversation to render as selected. */
     set activeId(v) { this.write('active-id', v); }
     /** Render the rows flat, in host order, with no date headings. */
-    set noGroups(v) { this.write('no-groups', v); }
-    /** The same item on a pinned row; same detail shape, opposite intent. */
-    unpinConversation = new EventEmitter();
-    /** The pin item was chosen on an unpinned row. */
-    pinConversation = new EventEmitter();
-    /** The same item on an already-archived one; same detail shape, opposite intent. */
-    unarchiveConversation = new EventEmitter();
-    /** The archive item was chosen on a live conversation. */
-    archiveConversation = new EventEmitter();
-    /** The delete was confirmed. Nothing is removed here. */
-    deleteConversation = new EventEmitter();
-    /** A rename was committed with a new, non-empty title. Nothing is renamed here. */
-    renameConversation = new EventEmitter();
+    set flat(v) { this.write('flat', v); }
+    /** The list is on its way: six skeleton rows stand where the rows will be, the element is `aria-busy` and a visually hidden line names the wait. A list that is not there yet is not an empty list. Set it while your store answers, clear it when you assign `conversations`. */
+    set loading(v) { this.write('loading', v); }
+    /** Let the list finish the gesture: rename, pin, unpin, archive, unarchive and delete are performed on the conversation manager registered with `setConversationManager()`, instead of leaving you six listeners to write. The event still fires first, and `preventDefault()` on it takes the gesture back. Off by default, and selecting stays yours either way. */
+    set manage(v) { this.write('manage', v); }
     /** A row's title was activated; the host loads that conversation. */
-    selectConversation = new EventEmitter();
-    onUnpinConversation(e) { this.unpinConversation.emit(e.detail); }
-    onPinConversation(e) { this.pinConversation.emit(e.detail); }
-    onUnarchiveConversation(e) { this.unarchiveConversation.emit(e.detail); }
-    onArchiveConversation(e) { this.archiveConversation.emit(e.detail); }
-    onDeleteConversation(e) { this.deleteConversation.emit(e.detail); }
-    onRenameConversation(e) { this.renameConversation.emit(e.detail); }
-    onSelectConversation(e) { this.selectConversation.emit(e.detail); }
+    conversationSelect = new EventEmitter();
+    /** A rename was committed with a new, non-empty title. Cancelable: `preventDefault()` takes the gesture back from `manage`. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-rename)="$event.preventDefault()". */
+    conversationRename = new EventEmitter();
+    /** The pin item was chosen on an unpinned row. Cancelable: `preventDefault()` takes the gesture back from `manage`. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-pin)="$event.preventDefault()". */
+    conversationPin = new EventEmitter();
+    /** The same item on a pinned row; same detail shape, opposite intent. Cancelable, like the rest. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-unpin)="$event.preventDefault()". */
+    conversationUnpin = new EventEmitter();
+    /** The archive item was chosen on a live conversation. Cancelable: `preventDefault()` takes the gesture back from `manage`. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-archive)="$event.preventDefault()". */
+    conversationArchive = new EventEmitter();
+    /** The same item on an already-archived one; same detail shape, opposite intent. Cancelable, like the rest. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-unarchive)="$event.preventDefault()". */
+    conversationUnarchive = new EventEmitter();
+    /** The delete was confirmed. Cancelable: `preventDefault()` takes the gesture back from `manage`. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-conversation-delete)="$event.preventDefault()". */
+    conversationDelete = new EventEmitter();
+    onConversationSelect(e) { this.conversationSelect.emit(e.detail); }
+    onConversationRename(e) { this.conversationRename.emit(e.detail); }
+    onConversationPin(e) { this.conversationPin.emit(e.detail); }
+    onConversationUnpin(e) { this.conversationUnpin.emit(e.detail); }
+    onConversationArchive(e) { this.conversationArchive.emit(e.detail); }
+    onConversationUnarchive(e) { this.conversationUnarchive.emit(e.detail); }
+    onConversationDelete(e) { this.conversationDelete.emit(e.detail); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteConversationListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.25", type: AparteConversationListDirective, isStandalone: true, selector: "aparte-conversation-list", inputs: { activeId: "activeId", noGroups: ["noGroups", "noGroups", booleanAttribute] }, outputs: { unpinConversation: "unpinConversation", pinConversation: "pinConversation", unarchiveConversation: "unarchiveConversation", archiveConversation: "archiveConversation", deleteConversation: "deleteConversation", renameConversation: "renameConversation", selectConversation: "selectConversation" }, host: { listeners: { "aparte-unpin-conversation": "onUnpinConversation($event)", "aparte-pin-conversation": "onPinConversation($event)", "aparte-unarchive-conversation": "onUnarchiveConversation($event)", "aparte-archive-conversation": "onArchiveConversation($event)", "aparte-delete-conversation": "onDeleteConversation($event)", "aparte-rename-conversation": "onRenameConversation($event)", "aparte-select-conversation": "onSelectConversation($event)" } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.25", type: AparteConversationListDirective, isStandalone: true, selector: "aparte-conversation-list", inputs: { activeId: "activeId", flat: ["flat", "flat", booleanAttribute], loading: ["loading", "loading", booleanAttribute], manage: ["manage", "manage", booleanAttribute] }, outputs: { conversationSelect: "conversationSelect", conversationRename: "conversationRename", conversationPin: "conversationPin", conversationUnpin: "conversationUnpin", conversationArchive: "conversationArchive", conversationUnarchive: "conversationUnarchive", conversationDelete: "conversationDelete" }, host: { listeners: { "aparte-conversation-select": "onConversationSelect($event)", "aparte-conversation-rename": "onConversationRename($event)", "aparte-conversation-pin": "onConversationPin($event)", "aparte-conversation-unpin": "onConversationUnpin($event)", "aparte-conversation-archive": "onConversationArchive($event)", "aparte-conversation-unarchive": "onConversationUnarchive($event)", "aparte-conversation-delete": "onConversationDelete($event)" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteConversationListDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'aparte-conversation-list', standalone: true }]
         }], propDecorators: { activeId: [{
                 type: Input
-            }], noGroups: [{
+            }], flat: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], manage: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], unpinConversation: [{
+            }], conversationSelect: [{
                 type: Output
-            }], pinConversation: [{
+            }], conversationRename: [{
                 type: Output
-            }], unarchiveConversation: [{
+            }], conversationPin: [{
                 type: Output
-            }], archiveConversation: [{
+            }], conversationUnpin: [{
                 type: Output
-            }], deleteConversation: [{
+            }], conversationArchive: [{
                 type: Output
-            }], renameConversation: [{
+            }], conversationUnarchive: [{
                 type: Output
-            }], selectConversation: [{
+            }], conversationDelete: [{
                 type: Output
-            }], onUnpinConversation: [{
+            }], onConversationSelect: [{
                 type: HostListener,
-                args: ['aparte-unpin-conversation', ['$event']]
-            }], onPinConversation: [{
+                args: ['aparte-conversation-select', ['$event']]
+            }], onConversationRename: [{
                 type: HostListener,
-                args: ['aparte-pin-conversation', ['$event']]
-            }], onUnarchiveConversation: [{
+                args: ['aparte-conversation-rename', ['$event']]
+            }], onConversationPin: [{
                 type: HostListener,
-                args: ['aparte-unarchive-conversation', ['$event']]
-            }], onArchiveConversation: [{
+                args: ['aparte-conversation-pin', ['$event']]
+            }], onConversationUnpin: [{
                 type: HostListener,
-                args: ['aparte-archive-conversation', ['$event']]
-            }], onDeleteConversation: [{
+                args: ['aparte-conversation-unpin', ['$event']]
+            }], onConversationArchive: [{
                 type: HostListener,
-                args: ['aparte-delete-conversation', ['$event']]
-            }], onRenameConversation: [{
+                args: ['aparte-conversation-archive', ['$event']]
+            }], onConversationUnarchive: [{
                 type: HostListener,
-                args: ['aparte-rename-conversation', ['$event']]
-            }], onSelectConversation: [{
+                args: ['aparte-conversation-unarchive', ['$event']]
+            }], onConversationDelete: [{
                 type: HostListener,
-                args: ['aparte-select-conversation', ['$event']]
+                args: ['aparte-conversation-delete', ['$event']]
             }] } });
 /** `<aparte-elicitation>` — The default presenter for a request to the human. It renders nothing itself: it registers as the presenter for the config governing its subtree, and mounts a panel inside the nearest `<aparte-composer>` when something asks — a tool handler calling `requestUserInput`, or core's own approval gate. */
 /**
@@ -1644,7 +1758,7 @@ class AparteScrollRailDirective extends AparteElementBase {
     set every(v) { this.write('every', v); }
     /** Reflected BY the element while it has fewer than two ticks. Read-only. */
     set dataEmpty(v) { this.write('data-empty', v); }
-    /** A tick was activated. Bubbles, cancelable: `preventDefault()` leaves the transcript where it is. */
+    /** A tick was activated. Bubbles, cancelable: `preventDefault()` leaves the transcript where it is. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-scroll-rail-jump)="$event.preventDefault()". */
     scrollRailJump = new EventEmitter();
     onScrollRailJump(e) { this.scrollRailJump.emit(e.detail); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteScrollRailDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -1827,7 +1941,7 @@ class AparteSuggestionsDirective extends AparteElementBase {
     set emptyOnly(v) { this.write('empty-only', v); }
     /** Reflected BY the element while it has no suggestion to show; the stylesheet hides it then. Read-only, do not set it yourself. */
     set dataEmpty(v) { this.write('data-empty', v); }
-    /** A starter was clicked. Bubbles, and is cancelable: `preventDefault()` stops the composer from being filled or submitted. */
+    /** A starter was clicked. Bubbles, and is cancelable: `preventDefault()` stops the composer from being filled or submitted. Angular: this Output emits the detail, so preventDefault() is not on it — bind the DOM event for that: (aparte-suggestion)="$event.preventDefault()". */
     suggestion = new EventEmitter();
     onSuggestion(e) { this.suggestion.emit(e.detail); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AparteSuggestionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -1965,7 +2079,7 @@ class ConversationManagerService {
     // The active conversation is owned exclusively by AparteConversationController
     // (inside <aparte-chat>). To switch conversations, either bind
     // `[conversationId]` on <aparte-chat> or dispatch a window event:
-    //   window.dispatchEvent(new CustomEvent('aparte-select-conversation', {
+    //   window.dispatchEvent(new CustomEvent('aparte-conversation-select', {
     //     detail: { id, targetId? },
     //   }));
     // The `activeId` signal here is read-only and stays in sync via subscribe().