@ai-composer/angular 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Deepak Chopkar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,6 @@
+# @ai-composer/angular
+
+Angular adapter: standalone components, signals, content projection, ControlValueAccessor.
+
+See [`docs/`](../../docs/README.md) for guides and API reference.
+

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @ai-composer/angular — Angular adapter (standalone components + signals).
+ *
+ * ```html
+ * <aic-ai-composer [editor]="editor" mode="chat" placeholder="Ask anything…"
+ *                    (submitted)="onSubmit($event)">
+ *   <div aic-header>Context</div>
+ *   <aic-ai-composer-input />
+ *   <div aic-toolbar><aic-ai-composer-submit /></div>
+ * </aic-ai-composer>
+ * ```
+ */
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type AIComposerDocument, type AIComposer, type AIComposerOptions, type AIComposerState } from '@ai-composer/core';
+/** Per-<aic-ai-composer> DI holder so projected children reach the editor. */
+export declare class AiComposerEditorHolder {
+    editor: AIComposer | null;
+}
+/** Resolve the editor from the enclosing <aic-ai-composer>. */
+export declare function injectAIComposer(): AIComposer;
+/** Live editor state as a signal (re-evaluated on every editor notify). */
+export declare function injectAIComposerState(): Signal<AIComposerState | null>;
+export declare class AIComposerHeaderDirective {
+}
+export declare class AIComposerToolbarDirective {
+}
+export declare class AIComposerFooterDirective {
+}
+export declare class AIComposerAttachmentsDirective {
+}
+export declare class AIComposerComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
+    private readonly holder;
+    /** External editor; when omitted one is created from `options`. */
+    editor: AIComposer | null;
+    options: AIComposerOptions | null;
+    mode: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    /** Auto-height ceiling — px number or CSS length; scrolls after the cap. */
+    maxHeight: number | string;
+    valueChange: EventEmitter<AIComposerDocument>;
+    submitted: EventEmitter<AIComposerDocument>;
+    /** Custom toolbar projection (suppresses the default one). */
+    customToolbar: AIComposerToolbarDirective | null;
+    readonly state: import("@angular/core").WritableSignal<AIComposerState | null>;
+    /** Default circular send button for compact/chat/expanded (Copilot style). */
+    readonly showDefaultToolbar: Signal<boolean>;
+    private created;
+    private resolved;
+    private unsubscribe;
+    constructor(holder: AiComposerEditorHolder);
+    private get editorInstance();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Direct access for template code: {{ editor().serialize('text') }} */
+    getEditor(): AIComposer;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: AIComposerDocument) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+}
+export declare class AIComposerInputComponent implements AfterViewInit, OnDestroy {
+    private readonly elementRef;
+    private readonly holder;
+    private surface;
+    private list;
+    constructor(elementRef: ElementRef<HTMLElement>);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+export declare class SubmitButtonComponent {
+    private readonly editor;
+    private readonly state;
+    readonly canSubmit: Signal<boolean>;
+    submit(): void;
+}
+/** Convenience import collection. */
+export declare const AI_COMPOSER_IMPORTS: readonly [typeof AIComposerComponent, typeof AIComposerInputComponent, typeof SubmitButtonComponent, typeof AIComposerHeaderDirective, typeof AIComposerToolbarDirective, typeof AIComposerFooterDirective, typeof AIComposerAttachmentsDirective];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,354 @@
+/**
+ * @ai-composer/angular — Angular adapter (standalone components + signals).
+ *
+ * ```html
+ * <aic-ai-composer [editor]="editor" mode="chat" placeholder="Ask anything…"
+ *                    (submitted)="onSubmit($event)">
+ *   <div aic-header>Context</div>
+ *   <aic-ai-composer-input />
+ *   <div aic-toolbar><aic-ai-composer-submit /></div>
+ * </aic-ai-composer>
+ * ```
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, Inject, Injectable, Input, Output, computed, forwardRef, inject, signal, } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { coerceDocument, createAIComposer, isAIComposer, } from '@ai-composer/core';
+import { createEditableSurface, createSuggestionList } from '@ai-composer/dom';
+/** Per-<aic-ai-composer> DI holder so projected children reach the editor. */
+let AiComposerEditorHolder = class AiComposerEditorHolder {
+    editor = null;
+};
+AiComposerEditorHolder = __decorate([
+    Injectable()
+], AiComposerEditorHolder);
+export { AiComposerEditorHolder };
+/** Resolve the editor from the enclosing <aic-ai-composer>. */
+export function injectAIComposer() {
+    const holder = inject(AiComposerEditorHolder);
+    if (!holder.editor) {
+        throw new Error('injectAIComposer() must be called inside <aic-ai-composer>');
+    }
+    return holder.editor;
+}
+/** Live editor state as a signal (re-evaluated on every editor notify). */
+export function injectAIComposerState() {
+    const editor = injectAIComposer();
+    const state = signal(editor.getState());
+    // Cleanup rides on the root component destroying its editor.
+    editor.subscribe((next) => state.set(next));
+    return state.asReadonly();
+}
+// ---------------------------------------------------------------------------
+// Slot marker directives (content projection anchors)
+// ---------------------------------------------------------------------------
+let AIComposerHeaderDirective = class AIComposerHeaderDirective {
+};
+AIComposerHeaderDirective = __decorate([
+    Directive({ selector: '[aic-header]', standalone: true })
+], AIComposerHeaderDirective);
+export { AIComposerHeaderDirective };
+let AIComposerToolbarDirective = class AIComposerToolbarDirective {
+};
+AIComposerToolbarDirective = __decorate([
+    Directive({ selector: '[aic-toolbar]', standalone: true })
+], AIComposerToolbarDirective);
+export { AIComposerToolbarDirective };
+let AIComposerFooterDirective = class AIComposerFooterDirective {
+};
+AIComposerFooterDirective = __decorate([
+    Directive({ selector: '[aic-footer]', standalone: true })
+], AIComposerFooterDirective);
+export { AIComposerFooterDirective };
+let AIComposerAttachmentsDirective = class AIComposerAttachmentsDirective {
+};
+AIComposerAttachmentsDirective = __decorate([
+    Directive({ selector: '[aic-attachments]', standalone: true })
+], AIComposerAttachmentsDirective);
+export { AIComposerAttachmentsDirective };
+// ---------------------------------------------------------------------------
+// Root component
+// ---------------------------------------------------------------------------
+let AIComposerComponent = class AIComposerComponent {
+    holder;
+    /** External editor; when omitted one is created from `options`. */
+    editor = null;
+    options = null;
+    mode = 'default';
+    placeholder = '';
+    disabled = false;
+    readonly = false;
+    /** Auto-height ceiling — px number or CSS length; scrolls after the cap. */
+    maxHeight = '';
+    valueChange = new EventEmitter();
+    submitted = new EventEmitter();
+    /** Custom toolbar projection (suppresses the default one). */
+    customToolbar = null;
+    state = signal(null);
+    /** Default circular send button for compact/chat/expanded (Copilot style). */
+    showDefaultToolbar = computed(() => {
+        const current = this.state();
+        const mode = current?.mode ?? this.mode;
+        return (mode === 'compact' || mode === 'chat' || mode === 'expanded') && !this.customToolbar;
+    });
+    created = false;
+    resolved = null;
+    unsubscribe = null;
+    constructor(holder) {
+        this.holder = holder;
+    }
+    get editorInstance() {
+        if (!this.resolved)
+            throw new Error('Editor not initialized');
+        return this.resolved;
+    }
+    ngOnChanges(changes) {
+        if (!this.resolved)
+            return;
+        const patch = {};
+        if (changes['mode']?.currentValue)
+            patch.mode = changes['mode'].currentValue;
+        if (changes['placeholder'])
+            patch.placeholder = changes['placeholder'].currentValue;
+        if (changes['disabled'])
+            patch.disabled = changes['disabled'].currentValue;
+        if (changes['readonly'])
+            patch.readonly = changes['readonly'].currentValue;
+        if (Object.keys(patch).length > 0)
+            this.editorInstance.configure(patch);
+    }
+    ngOnInit() {
+        if (this.editor && isAIComposer(this.editor)) {
+            this.resolved = this.editor;
+        }
+        else {
+            this.resolved = createAIComposer({ ...(this.options ?? {}) });
+            this.created = true;
+        }
+        this.holder.editor = this.resolved;
+        this.editorInstance.configure({
+            mode: this.mode,
+            placeholder: this.placeholder,
+            disabled: this.disabled,
+            readonly: this.readonly,
+        });
+        this.state.set(this.editorInstance.getState());
+        this.unsubscribe = this.editorInstance.subscribe((next) => {
+            this.state.set(next);
+        });
+        this.editorInstance.on('change', (event) => this.valueChange.emit(event.value));
+        this.editorInstance.on('submit', (event) => this.submitted.emit(event.value));
+    }
+    ngOnDestroy() {
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        if (this.created)
+            this.resolved?.destroy();
+        this.holder.editor = null;
+    }
+    /** Direct access for template code: {{ editor().serialize('text') }} */
+    getEditor() {
+        return this.editorInstance;
+    }
+    // -- ControlValueAccessor ---------------------------------------------------
+    writeValue(value) {
+        if (value === null || value === undefined)
+            return;
+        const document = typeof value === 'string' ? value : coerceDocument(value);
+        this.editorInstance.setValue(document, { source: 'api' });
+    }
+    registerOnChange(fn) {
+        this.editorInstance.on('change', (event) => fn(event.value));
+    }
+    registerOnTouched(fn) {
+        this.editorInstance.on('blur', () => fn());
+    }
+    setDisabledState(isDisabled) {
+        this.editorInstance.setDisabled(isDisabled);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "editor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "options", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "mode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input({ transform: BooleanAttribute }),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "disabled", void 0);
+__decorate([
+    Input({ transform: BooleanAttribute }),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "readonly", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "maxHeight", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "valueChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "submitted", void 0);
+__decorate([
+    ContentChild(AIComposerToolbarDirective),
+    __metadata("design:type", Object)
+], AIComposerComponent.prototype, "customToolbar", void 0);
+AIComposerComponent = __decorate([
+    Component({
+        selector: 'aic-ai-composer',
+        standalone: true,
+        imports: [
+            forwardRef(() => AIComposerInputComponent),
+            forwardRef(() => SubmitButtonComponent),
+        ],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [
+            AiComposerEditorHolder,
+            { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: AIComposerComponent },
+        ],
+        template: `
+    <ng-content select="[aic-header]" />
+    <div class="aic-body" data-aic-slot="body">
+      <ng-content select="[aic-attachments]" />
+      <div class="aic-input-wrap">
+        <aic-ai-composer-input />
+      </div>
+    </div>
+    <ng-content select="[aic-toolbar]" />
+    @if (showDefaultToolbar()) {
+      <div class="aic-toolbar" data-aic-slot="toolbar">
+        <aic-ai-composer-submit />
+      </div>
+    }
+    <ng-content select="[aic-footer]" />
+  `,
+        host: {
+            class: 'aic-root',
+            '[attr.data-aic-mode]': 'state()?.mode ?? mode',
+            '[style.--aic-input-max-height]': "maxHeight === '' ? null : (typeof maxHeight === 'number' ? maxHeight + 'px' : maxHeight)",
+        },
+    }),
+    __param(0, Inject(AiComposerEditorHolder)),
+    __metadata("design:paramtypes", [AiComposerEditorHolder])
+], AIComposerComponent);
+export { AIComposerComponent };
+// Minimal boolean attribute transform (standalone, Angular 16+ compatible)
+function BooleanAttribute(value) {
+    return value === '' || value === true;
+}
+// ---------------------------------------------------------------------------
+// Input surface
+// ---------------------------------------------------------------------------
+let AIComposerInputComponent = class AIComposerInputComponent {
+    elementRef;
+    holder = inject(AiComposerEditorHolder, { optional: true });
+    surface = null;
+    list = null;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        const editor = this.holder?.editor;
+        if (!editor)
+            return;
+        const host = this.elementRef.nativeElement;
+        this.surface = createEditableSurface(editor, host);
+        this.list = createSuggestionList(editor, undefined, { inputHost: host });
+        if (host.parentElement)
+            host.parentElement.appendChild(this.list.element);
+    }
+    ngOnDestroy() {
+        this.list?.destroy();
+        this.surface?.destroy();
+        this.list = null;
+        this.surface = null;
+    }
+};
+AIComposerInputComponent = __decorate([
+    Component({
+        selector: 'aic-ai-composer-input',
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: '',
+        host: { class: 'aic-input-host', 'data-aic-slot': 'input' },
+    }),
+    __metadata("design:paramtypes", [ElementRef])
+], AIComposerInputComponent);
+export { AIComposerInputComponent };
+// ---------------------------------------------------------------------------
+// Default actions
+// ---------------------------------------------------------------------------
+let SubmitButtonComponent = class SubmitButtonComponent {
+    editor = injectAIComposer();
+    state = injectAIComposerState();
+    canSubmit = computed(() => {
+        const state = this.state();
+        if (!state)
+            return false;
+        return !state.disabled && !state.readonly && (!state.empty || state.attachments.length > 0);
+    });
+    submit() {
+        void this.editor.submit();
+    }
+};
+SubmitButtonComponent = __decorate([
+    Component({
+        selector: 'aic-ai-composer-submit',
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `<button
+    type="button"
+    class="aic-toolbar-submit"
+    data-aic-action="submit"
+    aria-label="Send"
+    [disabled]="!canSubmit()"
+    (click)="submit()"
+  >
+    @if (state()?.submitting) {
+      <span class="aic-spinner" aria-hidden="true"></span>
+    } @else {
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 19V5" /><path d="m5 12 7-7 7 7" />
+      </svg>
+    }
+  </button>`,
+    })
+], SubmitButtonComponent);
+export { SubmitButtonComponent };
+/** Convenience import collection. */
+export const AI_COMPOSER_IMPORTS = [
+    AIComposerComponent,
+    AIComposerInputComponent,
+    SubmitButtonComponent,
+    AIComposerHeaderDirective,
+    AIComposerToolbarDirective,
+    AIComposerFooterDirective,
+    AIComposerAttachmentsDirective,
+];
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@ai-composer/angular",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@ai-composer/core": "^0.1.0",
+    "@ai-composer/dom": "^0.1.0",
+    "@angular/core": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@angular/core": "^19.0.0",
+    "rxjs": "^7.8.1",
+    "vitest": "^2.1.8",
+    "jsdom": "^25.0.1",
+    "@ai-composer/core": "0.1.0",
+    "@ai-composer/dom": "0.1.0"
+  }
+}