@atelier-ui/angular 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/angular",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Atelier UI component library for Angular — LLM-optimised, accessible, design-token-driven",
   "keywords": [
     "angular",

package/types/atelier-ui-angular.d.ts

@@ -16,13 +16,16 @@ import * as i1$1 from '@angular/cdk/menu';
  * Angular: use the union types as `input<T>()` type parameters.
  * React: extend the spec interface from the framework-specific props interface.
  */
-type LlmButtonVariant = 'primary' | 'secondary' | 'outline';
+type LlmButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger';
 type LlmButtonSize = 'sm' | 'md' | 'lg';
 interface LlmComboboxOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
+type LlmChatVariant = 'drawer' | 'popup' | 'inline';
+type LlmChatStatus = 'idle' | 'streaming' | 'error';
+type LlmChatMessageRole = 'user' | 'assistant' | 'system';
 
 /**
  * Accessible button component with visual variants and sizes.
@@ -114,7 +117,7 @@ declare class LlmCardFooter {
 
 declare class LlmBadge {
     /** Semantic color variant of the badge. */
-    readonly variant: _angular_core.InputSignal<"default" | "success" | "warning" | "danger" | "info">;
+    readonly variant: _angular_core.InputSignal<"danger" | "default" | "success" | "warning" | "info">;
     /** Size of the badge. */
     readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -412,7 +415,7 @@ declare class LlmToggle implements FormCheckboxControl {
 
 declare class LlmAlert {
     /** Semantic color variant of the alert. */
-    readonly variant: _angular_core.InputSignal<"success" | "warning" | "danger" | "info">;
+    readonly variant: _angular_core.InputSignal<"danger" | "success" | "warning" | "info">;
     /** Whether to show a dismiss button. */
     readonly dismissible: _angular_core.InputSignal<boolean>;
     /** Emitted when the dismiss button is clicked. */
@@ -1196,7 +1199,7 @@ declare class LlmProgress {
     /** Maximum value. */
     readonly max: _angular_core.InputSignal<number>;
     /** Semantic color variant. */
-    readonly variant: _angular_core.InputSignal<"default" | "success" | "warning" | "danger">;
+    readonly variant: _angular_core.InputSignal<"danger" | "default" | "success" | "warning">;
     /** Height size of the track. */
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
     /** Shows an animated indeterminate state (loading). */
@@ -1644,5 +1647,155 @@ declare class LlmCodeBlock {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmCodeBlock, "llm-code-block", never, { "code": { "alias": "code"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { LLM_ACCORDION_GROUP, LLM_BREADCRUMBS, LLM_DIALOG, LLM_DRAWER, LLM_RADIO_GROUP, LLM_SELECT, LLM_STEPPER, LLM_TABLE, LLM_TAB_GROUP, LlmAccordionGroup, LlmAccordionHeader, LlmAccordionItem, LlmAlert, LlmAvatar, LlmAvatarGroup, LlmBadge, LlmBreadcrumbItem, LlmBreadcrumbs, LlmButton, LlmCard, LlmCardContent, LlmCardFooter, LlmCardHeader, LlmCheckbox, LlmCodeBlock, LlmCombobox, LlmDialog, LlmDialogContent, LlmDialogFooter, LlmDialogHeader, LlmDrawer, LlmDrawerContent, LlmDrawerFooter, LlmDrawerHeader, LlmInput, LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger, LlmOption, LlmPagination, LlmProgress, LlmRadio, LlmRadioGroup, LlmSelect, LlmSkeleton, LlmStep, LlmStepper, LlmTab, LlmTabGroup, LlmTable, LlmTbody, LlmTd, LlmTextarea, LlmTh, LlmThead, LlmToast, LlmToastContainer, LlmToastService, LlmToggle, LlmTooltip, LlmTr };
-export type { LlmAccordionGroupContext, LlmBreadcrumbsContext, LlmDialogContext, LlmDrawerContext, LlmRadioGroupContext, LlmSelectContext, LlmSortDirection, LlmStepperContext, LlmTabGroupContext, LlmTableContext, PageItem, StepInfo, TabInfo, ToastData, ToastOptions };
+/**
+ * AI assistant surface. Three layout variants share the same content slots
+ * and can be swapped without changing the children.
+ *
+ * Variants:
+ * - `drawer`: Right-anchored slide-in panel, full viewport height.
+ * - `popup`: Floating bubble (bottom-right) + compact chat window.
+ * - `inline`: Embedded card, sits inline with page content.
+ *
+ * Compose with `llm-chat-header`, `llm-chat-messages`, `llm-chat-input`.
+ *
+ * Usage:
+ * ```html
+ * <llm-chat variant="drawer" [(open)]="isOpen" status="idle">
+ *   <llm-chat-header>AI Assistant</llm-chat-header>
+ *   <llm-chat-messages>
+ *     <llm-chat-message role="assistant">Hi! How can I help?</llm-chat-message>
+ *     <llm-chat-message role="user">Show me a sorting function.</llm-chat-message>
+ *   </llm-chat-messages>
+ *   <llm-chat-input placeholder="Ask anything…" (send)="onSend($event)" />
+ * </llm-chat>
+ * ```
+ */
+declare class LlmChat {
+    /** Layout variant. */
+    readonly variant: _angular_core.InputSignal<LlmChatVariant>;
+    /** Whether the chat is open. Used by drawer/popup; ignored by inline. Two-way bindable via [(open)]. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Connection / response status. Drives badge color in header and disables input while streaming. */
+    readonly status: _angular_core.InputSignal<LlmChatStatus>;
+    /** @internal — referenced by LlmChatHeader via LLM_CHAT token for aria-labelledby. */
+    readonly headerId: string;
+    protected readonly dialogRef: _angular_core.Signal<ElementRef<HTMLDialogElement> | undefined>;
+    private readonly triggerEl;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
+    protected onCancel(event: Event): void;
+    protected onBackdropClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChat, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChat, "llm-chat", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+/**
+ * Header slot for `llm-chat`. Holds the title, status indicator, and close button.
+ * Children are projected into the title area; the close button is rendered automatically.
+ */
+declare class LlmChatHeader {
+    protected readonly context: _atelier_ui_angular.LlmChatContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChatHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChatHeader, "llm-chat-header", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Scrollable message list for `llm-chat`. Project `llm-chat-message`,
+ * `llm-chat-typing`, or `llm-chat-suggestion` children inside.
+ */
+declare class LlmChatMessages {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChatMessages, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChatMessages, "llm-chat-messages", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * A single chat message. Role drives bubble alignment and color.
+ *
+ * Usage:
+ * ```html
+ * <llm-chat-message role="assistant">Sure, here you go.</llm-chat-message>
+ * <llm-chat-message role="user">Thanks!</llm-chat-message>
+ * <llm-chat-message role="assistant" [failed]="true">Couldn't reach the assistant.</llm-chat-message>
+ * ```
+ */
+declare class LlmChatMessage {
+    /** Sender of the message. Drives bubble alignment and color. */
+    readonly role: _angular_core.InputSignal<LlmChatMessageRole>;
+    /** Marks the message as failed (red dashed border, used in error state). */
+    readonly failed: _angular_core.InputSignal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChatMessage, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChatMessage, "llm-chat-message", never, { "role": { "alias": "role"; "required": false; "isSignal": true; }; "failed": { "alias": "failed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Typing indicator (three animated dots). Render at the end of the message
+ * list while the assistant is streaming a response.
+ */
+declare class LlmChatTyping {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChatTyping, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChatTyping, "llm-chat-typing", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tappable suggestion chip used in the empty state to seed a conversation.
+ *
+ * Usage:
+ * ```html
+ * <llm-chat-suggestion label="Explain a code snippet" hint="Tap to start →" (selected)="prompt.set($event)" />
+ * ```
+ */
+declare class LlmChatSuggestion {
+    /** Primary label of the suggestion. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Optional secondary hint text shown below the label. */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Fires the label string when the chip is activated. */
+    readonly selected: _angular_core.OutputEmitterRef<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChatSuggestion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChatSuggestion, "llm-chat-suggestion", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, never, true, never>;
+}
+/**
+ * Composable input footer for `llm-chat`. Wraps a text field and emits
+ * `send` (or `stop` while the assistant is streaming).
+ *
+ * The button automatically switches to a `danger` "Stop" button when the
+ * parent chat's `status` is `'streaming'`.
+ *
+ * Usage:
+ * ```html
+ * <llm-chat-input placeholder="Ask anything…" (send)="onSend($event)" (stop)="onStop()" />
+ * ```
+ */
+declare class LlmChatInput {
+    /** Placeholder shown in the empty input. Defaults change per parent status. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Accessible label for the input field. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Two-way bindable text content. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Fires when Enter is pressed (without Shift) or the Send button is clicked. */
+    readonly send: _angular_core.OutputEmitterRef<string>;
+    /** Fires when the Stop button is clicked while the parent chat is streaming. */
+    readonly stop: _angular_core.OutputEmitterRef<void>;
+    protected readonly context: _atelier_ui_angular.LlmChatContext;
+    protected readonly isStreaming: _angular_core.Signal<boolean>;
+    protected readonly effectivePlaceholder: _angular_core.Signal<string>;
+    protected onInput(event: Event): void;
+    protected onEnter(event: Event): void;
+    protected emitSend(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LlmChatInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LlmChatInput, "llm-chat-input", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "send": "send"; "stop": "stop"; }, never, never, true, never>;
+}
+
+/**
+ * Context token used by `llm-chat` sub-components (header, input) to
+ * read parent state and dispatch close/toggle actions without a direct
+ * component reference.
+ */
+interface LlmChatContext {
+    readonly headerId: string;
+    readonly variant: Signal<LlmChatVariant>;
+    readonly status: Signal<LlmChatStatus>;
+    close(): void;
+    toggle(): void;
+}
+declare const LLM_CHAT: InjectionToken<LlmChatContext>;
+
+export { LLM_ACCORDION_GROUP, LLM_BREADCRUMBS, LLM_CHAT, LLM_DIALOG, LLM_DRAWER, LLM_RADIO_GROUP, LLM_SELECT, LLM_STEPPER, LLM_TABLE, LLM_TAB_GROUP, LlmAccordionGroup, LlmAccordionHeader, LlmAccordionItem, LlmAlert, LlmAvatar, LlmAvatarGroup, LlmBadge, LlmBreadcrumbItem, LlmBreadcrumbs, LlmButton, LlmCard, LlmCardContent, LlmCardFooter, LlmCardHeader, LlmChat, LlmChatHeader, LlmChatInput, LlmChatMessage, LlmChatMessages, LlmChatSuggestion, LlmChatTyping, LlmCheckbox, LlmCodeBlock, LlmCombobox, LlmDialog, LlmDialogContent, LlmDialogFooter, LlmDialogHeader, LlmDrawer, LlmDrawerContent, LlmDrawerFooter, LlmDrawerHeader, LlmInput, LlmMenu, LlmMenuItem, LlmMenuSeparator, LlmMenuTrigger, LlmOption, LlmPagination, LlmProgress, LlmRadio, LlmRadioGroup, LlmSelect, LlmSkeleton, LlmStep, LlmStepper, LlmTab, LlmTabGroup, LlmTable, LlmTbody, LlmTd, LlmTextarea, LlmTh, LlmThead, LlmToast, LlmToastContainer, LlmToastService, LlmToggle, LlmTooltip, LlmTr };
+export type { LlmAccordionGroupContext, LlmBreadcrumbsContext, LlmChatContext, LlmDialogContext, LlmDrawerContext, LlmRadioGroupContext, LlmSelectContext, LlmSortDirection, LlmStepperContext, LlmTabGroupContext, LlmTableContext, PageItem, StepInfo, TabInfo, ToastData, ToastOptions };