@magicx-eng/ai-autocomplete-angular 0.1.0

package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs

@@ -0,0 +1,1370 @@
+import * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, inject, ChangeDetectorRef, NgZone, ViewChild, ElementRef, Renderer2, Directive, PLATFORM_ID, forwardRef, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AIAutocomplete, getCursorOffset, extractPlainText, renderEditableContent, plainTextLength, setCursorOffset, ModeController, buildQuery } from '@magicx-eng/ai-autocomplete-vanilla';
+import { map } from 'rxjs/operators';
+import { map as map$1, distinctUntilChanged, shareReplay, BehaviorSubject, Subject, takeUntil } from 'rxjs';
+
+/**
+ * Internal pill list used by both the dropdown and Tier 1's inline pillbar.
+ * Mirrors `packages/react/src/components/PillList.tsx` one-for-one — including
+ * the per-index opacity ramp (0.4 / 0.3 / 0.15) and the skeleton-loading
+ * fallback that preserves layout while the next fetch is in flight.
+ *
+ * @internal
+ */
+class PillListComponent {
+    constructor() {
+        this.pills = [];
+        this.activePillIndex = 0;
+        this.rounded = false;
+        /**
+         * When true, pills become non-interactive shimmering skeletons. Real pills
+         * (with their text) are rendered when provided so widths/positions match
+         * the previous state; with no pills, fixed-width fallback placeholders are
+         * rendered instead.
+         */
+        this.loading = false;
+        this.selectPill = new EventEmitter();
+        /** Fallback widths when loading with zero cached pills (matches React). */
+        this.fallbackSkeletonWidths = [125, 69];
+        this.trackByType = (_, pill) => pill.type;
+        this.trackByWidth = (_, w) => w;
+    }
+    /** Per-index opacity ramp — mirrors PillList.tsx `getPillOpacity`. */
+    pillOpacity(index) {
+        if (index === 0)
+            return 0.4;
+        if (index === 1)
+            return 0.3;
+        return 0.15;
+    }
+    onPillClick(index) {
+        if (this.loading)
+            return;
+        this.selectPill.emit(index);
+    }
+    onPillMouseDown(event) {
+        // Prevent the editor from losing focus when a pill is tapped.
+        event.preventDefault();
+    }
+}
+PillListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PillListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PillListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PillListComponent, isStandalone: true, selector: "aia-pill-list", inputs: { pills: "pills", activePillIndex: "activePillIndex", rounded: "rounded", loading: "loading" }, outputs: { selectPill: "selectPill" }, ngImport: i0, template: "<ng-container *ngIf=\"loading && pills.length === 0; else realPills\">\n  <span class=\"aia-pill-list\" data-aia-pill-list-loading=\"\">\n    <span\n      *ngFor=\"let w of fallbackSkeletonWidths; trackBy: trackByWidth; let i = index\"\n      data-aia-pill-skeleton=\"\"\n      class=\"aia-pill aia-pill-skeleton\"\n      [class.aia-pill-rounded]=\"rounded\"\n      [style.width.px]=\"w\"\n      [style.opacity]=\"pillOpacity(i)\"\n    ></span>\n  </span>\n</ng-container>\n\n<ng-template #realPills>\n  <span\n    class=\"aia-pill-list\"\n    [attr.data-aia-pill-list-loading]=\"loading ? '' : null\"\n  >\n    <button\n      *ngFor=\"let pill of pills; trackBy: trackByType; let i = index\"\n      type=\"button\"\n      data-aia-pill=\"\"\n      [attr.data-aia-loading]=\"loading ? '' : null\"\n      tabindex=\"-1\"\n      class=\"aia-pill\"\n      [class.aia-pill-rounded]=\"rounded\"\n      [class.aia-pill-active]=\"i === activePillIndex && !loading\"\n      [class.aia-pill-skeleton]=\"loading\"\n      [style.opacity]=\"pillOpacity(i)\"\n      [disabled]=\"loading\"\n      (mousedown)=\"onPillMouseDown($event)\"\n      (click)=\"onPillClick(i)\"\n    >\n      {{ pill.text }}\n    </button>\n  </span>\n</ng-template>\n", styles: [".aia-pill-list{position:relative;z-index:1;pointer-events:auto;display:inline-flex;gap:5px;align-items:center;vertical-align:middle}.aia-pill{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:13px;border:none;border-radius:999px;background:rgba(49,50,85,.25);background:color-mix(in srgb,var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 25%,transparent);color:var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));font-family:inherit;font-size:var(--aia-pill-font-size, 19px);line-height:30px;cursor:pointer;white-space:nowrap;animation:aiaPillFadeIn .4s cubic-bezier(.4,0,.2,1) forwards;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px)}.aia-pill-rounded{border-radius:999px}.aia-pill-skeleton{pointer-events:none;cursor:default;color:transparent;animation:aiaPillSkeletonPulse 1.4s ease-in-out infinite}.aia-pill:hover{filter:brightness(1.2)}.aia-pill-active{outline:1px solid #5a5b8a}@keyframes aiaPillFadeIn{0%{opacity:0}}@keyframes aiaPillSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PillListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aia-pill-list", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"loading && pills.length === 0; else realPills\">\n  <span class=\"aia-pill-list\" data-aia-pill-list-loading=\"\">\n    <span\n      *ngFor=\"let w of fallbackSkeletonWidths; trackBy: trackByWidth; let i = index\"\n      data-aia-pill-skeleton=\"\"\n      class=\"aia-pill aia-pill-skeleton\"\n      [class.aia-pill-rounded]=\"rounded\"\n      [style.width.px]=\"w\"\n      [style.opacity]=\"pillOpacity(i)\"\n    ></span>\n  </span>\n</ng-container>\n\n<ng-template #realPills>\n  <span\n    class=\"aia-pill-list\"\n    [attr.data-aia-pill-list-loading]=\"loading ? '' : null\"\n  >\n    <button\n      *ngFor=\"let pill of pills; trackBy: trackByType; let i = index\"\n      type=\"button\"\n      data-aia-pill=\"\"\n      [attr.data-aia-loading]=\"loading ? '' : null\"\n      tabindex=\"-1\"\n      class=\"aia-pill\"\n      [class.aia-pill-rounded]=\"rounded\"\n      [class.aia-pill-active]=\"i === activePillIndex && !loading\"\n      [class.aia-pill-skeleton]=\"loading\"\n      [style.opacity]=\"pillOpacity(i)\"\n      [disabled]=\"loading\"\n      (mousedown)=\"onPillMouseDown($event)\"\n      (click)=\"onPillClick(i)\"\n    >\n      {{ pill.text }}\n    </button>\n  </span>\n</ng-template>\n", styles: [".aia-pill-list{position:relative;z-index:1;pointer-events:auto;display:inline-flex;gap:5px;align-items:center;vertical-align:middle}.aia-pill{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:13px;border:none;border-radius:999px;background:rgba(49,50,85,.25);background:color-mix(in srgb,var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 25%,transparent);color:var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));font-family:inherit;font-size:var(--aia-pill-font-size, 19px);line-height:30px;cursor:pointer;white-space:nowrap;animation:aiaPillFadeIn .4s cubic-bezier(.4,0,.2,1) forwards;box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px)}.aia-pill-rounded{border-radius:999px}.aia-pill-skeleton{pointer-events:none;cursor:default;color:transparent;animation:aiaPillSkeletonPulse 1.4s ease-in-out infinite}.aia-pill:hover{filter:brightness(1.2)}.aia-pill-active{outline:1px solid #5a5b8a}@keyframes aiaPillFadeIn{0%{opacity:0}}@keyframes aiaPillSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
+        }], propDecorators: { pills: [{
+                type: Input
+            }], activePillIndex: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], selectPill: [{
+                type: Output
+            }] } });
+
+/**
+ * Internal single-option cell used inside the suggestion grid. Mirrors
+ * `packages/react/src/components/SuggestionItem.tsx`. Handles:
+ *
+ * - Tappable vs non-tappable cursor + hover styling
+ * - Pressed-state streak animation (500ms, single-flight)
+ * - Keyboard activation (Enter/Space)
+ * - ARIA `role="option"` + `aria-selected` for the listbox pattern
+ * - Loading skeleton when `loading=true`
+ *
+ * @internal
+ */
+class SuggestionItemComponent {
+    constructor() {
+        this.isHighlighted = false;
+        this.id = "";
+        this.loading = false;
+        this.select = new EventEmitter();
+        this.highlight = new EventEmitter();
+        this.pressed = false;
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    ngOnDestroy() {
+        if (this.pressedTimer !== undefined)
+            clearTimeout(this.pressedTimer);
+    }
+    onSelect() {
+        if (this.loading || !this.option.is_tappable || this.pressed)
+            return;
+        this.pressed = true;
+        this.cdr.markForCheck();
+        this.select.emit(this.option);
+        if (this.pressedTimer !== undefined)
+            clearTimeout(this.pressedTimer);
+        this.pressedTimer = setTimeout(() => {
+            this.pressed = false;
+            this.cdr.markForCheck();
+        }, 500);
+    }
+    onMouseEnter() {
+        if (this.loading || !this.option.is_tappable)
+            return;
+        this.highlight.emit();
+    }
+    onKeyDown(event) {
+        if (this.loading || !this.option.is_tappable)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.onSelect();
+        }
+    }
+}
+SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading" }, outputs: { select: "select", highlight: "highlight" }, ngImport: i0, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <div class=\"aia-suggestion-streaks\"></div>\n  <div class=\"aia-suggestion-streaks-vert\"></div>\n  <span class=\"aia-suggestion-content\">\n    <span class=\"aia-suggestion-text\">\n      <ng-container *ngIf=\"option.icon; else noIcon\"\n        >{{ option.icon }} {{ option.text }}</ng-container\n      >\n      <ng-template #noIcon>{{ option.text }}</ng-template>\n    </span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 19px);font-weight:250;line-height:24px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:12px;padding:13px;animation:aiaSuggestionFadeIn .5s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{opacity:.8;color:var(--aia-color-text-default, #fff);background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06);animation:aiaGlassFade .5s ease forwards,aiaTapDown .5s ease forwards}@keyframes aiaTapDown{0%{transform:scale(1)}30%{transform:scale(.97)}to{transform:scale(1)}}@keyframes aiaGlassFade{0%{background:var(--aia-streak-glass-bg, rgba(255, 255, 255, .1))}to{background:transparent}}.aia-suggestion-streaks{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks:before{content:\"\";position:absolute;bottom:-3px;left:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks:after{content:\"\";position:absolute;top:-3px;right:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks-vert:before{content:\"\";position:absolute;bottom:0;right:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert:after{content:\"\";position:absolute;top:0;left:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-item-pressed .aia-suggestion-streaks:before{animation:aiaStreakHorizRight .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks:after{animation:aiaStreakHorizLeft .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:before{animation:aiaStreakVertUp .3s cubic-bezier(.3,0,.2,1) .2s forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:after{animation:aiaStreakVertDown .3s cubic-bezier(.3,0,.2,1) .2s forwards}@keyframes aiaStreakHorizRight{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakHorizLeft{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakVertUp{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}@keyframes aiaStreakVertDown{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .51)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  [id]=\"id\"\n  role=\"option\"\n  data-aia-option=\"\"\n  [attr.data-aia-loading]=\"loading ? '' : null\"\n  [attr.aria-selected]=\"isHighlighted\"\n  class=\"aia-suggestion-item\"\n  [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n  [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n  [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n  [class.aia-suggestion-item-pressed]=\"pressed\"\n  [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n  (click)=\"onSelect()\"\n  (keydown)=\"onKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  <div class=\"aia-suggestion-streaks\"></div>\n  <div class=\"aia-suggestion-streaks-vert\"></div>\n  <span class=\"aia-suggestion-content\">\n    <span class=\"aia-suggestion-text\">\n      <ng-container *ngIf=\"option.icon; else noIcon\"\n        >{{ option.icon }} {{ option.text }}</ng-container\n      >\n      <ng-template #noIcon>{{ option.text }}</ng-template>\n    </span>\n    <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n  </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:visible;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 19px);font-weight:250;line-height:24px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:12px;padding:13px;animation:aiaSuggestionFadeIn .5s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}.aia-suggestion-content{position:relative;z-index:2}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent)}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{opacity:.8;color:var(--aia-color-text-default, #fff);background:rgba(var(--aia-streak-rgb, 255, 255, 255),.06);animation:aiaGlassFade .5s ease forwards,aiaTapDown .5s ease forwards}@keyframes aiaTapDown{0%{transform:scale(1)}30%{transform:scale(.97)}to{transform:scale(1)}}@keyframes aiaGlassFade{0%{background:var(--aia-streak-glass-bg, rgba(255, 255, 255, .1))}to{background:transparent}}.aia-suggestion-streaks{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks:before{content:\"\";position:absolute;bottom:-3px;left:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks:after{content:\"\";position:absolute;top:-3px;right:60%;width:0;height:6px;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.5) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.2) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.2);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}.aia-suggestion-streaks-vert:before{content:\"\";position:absolute;bottom:0;right:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-streaks-vert:after{content:\"\";position:absolute;top:0;left:-3px;width:6px;height:0;opacity:0;background:radial-gradient(ellipse at center,rgba(var(--aia-streak-rgb, 255, 255, 255),.4) 0%,rgba(var(--aia-streak-rgb, 255, 255, 255),.15) 40%,transparent 70%);box-shadow:0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.15);filter:blur(1px);border-radius:50%}.aia-suggestion-item-pressed .aia-suggestion-streaks:before{animation:aiaStreakHorizRight .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks:after{animation:aiaStreakHorizLeft .5s cubic-bezier(.4,0,.2,1) forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:before{animation:aiaStreakVertUp .3s cubic-bezier(.3,0,.2,1) .2s forwards}.aia-suggestion-item-pressed .aia-suggestion-streaks-vert:after{animation:aiaStreakVertDown .3s cubic-bezier(.3,0,.2,1) .2s forwards}@keyframes aiaStreakHorizRight{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakHorizLeft{0%{width:0;height:4px;opacity:0;filter:blur(1px);box-shadow:0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}15%{height:4px;opacity:1;filter:blur(1px);box-shadow:0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255),.3)}80%{width:50%;height:10px;opacity:.8;filter:blur(3px);box-shadow:0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255),.1)}to{width:50%;height:12px;opacity:0;filter:blur(5px);box-shadow:0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.03)}}@keyframes aiaStreakVertUp{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}@keyframes aiaStreakVertDown{0%{height:0;width:6px;opacity:.9;filter:blur(1.8px);box-shadow:0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255),.25)}75%{height:100%;width:10px;opacity:.4;filter:blur(3px);box-shadow:0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255),.06)}to{height:100%;width:14px;opacity:0;filter:blur(5px);box-shadow:0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255),.02)}}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .51)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}\n"] }]
+        }], propDecorators: { option: [{
+                type: Input
+            }], isHighlighted: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], highlight: [{
+                type: Output
+            }] } });
+
+/**
+ * Internal scrollable grid of suggestion options. Mirrors
+ * `packages/react/src/components/SuggestionGrid.tsx` — including the bottom
+ * fade overlay that appears when there's vertical overflow, driven by a
+ * ResizeObserver + scroll listener. ResizeObserver runs outside Angular's
+ * zone (§16.1) so high-frequency layout events don't trip change detection.
+ *
+ * @internal
+ */
+class SuggestionGridComponent {
+    constructor() {
+        this.options = [];
+        this.activeIndex = -1;
+        this.listboxId = "";
+        this.loading = false;
+        this.select = new EventEmitter();
+        this.highlight = new EventEmitter();
+        this.hasBottomOverflow = false;
+        this.zone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
+        this.trackByOptionText = (_, opt) => opt.text;
+    }
+    ngAfterViewInit() {
+        this.bindOverflowTracking();
+        this.measureOverflow();
+    }
+    ngOnChanges() {
+        // Synchronously re-measure when options change — matches React's
+        // useLayoutEffect on [options]. ResizeObserver alone misses this case
+        // because the observed box doesn't grow when the grid hits max-height.
+        queueMicrotask(() => this.measureOverflow());
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        if (this.scrollListener && this.gridRef) {
+            this.gridRef.nativeElement.removeEventListener("scroll", this.scrollListener);
+        }
+    }
+    onSelectItem(option) {
+        this.select.emit(option);
+    }
+    onHighlightItem(index) {
+        this.highlight.emit(index);
+    }
+    bindOverflowTracking() {
+        const grid = this.gridRef?.nativeElement;
+        if (!grid)
+            return;
+        this.zone.runOutsideAngular(() => {
+            this.scrollListener = () => this.measureOverflow();
+            grid.addEventListener("scroll", this.scrollListener, { passive: true });
+            if (typeof ResizeObserver !== "undefined") {
+                this.resizeObserver = new ResizeObserver(() => this.measureOverflow());
+                this.resizeObserver.observe(grid);
+            }
+        });
+    }
+    measureOverflow() {
+        const grid = this.gridRef?.nativeElement;
+        if (!grid)
+            return;
+        const next = grid.scrollHeight - grid.scrollTop - grid.clientHeight > 1;
+        if (next !== this.hasBottomOverflow) {
+            this.zone.run(() => {
+                this.hasBottomOverflow = next;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+}
+SuggestionGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SuggestionGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionGridComponent, isStandalone: true, selector: "aia-suggestion-grid", inputs: { options: "options", activeIndex: "activeIndex", listboxId: "listboxId", loading: "loading" }, outputs: { select: "select", highlight: "highlight" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"aia-suggestion-grid-scroll\"\n  [attr.data-fade]=\"hasBottomOverflow ? '' : null\"\n>\n  <div #grid class=\"aia-suggestion-grid\">\n    <aia-suggestion-item\n      *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n      [option]=\"option\"\n      [isHighlighted]=\"i === activeIndex\"\n      [id]=\"listboxId + '-option-' + i\"\n      [loading]=\"loading\"\n      (select)=\"onSelectItem($event)\"\n      (highlight)=\"onHighlightItem(i)\"\n    >\n    </aia-suggestion-item>\n  </div>\n</div>\n", styles: [".aia-suggestion-grid-scroll{position:relative}.aia-suggestion-grid-scroll:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none;opacity:0;transition:opacity .15s ease-out;backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,transparent,white)}.aia-suggestion-grid-scroll[data-fade]:after{opacity:1}.aia-suggestion-grid{display:grid;grid-template-columns:minmax(0,250px);grid-auto-rows:min-content;align-content:start;max-width:100cqi;padding:8px;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}@container (min-width: 516px){.aia-suggestion-grid{grid-template-columns:repeat(2,minmax(0,250px));justify-content:start}}.aia-suggestion-grid::-webkit-scrollbar{width:6px}.aia-suggestion-grid::-webkit-scrollbar-track{background:transparent}.aia-suggestion-grid::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuggestionItemComponent, selector: "aia-suggestion-item", inputs: ["option", "isHighlighted", "id", "loading"], outputs: ["select", "highlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aia-suggestion-grid", standalone: true, imports: [CommonModule, SuggestionItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"aia-suggestion-grid-scroll\"\n  [attr.data-fade]=\"hasBottomOverflow ? '' : null\"\n>\n  <div #grid class=\"aia-suggestion-grid\">\n    <aia-suggestion-item\n      *ngFor=\"let option of options; trackBy: trackByOptionText; let i = index\"\n      [option]=\"option\"\n      [isHighlighted]=\"i === activeIndex\"\n      [id]=\"listboxId + '-option-' + i\"\n      [loading]=\"loading\"\n      (select)=\"onSelectItem($event)\"\n      (highlight)=\"onHighlightItem(i)\"\n    >\n    </aia-suggestion-item>\n  </div>\n</div>\n", styles: [".aia-suggestion-grid-scroll{position:relative}.aia-suggestion-grid-scroll:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none;opacity:0;transition:opacity .15s ease-out;backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,transparent,white)}.aia-suggestion-grid-scroll[data-fade]:after{opacity:1}.aia-suggestion-grid{display:grid;grid-template-columns:minmax(0,250px);grid-auto-rows:min-content;align-content:start;max-width:100cqi;padding:8px;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3)) transparent}@container (min-width: 516px){.aia-suggestion-grid{grid-template-columns:repeat(2,minmax(0,250px));justify-content:start}}.aia-suggestion-grid::-webkit-scrollbar{width:6px}.aia-suggestion-grid::-webkit-scrollbar-track{background:transparent}.aia-suggestion-grid::-webkit-scrollbar-thumb{background:var(--aia-scrollbar-thumb, rgba(0, 0, 0, .3));border-radius:3px}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], listboxId: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], highlight: [{
+                type: Output
+            }], gridRef: [{
+                type: ViewChild,
+                args: ["grid", { static: false }]
+            }] } });
+
+/**
+ * Tier 2 dropdown component — the Angular equivalent of React's
+ * `<AIAutocompleteDropdown />`. Renders the pillbar, options grid, and
+ * loading skeleton based on the supplied controller's `dropdown$` snapshot.
+ *
+ * ```html
+ * <ai-autocomplete-dropdown [controller]="ac"></ai-autocomplete-dropdown>
+ * ```
+ *
+ * All actions (pill click, option select, option highlight) are forwarded to
+ * the controller. Consumers who need to observe these events can subscribe
+ * to the controller's per-field observables.
+ *
+ * @public
+ */
+class AIAutocompleteDropdownComponent {
+    constructor() {
+        /** Whether to render the pillbar above the options grid. Default: true. */
+        this.showPills = true;
+        /** Fallback skeleton-bar widths used when loading with zero cached options. */
+        this.fallbackSkeletonBarWidths = [159, 119, 164];
+        this.trackByWidth = (_, w) => w;
+    }
+    /**
+     * View-model derived from the controller's `dropdown$`. Adds three booleans
+     * (`showsPills`, `showsOptions`, `showsFallbackSkeleton`, `isVisible`) that
+     * keep template-level logic to a property read per §19.6.
+     */
+    get vm$() {
+        return this.controller.dropdown$.pipe(map((dd) => {
+            const options = dd.suggestions[0]?.options ?? [];
+            const showsPills = this.showPills && (dd.pills.length > 0 || dd.isLoading);
+            const showsOptions = options.length > 0;
+            const showsFallbackSkeleton = dd.isLoading && !showsOptions;
+            const isVisible = dd.isOpen && (showsOptions || showsPills || dd.isLoading);
+            return {
+                pills: dd.pills,
+                options,
+                activeIndex: dd.activeIndex,
+                isLoading: dd.isLoading,
+                showsPills,
+                showsOptions,
+                showsFallbackSkeleton,
+                isVisible,
+            };
+        }));
+    }
+    onPillClick(index) {
+        this.controller.setActivePill(index);
+    }
+    onSelect(option) {
+        this.controller.selectOption(option);
+    }
+    onHighlight(index) {
+        this.controller.setActiveDropdownIndex(index);
+    }
+    preventBlur(event) {
+        // Prevent the editor from losing focus when interacting with the dropdown.
+        event.preventDefault();
+    }
+}
+AIAutocompleteDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AIAutocompleteDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteDropdownComponent, isStandalone: true, selector: "ai-autocomplete-dropdown", inputs: { controller: "controller", showPills: "showPills", className: "className" }, ngImport: i0, template: "<div\n  *ngIf=\"vm$ | async as vm\"\n  [id]=\"controller.listboxId\"\n  role=\"listbox\"\n  data-aia-dropdown=\"\"\n  [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n  class=\"magicx-aia-dropdown\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n  [class]=\"className ? 'magicx-aia-dropdown ' + className : 'magicx-aia-dropdown'\"\n  (mousedown)=\"preventBlur($event)\"\n>\n  <div\n    *ngIf=\"vm.showsPills\"\n    class=\"magicx-aia-dropdown-pillbar\"\n    data-aia-pillbar=\"\"\n  >\n    <aia-pill-list\n      [pills]=\"vm.pills\"\n      [activePillIndex]=\"0\"\n      [rounded]=\"true\"\n      [loading]=\"vm.isLoading\"\n      (selectPill)=\"onPillClick($event)\"\n    ></aia-pill-list>\n  </div>\n\n  <aia-suggestion-grid\n    *ngIf=\"vm.showsOptions\"\n    [options]=\"vm.options\"\n    [activeIndex]=\"vm.activeIndex\"\n    [listboxId]=\"controller.listboxId\"\n    [loading]=\"vm.isLoading\"\n    (select)=\"onSelect($event)\"\n    (highlight)=\"onHighlight($event)\"\n  ></aia-suggestion-grid>\n\n  <div\n    *ngIf=\"vm.showsFallbackSkeleton\"\n    class=\"magicx-aia-dropdown-skeleton-bars\"\n    data-aia-skeleton-bars=\"\"\n  >\n    <span\n      *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n      class=\"magicx-aia-dropdown-skeleton-bar\"\n      [style.width.px]=\"w\"\n    ></span>\n  </div>\n</div>\n", styles: [".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:516px;margin-top:6px;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1);box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px);border-radius:28px}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto}.magicx-aia-dropdown-pillbar{padding:27px 27px 3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-dropdown-pillbar::-webkit-scrollbar{display:none}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:25px}.magicx-aia-dropdown-skeleton-bar{display:block;height:19px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .51)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading"], outputs: ["selectPill"] }, { kind: "component", type: SuggestionGridComponent, selector: "aia-suggestion-grid", inputs: ["options", "activeIndex", "listboxId", "loading"], outputs: ["select", "highlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-autocomplete-dropdown", standalone: true, imports: [CommonModule, PillListComponent, SuggestionGridComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"vm$ | async as vm\"\n  [id]=\"controller.listboxId\"\n  role=\"listbox\"\n  data-aia-dropdown=\"\"\n  [attr.data-aia-loading]=\"vm.isLoading ? '' : null\"\n  class=\"magicx-aia-dropdown\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\n  [class]=\"className ? 'magicx-aia-dropdown ' + className : 'magicx-aia-dropdown'\"\n  (mousedown)=\"preventBlur($event)\"\n>\n  <div\n    *ngIf=\"vm.showsPills\"\n    class=\"magicx-aia-dropdown-pillbar\"\n    data-aia-pillbar=\"\"\n  >\n    <aia-pill-list\n      [pills]=\"vm.pills\"\n      [activePillIndex]=\"0\"\n      [rounded]=\"true\"\n      [loading]=\"vm.isLoading\"\n      (selectPill)=\"onPillClick($event)\"\n    ></aia-pill-list>\n  </div>\n\n  <aia-suggestion-grid\n    *ngIf=\"vm.showsOptions\"\n    [options]=\"vm.options\"\n    [activeIndex]=\"vm.activeIndex\"\n    [listboxId]=\"controller.listboxId\"\n    [loading]=\"vm.isLoading\"\n    (select)=\"onSelect($event)\"\n    (highlight)=\"onHighlight($event)\"\n  ></aia-suggestion-grid>\n\n  <div\n    *ngIf=\"vm.showsFallbackSkeleton\"\n    class=\"magicx-aia-dropdown-skeleton-bars\"\n    data-aia-skeleton-bars=\"\"\n  >\n    <span\n      *ngFor=\"let w of fallbackSkeletonBarWidths; trackBy: trackByWidth\"\n      class=\"magicx-aia-dropdown-skeleton-bar\"\n      [style.width.px]=\"w\"\n    ></span>\n  </div>\n</div>\n", styles: [".magicx-aia-dropdown{position:absolute;left:0;right:0;top:100%;max-width:516px;margin-top:6px;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size;z-index:10;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1);box-shadow:#fff -3.2px -3.2px 3.2px -3.2px inset,#fff 6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,#ffffff26 -1.6px 0 0 -1.6px inset,#ffffff26 0 -1.6px 0 -1.6px inset,#ffffff4d 0 1.6px inset,#ffffff4d 1.6px 0 inset,inset 0 0 30px 5px #0000000d,#00000014 0 0 30px 2px;backdrop-filter:blur(30px);border-radius:28px}.magicx-aia-dropdown-visible{opacity:1;pointer-events:auto}.magicx-aia-dropdown-pillbar{padding:27px 27px 3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent 100%)}.magicx-aia-dropdown-pillbar::-webkit-scrollbar{display:none}.magicx-aia-dropdown-skeleton-bars{display:flex;flex-direction:column;gap:20px;padding:25px}.magicx-aia-dropdown-skeleton-bar{display:block;height:19px;border-radius:999px;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .51)));opacity:.5;animation:aiaDropdownSkeletonPulse 1.4s ease-in-out infinite}.magicx-aia-dropdown-skeleton-bar:nth-child(2){animation-delay:.15s}.magicx-aia-dropdown-skeleton-bar:nth-child(3){animation-delay:.3s}@keyframes aiaDropdownSkeletonPulse{0%,to{opacity:.5}50%{opacity:.25}}\n"] }]
+        }], propDecorators: { controller: [{
+                type: Input
+            }], showPills: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+/**
+ * Per-field observable derivation factory. Enforces the §19.4 invariant:
+ *
+ * - `distinctUntilChanged` — prevents re-emission storms when the upstream
+ *   state object ticks but the field a consumer cares about hasn't changed.
+ *   Without this, every keystroke would re-render every async-pipe binding
+ *   in the consumer's template even when nothing changed for that binding.
+ * - `shareReplay({ bufferSize: 1, refCount: true })` — guarantees that
+ *   multiple subscribers (multiple `async` pipes in a template, e.g.
+ *   `*ngIf="isLoading$ | async"` and `[disabled]="isLoading$ | async"`)
+ *   share a single upstream subscription. `refCount: true` is non-obvious
+ *   but essential: without it, the inner subscription survives after the
+ *   last subscriber unmounts, leaking the chain back to `state$`.
+ *
+ * Every public observable on {@link AIAutocompleteController} must go through
+ * this factory — no exceptions.
+ *
+ * @internal
+ */
+function deriveField(source$, selector, equalityFn) {
+    return source$.pipe(map$1(selector), distinctUntilChanged(equalityFn), shareReplay({ bufferSize: 1, refCount: true }));
+}
+
+/**
+ * Tier 2 logic surface for `@magicx-eng/ai-autocomplete-angular` — the Angular
+ * equivalent of React's `useAIAutocomplete()` hook. Wraps a headless
+ * `@magicx-eng/ai-autocomplete-vanilla` core and exposes its state as RxJS
+ * observables plus thin action methods.
+ *
+ * Per TDB §3.3, the controller is consumer-managed — the consumer creates it
+ * with `new`, holds the reference, and **must call `destroy()`** in their
+ * own `ngOnDestroy`. The Tier 1 `<ai-autocomplete>` component does this
+ * automatically; Tier 2 consumers do not get auto-cleanup.
+ *
+ * @public
+ */
+class AIAutocompleteController {
+    /**
+     * Throws if invoked outside a browser environment. For SSR / Angular
+     * Universal, gate construction with `isPlatformBrowser` — see TDB §16.3.
+     */
+    constructor(opts = {}) {
+        this.isDestroyed = false;
+        if (typeof document === "undefined") {
+            throw new Error("AIAutocompleteController requires a browser environment. " +
+                "For SSR / Angular Universal, gate construction with isPlatformBrowser.");
+        }
+        // Headless mode never renders to the host, so a throwaway div is fine —
+        // it's required by the core's signature for symmetry with full mode.
+        const host = document.createElement("div");
+        this.core = new AIAutocomplete(host, {
+            ...opts,
+            renderMode: "headless",
+            source: opts.source ?? "headless-sdk",
+            // Headless mode never renders the dropdown DOM, but the keyboard
+            // controller still reads `optionsPosition` to decide which vertical
+            // arrow opens the dropdown from the input.
+            optionsPosition: opts.optionsPosition ?? "below",
+        });
+        this.rawState$ = new BehaviorSubject(this.core.getState());
+        this.unsubscribeCore = this.core.subscribe((state) => {
+            if (!this.isDestroyed)
+                this.rawState$.next(state);
+        });
+        // === Per-field observables ===
+        this.text$ = deriveField(this.rawState$, (s) => s.text);
+        this.completedParams$ = deriveField(this.rawState$, (s) => s.completedParams);
+        this.suggestionPills$ = deriveField(this.rawState$, (s) => s.actionableSuggestions);
+        this.segments$ = deriveField(this.rawState$, (s) => s.segments);
+        this.newParamId$ = deriveField(this.rawState$, (s) => s.newParamId);
+        this.suggestions$ = deriveField(this.rawState$, (s) => s.suggestions);
+        this.activeIndex$ = deriveField(this.rawState$, (s) => s.activeDropdownIndex);
+        this.isLoading$ = deriveField(this.rawState$, computeUiLoading);
+        this.isReady$ = deriveField(this.rawState$, (s) => s.isReady);
+        this.isFocused$ = deriveField(this.rawState$, (s) => s.isFocused);
+        this.isDropdownOpen$ = deriveField(this.rawState$, (s) => s.isDropdownOpen);
+        this.placeholderText$ = deriveField(this.rawState$, (s) => s.placeholderText);
+        this.error$ = deriveField(this.rawState$, (s) => s.error);
+        this.editingParam$ = deriveField(this.rawState$, (s) => s.editingParam);
+        this.editingAnchor$ = deriveField(this.rawState$, (s) => s.editingAnchor);
+        this.caretOffset$ = deriveField(this.rawState$, (s) => s.caretOffset);
+        // === Composite observables ===
+        // Project directly off `rawState$` with a single map() so each store
+        // tick produces exactly ONE coherent state$ emission. Using
+        // `combineLatest` over the per-field observables here would fire one
+        // emission per inner-source tick (up to N per store update), and the
+        // editor-host directive's post-promote refocus would run against an
+        // intermediate state where `newParamId` was set but `segments` /
+        // `caretOffset` still held their old values — leaving the caret stuck
+        // at the pre-click position.
+        this.state$ = this.rawState$.pipe(map$1(computeState), shareReplay({ bufferSize: 1, refCount: true }));
+        this.dropdown$ = deriveField(this.rawState$, computeDropdown);
+    }
+    // === Read-only accessors ===
+    /** Stable ARIA listbox ID for the dropdown. Pass to `<textarea aria-controls="...">`. */
+    get listboxId() {
+        return this.core.listboxId;
+    }
+    /** Whether `destroy()` has been called. After destruction all action methods no-op. */
+    get destroyed() {
+        return this.isDestroyed;
+    }
+    /**
+     * Synchronous snapshot of the controller's current public state. Mirrors
+     * the latest emission of `state$`. Useful in callbacks where you can't
+     * `subscribe` (e.g. inside an event handler).
+     */
+    getState() {
+        return computeState(this.rawState$.value);
+    }
+    // === Action methods (pass-through to the core) ===
+    /** Clear all state, rotate `session_id`, and re-fetch. Call after submit. */
+    reset() {
+        this.core.reset();
+    }
+    /** Pick a dropdown option (or replace the re-edited param if in re-edit mode). */
+    selectOption(option) {
+        this.core.selectOption(option);
+    }
+    /** Promote the pill at `index` to active (front of the list). */
+    setActivePill(index) {
+        this.core.setActivePill(index);
+    }
+    /** Drop the last completed param's "completed" status. Text stays as plain text. */
+    removeLastParam() {
+        this.core.removeLastParam();
+    }
+    /** Clear the shimmer animation state for the most-recently-added param. */
+    clearNewParamId() {
+        this.core.clearNewParamId();
+    }
+    /** Controlled-mode setter for editor text. */
+    setValue(text) {
+        this.core.setValue(text);
+    }
+    /** Controlled-mode setter for completed params. */
+    setCompletedParams(params) {
+        this.core.setCompletedParams(params);
+    }
+    /** Forward plain-text input from the consumer's `<textarea>` to the core. */
+    handleTextChange(value) {
+        this.core.handleTextChange(value);
+    }
+    /** Forward keyboard events from the consumer's `<textarea>` to the core. */
+    handleKeyDown(event) {
+        this.core.handleKeyDown(event);
+    }
+    /** Notify the core of focus state. */
+    setFocused(focused) {
+        this.core.setFocused(focused);
+    }
+    /** Enter re-edit mode for the bold param with the given id. */
+    startEditingParam(paramId) {
+        this.core.startEditingParam(paramId);
+    }
+    /** Exit re-edit mode without changing the bold param. */
+    exitEditMode() {
+        this.core.exitEditMode();
+    }
+    /** Forward post-input caret position (extends the edit tail). */
+    handleCaretAfterInput(offset) {
+        this.core.handleCaretAfterInput(offset);
+    }
+    /** Forward selection-only caret moves (may exit re-edit). */
+    handleCaretMove(offset) {
+        this.core.handleCaretMove(offset);
+    }
+    /** Replace the bold param being re-edited. Returns true when applied. */
+    replaceEditingRange(replacement) {
+        return this.core.replaceEditingRange(replacement);
+    }
+    /** Set the highlighted option index (typically driven by hover). */
+    setActiveDropdownIndex(index) {
+        this.core.setActiveDropdownIndex(index);
+    }
+    // === Lifecycle ===
+    /**
+     * Apply runtime changes to a subset of options. Event callbacks
+     * (`onSubmit`, `onError`, etc.) cannot be swapped this way — they are
+     * registered once at construction (matches the React hook's design). For
+     * dynamic event reactivity, subscribe to the corresponding observable
+     * (e.g. `text$` instead of `onChange`).
+     */
+    update(opts) {
+        this.core.update(opts);
+    }
+    /**
+     * Release all resources — unsubscribes from the core, destroys the core,
+     * and completes the internal state subject. Safe to call multiple times.
+     * After destruction, action methods no-op silently.
+     */
+    destroy() {
+        if (this.isDestroyed)
+            return;
+        this.isDestroyed = true;
+        this.unsubscribeCore();
+        this.core.destroy();
+        this.rawState$.complete();
+    }
+}
+// ===== Pure helpers — not part of the public surface =====
+function computeUiLoading(s) {
+    return s.isLoading && !s.editingParam && !s.inSelectionAnimation;
+}
+function computeState(s) {
+    return {
+        text: s.text,
+        completedParams: s.completedParams,
+        suggestionPills: s.actionableSuggestions,
+        segments: s.segments,
+        newParamId: s.newParamId,
+        suggestions: s.suggestions,
+        activeIndex: s.activeDropdownIndex,
+        isLoading: computeUiLoading(s),
+        isReady: s.isReady,
+        isFocused: s.isFocused,
+        isDropdownOpen: s.isDropdownOpen,
+        placeholderText: s.placeholderText,
+        error: s.error,
+        editingParam: s.editingParam,
+        editingAnchor: s.editingAnchor,
+        caretOffset: s.caretOffset,
+    };
+}
+function computeDropdown(s) {
+    const editingParam = s.editingParam;
+    const activeSuggestion = s.actionableSuggestions[0];
+    const dropdownPill = editingParam
+        ? {
+            type: editingParam.suggestionType,
+            text: editingParam.suggestionPlaceholder,
+            required: true,
+            options: editingParam.options,
+        }
+        : null;
+    const dropdownActivePill = dropdownPill ?? activeSuggestion;
+    const dropdownPills = dropdownPill ? [dropdownPill] : s.actionableSuggestions;
+    return {
+        suggestions: dropdownActivePill ? [{ ...dropdownActivePill, options: s.filteredOptions }] : [],
+        activeIndex: s.activeDropdownIndex,
+        isOpen: s.isDropdownOpen,
+        pills: dropdownPills,
+        isLoading: computeUiLoading(s),
+    };
+}
+
+/**
+ * Module-level cache for the one-time plaintext-only feature detection.
+ * Mirrors `supportsPlaintextOnly` in useContentEditableEditor.ts.
+ */
+let plaintextOnlyCache;
+function supportsPlaintextOnly() {
+    if (plaintextOnlyCache !== undefined)
+        return plaintextOnlyCache;
+    if (typeof document === "undefined")
+        return false;
+    const probe = document.createElement("div");
+    probe.setAttribute("contenteditable", "plaintext-only");
+    plaintextOnlyCache = probe.contentEditable === "plaintext-only";
+    return plaintextOnlyCache;
+}
+/**
+ * Internal directive that owns every concern specific to running the
+ * autocomplete on top of a contentEditable host: composition state, caret
+ * tracking, selectionchange handling, `beforeinput` interception, paste
+ * sanitization, plaintext-only feature detection, segment rendering,
+ * post-promote refocus, and re-edit caret park.
+ *
+ * Mirrors `packages/react/src/hooks/useContentEditableEditor.ts` one-for-one.
+ * Used only by the Tier 1 `<ai-autocomplete>` component — never exported.
+ *
+ * @internal
+ */
+class AIAutocompleteEditorHostDirective {
+    constructor() {
+        this.autoFocus = true;
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.destroy$ = new Subject();
+        this.composing = false;
+        this.lastInputAt = 0;
+        this.lastSeenParamId = "";
+        this.lastEditingId = "";
+        this.editingParamId = null;
+    }
+    ngOnInit() {
+        if (!this.controller) {
+            throw new Error("[aiaEditorHost] requires a controller");
+        }
+        const el = this.el.nativeElement;
+        const ceMode = supportsPlaintextOnly() ? "plaintext-only" : "true";
+        this.renderer.setAttribute(el, "contenteditable", ceMode);
+        this.renderer.setAttribute(el, "aria-controls", this.controller.listboxId);
+        this.renderer.setAttribute(el, "suppress-content-editable-warning", "true");
+        // Auto-focus on mount. If the editor already has focus (e.g. from a
+        // click that fired before our lifecycle ran), notify the controller
+        // instead of stealing focus.
+        if (this.autoFocus) {
+            queueMicrotask(() => {
+                if (typeof document === "undefined")
+                    return;
+                if (document.activeElement === el) {
+                    this.controller.setFocused(true);
+                }
+                else {
+                    el.focus();
+                }
+            });
+        }
+        this.bindDocumentSelectionListener();
+        this.bindBeforeInputListener();
+        this.bindStateSubscription();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.documentSelectionListener && typeof document !== "undefined") {
+            document.removeEventListener("selectionchange", this.documentSelectionListener);
+        }
+        if (this.beforeInputListener) {
+            this.el.nativeElement.removeEventListener("beforeinput", this.beforeInputListener);
+        }
+    }
+    // === Host event handlers ===
+    onCompositionStart() {
+        this.composing = true;
+    }
+    onCompositionEnd() {
+        this.composing = false;
+        this.fireInput();
+    }
+    onInput() {
+        this.lastInputAt = performance.now();
+        this.fireInput();
+        this.controller.handleCaretAfterInput(getCursorOffset(this.el.nativeElement));
+    }
+    onKeyDown(event) {
+        this.controller.handleKeyDown(event);
+    }
+    onPaste(event) {
+        event.preventDefault();
+        const el = this.el.nativeElement;
+        const text = (event.clipboardData?.getData("text/plain") ?? "").replace(/\r?\n/g, " ");
+        if (!text)
+            return;
+        const doc = el.ownerDocument ?? document;
+        const sel = doc.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (!el.contains(range.startContainer))
+            return;
+        range.deleteContents();
+        const node = doc.createTextNode(text);
+        range.insertNode(node);
+        range.setStartAfter(node);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this.fireInput();
+    }
+    onFocus() {
+        this.controller.setFocused(true);
+    }
+    onBlur() {
+        this.controller.setFocused(false);
+    }
+    // === Internal helpers ===
+    fireInput() {
+        if (this.composing)
+            return;
+        const el = this.el.nativeElement;
+        const raw = extractPlainText(el);
+        const shouldCapitalize = raw.length > 0 && raw[0] !== raw[0].toUpperCase();
+        const next = shouldCapitalize ? raw[0].toUpperCase() + raw.slice(1) : raw;
+        this.controller.handleTextChange(next);
+    }
+    bindDocumentSelectionListener() {
+        if (typeof document === "undefined")
+            return;
+        const el = this.el.nativeElement;
+        // selectionchange fires on every keystroke and caret move — run outside
+        // Angular's zone (§16.1) and re-enter only when we actually need to
+        // notify the controller of a meaningful change.
+        this.zone.runOutsideAngular(() => {
+            const handler = () => {
+                const sel = document.getSelection();
+                if (!sel || sel.rangeCount === 0)
+                    return;
+                if (!sel.anchorNode || !el.contains(sel.anchorNode))
+                    return;
+                const anchor = sel.anchorNode;
+                const startEl = anchor.nodeType === Node.ELEMENT_NODE ? anchor : anchor.parentElement;
+                const strong = startEl?.closest('strong[data-seg="completed"][data-param-id]');
+                const enclosing = strong?.dataset.paramId ?? null;
+                if (enclosing && enclosing !== this.editingParamId) {
+                    this.zone.run(() => this.controller.startEditingParam(enclosing));
+                    return;
+                }
+                if (performance.now() - this.lastInputAt < 50)
+                    return;
+                this.zone.run(() => this.controller.handleCaretMove(getCursorOffset(el)));
+            };
+            this.documentSelectionListener = handler;
+            document.addEventListener("selectionchange", handler);
+        });
+    }
+    bindBeforeInputListener() {
+        const el = this.el.nativeElement;
+        // Native beforeinput — React's synthetic onBeforeInput is wired to the
+        // legacy textInput event and doesn't fire reliably for delete* types.
+        const handler = (event) => {
+            const inputEvent = event;
+            const t = inputEvent.inputType;
+            if (t === "insertParagraph" || t === "insertLineBreak" || t === "insertFromDrop") {
+                event.preventDefault();
+                return;
+            }
+            if (t.startsWith("insert") || t.startsWith("delete")) {
+                const replacement = t.startsWith("delete") ? "" : (inputEvent.data ?? "");
+                if (this.controller.replaceEditingRange(replacement)) {
+                    event.preventDefault();
+                }
+            }
+        };
+        this.beforeInputListener = handler;
+        el.addEventListener("beforeinput", handler);
+    }
+    bindStateSubscription() {
+        const el = this.el.nativeElement;
+        this.controller.state$.pipe(takeUntil(this.destroy$)).subscribe((state) => {
+            this.editingParamId = state.editingParam?.id ?? null;
+            renderEditableContent({
+                input: el,
+                segments: state.segments,
+                newParamId: state.newParamId,
+                editingParamId: state.editingParam?.id ?? null,
+                placeholderText: state.placeholderText,
+                isFocused: state.isFocused,
+            });
+            // Post-promote refocus + caret-after-bold placement (mirrors React's
+            // useLayoutEffect on newParamId).
+            const currentParamId = state.newParamId ?? "";
+            if (currentParamId && currentParamId !== this.lastSeenParamId) {
+                this.lastSeenParamId = currentParamId;
+                el.focus();
+                const desired = state.caretOffset ?? plainTextLength(el);
+                setCursorOffset(el, desired);
+            }
+            else if (!currentParamId) {
+                this.lastSeenParamId = "";
+            }
+            // Re-edit caret park (mirrors React's useLayoutEffect on editingParam).
+            const editingId = state.editingParam?.id ?? "";
+            if (editingId && editingId !== this.lastEditingId && state.editingAnchor != null) {
+                this.lastEditingId = editingId;
+                setCursorOffset(el, state.editingAnchor);
+            }
+            else if (!editingId) {
+                this.lastEditingId = "";
+            }
+        });
+    }
+}
+AIAutocompleteEditorHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteEditorHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AIAutocompleteEditorHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteEditorHostDirective, isStandalone: true, selector: "[aiaEditorHost]", inputs: { controller: ["aiaEditorHost", "controller"], autoFocus: "autoFocus" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "spellcheck": "true", "enterkeyhint": "send", "tabindex": "0" }, listeners: { "input": "onInput()", "keydown": "onKeyDown($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "paste": "onPaste($event)", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteEditorHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[aiaEditorHost]",
+                    standalone: true,
+                    host: {
+                        role: "combobox",
+                        "aria-autocomplete": "list",
+                        "aria-haspopup": "listbox",
+                        spellcheck: "true",
+                        enterkeyhint: "send",
+                        tabindex: "0",
+                        "(input)": "onInput()",
+                        "(keydown)": "onKeyDown($event)",
+                        "(compositionstart)": "onCompositionStart()",
+                        "(compositionend)": "onCompositionEnd()",
+                        "(paste)": "onPaste($event)",
+                        "(focus)": "onFocus()",
+                        "(blur)": "onBlur()",
+                    },
+                }]
+        }], propDecorators: { controller: [{
+                type: Input,
+                args: ["aiaEditorHost"]
+            }], autoFocus: [{
+                type: Input
+            }] } });
+
+function resolveInitialMode(mode) {
+    if (mode !== "auto")
+        return mode;
+    if (typeof window === "undefined")
+        return "dark";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+/**
+ * Tier 1 component — `<ai-autocomplete>`. The Angular equivalent of React's
+ * `<AIAutocomplete />`. Owns the contentEditable editor, inline pills, mode
+ * controller, submit button slot, and an embedded
+ * {@link AIAutocompleteController} that drives the dropdown.
+ *
+ * @public
+ */
+class AIAutocompleteComponent {
+    constructor() {
+        this.maskCompletedText = false;
+        /** Where unfilled pills render. Default: "inline". */
+        this.pillPlacement = "inline";
+        /** Color mode. "auto" follows prefers-color-scheme. Default: "auto". */
+        this.mode = "auto";
+        this.optionsPosition = "below";
+        this.animations = true;
+        /** Focus the editor on mount. Default: true. */
+        this.autoFocus = true;
+        // === Outputs ===
+        /** Called on Enter or submit-button click. */
+        this.submitted = new EventEmitter();
+        this.errored = new EventEmitter();
+        this.valueChange = new EventEmitter();
+        this.completedParamsChange = new EventEmitter();
+        this.focused = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this.resolvedMode = "dark";
+        this.onChangeFn = noop$1;
+        this.onTouchedFn = noop$1;
+        // §16.9: prefer `inject()` over constructor-parameter DI for components.
+        this.platformId = inject(PLATFORM_ID);
+        this.el = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.zone = inject(NgZone);
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.resolvedMode = resolveInitialMode(this.mode);
+        this.controller = new AIAutocompleteController({
+            apiConfig: this.apiConfig,
+            optionOverrides: this.optionOverrides,
+            maskCompletedText: this.maskCompletedText,
+            columns: this.columns,
+            dropdownTrigger: this.dropdownTrigger,
+            optionsPosition: this.optionsPosition,
+            closeDropdownOnBlur: this.closeDropdownOnBlur,
+            showNonTappableOptions: this.showNonTappableOptions,
+            source: "full-sdk",
+            value: this.value,
+            completedParams: this.completedParams,
+            onSubmit: (result) => this.handleSubmit(result),
+            onError: (error) => this.errored.emit(error),
+            onChange: (text) => {
+                this.valueChange.emit(text);
+                this.onChangeFn(text);
+            },
+            onParamsChange: (params) => this.completedParamsChange.emit(params),
+            onFocus: () => this.focused.emit(),
+            onBlur: () => {
+                this.blurred.emit();
+                this.onTouchedFn();
+            },
+            setCursor: (offset) => {
+                const editor = this.editorRef?.nativeElement;
+                if (!editor)
+                    return;
+                editor.focus();
+                setCursorOffset(editor, offset);
+            },
+        });
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const container = this.el.nativeElement;
+        this.modeController = new ModeController(container, this.mode);
+        // Pill-wrap detection — when the pill list wraps below the editor's last
+        // line, drop its 8px left margin via a data attribute the CSS keys off.
+        // Mirrors the React component's useLayoutEffect.
+        if (typeof ResizeObserver !== "undefined") {
+            this.zone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(() => this.measurePillWrap());
+                const editor = this.editorRef?.nativeElement;
+                if (editor)
+                    this.resizeObserver.observe(editor);
+            });
+            this.measurePillWrap();
+        }
+    }
+    ngOnChanges(changes) {
+        if (!this.controller)
+            return;
+        // Controlled-mode propagation
+        if (changes.value && this.value !== undefined) {
+            this.controller.setValue(this.value);
+        }
+        if (changes.completedParams && this.completedParams !== undefined) {
+            this.controller.setCompletedParams(this.completedParams);
+        }
+        // Reactive options
+        if (changes.apiConfig ||
+            changes.optionOverrides ||
+            changes.dropdownTrigger ||
+            changes.optionsPosition ||
+            changes.closeDropdownOnBlur ||
+            changes.showNonTappableOptions) {
+            this.controller.update({
+                apiConfig: this.apiConfig,
+                optionOverrides: this.optionOverrides,
+                dropdownTrigger: this.dropdownTrigger,
+                optionsPosition: this.optionsPosition,
+                closeDropdownOnBlur: this.closeDropdownOnBlur,
+                showNonTappableOptions: this.showNonTappableOptions,
+            });
+        }
+        if (changes.mode) {
+            this.modeController?.setMode(this.mode);
+            this.resolvedMode = resolveInitialMode(this.mode);
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.modeController?.destroy();
+        this.controller?.destroy();
+    }
+    // === Imperative API (exposed on the component instance via @ViewChild) ===
+    /** Programmatically focus the editor. */
+    focus() {
+        this.editorRef?.nativeElement.focus();
+    }
+    /** Programmatically blur the editor. */
+    blur() {
+        this.editorRef?.nativeElement.blur();
+    }
+    /** Clear all state, rotate session, and re-fetch. */
+    reset() {
+        this.controller?.reset();
+    }
+    /** Switch color mode at runtime. */
+    setMode(mode) {
+        this.mode = mode;
+        this.modeController?.setMode(mode);
+        this.resolvedMode = resolveInitialMode(mode);
+        this.cdr.markForCheck();
+    }
+    // === Template helpers ===
+    /**
+     * 'default' → render the built-in arrow button.
+     * 'custom'  → project the consumer-supplied TemplateRef.
+     * 'hidden'  → no button.
+     */
+    get submitButtonState() {
+        if (this.submitButton === null)
+            return "hidden";
+        if (this.submitButton === undefined)
+            return "default";
+        return "custom";
+    }
+    /** Narrowed accessor for *ngTemplateOutlet — never undefined. */
+    get customSubmitTemplate() {
+        return this.submitButton ?? null;
+    }
+    get showInlinePills() {
+        return this.pillPlacement === "inline";
+    }
+    get showDropdownPills() {
+        return this.pillPlacement === "dropdown";
+    }
+    /**
+     * `true` when there's something to submit — driven by current segments
+     * and completed params. Read off the live editor via the controller state.
+     */
+    canSubmit(state) {
+        return state.segments.length > 0 || state.completedParams.length > 0;
+    }
+    onWrapperClick(event) {
+        // Clicking a pill should activate it without stealing focus elsewhere.
+        const target = event.target;
+        if (target?.closest("[data-aia-pill]"))
+            return;
+        this.focus();
+    }
+    onSubmitButtonClick(event) {
+        event.stopPropagation();
+        this.handleSubmitFromUserAction();
+    }
+    onSubmitSlotClick(event) {
+        event.stopPropagation();
+        this.handleSubmitFromUserAction();
+    }
+    onSelectPill(index) {
+        this.controller.setActivePill(index);
+    }
+    // === ControlValueAccessor ===
+    writeValue(value) {
+        if (!this.controller)
+            return;
+        this.controller.setValue(value ?? "");
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(_disabled) {
+        // The contentEditable host doesn't have a native disabled attribute. For
+        // v0.1 we accept the call so Angular's forms layer doesn't throw, but
+        // the editor stays interactive. A future enhancement can toggle
+        // contentEditable + ARIA disabled here.
+    }
+    // === Submit flow ===
+    /**
+     * Called by the controller's onSubmit callback (which fires from the
+     * keyboard controller on Enter). Reads the live editor text — same trick
+     * the React component uses — so the emitted query reflects whatever's in
+     * the DOM right now, not a possibly-stale state snapshot.
+     */
+    handleSubmit(_result) {
+        const editor = this.editorRef?.nativeElement;
+        if (!editor)
+            return;
+        const text = extractPlainText(editor);
+        const params = this.completedParams ?? this.controller.getState().completedParams;
+        const built = buildQuery(text, params);
+        this.submitted.emit({
+            query: text.trim(),
+            raw_query: built.rawQuery,
+            completed_params: built.completedParams,
+        });
+        this.controller.reset();
+    }
+    handleSubmitFromUserAction() {
+        const state = this.controller.getState();
+        if (!this.canSubmit(state))
+            return;
+        // Synthesize the result for the submit-button click path; same shape
+        // the controller would deliver from a keyboard Enter, so handleSubmit
+        // can take either entry point.
+        this.handleSubmit({
+            query: state.text.trim(),
+            raw_query: "",
+            completed_params: [],
+        });
+    }
+    measurePillWrap() {
+        const container = this.pillContainerRef?.nativeElement;
+        const editor = this.editorRef?.nativeElement;
+        if (!container || !editor)
+            return;
+        const inner = container.firstElementChild;
+        if (!inner)
+            return;
+        // Wrap detection: the pill row's top vs the editor's bottom. When the
+        // pills sit on (or above) the editor's last line they're NOT wrapped —
+        // keep the 8px margin so they don't butt against typed text or the
+        // placeholder. This handles the empty-editor + placeholder case
+        // naturally: the placeholder still occupies the editor's line box.
+        const cRect = inner.getBoundingClientRect();
+        const eRect = editor.getBoundingClientRect();
+        const wrapped = cRect.top >= eRect.bottom - 2;
+        this.zone.run(() => {
+            if (wrapped)
+                container.setAttribute("data-aia-pill-wrapped", "");
+            else
+                container.removeAttribute("data-aia-pill-wrapped");
+        });
+    }
+}
+AIAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteComponent, isStandalone: true, selector: "ai-autocomplete", inputs: { apiConfig: "apiConfig", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", submitButton: "submitButton" }, outputs: { submitted: "submitted", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            useExisting: forwardRef(() => AIAutocompleteComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "pillContainerRef", first: true, predicate: ["pillContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <button\n        *ngSwitchCase=\"'default'\"\n        type=\"button\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-button\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        aria-label=\"Submit\"\n        (click)=\"onSubmitButtonClick($event)\"\n      >\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          role=\"img\"\n          aria-label=\"Submit\"\n        >\n          <path\n            d=\"M9 14V4M9 4L4 9M9 4L14 9\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-pill-bg: #bdbdbd;--aia-pill-color: #000000;--aia-pill-font-size: 19px;--aia-option-bg: transparent;--aia-option-color: #4f4f4f;--aia-option-color-selected: #000000;--aia-option-font-size: 19px;--aia-written-text-color: #000000;--aia-written-text-font-size: 19px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .51);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-pill-bg: #bdbdbd;--aia-pill-color: #ffffff;--aia-pill-font-size: 19px;--aia-option-bg: transparent;--aia-option-color: #b0b0b0;--aia-option-color-selected: #ffffff;--aia-option-font-size: 19px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 19px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #333539;--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{top:auto;bottom:100%;margin-top:0;margin-bottom:6px;flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-pillbar]{padding:0 27px 27px}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:20px;border:1px solid var(--aia-color-border-default, #9ea5b2);border-radius:23px;background:transparent;overflow:hidden;display:flex;align-items:center;gap:4px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:26.6px;line-height:26.6px;font-family:inherit;font-size:var(--aia-written-text-font-size, 19px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:250;vertical-align:middle}:where(.magicx-aia-input) strong{font-weight:500;letter-spacing:-.01em}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background-color:color-mix(in srgb,var(--aia-edit-outline, currentColor) 20%,transparent);border-radius:6px;padding:2px 3px;margin:0 -1.5px;caret-color:transparent}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-button{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:var(--aia-submit-bg, var(--aia-color-text-default, #fff));color:var(--aia-submit-color, var(--aia-color-bg-default, #000));cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .2s ease}.magicx-aia-submit-button:hover{opacity:.85}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-revealed]{color:transparent;background:linear-gradient(120deg,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 0%,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 44%,#b0b0b0 48%,#b0b0b0 52%,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 56%,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaTextShimmer .65s ease-out forwards}@keyframes aiaTextShimmer{0%{background-position:100% 0}to{background-position:-50% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: AIAutocompleteDropdownComponent, selector: "ai-autocomplete-dropdown", inputs: ["controller", "showPills", "className"] }, { kind: "directive", type: AIAutocompleteEditorHostDirective, selector: "[aiaEditorHost]", inputs: ["aiaEditorHost", "autoFocus"] }, { kind: "component", type: PillListComponent, selector: "aia-pill-list", inputs: ["pills", "activePillIndex", "rounded", "loading"], outputs: ["selectPill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-autocomplete", standalone: true, imports: [
+                        CommonModule,
+                        AIAutocompleteDropdownComponent,
+                        AIAutocompleteEditorHostDirective,
+                        PillListComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                            useExisting: forwardRef(() => AIAutocompleteComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <button\n        *ngSwitchCase=\"'default'\"\n        type=\"button\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-button\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        aria-label=\"Submit\"\n        (click)=\"onSubmitButtonClick($event)\"\n      >\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          role=\"img\"\n          aria-label=\"Submit\"\n        >\n          <path\n            d=\"M9 14V4M9 4L4 9M9 4L14 9\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-pill-bg: #bdbdbd;--aia-pill-color: #000000;--aia-pill-font-size: 19px;--aia-option-bg: transparent;--aia-option-color: #4f4f4f;--aia-option-color-selected: #000000;--aia-option-font-size: 19px;--aia-written-text-color: #000000;--aia-written-text-font-size: 19px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .51);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-pill-bg: #bdbdbd;--aia-pill-color: #ffffff;--aia-pill-font-size: 19px;--aia-option-bg: transparent;--aia-option-color: #b0b0b0;--aia-option-color-selected: #ffffff;--aia-option-font-size: 19px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 19px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #333539;--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{top:auto;bottom:100%;margin-top:0;margin-bottom:6px;flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-pillbar]{padding:0 27px 27px}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:20px;border:1px solid var(--aia-color-border-default, #9ea5b2);border-radius:23px;background:transparent;overflow:hidden;display:flex;align-items:center;gap:4px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:26.6px;line-height:26.6px;font-family:inherit;font-size:var(--aia-written-text-font-size, 19px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:250;vertical-align:middle}:where(.magicx-aia-input) strong{font-weight:500;letter-spacing:-.01em}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background-color:color-mix(in srgb,var(--aia-edit-outline, currentColor) 20%,transparent);border-radius:6px;padding:2px 3px;margin:0 -1.5px;caret-color:transparent}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-button{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:var(--aia-submit-bg, var(--aia-color-text-default, #fff));color:var(--aia-submit-color, var(--aia-color-bg-default, #000));cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .2s ease}.magicx-aia-submit-button:hover{opacity:.85}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-revealed]{color:transparent;background:linear-gradient(120deg,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 0%,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 44%,#b0b0b0 48%,#b0b0b0 52%,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 56%,var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaTextShimmer .65s ease-out forwards}@keyframes aiaTextShimmer{0%{background-position:100% 0}to{background-position:-50% 0}}\n"] }]
+        }], propDecorators: { apiConfig: [{
+                type: Input
+            }], optionOverrides: [{
+                type: Input
+            }], maskCompletedText: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], pillPlacement: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], optionsPosition: [{
+                type: Input
+            }], animations: [{
+                type: Input
+            }], dropdownTrigger: [{
+                type: Input
+            }], closeDropdownOnBlur: [{
+                type: Input
+            }], showNonTappableOptions: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], completedParams: [{
+                type: Input
+            }], submitButton: [{
+                type: Input
+            }], submitted: [{
+                type: Output
+            }], errored: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], completedParamsChange: [{
+                type: Output
+            }], focused: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }], editorRef: [{
+                type: ViewChild,
+                args: ["editor", { static: false }]
+            }], pillContainerRef: [{
+                type: ViewChild,
+                args: ["pillContainer"]
+            }] } });
+function noop$1() {
+    // Default no-op for CVA callbacks.
+}
+
+/**
+ * Tier 2 input binder. Attach to a `<textarea>` or `<input>` and pass an
+ * {@link AIAutocompleteController}:
+ *
+ * ```html
+ * <textarea [aiaInput]="ac"></textarea>
+ * ```
+ *
+ * The directive wires the input's events (input/keydown/focus/blur) to the
+ * controller, mirrors controller state into ARIA attributes
+ * (`role="combobox"`, `aria-expanded`, `aria-activedescendant`,
+ * `aria-autocomplete`, `aria-controls`), and implements
+ * {@link ControlValueAccessor} so the host element participates in Reactive
+ * Forms out of the box:
+ *
+ * ```html
+ * <textarea [aiaInput]="ac" [formControl]="myControl"></textarea>
+ * ```
+ *
+ * Per the React hook's behavior, the first typed character is auto-capitalized
+ * — typing "h" becomes "H" before being forwarded to the controller. The
+ * cursor position is preserved across that rewrite.
+ *
+ * @public
+ */
+class AIAutocompleteInputDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.destroy$ = new Subject();
+        this.onChangeFn = noop;
+        this.onTouchedFn = noop;
+    }
+    ngOnInit() {
+        if (!this.controller) {
+            throw new Error('[aiaInput] requires a controller — use `[aiaInput]="myController"`.');
+        }
+        const el = this.el.nativeElement;
+        this.renderer.setAttribute(el, "aria-controls", this.controller.listboxId);
+        // Sync editor text → DOM. Skips the write when values already match, so
+        // user keystrokes don't fight with our writeback. Preserves the caret
+        // position when we do write (and the element still has focus).
+        this.controller.text$.pipe(takeUntil(this.destroy$)).subscribe((text) => {
+            if (el.value === text)
+                return;
+            const wasFocused = typeof document !== "undefined" && document.activeElement === el;
+            const start = el.selectionStart;
+            const end = el.selectionEnd;
+            this.renderer.setProperty(el, "value", text);
+            if (wasFocused && start != null && end != null) {
+                const clampedStart = Math.min(start, text.length);
+                const clampedEnd = Math.min(end, text.length);
+                try {
+                    el.setSelectionRange(clampedStart, clampedEnd);
+                }
+                catch {
+                    // `setSelectionRange` throws on some input types (e.g. "number");
+                    // safe to ignore — those inputs don't have a meaningful selection.
+                }
+            }
+        });
+        this.controller.isDropdownOpen$.pipe(takeUntil(this.destroy$)).subscribe((isOpen) => {
+            this.renderer.setAttribute(el, "aria-expanded", String(isOpen));
+        });
+        this.controller.activeIndex$.pipe(takeUntil(this.destroy$)).subscribe((idx) => {
+            if (idx >= 0) {
+                this.renderer.setAttribute(el, "aria-activedescendant", `${this.controller.listboxId}-option-${idx}`);
+            }
+            else {
+                this.renderer.removeAttribute(el, "aria-activedescendant");
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // === Event handlers (wired via host metadata above) ===
+    /**
+     * Auto-capitalizes the first character on the user's first keystroke so the
+     * server receives "Create" instead of "create". Matches React's
+     * `handleChange` in `useAIAutocomplete`. Skipped during IME composition so
+     * we don't disrupt multi-keystroke input methods (Pinyin, Hangul, etc.).
+     */
+    onInput(event) {
+        const target = event.target;
+        const raw = target.value;
+        const isComposing = event.isComposing === true;
+        const shouldCapitalize = raw.length > 0 && !isComposing && raw[0] !== raw[0].toUpperCase();
+        let next = raw;
+        if (shouldCapitalize) {
+            const start = target.selectionStart;
+            const end = target.selectionEnd;
+            next = raw[0].toUpperCase() + raw.slice(1);
+            this.renderer.setProperty(target, "value", next);
+            if (start != null && end != null) {
+                try {
+                    target.setSelectionRange(start, end);
+                }
+                catch {
+                    // See note in ngOnInit's text$ subscriber.
+                }
+            }
+        }
+        this.controller.handleTextChange(next);
+        this.onChangeFn(next);
+    }
+    onKeyDown(event) {
+        this.controller.handleKeyDown(event);
+    }
+    onFocus() {
+        this.controller.setFocused(true);
+    }
+    onBlur() {
+        this.controller.setFocused(false);
+        this.onTouchedFn();
+    }
+    // === ControlValueAccessor ===
+    writeValue(value) {
+        const next = value ?? "";
+        this.renderer.setProperty(this.el.nativeElement, "value", next);
+        // The controller may be undefined transiently if Angular calls
+        // writeValue() before ngOnInit (rare but possible during dynamic form
+        // construction). Guard so we don't throw in that window.
+        if (this.controller)
+            this.controller.setValue(next);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(disabled) {
+        this.renderer.setProperty(this.el.nativeElement, "disabled", disabled);
+    }
+}
+AIAutocompleteInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AIAutocompleteInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteInputDirective, isStandalone: true, selector: "[aiaInput]", inputs: { controller: ["aiaInput", "controller"] }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list" }, listeners: { "input": "onInput($event)", "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            useExisting: forwardRef(() => AIAutocompleteInputDirective),
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[aiaInput]",
+                    standalone: true,
+                    host: {
+                        role: "combobox",
+                        "aria-autocomplete": "list",
+                        "(input)": "onInput($event)",
+                        "(keydown)": "onKeyDown($event)",
+                        "(focus)": "onFocus()",
+                        "(blur)": "onBlur()",
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                            useExisting: forwardRef(() => AIAutocompleteInputDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { controller: [{
+                type: Input,
+                args: ["aiaInput"]
+            }] } });
+function noop() {
+    // Default no-op callback for CVA — overwritten by Angular's form bridge.
+}
+
+/**
+ * Convenience NgModule that re-exports every public component and directive
+ * in this package. Standalone-first consumers can import the individual
+ * symbols directly; legacy NgModule-based codebases import this once and
+ * get everything.
+ *
+ * @public
+ */
+class AIAutocompleteModule {
+}
+AIAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AIAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteModule, imports: [AIAutocompleteComponent, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective], exports: [AIAutocompleteComponent, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective] });
+AIAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteModule, imports: [AIAutocompleteComponent, AIAutocompleteDropdownComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AIAutocompleteComponent, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective],
+                    exports: [AIAutocompleteComponent, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective],
+                }]
+        }] });
+
+/**
+ * Public API surface for @magicx-eng/ai-autocomplete-angular.
+ *
+ * Populated incrementally as features land — see TDB.md §6.6 for the full
+ * planned export list. Only symbols re-exported here are considered part of
+ * the package's public contract (TDB §19.2).
+ */
+// === Tier 1: Full component ===
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AIAutocompleteComponent, AIAutocompleteController, AIAutocompleteDropdownComponent, AIAutocompleteInputDirective, AIAutocompleteModule };
+//# sourceMappingURL=magicx-eng-ai-autocomplete-angular.mjs.map