@tylertech/forge-ai 0.13.0 → 0.13.2

package/dist/ai-modal/ai-modal.d.ts

@@ -1,11 +1,14 @@
 import { LitElement, PropertyValues, TemplateResult, CSSResult } from 'lit';
+export type AiModalSizeStrategy = 'auto' | 'fixed';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-modal': AiModalComponent;
     }
     interface HTMLElementEventMap {
         'forge-ai-modal-open': CustomEvent<void>;
-        'forge-ai-modal-close': CustomEvent<void>;
+        'forge-ai-modal-close': CustomEvent<{
+            reason: 'backdrop' | 'escape' | 'programmatic';
+        }>;
         'forge-ai-modal-fullscreen-change': CustomEvent<{
             isFullscreen: boolean;
         }>;
@@ -17,7 +20,7 @@ declare global {
  * @slot - Default slot for modal content
  *
  * @event {CustomEvent<void>} forge-ai-modal-open - Fired when the modal is opened
- * @event {CustomEvent<void>} forge-ai-modal-close - Fired when the modal is closed
+ * @event {CustomEvent<{ reason: 'backdrop' | 'escape' | 'programmatic' }>} forge-ai-modal-close - Fired when the modal is closed. Detail includes reason for closing.
  * @event {CustomEvent<{ isFullscreen: boolean }>} forge-ai-modal-fullscreen-change - Fired when the fullscreen state changes
  *
  * @cssproperty --forge-ai-modal-width - Width of the modal in non-fullscreen mode
@@ -38,6 +41,12 @@ export declare class AiModalComponent extends LitElement {
      * When not explicitly set, this will be automatically determined based on viewport size.
      */
     fullscreen?: boolean;
+    /**
+     * Controls the modal sizing strategy.
+     * - 'auto' (default): Automatically switches to fullscreen on viewports < 768px
+     * - 'fixed': Maintains defined size regardless of viewport, never auto-fullscreens
+     */
+    sizeStrategy: AiModalSizeStrategy;
     private _autoFullscreen;
     constructor();
     render(): TemplateResult;

package/dist/ai-modal/ai-modal.mjs

@@ -21,16 +21,18 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _mediaQuery, _internals, _AiModalComponent_instances, updateFullscreenState_fn, handleDialogClose_fn, handleDialogClick_fn, setupMediaQuery_fn, cleanupMediaQuery_fn, _handleMediaChange;
+var _mediaQuery, _internals, _closeReason, _AiModalComponent_instances, updateFullscreenState_fn, handleDialogClose_fn, handleDialogClick_fn, handleDialogKeydown_fn, setupMediaQuery_fn, cleanupMediaQuery_fn, _handleMediaChange;
 const FULLSCREEN_WIDTH_THRESHOLD = 768;
 let AiModalComponent = class extends LitElement {
   constructor() {
     super();
     __privateAdd(this, _AiModalComponent_instances);
     this.open = false;
+    this.sizeStrategy = "auto";
     this._autoFullscreen = window.innerWidth <= FULLSCREEN_WIDTH_THRESHOLD;
     __privateAdd(this, _mediaQuery);
     __privateAdd(this, _internals);
+    __privateAdd(this, _closeReason, "programmatic");
     __privateAdd(this, _handleMediaChange, (e) => {
       const previousFullscreen = this._autoFullscreen;
       this._autoFullscreen = e.matches;
@@ -50,7 +52,7 @@ let AiModalComponent = class extends LitElement {
     __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
   }
   render() {
-    const isFullscreen = this.fullscreen ?? this._autoFullscreen;
+    const isFullscreen = this.sizeStrategy === "fixed" ? this.fullscreen ?? false : this.fullscreen ?? this._autoFullscreen;
     const classes = {
       "forge-dialog": true,
       "forge-dialog--fullscreen": isFullscreen
@@ -60,7 +62,8 @@ let AiModalComponent = class extends LitElement {
         class=${classMap(classes)}
         aria-labelledby="chat-interface-title"
         @close=${__privateMethod(this, _AiModalComponent_instances, handleDialogClose_fn)}
-        @click=${__privateMethod(this, _AiModalComponent_instances, handleDialogClick_fn)}>
+        @click=${__privateMethod(this, _AiModalComponent_instances, handleDialogClick_fn)}
+        @keydown=${__privateMethod(this, _AiModalComponent_instances, handleDialogKeydown_fn)}>
         <slot></slot>
       </dialog>
     `;
@@ -77,17 +80,26 @@ let AiModalComponent = class extends LitElement {
     if (changedProperties.has("open")) {
       if (this.open) {
         if (this._dialog && !this._dialog.open) {
+          this.setAttribute("data-handles-escape", "");
           this._dialog.showModal();
           this.dispatchEvent(new CustomEvent("forge-ai-modal-open", { bubbles: true, composed: true }));
         }
       } else {
         if (this._dialog?.open) {
           this._dialog.close();
-          this.dispatchEvent(new CustomEvent("forge-ai-modal-close", { bubbles: true, composed: true }));
         }
+        this.removeAttribute("data-handles-escape");
+        this.dispatchEvent(
+          new CustomEvent("forge-ai-modal-close", {
+            bubbles: true,
+            composed: true,
+            detail: { reason: __privateGet(this, _closeReason) }
+          })
+        );
+        __privateSet(this, _closeReason, "programmatic");
       }
     }
-    if (changedProperties.has("fullscreen")) {
+    if (changedProperties.has("fullscreen") || changedProperties.has("sizeStrategy")) {
       __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
     }
   }
@@ -101,24 +113,34 @@ let AiModalComponent = class extends LitElement {
    * Closes the modal dialog.
    */
   close() {
+    __privateSet(this, _closeReason, "programmatic");
     this.open = false;
   }
 };
 _mediaQuery = /* @__PURE__ */ new WeakMap();
 _internals = /* @__PURE__ */ new WeakMap();
+_closeReason = /* @__PURE__ */ new WeakMap();
 _AiModalComponent_instances = /* @__PURE__ */ new WeakSet();
 updateFullscreenState_fn = function() {
-  const isFullscreen = this.fullscreen ?? this._autoFullscreen;
+  const isFullscreen = this.sizeStrategy === "fixed" ? this.fullscreen ?? false : this.fullscreen ?? this._autoFullscreen;
   toggleState(__privateGet(this, _internals), "fullscreen", isFullscreen);
 };
 handleDialogClose_fn = function() {
+  __privateSet(this, _closeReason, "escape");
   this.open = false;
 };
 handleDialogClick_fn = function(event) {
   if (event.target === this._dialog) {
+    event.stopPropagation();
+    __privateSet(this, _closeReason, "backdrop");
     this.close();
   }
 };
+handleDialogKeydown_fn = function(event) {
+  if (event.key === "Escape") {
+    event.stopPropagation();
+  }
+};
 setupMediaQuery_fn = function() {
   __privateSet(this, _mediaQuery, window.matchMedia(`(max-width: ${FULLSCREEN_WIDTH_THRESHOLD}px)`));
   __privateGet(this, _mediaQuery).addEventListener("change", __privateGet(this, _handleMediaChange));
@@ -138,6 +160,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], AiModalComponent.prototype, "fullscreen", 2);
+__decorateClass([
+  property({ type: String, attribute: "size-strategy" })
+], AiModalComponent.prototype, "sizeStrategy", 2);
 __decorateClass([
   state()
 ], AiModalComponent.prototype, "_autoFullscreen", 2);

package/dist/ai-prompt/ai-prompt.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues, TemplateResult, CSSResult } from 'lit';
-import { SlashCommand } from '../ai-chatbot/types.js';
+import { SlashCommand, ContextItem } from '../ai-chatbot/types.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-prompt': AiPromptComponent;
@@ -11,6 +11,10 @@ declare global {
         'forge-ai-prompt-stop': CustomEvent<void>;
         'forge-ai-prompt-debug-toggle': CustomEvent<void>;
         'forge-ai-prompt-command': CustomEvent<ForgeAiPromptCommandEventData>;
+        'forge-ai-prompt-context-remove': CustomEvent<{
+            id: string;
+            item: ContextItem;
+        }>;
     }
 }
 export interface ForgeAiPromptSendEventData {
@@ -65,6 +69,8 @@ export declare class AiPromptComponent extends LitElement {
     debugMode: boolean;
     /** Available slash commands */
     slashCommands: SlashCommand[];
+    /** Context items to display above the input */
+    contextItems: ContextItem[];
     private _slashMenuOpen;
     private _slashMenuQuery;
     private _inputElement;

package/dist/ai-prompt/ai-prompt.mjs

@@ -1,10 +1,11 @@
-import { unsafeCSS, LitElement, html } from "lit";
+import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, state, query, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { toggleState } from "../utils.mjs";
 import styles from "./ai-prompt.scss.mjs";
 import "../ai-slash-command-menu/ai-slash-command-menu.mjs";
 import "../core/tooltip/tooltip.mjs";
+import "../ai-context-items/ai-context-items.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -31,7 +32,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
     return __privateGet(obj, member, getter);
   }
 });
-var _internals, _messageHistory, _historyIndex, _draftMessage, _AiPromptComponent_instances, setCssState_fn, resetHistoryNavigation_fn, isCursorOnFirstLine_fn, isCursorOnLastLine_fn, isCursorAtStart_fn, isCursorAtEnd_fn, moveCursorToStart_fn, moveCursorToEnd_fn, navigateHistory_fn, _actionsStartSlot, _actionsEndSlot, shouldShowStopButton_get, actions_get, handleSlashCommandSelect_fn, handleSlashCommandClose_fn, textArea_get, sendButton_get, debugButton_get, slashCommandMenu_get;
+var _internals, _messageHistory, _historyIndex, _draftMessage, _AiPromptComponent_instances, setCssState_fn, resetHistoryNavigation_fn, isCursorOnFirstLine_fn, isCursorOnLastLine_fn, isCursorAtStart_fn, isCursorAtEnd_fn, moveCursorToStart_fn, moveCursorToEnd_fn, navigateHistory_fn, _actionsStartSlot, _actionsEndSlot, shouldShowStopButton_get, actions_get, handleSlashCommandSelect_fn, handleSlashCommandClose_fn, handleContextItemRemove_fn, contextItemsTemplate_get, textArea_get, sendButton_get, debugButton_get, slashCommandMenu_get;
 const MAX_HISTORY_SIZE = 50;
 const AiPromptComponentTagName = "forge-ai-prompt";
 let AiPromptComponent = class extends LitElement {
@@ -48,6 +49,7 @@ let AiPromptComponent = class extends LitElement {
     this.running = false;
     this.debugMode = false;
     this.slashCommands = [];
+    this.contextItems = [];
     this._slashMenuOpen = false;
     this._slashMenuQuery = "";
     __privateAdd(this, _internals);
@@ -260,6 +262,7 @@ let AiPromptComponent = class extends LitElement {
       () => html`
           <div class="input-container">
             <div class="forge-card">
+              ${__privateGet(this, _AiPromptComponent_instances, contextItemsTemplate_get)}
               <div class="forge-field">
                 ${__privateGet(this, _AiPromptComponent_instances, textArea_get)} ${when(this.debugMode, () => html` ${__privateGet(this, _AiPromptComponent_instances, debugButton_get)} `)}
               </div>
@@ -274,6 +277,7 @@ let AiPromptComponent = class extends LitElement {
       () => html`
           <div class="input-container">
             <div class="forge-card">
+              ${__privateGet(this, _AiPromptComponent_instances, contextItemsTemplate_get)}
               <div class="forge-field">
                 ${__privateGet(this, _actionsStartSlot)} ${__privateGet(this, _AiPromptComponent_instances, textArea_get)} ${when(this.debugMode, () => html` ${__privateGet(this, _AiPromptComponent_instances, debugButton_get)} `)}
                 <div class="actions-end-container">${__privateGet(this, _actionsEndSlot)} ${__privateGet(this, _AiPromptComponent_instances, sendButton_get)}</div>
@@ -394,6 +398,26 @@ handleSlashCommandClose_fn = function() {
   this._slashMenuOpen = false;
   this._slashMenuQuery = "";
 };
+handleContextItemRemove_fn = function(evt) {
+  this.dispatchEvent(
+    new CustomEvent("forge-ai-prompt-context-remove", {
+      detail: { id: evt.detail.id, item: evt.detail.item },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+contextItemsTemplate_get = function() {
+  if (this.contextItems.length === 0) {
+    return nothing;
+  }
+  return html`
+      <forge-ai-context-items
+        .items=${this.contextItems}
+        @forge-ai-context-items-remove=${__privateMethod(this, _AiPromptComponent_instances, handleContextItemRemove_fn)}>
+      </forge-ai-context-items>
+    `;
+};
 textArea_get = function() {
   return html` <textarea
       id="chat-input"
@@ -486,6 +510,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], AiPromptComponent.prototype, "slashCommands", 2);
+__decorateClass([
+  property({ attribute: false })
+], AiPromptComponent.prototype, "contextItems", 2);
 __decorateClass([
   state()
 ], AiPromptComponent.prototype, "_slashMenuOpen", 2);

package/dist/ai-sidebar/ai-sidebar.d.ts

@@ -24,6 +24,11 @@ export declare class AiSidebarComponent extends LitElement {
      * Indicates whether the sidebar is open.
      */
     open: boolean;
+    /**
+     * Enables sidebar resizing.
+     */
+    resizable: boolean;
+    private _width;
     /**
      * Indicates whether the sidebar is in a closing animation state.
      */
@@ -32,6 +37,10 @@ export declare class AiSidebarComponent extends LitElement {
      * Indicates whether the animation container is in a closing state.
      */
     private _containerClosing;
+    /**
+     * Indicates whether the sidebar is being resized.
+     */
+    private _isResizing;
     render(): TemplateResult;
     /**
      * Opens the sidebar.
@@ -45,4 +54,6 @@ export declare class AiSidebarComponent extends LitElement {
      * Toggles the sidebar open state.
      */
     toggle(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
 }

package/dist/ai-sidebar/ai-sidebar.mjs

@@ -1,6 +1,10 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { when } from "lit/directives/when.js";
+import { ResizeController } from "../core/resize-controller.mjs";
 import styles from "./ai-sidebar.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -16,39 +20,83 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, dispatchEvent_fn;
+var _resizeHandleRef, _drawerRef, _containerRef, _resizeController, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, handleResizePointerDown_fn, handleResizeKeyDown_fn, dispatchEvent_fn;
+const DEFAULT_WIDTH = 420;
+const MIN_WIDTH = 360;
+const MAX_WIDTH = 800;
 const AiSidebarComponentTagName = "forge-ai-sidebar";
 let AiSidebarComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _AiSidebarComponent_instances);
     this.open = false;
+    this.resizable = true;
+    this._width = DEFAULT_WIDTH;
     this._closing = false;
     this._containerClosing = false;
+    this._isResizing = false;
+    __privateAdd(this, _resizeHandleRef, createRef());
+    __privateAdd(this, _drawerRef, createRef());
+    __privateAdd(this, _containerRef, createRef());
+    __privateAdd(this, _resizeController);
   }
   render() {
     const containerClasses = {
       "animation-container": true,
       "animation-container--open": this.open && !this._containerClosing,
       "animation-container--closing": this._containerClosing,
-      "animation-container--closed": !this.open && !this._containerClosing
+      "animation-container--closed": !this.open && !this._containerClosing,
+      "animation-container--resizing": this._isResizing
     };
     const drawerClasses = {
       "forge-drawer": true,
       "forge-drawer--right": true,
       "forge-drawer--closing": this._closing,
-      "forge-drawer--closed": !this.open && !this._closing
+      "forge-drawer--closed": !this.open && !this._closing,
+      "forge-drawer--resizing": this._isResizing
+    };
+    const handleClasses = {
+      "resize-handle": true,
+      "resize-handle--active": this._isResizing
+    };
+    const containerStyles = {
+      "--forge-drawer-width": `${this._width}px`
     };
     return html`
-      <div class=${classMap(containerClasses)} @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn)}>
+      <div
+        ${ref(__privateGet(this, _containerRef))}
+        class=${classMap(containerClasses)}
+        style=${styleMap(containerStyles)}
+        @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn)}>
         <aside
+          ${ref(__privateGet(this, _drawerRef))}
           class=${classMap(drawerClasses)}
           ?open=${this.open}
           role="complementary"
           aria-hidden=${!this.open}
           @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleDrawerTransitionEnd_fn)}>
+          ${when(
+      this.resizable,
+      () => html`
+              <div
+                ${ref(__privateGet(this, _resizeHandleRef))}
+                class=${classMap(handleClasses)}
+                role="separator"
+                aria-orientation="vertical"
+                aria-label="Resize sidebar"
+                aria-valuemin="${MIN_WIDTH}"
+                aria-valuemax="${MAX_WIDTH}"
+                aria-valuenow=${this._width}
+                aria-valuetext="${this._width} pixels"
+                tabindex="0"
+                @pointerdown=${__privateMethod(this, _AiSidebarComponent_instances, handleResizePointerDown_fn)}
+                @keydown=${__privateMethod(this, _AiSidebarComponent_instances, handleResizeKeyDown_fn)}></div>
+            `
+    )}
           <slot></slot>
         </aside>
       </div>
@@ -84,7 +132,34 @@ let AiSidebarComponent = class extends LitElement {
       this.show();
     }
   }
+  firstUpdated() {
+    __privateSet(this, _resizeController, new ResizeController(this, {
+      targetElementRef: __privateGet(this, _containerRef),
+      resizeHandleRef: __privateGet(this, _resizeHandleRef),
+      minWidth: MIN_WIDTH,
+      maxWidth: MAX_WIDTH,
+      defaultWidth: DEFAULT_WIDTH,
+      onResize: (width) => {
+        this._width = width;
+      },
+      onResizeStart: () => {
+        this._isResizing = true;
+      },
+      onResizeEnd: () => {
+        this._isResizing = false;
+      }
+    }));
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("resizable") && !this.resizable) {
+      this._width = DEFAULT_WIDTH;
+    }
+  }
 };
+_resizeHandleRef = /* @__PURE__ */ new WeakMap();
+_drawerRef = /* @__PURE__ */ new WeakMap();
+_containerRef = /* @__PURE__ */ new WeakMap();
+_resizeController = /* @__PURE__ */ new WeakMap();
 _AiSidebarComponent_instances = /* @__PURE__ */ new WeakSet();
 handleContainerTransitionEnd_fn = function(evt) {
   if (evt.target === evt.currentTarget && this._containerClosing) {
@@ -98,6 +173,12 @@ handleDrawerTransitionEnd_fn = function(evt) {
     __privateMethod(this, _AiSidebarComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-close");
   }
 };
+handleResizePointerDown_fn = function(event) {
+  __privateGet(this, _resizeController)?.handlePointerDown(event);
+};
+handleResizeKeyDown_fn = function(event) {
+  __privateGet(this, _resizeController)?.handleKeyDown(event);
+};
 dispatchEvent_fn = function(type) {
   const event = new CustomEvent(type, {
     bubbles: true,
@@ -109,12 +190,21 @@ AiSidebarComponent.styles = unsafeCSS(styles);
 __decorateClass([
   property({ type: Boolean })
 ], AiSidebarComponent.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean })
+], AiSidebarComponent.prototype, "resizable", 2);
+__decorateClass([
+  state()
+], AiSidebarComponent.prototype, "_width", 2);
 __decorateClass([
   state()
 ], AiSidebarComponent.prototype, "_closing", 2);
 __decorateClass([
   state()
 ], AiSidebarComponent.prototype, "_containerClosing", 2);
+__decorateClass([
+  state()
+], AiSidebarComponent.prototype, "_isResizing", 2);
 AiSidebarComponent = __decorateClass([
   customElement(AiSidebarComponentTagName)
 ], AiSidebarComponent);

package/dist/ai-sidebar/ai-sidebar.scss.mjs

@@ -1,4 +1,4 @@
-const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-drawer {\n  --_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));\n  --_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_drawer-width:var(--forge-drawer-width, 256px);\n  --_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));\n  --_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms));\n}\n\n.forge-drawer {\n  width: var(--_drawer-width);\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  background-color: var(--_drawer-background);\n  border-color: var(--_drawer-border-color);\n  transition-property: transform;\n  transition-duration: var(--_drawer-transition-duration);\n  transition-timing-function: var(--_drawer-transition-easing);\n  border-right-width: var(--_drawer-border-width);\n  border-right-style: solid;\n}\n\n.forge-drawer--closing {\n  transform: translateX(-100%);\n  left: 0;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--closed {\n  transform: translateX(-100%);\n  left: 0;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--right {\n  border-left-width: var(--_drawer-border-width);\n  border-left-style: solid;\n  border-right: none;\n}\n\n.forge-drawer--right.forge-drawer--closing {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--right.forge-drawer--closed {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--mini {\n  width: var(--_mini-drawer-width);\n  z-index: var(--forge-z-index-surface, 1);\n  transition: width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing);\n}\n\n:host {\n  display: block;\n  width: auto;\n  height: 100%;\n  overflow: hidden;\n}\n\n.animation-container {\n  --forge-drawer-width: 420px; /* Default value, can be overridden */\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: relative;\n  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);\n  overflow: hidden;\n}\n.animation-container--closed {\n  width: 0;\n}\n.animation-container--closing {\n  width: 0;\n}\n.animation-container--open {\n  width: var(--forge-drawer-width);\n}\n\n.forge-drawer {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n}";
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-drawer {\n  --_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));\n  --_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_drawer-width:var(--forge-drawer-width, 256px);\n  --_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));\n  --_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms));\n}\n\n.forge-drawer {\n  width: var(--_drawer-width);\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  background-color: var(--_drawer-background);\n  border-color: var(--_drawer-border-color);\n  transition-property: transform;\n  transition-duration: var(--_drawer-transition-duration);\n  transition-timing-function: var(--_drawer-transition-easing);\n  border-right-width: var(--_drawer-border-width);\n  border-right-style: solid;\n}\n\n.forge-drawer--closing {\n  transform: translateX(-100%);\n  left: 0;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--closed {\n  transform: translateX(-100%);\n  left: 0;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--right {\n  border-left-width: var(--_drawer-border-width);\n  border-left-style: solid;\n  border-right: none;\n}\n\n.forge-drawer--right.forge-drawer--closing {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--right.forge-drawer--closed {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--mini {\n  width: var(--_mini-drawer-width);\n  z-index: var(--forge-z-index-surface, 1);\n  transition: width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing);\n}\n\n:host {\n  display: block;\n  width: auto;\n  height: 100%;\n  overflow: hidden;\n}\n\n.animation-container {\n  --forge-drawer-width: 420px;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: relative;\n  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);\n  overflow: hidden;\n}\n.animation-container--closed {\n  width: 0;\n}\n.animation-container--closing {\n  width: 0;\n}\n.animation-container--open {\n  width: var(--forge-drawer-width);\n}\n.animation-container--resizing {\n  transition: none;\n}\n\n.forge-drawer {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.forge-drawer--resizing {\n  user-select: none;\n  transition: none;\n}\n\n.resize-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 8px;\n  height: 100%;\n  cursor: ew-resize;\n  z-index: 10;\n}\n.resize-handle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background-color: var(--forge-theme-outline, #e0e0e0);\n  opacity: 0;\n  transition: all var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.resize-handle:hover::before {\n  opacity: 0.4;\n  width: 2px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: -2px;\n}\n.resize-handle:focus-visible::before {\n  opacity: 0.6;\n  width: 2px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle--active::before {\n  opacity: 0.8;\n  width: 3px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n\n:host([resizable=false]) .resize-handle {\n  display: none;\n}';
 export {
   styles as default
 };

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

@@ -31,6 +31,7 @@ export declare class AiSidebarChatComponent extends LitElement {
     static styles: CSSResult;
     open: boolean;
     expanded: boolean;
+    resizable: boolean;
     render(): TemplateResult;
     show(): void;
     close(): void;

package/dist/ai-sidebar-chat/ai-sidebar-chat.mjs

@@ -30,6 +30,7 @@ let AiSidebarChatComponent = class extends LitElement {
     __privateAdd(this, _AiSidebarChatComponent_instances);
     this.open = false;
     this.expanded = false;
+    this.resizable = true;
     __privateAdd(this, _sidebarRef, createRef());
     __privateAdd(this, _modalRef, createRef());
     __privateAdd(this, _slotContent, html`
@@ -55,6 +56,7 @@ let AiSidebarChatComponent = class extends LitElement {
           <forge-ai-sidebar
             ${ref(__privateGet(this, _sidebarRef))}
             ?open=${this.open && !this.expanded}
+            ?resizable=${this.resizable}
             @forge-ai-sidebar-open=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarOpen_fn)}
             @forge-ai-sidebar-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarClose_fn)}>
             ${__privateGet(this, _slotContent)}
@@ -145,6 +147,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], AiSidebarChatComponent.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean })
+], AiSidebarChatComponent.prototype, "resizable", 2);
 AiSidebarChatComponent = __decorateClass([
   customElement(AiSidebarChatComponentTagName)
 ], AiSidebarChatComponent);

package/dist/ai-spinner/ai-spinner.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 export declare const AiSpinnerComponentTagName: keyof HTMLElementTagNameMap;
-export type SpinnerSize = 'small' | 'medium' | 'large';
+export type SpinnerSize = 'extra-small' | 'small' | 'medium' | 'large';
 /**
  * @tag forge-ai-spinner
  *

package/dist/ai-spinner/ai-spinner.scss.mjs

@@ -1,4 +1,4 @@
-const styles = ":host {\n  display: inline-block;\n}\n\n.spinner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.spinner svg {\n  animation: rotate 1.4s linear infinite;\n}\n.spinner--small {\n  width: 24px;\n  height: 24px;\n}\n.spinner--medium {\n  width: 32px;\n  height: 32px;\n}\n.spinner--large {\n  width: 48px;\n  height: 48px;\n}\n\n.track {\n  stroke: var(--forge-ai-spinner-track-color, var(--forge-theme-outline-low, #9e9e9e));\n  opacity: 0.2;\n}\n\n.indicator {\n  stroke: var(--forge-ai-spinner-color, var(--forge-theme-primary, #3f51b5));\n  stroke-linecap: round;\n  stroke-dasharray: 125.6;\n  stroke-dashoffset: 125.6;\n  transform-origin: center;\n  animation: dash 1.4s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dashoffset: 125.6;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dashoffset: 31.4;\n    transform: rotate(240deg);\n  }\n  100% {\n    stroke-dashoffset: 125.6;\n    transform: rotate(720deg);\n  }\n}";
+const styles = ":host {\n  display: inline-block;\n}\n\n.spinner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.spinner svg {\n  animation: rotate 1.4s linear infinite;\n}\n.spinner--extra-small {\n  width: 16px;\n  height: 16px;\n}\n.spinner--small {\n  width: 24px;\n  height: 24px;\n}\n.spinner--medium {\n  width: 32px;\n  height: 32px;\n}\n.spinner--large {\n  width: 48px;\n  height: 48px;\n}\n\n.track {\n  stroke: var(--forge-ai-spinner-track-color, var(--forge-theme-outline-low, #9e9e9e));\n  opacity: 0.2;\n}\n\n.indicator {\n  stroke: var(--forge-ai-spinner-color, var(--forge-theme-primary, #3f51b5));\n  stroke-linecap: round;\n  stroke-dasharray: 125.6;\n  stroke-dashoffset: 125.6;\n  transform-origin: center;\n  animation: dash 1.4s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dashoffset: 125.6;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dashoffset: 31.4;\n    transform: rotate(240deg);\n  }\n  100% {\n    stroke-dashoffset: 125.6;\n    transform: rotate(720deg);\n  }\n}";
 export {
   styles as default
 };

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.d.ts

@@ -0,0 +1,44 @@
+import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { Thread } from '../ai-threads';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-thread-actions-menu': AiThreadActionsMenuComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-thread-actions-menu-rename': CustomEvent<ForgeAiThreadActionsMenuRenameEventData>;
+        'forge-ai-thread-actions-menu-delete-click': CustomEvent<ForgeAiThreadActionsMenuDeleteClickEventData>;
+        'forge-ai-thread-actions-menu-open': CustomEvent<ForgeAiThreadActionsMenuOpenEventData>;
+        'forge-ai-thread-actions-menu-close': CustomEvent<void>;
+    }
+}
+export interface ForgeAiThreadActionsMenuRenameEventData {
+    id: string;
+}
+export interface ForgeAiThreadActionsMenuDeleteClickEventData {
+    id: string;
+}
+export interface ForgeAiThreadActionsMenuOpenEventData {
+    id: string;
+}
+export declare const AiThreadActionsMenuComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-thread-actions-menu
+ *
+ * @slot trigger-icon - Slot for custom trigger icon (default: three-dot menu icon)
+ *
+ * @event {CustomEvent<ForgeAiThreadActionsMenuRenameEventData>} forge-ai-thread-actions-menu-rename - Fired when rename menu item is clicked.
+ * @event {CustomEvent<ForgeAiThreadActionsMenuDeleteClickEventData>} forge-ai-thread-actions-menu-delete-click - Fired when delete menu item is clicked. Parent should show confirmation modal.
+ * @event {CustomEvent<ForgeAiThreadActionsMenuOpenEventData>} forge-ai-thread-actions-menu-open - Fired when the dropdown menu is opened.
+ * @event {CustomEvent<void>} forge-ai-thread-actions-menu-close - Fired when the dropdown menu is closed.
+ *
+ * @description A reusable three-dot actions menu for thread items with rename and delete actions.
+ * Emits events for all actions. Parent components handle confirmation modals.
+ */
+export declare class AiThreadActionsMenuComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    thread: Thread;
+    showRename: boolean;
+    showDelete: boolean;
+    render(): TemplateResult;
+}