@editframe/elements 0.24.1-beta.0 → 0.25.0-beta.0

package/dist/gui/EFResizableBox.js

@@ -2,8 +2,10 @@ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/dec
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
-var DEFAULT_MIN_SIZE = 10;
-var CENTER_RESIZE_MULTIPLIER = 2;
+
+//#region src/gui/EFResizableBox.ts
+const DEFAULT_MIN_SIZE = 10;
+const CENTER_RESIZE_MULTIPLIER = 2;
 function constrainMovementDeltas(initialBounds, deltaX, deltaY, container) {
 	const maxLeftMovement = -initialBounds.x;
 	const maxRightMovement = container.width - (initialBounds.x + initialBounds.width);
@@ -207,7 +209,7 @@ function calculateCenterResizeWithAspectRatio(context, handle) {
 		height: newHeight
 	};
 }
-var EFResizableBox = class EFResizableBox$1 extends LitElement {
+let EFResizableBox = class EFResizableBox$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.bounds = {
@@ -544,4 +546,7 @@ __decorate([property({ type: Number })], EFResizableBox.prototype, "minSize", vo
 __decorate([state()], EFResizableBox.prototype, "isDragging", void 0);
 __decorate([state()], EFResizableBox.prototype, "dragMode", void 0);
 EFResizableBox = __decorate([customElement("ef-resizable-box")], EFResizableBox);
+
+//#endregion
 export { EFResizableBox };
+//# sourceMappingURL=EFResizableBox.js.map

package/dist/gui/EFResizableBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFResizableBox.js","names":["movementValue: number","newBounds: BoxBounds","EFResizableBox","context: ResizeContext","idealBounds: BoxBounds","result: BoxBounds"],"sources":["../../src/gui/EFResizableBox.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\n// Constants\nconst DEFAULT_MIN_SIZE = 10;\nconst CENTER_RESIZE_MULTIPLIER = 2;\n\nexport interface BoxBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ntype ResizeCorner = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\ntype ResizeSide = \"top\" | \"right\" | \"bottom\" | \"left\";\ntype ResizeHandle = ResizeCorner | ResizeSide;\n\ninterface Dimensions {\n  width: number;\n  height: number;\n}\n\ninterface ResizeContext {\n  readonly initialBounds: BoxBounds;\n  readonly container: Dimensions;\n  readonly constraints: {\n    minSize: number;\n    aspectRatio?: number;\n  };\n  readonly movement: {\n    deltaX: number;\n    deltaY: number;\n  };\n  readonly modifiers: {\n    centerResize: boolean;\n    preserveAspectRatio: boolean;\n  };\n}\n\n// Pure calculation functions\nfunction constrainMovementDeltas(\n  initialBounds: BoxBounds,\n  deltaX: number,\n  deltaY: number,\n  container: Dimensions,\n): { deltaX: number; deltaY: number } {\n  const maxLeftMovement = -initialBounds.x;\n  const maxRightMovement =\n    container.width - (initialBounds.x + initialBounds.width);\n  const maxUpMovement = -initialBounds.y;\n  const maxDownMovement =\n    container.height - (initialBounds.y + initialBounds.height);\n\n  return {\n    deltaX: Math.max(maxLeftMovement, Math.min(maxRightMovement, deltaX)),\n    deltaY: Math.max(maxUpMovement, Math.min(maxDownMovement, deltaY)),\n  };\n}\n\nfunction calculateNormalResize(\n  context: ResizeContext,\n  handle: ResizeHandle,\n): BoxBounds {\n  const { initialBounds, movement } = context;\n  const { deltaX, deltaY } = movement;\n\n  switch (handle) {\n    case \"bottom-right\":\n      return {\n        ...initialBounds,\n        width: initialBounds.width + deltaX,\n        height: initialBounds.height + deltaY,\n      };\n\n    case \"top-left\": {\n      const rightEdge = initialBounds.x + initialBounds.width;\n      const bottomEdge = initialBounds.y + initialBounds.height;\n      const newX = initialBounds.x + deltaX;\n      const newY = initialBounds.y + deltaY;\n\n      return {\n        x: newX,\n        y: newY,\n        width: rightEdge - newX,\n        height: bottomEdge - newY,\n      };\n    }\n\n    case \"top-right\": {\n      const bottomEdge = initialBounds.y + initialBounds.height;\n      const newY = initialBounds.y + deltaY;\n\n      return {\n        ...initialBounds,\n        y: newY,\n        width: initialBounds.width + deltaX,\n        height: bottomEdge - newY,\n      };\n    }\n\n    case \"bottom-left\": {\n      const rightEdge = initialBounds.x + initialBounds.width;\n      const newX = initialBounds.x + deltaX;\n\n      return {\n        ...initialBounds,\n        x: newX,\n        width: rightEdge - newX,\n        height: initialBounds.height + deltaY,\n      };\n    }\n\n    case \"top\": {\n      const bottomEdge = initialBounds.y + initialBounds.height;\n      const newY = initialBounds.y + deltaY;\n\n      return {\n        ...initialBounds,\n        y: newY,\n        height: bottomEdge - newY,\n      };\n    }\n\n    case \"right\":\n      return {\n        ...initialBounds,\n        width: initialBounds.width + deltaX,\n      };\n\n    case \"bottom\":\n      return {\n        ...initialBounds,\n        height: initialBounds.height + deltaY,\n      };\n\n    case \"left\": {\n      const rightEdge = initialBounds.x + initialBounds.width;\n      const newX = initialBounds.x + deltaX;\n\n      return {\n        ...initialBounds,\n        x: newX,\n        width: rightEdge - newX,\n      };\n    }\n\n    default:\n      return initialBounds;\n  }\n}\n\nfunction calculateAspectRatioResize(\n  context: ResizeContext,\n  handle: ResizeHandle,\n): BoxBounds {\n  const { initialBounds, movement, constraints } = context;\n  const { deltaX, deltaY } = movement;\n  if (!constraints.aspectRatio) {\n    return initialBounds;\n  }\n  const aspectRatio = constraints.aspectRatio;\n\n  const widthMovement = deltaX;\n  const heightMovement = deltaY * aspectRatio;\n\n  let movementValue: number;\n  switch (handle) {\n    case \"bottom-right\":\n    case \"top-left\":\n      movementValue = (widthMovement + heightMovement) / 2;\n      break;\n    case \"top-right\":\n    case \"bottom-left\":\n      movementValue = (widthMovement - heightMovement) / 2;\n      break;\n    default:\n      movementValue = widthMovement;\n  }\n\n  const baseWidth =\n    handle === \"top-left\" || handle === \"bottom-left\"\n      ? initialBounds.width - movementValue\n      : initialBounds.width + movementValue;\n\n  const width = Math.max(constraints.minSize, baseWidth);\n  const height = width / aspectRatio;\n\n  const newBounds: BoxBounds = { ...initialBounds, width, height };\n\n  // Adjust position for handles that move the origin\n  switch (handle) {\n    case \"top-left\":\n      newBounds.x = initialBounds.x + initialBounds.width - width;\n      newBounds.y = initialBounds.y + initialBounds.height - height;\n      break;\n    case \"top-right\":\n      newBounds.y = initialBounds.y + initialBounds.height - height;\n      break;\n    case \"bottom-left\":\n      newBounds.x = initialBounds.x + initialBounds.width - width;\n      break;\n  }\n\n  return newBounds;\n}\n\nfunction calculateCenterResize(\n  context: ResizeContext,\n  handle: ResizeHandle,\n): BoxBounds {\n  const { initialBounds, movement } = context;\n  const { deltaX, deltaY } = movement;\n\n  const centerX = initialBounds.x + initialBounds.width / 2;\n  const centerY = initialBounds.y + initialBounds.height / 2;\n\n  let widthChange = 0;\n  let heightChange = 0;\n\n  switch (handle) {\n    case \"bottom-right\":\n      widthChange = deltaX * CENTER_RESIZE_MULTIPLIER;\n      heightChange = deltaY * CENTER_RESIZE_MULTIPLIER;\n      break;\n    case \"top-left\":\n      widthChange = -deltaX * CENTER_RESIZE_MULTIPLIER;\n      heightChange = -deltaY * CENTER_RESIZE_MULTIPLIER;\n      break;\n    case \"top-right\":\n      widthChange = deltaX * CENTER_RESIZE_MULTIPLIER;\n      heightChange = -deltaY * CENTER_RESIZE_MULTIPLIER;\n      break;\n    case \"bottom-left\":\n      widthChange = -deltaX * CENTER_RESIZE_MULTIPLIER;\n      heightChange = deltaY * CENTER_RESIZE_MULTIPLIER;\n      break;\n    case \"top\":\n    case \"bottom\":\n      heightChange =\n        (handle === \"bottom\" ? deltaY : -deltaY) * CENTER_RESIZE_MULTIPLIER;\n      break;\n    case \"left\":\n    case \"right\":\n      widthChange =\n        (handle === \"right\" ? deltaX : -deltaX) * CENTER_RESIZE_MULTIPLIER;\n      break;\n  }\n\n  const newWidth = initialBounds.width + widthChange;\n  const newHeight = initialBounds.height + heightChange;\n\n  return {\n    x: centerX - newWidth / 2,\n    y: centerY - newHeight / 2,\n    width: newWidth,\n    height: newHeight,\n  };\n}\n\nfunction calculateCenterResizeWithAspectRatio(\n  context: ResizeContext,\n  handle: ResizeHandle,\n): BoxBounds {\n  const { initialBounds, movement, constraints } = context;\n  const { deltaX, deltaY } = movement;\n  if (!constraints.aspectRatio) {\n    return initialBounds;\n  }\n  const aspectRatio = constraints.aspectRatio;\n\n  const centerX = initialBounds.x + initialBounds.width / 2;\n  const centerY = initialBounds.y + initialBounds.height / 2;\n\n  let movementValue: number;\n  switch (handle) {\n    case \"bottom-right\":\n      movementValue = Math.max(deltaX, deltaY);\n      break;\n    case \"top-left\":\n      movementValue = -Math.max(-deltaX, -deltaY);\n      break;\n    case \"top-right\":\n      movementValue = Math.max(deltaX, -deltaY);\n      break;\n    case \"bottom-left\":\n      movementValue = Math.max(-deltaX, deltaY);\n      break;\n    case \"top\":\n    case \"bottom\":\n      movementValue = handle === \"bottom\" ? deltaY : -deltaY;\n      break;\n    case \"left\":\n    case \"right\":\n      movementValue = handle === \"right\" ? deltaX : -deltaX;\n      break;\n    default:\n      movementValue = Math.max(deltaX, deltaY);\n  }\n\n  const newWidth = Math.max(\n    constraints.minSize,\n    initialBounds.width + movementValue * CENTER_RESIZE_MULTIPLIER,\n  );\n  const newHeight = newWidth / aspectRatio;\n\n  return {\n    x: centerX - newWidth / 2,\n    y: centerY - newHeight / 2,\n    width: newWidth,\n    height: newHeight,\n  };\n}\n\n@customElement(\"ef-resizable-box\")\nexport class EFResizableBox extends LitElement {\n  @property({ type: Object })\n  bounds: BoxBounds = { x: 0, y: 0, width: 100, height: 100 };\n\n  @state()\n  private containerWidth = 0;\n\n  @state()\n  private containerHeight = 0;\n\n  @property({ type: Number })\n  minSize = DEFAULT_MIN_SIZE;\n\n  @state()\n  private isDragging = false;\n\n  @state()\n  private dragMode: \"move\" | \"resize\" | null = null;\n\n  private interaction: {\n    startPoint: { x: number; y: number };\n    target: { mode: \"move\" | \"resize\"; handle?: ResizeHandle };\n    initialBounds: BoxBounds;\n    pointerId: number;\n  } | null = null;\n\n  private modifiers = { shift: false, alt: false };\n\n  static styles = css`\n    .box {\n      position: absolute;\n      border: 2px solid var(--ef-resizable-box-border-color, #3b82f6);\n      background-color: var(--ef-resizable-box-bg-color, rgba(59, 130, 246, 0.2));\n      cursor: grab;\n    }\n    .box.dragging {\n      border-color: var(--ef-resizable-box-dragging-border-color, #2563eb);\n      background-color: var(--ef-resizable-box-dragging-bg-color, rgba(37, 99, 235, 0.3));\n    }\n    .handle {\n      position: absolute;\n      background-color: var(--ef-resizable-box-handle-color, #3b82f6);\n      touch-action: none;\n    }\n    .top-left { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }\n    .top-right { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }\n    .bottom-left { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }\n    .bottom-right { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }\n    .top { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }\n    .right { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }\n    .bottom { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }\n    .left { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }\n  `;\n\n  private resizeObserver?: ResizeObserver;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.offsetParent) {\n      this.containerWidth = this.offsetParent.clientWidth;\n      this.containerHeight = this.offsetParent.clientHeight;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.offsetParent) {\n        this.containerWidth = this.offsetParent.clientWidth;\n        this.containerHeight = this.offsetParent.clientHeight;\n      }\n    });\n    if (this.offsetParent) {\n      this.resizeObserver.observe(this.offsetParent);\n    }\n  }\n\n  private handlePointerDown(\n    e: PointerEvent,\n    mode: \"move\" | \"resize\",\n    handle?: ResizeHandle,\n  ) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n    this.dragMode = mode;\n\n    this.interaction = {\n      startPoint: { x: e.clientX, y: e.clientY },\n      target: { mode, handle },\n      initialBounds: { ...this.bounds },\n      pointerId: e.pointerId,\n    };\n    this.modifiers = { shift: e.shiftKey, alt: e.altKey };\n\n    document.addEventListener(\"pointermove\", this.handlePointerMove);\n    document.addEventListener(\"pointerup\", this.handlePointerUp);\n  }\n\n  private handlePointerMove = (e: PointerEvent) => {\n    if (\n      !this.isDragging ||\n      !this.interaction ||\n      e.pointerId !== this.interaction.pointerId\n    )\n      return;\n\n    const deltaX = e.clientX - this.interaction.startPoint.x;\n    const deltaY = e.clientY - this.interaction.startPoint.y;\n\n    this.modifiers = { shift: e.shiftKey, alt: e.altKey };\n\n    if (this.dragMode === \"move\") {\n      const constrainedMovement = constrainMovementDeltas(\n        this.interaction.initialBounds,\n        deltaX,\n        deltaY,\n        { width: this.containerWidth, height: this.containerHeight },\n      );\n      this.bounds = {\n        ...this.interaction.initialBounds,\n        x: this.interaction.initialBounds.x + constrainedMovement.deltaX,\n        y: this.interaction.initialBounds.y + constrainedMovement.deltaY,\n      };\n    } else if (this.dragMode === \"resize\" && this.interaction.target.handle) {\n      const context: ResizeContext = {\n        initialBounds: this.interaction.initialBounds,\n        container: { width: this.containerWidth, height: this.containerHeight },\n        constraints: {\n          minSize: this.minSize,\n          aspectRatio: this.modifiers.shift\n            ? this.interaction.initialBounds.width /\n              this.interaction.initialBounds.height\n            : undefined,\n        },\n        movement: { deltaX, deltaY },\n        modifiers: {\n          centerResize: this.modifiers.alt,\n          preserveAspectRatio: this.modifiers.shift,\n        },\n      };\n      this.bounds = this.calculateBoundsWithModeAwareConstraints(\n        context,\n        this.interaction.target.handle,\n      );\n    }\n\n    this.dispatchBoundsChange();\n  };\n\n  private handlePointerUp = () => {\n    this.isDragging = false;\n    this.dragMode = null;\n    this.interaction = null;\n    document.removeEventListener(\"pointermove\", this.handlePointerMove);\n    document.removeEventListener(\"pointerup\", this.handlePointerUp);\n  };\n\n  private calculateBoundsWithModeAwareConstraints(\n    context: ResizeContext,\n    handle: ResizeHandle,\n  ): BoxBounds {\n    const { modifiers, constraints, container, initialBounds } = context;\n\n    // For normal resize, use the simple delta constraint approach\n    if (!modifiers.centerResize && !modifiers.preserveAspectRatio) {\n      const constrainedMovement = this.constrainResizeDeltas(\n        initialBounds,\n        context.movement.deltaX,\n        context.movement.deltaY,\n        handle,\n        container,\n        constraints.minSize,\n      );\n\n      return calculateNormalResize(\n        {\n          ...context,\n          movement: constrainedMovement,\n        },\n        handle,\n      );\n    }\n\n    // For modifier-based resizes, calculate ideal bounds then constrain smartly\n    let idealBounds: BoxBounds;\n\n    if (modifiers.centerResize && modifiers.preserveAspectRatio) {\n      idealBounds = calculateCenterResizeWithAspectRatio(context, handle);\n    } else if (modifiers.centerResize) {\n      idealBounds = calculateCenterResize(context, handle);\n    } else {\n      idealBounds = calculateAspectRatioResize(context, handle);\n    }\n\n    // Smart constraint that preserves the resize mode's behavior\n    return this.constrainBoundsForMode(idealBounds, context, handle);\n  }\n\n  private constrainBoundsForMode(\n    idealBounds: BoxBounds,\n    context: ResizeContext,\n    handle: ResizeHandle,\n  ): BoxBounds {\n    const { container, constraints, modifiers } = context;\n\n    // Check if bounds are already valid\n    if (this.isValidBounds(idealBounds, container, constraints.minSize)) {\n      return idealBounds;\n    }\n\n    // For combined center + aspect ratio, need special handling\n    if (\n      modifiers.centerResize &&\n      modifiers.preserveAspectRatio &&\n      constraints.aspectRatio\n    ) {\n      return this.constrainCenterResizeWithAspectRatio(idealBounds, context);\n    }\n\n    // For aspect ratio modes, we need to scale the bounds proportionally\n    if (modifiers.preserveAspectRatio && constraints.aspectRatio) {\n      return this.constrainWithAspectRatio(idealBounds, context, handle);\n    }\n\n    // For center resize, we need to adjust from the center\n    if (modifiers.centerResize) {\n      return this.constrainCenterResize(idealBounds, context);\n    }\n\n    // Fallback to simple constraint\n    return this.simpleConstrainBounds(\n      idealBounds,\n      container,\n      constraints.minSize,\n    );\n  }\n\n  private isValidBounds(\n    bounds: BoxBounds,\n    container: Dimensions,\n    minSize: number,\n  ): boolean {\n    return (\n      bounds.x >= 0 &&\n      bounds.y >= 0 &&\n      bounds.width >= minSize &&\n      bounds.height >= minSize &&\n      bounds.x + bounds.width <= container.width &&\n      bounds.y + bounds.height <= container.height\n    );\n  }\n\n  private constrainWithAspectRatio(\n    idealBounds: BoxBounds,\n    context: ResizeContext,\n    handle: ResizeHandle,\n  ): BoxBounds {\n    const { container, constraints, initialBounds } = context;\n    if (!constraints.aspectRatio) {\n      return initialBounds;\n    }\n    const aspectRatio = constraints.aspectRatio;\n\n    // Calculate maximum allowed dimensions\n    const maxWidth = container.width - Math.max(0, idealBounds.x);\n    const maxHeight = container.height - Math.max(0, idealBounds.y);\n\n    // Find the largest size that fits both constraints\n    let constrainedWidth = Math.max(\n      constraints.minSize,\n      Math.min(maxWidth, idealBounds.width),\n    );\n    let constrainedHeight = constrainedWidth / aspectRatio;\n\n    // If height is too big, constrain by height instead\n    if (constrainedHeight > maxHeight) {\n      constrainedHeight = Math.max(constraints.minSize, maxHeight);\n      constrainedWidth = constrainedHeight * aspectRatio;\n    }\n\n    // Ensure we don't go smaller than minimum\n    if (constrainedWidth < constraints.minSize) {\n      constrainedWidth = constraints.minSize;\n      constrainedHeight = constrainedWidth / aspectRatio;\n    }\n\n    const result: BoxBounds = {\n      ...idealBounds,\n      width: constrainedWidth,\n      height: constrainedHeight,\n    };\n\n    // Adjust position for handles that move the origin\n    switch (handle) {\n      case \"top-left\":\n        result.x = initialBounds.x + initialBounds.width - constrainedWidth;\n        result.y = initialBounds.y + initialBounds.height - constrainedHeight;\n        break;\n      case \"top-right\":\n        result.y = initialBounds.y + initialBounds.height - constrainedHeight;\n        break;\n      case \"bottom-left\":\n        result.x = initialBounds.x + initialBounds.width - constrainedWidth;\n        break;\n    }\n\n    // Ensure position is within bounds\n    result.x = Math.max(0, Math.min(container.width - result.width, result.x));\n    result.y = Math.max(\n      0,\n      Math.min(container.height - result.height, result.y),\n    );\n\n    return result;\n  }\n\n  private constrainCenterResize(\n    idealBounds: BoxBounds,\n    context: ResizeContext,\n  ): BoxBounds {\n    const { container, constraints, initialBounds } = context;\n\n    const centerX = initialBounds.x + initialBounds.width / 2;\n    const centerY = initialBounds.y + initialBounds.height / 2;\n\n    // Calculate maximum dimensions from center\n    const maxWidthFromCenter = Math.min(\n      centerX * 2,\n      (container.width - centerX) * 2,\n    );\n    const maxHeightFromCenter = Math.min(\n      centerY * 2,\n      (container.height - centerY) * 2,\n    );\n\n    const constrainedWidth = Math.max(\n      constraints.minSize,\n      Math.min(maxWidthFromCenter, idealBounds.width),\n    );\n    const constrainedHeight = Math.max(\n      constraints.minSize,\n      Math.min(maxHeightFromCenter, idealBounds.height),\n    );\n\n    return {\n      x: centerX - constrainedWidth / 2,\n      y: centerY - constrainedHeight / 2,\n      width: constrainedWidth,\n      height: constrainedHeight,\n    };\n  }\n\n  private constrainCenterResizeWithAspectRatio(\n    idealBounds: BoxBounds,\n    context: ResizeContext,\n  ): BoxBounds {\n    const { container, constraints, initialBounds } = context;\n    if (!constraints.aspectRatio) {\n      return initialBounds;\n    }\n    const aspectRatio = constraints.aspectRatio;\n\n    const centerX = initialBounds.x + initialBounds.width / 2;\n    const centerY = initialBounds.y + initialBounds.height / 2;\n\n    // Calculate maximum dimensions from center while maintaining aspect ratio\n    const maxWidthFromCenter = Math.min(\n      centerX * 2,\n      (container.width - centerX) * 2,\n    );\n    const maxHeightFromCenter = Math.min(\n      centerY * 2,\n      (container.height - centerY) * 2,\n    );\n\n    // Start with the ideal width, then constrain\n    let constrainedWidth = Math.max(\n      constraints.minSize,\n      Math.min(maxWidthFromCenter, idealBounds.width),\n    );\n    let constrainedHeight = constrainedWidth / aspectRatio;\n\n    // If height doesn't fit, constrain by height instead\n    if (constrainedHeight > maxHeightFromCenter) {\n      constrainedHeight = Math.max(constraints.minSize, maxHeightFromCenter);\n      constrainedWidth = constrainedHeight * aspectRatio;\n    }\n\n    // Ensure minimum size\n    if (constrainedWidth < constraints.minSize) {\n      constrainedWidth = constraints.minSize;\n      constrainedHeight = constrainedWidth / aspectRatio;\n    }\n\n    if (constrainedHeight < constraints.minSize) {\n      constrainedHeight = constraints.minSize;\n      constrainedWidth = constrainedHeight * aspectRatio;\n    }\n\n    return {\n      x: centerX - constrainedWidth / 2,\n      y: centerY - constrainedHeight / 2,\n      width: constrainedWidth,\n      height: constrainedHeight,\n    };\n  }\n\n  private simpleConstrainBounds(\n    bounds: BoxBounds,\n    container: Dimensions,\n    minSize: number,\n  ): BoxBounds {\n    return {\n      x: Math.max(0, Math.min(container.width - bounds.width, bounds.x)),\n      y: Math.max(0, Math.min(container.height - bounds.height, bounds.y)),\n      width: Math.max(\n        minSize,\n        Math.min(container.width - bounds.x, bounds.width),\n      ),\n      height: Math.max(\n        minSize,\n        Math.min(container.height - bounds.y, bounds.height),\n      ),\n    };\n  }\n\n  private constrainResizeDeltas(\n    initialBounds: BoxBounds,\n    deltaX: number,\n    deltaY: number,\n    handle: ResizeHandle,\n    container: Dimensions,\n    minSize: number,\n  ): { deltaX: number; deltaY: number } {\n    let constrainedDeltaX = deltaX;\n    let constrainedDeltaY = deltaY;\n\n    switch (handle) {\n      case \"bottom-right\":\n        // Can't make smaller than minSize, can't go beyond container\n        constrainedDeltaX = Math.max(\n          minSize - initialBounds.width,\n          Math.min(\n            container.width - initialBounds.x - initialBounds.width,\n            deltaX,\n          ),\n        );\n        constrainedDeltaY = Math.max(\n          minSize - initialBounds.height,\n          Math.min(\n            container.height - initialBounds.y - initialBounds.height,\n            deltaY,\n          ),\n        );\n        break;\n\n      case \"top-left\":\n        // Can't make smaller than minSize, can't go beyond 0\n        constrainedDeltaX = Math.max(\n          -initialBounds.x,\n          Math.min(initialBounds.width - minSize, deltaX),\n        );\n        constrainedDeltaY = Math.max(\n          -initialBounds.y,\n          Math.min(initialBounds.height - minSize, deltaY),\n        );\n        break;\n\n      case \"top-right\":\n        constrainedDeltaX = Math.max(\n          minSize - initialBounds.width,\n          Math.min(\n            container.width - initialBounds.x - initialBounds.width,\n            deltaX,\n          ),\n        );\n        constrainedDeltaY = Math.max(\n          -initialBounds.y,\n          Math.min(initialBounds.height - minSize, deltaY),\n        );\n        break;\n\n      case \"bottom-left\":\n        constrainedDeltaX = Math.max(\n          -initialBounds.x,\n          Math.min(initialBounds.width - minSize, deltaX),\n        );\n        constrainedDeltaY = Math.max(\n          minSize - initialBounds.height,\n          Math.min(\n            container.height - initialBounds.y - initialBounds.height,\n            deltaY,\n          ),\n        );\n        break;\n\n      case \"right\":\n        constrainedDeltaX = Math.max(\n          minSize - initialBounds.width,\n          Math.min(\n            container.width - initialBounds.x - initialBounds.width,\n            deltaX,\n          ),\n        );\n        break;\n\n      case \"left\":\n        constrainedDeltaX = Math.max(\n          -initialBounds.x,\n          Math.min(initialBounds.width - minSize, deltaX),\n        );\n        break;\n\n      case \"bottom\":\n        constrainedDeltaY = Math.max(\n          minSize - initialBounds.height,\n          Math.min(\n            container.height - initialBounds.y - initialBounds.height,\n            deltaY,\n          ),\n        );\n        break;\n\n      case \"top\":\n        constrainedDeltaY = Math.max(\n          -initialBounds.y,\n          Math.min(initialBounds.height - minSize, deltaY),\n        );\n        break;\n    }\n\n    return { deltaX: constrainedDeltaX, deltaY: constrainedDeltaY };\n  }\n\n  private dispatchBoundsChange() {\n    this.dispatchEvent(\n      new CustomEvent(\"bounds-change\", {\n        detail: { bounds: this.bounds },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render() {\n    const boxStyles = {\n      left: `${this.bounds.x}px`,\n      top: `${this.bounds.y}px`,\n      width: `${this.bounds.width}px`,\n      height: `${this.bounds.height}px`,\n    };\n\n    return html`\n      <div\n        class=\"box ${this.isDragging ? \"dragging\" : \"\"}\"\n        style=${styleMap(boxStyles)}\n        @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, \"move\")}\n      >\n        ${this.renderHandles()}\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  private renderHandles() {\n    const handles: ResizeHandle[] = [\n      \"top-left\",\n      \"top-right\",\n      \"bottom-left\",\n      \"bottom-right\",\n      \"top\",\n      \"right\",\n      \"bottom\",\n      \"left\",\n    ];\n    return handles.map(\n      (handle) => html`\n        <div\n          class=\"handle ${handle}\"\n          @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, \"resize\", handle)}\n        ></div>\n      `,\n    );\n  }\n}\n"],"mappings":";;;;;;AAKA,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AAoCjC,SAAS,wBACP,eACA,QACA,QACA,WACoC;CACpC,MAAM,kBAAkB,CAAC,cAAc;CACvC,MAAM,mBACJ,UAAU,SAAS,cAAc,IAAI,cAAc;CACrD,MAAM,gBAAgB,CAAC,cAAc;CACrC,MAAM,kBACJ,UAAU,UAAU,cAAc,IAAI,cAAc;AAEtD,QAAO;EACL,QAAQ,KAAK,IAAI,iBAAiB,KAAK,IAAI,kBAAkB,OAAO,CAAC;EACrE,QAAQ,KAAK,IAAI,eAAe,KAAK,IAAI,iBAAiB,OAAO,CAAC;EACnE;;AAGH,SAAS,sBACP,SACA,QACW;CACX,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,EAAE,QAAQ,WAAW;AAE3B,SAAQ,QAAR;EACE,KAAK,eACH,QAAO;GACL,GAAG;GACH,OAAO,cAAc,QAAQ;GAC7B,QAAQ,cAAc,SAAS;GAChC;EAEH,KAAK,YAAY;GACf,MAAM,YAAY,cAAc,IAAI,cAAc;GAClD,MAAM,aAAa,cAAc,IAAI,cAAc;GACnD,MAAM,OAAO,cAAc,IAAI;GAC/B,MAAM,OAAO,cAAc,IAAI;AAE/B,UAAO;IACL,GAAG;IACH,GAAG;IACH,OAAO,YAAY;IACnB,QAAQ,aAAa;IACtB;;EAGH,KAAK,aAAa;GAChB,MAAM,aAAa,cAAc,IAAI,cAAc;GACnD,MAAM,OAAO,cAAc,IAAI;AAE/B,UAAO;IACL,GAAG;IACH,GAAG;IACH,OAAO,cAAc,QAAQ;IAC7B,QAAQ,aAAa;IACtB;;EAGH,KAAK,eAAe;GAClB,MAAM,YAAY,cAAc,IAAI,cAAc;GAClD,MAAM,OAAO,cAAc,IAAI;AAE/B,UAAO;IACL,GAAG;IACH,GAAG;IACH,OAAO,YAAY;IACnB,QAAQ,cAAc,SAAS;IAChC;;EAGH,KAAK,OAAO;GACV,MAAM,aAAa,cAAc,IAAI,cAAc;GACnD,MAAM,OAAO,cAAc,IAAI;AAE/B,UAAO;IACL,GAAG;IACH,GAAG;IACH,QAAQ,aAAa;IACtB;;EAGH,KAAK,QACH,QAAO;GACL,GAAG;GACH,OAAO,cAAc,QAAQ;GAC9B;EAEH,KAAK,SACH,QAAO;GACL,GAAG;GACH,QAAQ,cAAc,SAAS;GAChC;EAEH,KAAK,QAAQ;GACX,MAAM,YAAY,cAAc,IAAI,cAAc;GAClD,MAAM,OAAO,cAAc,IAAI;AAE/B,UAAO;IACL,GAAG;IACH,GAAG;IACH,OAAO,YAAY;IACpB;;EAGH,QACE,QAAO;;;AAIb,SAAS,2BACP,SACA,QACW;CACX,MAAM,EAAE,eAAe,UAAU,gBAAgB;CACjD,MAAM,EAAE,QAAQ,WAAW;AAC3B,KAAI,CAAC,YAAY,YACf,QAAO;CAET,MAAM,cAAc,YAAY;CAEhC,MAAM,gBAAgB;CACtB,MAAM,iBAAiB,SAAS;CAEhC,IAAIA;AACJ,SAAQ,QAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,gBAAgB,kBAAkB;AACnD;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,gBAAgB,kBAAkB;AACnD;EACF,QACE,iBAAgB;;CAGpB,MAAM,YACJ,WAAW,cAAc,WAAW,gBAChC,cAAc,QAAQ,gBACtB,cAAc,QAAQ;CAE5B,MAAM,QAAQ,KAAK,IAAI,YAAY,SAAS,UAAU;CACtD,MAAM,SAAS,QAAQ;CAEvB,MAAMC,YAAuB;EAAE,GAAG;EAAe;EAAO;EAAQ;AAGhE,SAAQ,QAAR;EACE,KAAK;AACH,aAAU,IAAI,cAAc,IAAI,cAAc,QAAQ;AACtD,aAAU,IAAI,cAAc,IAAI,cAAc,SAAS;AACvD;EACF,KAAK;AACH,aAAU,IAAI,cAAc,IAAI,cAAc,SAAS;AACvD;EACF,KAAK;AACH,aAAU,IAAI,cAAc,IAAI,cAAc,QAAQ;AACtD;;AAGJ,QAAO;;AAGT,SAAS,sBACP,SACA,QACW;CACX,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,EAAE,QAAQ,WAAW;CAE3B,MAAM,UAAU,cAAc,IAAI,cAAc,QAAQ;CACxD,MAAM,UAAU,cAAc,IAAI,cAAc,SAAS;CAEzD,IAAI,cAAc;CAClB,IAAI,eAAe;AAEnB,SAAQ,QAAR;EACE,KAAK;AACH,iBAAc,SAAS;AACvB,kBAAe,SAAS;AACxB;EACF,KAAK;AACH,iBAAc,CAAC,SAAS;AACxB,kBAAe,CAAC,SAAS;AACzB;EACF,KAAK;AACH,iBAAc,SAAS;AACvB,kBAAe,CAAC,SAAS;AACzB;EACF,KAAK;AACH,iBAAc,CAAC,SAAS;AACxB,kBAAe,SAAS;AACxB;EACF,KAAK;EACL,KAAK;AACH,mBACG,WAAW,WAAW,SAAS,CAAC,UAAU;AAC7C;EACF,KAAK;EACL,KAAK;AACH,kBACG,WAAW,UAAU,SAAS,CAAC,UAAU;AAC5C;;CAGJ,MAAM,WAAW,cAAc,QAAQ;CACvC,MAAM,YAAY,cAAc,SAAS;AAEzC,QAAO;EACL,GAAG,UAAU,WAAW;EACxB,GAAG,UAAU,YAAY;EACzB,OAAO;EACP,QAAQ;EACT;;AAGH,SAAS,qCACP,SACA,QACW;CACX,MAAM,EAAE,eAAe,UAAU,gBAAgB;CACjD,MAAM,EAAE,QAAQ,WAAW;AAC3B,KAAI,CAAC,YAAY,YACf,QAAO;CAET,MAAM,cAAc,YAAY;CAEhC,MAAM,UAAU,cAAc,IAAI,cAAc,QAAQ;CACxD,MAAM,UAAU,cAAc,IAAI,cAAc,SAAS;CAEzD,IAAID;AACJ,SAAQ,QAAR;EACE,KAAK;AACH,mBAAgB,KAAK,IAAI,QAAQ,OAAO;AACxC;EACF,KAAK;AACH,mBAAgB,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,OAAO;AAC3C;EACF,KAAK;AACH,mBAAgB,KAAK,IAAI,QAAQ,CAAC,OAAO;AACzC;EACF,KAAK;AACH,mBAAgB,KAAK,IAAI,CAAC,QAAQ,OAAO;AACzC;EACF,KAAK;EACL,KAAK;AACH,mBAAgB,WAAW,WAAW,SAAS,CAAC;AAChD;EACF,KAAK;EACL,KAAK;AACH,mBAAgB,WAAW,UAAU,SAAS,CAAC;AAC/C;EACF,QACE,iBAAgB,KAAK,IAAI,QAAQ,OAAO;;CAG5C,MAAM,WAAW,KAAK,IACpB,YAAY,SACZ,cAAc,QAAQ,gBAAgB,yBACvC;CACD,MAAM,YAAY,WAAW;AAE7B,QAAO;EACL,GAAG,UAAU,WAAW;EACxB,GAAG,UAAU,YAAY;EACzB,OAAO;EACP,QAAQ;EACT;;AAII,2BAAME,yBAAuB,WAAW;;;gBAEzB;GAAE,GAAG;GAAG,GAAG;GAAG,OAAO;GAAK,QAAQ;GAAK;wBAGlC;yBAGC;iBAGhB;oBAGW;kBAGwB;qBAOlC;mBAES;GAAE,OAAO;GAAO,KAAK;GAAO;4BAqEnB,MAAoB;AAC/C,OACE,CAAC,KAAK,cACN,CAAC,KAAK,eACN,EAAE,cAAc,KAAK,YAAY,UAEjC;GAEF,MAAM,SAAS,EAAE,UAAU,KAAK,YAAY,WAAW;GACvD,MAAM,SAAS,EAAE,UAAU,KAAK,YAAY,WAAW;AAEvD,QAAK,YAAY;IAAE,OAAO,EAAE;IAAU,KAAK,EAAE;IAAQ;AAErD,OAAI,KAAK,aAAa,QAAQ;IAC5B,MAAM,sBAAsB,wBAC1B,KAAK,YAAY,eACjB,QACA,QACA;KAAE,OAAO,KAAK;KAAgB,QAAQ,KAAK;KAAiB,CAC7D;AACD,SAAK,SAAS;KACZ,GAAG,KAAK,YAAY;KACpB,GAAG,KAAK,YAAY,cAAc,IAAI,oBAAoB;KAC1D,GAAG,KAAK,YAAY,cAAc,IAAI,oBAAoB;KAC3D;cACQ,KAAK,aAAa,YAAY,KAAK,YAAY,OAAO,QAAQ;IACvE,MAAMC,UAAyB;KAC7B,eAAe,KAAK,YAAY;KAChC,WAAW;MAAE,OAAO,KAAK;MAAgB,QAAQ,KAAK;MAAiB;KACvE,aAAa;MACX,SAAS,KAAK;MACd,aAAa,KAAK,UAAU,QACxB,KAAK,YAAY,cAAc,QAC/B,KAAK,YAAY,cAAc,SAC/B;MACL;KACD,UAAU;MAAE;MAAQ;MAAQ;KAC5B,WAAW;MACT,cAAc,KAAK,UAAU;MAC7B,qBAAqB,KAAK,UAAU;MACrC;KACF;AACD,SAAK,SAAS,KAAK,wCACjB,SACA,KAAK,YAAY,OAAO,OACzB;;AAGH,QAAK,sBAAsB;;+BAGG;AAC9B,QAAK,aAAa;AAClB,QAAK,WAAW;AAChB,QAAK,cAAc;AACnB,YAAS,oBAAoB,eAAe,KAAK,kBAAkB;AACnE,YAAS,oBAAoB,aAAa,KAAK,gBAAgB;;;;gBA3HjD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnB,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI,KAAK,cAAc;AACrB,QAAK,iBAAiB,KAAK,aAAa;AACxC,QAAK,kBAAkB,KAAK,aAAa;;AAE3C,OAAK,iBAAiB,IAAI,qBAAqB;AAC7C,OAAI,KAAK,cAAc;AACrB,SAAK,iBAAiB,KAAK,aAAa;AACxC,SAAK,kBAAkB,KAAK,aAAa;;IAE3C;AACF,MAAI,KAAK,aACP,MAAK,eAAe,QAAQ,KAAK,aAAa;;CAIlD,AAAQ,kBACN,GACA,MACA,QACA;AACA,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,OAAK,aAAa;AAClB,OAAK,WAAW;AAEhB,OAAK,cAAc;GACjB,YAAY;IAAE,GAAG,EAAE;IAAS,GAAG,EAAE;IAAS;GAC1C,QAAQ;IAAE;IAAM;IAAQ;GACxB,eAAe,EAAE,GAAG,KAAK,QAAQ;GACjC,WAAW,EAAE;GACd;AACD,OAAK,YAAY;GAAE,OAAO,EAAE;GAAU,KAAK,EAAE;GAAQ;AAErD,WAAS,iBAAiB,eAAe,KAAK,kBAAkB;AAChE,WAAS,iBAAiB,aAAa,KAAK,gBAAgB;;CA8D9D,AAAQ,wCACN,SACA,QACW;EACX,MAAM,EAAE,WAAW,aAAa,WAAW,kBAAkB;AAG7D,MAAI,CAAC,UAAU,gBAAgB,CAAC,UAAU,qBAAqB;GAC7D,MAAM,sBAAsB,KAAK,sBAC/B,eACA,QAAQ,SAAS,QACjB,QAAQ,SAAS,QACjB,QACA,WACA,YAAY,QACb;AAED,UAAO,sBACL;IACE,GAAG;IACH,UAAU;IACX,EACD,OACD;;EAIH,IAAIC;AAEJ,MAAI,UAAU,gBAAgB,UAAU,oBACtC,eAAc,qCAAqC,SAAS,OAAO;WAC1D,UAAU,aACnB,eAAc,sBAAsB,SAAS,OAAO;MAEpD,eAAc,2BAA2B,SAAS,OAAO;AAI3D,SAAO,KAAK,uBAAuB,aAAa,SAAS,OAAO;;CAGlE,AAAQ,uBACN,aACA,SACA,QACW;EACX,MAAM,EAAE,WAAW,aAAa,cAAc;AAG9C,MAAI,KAAK,cAAc,aAAa,WAAW,YAAY,QAAQ,CACjE,QAAO;AAIT,MACE,UAAU,gBACV,UAAU,uBACV,YAAY,YAEZ,QAAO,KAAK,qCAAqC,aAAa,QAAQ;AAIxE,MAAI,UAAU,uBAAuB,YAAY,YAC/C,QAAO,KAAK,yBAAyB,aAAa,SAAS,OAAO;AAIpE,MAAI,UAAU,aACZ,QAAO,KAAK,sBAAsB,aAAa,QAAQ;AAIzD,SAAO,KAAK,sBACV,aACA,WACA,YAAY,QACb;;CAGH,AAAQ,cACN,QACA,WACA,SACS;AACT,SACE,OAAO,KAAK,KACZ,OAAO,KAAK,KACZ,OAAO,SAAS,WAChB,OAAO,UAAU,WACjB,OAAO,IAAI,OAAO,SAAS,UAAU,SACrC,OAAO,IAAI,OAAO,UAAU,UAAU;;CAI1C,AAAQ,yBACN,aACA,SACA,QACW;EACX,MAAM,EAAE,WAAW,aAAa,kBAAkB;AAClD,MAAI,CAAC,YAAY,YACf,QAAO;EAET,MAAM,cAAc,YAAY;EAGhC,MAAM,WAAW,UAAU,QAAQ,KAAK,IAAI,GAAG,YAAY,EAAE;EAC7D,MAAM,YAAY,UAAU,SAAS,KAAK,IAAI,GAAG,YAAY,EAAE;EAG/D,IAAI,mBAAmB,KAAK,IAC1B,YAAY,SACZ,KAAK,IAAI,UAAU,YAAY,MAAM,CACtC;EACD,IAAI,oBAAoB,mBAAmB;AAG3C,MAAI,oBAAoB,WAAW;AACjC,uBAAoB,KAAK,IAAI,YAAY,SAAS,UAAU;AAC5D,sBAAmB,oBAAoB;;AAIzC,MAAI,mBAAmB,YAAY,SAAS;AAC1C,sBAAmB,YAAY;AAC/B,uBAAoB,mBAAmB;;EAGzC,MAAMC,SAAoB;GACxB,GAAG;GACH,OAAO;GACP,QAAQ;GACT;AAGD,UAAQ,QAAR;GACE,KAAK;AACH,WAAO,IAAI,cAAc,IAAI,cAAc,QAAQ;AACnD,WAAO,IAAI,cAAc,IAAI,cAAc,SAAS;AACpD;GACF,KAAK;AACH,WAAO,IAAI,cAAc,IAAI,cAAc,SAAS;AACpD;GACF,KAAK;AACH,WAAO,IAAI,cAAc,IAAI,cAAc,QAAQ;AACnD;;AAIJ,SAAO,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,QAAQ,OAAO,OAAO,OAAO,EAAE,CAAC;AAC1E,SAAO,IAAI,KAAK,IACd,GACA,KAAK,IAAI,UAAU,SAAS,OAAO,QAAQ,OAAO,EAAE,CACrD;AAED,SAAO;;CAGT,AAAQ,sBACN,aACA,SACW;EACX,MAAM,EAAE,WAAW,aAAa,kBAAkB;EAElD,MAAM,UAAU,cAAc,IAAI,cAAc,QAAQ;EACxD,MAAM,UAAU,cAAc,IAAI,cAAc,SAAS;EAGzD,MAAM,qBAAqB,KAAK,IAC9B,UAAU,IACT,UAAU,QAAQ,WAAW,EAC/B;EACD,MAAM,sBAAsB,KAAK,IAC/B,UAAU,IACT,UAAU,SAAS,WAAW,EAChC;EAED,MAAM,mBAAmB,KAAK,IAC5B,YAAY,SACZ,KAAK,IAAI,oBAAoB,YAAY,MAAM,CAChD;EACD,MAAM,oBAAoB,KAAK,IAC7B,YAAY,SACZ,KAAK,IAAI,qBAAqB,YAAY,OAAO,CAClD;AAED,SAAO;GACL,GAAG,UAAU,mBAAmB;GAChC,GAAG,UAAU,oBAAoB;GACjC,OAAO;GACP,QAAQ;GACT;;CAGH,AAAQ,qCACN,aACA,SACW;EACX,MAAM,EAAE,WAAW,aAAa,kBAAkB;AAClD,MAAI,CAAC,YAAY,YACf,QAAO;EAET,MAAM,cAAc,YAAY;EAEhC,MAAM,UAAU,cAAc,IAAI,cAAc,QAAQ;EACxD,MAAM,UAAU,cAAc,IAAI,cAAc,SAAS;EAGzD,MAAM,qBAAqB,KAAK,IAC9B,UAAU,IACT,UAAU,QAAQ,WAAW,EAC/B;EACD,MAAM,sBAAsB,KAAK,IAC/B,UAAU,IACT,UAAU,SAAS,WAAW,EAChC;EAGD,IAAI,mBAAmB,KAAK,IAC1B,YAAY,SACZ,KAAK,IAAI,oBAAoB,YAAY,MAAM,CAChD;EACD,IAAI,oBAAoB,mBAAmB;AAG3C,MAAI,oBAAoB,qBAAqB;AAC3C,uBAAoB,KAAK,IAAI,YAAY,SAAS,oBAAoB;AACtE,sBAAmB,oBAAoB;;AAIzC,MAAI,mBAAmB,YAAY,SAAS;AAC1C,sBAAmB,YAAY;AAC/B,uBAAoB,mBAAmB;;AAGzC,MAAI,oBAAoB,YAAY,SAAS;AAC3C,uBAAoB,YAAY;AAChC,sBAAmB,oBAAoB;;AAGzC,SAAO;GACL,GAAG,UAAU,mBAAmB;GAChC,GAAG,UAAU,oBAAoB;GACjC,OAAO;GACP,QAAQ;GACT;;CAGH,AAAQ,sBACN,QACA,WACA,SACW;AACX,SAAO;GACL,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,QAAQ,OAAO,OAAO,OAAO,EAAE,CAAC;GAClE,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,SAAS,OAAO,QAAQ,OAAO,EAAE,CAAC;GACpE,OAAO,KAAK,IACV,SACA,KAAK,IAAI,UAAU,QAAQ,OAAO,GAAG,OAAO,MAAM,CACnD;GACD,QAAQ,KAAK,IACX,SACA,KAAK,IAAI,UAAU,SAAS,OAAO,GAAG,OAAO,OAAO,CACrD;GACF;;CAGH,AAAQ,sBACN,eACA,QACA,QACA,QACA,WACA,SACoC;EACpC,IAAI,oBAAoB;EACxB,IAAI,oBAAoB;AAExB,UAAQ,QAAR;GACE,KAAK;AAEH,wBAAoB,KAAK,IACvB,UAAU,cAAc,OACxB,KAAK,IACH,UAAU,QAAQ,cAAc,IAAI,cAAc,OAClD,OACD,CACF;AACD,wBAAoB,KAAK,IACvB,UAAU,cAAc,QACxB,KAAK,IACH,UAAU,SAAS,cAAc,IAAI,cAAc,QACnD,OACD,CACF;AACD;GAEF,KAAK;AAEH,wBAAoB,KAAK,IACvB,CAAC,cAAc,GACf,KAAK,IAAI,cAAc,QAAQ,SAAS,OAAO,CAChD;AACD,wBAAoB,KAAK,IACvB,CAAC,cAAc,GACf,KAAK,IAAI,cAAc,SAAS,SAAS,OAAO,CACjD;AACD;GAEF,KAAK;AACH,wBAAoB,KAAK,IACvB,UAAU,cAAc,OACxB,KAAK,IACH,UAAU,QAAQ,cAAc,IAAI,cAAc,OAClD,OACD,CACF;AACD,wBAAoB,KAAK,IACvB,CAAC,cAAc,GACf,KAAK,IAAI,cAAc,SAAS,SAAS,OAAO,CACjD;AACD;GAEF,KAAK;AACH,wBAAoB,KAAK,IACvB,CAAC,cAAc,GACf,KAAK,IAAI,cAAc,QAAQ,SAAS,OAAO,CAChD;AACD,wBAAoB,KAAK,IACvB,UAAU,cAAc,QACxB,KAAK,IACH,UAAU,SAAS,cAAc,IAAI,cAAc,QACnD,OACD,CACF;AACD;GAEF,KAAK;AACH,wBAAoB,KAAK,IACvB,UAAU,cAAc,OACxB,KAAK,IACH,UAAU,QAAQ,cAAc,IAAI,cAAc,OAClD,OACD,CACF;AACD;GAEF,KAAK;AACH,wBAAoB,KAAK,IACvB,CAAC,cAAc,GACf,KAAK,IAAI,cAAc,QAAQ,SAAS,OAAO,CAChD;AACD;GAEF,KAAK;AACH,wBAAoB,KAAK,IACvB,UAAU,cAAc,QACxB,KAAK,IACH,UAAU,SAAS,cAAc,IAAI,cAAc,QACnD,OACD,CACF;AACD;GAEF,KAAK;AACH,wBAAoB,KAAK,IACvB,CAAC,cAAc,GACf,KAAK,IAAI,cAAc,SAAS,SAAS,OAAO,CACjD;AACD;;AAGJ,SAAO;GAAE,QAAQ;GAAmB,QAAQ;GAAmB;;CAGjE,AAAQ,uBAAuB;AAC7B,OAAK,cACH,IAAI,YAAY,iBAAiB;GAC/B,QAAQ,EAAE,QAAQ,KAAK,QAAQ;GAC/B,SAAS;GACT,UAAU;GACX,CAAC,CACH;;CAGH,SAAS;EACP,MAAM,YAAY;GAChB,MAAM,GAAG,KAAK,OAAO,EAAE;GACvB,KAAK,GAAG,KAAK,OAAO,EAAE;GACtB,OAAO,GAAG,KAAK,OAAO,MAAM;GAC5B,QAAQ,GAAG,KAAK,OAAO,OAAO;GAC/B;AAED,SAAO,IAAI;;qBAEM,KAAK,aAAa,aAAa,GAAG;gBACvC,SAAS,UAAU,CAAC;wBACZ,MAAoB,KAAK,kBAAkB,GAAG,OAAO,CAAC;;UAEpE,KAAK,eAAe,CAAC;;;;;CAM7B,AAAQ,gBAAgB;AAWtB,SAVgC;GAC9B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACc,KACZ,WAAW,IAAI;;0BAEI,OAAO;0BACP,MAAoB,KAAK,kBAAkB,GAAG,UAAU,OAAO,CAAC;;QAGrF;;;YAlkBF,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,OAAO;YAGP,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,OAAO;YAGP,OAAO;6BAjBT,cAAc,mBAAmB"}

package/dist/gui/EFScrubber.d.ts

@@ -1,30 +1,36 @@
-import { LitElement } from 'lit';
-import { ControllableInterface } from './Controllable.js';
+import { ControllableInterface } from "./Controllable.js";
+import * as lit18 from "lit";
+import { LitElement } from "lit";
+import * as lit_html16 from "lit-html";
+
+//#region src/gui/EFScrubber.d.ts
 declare const EFScrubber_base: (new (...args: any[]) => {
-    target: string;
-    targetElement: ControllableInterface | null;
-    effectiveContext: ControllableInterface | null;
+  target: string;
+  targetElement: ControllableInterface | null;
+  effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
-export declare class EFScrubber extends EFScrubber_base {
-    static styles: import('lit').CSSResult[];
-    playing: boolean;
-    currentTimeMs: number;
-    durationMs: number;
-    get context(): ControllableInterface | null;
-    private scrubProgress;
-    private isMoving;
-    private scrubberRef?;
-    private updateProgress;
-    private boundHandlePointerDown;
-    private boundHandlePointerMove;
-    private boundHandlePointerUp;
-    render(): import('lit-html').TemplateResult<1>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+declare class EFScrubber extends EFScrubber_base {
+  static styles: lit18.CSSResult[];
+  playing: boolean;
+  currentTimeMs: number;
+  durationMs: number;
+  get context(): ControllableInterface | null;
+  private scrubProgress;
+  private isMoving;
+  private scrubberRef?;
+  private updateProgress;
+  private boundHandlePointerDown;
+  private boundHandlePointerMove;
+  private boundHandlePointerUp;
+  render(): lit_html16.TemplateResult<1>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-scrubber": EFScrubber;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-scrubber": EFScrubber;
+  }
 }
-export {};
+//#endregion
+export { EFScrubber };
+//# sourceMappingURL=EFScrubber.d.ts.map

package/dist/gui/EFScrubber.js

@@ -8,7 +8,9 @@ import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
-var EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efContext) {
+
+//#region src/gui/EFScrubber.ts
+let EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.playing = false;
@@ -128,4 +130,7 @@ __decorate([consume({
 __decorate([state()], EFScrubber.prototype, "scrubProgress", void 0);
 __decorate([state()], EFScrubber.prototype, "isMoving", void 0);
 EFScrubber = __decorate([customElement("ef-scrubber")], EFScrubber);
+
+//#endregion
 export { EFScrubber };
+//# sourceMappingURL=EFScrubber.js.map

package/dist/gui/EFScrubber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFScrubber.js","names":["EFScrubber"],"sources":["../../src/gui/EFScrubber.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { playingContext } from \"./playingContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\n@customElement(\"ef-scrubber\")\nexport class EFScrubber extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = [\n    css`\n    :host {\n      --ef-scrubber-height: 4px;\n      --ef-scrubber-background: rgb(209 213 219);\n      --ef-scrubber-progress-color: rgb(37 99 235);\n      --ef-scrubber-handle-size: 12px;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    \n    .scrubber {\n      width: 100%;\n      height: var(--ef-scrubber-height);\n      background: var(--ef-scrubber-background);\n      position: relative;\n      cursor: pointer;\n      border-radius: 2px;\n    }\n\n    .progress {\n      position: absolute;\n      height: 100%;\n      background: var(--ef-scrubber-progress-color);\n      border-radius: 2px;\n    }\n\n    .handle {\n      position: absolute;\n      width: var(--ef-scrubber-handle-size);\n      height: var(--ef-scrubber-handle-size);\n      background: var(--ef-scrubber-progress-color);\n      border-radius: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      cursor: grab;\n    }\n\n    /* Add CSS Shadow Parts */\n    ::part(scrubber) { }\n    ::part(progress) { }\n    ::part(handle) { }\n    `,\n  ];\n\n  @consume({ context: playingContext, subscribe: true })\n  playing = false;\n\n  @consume({ context: currentTimeContext, subscribe: true })\n  currentTimeMs = Number.NaN;\n\n  @consume({ context: durationContext, subscribe: true })\n  durationMs = 0;\n\n  get context(): ControllableInterface | null {\n    return this.effectiveContext;\n  }\n\n  @state()\n  private scrubProgress = 0;\n\n  @state()\n  private isMoving = false;\n\n  private scrubberRef?: HTMLElement;\n\n  private updateProgress(e: MouseEvent) {\n    if (!this.context || !this.scrubberRef) return;\n\n    const rect = this.scrubberRef.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const progress = Math.max(0, Math.min(1, x / rect.width));\n\n    this.scrubProgress = progress;\n    this.context.currentTimeMs = progress * this.durationMs;\n  }\n\n  private boundHandlePointerDown = (e: MouseEvent) => {\n    this.isMoving = true;\n    e.preventDefault();\n    this.updateProgress(e);\n  };\n\n  private boundHandlePointerMove = (e: MouseEvent) => {\n    if (this.isMoving) {\n      this.updateProgress(e);\n    }\n  };\n\n  private boundHandlePointerUp = () => {\n    this.isMoving = false;\n  };\n\n  render() {\n    // Calculate progress from currentTimeMs and duration\n    const currentProgress =\n      this.durationMs > 0 ? (this.currentTimeMs ?? 0) / this.durationMs : 0;\n\n    const displayProgress = this.isMoving\n      ? this.scrubProgress\n      : currentProgress;\n\n    return html`\n      <div \n        ${ref((el) => {\n          this.scrubberRef = el as HTMLElement;\n        })}\n        part=\"scrubber\"\n        class=\"scrubber\"\n        @mousedown=${this.boundHandlePointerDown}\n      >\n        <div class=\"progress\" style=\"width: ${displayProgress * 100}%\"></div>\n        <div class=\"handle\" style=\"left: ${displayProgress * 100}%\"></div>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\"pointerup\", this.boundHandlePointerUp);\n    window.addEventListener(\"pointermove\", this.boundHandlePointerMove);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"pointerup\", this.boundHandlePointerUp);\n    window.removeEventListener(\"pointermove\", this.boundHandlePointerMove);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-scrubber\": EFScrubber;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAaO,uBAAMA,qBAAmB,qBAAqB,YAAY,UAAU,CAAC;;;iBAiDhE;uBAGM;oBAGH;uBAOW;kBAGL;iCAee,MAAkB;AAClD,QAAK,WAAW;AAChB,KAAE,gBAAgB;AAClB,QAAK,eAAe,EAAE;;iCAGU,MAAkB;AAClD,OAAI,KAAK,SACP,MAAK,eAAe,EAAE;;oCAIW;AACnC,QAAK,WAAW;;;;gBA5FF,CACd,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4CJ;;CAWD,IAAI,UAAwC;AAC1C,SAAO,KAAK;;CAWd,AAAQ,eAAe,GAAe;AACpC,MAAI,CAAC,KAAK,WAAW,CAAC,KAAK,YAAa;EAExC,MAAM,OAAO,KAAK,YAAY,uBAAuB;EACrD,MAAM,IAAI,EAAE,UAAU,KAAK;EAC3B,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,KAAK,MAAM,CAAC;AAEzD,OAAK,gBAAgB;AACrB,OAAK,QAAQ,gBAAgB,WAAW,KAAK;;CAmB/C,SAAS;EAEP,MAAM,kBACJ,KAAK,aAAa,KAAK,KAAK,iBAAiB,KAAK,KAAK,aAAa;EAEtE,MAAM,kBAAkB,KAAK,WACzB,KAAK,gBACL;AAEJ,SAAO,IAAI;;UAEL,KAAK,OAAO;AACZ,QAAK,cAAc;IACnB,CAAC;;;qBAGU,KAAK,uBAAuB;;8CAEH,kBAAkB,IAAI;2CACzB,kBAAkB,IAAI;;;;CAK/D,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,SAAO,iBAAiB,aAAa,KAAK,qBAAqB;AAC/D,SAAO,iBAAiB,eAAe,KAAK,uBAAuB;;CAGrE,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,SAAO,oBAAoB,aAAa,KAAK,qBAAqB;AAClE,SAAO,oBAAoB,eAAe,KAAK,uBAAuB;;;YAjFvE,QAAQ;CAAE,SAAS;CAAgB,WAAW;CAAM,CAAC;YAGrD,QAAQ;CAAE,SAAS;CAAoB,WAAW;CAAM,CAAC;YAGzD,QAAQ;CAAE,SAAS;CAAiB,WAAW;CAAM,CAAC;YAOtD,OAAO;YAGP,OAAO;yBAjET,cAAc,cAAc"}

package/dist/gui/EFTimeDisplay.d.ts

@@ -1,19 +1,26 @@
-import { LitElement } from 'lit';
+import { ControllableInterface } from "./Controllable.js";
+import * as lit19 from "lit";
+import { LitElement } from "lit";
+import * as lit_html17 from "lit-html";
+
+//#region src/gui/EFTimeDisplay.d.ts
 declare const EFTimeDisplay_base: (new (...args: any[]) => {
-    target: string;
-    targetElement: import('./Controllable.js').ControllableInterface | null;
-    effectiveContext: import('./Controllable.js').ControllableInterface | null;
+  target: string;
+  targetElement: ControllableInterface | null;
+  effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
-export declare class EFTimeDisplay extends EFTimeDisplay_base {
-    static styles: import('lit').CSSResult;
-    currentTimeMs: number;
-    durationMs: number;
-    private formatTime;
-    render(): import('lit-html').TemplateResult<1>;
+declare class EFTimeDisplay extends EFTimeDisplay_base {
+  static styles: lit19.CSSResult;
+  currentTimeMs: number;
+  durationMs: number;
+  private formatTime;
+  render(): lit_html17.TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-time-display": EFTimeDisplay;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-time-display": EFTimeDisplay;
+  }
 }
-export {};
+//#endregion
+export { EFTimeDisplay };
+//# sourceMappingURL=EFTimeDisplay.d.ts.map

package/dist/gui/EFTimeDisplay.js

@@ -6,7 +6,9 @@ import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-var EFTimeDisplay = class EFTimeDisplay$1 extends TargetOrContextMixin(LitElement, efContext) {
+
+//#region src/gui/EFTimeDisplay.ts
+let EFTimeDisplay = class EFTimeDisplay$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.currentTimeMs = NaN;
@@ -47,4 +49,7 @@ __decorate([consume({
 	subscribe: true
 })], EFTimeDisplay.prototype, "durationMs", void 0);
 EFTimeDisplay = __decorate([customElement("ef-time-display")], EFTimeDisplay);
+
+//#endregion
 export { EFTimeDisplay };
+//# sourceMappingURL=EFTimeDisplay.js.map

package/dist/gui/EFTimeDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFTimeDisplay.js","names":["EFTimeDisplay"],"sources":["../../src/gui/EFTimeDisplay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\n@customElement(\"ef-time-display\")\nexport class EFTimeDisplay extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--ef-font-family, system-ui);\n      font-size: var(--ef-font-size-xs, 0.75rem);\n      color: var(--ef-text-color, rgb(75 85 99));\n      white-space: nowrap;\n    }\n  `;\n\n  @consume({ context: currentTimeContext, subscribe: true })\n  currentTimeMs = Number.NaN;\n\n  @consume({ context: durationContext, subscribe: true })\n  durationMs = 0;\n\n  private formatTime(ms: number): string {\n    // Handle NaN, undefined, null, or negative values\n    if (!Number.isFinite(ms) || ms < 0) {\n      return \"0:00\";\n    }\n\n    const totalSeconds = Math.floor(ms / 1000);\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n  }\n\n  render() {\n    const currentTime = this.currentTimeMs;\n    const totalTime = this.durationMs;\n\n    return html`\n      <span part=\"time\">\n        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-time-display\": EFTimeDisplay;\n  }\n}\n"],"mappings":";;;;;;;;;;AASO,0BAAMA,wBAAsB,qBAAqB,YAAY,UAAU,CAAC;;;uBAY7D;oBAGH;;;gBAdG,GAAG;;;;;;;;;;CAgBnB,AAAQ,WAAW,IAAoB;AAErC,MAAI,CAAC,OAAO,SAAS,GAAG,IAAI,KAAK,EAC/B,QAAO;EAGT,MAAM,eAAe,KAAK,MAAM,KAAK,IAAK;AAG1C,SAAO,GAFS,KAAK,MAAM,eAAe,GAAG,CAE3B,IADF,eAAe,IACF,UAAU,CAAC,SAAS,GAAG,IAAI;;CAG1D,SAAS;EACP,MAAM,cAAc,KAAK;EACzB,MAAM,YAAY,KAAK;AAEvB,SAAO,IAAI;;UAEL,KAAK,WAAW,YAAY,CAAC,KAAK,KAAK,WAAW,UAAU,CAAC;;;;;YAxBpE,QAAQ;CAAE,SAAS;CAAoB,WAAW;CAAM,CAAC;YAGzD,QAAQ;CAAE,SAAS;CAAiB,WAAW;CAAM,CAAC;4BAfxD,cAAc,kBAAkB"}

package/dist/gui/EFToggleLoop.d.ts

@@ -1,18 +1,24 @@
-import { LitElement } from 'lit';
-import { ControllableInterface } from './Controllable.js';
+import { ControllableInterface } from "./Controllable.js";
+import * as lit17 from "lit";
+import { LitElement } from "lit";
+import * as lit_html15 from "lit-html";
+
+//#region src/gui/EFToggleLoop.d.ts
 declare const EFToggleLoop_base: (new (...args: any[]) => {
-    target: string;
-    targetElement: ControllableInterface | null;
-    effectiveContext: ControllableInterface | null;
+  target: string;
+  targetElement: ControllableInterface | null;
+  effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
-export declare class EFToggleLoop extends EFToggleLoop_base {
-    static styles: import('lit').CSSResult[];
-    get context(): ControllableInterface | null;
-    render(): import('lit-html').TemplateResult<1>;
+declare class EFToggleLoop extends EFToggleLoop_base {
+  static styles: lit17.CSSResult[];
+  get context(): ControllableInterface | null;
+  render(): lit_html15.TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-toggle-loop": EFToggleLoop;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-toggle-loop": EFToggleLoop;
+  }
 }
-export {};
+//#endregion
+export { EFToggleLoop };
+//# sourceMappingURL=EFToggleLoop.d.ts.map

package/dist/gui/EFToggleLoop.js

@@ -3,7 +3,9 @@ import { efContext } from "./efContext.js";
 import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-var EFToggleLoop = class EFToggleLoop$1 extends TargetOrContextMixin(LitElement, efContext) {
+
+//#region src/gui/EFToggleLoop.ts
+let EFToggleLoop = class EFToggleLoop$1 extends TargetOrContextMixin(LitElement, efContext) {
 	static {
 		this.styles = [css`
       :host {}
@@ -21,4 +23,7 @@ var EFToggleLoop = class EFToggleLoop$1 extends TargetOrContextMixin(LitElement,
 	}
 };
 EFToggleLoop = __decorate([customElement("ef-toggle-loop")], EFToggleLoop);
+
+//#endregion
 export { EFToggleLoop };
+//# sourceMappingURL=EFToggleLoop.js.map

package/dist/gui/EFToggleLoop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFToggleLoop.js","names":["EFToggleLoop"],"sources":["../../src/gui/EFToggleLoop.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\n\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { efContext } from \"./efContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\n@customElement(\"ef-toggle-loop\")\nexport class EFToggleLoop extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = [\n    css`\n      :host {}\n    `,\n  ];\n\n  get context(): ControllableInterface | null {\n    return this.effectiveContext;\n  }\n\n  render() {\n    return html`\n      <slot @click=${() => {\n        if (this.context) {\n          this.context.loop = !this.context.loop;\n        }\n      }}></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-toggle-loop\": EFToggleLoop;\n  }\n}\n"],"mappings":";;;;;;;AAQO,yBAAMA,uBAAqB,qBAAqB,YAAY,UAAU,CAAC;;gBAC5D,CACd,GAAG;;MAGJ;;CAED,IAAI,UAAwC;AAC1C,SAAO,KAAK;;CAGd,SAAS;AACP,SAAO,IAAI;2BACY;AACnB,OAAI,KAAK,QACP,MAAK,QAAQ,OAAO,CAAC,KAAK,QAAQ;IAEpC;;;;2BAlBP,cAAc,iBAAiB"}

package/dist/gui/EFTogglePlay.d.ts

@@ -1,22 +1,28 @@
-import { LitElement } from 'lit';
-import { ControllableInterface } from './Controllable.js';
+import { ControllableInterface } from "./Controllable.js";
+import * as lit14 from "lit";
+import { LitElement } from "lit";
+import * as lit_html12 from "lit-html";
+
+//#region src/gui/EFTogglePlay.d.ts
 declare const EFTogglePlay_base: (new (...args: any[]) => {
-    target: string;
-    targetElement: ControllableInterface | null;
-    effectiveContext: ControllableInterface | null;
+  target: string;
+  targetElement: ControllableInterface | null;
+  effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
-export declare class EFTogglePlay extends EFTogglePlay_base {
-    static styles: import('lit').CSSResult[];
-    playing: boolean;
-    get efContext(): ControllableInterface | null;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1>;
-    togglePlay: () => void;
+declare class EFTogglePlay extends EFTogglePlay_base {
+  static styles: lit14.CSSResult[];
+  playing: boolean;
+  get efContext(): ControllableInterface | null;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): lit_html12.TemplateResult<1>;
+  togglePlay: () => void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-toggle-play": EFTogglePlay;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-toggle-play": EFTogglePlay;
+  }
 }
-export {};
+//#endregion
+export { EFTogglePlay };
+//# sourceMappingURL=EFTogglePlay.d.ts.map

package/dist/gui/EFTogglePlay.js

@@ -6,8 +6,10 @@ import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+
+//#region src/gui/EFTogglePlay.ts
 attachContextRoot();
-var EFTogglePlay = class EFTogglePlay$1 extends TargetOrContextMixin(LitElement, efContext) {
+let EFTogglePlay = class EFTogglePlay$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.playing = false;
@@ -48,4 +50,7 @@ __decorate([consume({
 	subscribe: true
 }), state()], EFTogglePlay.prototype, "playing", void 0);
 EFTogglePlay = __decorate([customElement("ef-toggle-play")], EFTogglePlay);
+
+//#endregion
 export { EFTogglePlay };
+//# sourceMappingURL=EFTogglePlay.js.map

package/dist/gui/EFTogglePlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFTogglePlay.js","names":["EFTogglePlay"],"sources":["../../src/gui/EFTogglePlay.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { attachContextRoot } from \"../attachContextRoot.js\";\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { efContext } from \"./efContext.js\";\nimport { playingContext } from \"./playingContext.js\";\nimport { TargetOrContextMixin } from \"./TargetOrContextMixin.js\";\n\nattachContextRoot();\n\n@customElement(\"ef-toggle-play\")\nexport class EFTogglePlay extends TargetOrContextMixin(LitElement, efContext) {\n  static styles = [\n    css`\n      :host {}\n      div {\n        all: inherit;\n      }\n    `,\n  ];\n\n  @consume({ context: playingContext, subscribe: true })\n  @state()\n  playing = false;\n\n  get efContext(): ControllableInterface | null {\n    return this.effectiveContext;\n  }\n\n  // Attach click listener to host\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this.togglePlay);\n  }\n\n  // Detach click listener from host\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this.togglePlay);\n  }\n\n  render() {\n    return html`\n      <div>\n        ${\n          this.playing\n            ? html`<slot name=\"pause\"></slot>`\n            : html`<slot name=\"play\"></slot>`\n        }\n      </div>\n    `;\n  }\n\n  togglePlay = () => {\n    if (this.efContext) {\n      if (this.playing) {\n        this.efContext.pause();\n      } else {\n        this.efContext.play();\n      }\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-toggle-play\": EFTogglePlay;\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,mBAAmB;AAGZ,yBAAMA,uBAAqB,qBAAqB,YAAY,UAAU,CAAC;;;iBAYlE;0BA8BS;AACjB,OAAI,KAAK,UACP,KAAI,KAAK,QACP,MAAK,UAAU,OAAO;OAEtB,MAAK,UAAU,MAAM;;;;gBA9CX,CACd,GAAG;;;;;MAMJ;;CAMD,IAAI,YAA0C;AAC5C,SAAO,KAAK;;CAId,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,SAAS,KAAK,WAAW;;CAIjD,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,OAAK,oBAAoB,SAAS,KAAK,WAAW;;CAGpD,SAAS;AACP,SAAO,IAAI;;UAGL,KAAK,UACD,IAAI,+BACJ,IAAI,4BACT;;;;;YA3BN,QAAQ;CAAE,SAAS;CAAgB,WAAW;CAAM,CAAC,EACrD,OAAO;2BAZT,cAAc,iBAAiB"}

package/dist/gui/EFWorkbench.d.ts

@@ -1,19 +1,27 @@
-import { LitElement, PropertyValueMap } from 'lit';
-declare const EFWorkbench_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
-export declare class EFWorkbench extends EFWorkbench_base {
-    static styles: import('lit').CSSResult[];
-    rendering: boolean;
-    focusOverlay: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    handleStageWheel(event: WheelEvent): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    drawOverlays: () => void;
-    render(): import('lit-html').TemplateResult<1>;
+import { ContextMixinInterface } from "./ContextMixin.js";
+import * as lit10 from "lit";
+import { LitElement, PropertyValueMap } from "lit";
+import * as lit_html10 from "lit-html";
+import * as lit_html_directives_ref_js2 from "lit-html/directives/ref.js";
+
+//#region src/gui/EFWorkbench.d.ts
+declare const EFWorkbench_base: (new (...args: any[]) => ContextMixinInterface) & typeof LitElement;
+declare class EFWorkbench extends EFWorkbench_base {
+  static styles: lit10.CSSResult[];
+  rendering: boolean;
+  focusOverlay: lit_html_directives_ref_js2.Ref<HTMLDivElement>;
+  handleStageWheel(event: WheelEvent): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+  drawOverlays: () => void;
+  render(): lit_html10.TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-workbench": EFWorkbench;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-workbench": EFWorkbench;
+  }
 }
-export {};
+//#endregion
+export { EFWorkbench };
+//# sourceMappingURL=EFWorkbench.d.ts.map

package/dist/gui/EFWorkbench.js

@@ -4,7 +4,9 @@ import { TWMixin } from "./TWMixin2.js";
 import { LitElement, css, html } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-var EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
+
+//#region src/gui/EFWorkbench.ts
+let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.rendering = false;
@@ -88,4 +90,7 @@ __decorate([eventOptions({
 	capture: true
 })], EFWorkbench.prototype, "handleStageWheel", null);
 EFWorkbench = __decorate([customElement("ef-workbench")], EFWorkbench);
+
+//#endregion
 export { EFWorkbench };
+//# sourceMappingURL=EFWorkbench.js.map

package/dist/gui/EFWorkbench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFWorkbench.js","names":["EFWorkbench"],"sources":["../../src/gui/EFWorkbench.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, eventOptions, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { ContextMixin } from \"./ContextMixin.js\";\nimport { TWMixin } from \"./TWMixin.js\";\n\n@customElement(\"ef-workbench\")\nexport class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean })\n  rendering = false;\n\n  focusOverlay = createRef<HTMLDivElement>();\n\n  @eventOptions({ passive: false, capture: true })\n  handleStageWheel(event: WheelEvent) {\n    event.preventDefault();\n  }\n\n  connectedCallback(): void {\n    document.body.style.width = \"100%\";\n    document.body.style.height = \"100%\";\n    document.documentElement.style.width = \"100%\";\n    document.documentElement.style.height = \"100%\";\n    super.connectedCallback();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.body.style.width = \"\";\n    document.body.style.height = \"\";\n    document.documentElement.style.width = \"\";\n    document.documentElement.style.height = \"\";\n  }\n\n  update(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.update(changedProperties);\n\n    if (changedProperties.has(\"focusedElement\")) {\n      this.drawOverlays();\n    }\n  }\n\n  drawOverlays = () => {\n    const focusOverlay = this.focusOverlay.value;\n    if (focusOverlay) {\n      if (this.focusedElement) {\n        focusOverlay.style.display = \"block\";\n        const rect = this.focusedElement.getBoundingClientRect();\n        Object.assign(focusOverlay.style, {\n          position: \"fixed\",\n          top: `${rect.top}px`,\n          left: `${rect.left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n        });\n        requestAnimationFrame(this.drawOverlays);\n      } else {\n        focusOverlay.style.display = \"none\";\n      }\n    }\n  };\n\n  render() {\n    // TODO: this.rendering is not correctly set when using the framegen bridge\n    // so to hack we're checking for the existence of EF_RENDERING on the window\n    if (\n      this.rendering ||\n      (typeof window !== \"undefined\" && window.EF_RENDERING?.() === true)\n    ) {\n      return html`\n        <slot class=\"fixed inset-0 h-full w-full\" name=\"canvas\"></slot>\n      `;\n    }\n    return html`\n      <div\n        class=\"grid h-full w-full bg-slate-800\"\n        style=\"grid-template-rows: 1fr 300px; grid-template-columns: 100%;\"\n      >\n        <div\n          class=\"relative h-full w-full overflow-hidden\"\n          @wheel=${this.handleStageWheel}\n        >\n          <ef-fit-scale class=\"h-full grid place-content-center\">\n            <slot name=\"canvas\" class=\"contents\"></slot>\n          </ef-fit-scale>\n          <div\n            class=\"border border-blue-500 bg-blue-200 bg-opacity-20 absolute\"\n            ${ref(this.focusOverlay)}\n          ></div>\n        </div>\n\n        <slot class=\"overflow inline-block\" name=\"timeline\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-workbench\": EFWorkbench;\n  }\n}\n"],"mappings":";;;;;;;;AAQO,wBAAMA,sBAAoB,aAAa,QAAQ,WAAW,CAAC,CAAC;;;mBAYrD;sBAEG,WAA2B;4BAiCrB;GACnB,MAAM,eAAe,KAAK,aAAa;AACvC,OAAI,aACF,KAAI,KAAK,gBAAgB;AACvB,iBAAa,MAAM,UAAU;IAC7B,MAAM,OAAO,KAAK,eAAe,uBAAuB;AACxD,WAAO,OAAO,aAAa,OAAO;KAChC,UAAU;KACV,KAAK,GAAG,KAAK,IAAI;KACjB,MAAM,GAAG,KAAK,KAAK;KACnB,OAAO,GAAG,KAAK,MAAM;KACrB,QAAQ,GAAG,KAAK,OAAO;KACxB,CAAC;AACF,0BAAsB,KAAK,aAAa;SAExC,cAAa,MAAM,UAAU;;;;gBA7DnB,CACd,GAAG;;;;;;MAOJ;;CAOD,AACA,iBAAiB,OAAmB;AAClC,QAAM,gBAAgB;;CAGxB,oBAA0B;AACxB,WAAS,KAAK,MAAM,QAAQ;AAC5B,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,gBAAgB,MAAM,QAAQ;AACvC,WAAS,gBAAgB,MAAM,SAAS;AACxC,QAAM,mBAAmB;;CAG3B,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,WAAS,KAAK,MAAM,QAAQ;AAC5B,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,gBAAgB,MAAM,QAAQ;AACvC,WAAS,gBAAgB,MAAM,SAAS;;CAG1C,OACE,mBACM;AACN,QAAM,OAAO,kBAAkB;AAE/B,MAAI,kBAAkB,IAAI,iBAAiB,CACzC,MAAK,cAAc;;CAwBvB,SAAS;AAGP,MACE,KAAK,aACJ,OAAO,WAAW,eAAe,OAAO,gBAAgB,KAAK,KAE9D,QAAO,IAAI;;;AAIb,SAAO,IAAI;;;;;;;mBAOI,KAAK,iBAAiB;;;;;;;cAO3B,IAAI,KAAK,aAAa,CAAC;;;;;;;;;YAjFlC,SAAS,EAAE,MAAM,SAAS,CAAC;YAK3B,aAAa;CAAE,SAAS;CAAO,SAAS;CAAM,CAAC;0BAjBjD,cAAc,eAAe"}

package/dist/gui/PlaybackController.d.ts

@@ -1,30 +1,32 @@
-import { Task } from '@lit/task';
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Task } from "@lit/task";
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region src/gui/PlaybackController.d.ts
 interface PlaybackHost extends HTMLElement, ReactiveControllerHost {
-    currentTimeMs: number;
-    durationMs: number;
-    endTimeMs: number;
-    frameTask: {
-        run(): void;
-        taskComplete: Promise<unknown>;
-    };
-    renderAudio?(fromMs: number, toMs: number): Promise<AudioBuffer>;
-    waitForMediaDurations?(): Promise<void>;
-    saveTimeToLocalStorage?(time: number): void;
-    loadTimeFromLocalStorage?(): number | undefined;
-    requestUpdate(property?: string): void;
-    updateComplete: Promise<boolean>;
-    playing: boolean;
-    loop: boolean;
-    play(): void;
-    pause(): void;
-    playbackController?: PlaybackController;
-    parentTimegroup?: any;
-    rootTimegroup?: any;
+  currentTimeMs: number;
+  durationMs: number;
+  endTimeMs: number;
+  frameTask: {
+    run(): void;
+    taskComplete: Promise<unknown>;
+  };
+  renderAudio?(fromMs: number, toMs: number): Promise<AudioBuffer>;
+  waitForMediaDurations?(): Promise<void>;
+  saveTimeToLocalStorage?(time: number): void;
+  loadTimeFromLocalStorage?(): number | undefined;
+  requestUpdate(property?: string): void;
+  updateComplete: Promise<boolean>;
+  playing: boolean;
+  loop: boolean;
+  play(): void;
+  pause(): void;
+  playbackController?: PlaybackController;
+  parentTimegroup?: any;
+  rootTimegroup?: any;
 }
-export type PlaybackControllerUpdateEvent = {
-    property: "playing" | "loop" | "currentTimeMs";
-    value: boolean | number;
+type PlaybackControllerUpdateEvent = {
+  property: "playing" | "loop" | "currentTimeMs";
+  value: boolean | number;
 };
 /**
  * Manages playback state and audio-driven timing for root temporal elements
@@ -39,29 +41,31 @@ export type PlaybackControllerUpdateEvent = {
  *
  * Works with any temporal element (timegroups or standalone media) via PlaybackHost interface
  */
-export declare class PlaybackController implements ReactiveController {
-    #private;
-    seekTask: Task<readonly [number | undefined], number | undefined>;
-    constructor(host: PlaybackHost);
-    get currentTime(): number;
-    set currentTime(time: number);
-    get playing(): boolean;
-    setPlaying(value: boolean): void;
-    get loop(): boolean;
-    setLoop(value: boolean): void;
-    get currentTimeMs(): number;
-    setCurrentTimeMs(value: number): void;
-    play(): void;
-    pause(): void;
-    hostConnected(): void;
-    hostDisconnected(): void;
-    hostUpdated(): void;
-    runThrottledFrameTask(): Promise<void>;
-    addListener(listener: (event: PlaybackControllerUpdateEvent) => void): void;
-    removeListener(listener: (event: PlaybackControllerUpdateEvent) => void): void;
-    remove(): void;
-    private maybeLoopPlayback;
-    private stopPlayback;
-    private startPlayback;
+declare class PlaybackController implements ReactiveController {
+  #private;
+  seekTask: Task<readonly [number | undefined], number | undefined>;
+  constructor(host: PlaybackHost);
+  get currentTime(): number;
+  set currentTime(time: number);
+  get playing(): boolean;
+  setPlaying(value: boolean): void;
+  get loop(): boolean;
+  setLoop(value: boolean): void;
+  get currentTimeMs(): number;
+  setCurrentTimeMs(value: number): void;
+  play(): void;
+  pause(): void;
+  hostConnected(): void;
+  hostDisconnected(): void;
+  hostUpdated(): void;
+  runThrottledFrameTask(): Promise<void>;
+  addListener(listener: (event: PlaybackControllerUpdateEvent) => void): void;
+  removeListener(listener: (event: PlaybackControllerUpdateEvent) => void): void;
+  remove(): void;
+  private maybeLoopPlayback;
+  private stopPlayback;
+  private startPlayback;
 }
-export {};
+//#endregion
+export { PlaybackController };
+//# sourceMappingURL=PlaybackController.d.ts.map