@magicx-eng/ai-autocomplete-angular 0.1.0 → 0.2.0

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

@@ -4,8 +4,8 @@ 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 { BehaviorSubject, combineLatest, map as map$1, distinctUntilChanged, shareReplay, Subject, takeUntil } from 'rxjs';
 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.
@@ -253,17 +253,37 @@ class AIAutocompleteDropdownComponent {
         this.showPills = true;
         /** Fallback skeleton-bar widths used when loading with zero cached options. */
         this.fallbackSkeletonBarWidths = [159, 119, 164];
+        // Bridge for the @Input `showPills` into the reactive pipeline. Without this,
+        // changing the input after init wouldn't trigger a new vm emission until the
+        // next controller.dropdown$ tick — and we'd lose the showPills update entirely
+        // if the controller is idle. Updated from ngOnChanges below.
+        this.showPills$ = new BehaviorSubject(true);
         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) => {
+    ngOnInit() {
+        // Seed showPills$ from the input's resolved value at init time.
+        this.showPills$.next(this.showPills);
+        this.initVm();
+    }
+    ngOnChanges(changes) {
+        if (changes["showPills"]) {
+            this.showPills$.next(this.showPills);
+        }
+        // Re-bind vm$ when the controller @Input is swapped (e.g. a multi-step form
+        // toggling between controllers). Without this, vm$ stays subscribed to the
+        // previous controller's dropdown$ — rendering stale options, or, if that
+        // controller was destroy()-ed, receiving a completion that collapses the
+        // dropdown permanently. Skip the first change: ngOnChanges fires before
+        // ngOnInit, which owns the initial creation.
+        if (changes["controller"] && !changes["controller"].firstChange && this.controller) {
+            this.initVm();
+        }
+    }
+    /** Build the view-model stream from the current controller + showPills$. */
+    initVm() {
+        this.vm$ = combineLatest([this.controller.dropdown$, this.showPills$]).pipe(map(([dd, showPills]) => {
             const options = dd.suggestions[0]?.options ?? [];
-            const showsPills = this.showPills && (dd.pills.length > 0 || dd.isLoading);
+            const showsPills = 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);
@@ -294,10 +314,10 @@ class AIAutocompleteDropdownComponent {
     }
 }
 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 });
+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" }, usesOnChanges: true, 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]=\"className ? 'magicx-aia-dropdown ' + className : 'magicx-aia-dropdown'\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\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"] }]
+            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]=\"className ? 'magicx-aia-dropdown ' + className : 'magicx-aia-dropdown'\"\n  [class.magicx-aia-dropdown-visible]=\"vm.isVisible\"\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: [{
@@ -366,17 +386,37 @@ class AIAutocompleteController {
             optionsPosition: opts.optionsPosition ?? "below",
         });
         this.rawState$ = new BehaviorSubject(this.core.getState());
-        this.unsubscribeCore = this.core.subscribe((state) => {
+        // Push the store's *current* state, not the snapshot the listener was
+        // handed. The core notifies listeners synchronously, and some actions
+        // trigger reentrant `store.set` calls (e.g. typing a non-matching char
+        // during re-edit makes the core synchronously exit re-edit and kick off a
+        // fetch). Reentrancy makes the outer set's listener loop continue with a
+        // now-stale snapshot, so the listener can fire *out of order* — delivering
+        // an older state (still in re-edit) after a newer one (re-edit exited).
+        // Reading `getState()` at emission time collapses every notification onto
+        // the true latest state, so a stale `editingParam` can't resurrect and
+        // retrigger the editor's re-edit caret-park (which would yank the caret
+        // back to where re-editing started). distinctUntilChanged downstream drops
+        // the resulting duplicate emissions. React avoids this because it batches
+        // renders and its caret effects are dependency-gated; our subscription is
+        // synchronous, so we coalesce here instead.
+        this.unsubscribeCore = this.core.subscribe(() => {
             if (!this.isDestroyed)
-                this.rawState$.next(state);
+                this.rawState$.next(this.core.getState());
         });
         // === Per-field observables ===
+        // Array-valued fields use shallow equality. The vanilla store spreads on
+        // every write (`store.set({ completedParams: [...] })`), so reference
+        // equality would re-fire downstream subscribers on every state tick even
+        // when the array's contents are unchanged. The other fields are
+        // primitives or stable object references, so default identity equality
+        // works fine.
         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.completedParams$ = deriveField(this.rawState$, (s) => s.completedParams, arrEq);
+        this.suggestionPills$ = deriveField(this.rawState$, (s) => s.actionableSuggestions, arrEq);
+        this.segments$ = deriveField(this.rawState$, (s) => s.segments, arrEq);
         this.newParamId$ = deriveField(this.rawState$, (s) => s.newParamId);
-        this.suggestions$ = deriveField(this.rawState$, (s) => s.suggestions);
+        this.suggestions$ = deriveField(this.rawState$, (s) => s.suggestions, arrEq);
         this.activeIndex$ = deriveField(this.rawState$, (s) => s.activeDropdownIndex);
         this.isLoading$ = deriveField(this.rawState$, computeUiLoading);
         this.isReady$ = deriveField(this.rawState$, (s) => s.isReady);
@@ -417,68 +457,109 @@ class AIAutocompleteController {
         return computeState(this.rawState$.value);
     }
     // === Action methods (pass-through to the core) ===
+    //
+    // Every action method begins with an `isDestroyed` guard so that callers
+    // who hold a stale reference after `destroy()` don't accidentally trigger
+    // work on a torn-down core. The vanilla core does not gate its own methods
+    // post-dispose — `reset()`, `handleTextChange()`, and friends would still
+    // schedule fetches or fire HTTP requests against an aborted controller,
+    // and the responses would have nowhere to surface (rawState$ is already
+    // complete). The guard makes the JSDoc-promised "no-op silently"
+    // semantics actually true.
     /** Clear all state, rotate `session_id`, and re-fetch. Call after submit. */
     reset() {
+        if (this.isDestroyed)
+            return;
         this.core.reset();
     }
     /** Pick a dropdown option (or replace the re-edited param if in re-edit mode). */
     selectOption(option) {
+        if (this.isDestroyed)
+            return;
         this.core.selectOption(option);
     }
     /** Promote the pill at `index` to active (front of the list). */
     setActivePill(index) {
+        if (this.isDestroyed)
+            return;
         this.core.setActivePill(index);
     }
     /** Drop the last completed param's "completed" status. Text stays as plain text. */
     removeLastParam() {
+        if (this.isDestroyed)
+            return;
         this.core.removeLastParam();
     }
     /** Clear the shimmer animation state for the most-recently-added param. */
     clearNewParamId() {
+        if (this.isDestroyed)
+            return;
         this.core.clearNewParamId();
     }
     /** Controlled-mode setter for editor text. */
     setValue(text) {
+        if (this.isDestroyed)
+            return;
         this.core.setValue(text);
     }
     /** Controlled-mode setter for completed params. */
     setCompletedParams(params) {
+        if (this.isDestroyed)
+            return;
         this.core.setCompletedParams(params);
     }
     /** Forward plain-text input from the consumer's `<textarea>` to the core. */
     handleTextChange(value) {
+        if (this.isDestroyed)
+            return;
         this.core.handleTextChange(value);
     }
     /** Forward keyboard events from the consumer's `<textarea>` to the core. */
     handleKeyDown(event) {
+        if (this.isDestroyed)
+            return;
         this.core.handleKeyDown(event);
     }
     /** Notify the core of focus state. */
     setFocused(focused) {
+        if (this.isDestroyed)
+            return;
         this.core.setFocused(focused);
     }
     /** Enter re-edit mode for the bold param with the given id. */
     startEditingParam(paramId) {
+        if (this.isDestroyed)
+            return;
         this.core.startEditingParam(paramId);
     }
     /** Exit re-edit mode without changing the bold param. */
     exitEditMode() {
+        if (this.isDestroyed)
+            return;
         this.core.exitEditMode();
     }
     /** Forward post-input caret position (extends the edit tail). */
     handleCaretAfterInput(offset) {
+        if (this.isDestroyed)
+            return;
         this.core.handleCaretAfterInput(offset);
     }
     /** Forward selection-only caret moves (may exit re-edit). */
     handleCaretMove(offset) {
+        if (this.isDestroyed)
+            return;
         this.core.handleCaretMove(offset);
     }
     /** Replace the bold param being re-edited. Returns true when applied. */
     replaceEditingRange(replacement) {
+        if (this.isDestroyed)
+            return false;
         return this.core.replaceEditingRange(replacement);
     }
     /** Set the highlighted option index (typically driven by hover). */
     setActiveDropdownIndex(index) {
+        if (this.isDestroyed)
+            return;
         this.core.setActiveDropdownIndex(index);
     }
     // === Lifecycle ===
@@ -490,6 +571,8 @@ class AIAutocompleteController {
      * (e.g. `text$` instead of `onChange`).
      */
     update(opts) {
+        if (this.isDestroyed)
+            return;
         this.core.update(opts);
     }
     /**
@@ -507,6 +590,24 @@ class AIAutocompleteController {
     }
 }
 // ===== Pure helpers — not part of the public surface =====
+/**
+ * Shallow array equality. The vanilla store reassigns array fields on every
+ * write (`store.set({ completedParams: [...prev, x] })`), so reference
+ * equality alone would re-emit downstream even when the contents are
+ * identical. Used for `completedParams$`, `suggestions$`, `suggestionPills$`,
+ * and `segments$`.
+ */
+function arrEq(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
 function computeUiLoading(s) {
     return s.isLoading && !s.editingParam && !s.inSelectionAnimation;
 }
@@ -701,7 +802,9 @@ class AIAutocompleteEditorHostDirective {
                 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;
+                // `DOMStringMap` is an index signature; bracket notation is required
+                // by `noPropertyAccessFromIndexSignature`.
+                const enclosing = strong?.dataset["paramId"] ?? null;
                 if (enclosing && enclosing !== this.editingParamId) {
                     this.zone.run(() => this.controller.startEditingParam(enclosing));
                     return;
@@ -801,13 +904,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 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
@@ -835,19 +931,26 @@ class AIAutocompleteComponent {
         this.completedParamsChange = new EventEmitter();
         this.focused = new EventEmitter();
         this.blurred = new EventEmitter();
+        /**
+         * Concrete light/dark value bound to `[attr.data-mode]`. Seeded in ngOnInit
+         * so the attribute is present during SSR (where ModeController, gated behind
+         * isPlatformBrowser in ngAfterViewInit, never runs). On the browser the
+         * ModeController's resolve callback keeps this in sync — so its runtime
+         * prefers-color-scheme updates and this binding always agree (no clobber).
+         */
         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);
+        this.cdr = inject(ChangeDetectorRef);
     }
     ngOnInit() {
+        // Seed before the browser guard so SSR renders a concrete data-mode.
+        this.resolvedMode = resolveInitialMode(this.mode);
         if (!isPlatformBrowser(this.platformId))
             return;
-        this.resolvedMode = resolveInitialMode(this.mode);
         this.controller = new AIAutocompleteController({
             apiConfig: this.apiConfig,
             optionOverrides: this.optionOverrides,
@@ -880,12 +983,26 @@ class AIAutocompleteComponent {
                 setCursorOffset(editor, offset);
             },
         });
+        if (this.pendingWriteValue !== undefined) {
+            this.controller.setValue(this.pendingWriteValue);
+            this.pendingWriteValue = undefined;
+        }
     }
     ngAfterViewInit() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        const container = this.el.nativeElement;
-        this.modeController = new ModeController(container, this.mode);
+        // ModeController writes `data-mode` to the element it's given. The CSS
+        // selectors are scoped to `.magicx-aia[data-mode="..."]` — which lives on
+        // the inner `<div class="magicx-aia magicx-aia-container" #container>`,
+        // NOT the host `<ai-autocomplete>` element. The resolve callback mirrors
+        // the value into `resolvedMode` so the `[attr.data-mode]` binding stays in
+        // lockstep with ModeController — the binding handles SSR, ModeController
+        // handles runtime prefers-color-scheme switches, and because they always
+        // agree neither clobbers the other.
+        this.modeController = new ModeController(this.containerRef.nativeElement, this.mode, (resolved) => {
+            this.resolvedMode = resolved;
+            this.cdr.markForCheck();
+        });
         // 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.
@@ -902,20 +1019,24 @@ class AIAutocompleteComponent {
     ngOnChanges(changes) {
         if (!this.controller)
             return;
+        // `SimpleChanges` is `{ [key: string]: SimpleChange }`, so per
+        // `noPropertyAccessFromIndexSignature` each key lookup uses bracket
+        // notation — this keeps the strictness contract that the rest of the
+        // workspace enforces.
         // Controlled-mode propagation
-        if (changes.value && this.value !== undefined) {
+        if (changes["value"] && this.value !== undefined) {
             this.controller.setValue(this.value);
         }
-        if (changes.completedParams && this.completedParams !== undefined) {
+        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) {
+        if (changes["apiConfig"] ||
+            changes["optionOverrides"] ||
+            changes["dropdownTrigger"] ||
+            changes["optionsPosition"] ||
+            changes["closeDropdownOnBlur"] ||
+            changes["showNonTappableOptions"]) {
             this.controller.update({
                 apiConfig: this.apiConfig,
                 optionOverrides: this.optionOverrides,
@@ -925,9 +1046,12 @@ class AIAutocompleteComponent {
                 showNonTappableOptions: this.showNonTappableOptions,
             });
         }
-        if (changes.mode) {
-            this.modeController?.setMode(this.mode);
+        if (changes["mode"]) {
+            // Keep the binding correct even when ModeController doesn't exist yet
+            // (SSR / pre-ngAfterViewInit). On the browser, setMode triggers the
+            // resolve callback which sets the same value.
             this.resolvedMode = resolveInitialMode(this.mode);
+            this.modeController?.setMode(this.mode);
         }
     }
     ngOnDestroy() {
@@ -951,8 +1075,8 @@ class AIAutocompleteComponent {
     /** Switch color mode at runtime. */
     setMode(mode) {
         this.mode = mode;
-        this.modeController?.setMode(mode);
         this.resolvedMode = resolveInitialMode(mode);
+        this.modeController?.setMode(mode);
         this.cdr.markForCheck();
     }
     // === Template helpers ===
@@ -1005,9 +1129,16 @@ class AIAutocompleteComponent {
     }
     // === ControlValueAccessor ===
     writeValue(value) {
-        if (!this.controller)
+        const next = value ?? "";
+        if (!this.controller) {
+            // Reactive Forms can call writeValue() before ngOnInit creates the
+            // controller (dynamic form construction, or a FormControl that already
+            // had a value at directive-creation time). Buffer the value; ngOnInit
+            // flushes it as soon as the controller exists.
+            this.pendingWriteValue = next;
             return;
-        this.controller.setValue(value ?? "");
+        }
+        this.controller.setValue(next);
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -1087,7 +1218,7 @@ AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             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 });
+    ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "pillContainerRef", first: true, predicate: ["pillContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\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: [
@@ -1102,7 +1233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             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"] }]
+                    ], template: "<div\n  #container\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: [{
@@ -1145,6 +1276,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], blurred: [{
                 type: Output
+            }], containerRef: [{
+                type: ViewChild,
+                args: ["container", { static: true }]
             }], editorRef: [{
                 type: ViewChild,
                 args: ["editor", { static: false }]
@@ -1155,6 +1289,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 function noop$1() {
     // Default no-op for CVA callbacks.
 }
+/**
+ * Resolve a concrete light/dark value from the configured mode. Used to seed
+ * the `data-mode` attribute synchronously (including during SSR, where
+ * ModeController never runs). On the server `window` is undefined → defaults
+ * to "dark" (matches the vanilla/React behavior).
+ */
+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 2 input binder. Attach to a `<textarea>` or `<input>` and pass an
@@ -1188,11 +1335,23 @@ class AIAutocompleteInputDirective {
         this.destroy$ = new Subject();
         this.onChangeFn = noop;
         this.onTouchedFn = noop;
+        // Timestamp of the last `input` event. A `keyup`/`select` that fires within
+        // this window is the tail of a keystroke, not a deliberate caret move, so we
+        // skip the caret-move handler there (mirrors the editor host's selectionchange
+        // guard). performance.now() is monotonic; 0 means "no input yet".
+        this.lastInputAt = 0;
+        // Tracks the most-recently-promoted param so we only reposition the caret
+        // once per option selection (mirrors the editor host's post-promote refocus).
+        this.lastSeenParamId = "";
     }
     ngOnInit() {
         if (!this.controller) {
             throw new Error('[aiaInput] requires a controller — use `[aiaInput]="myController"`.');
         }
+        if (this.pendingWriteValue !== undefined) {
+            this.controller.setValue(this.pendingWriteValue);
+            this.pendingWriteValue = undefined;
+        }
         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
@@ -1228,6 +1387,35 @@ class AIAutocompleteInputDirective {
                 this.renderer.removeAttribute(el, "aria-activedescendant");
             }
         });
+        // After an option selection promotes a param, the core appends its text and
+        // stamps `caretOffset` at the end of the inserted text. The text$ subscriber
+        // above writes the new value but *restores the pre-write caret* (correct for
+        // typing echoes, wrong here), so we move the caret to the promoted position.
+        // Keyed on newParamId so it fires once per selection, not on every tick.
+        // Registered after text$ so the new value is in the DOM before we seek.
+        this.controller.newParamId$.pipe(takeUntil(this.destroy$)).subscribe((id) => {
+            const current = id ?? "";
+            if (current && current !== this.lastSeenParamId) {
+                this.lastSeenParamId = current;
+                const offset = this.controller.getState().caretOffset ?? el.value.length;
+                const clamped = Math.min(Math.max(offset, 0), el.value.length);
+                // Only grab focus if we don't already have it — don't yank focus back
+                // from wherever the user moved it after selecting (e.g. a host-app
+                // button). setSelectionRange still positions the caret regardless.
+                if (typeof document !== "undefined" && document.activeElement !== el) {
+                    el.focus();
+                }
+                try {
+                    el.setSelectionRange(clamped, clamped);
+                }
+                catch {
+                    // Some input types (e.g. "number") don't support setSelectionRange.
+                }
+            }
+            else if (!current) {
+                this.lastSeenParamId = "";
+            }
+        });
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -1241,6 +1429,11 @@ class AIAutocompleteInputDirective {
      * we don't disrupt multi-keystroke input methods (Pinyin, Hangul, etc.).
      */
     onInput(event) {
+        // Stamp the input time before anything else. The autocapitalize path below
+        // calls setSelectionRange, which can synchronously fire a `select` event →
+        // onCaretMove; stamping first ensures that event falls inside the guard
+        // window and is treated as part of this keystroke, not a caret move.
+        this.lastInputAt = performance.now();
         const target = event.target;
         const raw = target.value;
         const isComposing = event.isComposing === true;
@@ -1261,11 +1454,36 @@ class AIAutocompleteInputDirective {
             }
         }
         this.controller.handleTextChange(next);
+        // Sync the real caret into the core. The dropdown's auto-trigger gate only
+        // opens when the caret is at the end of the text; without this, the core's
+        // `caretOffset` stays pinned at whatever a prior promote/select set it to
+        // and goes stale as the user keeps typing, wedging the dropdown closed.
+        // selectionStart is null on some input types (number/email/color); treat
+        // that as "caret at end" rather than feeding null into the core.
+        this.controller.handleCaretAfterInput(target.selectionStart ?? target.value.length);
         this.onChangeFn(next);
     }
     onKeyDown(event) {
         this.controller.handleKeyDown(event);
     }
+    /**
+     * Caret moved by something other than typing — arrow keys, Home/End, or a
+     * mouse click/drag (keyup + mouseup). Forward the new offset so the core can
+     * re-evaluate the caret-at-end dropdown gate (and exit re-edit if the caret
+     * left the region). We deliberately do NOT listen for the `select` event:
+     * programmatic `setSelectionRange` calls (the text$ writeback, the post-select
+     * caret reposition) fire it in jsdom/some browsers, which would re-enter here
+     * and clobber `caretOffset`. `keyup`/`mouseup` only fire for real user input.
+     * Skipped right after an `input` event, where the caret is already handled by
+     * `handleCaretAfterInput` above.
+     */
+    onCaretMove() {
+        if (performance.now() - this.lastInputAt < 50)
+            return;
+        const el = this.el.nativeElement;
+        // selectionStart is null on some input types — treat as caret at end.
+        this.controller.handleCaretMove(el.selectionStart ?? el.value.length);
+    }
     onFocus() {
         this.controller.setFocused(true);
     }
@@ -1277,11 +1495,17 @@ class AIAutocompleteInputDirective {
     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)
+        // If Angular calls writeValue() before ngOnInit (possible during dynamic
+        // form construction), queue the value and let ngOnInit flush it. We
+        // can't push it into the controller now because either the controller
+        // binding hasn't resolved yet, or text$'s initial subscription would
+        // overwrite it moments later.
+        if (this.controller) {
             this.controller.setValue(next);
+        }
+        else {
+            this.pendingWriteValue = next;
+        }
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -1294,7 +1518,7 @@ class AIAutocompleteInputDirective {
     }
 }
 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: [
+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)", "keyup": "onCaretMove()", "mouseup": "onCaretMove()", "focus": "onFocus()", "blur": "onBlur()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -1312,6 +1536,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         "aria-autocomplete": "list",
                         "(input)": "onInput($event)",
                         "(keydown)": "onKeyDown($event)",
+                        "(keyup)": "onCaretMove()",
+                        "(mouseup)": "onCaretMove()",
                         "(focus)": "onFocus()",
                         "(blur)": "onBlur()",
                     },