@tylertech/forge-ai 0.15.1 → 0.15.2

package/custom-elements.json

@@ -11767,13 +11767,24 @@
               "kind": "field",
               "name": "resizable",
               "type": {
-                "text": "boolean"
+                "text": "FeatureToggle"
               },
               "privacy": "public",
-              "default": "true",
-              "description": "Enables sidebar resizing.",
+              "default": "'on'",
+              "description": "Enables sidebar resizing. Set to `'off'` to disable and reset to the default width.",
               "attribute": "resizable"
             },
+            {
+              "kind": "field",
+              "name": "width",
+              "privacy": "public",
+              "default": "420",
+              "description": "The current width of the sidebar in pixels. Clamped to the min/max bounds and viewport.\nResized widths are persisted per tab in sessionStorage and shared across tabs via localStorage.\nOn load the session value is preferred, then the local value, then the default.",
+              "attribute": "width",
+              "type": {
+                "text": "number"
+              }
+            },
             {
               "kind": "method",
               "name": "show",
@@ -11816,6 +11827,10 @@
             {
               "description": "Fired when the sidebar is closed",
               "name": "forge-ai-sidebar-close"
+            },
+            {
+              "description": "Fired when a resize is committed via pointer release or keyboard step",
+              "name": "forge-ai-sidebar-resize"
             }
           ],
           "attributes": [
@@ -11831,11 +11846,17 @@
             {
               "name": "resizable",
               "type": {
-                "text": "boolean"
+                "text": "FeatureToggle"
               },
-              "default": "true",
-              "description": "Enables sidebar resizing.",
+              "default": "'on'",
+              "description": "Enables sidebar resizing. Set to `'off'` to disable and reset to the default width.",
               "fieldName": "resizable"
+            },
+            {
+              "name": "width",
+              "default": "DEFAULT_WIDTH",
+              "description": "The current width of the sidebar in pixels. Clamped to the min/max bounds and viewport.\nResized widths are persisted per tab in sessionStorage and shared across tabs via localStorage.\nOn load the session value is preferred, then the local value, then the default.",
+              "fieldName": "width"
             }
           ],
           "superclass": {
@@ -11919,12 +11940,23 @@
               "kind": "field",
               "name": "resizable",
               "type": {
-                "text": "boolean"
+                "text": "FeatureToggle"
               },
               "privacy": "public",
-              "default": "true",
+              "default": "'on'",
+              "description": "Enables sidebar resizing. Set to `'off'` to disable.",
               "attribute": "resizable"
             },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "public",
+              "description": "The current width of the sidebar in pixels. Retained across expand/collapse.",
+              "attribute": "width"
+            },
             {
               "kind": "method",
               "name": "show",
@@ -11992,6 +12024,10 @@
             {
               "description": "Fired when the sidebar chat is collapsed from modal",
               "name": "forge-ai-sidebar-chat-collapse"
+            },
+            {
+              "description": "Fired when the sidebar width is resized",
+              "name": "forge-ai-sidebar-chat-resize"
             }
           ],
           "attributes": [
@@ -12014,10 +12050,19 @@
             {
               "name": "resizable",
               "type": {
-                "text": "boolean"
+                "text": "FeatureToggle"
               },
-              "default": "true",
+              "default": "'on'",
+              "description": "Enables sidebar resizing. Set to `'off'` to disable.",
               "fieldName": "resizable"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The current width of the sidebar in pixels. Retained across expand/collapse.",
+              "fieldName": "width"
             }
           ],
           "superclass": {
@@ -16331,13 +16376,21 @@
       "path": "src/lib/ai-response-message-toolbar/ai-response-message-toolbar.ts",
       "lineNumber": 43
     },
+    "ForgeAiSidebarResizeEventData": {
+      "path": "src/lib/ai-sidebar/ai-sidebar.ts",
+      "lineNumber": 33
+    },
     "AiSidebarComponent": {
       "path": "src/lib/ai-sidebar/ai-sidebar.ts",
-      "lineNumber": 36
+      "lineNumber": 48
+    },
+    "ForgeAiSidebarChatResizeEventData": {
+      "path": "src/lib/ai-sidebar-chat/ai-sidebar-chat.ts",
+      "lineNumber": 26
     },
     "AiSidebarChatComponent": {
       "path": "src/lib/ai-sidebar-chat/ai-sidebar-chat.ts",
-      "lineNumber": 42
+      "lineNumber": 48
     },
     "AiSlashCommandMenuComponent": {
       "path": "src/lib/ai-slash-command-menu/ai-slash-command-menu.ts",
@@ -16517,7 +16570,7 @@
     },
     "ResizeController": {
       "path": "src/lib/core/resize-controller.ts",
-      "lineNumber": 18
+      "lineNumber": 19
     },
     "ThoughtBaseComponent": {
       "path": "src/lib/ai-chain-of-thought/thought-base/thought-base.ts",

package/dist/ai-chatbot-launcher/ai-chatbot-launcher.mjs

@@ -40,7 +40,7 @@ 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 _headerRef, _gradientContainerRef, _historyButtonRef, _historyPopoverSearchRef, _historyViewSearchRef, _internals, _pendingThreadDeleteSource, _deleteThreadController, _AiChatbotLauncherComponent_instances, setViewState_fn, focusAfterUpdate_fn, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, transitionToHistory_fn, handleHistoryBack_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleThreadRename_fn, handleEditSave_fn, handleEditCancel_fn, handleThreadNameClick_fn, handleThreadDelete_fn, handleHistoryButtonClick_fn, handleHistoryPopoverToggle_fn, handleViewAllClick_fn, handleThreadsSearchQuery_fn, handleThreadsSearchLoadMore_fn, handleThreadsSearchSelect_fn, handleThreadsSearchRetry_fn, handleThreadsSearchNewChat_fn, handleThreadsSearchRename_fn, handleThreadsSearchDelete_fn, handleThreadsSearchDeleteConfirm_fn, headingElement_get, promptTemplate_get, welcomeHeaderTemplate_get, welcomeSuggestionsTemplate_get, threadName_get, threadActionsMenu_get, conversationContentTemplate_get, historyContentTemplate_get, mainContentTemplate_get, showThreadsLoading_get, historyButtonTemplate_get, historyPopoverTemplate_get, promptSectionTemplate_get;
+var _headerRef, _gradientContainerRef, _historyButtonRef, _historyPopoverSearchRef, _historyViewSearchRef, _internals, _pendingThreadDeleteSource, _deleteThreadController, _AiChatbotLauncherComponent_instances, setViewState_fn, focusAfterUpdate_fn, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, transitionToHistory_fn, handleHistoryBack_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleThreadRename_fn, handleEditSave_fn, handleEditCancel_fn, handleThreadNameClick_fn, handleThreadDelete_fn, handleHistoryButtonClick_fn, handleHistoryPopoverToggle_fn, handleHistoryPopoverKeydown_fn, handleViewAllClick_fn, handleThreadsSearchQuery_fn, handleThreadsSearchLoadMore_fn, handleThreadsSearchSelect_fn, handleThreadsSearchRetry_fn, handleThreadsSearchNewChat_fn, handleThreadsSearchRename_fn, handleThreadsSearchDelete_fn, handleThreadsSearchDeleteConfirm_fn, headingElement_get, promptTemplate_get, welcomeHeaderTemplate_get, welcomeSuggestionsTemplate_get, threadName_get, threadActionsMenu_get, conversationContentTemplate_get, historyContentTemplate_get, mainContentTemplate_get, showThreadsLoading_get, historyButtonTemplate_get, historyPopoverTemplate_get, promptSectionTemplate_get;
 const HISTORY_POPOVER_INSET = 48;
 const AiChatbotLauncherComponentTagName = "forge-ai-chatbot-launcher";
 let AiChatbotLauncherComponent = class extends AiChatbotBase {
@@ -315,11 +315,22 @@ handleHistoryPopoverToggle_fn = function(evt) {
     void __privateMethod(this, _AiChatbotLauncherComponent_instances, focusAfterUpdate_fn).call(this, () => __privateGet(this, _historyPopoverSearchRef).value);
     return;
   }
+  const activeElement = this.shadowRoot?.activeElement ?? null;
+  const focusInsidePopover = evt.currentTarget.contains(activeElement);
   const focusLost = this.ownerDocument.activeElement === this.ownerDocument.body;
-  if (focusLost && this._viewState !== "history") {
+  if ((focusInsidePopover || focusLost) && this._viewState !== "history") {
     __privateGet(this, _historyButtonRef).value?.focus();
   }
 };
+handleHistoryPopoverKeydown_fn = function(evt) {
+  if (evt.key !== "Escape" || evt.defaultPrevented) {
+    return;
+  }
+  evt.preventDefault();
+  evt.stopPropagation();
+  this._historyPopoverOpen = false;
+  void __privateMethod(this, _AiChatbotLauncherComponent_instances, focusAfterUpdate_fn).call(this, () => __privateGet(this, _historyButtonRef).value);
+};
 handleViewAllClick_fn = function() {
   this._historyPopoverOpen = false;
   __privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToHistory_fn).call(this);
@@ -659,6 +670,7 @@ historyPopoverTemplate_get = function() {
         .flip=${true}
         .autoSize=${true}
         ?open=${this._historyPopoverOpen}
+        @keydown=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryPopoverKeydown_fn)}
         @forge-ai-popover-toggle=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryPopoverToggle_fn)}>
         <div class="history-popover" style=${popoverWidth ? `width: ${popoverWidth}px` : ""}>
           <forge-ai-threads-search

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

@@ -1,4 +1,5 @@
-import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult, CSSResult } from 'lit';
+import { FeatureToggle } from '../ai-chatbot';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-sidebar': AiSidebarComponent;
@@ -6,8 +7,12 @@ declare global {
     interface HTMLElementEventMap {
         'forge-ai-sidebar-open': CustomEvent<void>;
         'forge-ai-sidebar-close': CustomEvent<void>;
+        'forge-ai-sidebar-resize': CustomEvent<ForgeAiSidebarResizeEventData>;
     }
 }
+export interface ForgeAiSidebarResizeEventData {
+    width: number;
+}
 export declare const AiSidebarComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-sidebar
@@ -16,6 +21,7 @@ export declare const AiSidebarComponentTagName: keyof HTMLElementTagNameMap;
  *
  * @fires forge-ai-sidebar-open - Fired when the sidebar is opened
  * @fires forge-ai-sidebar-close - Fired when the sidebar is closed
+ * @fires forge-ai-sidebar-resize - Fired when a resize is committed via pointer release or keyboard step
  */
 export declare class AiSidebarComponent extends LitElement {
     #private;
@@ -25,10 +31,15 @@ export declare class AiSidebarComponent extends LitElement {
      */
     open: boolean;
     /**
-     * Enables sidebar resizing.
+     * Enables sidebar resizing. Set to `'off'` to disable and reset to the default width.
+     */
+    resizable: FeatureToggle;
+    /**
+     * The current width of the sidebar in pixels. Clamped to the min/max bounds and viewport.
+     * Resized widths are persisted per tab in sessionStorage and shared across tabs via localStorage.
+     * On load the session value is preferred, then the local value, then the default.
      */
-    resizable: boolean;
-    private _width;
+    width: number;
     /**
      * Indicates whether the sidebar is in a closing animation state.
      */
@@ -41,6 +52,7 @@ export declare class AiSidebarComponent extends LitElement {
      * Indicates whether the sidebar is being resized.
      */
     private _isResizing;
+    constructor();
     render(): TemplateResult;
     /**
      * Opens the sidebar.
@@ -54,6 +66,5 @@ export declare class AiSidebarComponent extends LitElement {
      * Toggles the sidebar open state.
      */
     toggle(): void;
-    firstUpdated(): void;
-    updated(changedProperties: Map<string, unknown>): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
 }

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

@@ -5,6 +5,7 @@ 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 { readStoredNumber, writeStoredNumber, removeStoredValue } from "../utils/storage-utils.mjs";
 import styles from "./ai-sidebar.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,18 +25,20 @@ 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 _resizeHandleRef, _drawerRef, _containerRef, _resizeController, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, handleResizePointerDown_fn, handleResizeKeyDown_fn, dispatchEvent_fn;
+var _resizeHandleRef, _drawerRef, _containerRef, _resizeController, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, handleResizePointerDown_fn, handleResizeKeyDown_fn, handleResizeCommit_fn, readPersistedWidth_fn, persistWidth_fn, clearPersistedWidth_fn, dispatchEvent_fn;
 const DEFAULT_WIDTH = 420;
 const MIN_WIDTH = 360;
 const MAX_WIDTH = 800;
+const WIDTH_STORAGE_KEY = "forge-ai-sidebar-width";
+const WIDTH_STORAGE_KINDS = ["session", "local"];
 const AiSidebarComponentTagName = "forge-ai-sidebar";
 let AiSidebarComponent = class extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     __privateAdd(this, _AiSidebarComponent_instances);
     this.open = false;
-    this.resizable = true;
-    this._width = DEFAULT_WIDTH;
+    this.resizable = "on";
+    this.width = DEFAULT_WIDTH;
     this._closing = false;
     this._containerClosing = false;
     this._isResizing = false;
@@ -43,6 +46,26 @@ let AiSidebarComponent = class extends LitElement {
     __privateAdd(this, _drawerRef, createRef());
     __privateAdd(this, _containerRef, createRef());
     __privateAdd(this, _resizeController);
+    this.width = __privateMethod(this, _AiSidebarComponent_instances, readPersistedWidth_fn).call(this) ?? DEFAULT_WIDTH;
+    __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;
+      },
+      onCommit: (width) => {
+        __privateMethod(this, _AiSidebarComponent_instances, handleResizeCommit_fn).call(this, width);
+      }
+    }));
   }
   render() {
     const containerClasses = {
@@ -64,7 +87,7 @@ let AiSidebarComponent = class extends LitElement {
       "resize-handle--active": this._isResizing
     };
     const containerStyles = {
-      "--forge-drawer-width": `${this._width}px`
+      "--forge-drawer-width": `${this.width}px`
     };
     return html`
       <div
@@ -80,7 +103,7 @@ let AiSidebarComponent = class extends LitElement {
           aria-hidden=${!this.open}
           @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleDrawerTransitionEnd_fn)}>
           ${when(
-      this.resizable,
+      this.resizable === "on",
       () => html`
               <div
                 ${ref(__privateGet(this, _resizeHandleRef))}
@@ -90,11 +113,18 @@ let AiSidebarComponent = class extends LitElement {
                 aria-label="Resize chatbot panel, use left and right arrow keys"
                 aria-valuemin="${MIN_WIDTH}"
                 aria-valuemax="${MAX_WIDTH}"
-                aria-valuenow=${this._width}
-                aria-valuetext="${this._width} pixels"
+                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>
+                @keydown=${__privateMethod(this, _AiSidebarComponent_instances, handleResizeKeyDown_fn)}>
+                <span class="resize-handle__grip" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" />
+                  </svg>
+                </span>
+              </div>
             `
     )}
           <slot></slot>
@@ -132,27 +162,15 @@ 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;
+  willUpdate(changedProperties) {
+    if (changedProperties.has("width") && this.width !== __privateGet(this, _resizeController).currentWidth) {
+      __privateGet(this, _resizeController).setWidth(this.width);
+    }
+    if (changedProperties.has("resizable") && this.resizable === "off") {
+      __privateGet(this, _resizeController).resetWidth();
+      if (this.hasUpdated) {
+        __privateMethod(this, _AiSidebarComponent_instances, clearPersistedWidth_fn).call(this);
       }
-    }));
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("resizable") && !this.resizable) {
-      this._width = DEFAULT_WIDTH;
     }
   }
 };
@@ -174,15 +192,39 @@ handleDrawerTransitionEnd_fn = function(evt) {
   }
 };
 handleResizePointerDown_fn = function(event) {
-  __privateGet(this, _resizeController)?.handlePointerDown(event);
+  __privateGet(this, _resizeController).handlePointerDown(event);
 };
 handleResizeKeyDown_fn = function(event) {
-  __privateGet(this, _resizeController)?.handleKeyDown(event);
+  __privateGet(this, _resizeController).handleKeyDown(event);
 };
-dispatchEvent_fn = function(type) {
+handleResizeCommit_fn = function(width) {
+  __privateMethod(this, _AiSidebarComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-resize", { width });
+  __privateMethod(this, _AiSidebarComponent_instances, persistWidth_fn).call(this, width);
+};
+readPersistedWidth_fn = function() {
+  for (const kind of WIDTH_STORAGE_KINDS) {
+    const width = readStoredNumber({ kind, key: WIDTH_STORAGE_KEY });
+    if (width !== void 0) {
+      return width;
+    }
+  }
+  return void 0;
+};
+persistWidth_fn = function(width) {
+  for (const kind of WIDTH_STORAGE_KINDS) {
+    writeStoredNumber({ kind, key: WIDTH_STORAGE_KEY, value: width });
+  }
+};
+clearPersistedWidth_fn = function() {
+  for (const kind of WIDTH_STORAGE_KINDS) {
+    removeStoredValue({ kind, key: WIDTH_STORAGE_KEY });
+  }
+};
+dispatchEvent_fn = function(type, detail) {
   const event = new CustomEvent(type, {
     bubbles: true,
-    composed: true
+    composed: true,
+    detail
   });
   this.dispatchEvent(event);
 };
@@ -191,11 +233,11 @@ __decorateClass([
   property({ type: Boolean })
 ], AiSidebarComponent.prototype, "open", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property()
 ], AiSidebarComponent.prototype, "resizable", 2);
 __decorateClass([
-  state()
-], AiSidebarComponent.prototype, "_width", 2);
+  property({ type: Number })
+], AiSidebarComponent.prototype, "width", 2);
 __decorateClass([
   state()
 ], AiSidebarComponent.prototype, "_closing", 2);

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;\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}';
+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__grip {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  translate: 0 -50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 6px;\n  height: 32px;\n  color: var(--forge-theme-text-low, rgba(0, 0, 0, 0.38));\n  background-color: var(--forge-theme-surface, #ffffff);\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-inline-start: none;\n  border-start-end-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  border-end-end-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  pointer-events: none;\n  transition: color var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)), border-color var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.resize-handle__grip svg {\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  fill: currentColor;\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.resize-handle:hover .resize-handle__grip, .resize-handle:focus-visible .resize-handle__grip, .resize-handle--active .resize-handle__grip {\n  color: var(--forge-theme-primary, #3f51b5);\n  border-color: var(--forge-theme-primary, #3f51b5);\n}';
 export {
   styles as default
 };

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

@@ -1 +1,2 @@
 export { AiSidebarComponent, AiSidebarComponentTagName } from './ai-sidebar';
+export type { ForgeAiSidebarResizeEventData } from './ai-sidebar';

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

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { FeatureToggle } from '../ai-chatbot';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-sidebar-chat': AiSidebarChatComponent;
@@ -8,8 +9,12 @@ declare global {
         'forge-ai-sidebar-chat-close': CustomEvent<void>;
         'forge-ai-sidebar-chat-expand': CustomEvent<void>;
         'forge-ai-sidebar-chat-collapse': CustomEvent<void>;
+        'forge-ai-sidebar-chat-resize': CustomEvent<ForgeAiSidebarChatResizeEventData>;
     }
 }
+export interface ForgeAiSidebarChatResizeEventData {
+    width: number;
+}
 export declare const AiSidebarChatComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-sidebar-chat
@@ -20,6 +25,7 @@ export declare const AiSidebarChatComponentTagName: keyof HTMLElementTagNameMap;
  * @fires forge-ai-sidebar-chat-close - Fired when the sidebar chat is closed
  * @fires forge-ai-sidebar-chat-expand - Fired when the sidebar chat is expanded to modal
  * @fires forge-ai-sidebar-chat-collapse - Fired when the sidebar chat is collapsed from modal
+ * @fires forge-ai-sidebar-chat-resize - Fired when the sidebar width is resized
  *
  * @description A form factor component that positions a slotted chatbot in a sidebar or modal.
  * Manages positioning and expand/collapse state while delegating chat functionality to the slotted chatbot.
@@ -31,7 +37,14 @@ export declare class AiSidebarChatComponent extends LitElement {
     static styles: CSSResult;
     open: boolean;
     expanded: boolean;
-    resizable: boolean;
+    /**
+     * Enables sidebar resizing. Set to `'off'` to disable.
+     */
+    resizable: FeatureToggle;
+    /**
+     * The current width of the sidebar in pixels. Retained across expand/collapse.
+     */
+    width?: number;
     render(): TemplateResult;
     show(): void;
     close(): void;

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

@@ -1,6 +1,6 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import "../ai-sidebar/ai-sidebar.mjs";
 import "../ai-modal/ai-modal.mjs";
@@ -22,7 +22,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _sidebarRef, _modalRef, _slotContent, _AiSidebarChatComponent_instances, handleSidebarOpen_fn, handleSidebarClose_fn, handleFullscreenChange_fn, handleChatbotExpand_fn, handleChatbotMinimize_fn, handleModalClose_fn, dispatchEvent_fn;
+var _slotContent, _AiSidebarChatComponent_instances, handleSidebarOpen_fn, handleSidebarClose_fn, handleSidebarResize_fn, handleFullscreenChange_fn, handleChatbotExpand_fn, handleChatbotMinimize_fn, handleModalClose_fn, dispatchEvent_fn;
 const AiSidebarChatComponentTagName = "forge-ai-sidebar-chat";
 let AiSidebarChatComponent = class extends LitElement {
   constructor() {
@@ -30,9 +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());
+    this.resizable = "on";
     __privateAdd(this, _slotContent, html`
     <slot
       @forge-ai-chatbot-expand=${__privateMethod(this, _AiSidebarChatComponent_instances, handleChatbotExpand_fn)}
@@ -45,7 +43,6 @@ let AiSidebarChatComponent = class extends LitElement {
       this.expanded,
       () => html`
           <forge-ai-modal
-            ${ref(__privateGet(this, _modalRef))}
             ?open=${this.open && this.expanded}
             @forge-ai-modal-fullscreen-change=${__privateMethod(this, _AiSidebarChatComponent_instances, handleFullscreenChange_fn)}
             @forge-ai-modal-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleModalClose_fn)}>
@@ -54,11 +51,12 @@ let AiSidebarChatComponent = class extends LitElement {
         `,
       () => html`
           <forge-ai-sidebar
-            ${ref(__privateGet(this, _sidebarRef))}
             ?open=${this.open && !this.expanded}
-            ?resizable=${this.resizable}
+            resizable=${this.resizable}
+            width=${ifDefined(this.width)}
             @forge-ai-sidebar-open=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarOpen_fn)}
-            @forge-ai-sidebar-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarClose_fn)}>
+            @forge-ai-sidebar-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarClose_fn)}
+            @forge-ai-sidebar-resize=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarResize_fn)}>
             ${__privateGet(this, _slotContent)}
           </forge-ai-sidebar>
         `
@@ -97,8 +95,6 @@ let AiSidebarChatComponent = class extends LitElement {
     }
   }
 };
-_sidebarRef = /* @__PURE__ */ new WeakMap();
-_modalRef = /* @__PURE__ */ new WeakMap();
 _slotContent = /* @__PURE__ */ new WeakMap();
 _AiSidebarChatComponent_instances = /* @__PURE__ */ new WeakSet();
 handleSidebarOpen_fn = function() {
@@ -109,6 +105,10 @@ handleSidebarClose_fn = function() {
   this.open = false;
   __privateMethod(this, _AiSidebarChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-chat-close");
 };
+handleSidebarResize_fn = function(event) {
+  this.width = event.detail.width;
+  __privateMethod(this, _AiSidebarChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-chat-resize", { width: this.width });
+};
 handleFullscreenChange_fn = function(event) {
   const { isFullscreen } = event.detail;
   if (isFullscreen && !this.expanded) {
@@ -133,10 +133,11 @@ handleChatbotMinimize_fn = function() {
 handleModalClose_fn = function() {
   this.collapse();
 };
-dispatchEvent_fn = function(type) {
+dispatchEvent_fn = function(type, detail) {
   const event = new CustomEvent(type, {
     bubbles: true,
-    composed: true
+    composed: true,
+    detail
   });
   this.dispatchEvent(event);
 };
@@ -148,8 +149,11 @@ __decorateClass([
   property({ type: Boolean })
 ], AiSidebarChatComponent.prototype, "expanded", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property()
 ], AiSidebarChatComponent.prototype, "resizable", 2);
+__decorateClass([
+  property({ type: Number })
+], AiSidebarChatComponent.prototype, "width", 2);
 AiSidebarChatComponent = __decorateClass([
   customElement(AiSidebarChatComponentTagName)
 ], AiSidebarChatComponent);

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

@@ -10,6 +10,7 @@ export interface ResizeControllerOptions {
     onResize?: (width: number) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;
+    onCommit?: (width: number) => void;
 }
 export declare class ResizeController implements ReactiveController {
     #private;

package/dist/core/resize-controller.mjs

@@ -36,9 +36,10 @@ class ResizeController {
           return;
       }
       event.preventDefault();
-      const newWidth = this.#currentWidth + delta;
-      this.#currentWidth = this.#constrainWidth(newWidth);
+      const previousWidth = this.#currentWidth;
+      this.#currentWidth = this.#constrainWidth(previousWidth + delta);
       this.#applyWidth();
+      this.#commitIfChanged(previousWidth);
     };
     this.#handlePointerMove = (event) => {
       if (!this.#isResizing) {
@@ -62,6 +63,7 @@ class ResizeController {
       this.#isResizing = false;
       this.#host.requestUpdate();
       this.#options.onResizeEnd();
+      this.#commitIfChanged(this.#dragStartWidth);
       this.#removeResizeListeners();
     };
     this.#host = host;
@@ -76,6 +78,8 @@ class ResizeController {
       },
       onResizeEnd: () => {
       },
+      onCommit: () => {
+      },
       ...options
     };
     this.#currentWidth = this.#options.defaultWidth;
@@ -108,6 +112,11 @@ class ResizeController {
   }
   #handlePointerMove;
   #handlePointerUp;
+  #commitIfChanged(previousWidth) {
+    if (this.#currentWidth !== previousWidth) {
+      this.#options.onCommit(this.#currentWidth);
+    }
+  }
   #constrainWidth(width) {
     const availableWidth = window.innerWidth - RESIZE_SCREEN_BUFFER;
     const effectiveMaxWidth = Math.min(this.#options.maxWidth, availableWidth);

package/dist/utils/index.d.ts

@@ -3,3 +3,4 @@ export { InfiniteScrollController } from './infinite-scroll-controller';
 export { KeyboardNavigationController } from './keyboard-navigation-controller';
 export { renderMarkdown, renderInlineMarkdown, type RenderMarkdownOptions } from './markdown';
 export { buildCSVContent, downloadCSV, escapeCSVCell, sanitizeFilename } from './csv-utils';
+export { readStoredNumber, writeStoredNumber, removeStoredValue, type StorageKind, type StorageOptions, type WriteStorageOptions } from './storage-utils';

package/dist/utils/index.mjs

@@ -3,6 +3,7 @@ import { InfiniteScrollController } from "./infinite-scroll-controller.mjs";
 import { KeyboardNavigationController } from "./keyboard-navigation-controller.mjs";
 import { renderInlineMarkdown, renderMarkdown } from "./markdown.mjs";
 import { buildCSVContent, downloadCSV, escapeCSVCell, sanitizeFilename } from "./csv-utils.mjs";
+import { readStoredNumber, removeStoredValue, writeStoredNumber } from "./storage-utils.mjs";
 export {
   DeleteThreadController,
   InfiniteScrollController,
@@ -10,7 +11,10 @@ export {
   buildCSVContent,
   downloadCSV,
   escapeCSVCell,
+  readStoredNumber,
+  removeStoredValue,
   renderInlineMarkdown,
   renderMarkdown,
-  sanitizeFilename
+  sanitizeFilename,
+  writeStoredNumber
 };

package/dist/utils/storage-utils.d.ts

@@ -0,0 +1,26 @@
+export type StorageKind = 'local' | 'session';
+export interface StorageOptions {
+    /** Which Web Storage area to use. `session` is per-tab, `local` is shared across tabs on the origin. */
+    kind: StorageKind;
+    /** The storage key. */
+    key: string;
+}
+export interface WriteStorageOptions extends StorageOptions {
+    /** The number to store. */
+    value: number;
+}
+/**
+ * Reads a numeric value from Web Storage.
+ *
+ * @returns The parsed number, or `undefined` if the key is missing, not a finite number, or storage is unavailable.
+ */
+export declare function readStoredNumber({ kind, key }: StorageOptions): number | undefined;
+/**
+ * Writes a numeric value to Web Storage. Fails silently if storage is unavailable
+ * (private mode, sandboxed iframe, quota exceeded).
+ */
+export declare function writeStoredNumber({ kind, key, value }: WriteStorageOptions): void;
+/**
+ * Removes a value from Web Storage. Fails silently if storage is unavailable.
+ */
+export declare function removeStoredValue({ kind, key }: StorageOptions): void;

package/dist/utils/storage-utils.mjs

@@ -0,0 +1,32 @@
+function resolveStorage(kind) {
+  return kind === "session" ? window.sessionStorage : window.localStorage;
+}
+function readStoredNumber({ kind, key }) {
+  try {
+    const raw = resolveStorage(kind).getItem(key);
+    if (raw === null) {
+      return void 0;
+    }
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStoredNumber({ kind, key, value }) {
+  try {
+    resolveStorage(kind).setItem(key, String(value));
+  } catch {
+  }
+}
+function removeStoredValue({ kind, key }) {
+  try {
+    resolveStorage(kind).removeItem(key);
+  } catch {
+  }
+}
+export {
+  readStoredNumber,
+  removeStoredValue,
+  writeStoredNumber
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "A library of Tyler Forge™ AI chat interface web components.",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",