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

package/dist/core/drag-controller.mjs

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

package/dist/core/index.d.ts

@@ -1,4 +1,5 @@
-export { CanvasController, type CanvasControllerConfig, type CanvasContent, type CanvasOpenEventData, type OpenCanvasOptions } from './canvas-controller.js';
+export * from './overlay/index.js';
+export * from './popover/index.js';
+export * from './tooltip/index.js';
 export { DragController, type DragControllerOptions } from './drag-controller.js';
 export { ResizeController, type ResizeControllerOptions, type ResizeGrowDirection } from './resize-controller.js';
-export { ChatbotCoreController, type ChatbotCoreCallbacks, type ChatbotCoreControllerConfig } from './chatbot-core-controller.js';

package/dist/core/index.mjs

@@ -1,10 +1,9 @@
-import { CanvasController } from "./canvas-controller.mjs";
+import { ForgeAiOverlayComponent } from "./overlay/overlay2.mjs";
+import { ForgeAiTooltipComponent } from "./tooltip/tooltip2.mjs";
+import { ForgeAiPopoverComponent } from "./popover/popover2.mjs";
+import "./tooltip/index.mjs";
 import { DragController } from "./drag-controller.mjs";
 import { ResizeController } from "./resize-controller.mjs";
-import { ChatbotCoreController } from "./chatbot-core-controller.mjs";
-export {
-  CanvasController,
-  ChatbotCoreController,
-  DragController,
-  ResizeController
-};
+import "./overlay/index.mjs";
+import "./popover/index.mjs";
+export { DragController, ForgeAiOverlayComponent, ForgeAiPopoverComponent, ForgeAiTooltipComponent, ResizeController };

package/dist/core/overlay/index.mjs

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

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

@@ -19,7 +19,7 @@ export type OverlayOffset = number | {
     alignmentAxis?: number;
 };
 /**
- * @summary A low-level overlay component for internal use within AI components.
+ * @summary A low-level overlay component that positions content relative to an anchor. Used by `forge-ai-popover` and `forge-ai-tooltip`.
  *
  * @slot - The default slot for overlay content.
  *

package/dist/core/overlay/overlay.mjs

@@ -1,180 +1,4 @@
-import { offset, flip, shift, size, arrow, autoUpdate, computePosition } from "@floating-ui/dom";
-import { unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import styles from "./overlay.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 ForgeAiOverlayComponent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    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) => {
-      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
-        })
-      );
-    };
-  }
-  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>
-    `;
-  }
-};
-ForgeAiOverlayComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  property({ type: Object })
-], ForgeAiOverlayComponent.prototype, "anchor", 2);
-__decorateClass([
-  property()
-], ForgeAiOverlayComponent.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ForgeAiOverlayComponent.prototype, "flip", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ForgeAiOverlayComponent.prototype, "shift", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-size" })
-], ForgeAiOverlayComponent.prototype, "autoSize", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], ForgeAiOverlayComponent.prototype, "open", 2);
-__decorateClass([
-  property({ type: Object })
-], ForgeAiOverlayComponent.prototype, "arrowElement", 2);
-__decorateClass([
-  property({ type: Object })
-], ForgeAiOverlayComponent.prototype, "offset", 2);
-__decorateClass([
-  property({ attribute: "dismiss-mode" })
-], ForgeAiOverlayComponent.prototype, "dismissMode", 2);
-ForgeAiOverlayComponent = __decorateClass([
-  customElement("forge-ai-overlay")
-], ForgeAiOverlayComponent);
-export {
-  ForgeAiOverlayComponent
-};
+//#region src/lib/core/overlay/overlay.scss?inline
+var overlay_default = ":host {\n  display: contents;\n}\n\n.ai-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: inherit;\n  color: inherit;\n  border-radius: inherit;\n  overflow: visible;\n}\n.ai-overlay[popover] {\n  inset: unset;\n}";
+//#endregion
+export { overlay_default as default };