@aparte/angular 0.24.0 → 0.26.0

package/dist/generated/element.directives.d.ts

@@ -11,7 +11,7 @@
  * a plain host listener when you need `stopPropagation`.
  */
 import { ElementRef, EventEmitter } from '@angular/core';
-import type { AparteActionClickEventDetail, AparteActionEventDetail, AparteAttachmentPreviewEventDetail, AparteBranchNavigateEventDetail, AparteCompactEventDetail, AparteComposerChangeEventDetail, AparteContextThresholdEventDetail, AparteConversationArchiveDetail, AparteConversationDeleteDetail, AparteConversationPinDetail, AparteConversationRenameDetail, AparteConversationSelectDetail, AparteEditEventDetail, AparteFeedbackEventDetail, AparteLinkClickEventDetail, AparteMessageInfoEventDetail, AparteOptgroupToggleEventDetail, ApartePathChangedEventDetail, AparteRetryEventDetail, AparteScrollRailJumpDetail, AparteSegmentUpdateEventDetail, AparteSelectChangeDetail, AparteSendEventDetail, AparteSidebarToggleDetail, AparteSplitResizeDetail, AparteSuggestionEventDetail } from '@aparte/core';
+import type { AparteActionClickEventDetail, AparteActionEventDetail, AparteAttachmentPreviewEventDetail, AparteBranchNavigateEventDetail, AparteCompactEventDetail, AparteComposerChangeEventDetail, AparteContextThresholdEventDetail, AparteConversationArchiveDetail, AparteConversationDeleteDetail, AparteConversationListItem, AparteConversationPinDetail, AparteConversationRenameDetail, AparteConversationSelectDetail, AparteEditEventDetail, AparteFeedbackEventDetail, AparteLinkClickEventDetail, AparteMessageInfoEventDetail, AparteOptgroupToggleEventDetail, ApartePathChangedEventDetail, AparteRetryEventDetail, AparteScrollRailJumpDetail, AparteSegmentUpdateEventDetail, AparteSelectChangeDetail, AparteSendEventDetail, AparteSidebarToggleDetail, AparteSplitResizeDetail, AparteSuggestionEventDetail } from '@aparte/core';
 import * as i0 from "@angular/core";
 /**
  * Writes one declared attribute onto the host element.
@@ -41,6 +41,8 @@ export declare class AparteChatBubbleDirective extends AparteElementBase {
     set streaming(v: boolean);
     /** Who wrote the message: shown in the header, and the message's accessible name ("Message from {name}"). Leave it out for the reader and the assistant, whose names come from the locale. */
     set name(v: string | undefined);
+    /** Why the compaction failed, beside `data-checkpoint="failed"`: the separator gives it as the failure's tooltip and to screen readers. Set and cleared with `data-checkpoint`; read it, do not write it. */
+    set dataCheckpointReason(v: string | undefined);
     /** An attached image was clicked, asking the app to open it full-size. */
     readonly attachmentPreview: EventEmitter<AparteAttachmentPreviewEventDetail>;
     /** A custom action-bar button was pressed. */
@@ -66,7 +68,7 @@ export declare class AparteChatBubbleDirective extends AparteElementBase {
     protected onBranchNavigate(e: CustomEvent<AparteBranchNavigateEventDetail>): void;
     protected onLinkClick(e: CustomEvent<AparteLinkClickEventDetail>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AparteChatBubbleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteChatBubbleDirective, "aparte-chat-bubble", never, { "messageRole": { "alias": "messageRole"; "required": false; }; "content": { "alias": "content"; "required": false; }; "timestamp": { "alias": "timestamp"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "streaming": { "alias": "streaming"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "attachmentPreview": "attachmentPreview"; "action": "action"; "retry": "retry"; "feedback": "feedback"; "messageInfo": "messageInfo"; "edit": "edit"; "branchNavigate": "branchNavigate"; "linkClick": "linkClick"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteChatBubbleDirective, "aparte-chat-bubble", never, { "messageRole": { "alias": "messageRole"; "required": false; }; "content": { "alias": "content"; "required": false; }; "timestamp": { "alias": "timestamp"; "required": false; }; "messageId": { "alias": "messageId"; "required": false; }; "streaming": { "alias": "streaming"; "required": false; }; "name": { "alias": "name"; "required": false; }; "dataCheckpointReason": { "alias": "dataCheckpointReason"; "required": false; }; }, { "attachmentPreview": "attachmentPreview"; "action": "action"; "retry": "retry"; "feedback": "feedback"; "messageInfo": "messageInfo"; "edit": "edit"; "branchNavigate": "branchNavigate"; "linkClick": "linkClick"; }, never, never, true, never>;
     static ngAcceptInputType_streaming: unknown;
 }
 /** `<aparte-chat-status>` — A standalone status line — a light-DOM indicator the APP owns. Nothing in core turns it on: the framework host only ever flips it back OFF (on the first streamed token), and the four wrappers render one inside the viewport driven by their own `isTyping` prop. */
@@ -230,7 +232,7 @@ export declare class AparteComposerToolbarDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<AparteComposerToolbarDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AparteComposerToolbarDirective, "aparte-composer-toolbar", never, {}, {}, never, never, true, never>;
 }
-/** `<aparte-context>` — A gauge of the model's context window: how much of it the conversation uses. */
+/** `<aparte-context>` — A gauge of the model's context window: how much of it the conversation uses, and what fills it. */
 export declare class AparteContextDirective extends AparteElementBase {
     /** The context window, in tokens. Overrides the current model's `contextWindow`. */
     set window(v: number);
@@ -244,20 +246,22 @@ export declare class AparteContextDirective extends AparteElementBase {
     set variant(v: string | undefined);
     /** Tokens in use before a turn of this page has reported any: a restored conversation's last usage. The next turn's usage replaces it. */
     set used(v: number);
-    /** Dispatch `aparte-compact` on each turn that ends in `danger`, one request at a time. */
+    /** Deprecated, still works. Dispatch `aparte-compact` (with `auto: true`) on each turn that ends in `danger`, one request at a time. `@aparte/plugin-compaction` decides when to compact by itself now, so leave this off. */
     set autoCompact(v: boolean);
     /** Reflected BY the element: `ok`, `warn` or `danger`. Read-only. */
     set dataLevel(v: string | undefined);
     /** Reflected BY the element while it has nothing to show. Read-only. */
     set dataEmpty(v: boolean);
+    /** Reflected BY the element while this chat is being compacted (`running`) and after a compaction failed (`failed`). Read-only. */
+    set dataCompact(v: string | undefined);
     /** The level changed. Bubbles. */
     readonly contextThreshold: EventEmitter<AparteContextThresholdEventDetail>;
-    /** Dispatched on `window` when `auto-compact` is set and a turn ends in `danger`: compact this target's transcript. One request at a time — the next turn in `danger` asks again once the plugin has answered — and only while the attribute is present. `@aparte/plugin-compaction` answers it; with no listener nothing happens. */
+    /** Dispatched on `window` when the deprecated `auto-compact` is set and a turn ends in `danger` (`auto: true`, with the `window` it measured against), and by Retry in the panel when no compactor is registered. One automatic request at a time — the next turn in `danger` asks again once the plugin has answered. `@aparte/plugin-compaction` answers it; with no listener nothing happens. */
     readonly compact: EventEmitter<AparteCompactEventDetail>;
     protected onContextThreshold(e: CustomEvent<AparteContextThresholdEventDetail>): void;
     protected onCompact(e: CustomEvent<AparteCompactEventDetail>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AparteContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteContextDirective, "aparte-context", never, { "window": { "alias": "window"; "required": false; }; "warn": { "alias": "warn"; "required": false; }; "danger": { "alias": "danger"; "required": false; }; "target": { "alias": "target"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "used": { "alias": "used"; "required": false; }; "autoCompact": { "alias": "autoCompact"; "required": false; }; "dataLevel": { "alias": "dataLevel"; "required": false; }; "dataEmpty": { "alias": "dataEmpty"; "required": false; }; }, { "contextThreshold": "contextThreshold"; "compact": "compact"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteContextDirective, "aparte-context", never, { "window": { "alias": "window"; "required": false; }; "warn": { "alias": "warn"; "required": false; }; "danger": { "alias": "danger"; "required": false; }; "target": { "alias": "target"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "used": { "alias": "used"; "required": false; }; "autoCompact": { "alias": "autoCompact"; "required": false; }; "dataLevel": { "alias": "dataLevel"; "required": false; }; "dataEmpty": { "alias": "dataEmpty"; "required": false; }; "dataCompact": { "alias": "dataCompact"; "required": false; }; }, { "contextThreshold": "contextThreshold"; "compact": "compact"; }, never, never, true, never>;
     static ngAcceptInputType_window: unknown;
     static ngAcceptInputType_warn: unknown;
     static ngAcceptInputType_danger: unknown;
@@ -275,6 +279,8 @@ export declare class AparteConversationListDirective extends AparteElementBase {
     set loading(v: boolean);
     /** 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: boolean);
+    /** Set the list of conversations to display. Triggers a re-render. */
+    set conversations(v: AparteConversationListItem[] | undefined);
     /** A row's title was activated; the host loads that conversation. */
     readonly conversationSelect: EventEmitter<AparteConversationSelectDetail>;
     /** 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()". */
@@ -297,7 +303,7 @@ export declare class AparteConversationListDirective extends AparteElementBase {
     protected onConversationUnarchive(e: CustomEvent<AparteConversationArchiveDetail>): void;
     protected onConversationDelete(e: CustomEvent<AparteConversationDeleteDetail>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AparteConversationListDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteConversationListDirective, "aparte-conversation-list", never, { "activeId": { "alias": "activeId"; "required": false; }; "flat": { "alias": "flat"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "manage": { "alias": "manage"; "required": false; }; }, { "conversationSelect": "conversationSelect"; "conversationRename": "conversationRename"; "conversationPin": "conversationPin"; "conversationUnpin": "conversationUnpin"; "conversationArchive": "conversationArchive"; "conversationUnarchive": "conversationUnarchive"; "conversationDelete": "conversationDelete"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteConversationListDirective, "aparte-conversation-list", never, { "activeId": { "alias": "activeId"; "required": false; }; "flat": { "alias": "flat"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "manage": { "alias": "manage"; "required": false; }; "conversations": { "alias": "conversations"; "required": false; }; }, { "conversationSelect": "conversationSelect"; "conversationRename": "conversationRename"; "conversationPin": "conversationPin"; "conversationUnpin": "conversationUnpin"; "conversationArchive": "conversationArchive"; "conversationUnarchive": "conversationUnarchive"; "conversationDelete": "conversationDelete"; }, never, never, true, never>;
     static ngAcceptInputType_flat: unknown;
     static ngAcceptInputType_loading: unknown;
     static ngAcceptInputType_manage: unknown;

package/dist/index.d.ts

@@ -5,10 +5,12 @@
 export { provideAparte, APARTE_CONFIG_TOKEN } from './lib/provide-aparte';
 export type { ProvideAparteOptions, ApartePluginLoader } from './lib/provide-aparte';
 export { AparteChatComponent } from './lib/aparte-chat.component';
+export { AparteBubbleDirective } from './lib/aparte-bubble.directive';
+export { AparteToolUIDirective, AparteSegmentUIDirective } from './lib/aparte-tool-ui.directive';
 export { AparteUiComponent } from './lib/aparte-ui.component';
 export type { AparteUiHandle, AparteUiProps } from './lib/aparte-ui.component';
 export * from './generated/element.directives';
 export { AparteAiService, APARTE_CLIENT_OPTIONS } from './lib/aparte-ai.service';
 export { ConversationManagerService } from './lib/conversation-manager.service';
-export type { AparteMessage, AparteSendEventDetail, AparteActionEventDetail, AparteSegment, AparteTextSegment, AparteCodeSegment, AparteThinkingSegment, AparteChatImperativeApi, } from '@aparte/core';
+export type { AparteMessage, AparteSendEventDetail, AparteActionEventDetail, AparteSegment, AparteTextSegment, AparteCodeSegment, AparteThinkingSegment, AparteChatImperativeApi, AparteToolCallView, } from '@aparte/core';
 export { aparteGlobalConfig } from '@aparte/core';

package/dist/lib/aparte-bubble.directive.d.ts

@@ -0,0 +1,27 @@
+import { TemplateRef } from '@angular/core';
+import type { AparteMessage } from '@aparte/core';
+import * as i0 from "@angular/core";
+/**
+ * Marks the template `<aparte-chat>` draws each message with, in place of
+ * `<aparte-chat-bubble>`: write it as content of the chat, the message as `$implicit`.
+ *
+ * ```html
+ * <aparte-chat [messages]="messages">
+ *   <ng-template aparteBubble let-message>
+ *     <app-bubble [message]="message" />
+ *   </ng-template>
+ * </aparte-chat>
+ * ```
+ *
+ * The same thing as passing a `TemplateRef` to `[bubbleTemplate]`, written where Angular
+ * developers write a per-item template. When both are given, `[bubbleTemplate]` wins.
+ * The built-in action bar (retry, edit, the version picker) belongs to the native bubble;
+ * a template of yours owns whatever it wires.
+ */
+export declare class AparteBubbleDirective {
+    readonly template: TemplateRef<{
+        $implicit: AparteMessage;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AparteBubbleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteBubbleDirective, "ng-template[aparteBubble]", never, {}, {}, never, never, true, never>;
+}

package/dist/lib/aparte-chat.component.d.ts

@@ -1,10 +1,11 @@
-import { ElementRef, OnDestroy, QueryList, AfterViewInit, TemplateRef } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, QueryList, TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import type { AparteMessage, AparteSegment, AparteSendEventDetail, AparteConfig, AparteActionEventDetail, AparteChatImperativeApi } from '@aparte/core';
 import { isAwaitingReply } from '@aparte/core';
+import { AparteBubbleDirective } from './aparte-bubble.directive';
 import * as i0 from "@angular/core";
 /**
- * AparteChatComponent — Angular 19 Wrapper
+ * AparteChatComponent — the Angular wrapper (19.2 to 21, zone or zoneless)
  *
  * Standalone component wrapping aparté Web Components with Angular Signals.
  * The streaming / branch-navigation / host-method orchestration (orphan-stream
@@ -15,25 +16,35 @@ import * as i0 from "@angular/core";
  */
 export declare class AparteChatComponent implements AfterViewInit, OnDestroy, AparteChatImperativeApi {
     constructor();
+    ngAfterViewInit(): void;
     private elementRef;
+    private readonly _injector;
+    private readonly _isBrowser;
     /**
      * Template bridge to core's shared `isAwaitingReply` (an Angular template can't
      * call an imported function). One rule for the four wrappers and core itself,
      * so "is this bubble in flight" can't drift between them.
      */
     readonly awaitingReply: typeof isAwaitingReply;
-    /** Messages to display */
-    set messagesInput(val: AparteMessage[]);
+    /** Messages to display. Two-way: `[(messages)]`, with `(messagesChange)` reporting the chat's own changes. */
+    readonly messagesInput: import("@angular/core").InputSignal<AparteMessage[]>;
+    /** Every list the host reported — read only by the render-cache rule below. */
+    private readonly _emitted;
+    /**
+     * Under `[(messages)]` each report comes back through the input — possibly an EARLIER one,
+     * after the chat appended without reporting (an optimistic append, or core's append right
+     * after a flush) — and an echo is not the parent's word: it keeps the local list. The host
+     * tells them apart (`takeEcho`), the rule React, Vue and Svelte apply, so a list the parent
+     * restores later (a reopened conversation, an undo) is applied. Before the host exists
+     * nothing was reported, so the input is taken as it is.
+     */
     readonly messages: import("@angular/core").WritableSignal<AparteMessage[]>;
     /** Input placeholder text */
-    set placeholderInput(val: string);
-    readonly placeholder: import("@angular/core").WritableSignal<string>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
     /** Whether the input is disabled */
-    set disabledInput(val: boolean);
-    readonly disabled: import("@angular/core").WritableSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** When false, Shift+Enter submits and a bare Enter inserts a newline. */
-    set submitOnEnterInput(val: boolean);
-    readonly submitOnEnter: import("@angular/core").WritableSignal<boolean>;
+    readonly submitOnEnter: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Opt in to the "centered composer when empty" layout: the composer sits
      * vertically centered with the `[slot='empty-state']` content above it while
@@ -41,21 +52,27 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
      * Off by default — additive (adds the `--auto-center` modifier + a
      * `data-aparte-empty` attribute the shipped `aparte.css` recipe keys off).
      */
-    set centerWhenEmptyInput(val: boolean);
-    readonly centerWhenEmpty: import("@angular/core").WritableSignal<boolean>;
+    readonly centerWhenEmpty: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * 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: boolean);
-    readonly loading: import("@angular/core").WritableSignal<boolean>;
+    readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** The controller's wait (a conversation fetched through the adapter). */
     readonly hostLoading: import("@angular/core").WritableSignal<boolean>;
     readonly waiting: import("@angular/core").Signal<boolean>;
     /** Bumped on every config change, so the two locale strings below follow a language switch under OnPush. */
     private readonly _localeTick;
+    /**
+     * True until the host is built — on the server always, and in the browser only while Angular
+     * hydrates the server's HTML: the host element is then the one the server sent, still carrying
+     * the attribute. A client-only render holds nothing, so a component projected into the empty
+     * state (built in an @if, after the host binding) talks to live elements in its own
+     * ngAfterViewInit, which runs before this component's.
+     */
+    protected readonly hydrating: import("@angular/core").WritableSignal<boolean>;
     private _unsubscribeLocale?;
     get loadingText(): string;
     /**
@@ -70,11 +87,9 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
      * selector on Angular alone. This input is that parity. Additive: the recipe's
      * own classes stay.
      */
-    set containerClassInput(val: string);
-    readonly containerClass: import("@angular/core").WritableSignal<string>;
+    readonly containerClass: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
     /** Inline style for the same div — a string or a `{ prop: value }` map. */
-    set containerStyleInput(val: string | Record<string, string> | null);
-    readonly containerStyle: import("@angular/core").WritableSignal<string | Record<string, string>>;
+    readonly containerStyle: import("@angular/core").InputSignalWithTransform<string | Record<string, string> | null, string | Record<string, string> | null | undefined>;
     /**
      * Overlay the composer on the transcript (the ChatGPT anatomy): the scroll
      * surface spans the whole column, the scrollbar runs edge to edge, and the
@@ -83,8 +98,7 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
      * core's recipe and the viewport's measurement both key on the attribute
      * there. Read when the viewport mounts.
      */
-    set overlayComposerInput(val: boolean);
-    readonly overlayComposer: import("@angular/core").WritableSignal<boolean>;
+    readonly overlayComposer: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Add the file picker + chips strip to the default composer shell. **Off by
      * default**, because the capability needs a host that consumes the files: an
@@ -94,8 +108,7 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
      * project a `[slot='composer']` (drop `<aparte-composer-add-attachment>` and
      * `<aparte-composer-attachments>` in it yourself).
      */
-    set attachmentsInput(val: boolean);
-    readonly attachments: import("@angular/core").WritableSignal<boolean>;
+    readonly attachments: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Render the `<aparte-elicitation>` presenter inside the host — on by default, as
      * it is in `<aparte-chat>`: the built-in approval gate and `requestUserInput()`
@@ -103,46 +116,47 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
      * when you mount a presenter of your own (`setElicitationPresenter`) or place the
      * element yourself.
      */
-    set elicitationInput(val: boolean);
-    readonly elicitation: import("@angular/core").WritableSignal<boolean>;
-    /** Whether the assistant is currently typing/streaming */
-    set isTypingInput(val: boolean);
+    readonly elicitation: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Whether the assistant is currently typing/streaming. The host turns it off on the first token. */
+    readonly isTypingInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly isTyping: import("@angular/core").WritableSignal<boolean>;
     /** Text to show in the typing status */
-    set typingTextInput(val: string | undefined);
-    readonly typingText: import("@angular/core").WritableSignal<string>;
+    readonly typingText: import("@angular/core").InputSignal<string | undefined>;
     /** The status line's word: the input, else the locale's, like the rest of the chat. */
     get typingLabel(): string;
-    /** Duration in ms to freeze spacer recalculation after a conversation swap. */
-    layoutTransitionMs: number;
+    /** Duration in ms to freeze spacer recalculation after a conversation swap. Read when the host is created. */
+    readonly layoutTransitionMs: import("@angular/core").InputSignalWithTransform<number, unknown>;
     /**
      * Active conversation id. When provided, the host attaches an
      * `AparteConversationController` that loads/persists messages via the
      * `AparteConversationManager` registered in `aparteGlobalConfig`. Setting a different id
      * mid-stream aborts the previous request; `null` deselects.
      */
-    set conversationIdInput(val: string | null | undefined);
+    readonly conversationIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     private _conversationId;
     /**
      * Instance {@link AparteConfig} for this chat. When set, aparté components
      * inside resolve THIS config instead of `aparteGlobalConfig`, so
      * several independently-configured chats can coexist on one page. Omit for the
-     * global config. Read once in `ngAfterViewInit` when the host is created.
+     * global config. Read once, when the host is created after the first render.
      */
-    config?: AparteConfig;
+    readonly config: import("@angular/core").InputSignal<AparteConfig | undefined>;
     /**
      * Render your OWN element per message in place of `<aparte-chat-bubble>`.
-     * Opt-in — provide a `<ng-template let-message>` and pass its ref. Driven by
-     * the reactive `messages()` signal, so it updates live during streaming.
-     * The built-in action bar (retry/edit/branch) belongs to the native bubble;
-     * a custom bubble owns whatever it wires.
+     * Opt-in — provide a `<ng-template let-message>` and pass its ref, or write the
+     * template as content with {@link AparteBubbleDirective} (`<ng-template aparteBubble
+     * let-message>`); this input wins when both are given. Driven by the reactive
+     * `messages()` signal, so it updates live during streaming. The built-in action bar
+     * (retry/edit/branch) belongs to the native bubble; a custom bubble owns whatever it wires.
      * @example
      * <aparte-chat [bubbleTemplate]="tpl" />
      * <ng-template #tpl let-message>{{ message.content }}</ng-template>
      */
-    bubbleTemplate?: TemplateRef<{
+    readonly bubbleTemplate: import("@angular/core").InputSignal<TemplateRef<{
         $implicit: AparteMessage;
-    }>;
+    }> | undefined>;
+    /** The `<ng-template aparteBubble>` written as content, if any. */
+    readonly bubbleDirective: import("@angular/core").Signal<AparteBubbleDirective | undefined>;
     /**
      * User submitted a message from the composer. It is **appended to the thread
      * automatically** (optimistic UI) before this fires — do NOT add it again in
@@ -173,13 +187,15 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
     readonly isStreaming: import("@angular/core").Signal<boolean>;
     /** rAF id used to coalesce rapid signal updates during streaming */
     private _syncRafId;
-    /** The framework-agnostic chat-host orchestrator (created in ngAfterViewInit). */
+    /** The framework-agnostic chat-host orchestrator (created after the first render, in the browser). */
     private _host?;
     private _unbindHost?;
     /** QueryList.changes subscription — released in ngOnDestroy so SPA route
      *  churn doesn't leak a live subscription per mount. */
     private _bubbleRefsSub?;
-    ngAfterViewInit(): void;
+    /** Set by ngOnDestroy: an afterNextRender that lands after a destroy must not build a host. */
+    private _destroyed;
+    private _createHost;
     private readonly _onAction;
     ngOnDestroy(): void;
     /** Append a message optimistically — `{ historical: true }` for one restored from your own store. */
@@ -248,14 +264,5 @@ export declare class AparteChatComponent implements AfterViewInit, OnDestroy, Ap
     /** Handle aparte-send event from the composer Web Component. */
     onAparteSend(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AparteChatComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AparteChatComponent, "aparte-chat", never, { "messagesInput": { "alias": "messages"; "required": false; }; "placeholderInput": { "alias": "placeholder"; "required": false; }; "disabledInput": { "alias": "disabled"; "required": false; }; "submitOnEnterInput": { "alias": "submitOnEnter"; "required": false; }; "centerWhenEmptyInput": { "alias": "centerWhenEmpty"; "required": false; }; "loadingInput": { "alias": "loading"; "required": false; }; "containerClassInput": { "alias": "containerClass"; "required": false; }; "containerStyleInput": { "alias": "containerStyle"; "required": false; }; "overlayComposerInput": { "alias": "overlayComposer"; "required": false; }; "attachmentsInput": { "alias": "attachments"; "required": false; }; "elicitationInput": { "alias": "elicitation"; "required": false; }; "isTypingInput": { "alias": "isTyping"; "required": false; }; "typingTextInput": { "alias": "typingText"; "required": false; }; "layoutTransitionMs": { "alias": "layoutTransitionMs"; "required": false; }; "conversationIdInput": { "alias": "conversationId"; "required": false; }; "config": { "alias": "config"; "required": false; }; "bubbleTemplate": { "alias": "bubbleTemplate"; "required": false; }; }, { "messageSent": "messageSent"; "action": "action"; "messagesChange": "messagesChange"; "messageAppended": "messageAppended"; "typingChange": "typingChange"; "conversationCreated": "conversationCreated"; }, never, ["[slot='empty-state']", "[slot='above-composer']", "[slot='toolbar']", "[slot='composer']"], true, never>;
-    static ngAcceptInputType_disabledInput: unknown;
-    static ngAcceptInputType_submitOnEnterInput: unknown;
-    static ngAcceptInputType_centerWhenEmptyInput: unknown;
-    static ngAcceptInputType_loadingInput: unknown;
-    static ngAcceptInputType_overlayComposerInput: unknown;
-    static ngAcceptInputType_attachmentsInput: unknown;
-    static ngAcceptInputType_elicitationInput: unknown;
-    static ngAcceptInputType_isTypingInput: unknown;
-    static ngAcceptInputType_layoutTransitionMs: unknown;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AparteChatComponent, "aparte-chat", never, { "messagesInput": { "alias": "messages"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "submitOnEnter": { "alias": "submitOnEnter"; "required": false; "isSignal": true; }; "centerWhenEmpty": { "alias": "centerWhenEmpty"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "containerStyle": { "alias": "containerStyle"; "required": false; "isSignal": true; }; "overlayComposer": { "alias": "overlayComposer"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "elicitation": { "alias": "elicitation"; "required": false; "isSignal": true; }; "isTypingInput": { "alias": "isTyping"; "required": false; "isSignal": true; }; "typingText": { "alias": "typingText"; "required": false; "isSignal": true; }; "layoutTransitionMs": { "alias": "layoutTransitionMs"; "required": false; "isSignal": true; }; "conversationIdInput": { "alias": "conversationId"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "bubbleTemplate": { "alias": "bubbleTemplate"; "required": false; "isSignal": true; }; }, { "messageSent": "messageSent"; "action": "action"; "messagesChange": "messagesChange"; "messageAppended": "messageAppended"; "typingChange": "typingChange"; "conversationCreated": "conversationCreated"; }, ["bubbleDirective"], ["[slot='empty-state']", "[slot='above-composer']", "[slot='toolbar']", "[slot='composer']"], true, never>;
 }

package/dist/lib/aparte-tool-ui.directive.d.ts

@@ -0,0 +1,63 @@
+import { type AparteConfig, type AparteSegmentBase, type AparteToolCallView, type AparteToolMatcher } from '@aparte/core';
+import * as i0 from "@angular/core";
+/**
+ * Draws a tool call with your own template, for as long as the template is in the page.
+ *
+ * ```html
+ * <ng-template aparteToolUI="get_weather" let-tool>
+ *   <app-weather-card [tool]="tool" />
+ * </ng-template>
+ * ```
+ *
+ * `let-tool` is an `AparteToolCallView`; its `input` is the model's arguments, `unknown` until
+ * the card narrows it — give the card the view (`input.required<AparteToolCallView>()`) and type
+ * its arguments there.
+ *
+ * Every `get_weather` call is drawn with the template, the call's view as `$implicit`, and
+ * given back to core's row when the template leaves. The view is created where you declare
+ * the template, so the components in it inject what your app provides there. Underneath it is
+ * core's `overrideToolRenderer` + `defineMountedToolRenderer`; nothing is declared in a server
+ * render, and the cards are drawn in the browser.
+ */
+export declare class AparteToolUIDirective {
+    /** The tool this draws: a name, a `RegExp`, or `'*'` for every tool. */
+    readonly name: import("@angular/core").InputSignal<AparteToolMatcher>;
+    /** The config to declare it on. Defaults to the global one. */
+    readonly config: import("@angular/core").InputSignal<AparteConfig | undefined>;
+    private readonly template;
+    private readonly container;
+    constructor();
+    /** Types `let-tool` in a strict template. */
+    static ngTemplateContextGuard(_dir: AparteToolUIDirective, _ctx: unknown): _ctx is {
+        $implicit: AparteToolCallView;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<AparteToolUIDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteToolUIDirective, "ng-template[aparteToolUI]", never, { "name": { "alias": "aparteToolUI"; "required": true; "isSignal": true; }; "config": { "alias": "aparteToolUIConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Draws a segment type with your own template — one your stream emits, or a built-in such as
+ * `code` — the segment as `$implicit`. Taking the last declaration off a built-in type gives it
+ * back to core's renderer.
+ *
+ * ```html
+ * <ng-template aparteSegmentUI="chart" let-segment>
+ *   <app-chart [segment]="segment" />
+ * </ng-template>
+ * ```
+ *
+ * `let-segment` is the base segment with its own fields: the component it is handed to types it.
+ */
+export declare class AparteSegmentUIDirective {
+    /** The segment `type` this draws. */
+    readonly type: import("@angular/core").InputSignal<string>;
+    /** The config to declare it on. Defaults to the global one. */
+    readonly config: import("@angular/core").InputSignal<AparteConfig | undefined>;
+    private readonly template;
+    private readonly container;
+    constructor();
+    static ngTemplateContextGuard(_dir: AparteSegmentUIDirective, _ctx: unknown): _ctx is {
+        $implicit: AparteSegmentBase & Record<string, unknown>;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<AparteSegmentUIDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AparteSegmentUIDirective, "ng-template[aparteSegmentUI]", never, { "type": { "alias": "aparteSegmentUI"; "required": true; "isSignal": true; }; "config": { "alias": "aparteSegmentUIConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/lib/aparte-ui.component.d.ts

@@ -76,6 +76,13 @@ export declare class AparteUiComponent implements AfterViewInit, OnChanges, OnDe
     readonly elementEvent: import("@angular/core").OutputEmitterRef<CustomEvent<any>>;
     /** The dynamically created Web Component element */
     private element;
+    /**
+     * On a server the element is not built: it would be serialized into the HTML without its
+     * props or listeners, hydration would keep it, and the browser would append its own beside
+     * it — two counters, two pickers. React, Vue and Svelte build theirs in an effect or onMount,
+     * which a server never runs.
+     */
+    private readonly isBrowser;
     /** Cleanup functions for event listeners */
     private eventCleanups;
     /** Joined key of the bound event set, so a fresh inline `[events]` array

package/dist/lib/conversation-manager.service.d.ts

@@ -30,9 +30,9 @@ export declare class ConversationManagerService implements OnDestroy {
     /** Archived conversations, newest first. */
     readonly archivedConversations: import("@angular/core").Signal<AparteConversation[]>;
     /** Currently active conversation id. */
-    readonly activeId: import("@angular/core").WritableSignal<string>;
+    readonly activeId: import("@angular/core").WritableSignal<string | null>;
     /** The active conversation object (null when no conv is selected). */
-    readonly activeConversation: import("@angular/core").Signal<AparteConversation>;
+    readonly activeConversation: import("@angular/core").Signal<AparteConversation | null>;
     /**
      * Initialise the service with a storage adapter.
      * Call once in your root component or app initialiser.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@aparte/angular",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "homepage": "https://apartejs.dev/frameworks/angular/",
-  "description": "Angular 19 wrapper for aparté — an ergonomic <aparte-chat> component plus services over the framework-agnostic web components.",
+  "description": "Angular wrapper for aparté (Angular 19.2 to 21, zone or zoneless) — an ergonomic <aparte-chat> component plus services over the framework-agnostic web components.",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/fesm2022/aparte-angular.mjs",
@@ -28,25 +28,26 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@aparte/core": ">=0.24.0 <1.0.0",
+    "@angular/common": "^19.2.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.2.0 || ^20.0.0 || ^21.0.0",
+    "@aparte/core": ">=0.26.0 <1.0.0",
     "rxjs": "^7.8.0"
   },
   "devDependencies": {
-    "@analogjs/vitest-angular": "^2.2.2",
     "@angular/common": "^19.2.0",
     "@angular/compiler": "^19.2.0",
     "@angular/compiler-cli": "^19.2.0",
     "@angular/core": "^19.2.0",
     "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-server": "^19.2.0",
     "jsdom": "^22.1.0",
     "ng-packagr": "^19.2.0",
     "rxjs": "^7.8.2",
     "typescript": "^5.4.0",
     "vite": "^6.0.0",
     "zone.js": "~0.15.0",
-    "@aparte/core": "0.24.0"
+    "@aparte/core": "0.26.0",
+    "@aparte/provider-scenario": "0.26.0"
   },
   "keywords": [
     "angular",
@@ -67,7 +68,7 @@
     "url": "https://github.com/apartejs/aparte/issues"
   },
   "scripts": {
-    "build": "ng-packagr -p ng-package.json && node ../../../scripts/stamp-dist.mjs",
+    "build": "ng-packagr -p ng-package.json -c tsconfig.lib.json && node ../../../scripts/stamp-dist.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "typecheck:tests": "tsc -p tsconfig.spec.json --noEmit",
     "test": "vitest",