@magicx-eng/ai-autocomplete-vanilla 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.d.ts CHANGED
@@ -43,7 +43,7 @@ interface APIConfigBase {
43
43
  }
44
44
  interface APIKeyConfig extends APIConfigBase {
45
45
  type?: "apiKey";
46
- apiKey: string;
46
+ apiKey?: string;
47
47
  authScheme?: "Bearer" | "Basic";
48
48
  }
49
49
  interface AccessTokenConfig extends APIConfigBase {
@@ -64,14 +64,6 @@ interface AutocompleteResult {
64
64
  completed_params: CompletedParam[];
65
65
  }
66
66
 
67
- type Listener<S> = (next: S, prev: S) => void;
68
- interface Store<S> {
69
- get: () => S;
70
- set: (patch: Partial<S> | ((s: S) => Partial<S>)) => void;
71
- subscribe: (listener: Listener<S>) => () => void;
72
- }
73
- declare function createStore<S>(initial: S): Store<S>;
74
-
75
67
  /** Internal state managed by the store. */
76
68
  interface CoreState {
77
69
  text: string;
@@ -92,19 +84,30 @@ interface CoreState {
92
84
  pillTapped: boolean;
93
85
  skipNextFetch: boolean;
94
86
  lastRawQuery: string;
87
+ isFocused: boolean;
95
88
  }
89
+ /**
90
+ * Render mode:
91
+ * - "full" (default) — renders input + dropdown + pills. Tier 1.
92
+ * - "dropdown" — renders only the dropdown with pills. Consumer owns the input. Tier 2.
93
+ * - "headless" — no DOM. State + controllers only. For framework wrappers.
94
+ */
95
+ type RenderMode = "full" | "dropdown" | "headless";
96
96
  /** Options passed to the AIAutocomplete constructor. */
97
97
  interface CoreOptions {
98
98
  apiConfig?: APIConfig;
99
99
  optionOverrides?: OptionOverrides;
100
100
  maskCompletedText?: boolean;
101
- placeholder?: string;
102
101
  columns?: number;
103
- typewriterEffect?: boolean;
104
- pillPlacement?: "inline" | "dropdown";
102
+ /** Where pills render in "full" mode. Ignored in "dropdown" mode (always in dropdown). */
103
+ pillPlacement?: "inline" | "dropdown" | "hidden";
105
104
  mode?: AppearanceMode;
106
105
  optionsPosition?: "above" | "below";
107
106
  animations?: boolean;
107
+ /** When the dropdown appears. "auto" = shows when options available. "manual" = only on pill tap. "hidden" = never. Default: "auto". */
108
+ dropdownTrigger?: "auto" | "manual" | "hidden";
109
+ /** Render mode. Default: "full". */
110
+ renderMode?: RenderMode;
108
111
  onSubmit?: (result: AutocompleteResult) => void;
109
112
  onError?: (error: Error) => void;
110
113
  onChange?: (text: string) => void;
@@ -114,36 +117,23 @@ interface CoreOptions {
114
117
  completedParams?: CompletedParamState[];
115
118
  }
116
119
 
117
- interface KeyboardContext {
118
- columns: number;
119
- listboxId: string;
120
- onSubmit?: (result: AutocompleteResult) => void;
121
- selectOption: (option: SuggestionOption) => void;
122
- }
123
- declare class KeyboardController {
124
- private store;
125
- private ctx;
126
- constructor(store: Store<CoreState>, ctx: KeyboardContext);
127
- handleKeyDown(e: KeyboardEvent): void;
128
- private getTappableIndices;
129
- private clickOrSelect;
130
- /** Delegate to pills controller logic inline (avoids circular dep) */
131
- private pillsSetActivePill;
132
- }
133
-
134
120
  declare class AIAutocomplete {
135
121
  private store;
136
- private listboxId;
122
+ private _listboxId;
137
123
  private opts;
138
124
  private fetchController;
139
- keyboardController: KeyboardController;
125
+ private keyboardController;
140
126
  private pillsController;
141
127
  private modeController;
142
128
  private container;
143
129
  private unsubscribers;
144
130
  private derivedInProgress;
131
+ private renderMode;
145
132
  private domRefs;
133
+ private dropdownRefs;
146
134
  private newParamTimer;
135
+ private suggestionRemovalTimer;
136
+ private externalListeners;
147
137
  constructor(container: HTMLElement, opts?: CoreOptions);
148
138
  focus(): void;
149
139
  reset(): void;
@@ -154,15 +144,35 @@ declare class AIAutocomplete {
154
144
  setActivePill(index: number): void;
155
145
  removeLastParam(): void;
156
146
  clearNewParamId(): void;
147
+ setActiveDropdownIndex(index: number): void;
148
+ handleTextChange(value: string): void;
149
+ handleKeyDown(e: KeyboardEvent): void;
150
+ setFocused(focused: boolean): void;
151
+ /** Subscribe to state changes (fires after derived state is settled). Returns unsubscribe function. */
152
+ subscribe(listener: (state: CoreState) => void): () => void;
157
153
  getState(): CoreState;
154
+ get listboxId(): string;
158
155
  get isReady(): boolean;
159
156
  on(event: string, callback: (...args: unknown[]) => void): () => void;
160
157
  update(opts: Partial<CoreOptions>): void;
161
- private selectOption;
158
+ selectOption(option: SuggestionOption): void;
162
159
  private recomputeDerived;
163
160
  private setupContainer;
164
- private buildAndRender;
161
+ private buildAndRenderFull;
162
+ private buildAndRenderDropdown;
163
+ /** Batched render subscriber — coalesces multiple store.set calls into one DOM update. */
164
+ private subscribeBatchedRender;
165
+ /** Auto-clear newParamId after shimmer animation. */
166
+ private subscribeNewParamTimer;
165
167
  private handleChange;
166
168
  }
167
169
 
168
- export { AIAutocomplete, type APIConfig, type APIKeyConfig, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type Segment, type Store, type Suggestion, type SuggestionOption, createStore };
170
+ type Listener<S> = (next: S, prev: S) => void;
171
+ interface Store<S> {
172
+ get: () => S;
173
+ set: (patch: Partial<S> | ((s: S) => Partial<S>)) => void;
174
+ subscribe: (listener: Listener<S>) => () => void;
175
+ }
176
+ declare function createStore<S>(initial: S): Store<S>;
177
+
178
+ export { AIAutocomplete, type APIConfig, type APIKeyConfig, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type RenderMode, type Segment, type Store, type Suggestion, type SuggestionOption, createStore };