@tylertech/forge-ai 0.1.0

package/dist/ai-dropdown-menu/navigation-controller.d.ts

@@ -0,0 +1,79 @@
+import { ForgeAiDropdownMenuItemComponent } from './ai-dropdown-menu-item.js';
+/**
+ * Controller class to handle keyboard navigation for dropdown menus.
+ *
+ * This controller manages all aspects of keyboard navigation within dropdown menus,
+ * including focus management, selection state, and keyboard event delegation.
+ * It supports both parent dropdown menus and nested submenus with proper
+ * navigation isolation and event bubbling control.
+ *
+ * @example
+ * ```typescript
+ * const controller = new DropdownNavigationController(
+ *   hostElement,
+ *   () => getMenuItems(),
+ *   (index) => selectItem(index),
+ *   () => closeDropdown(),
+ *   () => openDropdown(),
+ *   () => isSubmenu()
+ * );
+ *
+ * // Handle keyboard events
+ * controller.handleKeyDown(keyboardEvent, isOpen, triggerButton);
+ * ```
+ */
+export declare class DropdownNavigationController {
+    private _host;
+    private _getMenuItems;
+    private _onItemSelect;
+    private _onClose;
+    private _onOpen;
+    private _isSubmenu;
+    private _selectedIndex;
+    private _openedViaKeyboard;
+    constructor(_host: HTMLElement, _getMenuItems: () => ForgeAiDropdownMenuItemComponent[], _onItemSelect: (index: number) => void, _onClose: () => void, _onOpen: () => void, _isSubmenu: () => boolean);
+    /**
+     * Gets the current selected index
+     */
+    get selectedIndex(): number;
+    /**
+     * Sets the selected index
+     */
+    set selectedIndex(value: number);
+    /**
+     * Gets whether the dropdown was opened via keyboard
+     */
+    get openedViaKeyboard(): boolean;
+    /**
+     * Sets whether the dropdown was opened via keyboard
+     */
+    set openedViaKeyboard(value: boolean);
+    /**
+     * Handles keyboard events for the dropdown menu
+     */
+    handleKeyDown(event: KeyboardEvent, isOpen: boolean, triggerButton: HTMLElement): boolean;
+    /**
+     * Moves the selection by the specified direction
+     */
+    private _moveSelection;
+    /**
+     * Updates the focus state of menu items
+     */
+    private _updateItemFocus;
+    /**
+     * Focuses the first item in the menu
+     */
+    focusFirstItem(): void;
+    /**
+     * Clears focus from all menu items
+     */
+    clearItemFocus(): void;
+    /**
+     * Resets the navigation state when dropdown opens
+     */
+    onOpen(): void;
+    /**
+     * Resets the navigation state
+     */
+    reset(): void;
+}

package/dist/ai-dropdown-menu/navigation-controller.mjs

@@ -0,0 +1,205 @@
+class DropdownNavigationController {
+  constructor(_host, _getMenuItems, _onItemSelect, _onClose, _onOpen, _isSubmenu) {
+    this._host = _host;
+    this._getMenuItems = _getMenuItems;
+    this._onItemSelect = _onItemSelect;
+    this._onClose = _onClose;
+    this._onOpen = _onOpen;
+    this._isSubmenu = _isSubmenu;
+    this._selectedIndex = -1;
+    this._openedViaKeyboard = false;
+  }
+  /**
+   * Gets the current selected index
+   */
+  get selectedIndex() {
+    return this._selectedIndex;
+  }
+  /**
+   * Sets the selected index
+   */
+  set selectedIndex(value) {
+    this._selectedIndex = value;
+  }
+  /**
+   * Gets whether the dropdown was opened via keyboard
+   */
+  get openedViaKeyboard() {
+    return this._openedViaKeyboard;
+  }
+  /**
+   * Sets whether the dropdown was opened via keyboard
+   */
+  set openedViaKeyboard(value) {
+    this._openedViaKeyboard = value;
+  }
+  /**
+   * Handles keyboard events for the dropdown menu
+   */
+  handleKeyDown(event, isOpen, triggerButton) {
+    const target = event.target;
+    if (target && target !== this._host) {
+      const nestedDropdown = target.closest('forge-ai-dropdown-menu[data-submenu="true"]');
+      if (nestedDropdown && nestedDropdown !== this._host) {
+        return false;
+      }
+    }
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        if (event.target === triggerButton) {
+          event.preventDefault();
+          this._onOpen();
+          return true;
+        } else if (isOpen && this._selectedIndex >= 0) {
+          event.preventDefault();
+          this._onItemSelect(this._selectedIndex);
+          return true;
+        }
+        break;
+      case "Escape":
+        if (isOpen) {
+          event.preventDefault();
+          this._onClose();
+          triggerButton.focus();
+          return true;
+        }
+        break;
+      case "ArrowDown":
+        if (isOpen) {
+          event.preventDefault();
+          this._moveSelection(1);
+          return true;
+        } else if (event.target === triggerButton) {
+          event.preventDefault();
+          this._openedViaKeyboard = true;
+          this._onOpen();
+          return true;
+        }
+        break;
+      case "ArrowUp":
+        if (isOpen) {
+          event.preventDefault();
+          this._moveSelection(-1);
+          return true;
+        }
+        break;
+      case "ArrowRight":
+        if (isOpen && this._selectedIndex >= 0) {
+          const items = this._getMenuItems();
+          const selectedItem = items[this._selectedIndex];
+          if (selectedItem) {
+            selectedItem.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: false }));
+          }
+          return true;
+        }
+        break;
+      case "ArrowLeft":
+        if (isOpen && this._isSubmenu()) {
+          event.preventDefault();
+          this._onClose();
+          const parentItem = this._host.parentElement;
+          if (parentItem && parentItem.tagName.toLowerCase() === "forge-ai-dropdown-menu-item") {
+            parentItem.focus();
+          }
+          return true;
+        }
+        break;
+      case "Home":
+        if (isOpen) {
+          event.preventDefault();
+          this._selectedIndex = 0;
+          this._updateItemFocus();
+          return true;
+        }
+        break;
+      case "End":
+        if (isOpen) {
+          event.preventDefault();
+          this._selectedIndex = Math.max(0, this._getMenuItems().length - 1);
+          this._updateItemFocus();
+          return true;
+        }
+        break;
+    }
+    return false;
+  }
+  /**
+   * Moves the selection by the specified direction
+   */
+  _moveSelection(direction) {
+    const items = this._getMenuItems();
+    if (items.length === 0) {
+      return;
+    }
+    if (this._selectedIndex === -1) {
+      if (direction > 0) {
+        this._selectedIndex = 0;
+      } else {
+        this._selectedIndex = items.length - 1;
+      }
+    } else {
+      let newIndex = this._selectedIndex + direction;
+      if (newIndex < 0) {
+        newIndex = items.length - 1;
+      } else if (newIndex >= items.length) {
+        newIndex = 0;
+      }
+      this._selectedIndex = newIndex;
+    }
+    this._updateItemFocus();
+  }
+  /**
+   * Updates the focus state of menu items
+   */
+  _updateItemFocus() {
+    const items = this._getMenuItems();
+    items.forEach((item, index) => {
+      item.setAttribute("tabindex", index === this._selectedIndex ? "0" : "-1");
+      if (index === this._selectedIndex) {
+        item.focus();
+      }
+    });
+  }
+  /**
+   * Focuses the first item in the menu
+   */
+  focusFirstItem() {
+    const items = this._getMenuItems();
+    if (items.length > 0) {
+      this._selectedIndex = 0;
+      this._updateItemFocus();
+    }
+  }
+  /**
+   * Clears focus from all menu items
+   */
+  clearItemFocus() {
+    const items = this._getMenuItems();
+    items.forEach((item) => {
+      item.setAttribute("tabindex", "-1");
+    });
+  }
+  /**
+   * Resets the navigation state when dropdown opens
+   */
+  onOpen() {
+    this._selectedIndex = -1;
+    if (this._openedViaKeyboard) {
+      this.focusFirstItem();
+      this._openedViaKeyboard = false;
+    } else {
+      this.clearItemFocus();
+    }
+  }
+  /**
+   * Resets the navigation state
+   */
+  reset() {
+    this._selectedIndex = -1;
+    this._openedViaKeyboard = false;
+  }
+}
+export {
+  DropdownNavigationController
+};

package/dist/ai-dropdown-menu/selection-manager.d.ts

@@ -0,0 +1,145 @@
+import { ForgeAiDropdownMenuItemComponent } from './ai-dropdown-menu-item.js';
+export type DropdownMenuSelectionMode = 'none' | 'single' | 'multi';
+/**
+ * Base interface for dropdown menu selection change events
+ */
+export interface BaseDropdownChangeEventDetail {
+    selectionMode: DropdownMenuSelectionMode;
+    timestamp: number;
+}
+/**
+ * Event detail for 'none' selection mode (actions only)
+ */
+export interface ActionEventDetail extends BaseDropdownChangeEventDetail {
+    selectionMode: 'none';
+    value: string;
+    selectedItem: ForgeAiDropdownMenuItemComponent;
+}
+/**
+ * Event detail for 'single' selection mode
+ */
+export interface SingleSelectionEventDetail extends BaseDropdownChangeEventDetail {
+    selectionMode: 'single';
+    value: string | null;
+    selectedItem: ForgeAiDropdownMenuItemComponent | null;
+    previousValue?: string | null;
+}
+/**
+ * Event detail for 'multi' selection mode
+ */
+export interface MultiSelectionEventDetail extends BaseDropdownChangeEventDetail {
+    selectionMode: 'multi';
+    value: string[];
+    selectedItem: ForgeAiDropdownMenuItemComponent[];
+    addedItems?: ForgeAiDropdownMenuItemComponent[];
+    removedItems?: ForgeAiDropdownMenuItemComponent[];
+}
+/**
+ * Union type for all dropdown change event details
+ */
+export type DropdownChangeEventDetail = ActionEventDetail | SingleSelectionEventDetail | MultiSelectionEventDetail;
+/**
+ * Configuration options for selection behavior
+ */
+export interface SelectionConfig {
+    mode: DropdownMenuSelectionMode;
+    closeOnSingleSelect?: boolean;
+    showSelectionCount?: boolean;
+}
+/**
+ * Manages selection state and behavior for dropdown menus.
+ *
+ * The SelectionManager is responsible for handling all aspects of item selection
+ * within dropdown menus, supporting three distinct modes:
+ *
+ * - **none**: Items act as actions only, no persistent selection state
+ * - **single**: Single selection with radio button behavior
+ * - **multi**: Multiple selection with checkbox behavior
+ *
+ * It provides type-safe event dispatching with mode-specific event details
+ * and maintains consistent selection state across all menu items.
+ *
+ * @example
+ * ```typescript
+ * const manager = new SelectionManager(
+ *   () => getAllMenuItems(),
+ *   (detail) => handleSelectionChange(detail),
+ *   { mode: 'single', closeOnSingleSelect: true }
+ * );
+ *
+ * // Handle item selection
+ * const result = manager.selectItem(menuItem);
+ * if (result.shouldClose) {
+ *   closeDropdown();
+ * }
+ * ```
+ */
+export declare class SelectionManager {
+    private _getMenuItems;
+    private _onSelectionChange;
+    private _value;
+    private _config;
+    constructor(_getMenuItems: () => ForgeAiDropdownMenuItemComponent[], _onSelectionChange: (detail: DropdownChangeEventDetail) => void, config: SelectionConfig);
+    /**
+     * Gets the current selection value
+     */
+    get value(): string | string[] | null;
+    /**
+     * Sets the selection value and updates item states
+     */
+    set value(newValue: string | string[] | null);
+    /**
+     * Gets the current selection mode
+     */
+    get selectionMode(): DropdownMenuSelectionMode;
+    /**
+     * Updates the selection mode and reconfigures items
+     */
+    set selectionMode(mode: DropdownMenuSelectionMode);
+    /**
+     * Updates the selection configuration
+     */
+    updateConfig(config: Partial<SelectionConfig>): void;
+    /**
+     * Handles item selection based on the current mode
+     */
+    selectItem(item: ForgeAiDropdownMenuItemComponent): {
+        shouldClose: boolean;
+    };
+    /**
+     * Gets the currently selected items
+     */
+    getSelectedItems(): ForgeAiDropdownMenuItemComponent[];
+    /**
+     * Gets text representation of the current selection
+     */
+    getSelectedText(): string;
+    /**
+     * Checks if selection text should be displayed
+     */
+    shouldShowSelectedText(): boolean;
+    /**
+     * Updates the selection state of all menu items
+     */
+    private _updateItemSelectionState;
+    /**
+     * Handles action-only selection (no state change)
+     */
+    private _handleActionSelection;
+    /**
+     * Handles single selection mode
+     */
+    private _handleSingleSelection;
+    /**
+     * Handles multi-selection mode
+     */
+    private _handleMultiSelection;
+    /**
+     * Gets the selected values as an array
+     */
+    private _getSelectedValuesArray;
+    /**
+     * Resets the selection state
+     */
+    reset(): void;
+}

package/dist/ai-dropdown-menu/selection-manager.mjs

@@ -0,0 +1,183 @@
+class SelectionManager {
+  constructor(_getMenuItems, _onSelectionChange, config) {
+    this._getMenuItems = _getMenuItems;
+    this._onSelectionChange = _onSelectionChange;
+    this._value = null;
+    this._config = { closeOnSingleSelect: true, showSelectionCount: true, ...config };
+  }
+  /**
+   * Gets the current selection value
+   */
+  get value() {
+    return this._value;
+  }
+  /**
+   * Sets the selection value and updates item states
+   */
+  set value(newValue) {
+    this._value = newValue;
+    this._updateItemSelectionState();
+  }
+  /**
+   * Gets the current selection mode
+   */
+  get selectionMode() {
+    return this._config.mode;
+  }
+  /**
+   * Updates the selection mode and reconfigures items
+   */
+  set selectionMode(mode) {
+    this._config.mode = mode;
+    this._updateItemSelectionState();
+  }
+  /**
+   * Updates the selection configuration
+   */
+  updateConfig(config) {
+    this._config = { ...this._config, ...config };
+    this._updateItemSelectionState();
+  }
+  /**
+   * Handles item selection based on the current mode
+   */
+  selectItem(item) {
+    const itemValue = item.getAttribute("value") || "";
+    switch (this._config.mode) {
+      case "none":
+        return this._handleActionSelection(item, itemValue);
+      case "single":
+        return this._handleSingleSelection(item, itemValue);
+      case "multi":
+        return this._handleMultiSelection(item, itemValue);
+      default:
+        return { shouldClose: false };
+    }
+  }
+  /**
+   * Gets the currently selected items
+   */
+  getSelectedItems() {
+    const items = this._getMenuItems();
+    const selectedValues = this._getSelectedValuesArray();
+    return items.filter((item) => {
+      const itemValue = item.getAttribute("value") || "";
+      return selectedValues.includes(itemValue);
+    });
+  }
+  /**
+   * Gets text representation of the current selection
+   */
+  getSelectedText() {
+    if (this._config.mode === "none") {
+      return "";
+    }
+    const selectedItems = this.getSelectedItems();
+    if (selectedItems.length === 0) {
+      return "";
+    }
+    if (this._config.mode === "single") {
+      return selectedItems[0].labelText || "";
+    }
+    if (this._config.mode === "multi" && this._config.showSelectionCount) {
+      return selectedItems.length === 1 ? "1 option selected" : `${selectedItems.length} options selected`;
+    }
+    return "";
+  }
+  /**
+   * Checks if selection text should be displayed
+   */
+  shouldShowSelectedText() {
+    return (this._config.mode === "single" || this._config.mode === "multi") && this.getSelectedText() !== "";
+  }
+  /**
+   * Updates the selection state of all menu items
+   */
+  _updateItemSelectionState() {
+    const items = this._getMenuItems();
+    const selectedValues = this._getSelectedValuesArray();
+    items.forEach((item) => {
+      item.selectionMode = this._config.mode;
+      const itemValue = item.getAttribute("value") || "";
+      item.selected = selectedValues.includes(itemValue);
+    });
+  }
+  /**
+   * Handles action-only selection (no state change)
+   */
+  _handleActionSelection(item, itemValue) {
+    const eventDetail = {
+      selectionMode: "none",
+      value: itemValue,
+      selectedItem: item,
+      timestamp: Date.now()
+    };
+    this._onSelectionChange(eventDetail);
+    return { shouldClose: true };
+  }
+  /**
+   * Handles single selection mode
+   */
+  _handleSingleSelection(item, itemValue) {
+    const previousValue = typeof this._value === "string" ? this._value : null;
+    this._value = itemValue;
+    this._updateItemSelectionState();
+    const eventDetail = {
+      selectionMode: "single",
+      value: this._value,
+      selectedItem: item,
+      previousValue,
+      timestamp: Date.now()
+    };
+    this._onSelectionChange(eventDetail);
+    return { shouldClose: !!this._config.closeOnSingleSelect };
+  }
+  /**
+   * Handles multi-selection mode
+   */
+  _handleMultiSelection(item, itemValue) {
+    const currentValues = this._getSelectedValuesArray();
+    const itemIndex = currentValues.indexOf(itemValue);
+    let addedItems = [];
+    let removedItems = [];
+    if (itemIndex >= 0) {
+      currentValues.splice(itemIndex, 1);
+      removedItems = [item];
+    } else {
+      currentValues.push(itemValue);
+      addedItems = [item];
+    }
+    this._value = currentValues;
+    this._updateItemSelectionState();
+    const selectedItems = this.getSelectedItems();
+    const eventDetail = {
+      selectionMode: "multi",
+      value: currentValues,
+      selectedItem: selectedItems,
+      addedItems: addedItems.length > 0 ? addedItems : void 0,
+      removedItems: removedItems.length > 0 ? removedItems : void 0,
+      timestamp: Date.now()
+    };
+    this._onSelectionChange(eventDetail);
+    return { shouldClose: false };
+  }
+  /**
+   * Gets the selected values as an array
+   */
+  _getSelectedValuesArray() {
+    if (Array.isArray(this._value)) {
+      return [...this._value];
+    }
+    return this._value ? [this._value] : [];
+  }
+  /**
+   * Resets the selection state
+   */
+  reset() {
+    this._value = null;
+    this._updateItemSelectionState();
+  }
+}
+export {
+  SelectionManager
+};

package/dist/ai-embedded-chat/ai-embedded-chat.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-embedded-chat': AiEmbeddedChatComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-embedded-chat-expand': CustomEvent<void>;
+        'forge-ai-embedded-chat-collapse': CustomEvent<void>;
+    }
+}
+export declare const AiEmbeddedChatComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-embedded-chat
+ *
+ * @slot - Default slot for messages (ai-user-message, ai-response-message components)
+ * @slot suggestions - Slot for AI suggestions component
+ * @slot prompt - Slot for custom AI prompt component. If not provided, a default forge-ai-prompt will be used.
+ *
+ * @event {CustomEvent<void>} forge-ai-embedded-chat-expand - Fired when the chat is expanded to modal view
+ * @event {CustomEvent<void>} forge-ai-embedded-chat-collapse - Fired when the chat is collapsed from modal view
+ *
+ * @description A form factor component that embeds ai-chat-interface within ai-gradient-container
+ * for inline page usage with optional modal expansion functionality.
+ */
+export declare class AiEmbeddedChatComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /**
+     * Controls whether the modal view is open when expanded.
+     */
+    expanded: boolean;
+    /**
+     * Controls the gradient variant applied to the container.
+     */
+    gradientVariant: 'low' | 'medium' | 'high';
+    private _isModalFullscreen;
+    updated(): void;
+    render(): TemplateResult;
+    /**
+     * Expands the chat to modal view.
+     */
+    expand(): void;
+    /**
+     * Collapses the chat from modal view back to embedded view.
+     */
+    collapse(): void;
+}