@tylertech/forge-ai 0.15.3-dev.1 → 0.16.0-dev.0

package/dist/ai-message-thread/ai-message-thread2.mjs

@@ -0,0 +1,279 @@
+import { MarkdownStreamController } from "../utils/markdown-stream-controller.mjs";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import "../core/tooltip/tooltip2.mjs";
+import "../ai-tool-call/ai-tool-call2.mjs";
+import "../ai-thinking-indicator/index.mjs";
+import "../ai-assistant-response/index.mjs";
+import "../ai-client-message/index.mjs";
+import "../ai-error-message/index.mjs";
+import "../ai-empty-state/index.mjs";
+import "../ai-response-message/index.mjs";
+import "../ai-user-message/index.mjs";
+import ai_message_thread_default from "./ai-message-thread.mjs";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+//#region src/lib/ai-message-thread/ai-message-thread.ts
+var AiMessageThreadComponentTagName = "forge-ai-message-thread";
+var SCROLL_THRESHOLD = 100;
+var AiMessageThreadComponent = class AiMessageThreadComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.messageItems = [];
+		this.enableReactions = false;
+		this.showThinking = false;
+		this.debugMode = false;
+		this.autoScroll = "on";
+		this.#markdownController = new MarkdownStreamController(this);
+		this.#resizeObserver = new ResizeObserver(() => this.#checkScrollState());
+		this.#canAutoScroll = true;
+		this.#handleScroll = () => {
+			this.#checkScrollState();
+		};
+		this.#handleScrollToBottomClick = () => {
+			this.scrollToBottom({
+				force: true,
+				behavior: "smooth"
+			});
+		};
+	}
+	static {
+		this.styles = unsafeCSS(ai_message_thread_default);
+	}
+	#markdownController;
+	#resizeObserver;
+	#canAutoScroll;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated) this.#resizeObserver.observe(this._messageThreadContainer);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver.disconnect();
+	}
+	firstUpdated() {
+		this.#resizeObserver.observe(this._messageThreadContainer);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.autoScroll === "on" && (changedProperties.has("messageItems") || changedProperties.has("showThinking"))) this.#scheduleScroll();
+	}
+	async #scheduleScroll() {
+		await this.updateComplete;
+		await new Promise(requestAnimationFrame);
+		this.scrollToBottom();
+	}
+	#checkScrollState() {
+		const container = this._messageThreadContainer;
+		if (!container) return;
+		const { scrollTop, scrollHeight, clientHeight } = container;
+		const canAutoScroll = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD;
+		if (canAutoScroll !== this.#canAutoScroll) {
+			this.#canAutoScroll = canAutoScroll;
+			this.requestUpdate();
+		}
+	}
+	#handleScroll;
+	scrollToBottom({ force = false, behavior = "smooth" } = {}) {
+		if (!force && !this.#canAutoScroll) return;
+		const container = this._messageThreadContainer;
+		container.scrollTo({
+			top: container.scrollHeight,
+			behavior
+		});
+	}
+	#handleScrollToBottomClick;
+	get #scrollToBottomButton() {
+		if (!this.messageItems.length) return nothing;
+		const hiddenClass = this.#canAutoScroll ? " scroll-to-bottom-button--hidden" : "";
+		return html`
+      <button
+        id="scroll-to-bottom-btn"
+        class=${`forge-fab scroll-to-bottom-button${hiddenClass}`}
+        aria-label="Scroll to bottom"
+        @click=${this.#handleScrollToBottomClick}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M7.03 13.92h4V5l2.01-.03v8.95h3.99l-5 5Z" />
+        </svg>
+      </button>
+      <forge-ai-tooltip for="scroll-to-bottom-btn" placement="top">Scroll to bottom</forge-ai-tooltip>
+    `;
+	}
+	#handleCopy(messageId) {
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-copy",
+			detail: { messageId }
+		});
+	}
+	#handleResend(messageId) {
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-resend",
+			detail: { messageId }
+		});
+	}
+	#handleThumbsUp(messageId, feedback) {
+		const detail = {
+			messageId,
+			feedback
+		};
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-thumbs-up",
+			detail
+		});
+	}
+	#handleThumbsDown(messageId, feedback) {
+		const detail = {
+			messageId,
+			feedback
+		};
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-thumbs-down",
+			detail
+		});
+	}
+	#handleUserCopy(messageId) {
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-user-copy",
+			detail: { messageId }
+		});
+	}
+	#handleUserResend(messageId) {
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-user-resend",
+			detail: { messageId }
+		});
+	}
+	#handleUserEdit(messageId, content) {
+		this.#dispatchEvent({
+			type: "forge-ai-message-thread-user-edit",
+			detail: {
+				messageId,
+				content
+			}
+		});
+	}
+	#renderToolCall(toolCall) {
+		const toolDefinition = this.tools?.get(toolCall.name);
+		return html`<forge-ai-tool-call .toolCall=${toolCall} .toolDefinition=${toolDefinition}></forge-ai-tool-call>`;
+	}
+	get #activeResponse() {
+		const lastItem = this.messageItems[this.messageItems.length - 1];
+		return lastItem?.type === "assistant" ? lastItem.data : void 0;
+	}
+	#renderAssistantResponse(response) {
+		return html`
+      <forge-ai-assistant-response
+        .response=${response}
+        .tools=${this.tools}
+        ?enable-reactions=${this.enableReactions}
+        ?debug-mode=${this.debugMode}
+        ?show-thinking=${this.showThinking && response === this.#activeResponse}
+        @forge-ai-assistant-response-copy=${(e) => this.#handleCopy(e.detail.responseId)}
+        @forge-ai-assistant-response-resend=${(e) => this.#handleResend(e.detail.responseId)}
+        @forge-ai-assistant-response-thumbs-up=${(e) => this.#handleThumbsUp(e.detail.responseId, e.detail.feedback)}
+        @forge-ai-assistant-response-thumbs-down=${(e) => this.#handleThumbsDown(e.detail.responseId, e.detail.feedback)}>
+      </forge-ai-assistant-response>
+    `;
+	}
+	get #emptyState() {
+		if (this.messageItems.length) return nothing;
+		return html`
+      <forge-ai-empty-state>
+        <slot name="empty-state-icon" slot="icon"></slot>
+        <slot name="empty-state-heading" slot="heading">
+          <span>How can I help you today?</span>
+        </slot>
+        <slot name="empty-state-message" slot="body"> Start a conversation by asking a question or describing what you'd like help with. </slot>
+        <slot name="empty-state-actions" slot="actions"></slot>
+      </forge-ai-empty-state>
+    `;
+	}
+	get #thinkingIndicator() {
+		if (!this.showThinking) return nothing;
+		if (this.#activeResponse) return nothing;
+		return html`<div class="thinking-indicator">
+      <forge-ai-thinking-indicator class="status-indicator" show-text></forge-ai-thinking-indicator>
+    </div>`;
+	}
+	get #messages() {
+		return this.messageItems.filter((item) => {
+			if (item.type === "assistant") return true;
+			if (item.type === "toolCall") return !!(this.tools?.get(item.data.name))?.renderer;
+			if (item.type === "message") return item.data.role !== "tool";
+			return false;
+		}).map((item) => {
+			if (item.type === "assistant") return this.#renderAssistantResponse(item.data);
+			if (item.type === "toolCall") return this.#renderToolCall(item.data);
+			const msg = item.data;
+			const content = typeof msg.content === "string" ? msg.content : "";
+			if (msg.role === "user") {
+				const renderedHtml = this.#markdownController.getCachedHtml(msg.id, content, { streaming: false });
+				return html`
+          <forge-ai-user-message
+            message-id=${msg.id}
+            .timestamp=${msg.timestamp}
+            .content=${content}
+            ?streaming=${this.showThinking}
+            @forge-ai-user-message-copy=${(e) => this.#handleUserCopy(e.detail.messageId)}
+            @forge-ai-user-message-resend=${(e) => this.#handleUserResend(e.detail.messageId)}
+            @forge-ai-user-message-edit=${(e) => this.#handleUserEdit(e.detail.messageId, e.detail.content)}>
+            ${unsafeHTML(renderedHtml)}
+          </forge-ai-user-message>
+        `;
+			} else if (msg.role === "system") return html`
+          <forge-ai-client-message kind=${msg.kind ?? "text"} .header=${msg.header} .content=${content} .actions=${msg.actions ?? []}>
+          </forge-ai-client-message>
+        `;
+			else if (msg.status === "error") {
+				const renderedHtml = this.#markdownController.getCachedHtml(msg.id, content, { streaming: false });
+				return html`
+          <forge-ai-error-message>
+            <span slot="title">Error</span>
+            ${unsafeHTML(renderedHtml)}
+          </forge-ai-error-message>
+        `;
+			} else return when(content.trim().length, () => {
+				const streaming = msg.status === "streaming" || msg.status === "pending";
+				const renderedHtml = this.#markdownController.getCachedHtml(msg.id, content, { streaming });
+				return html`<forge-ai-response-message>${unsafeHTML(renderedHtml)}</forge-ai-response-message>`;
+			});
+		});
+	}
+	render() {
+		return html`
+      <div class="message-thread" @scroll=${this.autoScroll ? this.#handleScroll : void 0}>
+        ${this.#scrollToBottomButton}
+        <div class="message-thread-content">${this.#emptyState} ${this.#messages} ${this.#thinkingIndicator}</div>
+      </div>
+    `;
+	}
+	#dispatchEvent(config) {
+		const event = new CustomEvent(config.type, {
+			detail: config.detail,
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+		return event;
+	}
+};
+__decorate([property({ attribute: false })], AiMessageThreadComponent.prototype, "messageItems", void 0);
+__decorate([property({ attribute: false })], AiMessageThreadComponent.prototype, "tools", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "enable-reactions"
+})], AiMessageThreadComponent.prototype, "enableReactions", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-thinking"
+})], AiMessageThreadComponent.prototype, "showThinking", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "debug-mode"
+})], AiMessageThreadComponent.prototype, "debugMode", void 0);
+__decorate([property({ attribute: "auto-scroll" })], AiMessageThreadComponent.prototype, "autoScroll", void 0);
+__decorate([query(".message-thread")], AiMessageThreadComponent.prototype, "_messageThreadContainer", void 0);
+AiMessageThreadComponent = __decorate([customElement(AiMessageThreadComponentTagName)], AiMessageThreadComponent);
+//#endregion
+export { AiMessageThreadComponent, AiMessageThreadComponentTagName };

package/dist/ai-message-thread/index.mjs

@@ -1,5 +1 @@
-import { AiMessageThreadComponent, AiMessageThreadComponentTagName } from "./ai-message-thread.mjs";
-export {
-  AiMessageThreadComponent,
-  AiMessageThreadComponentTagName
-};
+export { AiMessageThreadComponent, AiMessageThreadComponentTagName } from "./ai-message-thread2.mjs";

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

@@ -1,178 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { query, property, state, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { toggleState } from "../utils.mjs";
-import styles from "./ai-modal.scss.mjs";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-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;
-};
-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 _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.label = "AI Assistant";
-    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;
-      if (previousFullscreen !== this._autoFullscreen) {
-        __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
-        if (this.fullscreen === void 0) {
-          const event = new CustomEvent("forge-ai-modal-fullscreen-change", {
-            bubbles: true,
-            composed: true,
-            detail: { isFullscreen: this._autoFullscreen }
-          });
-          this.dispatchEvent(event);
-        }
-      }
-    });
-    __privateSet(this, _internals, this.attachInternals());
-    __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
-  }
-  render() {
-    const isFullscreen = this.sizeStrategy === "fixed" ? this.fullscreen ?? false : this.fullscreen ?? this._autoFullscreen;
-    const classes = {
-      "forge-dialog": true,
-      "forge-dialog--fullscreen": isFullscreen
-    };
-    return html`
-      <dialog
-        class=${classMap(classes)}
-        aria-label=${this.label}
-        @close=${__privateMethod(this, _AiModalComponent_instances, handleDialogClose_fn)}
-        @click=${__privateMethod(this, _AiModalComponent_instances, handleDialogClick_fn)}
-        @keydown=${__privateMethod(this, _AiModalComponent_instances, handleDialogKeydown_fn)}>
-        <slot></slot>
-      </dialog>
-    `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateMethod(this, _AiModalComponent_instances, setupMediaQuery_fn).call(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateMethod(this, _AiModalComponent_instances, cleanupMediaQuery_fn).call(this);
-  }
-  updated(changedProperties) {
-    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.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") || changedProperties.has("sizeStrategy")) {
-      __privateMethod(this, _AiModalComponent_instances, updateFullscreenState_fn).call(this);
-    }
-  }
-  /**
-   * Shows the modal dialog.
-   */
-  show() {
-    this.open = true;
-  }
-  /**
-   * 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.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));
-  __privateGet(this, _handleMediaChange).call(this, __privateGet(this, _mediaQuery));
-};
-cleanupMediaQuery_fn = function() {
-  __privateGet(this, _mediaQuery)?.removeEventListener("change", __privateGet(this, _handleMediaChange));
-};
-_handleMediaChange = /* @__PURE__ */ new WeakMap();
-AiModalComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  query("dialog")
-], AiModalComponent.prototype, "_dialog", 2);
-__decorateClass([
-  property({ type: Boolean })
-], AiModalComponent.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean })
-], AiModalComponent.prototype, "fullscreen", 2);
-__decorateClass([
-  property({ type: String, attribute: "size-strategy" })
-], AiModalComponent.prototype, "sizeStrategy", 2);
-__decorateClass([
-  property({ type: String })
-], AiModalComponent.prototype, "label", 2);
-__decorateClass([
-  state()
-], AiModalComponent.prototype, "_autoFullscreen", 2);
-AiModalComponent = __decorateClass([
-  customElement("forge-ai-modal")
-], AiModalComponent);
-export {
-  AiModalComponent
-};
+//#region src/lib/ai-modal/ai-modal.scss?inline
+var ai_modal_default = "/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n@keyframes forge-dialog-zoom-in {\n  from {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n  to {\n    opacity: 1;\n    scale: 1;\n  }\n}\n@keyframes forge-dialog-zoom-out {\n  from {\n    opacity: 1;\n    scale: 1;\n  }\n  to {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n@keyframes forge-dialog-fade-in {\n  from {\n    opacity: var(--_dialog-fade-opacity);\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-dialog-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n@keyframes forge-dialog-slide-in {\n  from {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes forge-dialog-slide-out {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog {\n  --_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));\n  --_dialog-shape:var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));\n  --_dialog-spacing:var(--forge-dialog-spacing, auto);\n  --_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));\n  --_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));\n  --_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));\n  --_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));\n  --_dialog-padding:var(--forge-dialog-padding, 0);\n  --_dialog-width:var(--forge-dialog-width, fit-content);\n  --_dialog-height:var(--forge-dialog-height, fit-content);\n  --_dialog-min-width:var(--forge-dialog-min-width, 0);\n  --_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-min-height:var(--forge-dialog-min-height, 0);\n  --_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));\n  --_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));\n  --_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);\n  --_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);\n  --_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);\n  --_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);\n  --_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);\n  --_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));\n  --_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);\n  --_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);\n  --_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);\n  --_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);\n  --_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);\n  --_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));\n  --_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 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  --_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));\n  --_dialog-position-x:var(--forge-dialog-position-x, 0);\n  --_dialog-position-y:var(--forge-dialog-position-y, 0);\n  --_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms));\n  --_backdrop-background:var(--forge-backdrop-background, #000);\n  --_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);\n  --_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));\n  --_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));\n  --_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));\n  --_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));\n  --forge-theme-surface: var(--forge-theme-surface-bright, #ffffff);\n}\n\n.forge-dialog {\n  position: fixed;\n  inset: 0;\n  z-index: var(--_dialog-z-index);\n  background-color: rgba(0, 0, 0, 0);\n  color: inherit;\n  border: none;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  max-width: 100%;\n  max-height: 100%;\n  box-sizing: border-box;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  background: var(--_dialog-background);\n  box-shadow: var(--_dialog-elevation);\n  z-index: var(--_dialog-z-index);\n  overflow: hidden;\n  border-radius: var(--_dialog-shape);\n  margin-block-start: var(--_dialog-block-start-spacing);\n  margin-block-end: var(--_dialog-block-end-spacing);\n  margin-inline-start: var(--_dialog-inline-start-spacing);\n  margin-inline-end: var(--_dialog-inline-end-spacing);\n  padding: var(--_dialog-padding);\n  width: var(--_dialog-width);\n  height: var(--_dialog-height);\n  min-width: var(--_dialog-min-width);\n  max-width: var(--_dialog-max-width);\n  min-height: var(--_dialog-min-height);\n  max-height: var(--_dialog-max-height);\n  box-sizing: border-box;\n  animation-duration: var(--_dialog-exit-animation-duration);\n  animation-timing-function: var(--_dialog-exit-animation-easing);\n  position: fixed;\n  transition-property: display, opacity, overlay, scale;\n  transition-behavior: allow-discrete;\n}\n\n.forge-dialog > forge-scaffold {\n  height: auto;\n}\n\n.forge-dialog--fullscreen {\n  --_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration);\n  height: 100%;\n  width: 100%;\n  max-width: none;\n  max-height: none;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.forge-dialog:not(:modal) {\n  --_dialog-elevation:var(--_dialog-nonmodal-elevation);\n  pointer-events: all;\n}\n\n.forge-dialog--moveable {\n  user-select: none;\n  transition-property: opacity;\n  transition-duration: var(--_dialog-move-transition-duration);\n  transition-timing-function: var(--_dialog-move-transition-easing);\n}\n\n.forge-dialog--moved {\n  margin: 0;\n}\n\n.forge-dialog--moving {\n  opacity: var(--_dialog-moving-opacity);\n}\n\n.forge-dialog__move-handle {\n  fill: var(--_dialog-move-handle-color);\n  height: var(--_dialog-move-handle-size);\n  width: var(--_dialog-move-handle-size);\n  margin: var(--_dialog-move-handle-spacing);\n  touch-action: none;\n}\n\n.forge-dialog__move-handle:hover {\n  cursor: var(--_dialog-move-handle-hover-cursor);\n}\n\n.forge-dialog__move-handle:active {\n  cursor: var(--_dialog-move-handle-active-cursor);\n}\n\n.forge-dialog__move-handle-container {\n  position: absolute;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n\n.forge-dialog--top {\n  --_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);\n  top: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-right {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--top-left {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: 0;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--bottom {\n  --_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);\n  top: auto;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-right {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: 0;\n}\n\n.forge-dialog--bottom-left {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: 0;\n}\n\n.forge-dialog--right {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: auto;\n  right: 0;\n  bottom: auto;\n}\n\n.forge-dialog--left {\n  --_dialog-spacing:var(--forge-dialog-spacing, 0);\n  top: auto;\n  left: 0;\n  right: auto;\n  bottom: auto;\n}\n\n.forge-dialog--custom {\n  margin: 0;\n  top: var(--_dialog-position-x);\n  left: var(--_dialog-position-y);\n}\n\n.forge-dialog--bottom-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%);\n}\n\n.forge-dialog--bottom-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--bottom-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--bottom-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--bottom-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--left-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0);\n}\n\n.forge-dialog--left-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--left-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--left-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--left-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--right-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  height: 100%;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0);\n}\n\n.forge-dialog--right-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--right-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--right-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--right-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--top-sheet {\n  --_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);\n  --_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration);\n  --_dialog-max-width:var(--forge-dialog-max-width, none);\n  --_dialog-max-height:var(--forge-dialog-max-height, none);\n  inset: auto;\n  display: inline-flex;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  --_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%);\n}\n\n.forge-dialog--top-sheet.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--top-sheet.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--top-sheet.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--top-sheet.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog::backdrop {\n  --forge-backdrop-opacity: var(--_backdrop-opacity);\n  --forge-backdrop-enter-animation-duration: var(--_backdrop-enter-animation-duration);\n  --forge-backdrop-enter-animation-easing: var(--_backdrop-enter-animation-easing);\n  --forge-backdrop-exit-animation-duration: var(--_backdrop-exit-animation-duration);\n  --forge-backdrop-exit-animation-easing: var(--_backdrop-exit-animation-easing);\n  position: absolute;\n  inset: 0;\n  z-index: var(--_backdrop-z-index);\n  background: var(--_backdrop-background);\n  opacity: 0;\n  animation-fill-mode: forwards;\n  transition-property: display, opacity, overlay;\n}\n\n.forge-dialog[open] {\n  opacity: 1;\n  scale: 1;\n  transition-duration: var(--_dialog-enter-animation-duration);\n  transition-timing-function: var(--_dialog-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open] {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n.forge-dialog[open]::backdrop {\n  opacity: var(--_backdrop-opacity);\n  transition-duration: var(--_backdrop-enter-animation-duration);\n  transition-timing-function: var(--_backdrop-enter-animation-easing);\n}\n\n@starting-style {\n  .forge-dialog[open]::backdrop {\n    opacity: 0;\n  }\n}\n.forge-dialog:not([open]) {\n  animation-duration: var(--_dialog-enter-animation-duration);\n  animation-timing-function: var(--_dialog-enter-animation-easing);\n  display: none;\n  opacity: var(--_dialog-zoom-opacity);\n  scale: var(--_dialog-zoom-scale);\n  transition-duration: var(--_dialog-exit-animation-duration);\n  transition-timing-function: var(--_dialog-exit-animation-easing);\n}\n\n.forge-dialog:not([open])::backdrop {\n  transition-duration: var(--_backdrop-exit-animation-duration);\n  transition-timing-function: var(--_backdrop-exit-animation-easing);\n}\n\n.forge-dialog--animation-fade.forge-dialog {\n  transition-property: display, opacity, overlay;\n}\n\n@starting-style {\n  .forge-dialog--animation-fade.forge-dialog[open] {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n.forge-dialog--animation-fade.forge-dialog:not([open]) {\n  opacity: var(--_dialog-fade-opacity);\n  scale: 1;\n}\n\n.forge-dialog--animation-slide.forge-dialog {\n  transition-property: display, opacity, overlay, translate;\n}\n\n.forge-dialog--animation-slide.forge-dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  .forge-dialog--animation-slide.forge-dialog[open] {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n.forge-dialog--animation-slide.forge-dialog:not([open]) {\n  opacity: var(--_dialog-slide-opacity);\n  scale: 1;\n  translate: var(--_dialog-slide-translate);\n}\n\n.forge-dialog--animation-none {\n  --_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, 0s);\n  --_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, 0s);\n  --_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, 0s);\n  --_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, 0s);\n}\n\n@media (prefers-reduced-motion) {\n  .forge-dialog.forge-dialog {\n    transition-property: display, opacity, overlay;\n  }\n  @starting-style {\n    .forge-dialog.forge-dialog[open] {\n      opacity: var(--_dialog-fade-opacity);\n    }\n  }\n  .forge-dialog.forge-dialog:not([open]) {\n    opacity: var(--_dialog-fade-opacity);\n    scale: 1;\n  }\n}\n:host {\n  display: contents;\n}\n\n.forge-dialog::backdrop {\n  position: fixed;\n}\n\ndialog.forge-dialog:not(.forge-dialog--fullscreen) {\n  height: var(--forge-ai-modal-height, 80vh);\n  width: var(--forge-ai-modal-width, 80vw);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n}";
+//#endregion
+export { ai_modal_default as default };

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

@@ -0,0 +1,141 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import { toggleState } from "../utils/dom.mjs";
+import ai_modal_default from "./ai-modal.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/lib/ai-modal/ai-modal.ts
+var FULLSCREEN_WIDTH_THRESHOLD = 768;
+var AiModalComponent = class AiModalComponent extends LitElement {
+	static {
+		this.styles = unsafeCSS(ai_modal_default);
+	}
+	#mediaQuery;
+	#internals;
+	#closeReason;
+	constructor() {
+		super();
+		this.open = false;
+		this.sizeStrategy = "auto";
+		this.label = "AI Assistant";
+		this._autoFullscreen = window.innerWidth <= FULLSCREEN_WIDTH_THRESHOLD;
+		this.#closeReason = "programmatic";
+		this.#handleMediaChange = (e) => {
+			const previousFullscreen = this._autoFullscreen;
+			this._autoFullscreen = e.matches;
+			if (previousFullscreen !== this._autoFullscreen) {
+				this.#updateFullscreenState();
+				if (this.fullscreen === void 0) {
+					const event = new CustomEvent("forge-ai-modal-fullscreen-change", {
+						bubbles: true,
+						composed: true,
+						detail: { isFullscreen: this._autoFullscreen }
+					});
+					this.dispatchEvent(event);
+				}
+			}
+		};
+		this.#internals = this.attachInternals();
+		this.#updateFullscreenState();
+	}
+	render() {
+		const classes = {
+			"forge-dialog": true,
+			"forge-dialog--fullscreen": this.sizeStrategy === "fixed" ? this.fullscreen ?? false : this.fullscreen ?? this._autoFullscreen
+		};
+		return html`
+      <dialog
+        class=${classMap(classes)}
+        aria-label=${this.label}
+        @close=${this.#handleDialogClose}
+        @click=${this.#handleDialogClick}
+        @keydown=${this.#handleDialogKeydown}>
+        <slot></slot>
+      </dialog>
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#setupMediaQuery();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupMediaQuery();
+	}
+	updated(changedProperties) {
+		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 (changedProperties.get("open") === true) {
+				if (this._dialog?.open) this._dialog.close();
+				this.removeAttribute("data-handles-escape");
+				this.dispatchEvent(new CustomEvent("forge-ai-modal-close", {
+					bubbles: true,
+					composed: true,
+					detail: { reason: this.#closeReason }
+				}));
+				this.#closeReason = "programmatic";
+			}
+		}
+		if (changedProperties.has("fullscreen") || changedProperties.has("sizeStrategy")) this.#updateFullscreenState();
+	}
+	#updateFullscreenState() {
+		const isFullscreen = this.sizeStrategy === "fixed" ? this.fullscreen ?? false : this.fullscreen ?? this._autoFullscreen;
+		toggleState(this.#internals, "fullscreen", isFullscreen);
+	}
+	#handleDialogClose() {
+		if (this.open) this.#closeReason = "escape";
+		this.open = false;
+	}
+	#handleDialogClick(event) {
+		if (event.target === this._dialog) {
+			event.stopPropagation();
+			this.#closeReason = "backdrop";
+			this.open = false;
+		}
+	}
+	#handleDialogKeydown(event) {
+		if (event.key === "Escape") event.stopPropagation();
+	}
+	/**
+	* Shows the modal dialog.
+	*/
+	show() {
+		this.open = true;
+	}
+	/**
+	* Closes the modal dialog.
+	*/
+	close() {
+		this.#closeReason = "programmatic";
+		this.open = false;
+	}
+	#setupMediaQuery() {
+		this.#mediaQuery = window.matchMedia(`(max-width: ${FULLSCREEN_WIDTH_THRESHOLD}px)`);
+		this.#mediaQuery.addEventListener("change", this.#handleMediaChange);
+		this.#handleMediaChange(this.#mediaQuery);
+	}
+	#cleanupMediaQuery() {
+		this.#mediaQuery?.removeEventListener("change", this.#handleMediaChange);
+	}
+	#handleMediaChange;
+};
+__decorate([query("dialog")], AiModalComponent.prototype, "_dialog", void 0);
+__decorate([property({ type: Boolean })], AiModalComponent.prototype, "open", void 0);
+__decorate([property({ type: Boolean })], AiModalComponent.prototype, "fullscreen", void 0);
+__decorate([property({
+	type: String,
+	attribute: "size-strategy"
+})], AiModalComponent.prototype, "sizeStrategy", void 0);
+__decorate([property({ type: String })], AiModalComponent.prototype, "label", void 0);
+__decorate([state()], AiModalComponent.prototype, "_autoFullscreen", void 0);
+AiModalComponent = __decorate([customElement("forge-ai-modal")], AiModalComponent);
+//#endregion
+export { AiModalComponent };

package/dist/ai-modal/index.mjs

@@ -1,4 +1 @@
-import { AiModalComponent } from "./ai-modal.mjs";
-export {
-  AiModalComponent
-};
+export { AiModalComponent } from "./ai-modal2.mjs";