@tylertech/forge-ai 0.1.0

package/dist/ai-voice-input/ai-voice-input.d.ts

@@ -0,0 +1,68 @@
+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-voice-input': AiVoiceInputComponent;
+    }
+    interface Window {
+        SpeechRecognition: typeof SpeechRecognition;
+        webkitSpeechRecognition: typeof SpeechRecognition;
+    }
+}
+interface SpeechRecognitionAlternative {
+    readonly transcript: string;
+    readonly confidence: number;
+}
+interface SpeechRecognitionResult {
+    readonly length: number;
+    item(index: number): SpeechRecognitionAlternative;
+    [index: number]: SpeechRecognitionAlternative;
+}
+interface SpeechRecognitionResultList {
+    readonly length: number;
+    item(index: number): SpeechRecognitionResult;
+    [index: number]: SpeechRecognitionResult;
+}
+interface SpeechRecognitionEvent extends Event {
+    readonly results: SpeechRecognitionResultList;
+}
+interface SpeechRecognition extends EventTarget {
+    continuous: boolean;
+    interimResults: boolean;
+    lang: string;
+    start(): void;
+    stop(): void;
+    onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
+    onend: ((this: SpeechRecognition, ev: Event) => void) | null;
+    onerror: ((this: SpeechRecognition, ev: Event) => void) | null;
+    onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void) | null;
+}
+declare const SpeechRecognition: {
+    prototype: SpeechRecognition;
+    new (): SpeechRecognition;
+};
+export declare const AiVoiceInputComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * Event detail interface for the speech recognition result event.
+ */
+export interface AiVoiceInputResultEvent {
+    /** The recognized speech text */
+    transcript: string;
+    /** Confidence score of the recognition result (0-1) */
+    confidence: number;
+}
+/**
+ * @tag forge-ai-voice-input
+ *
+ * @event {CustomEvent<AiVoiceInputResultEvent>} forge-ai-voice-input-result - Fired when speech recognition produces a result.
+ * The event detail contains the transcript and confidence score of the recognized speech.
+ */
+export declare class AiVoiceInputComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    private _isRecording;
+    private _recognition;
+    connectedCallback(): void;
+    private _initializeSpeechRecognition;
+    private _toggleRecording;
+    render(): TemplateResult;
+}
+export {};

package/dist/ai-voice-input/ai-voice-input.mjs

@@ -0,0 +1,107 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import styles from "./ai-voice-input.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const AiVoiceInputComponentTagName = "forge-ai-voice-input";
+let AiVoiceInputComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._isRecording = false;
+    this._recognition = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initializeSpeechRecognition();
+  }
+  _initializeSpeechRecognition() {
+    const SpeechRecognitionClass = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognitionClass) {
+      console.warn("Speech Recognition is not supported in this browser");
+      return;
+    }
+    this._recognition = new SpeechRecognitionClass();
+    this._recognition.continuous = false;
+    this._recognition.interimResults = false;
+    this._recognition.lang = "en-US";
+    this._recognition.onstart = () => {
+      this._isRecording = true;
+    };
+    this._recognition.onend = () => {
+      this._isRecording = false;
+    };
+    this._recognition.onerror = () => {
+      this._isRecording = false;
+    };
+    this._recognition.onresult = (event) => {
+      if (event.results.length > 0) {
+        const result = event.results[0];
+        if (result.length > 0) {
+          const alternative = result[0];
+          const eventDetail = {
+            transcript: alternative.transcript,
+            confidence: alternative.confidence
+          };
+          this.dispatchEvent(
+            new CustomEvent("forge-ai-voice-input-result", {
+              detail: eventDetail,
+              bubbles: true
+            })
+          );
+        }
+      }
+    };
+  }
+  _toggleRecording() {
+    if (!this._recognition) {
+      return;
+    }
+    if (this._isRecording) {
+      this._recognition.stop();
+    } else {
+      this._recognition.start();
+    }
+  }
+  render() {
+    const classes = classMap({
+      "forge-icon-button": true,
+      "forge-theme--error": this._isRecording,
+      recording: this._isRecording
+    });
+    return html`
+      <div class="ai-voice-input">
+        <button
+          class=${classes}
+          @click=${this._toggleRecording}
+          aria-label=${this._isRecording ? "Stop recording" : "Start recording"}
+          ?disabled=${!this._recognition}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+              d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3m5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72z" />
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+};
+AiVoiceInputComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  state()
+], AiVoiceInputComponent.prototype, "_isRecording", 2);
+AiVoiceInputComponent = __decorateClass([
+  customElement(AiVoiceInputComponentTagName)
+], AiVoiceInputComponent);
+export {
+  AiVoiceInputComponent,
+  AiVoiceInputComponentTagName
+};

package/dist/ai-voice-input/ai-voice-input.scss.mjs

@@ -0,0 +1,4 @@
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-icon-button {\n  --_icon-button-display: var(--forge-icon-button-display, inline-flex);\n  --_icon-button-size: var(--forge-icon-button-size, 48px);\n  --_icon-button-gap: var(--forge-icon-button-gap, 0);\n  --_icon-button-icon-color: var(--forge-icon-button-icon-color, currentColor);\n  --_icon-button-background-color: var(--forge-icon-button-background-color, none);\n  --_icon-button-icon-size: var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n  --_icon-button-cursor: var(--forge-icon-button-cursor, pointer);\n  --_icon-button-padding: var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));\n  --_icon-button-border: var(--forge-icon-button-border, none);\n  --_icon-button-shadow: var(--forge-icon-button-shadow, none);\n  --_icon-button-transition-duration: var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_icon-button-transition-timing: var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_icon-button-shape: var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  --_icon-button-shape-start-start: var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));\n  --_icon-button-shape-start-end: var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));\n  --_icon-button-shape-end-start: var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));\n  --_icon-button-shape-end-end: var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));\n  --_icon-button-shape-squared: var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_icon-button-outlined-border-width: var(--forge-icon-button-outlined-border-width, 1px);\n  --_icon-button-outlined-border-style: var(--forge-icon-button-outlined-border-style, solid);\n  --_icon-button-outlined-border-color: var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));\n  --_icon-button-tonal-icon-color: var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));\n  --_icon-button-tonal-background-color: var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-filled-icon-color: var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));\n  --_icon-button-filled-background-color: var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-raised-shadow: var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-hover-shadow: var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-active-shadow: var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-disabled-shadow: var(--forge-icon-button-raised-disabled-shadow, none);\n  --_icon-button-density-small-size: var(--forge-icon-button-density-small-size, 24px);\n  --_icon-button-density-small-padding: var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));\n  --_icon-button-density-small-icon-size: var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n  --_icon-button-density-medium-size: var(--forge-icon-button-density-medium-size, 36px);\n  --_icon-button-density-medium-padding: var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));\n  --_icon-button-density-large-size: var(--forge-icon-button-density-large-size, var(--_icon-button-size));\n  --_icon-button-toggle-on-background-color: var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-toggle-on-icon-color: var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-outlined-toggle-on-background-color: var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-outlined-toggle-on-icon-color: var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-tonal-toggle-background-color: var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_icon-button-tonal-toggle-on-background-color: var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-tonal-toggle-on-icon-color: var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-background-color: var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_icon-button-filled-toggle-icon-color: var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-on-background-color: var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-on-icon-color: var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));\n  --_icon-button-disabled-cursor: var(--forge-icon-button-disabled-cursor, not-allowed);\n  --_icon-button-disabled-opacity: var(--forge-icon-button-disabled-opacity, 0.38);\n  --_icon-button-popover-icon-padding: var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));\n  --_icon-button-focus-indicator-color: var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n}\n\n.forge-icon-button {\n  display: var(--_icon-button-display);\n  position: relative;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  z-index: 0;\n  display: var(--_icon-button-display);\n  align-items: center;\n  justify-content: center;\n  gap: var(--_icon-button-gap);\n  box-sizing: border-box;\n  height: var(--_icon-button-density-large-size);\n  min-width: var(--_icon-button-density-large-size);\n  border: var(--_icon-button-border);\n  border-start-start-radius: var(--_icon-button-shape-start-start);\n  border-start-end-radius: var(--_icon-button-shape-start-end);\n  border-end-start-radius: var(--_icon-button-shape-end-start);\n  border-end-end-radius: var(--_icon-button-shape-end-end);\n  padding: var(--_icon-button-padding);\n  box-shadow: var(--_icon-button-shadow);\n  color: var(--_icon-button-icon-color);\n  background: var(--_icon-button-background-color);\n  font-size: var(--_icon-button-icon-size);\n  cursor: var(--_icon-button-cursor);\n  user-select: none;\n  transition-property: box-shadow, background;\n  transition-duration: var(--_icon-button-transition-duration);\n  transition-timing-function: var(--_icon-button-transition-timing);\n}\n\n.forge-icon-button img,\n.forge-icon-button svg {\n  height: var(--_icon-button-icon-size);\n  width: var(--_icon-button-icon-size);\n}\n\n.forge-icon-button svg {\n  fill: currentColor;\n}\n\n.forge-icon-button:not(:disabled) {\n  --_state-layer-display: var(--forge-state-layer-display, flex);\n  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-icon-button:not(:disabled)::before {\n  opacity: 0;\n  position: absolute;\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n\n.forge-icon-button:not(:disabled):hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-icon-button:not(:disabled):active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.forge-icon-button:not(:disabled) {\n  --forge-state-layer-color: var(--_icon-button-icon-color);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n.forge-icon-button:not(:disabled) {\n  outline: none;\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n  inset: calc(-1 * var(--_focus-indicator-outward-offset));\n  outline: var(--_focus-indicator-width) solid currentColor;\n  content: "";\n  display: block;\n}\n\n.forge-icon-button:not(:disabled) {\n  --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);\n  --forge-focus-indicator-shape: var(--_icon-button-shape);\n}\n\n.forge-icon-button:not(:disabled):where(.forge-icon-button--text,\n:not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {\n  --forge-focus-indicator-outward-offset: 0px;\n}\n\n.forge-icon-button--outlined {\n  border-width: var(--_icon-button-outlined-border-width);\n  border-style: var(--_icon-button-outlined-border-style);\n  border-color: var(--_icon-button-outlined-border-color);\n}\n\n.forge-icon-button--tonal {\n  --_icon-button-icon-color: var(--_icon-button-tonal-icon-color);\n  --_icon-button-background-color: var(--_icon-button-tonal-background-color);\n}\n\n.forge-icon-button--filled, .forge-icon-button--raised {\n  --_icon-button-icon-color: var(--_icon-button-filled-icon-color);\n  --_icon-button-background-color: var(--_icon-button-filled-background-color);\n}\n\n.forge-icon-button--raised {\n  --_icon-button-shadow: var(--_icon-button-raised-shadow);\n}\n\n.forge-icon-button--raised:hover {\n  --_icon-button-raised-shadow: var(--_icon-button-raised-hover-shadow);\n}\n\n.forge-icon-button--raised:active {\n  --_icon-button-raised-shadow: var(--_icon-button-raised-active-shadow);\n}\n\n.forge-icon-button--squared {\n  --_icon-button-shape: var(--_icon-button-shape-squared);\n}\n\n.forge-icon-button--small {\n  --_icon-button-size: var(--_icon-button-density-small-size);\n  --_icon-button-icon-size: var(--_icon-button-density-small-icon-size);\n  --_icon-button-padding: var(--_icon-button-density-small-padding);\n}\n\n.forge-icon-button--small > * {\n  font-size: var(--_icon-button-density-small-icon-size);\n}\n\n.forge-icon-button--medium {\n  --_icon-button-size: var(--_icon-button-density-medium-size);\n  --_icon-button-padding: var(--_icon-button-density-medium-padding);\n}\n\n.forge-icon-button:disabled {\n  pointer-events: none;\n  opacity: var(--_icon-button-disabled-opacity);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n\n.forge-icon-button forge-circular-progress {\n  --forge-circular-progress-indicator-color: var(--_icon-button-icon-color);\n  --forge-circular-progress-track-color: transparent;\n  --forge-circular-progress-size: 1em;\n}\n\n.ai-voice-input {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.ai-voice-input .forge-icon-button.recording {\n  position: relative;\n  animation: pulse 1.5s ease-in-out infinite;\n  --forge-icon-button-background-color: transparent;\n}\n.ai-voice-input .forge-icon-button.recording::before {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: var(--forge-theme-error-container-low, #f6e0e4);\n  transform: translate(-50%, -50%) scale(0);\n  animation: pulse-ring 1.5s ease-in-out infinite;\n  z-index: -1;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.1);\n    opacity: 0.7;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes pulse-ring {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    opacity: 0.8;\n  }\n  50% {\n    transform: translate(-50%, -50%) scale(1.3);\n    opacity: 0.4;\n  }\n  100% {\n    transform: translate(-50%, -50%) scale(1.6);\n    opacity: 0;\n  }\n}';
+export {
+  styles as default
+};

package/dist/ai-voice-input/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-voice-input';

package/dist/ai-voice-input/index.mjs

@@ -0,0 +1,5 @@
+import { AiVoiceInputComponent, AiVoiceInputComponentTagName } from "./ai-voice-input.mjs";
+export {
+  AiVoiceInputComponent,
+  AiVoiceInputComponentTagName
+};

package/dist/core/drag-controller.d.ts

@@ -0,0 +1,66 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+export interface DragControllerOptions {
+    /** The element to make draggable */
+    targetElementRef: Ref<HTMLElement>;
+    /** The drag handle element reference */
+    dragHandleRef: Ref<HTMLElement>;
+    /** Whether to snap back to viewport bounds on release (default: true) */
+    snapToViewport?: boolean;
+    /** Whether keyboard navigation should be constrained to viewport (default: true) */
+    constrainKeyboardNavigation?: boolean;
+    /** Step size for keyboard navigation in pixels (default: 10) */
+    keyboardStep?: number;
+    /** Animation duration for snap-back in milliseconds (default: 200) */
+    snapAnimationDuration?: number;
+    /** Whether the element can be dragged outside viewport boundaries during drag (default: true) */
+    allowOutOfBounds?: boolean;
+}
+export declare class DragController implements ReactiveController {
+    private _host;
+    private _options;
+    private _isDragging;
+    private _currentTransformX;
+    private _currentTransformY;
+    private _dragOffsetX;
+    private _dragOffsetY;
+    private _dragAbortController?;
+    constructor(host: ReactiveControllerHost, options: DragControllerOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Gets whether the element is currently being dragged
+     */
+    get isDragging(): boolean;
+    /**
+     * Gets the current transform values
+     */
+    get currentTransform(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Resets the drag position to original location
+     */
+    resetPosition(): void;
+    /**
+     * Cleanup method for removing event listeners and resetting state
+     */
+    cleanup(): void;
+    /**
+     * Handle pointer down event to start dragging
+     */
+    handlePointerDown: (event: PointerEvent) => void;
+    /**
+     * Handle keyboard navigation for drag handle
+     */
+    handleKeyDown: (event: KeyboardEvent) => void;
+    private _handlePointerMove;
+    private _handlePointerUp;
+    private _snapToViewport;
+    private _constrainToViewport;
+    private _getOriginalPosition;
+    private _getCurrentTransform;
+    private _addDragListeners;
+    private _removeDragListeners;
+}

package/dist/core/drag-controller.mjs

@@ -0,0 +1,219 @@
+class DragController {
+  constructor(host, options) {
+    this._isDragging = false;
+    this._currentTransformX = 0;
+    this._currentTransformY = 0;
+    this._dragOffsetX = 0;
+    this._dragOffsetY = 0;
+    this.handlePointerDown = (event) => {
+      event.preventDefault();
+      const targetElement = this._options.targetElementRef.value;
+      const dragHandle = this._options.dragHandleRef.value;
+      if (!targetElement || !dragHandle) {
+        return;
+      }
+      dragHandle.setPointerCapture(event.pointerId);
+      this._getCurrentTransform(targetElement);
+      const targetRect = targetElement.getBoundingClientRect();
+      this._dragOffsetX = event.clientX - targetRect.left;
+      this._dragOffsetY = event.clientY - targetRect.top;
+      this._isDragging = true;
+      this._host.requestUpdate();
+      this._addDragListeners();
+    };
+    this.handleKeyDown = (event) => {
+      const step = this._options.keyboardStep;
+      let deltaX = 0;
+      let deltaY = 0;
+      switch (event.key) {
+        case "ArrowUp":
+          deltaY = -step;
+          break;
+        case "ArrowDown":
+          deltaY = step;
+          break;
+        case "ArrowLeft":
+          deltaX = -step;
+          break;
+        case "ArrowRight":
+          deltaX = step;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const targetElement = this._options.targetElementRef.value;
+      if (!targetElement) {
+        return;
+      }
+      this._getCurrentTransform(targetElement);
+      const newX = this._currentTransformX + deltaX;
+      const newY = this._currentTransformY + deltaY;
+      if (this._options.constrainKeyboardNavigation) {
+        const constrainedPosition = this._constrainToViewport(targetElement, newX, newY);
+        this._currentTransformX = constrainedPosition.x;
+        this._currentTransformY = constrainedPosition.y;
+      } else {
+        this._currentTransformX = newX;
+        this._currentTransformY = newY;
+      }
+      targetElement.style.transform = `translate(${this._currentTransformX}px, ${this._currentTransformY}px)`;
+    };
+    this._handlePointerMove = (event) => {
+      if (!this._isDragging) {
+        return;
+      }
+      event.preventDefault();
+      const targetElement = this._options.targetElementRef.value;
+      if (!targetElement) {
+        return;
+      }
+      const desiredX = event.clientX - this._dragOffsetX;
+      const desiredY = event.clientY - this._dragOffsetY;
+      const { originalX, originalY } = this._getOriginalPosition(targetElement);
+      const newTransformX = desiredX - originalX;
+      const newTransformY = desiredY - originalY;
+      this._currentTransformX = newTransformX;
+      this._currentTransformY = newTransformY;
+      targetElement.style.transform = `translate(${newTransformX}px, ${newTransformY}px)`;
+    };
+    this._handlePointerUp = (event) => {
+      if (!this._isDragging) {
+        return;
+      }
+      event.preventDefault();
+      const dragHandle = this._options.dragHandleRef.value;
+      if (dragHandle) {
+        dragHandle.releasePointerCapture(event.pointerId);
+      }
+      if (this._options.snapToViewport) {
+        this._snapToViewport();
+      }
+      this._isDragging = false;
+      this._host.requestUpdate();
+      this._removeDragListeners();
+    };
+    this._host = host;
+    this._options = {
+      snapToViewport: true,
+      constrainKeyboardNavigation: true,
+      keyboardStep: 10,
+      snapAnimationDuration: 200,
+      allowOutOfBounds: true,
+      ...options
+    };
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.cleanup();
+  }
+  /**
+   * Gets whether the element is currently being dragged
+   */
+  get isDragging() {
+    return this._isDragging;
+  }
+  /**
+   * Gets the current transform values
+   */
+  get currentTransform() {
+    return { x: this._currentTransformX, y: this._currentTransformY };
+  }
+  /**
+   * Resets the drag position to original location
+   */
+  resetPosition() {
+    const targetElement = this._options.targetElementRef.value;
+    if (targetElement) {
+      targetElement.style.transform = "";
+      targetElement.style.transition = "";
+      this._currentTransformX = 0;
+      this._currentTransformY = 0;
+      this._dragOffsetX = 0;
+      this._dragOffsetY = 0;
+    }
+  }
+  /**
+   * Cleanup method for removing event listeners and resetting state
+   */
+  cleanup() {
+    this._removeDragListeners();
+    this._isDragging = false;
+  }
+  _snapToViewport() {
+    const targetElement = this._options.targetElementRef.value;
+    if (!targetElement) {
+      return;
+    }
+    const constrainedPosition = this._constrainToViewport(
+      targetElement,
+      this._currentTransformX,
+      this._currentTransformY
+    );
+    if (constrainedPosition.x !== this._currentTransformX || constrainedPosition.y !== this._currentTransformY) {
+      this._currentTransformX = constrainedPosition.x;
+      this._currentTransformY = constrainedPosition.y;
+      targetElement.style.transition = `transform ${this._options.snapAnimationDuration}ms cubic-bezier(0.2, 0, 0, 1)`;
+      targetElement.style.transform = `translate(${constrainedPosition.x}px, ${constrainedPosition.y}px)`;
+      setTimeout(() => {
+        if (targetElement) {
+          targetElement.style.transition = "";
+        }
+      }, this._options.snapAnimationDuration);
+    }
+  }
+  _constrainToViewport(targetElement, transformX, transformY) {
+    const targetWidth = targetElement.offsetWidth;
+    const targetHeight = targetElement.offsetHeight;
+    const { originalX, originalY } = this._getOriginalPosition(targetElement);
+    const maxTransformX = window.innerWidth - targetWidth - originalX;
+    const minTransformX = -originalX;
+    const maxTransformY = window.innerHeight - targetHeight - originalY;
+    const minTransformY = -originalY;
+    const constrainedX = Math.max(minTransformX, Math.min(transformX, maxTransformX));
+    const constrainedY = Math.max(minTransformY, Math.min(transformY, maxTransformY));
+    return { x: constrainedX, y: constrainedY };
+  }
+  _getOriginalPosition(targetElement) {
+    const targetWidth = targetElement.offsetWidth;
+    const targetHeight = targetElement.offsetHeight;
+    const computedStyle = window.getComputedStyle(targetElement);
+    const originalX = parseFloat(computedStyle.right) ? window.innerWidth - parseFloat(computedStyle.right) - targetWidth : parseFloat(computedStyle.left) || 0;
+    const originalY = parseFloat(computedStyle.bottom) ? window.innerHeight - parseFloat(computedStyle.bottom) - targetHeight : parseFloat(computedStyle.top) || 0;
+    return { originalX, originalY };
+  }
+  _getCurrentTransform(targetElement) {
+    const currentTransform = targetElement.style.transform;
+    this._currentTransformX = 0;
+    this._currentTransformY = 0;
+    if (currentTransform) {
+      const match = currentTransform.match(/translate\((-?\d+(?:\.\d+)?)px,\s*(-?\d+(?:\.\d+)?)px\)/);
+      if (match) {
+        this._currentTransformX = parseFloat(match[1]);
+        this._currentTransformY = parseFloat(match[2]);
+      }
+    }
+  }
+  _addDragListeners() {
+    if (!this._dragAbortController) {
+      this._dragAbortController = new AbortController();
+      document.addEventListener("pointermove", this._handlePointerMove, {
+        signal: this._dragAbortController.signal
+      });
+      document.addEventListener("pointerup", this._handlePointerUp, {
+        signal: this._dragAbortController.signal
+      });
+    }
+  }
+  _removeDragListeners() {
+    if (this._dragAbortController) {
+      this._dragAbortController.abort();
+      this._dragAbortController = void 0;
+    }
+  }
+}
+export {
+  DragController
+};

package/dist/core/index.d.ts

@@ -0,0 +1 @@
+export { DragController, type DragControllerOptions } from './drag-controller.js';

package/dist/core/index.mjs

@@ -0,0 +1,4 @@
+import { DragController } from "./drag-controller.mjs";
+export {
+  DragController
+};

package/dist/core/overlay/index.d.ts

@@ -0,0 +1 @@
+export { ForgeAiOverlayComponent, type OverlayPlacement } from './overlay.js';

package/dist/core/overlay/index.mjs

@@ -0,0 +1,4 @@
+import { ForgeAiOverlayComponent } from "./overlay.mjs";
+export {
+  ForgeAiOverlayComponent
+};

package/dist/core/overlay/overlay.d.ts

@@ -0,0 +1,61 @@
+import { Placement } from '@floating-ui/dom';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-overlay': ForgeAiOverlayComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-overlay-toggle': CustomEvent<{
+            open: boolean;
+            newState: string;
+            oldState: string;
+        }>;
+    }
+}
+export type OverlayPlacement = Placement;
+/**
+ * @summary A low-level overlay component for internal use within AI components.
+ *
+ * @cssprop --ai-overlay-max-width - The maximum width of the overlay.
+ * @cssprop --ai-overlay-max-height - The maximum height of the overlay.
+ * @cssprop --ai-overlay-min-width - The minimum width of the overlay.
+ * @cssprop --ai-overlay-min-height - The minimum height of the overlay.
+ *
+ * @slot - The default slot for overlay content.
+ */
+export declare class ForgeAiOverlayComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * The anchor element to position the overlay relative to.
+     */
+    anchor: Element | null;
+    /**
+     * The placement of the overlay relative to the anchor.
+     */
+    placement: OverlayPlacement;
+    /**
+     * Whether the overlay should flip to the opposite side when there's no space.
+     */
+    flip: boolean;
+    /**
+     * Whether the overlay should shift to stay in view.
+     */
+    shift: boolean;
+    /**
+     * Whether the overlay is open.
+     */
+    open: boolean;
+    private _overlayElement;
+    private _cleanupAutoUpdate;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    private _handleOpenChange;
+    private _showOverlay;
+    private _hideOverlay;
+    private _updatePosition;
+    private _computePosition;
+    private _roundByDPR;
+    private _cleanup;
+    private _onToggle;
+    render(): TemplateResult;
+}