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

package/dist/core/overlay/overlay2.mjs

@@ -0,0 +1,146 @@
+import overlay_default from "./overlay.mjs";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+//#region src/lib/core/overlay/overlay.ts
+var ForgeAiOverlayComponent = class ForgeAiOverlayComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.anchor = null;
+		this.placement = "bottom-start";
+		this.flip = true;
+		this.shift = false;
+		this.autoSize = false;
+		this.open = false;
+		this.arrowElement = null;
+		this.offset = void 0;
+		this.dismissMode = "auto";
+		this._overlayElement = null;
+		this._cleanupAutoUpdate = null;
+		this._onToggle = (event) => {
+			if (event.target !== event.currentTarget) return;
+			this.open = event.newState === "open";
+			this.dispatchEvent(new CustomEvent("forge-ai-overlay-toggle", {
+				detail: {
+					open: this.open,
+					newState: event.newState,
+					oldState: event.oldState
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = unsafeCSS(overlay_default);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._cleanup();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) this._handleOpenChange();
+		if (changedProperties.has("anchor") || changedProperties.has("placement") || changedProperties.has("flip") || changedProperties.has("shift") || changedProperties.has("autoSize") || changedProperties.has("offset") || changedProperties.has("arrowElement")) {
+			if (this.open && this._overlayElement && this.anchor) this._updatePosition();
+		}
+	}
+	_handleOpenChange() {
+		if (this.open) this._showOverlay();
+		else this._hideOverlay();
+	}
+	async _showOverlay() {
+		if (!this._overlayElement) {
+			await this.updateComplete;
+			this._overlayElement = this.shadowRoot?.querySelector(".ai-overlay");
+		}
+		if (this._overlayElement) {
+			this._overlayElement.showPopover();
+			if (this.anchor) this._updatePosition();
+		}
+	}
+	_hideOverlay() {
+		this._overlayElement?.hidePopover();
+		this._cleanup();
+	}
+	_updatePosition() {
+		if (!this.anchor || !this._overlayElement) return;
+		this._cleanup();
+		const middleware = [
+			...this.offset !== void 0 ? [offset(this.offset)] : [],
+			...this.flip ? [flip()] : [],
+			...this.shift ? [shift({ padding: 8 })] : [],
+			...this.autoSize ? [size({
+				padding: 8,
+				apply: ({ availableWidth, availableHeight, elements }) => {
+					elements.floating.style.setProperty("--ai-overlay-available-width", `${availableWidth}px`);
+					elements.floating.style.setProperty("--ai-overlay-available-height", `${availableHeight}px`);
+				}
+			})] : [],
+			...this.arrowElement ? [arrow({
+				element: this.arrowElement,
+				padding: 8
+			})] : []
+		];
+		this._cleanupAutoUpdate = autoUpdate(this.anchor, this._overlayElement, () => this._computePosition(middleware));
+	}
+	async _computePosition(middleware) {
+		if (!this.anchor || !this._overlayElement) return;
+		try {
+			const result = await computePosition(this.anchor, this._overlayElement, {
+				placement: this.placement,
+				strategy: "fixed",
+				middleware
+			});
+			Object.assign(this._overlayElement.style, {
+				left: "0",
+				top: "0",
+				translate: `${this._roundByDPR(result.x)}px ${this._roundByDPR(result.y)}px`
+			});
+			this.setAttribute("data-position-placement", result.placement);
+			if (this.arrowElement && result.middlewareData.arrow) {
+				const { x, y } = result.middlewareData.arrow;
+				Object.assign(this.arrowElement.style, {
+					left: x != null ? `${x}px` : "",
+					top: y != null ? `${y}px` : ""
+				});
+			}
+		} catch (error) {
+			console.error("Failed to compute overlay position:", error);
+		}
+	}
+	_roundByDPR(value) {
+		const dpr = window.devicePixelRatio || 1;
+		return Math.round(value * dpr) / dpr;
+	}
+	_cleanup() {
+		this._cleanupAutoUpdate?.();
+		this._cleanupAutoUpdate = null;
+		this.removeAttribute("data-position-placement");
+	}
+	render() {
+		return html`
+      <div class="ai-overlay" popover=${this.dismissMode} @toggle=${this._onToggle}>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Object })], ForgeAiOverlayComponent.prototype, "anchor", void 0);
+__decorate([property()], ForgeAiOverlayComponent.prototype, "placement", void 0);
+__decorate([property({ type: Boolean })], ForgeAiOverlayComponent.prototype, "flip", void 0);
+__decorate([property({ type: Boolean })], ForgeAiOverlayComponent.prototype, "shift", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "auto-size"
+})], ForgeAiOverlayComponent.prototype, "autoSize", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ForgeAiOverlayComponent.prototype, "open", void 0);
+__decorate([property({ type: Object })], ForgeAiOverlayComponent.prototype, "arrowElement", void 0);
+__decorate([property({ type: Object })], ForgeAiOverlayComponent.prototype, "offset", void 0);
+__decorate([property({ attribute: "dismiss-mode" })], ForgeAiOverlayComponent.prototype, "dismissMode", void 0);
+ForgeAiOverlayComponent = __decorate([customElement("forge-ai-overlay")], ForgeAiOverlayComponent);
+//#endregion
+export { ForgeAiOverlayComponent };

package/dist/core/popover/index.mjs

@@ -1,4 +1 @@
-import { ForgeAiPopoverComponent } from "./popover.mjs";
-export {
-  ForgeAiPopoverComponent
-};
+export { ForgeAiPopoverComponent } from "./popover2.mjs";

package/dist/core/popover/popover.mjs

@@ -1,98 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
-import "../overlay/overlay.mjs";
-import styles from "./popover.scss.mjs";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let ForgeAiPopoverComponent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.anchor = null;
-    this.placement = "bottom-start";
-    this.flip = false;
-    this.shift = false;
-    this.autoSize = false;
-    this.open = false;
-    this.arrow = false;
-    this.offset = void 0;
-    this.dismissMode = "auto";
-    this._onOverlayToggle = (event) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      this.open = event.detail.open;
-      this.dispatchEvent(
-        new CustomEvent("forge-ai-popover-toggle", {
-          detail: event.detail,
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
-  }
-  render() {
-    return html`
-      <forge-ai-overlay
-        .anchor=${this.anchor}
-        .placement=${this.placement}
-        .flip=${this.flip}
-        .shift=${this.shift}
-        .autoSize=${this.autoSize}
-        .offset=${this.offset}
-        .open=${this.open}
-        .arrowElement=${this.arrow ? this._arrowElement : null}
-        .dismissMode=${this.dismissMode}
-        @forge-ai-overlay-toggle=${this._onOverlayToggle}>
-        <div class="ai-popover">
-          ${this.arrow ? html`<div class="ai-popover__arrow"></div>` : null}
-          <slot></slot>
-        </div>
-      </forge-ai-overlay>
-    `;
-  }
-};
-ForgeAiPopoverComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  property({ type: Object })
-], ForgeAiPopoverComponent.prototype, "anchor", 2);
-__decorateClass([
-  property()
-], ForgeAiPopoverComponent.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ForgeAiPopoverComponent.prototype, "flip", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ForgeAiPopoverComponent.prototype, "shift", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-size" })
-], ForgeAiPopoverComponent.prototype, "autoSize", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], ForgeAiPopoverComponent.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ForgeAiPopoverComponent.prototype, "arrow", 2);
-__decorateClass([
-  property({ type: Object })
-], ForgeAiPopoverComponent.prototype, "offset", 2);
-__decorateClass([
-  property({ attribute: "dismiss-mode" })
-], ForgeAiPopoverComponent.prototype, "dismissMode", 2);
-__decorateClass([
-  query(".ai-popover__arrow")
-], ForgeAiPopoverComponent.prototype, "_arrowElement", 2);
-ForgeAiPopoverComponent = __decorateClass([
-  customElement("forge-ai-popover")
-], ForgeAiPopoverComponent);
-export {
-  ForgeAiPopoverComponent
-};
+//#region src/lib/core/popover/popover.scss?inline
+var popover_default = ":host {\n  display: contents;\n  overflow: visible;\n}\n\n.ai-popover {\n  position: relative;\n  background: var(--forge-theme-surface-bright, #ffffff);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  box-shadow: var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n  box-sizing: border-box;\n  animation-duration: 150ms;\n  animation-timing-function: cubic-bezier(0, 0, 0, 1);\n  animation-name: fadein, scalein;\n  transform-origin: center center;\n  overflow: visible;\n}\n.ai-popover__arrow {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: var(--forge-theme-surface-bright, #ffffff);\n  transform: rotate(45deg);\n  border: 1px solid var(--forge-theme-surface-container, #e0e0e0);\n}\n\nforge-ai-overlay[data-position-placement^=top] .ai-popover:has(.ai-popover__arrow) {\n  margin-block-end: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=bottom] .ai-popover:has(.ai-popover__arrow) {\n  margin-block-start: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=left] .ai-popover:has(.ai-popover__arrow) {\n  margin-inline-end: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=right] .ai-popover:has(.ai-popover__arrow) {\n  margin-inline-start: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-overlay[data-position-placement^=top]:not([data-position-placement*=\"-\"]) .ai-popover {\n  transform-origin: bottom center;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-start] .ai-popover {\n  transform-origin: bottom left;\n}\nforge-ai-overlay[data-position-placement^=top][data-position-placement$=-end] .ai-popover {\n  transform-origin: bottom right;\n}\nforge-ai-overlay[data-position-placement^=top] .ai-popover__arrow {\n  bottom: -6px;\n  clip-path: polygon(0 100%, 100% 0, 100% 100%);\n}\n\nforge-ai-overlay[data-position-placement^=right]:not([data-position-placement*=\"-\"]) .ai-popover {\n  transform-origin: left center;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-start] .ai-popover {\n  transform-origin: left top;\n}\nforge-ai-overlay[data-position-placement^=right][data-position-placement$=-end] .ai-popover {\n  transform-origin: left bottom;\n}\nforge-ai-overlay[data-position-placement^=right] .ai-popover__arrow {\n  left: -6px;\n  clip-path: polygon(0 0, 0 100%, 100% 100%);\n}\n\nforge-ai-overlay[data-position-placement^=bottom]:not([data-position-placement*=\"-\"]) .ai-popover {\n  transform-origin: top center;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-start] .ai-popover {\n  transform-origin: top left;\n}\nforge-ai-overlay[data-position-placement^=bottom][data-position-placement$=-end] .ai-popover {\n  transform-origin: top right;\n}\nforge-ai-overlay[data-position-placement^=bottom] .ai-popover__arrow {\n  top: -6px;\n  clip-path: polygon(0 0, 0 100%, 100% 0);\n}\n\nforge-ai-overlay[data-position-placement^=left]:not([data-position-placement*=\"-\"]) .ai-popover {\n  transform-origin: right center;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-start] .ai-popover {\n  transform-origin: right top;\n}\nforge-ai-overlay[data-position-placement^=left][data-position-placement$=-end] .ai-popover {\n  transform-origin: right bottom;\n}\nforge-ai-overlay[data-position-placement^=left] .ai-popover__arrow {\n  right: -6px;\n  clip-path: polygon(0 0, 100% 0, 100% 100%);\n}\n\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes scalein {\n  from {\n    transform: scale(0.8);\n  }\n  to {\n    transform: scale(1);\n  }\n}";
+//#endregion
+export { popover_default as default };

package/dist/core/popover/popover2.mjs

@@ -0,0 +1,71 @@
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import "../overlay/overlay2.mjs";
+import popover_default from "./popover.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+//#region src/lib/core/popover/popover.ts
+var ForgeAiPopoverComponent = class ForgeAiPopoverComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.anchor = null;
+		this.placement = "bottom-start";
+		this.flip = false;
+		this.shift = false;
+		this.autoSize = false;
+		this.open = false;
+		this.arrow = false;
+		this.offset = void 0;
+		this.dismissMode = "auto";
+		this._onOverlayToggle = (event) => {
+			if (event.target !== event.currentTarget) return;
+			this.open = event.detail.open;
+			this.dispatchEvent(new CustomEvent("forge-ai-popover-toggle", {
+				detail: event.detail,
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = unsafeCSS(popover_default);
+	}
+	render() {
+		return html`
+      <forge-ai-overlay
+        .anchor=${this.anchor}
+        .placement=${this.placement}
+        .flip=${this.flip}
+        .shift=${this.shift}
+        .autoSize=${this.autoSize}
+        .offset=${this.offset}
+        .open=${this.open}
+        .arrowElement=${this.arrow ? this._arrowElement : null}
+        .dismissMode=${this.dismissMode}
+        @forge-ai-overlay-toggle=${this._onOverlayToggle}>
+        <div class="ai-popover">
+          ${this.arrow ? html`<div class="ai-popover__arrow"></div>` : null}
+          <slot></slot>
+        </div>
+      </forge-ai-overlay>
+    `;
+	}
+};
+__decorate([property({ type: Object })], ForgeAiPopoverComponent.prototype, "anchor", void 0);
+__decorate([property()], ForgeAiPopoverComponent.prototype, "placement", void 0);
+__decorate([property({ type: Boolean })], ForgeAiPopoverComponent.prototype, "flip", void 0);
+__decorate([property({ type: Boolean })], ForgeAiPopoverComponent.prototype, "shift", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "auto-size"
+})], ForgeAiPopoverComponent.prototype, "autoSize", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ForgeAiPopoverComponent.prototype, "open", void 0);
+__decorate([property({ type: Boolean })], ForgeAiPopoverComponent.prototype, "arrow", void 0);
+__decorate([property({ type: Object })], ForgeAiPopoverComponent.prototype, "offset", void 0);
+__decorate([property({ attribute: "dismiss-mode" })], ForgeAiPopoverComponent.prototype, "dismissMode", void 0);
+__decorate([query(".ai-popover__arrow")], ForgeAiPopoverComponent.prototype, "_arrowElement", void 0);
+ForgeAiPopoverComponent = __decorate([customElement("forge-ai-popover")], ForgeAiPopoverComponent);
+//#endregion
+export { ForgeAiPopoverComponent };

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

@@ -1,5 +1,6 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
+export type ResizeGrowDirection = 'left' | 'right';
 export interface ResizeControllerOptions {
     targetElementRef: Ref<HTMLElement>;
     resizeHandleRef: Ref<HTMLElement>;
@@ -7,6 +8,10 @@ export interface ResizeControllerOptions {
     maxWidth?: number;
     defaultWidth?: number;
     keyboardStep?: number;
+    /** Screen direction the handle moves to make the width larger. Defaults to `'left'`, for a panel docked to the right. */
+    growDirection?: () => ResizeGrowDirection;
+    /** Widest the target may be given its container. Defaults to the window width minus a small buffer. */
+    getAvailableWidth?: () => number;
     onResize?: (width: number) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;

package/dist/core/resize-controller.mjs

@@ -1,153 +1,133 @@
-const RESIZE_SCREEN_BUFFER = 100;
-class ResizeController {
-  constructor(host, options) {
-    this.#isResizing = false;
-    this.#currentWidth = 0;
-    this.#dragStartX = 0;
-    this.#dragStartWidth = 0;
-    this.handlePointerDown = (event) => {
-      if (event.button !== 0) {
-        return;
-      }
-      event.preventDefault();
-      const resizeHandle = this.#options.resizeHandleRef.value;
-      if (!resizeHandle) {
-        return;
-      }
-      resizeHandle.setPointerCapture(event.pointerId);
-      this.#dragStartX = event.clientX;
-      this.#dragStartWidth = this.#currentWidth;
-      this.#isResizing = true;
-      this.#host.requestUpdate();
-      this.#options.onResizeStart();
-      this.#addResizeListeners();
-    };
-    this.handleKeyDown = (event) => {
-      const step = this.#options.keyboardStep;
-      let delta = 0;
-      switch (event.key) {
-        case "ArrowLeft":
-          delta = step;
-          break;
-        case "ArrowRight":
-          delta = -step;
-          break;
-        default:
-          return;
-      }
-      event.preventDefault();
-      const previousWidth = this.#currentWidth;
-      this.#currentWidth = this.#constrainWidth(previousWidth + delta);
-      this.#applyWidth();
-      this.#commitIfChanged(previousWidth);
-    };
-    this.#handlePointerMove = (event) => {
-      if (!this.#isResizing) {
-        return;
-      }
-      event.preventDefault();
-      const deltaX = this.#dragStartX - event.clientX;
-      const newWidth = this.#dragStartWidth + deltaX;
-      this.#currentWidth = this.#constrainWidth(newWidth);
-      this.#applyWidth();
-    };
-    this.#handlePointerUp = (event) => {
-      if (!this.#isResizing) {
-        return;
-      }
-      event.preventDefault();
-      const resizeHandle = this.#options.resizeHandleRef.value;
-      if (resizeHandle) {
-        resizeHandle.releasePointerCapture(event.pointerId);
-      }
-      this.#isResizing = false;
-      this.#host.requestUpdate();
-      this.#options.onResizeEnd();
-      this.#commitIfChanged(this.#dragStartWidth);
-      this.#removeResizeListeners();
-    };
-    this.#host = host;
-    this.#options = {
-      minWidth: 360,
-      maxWidth: 800,
-      defaultWidth: 420,
-      keyboardStep: 20,
-      onResize: () => {
-      },
-      onResizeStart: () => {
-      },
-      onResizeEnd: () => {
-      },
-      onCommit: () => {
-      },
-      ...options
-    };
-    this.#currentWidth = this.#options.defaultWidth;
-    host.addController(this);
-  }
-  #host;
-  #options;
-  #isResizing;
-  #currentWidth;
-  #dragStartX;
-  #dragStartWidth;
-  #resizeAbortController;
-  hostConnected() {
-  }
-  hostDisconnected() {
-    this.#cleanup();
-  }
-  get isResizing() {
-    return this.#isResizing;
-  }
-  get currentWidth() {
-    return this.#currentWidth;
-  }
-  setWidth(width) {
-    this.#currentWidth = this.#constrainWidth(width);
-    this.#applyWidth();
-  }
-  resetWidth() {
-    this.setWidth(this.#options.defaultWidth);
-  }
-  #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);
-    return Math.max(this.#options.minWidth, Math.min(width, effectiveMaxWidth));
-  }
-  #applyWidth() {
-    this.#options.onResize(this.#currentWidth);
-    this.#host.requestUpdate();
-  }
-  #addResizeListeners() {
-    if (!this.#resizeAbortController) {
-      this.#resizeAbortController = new AbortController();
-      document.addEventListener("pointermove", this.#handlePointerMove, {
-        signal: this.#resizeAbortController.signal
-      });
-      document.addEventListener("pointerup", this.#handlePointerUp, {
-        signal: this.#resizeAbortController.signal
-      });
-    }
-  }
-  #removeResizeListeners() {
-    if (this.#resizeAbortController) {
-      this.#resizeAbortController.abort();
-      this.#resizeAbortController = void 0;
-    }
-  }
-  #cleanup() {
-    this.#removeResizeListeners();
-    this.#isResizing = false;
-  }
-}
-export {
-  ResizeController
+//#region src/lib/core/resize-controller.ts
+var RESIZE_SCREEN_BUFFER = 100;
+var ResizeController = class {
+	#host;
+	#options;
+	#isResizing;
+	#currentWidth;
+	#dragStartX;
+	#dragStartWidth;
+	#resizeAbortController;
+	constructor(host, options) {
+		this.#isResizing = false;
+		this.#currentWidth = 0;
+		this.#dragStartX = 0;
+		this.#dragStartWidth = 0;
+		this.handlePointerDown = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const resizeHandle = this.#options.resizeHandleRef.value;
+			if (!resizeHandle) return;
+			resizeHandle.setPointerCapture(event.pointerId);
+			this.#dragStartX = event.clientX;
+			this.#dragStartWidth = this.#currentWidth;
+			this.#isResizing = true;
+			this.#host.requestUpdate();
+			this.#options.onResizeStart();
+			this.#addResizeListeners();
+		};
+		this.handleKeyDown = (event) => {
+			const step = this.#options.keyboardStep;
+			const growSign = this.#options.growDirection() === "left" ? 1 : -1;
+			let delta = 0;
+			switch (event.key) {
+				case "ArrowLeft":
+					delta = step * growSign;
+					break;
+				case "ArrowRight":
+					delta = -step * growSign;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+			const previousWidth = this.#currentWidth;
+			this.#currentWidth = this.#constrainWidth(previousWidth + delta);
+			this.#applyWidth();
+			this.#commitIfChanged(previousWidth);
+		};
+		this.#handlePointerMove = (event) => {
+			if (!this.#isResizing) return;
+			event.preventDefault();
+			const deltaX = this.#options.growDirection() === "left" ? this.#dragStartX - event.clientX : event.clientX - this.#dragStartX;
+			const newWidth = this.#dragStartWidth + deltaX;
+			this.#currentWidth = this.#constrainWidth(newWidth);
+			this.#applyWidth();
+		};
+		this.#handlePointerUp = (event) => {
+			if (!this.#isResizing) return;
+			event.preventDefault();
+			const resizeHandle = this.#options.resizeHandleRef.value;
+			if (resizeHandle) resizeHandle.releasePointerCapture(event.pointerId);
+			this.#isResizing = false;
+			this.#host.requestUpdate();
+			this.#options.onResizeEnd();
+			this.#commitIfChanged(this.#dragStartWidth);
+			this.#removeResizeListeners();
+		};
+		this.#host = host;
+		this.#options = {
+			minWidth: 360,
+			maxWidth: 800,
+			defaultWidth: 420,
+			keyboardStep: 20,
+			growDirection: () => "left",
+			getAvailableWidth: () => window.innerWidth - RESIZE_SCREEN_BUFFER,
+			onResize: () => {},
+			onResizeStart: () => {},
+			onResizeEnd: () => {},
+			onCommit: () => {},
+			...options
+		};
+		this.#currentWidth = this.#options.defaultWidth;
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {
+		this.#cleanup();
+	}
+	get isResizing() {
+		return this.#isResizing;
+	}
+	get currentWidth() {
+		return this.#currentWidth;
+	}
+	setWidth(width) {
+		this.#currentWidth = this.#constrainWidth(width);
+		this.#applyWidth();
+	}
+	resetWidth() {
+		this.setWidth(this.#options.defaultWidth);
+	}
+	#handlePointerMove;
+	#handlePointerUp;
+	#commitIfChanged(previousWidth) {
+		if (this.#currentWidth !== previousWidth) this.#options.onCommit(this.#currentWidth);
+	}
+	#constrainWidth(width) {
+		const effectiveMaxWidth = Math.min(this.#options.maxWidth, this.#options.getAvailableWidth());
+		return Math.max(this.#options.minWidth, Math.min(width, effectiveMaxWidth));
+	}
+	#applyWidth() {
+		this.#options.onResize(this.#currentWidth);
+		this.#host.requestUpdate();
+	}
+	#addResizeListeners() {
+		if (!this.#resizeAbortController) {
+			this.#resizeAbortController = new AbortController();
+			document.addEventListener("pointermove", this.#handlePointerMove, { signal: this.#resizeAbortController.signal });
+			document.addEventListener("pointerup", this.#handlePointerUp, { signal: this.#resizeAbortController.signal });
+		}
+	}
+	#removeResizeListeners() {
+		if (this.#resizeAbortController) {
+			this.#resizeAbortController.abort();
+			this.#resizeAbortController = void 0;
+		}
+	}
+	#cleanup() {
+		this.#removeResizeListeners();
+		this.#isResizing = false;
+	}
 };
+//#endregion
+export { ResizeController };

package/dist/core/tooltip/index.mjs

@@ -1,4 +1 @@
-import { ForgeAiTooltipComponent } from "./tooltip.mjs";
-export {
-  ForgeAiTooltipComponent
-};
+export { ForgeAiTooltipComponent } from "./tooltip2.mjs";