web-mojo 2.2.57 → 2.2.59

package/dist/lightbox.es.js

@@ -1,3738 +1,2 @@
-import { V as View } from "./chunks/Rest-W-sPfGh9.js";
-import Dialog from "./chunks/Dialog-DOGDalUq.js";
-import { L, P } from "./chunks/PDFViewer-EJ9cOfPF.js";
-import { W } from "./chunks/WebApp-6qvqmOts.js";
-import { B, a, V, b, c, d } from "./chunks/version-OyPGnx30.js";
-class ImageViewer extends View {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-viewer ${options.className || ""}`,
-      tagName: "div"
-    });
-    this.imageUrl = options.imageUrl || options.src || "";
-    this.alt = options.alt || "Image";
-    this.title = options.title || "";
-    this.canvas = null;
-    this.context = null;
-    this.image = null;
-    this.scale = 1;
-    this.rotation = 0;
-    this.translateX = 0;
-    this.translateY = 0;
-    this.minScale = 0.1;
-    this.maxScale = 5;
-    this.scaleStep = 0.1;
-    this.isDragging = false;
-    this.lastPointerX = 0;
-    this.lastPointerY = 0;
-    this.isLoaded = false;
-    this.showControls = options.showControls !== false;
-    this.allowRotate = options.allowRotate !== false;
-    this.allowZoom = options.allowZoom !== false;
-    this.allowPan = options.allowPan !== false;
-    this.allowDownload = options.allowDownload !== false;
-    this.autoFit = options.autoFit !== false;
-    this.containerElement = null;
-    this.controlsElement = null;
-  }
-  async getTemplate() {
-    return `
-      <div class="image-viewer-container d-flex flex-column h-100" data-container="imageContainer">
-        <div class="image-viewer-content flex-grow-1 position-relative">
-          <canvas class="image-viewer-canvas w-100 h-100" data-container="canvas"></canvas>
-          <div class="image-viewer-overlay">
-            <div class="image-viewer-loading">
-              <div class="spinner-border text-light" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {{#showControls}}
-        <div class="image-viewer-controls position-absolute top-0 start-50 translate-middle-x mt-3" data-container="controls" style="z-index: 10;">
-          <div class="btn-group" role="group">
-            {{#allowZoom}}
-            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-in" title="Zoom In">
-              <i class="bi bi-zoom-in"></i>
-            </button>
-            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-out" title="Zoom Out">
-              <i class="bi bi-zoom-out"></i>
-            </button>
-            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-fit" title="Fit to Screen">
-              <i class="bi bi-arrows-fullscreen"></i>
-            </button>
-            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-actual" title="Actual Size">
-              <i class="bi bi-1-square"></i>
-            </button>
-            {{/allowZoom}}
-
-            {{#allowRotate}}
-            <button type="button" class="btn btn-dark btn-sm" data-action="rotate-left" title="Rotate Left">
-              <i class="bi bi-arrow-counterclockwise"></i>
-            </button>
-            <button type="button" class="btn btn-dark btn-sm" data-action="rotate-right" title="Rotate Right">
-              <i class="bi bi-arrow-clockwise"></i>
-            </button>
-            {{/allowRotate}}
-
-            <button type="button" class="btn btn-dark btn-sm" data-action="reset" title="Reset View">
-              <i class="bi bi-arrow-repeat"></i>
-            </button>
-
-            {{#allowDownload}}
-            <button type="button" class="btn btn-dark btn-sm" data-action="download" title="Download Image">
-              <i class="bi bi-download"></i>
-            </button>
-            {{/allowDownload}}
-          </div>
-
-          <div class="image-viewer-info">
-            <span class="zoom-level">{{scale}}%</span>
-          </div>
-        </div>
-        {{/showControls}}
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    this.canvas = this.element.querySelector(".image-viewer-canvas");
-    this.context = this.canvas.getContext("2d");
-    this.containerElement = this.element.querySelector(".image-viewer-content");
-    this.controlsElement = this.element.querySelector(".image-viewer-controls");
-    this.setupCanvas();
-    this.setupEventListeners();
-    if (this.imageUrl) {
-      this.loadImage(this.imageUrl);
-    }
-  }
-  setupCanvas() {
-    if (!this.canvas || !this.containerElement) return;
-    if (this.context) {
-      this.context.imageSmoothingEnabled = true;
-      this.context.imageSmoothingQuality = "high";
-    }
-    setTimeout(() => {
-      this.resizeCanvas();
-      if (this.isLoaded && this.image) {
-        this.renderCanvas();
-      }
-    }, 2e3);
-  }
-  resizeCanvas() {
-    if (!this.canvas) return;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const canvasWidth = Math.floor(viewportWidth * 0.8);
-    const canvasHeight = Math.floor(viewportHeight * 0.8);
-    if (canvasWidth === this.canvasWidth && canvasHeight === this.canvasHeight) {
-      return;
-    }
-    const dpr = window.devicePixelRatio || 1;
-    this.canvasWidth = canvasWidth;
-    this.canvasHeight = canvasHeight;
-    this.canvas.width = canvasWidth * dpr;
-    this.canvas.height = canvasHeight * dpr;
-    this.canvas.style.width = canvasWidth + "px";
-    this.canvas.style.height = canvasHeight + "px";
-    this.context.setTransform(dpr, 0, 0, dpr, 0, 0);
-    if (this.isLoaded && this.image) {
-      this.renderCanvas();
-    }
-  }
-  setupEventListeners() {
-    if (!this.canvas) return;
-    if (this.allowPan) {
-      this.canvas.addEventListener("mousedown", (e) => this.handleMouseDown(e));
-      document.addEventListener("mousemove", (e) => this.handleMouseMove(e));
-      document.addEventListener("mouseup", (e) => this.handleMouseUp(e));
-    }
-    if (this.allowZoom) {
-      this.canvas.addEventListener("wheel", (e) => this.handleWheel(e), { passive: false });
-    }
-    this.canvas.addEventListener("touchstart", (e) => this.handleTouchStart(e), { passive: false });
-    this.canvas.addEventListener("touchmove", (e) => this.handleTouchMove(e), { passive: false });
-    this.canvas.addEventListener("touchend", (e) => this.handleTouchEnd(e));
-    this.canvas.addEventListener("contextmenu", (e) => e.preventDefault());
-  }
-  // Action handlers
-  async handleActionZoomIn() {
-    this.zoomIn();
-  }
-  async handleActionZoomOut() {
-    this.zoomOut();
-  }
-  async handleActionZoomFit() {
-    this.fitToContainer();
-  }
-  async handleActionZoomActual() {
-    this.setScale(1);
-    this.renderCanvas();
-  }
-  async handleActionRotateLeft() {
-    this.rotate(-90);
-  }
-  async handleActionRotateRight() {
-    this.rotate(90);
-  }
-  async handleActionReset() {
-    this.reset();
-  }
-  async handleActionDownload() {
-    this.downloadImage();
-  }
-  // Image loading
-  loadImage(imageUrl) {
-    this.isLoaded = false;
-    this.element.classList.remove("loaded");
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      this.image = img;
-      this.handleImageLoad();
-    };
-    img.onerror = () => {
-      this.handleImageError();
-    };
-    img.src = imageUrl;
-  }
-  handleImageLoad() {
-    this.isLoaded = true;
-    this.element.classList.add("loaded");
-    const ensureCanvasReady = () => {
-      if (!this.canvasWidth || !this.canvasHeight) {
-        this.resizeCanvas();
-      }
-      if (this.autoFit) {
-        this.fitToContainer();
-      } else {
-        this.smartFit();
-      }
-      this.renderCanvas();
-      this.updateControls();
-    };
-    if (!this.canvasWidth || !this.canvasHeight) {
-      setTimeout(ensureCanvasReady, 2e3);
-    } else {
-      requestAnimationFrame(ensureCanvasReady);
-    }
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageviewer:loaded", {
-        viewer: this,
-        imageUrl: this.imageUrl,
-        naturalWidth: this.image.naturalWidth,
-        naturalHeight: this.image.naturalHeight
-      });
-    }
-  }
-  handleImageError() {
-    console.error("Failed to load image:", this.imageUrl);
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageviewer:error", {
-        viewer: this,
-        imageUrl: this.imageUrl,
-        error: "Failed to load image"
-      });
-    }
-  }
-  // Mouse interaction
-  handleMouseDown(e) {
-    if (!this.allowPan || e.button !== 0) return;
-    e.preventDefault();
-    this.isDragging = true;
-    const rect = this.canvas.getBoundingClientRect();
-    this.lastPointerX = e.clientX - rect.left;
-    this.lastPointerY = e.clientY - rect.top;
-    this.canvas.style.cursor = "grabbing";
-  }
-  handleMouseMove(e) {
-    if (!this.isDragging || !this.allowPan) return;
-    e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    const currentX = e.clientX - rect.left;
-    const currentY = e.clientY - rect.top;
-    const deltaX = currentX - this.lastPointerX;
-    const deltaY = currentY - this.lastPointerY;
-    this.pan(deltaX, deltaY);
-    this.lastPointerX = currentX;
-    this.lastPointerY = currentY;
-  }
-  handleMouseUp(e) {
-    if (!this.isDragging) return;
-    this.isDragging = false;
-    this.canvas.style.cursor = this.allowPan ? "grab" : "default";
-  }
-  handleWheel(e) {
-    if (!this.allowZoom) return;
-    e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    const delta = e.deltaY > 0 ? -this.scaleStep * 0.5 : this.scaleStep * 0.5;
-    this.zoomAtPoint(this.scale + delta, x, y);
-  }
-  // Touch events
-  handleTouchStart(e) {
-    if (e.touches.length === 1 && this.allowPan) {
-      e.preventDefault();
-      const touch = e.touches[0];
-      const rect = this.canvas.getBoundingClientRect();
-      this.isDragging = true;
-      this.lastPointerX = touch.clientX - rect.left;
-      this.lastPointerY = touch.clientY - rect.top;
-    }
-  }
-  handleTouchMove(e) {
-    if (e.touches.length === 1 && this.isDragging && this.allowPan) {
-      e.preventDefault();
-      const touch = e.touches[0];
-      const rect = this.canvas.getBoundingClientRect();
-      const currentX = touch.clientX - rect.left;
-      const currentY = touch.clientY - rect.top;
-      const deltaX = currentX - this.lastPointerX;
-      const deltaY = currentY - this.lastPointerY;
-      this.pan(deltaX, deltaY);
-      this.lastPointerX = currentX;
-      this.lastPointerY = currentY;
-    }
-  }
-  handleTouchEnd(e) {
-    this.isDragging = false;
-  }
-  // Transform methods
-  zoomIn() {
-    this.setScale(this.scale + this.scaleStep);
-  }
-  zoomOut() {
-    this.setScale(this.scale - this.scaleStep);
-  }
-  setScale(scale) {
-    const oldScale = this.scale;
-    this.scale = Math.max(this.minScale, Math.min(this.maxScale, scale));
-    this.renderCanvas();
-    this.updateControls();
-    const eventBus = this.getApp()?.events;
-    if (eventBus && oldScale !== this.scale) {
-      eventBus.emit("imageviewer:scale-changed", {
-        viewer: this,
-        oldScale,
-        newScale: this.scale
-      });
-    }
-  }
-  zoomAtPoint(scale, x, y) {
-    if (!this.image) return;
-    const oldScale = this.scale;
-    this.setScale(scale);
-    if (oldScale !== this.scale) {
-      const scaleDiff = this.scale / oldScale;
-      const centerX = this.canvasWidth / 2;
-      const centerY = this.canvasHeight / 2;
-      this.translateX = (this.translateX - (x - centerX)) * scaleDiff + (x - centerX);
-      this.translateY = (this.translateY - (y - centerY)) * scaleDiff + (y - centerY);
-      this.renderCanvas();
-    }
-  }
-  pan(deltaX, deltaY) {
-    this.translateX += deltaX;
-    this.translateY += deltaY;
-    this.renderCanvas();
-  }
-  rotate(degrees) {
-    const oldRotation = this.rotation;
-    this.rotation = (this.rotation + degrees) % 360;
-    if (this.rotation < 0) this.rotation += 360;
-    this.renderCanvas();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageviewer:rotated", {
-        viewer: this,
-        oldRotation,
-        newRotation: this.rotation,
-        degrees
-      });
-    }
-  }
-  center() {
-    this.translateX = 0;
-    this.translateY = 0;
-    this.renderCanvas();
-  }
-  fitToContainer() {
-    if (!this.image || !this.canvasWidth || !this.canvasHeight) return;
-    const padding = 40;
-    const availableWidth = this.canvasWidth - padding;
-    const availableHeight = this.canvasHeight - padding;
-    const scaleX = availableWidth / this.image.naturalWidth;
-    const scaleY = availableHeight / this.image.naturalHeight;
-    const scale = Math.min(scaleX, scaleY, 1);
-    this.setScale(scale);
-    this.renderCanvas();
-  }
-  smartFit() {
-    if (!this.image || !this.canvasWidth || !this.canvasHeight) return;
-    const padding = 80;
-    const scaleX = (this.canvasWidth - padding) / this.image.naturalWidth;
-    const scaleY = (this.canvasHeight - padding) / this.image.naturalHeight;
-    const fitScale = Math.min(scaleX, scaleY);
-    if (fitScale < 1) {
-      this.setScale(fitScale);
-    }
-    this.renderCanvas();
-  }
-  reset() {
-    this.scale = 1;
-    this.rotation = 0;
-    this.translateX = 0;
-    this.translateY = 0;
-    this.renderCanvas();
-    this.updateControls();
-  }
-  // Canvas rendering
-  renderCanvas() {
-    if (!this.context || !this.canvasWidth || !this.canvasHeight) return;
-    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-    if (!this.image || !this.isLoaded) return;
-    this.context.save();
-    this.context.translate(
-      this.canvasWidth / 2 + this.translateX,
-      this.canvasHeight / 2 + this.translateY
-    );
-    this.context.scale(this.scale, this.scale);
-    this.context.rotate(this.rotation * Math.PI / 180);
-    this.context.drawImage(
-      this.image,
-      -this.image.naturalWidth / 2,
-      -this.image.naturalHeight / 2
-    );
-    this.context.restore();
-  }
-  // Download functionality
-  downloadImage() {
-    if (!this.canvas) return;
-    try {
-      const link = document.createElement("a");
-      link.download = this.getDownloadFilename();
-      link.href = this.canvas.toDataURL("image/png");
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      const eventBus = this.getApp()?.events;
-      if (eventBus) {
-        eventBus.emit("imageviewer:downloaded", {
-          viewer: this,
-          filename: link.download
-        });
-      }
-    } catch (error) {
-      console.error("Failed to download image:", error);
-      const eventBus = this.getApp()?.events;
-      if (eventBus) {
-        eventBus.emit("imageviewer:download-error", {
-          viewer: this,
-          error: error.message
-        });
-      }
-    }
-  }
-  getDownloadFilename() {
-    if (this.title) {
-      return `${this.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.png`;
-    }
-    try {
-      const url = new URL(this.imageUrl);
-      const pathname = url.pathname;
-      const filename = pathname.split("/").pop();
-      if (filename && filename.includes(".")) {
-        return filename.replace(/\.[^.]+$/, ".png");
-      }
-    } catch (e) {
-    }
-    return "image.png";
-  }
-  updateControls() {
-    if (!this.controlsElement) return;
-    const zoomLevel = this.controlsElement.querySelector(".zoom-level");
-    if (zoomLevel) {
-      zoomLevel.textContent = `${Math.round(this.scale * 100)}%`;
-    }
-    const zoomInBtn = this.controlsElement.querySelector('[data-action="zoom-in"]');
-    const zoomOutBtn = this.controlsElement.querySelector('[data-action="zoom-out"]');
-    if (zoomInBtn) {
-      zoomInBtn.disabled = this.scale >= this.maxScale;
-    }
-    if (zoomOutBtn) {
-      zoomOutBtn.disabled = this.scale <= this.minScale;
-    }
-  }
-  // Public API methods
-  setImage(imageUrl, alt = "", title = "") {
-    const oldImageUrl = this.imageUrl;
-    this.imageUrl = imageUrl;
-    this.alt = alt;
-    this.title = title;
-    this.reset();
-    this.loadImage(imageUrl);
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageviewer:image-changed", {
-        viewer: this,
-        oldImageUrl,
-        newImageUrl: imageUrl
-      });
-    }
-  }
-  getCurrentState() {
-    return {
-      scale: this.scale,
-      rotation: this.rotation,
-      translateX: this.translateX,
-      translateY: this.translateY
-    };
-  }
-  setState(state) {
-    if (state.scale !== void 0) this.scale = state.scale;
-    if (state.rotation !== void 0) this.rotation = state.rotation;
-    if (state.translateX !== void 0) this.translateX = state.translateX;
-    if (state.translateY !== void 0) this.translateY = state.translateY;
-    this.renderCanvas();
-    this.updateControls();
-  }
-  async onBeforeDestroy() {
-    if (this.isDragging) {
-      this.isDragging = false;
-    }
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageviewer:destroyed", { viewer: this });
-    }
-  }
-  // Static method to show image in a fullscreen dialog
-  static async showDialog(imageUrl, options = {}) {
-    const {
-      title = "Image Viewer",
-      alt = "Image",
-      size = "fullscreen",
-      showControls = true,
-      allowRotate = true,
-      allowZoom = true,
-      allowPan = true,
-      allowDownload = true,
-      ...dialogOptions
-    } = options;
-    const viewer = new ImageViewer({
-      imageUrl,
-      alt,
-      title,
-      showControls,
-      allowRotate,
-      allowZoom,
-      allowPan,
-      allowDownload,
-      autoFit: true
-    });
-    return Dialog.showDialog({
-      title,
-      body: viewer,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      buttons: [
-        {
-          text: "Close",
-          action: "close",
-          class: "btn btn-secondary",
-          dismiss: true
-        }
-      ],
-      ...dialogOptions
-    });
-  }
-}
-window.ImageViewer = ImageViewer;
-class ImageCanvasView extends View {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-canvas-view ${options.className || ""}`,
-      tagName: "div"
-    });
-    this.imageUrl = options.imageUrl || options.src || "";
-    this.alt = options.alt || "Image";
-    this.title = options.title || "";
-    this.canvas = null;
-    this.context = null;
-    this.image = null;
-    this.canvasWidth = 0;
-    this.canvasHeight = 0;
-    this.maxCanvasHeightPercent = options.maxCanvasHeightPercent || 0.7;
-    this.maxCanvasWidthPercent = options.maxCanvasWidthPercent || 0.8;
-    this.canvasSizes = {
-      sm: { width: 400, height: 300 },
-      // Small - thumbnails, previews
-      md: { width: 600, height: 450 },
-      // Medium - dialogs, cards
-      lg: { width: 800, height: 600 },
-      // Large - main editing
-      xl: { width: 1e3, height: 750 },
-      // Extra Large - detailed work
-      fullscreen: { width: 0, height: 0 },
-      // Special case - use viewport
-      auto: { width: 0, height: 0 }
-      // Auto-size based on image + viewport
-    };
-    this.canvasSize = options.canvasSize || "auto";
-    this.isLoaded = false;
-    this.isRendering = false;
-    this.autoFit = options.autoFit !== false;
-    this.crossOrigin = options.crossOrigin || "anonymous";
-  }
-  async getTemplate() {
-    return `
-      <div class="image-canvas-container d-flex flex-column h-100">
-        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">
-          <canvas class="image-canvas w-100 h-100" data-container="canvas"></canvas>
-
-          <!-- Loading Overlay -->
-          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"
-               style="display: none; z-index: 10;">
-            <div class="spinner-border text-primary" role="status">
-              <span class="visually-hidden">Loading...</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    this.canvas = this.element.querySelector("canvas");
-    this.context = this.canvas.getContext("2d");
-    this.containerElement = this.element.querySelector(".image-canvas-content");
-    this.loadingElement = this.element.querySelector(".image-canvas-loading");
-    this.setupCanvas();
-    if (this.imageUrl) {
-      this.loadImage(this.imageUrl);
-    }
-  }
-  setupCanvas() {
-    if (!this.canvas || !this.containerElement) return;
-    this.setCanvasSize(this.canvasSize);
-    if (this.canvasSize === "fullscreen") {
-      this._resizeHandler = () => this.setCanvasSize("fullscreen");
-      window.addEventListener("resize", this._resizeHandler);
-    }
-    this.context.imageSmoothingEnabled = true;
-    this.context.imageSmoothingQuality = "high";
-  }
-  setCanvasSize(size) {
-    const preset = this.canvasSizes[size];
-    if (!preset && size !== "auto") return;
-    let canvasWidth, canvasHeight;
-    if (size === "fullscreen") {
-      canvasWidth = Math.min(1200, window.innerWidth * 0.9);
-      canvasHeight = Math.min(900, window.innerHeight * 0.8);
-    } else if (size === "auto" || !preset) {
-      if (this.image) {
-        const maxWidth = window.innerWidth * this.maxCanvasWidthPercent;
-        const maxHeight = window.innerHeight * this.maxCanvasHeightPercent;
-        const scaleX = maxWidth / this.image.naturalWidth;
-        const scaleY = maxHeight / this.image.naturalHeight;
-        const scale = Math.min(scaleX, scaleY, 1);
-        canvasWidth = Math.floor(this.image.naturalWidth * scale);
-        canvasHeight = Math.floor(this.image.naturalHeight * scale);
-        canvasWidth = Math.max(300, canvasWidth);
-        canvasHeight = Math.max(200, canvasHeight);
-      } else {
-        canvasWidth = Math.min(600, window.innerWidth * this.maxCanvasWidthPercent);
-        canvasHeight = Math.min(450, window.innerHeight * this.maxCanvasHeightPercent);
-      }
-    } else {
-      const maxWidth = window.innerWidth * this.maxCanvasWidthPercent;
-      const maxHeight = window.innerHeight * this.maxCanvasHeightPercent;
-      if (preset.width > maxWidth || preset.height > maxHeight) {
-        if (this.image) {
-          const scaleX = maxWidth / this.image.naturalWidth;
-          const scaleY = maxHeight / this.image.naturalHeight;
-          const scale = Math.min(scaleX, scaleY, 1);
-          canvasWidth = Math.floor(this.image.naturalWidth * scale);
-          canvasHeight = Math.floor(this.image.naturalHeight * scale);
-          canvasWidth = Math.max(300, canvasWidth);
-          canvasHeight = Math.max(200, canvasHeight);
-        } else {
-          canvasWidth = Math.min(600, maxWidth);
-          canvasHeight = Math.min(450, maxHeight);
-        }
-      } else {
-        canvasWidth = preset.width;
-        canvasHeight = preset.height;
-      }
-    }
-    canvasWidth = Math.min(canvasWidth, window.innerWidth * this.maxCanvasWidthPercent);
-    canvasHeight = Math.min(canvasHeight, window.innerHeight * this.maxCanvasHeightPercent);
-    if (Math.abs(canvasWidth - this.canvasWidth) < 10 && Math.abs(canvasHeight - this.canvasHeight) < 10) {
-      return;
-    }
-    const dpr = window.devicePixelRatio || 1;
-    this.canvasWidth = canvasWidth;
-    this.canvasHeight = canvasHeight;
-    this.canvas.width = canvasWidth * dpr;
-    this.canvas.height = canvasHeight * dpr;
-    this.canvas.style.width = canvasWidth + "px";
-    this.canvas.style.height = canvasHeight + "px";
-    this.context.setTransform(dpr, 0, 0, dpr, 0, 0);
-    if (this.isLoaded) {
-      this.renderCanvas();
-    }
-  }
-  // Image loading
-  loadImage(imageUrl) {
-    if (!imageUrl) return;
-    this.imageUrl = imageUrl;
-    this.isLoaded = false;
-    this.element.classList.remove("loaded");
-    this.showLoading();
-    const img = new Image();
-    if (this.crossOrigin) {
-      img.crossOrigin = this.crossOrigin;
-    }
-    img.onload = () => {
-      this.image = img;
-      this.handleImageLoad();
-    };
-    img.onerror = () => {
-      this.handleImageError();
-    };
-    img.src = imageUrl;
-  }
-  handleImageLoad() {
-    this.isLoaded = true;
-    this.element.classList.add("loaded");
-    this.hideLoading();
-    if (this.canvasSize === "auto") {
-      this.setCanvasSize("auto");
-    } else if (this.autoFit) {
-      this.fitToContainer();
-    }
-    this.renderCanvas();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imagecanvas:loaded", {
-        view: this,
-        imageUrl: this.imageUrl,
-        naturalWidth: this.image.naturalWidth,
-        naturalHeight: this.image.naturalHeight
-      });
-    }
-  }
-  handleImageError() {
-    console.error("Failed to load image:", this.imageUrl);
-    this.hideLoading();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imagecanvas:error", {
-        view: this,
-        imageUrl: this.imageUrl,
-        error: "Failed to load image"
-      });
-    }
-  }
-  showLoading() {
-    if (this.loadingElement) {
-      this.loadingElement.style.display = "block";
-    }
-  }
-  hideLoading() {
-    if (this.loadingElement) {
-      this.loadingElement.style.display = "none";
-    }
-  }
-  // Base canvas rendering - to be extended by child classes
-  renderCanvas() {
-    if (!this.context || !this.canvasWidth || !this.canvasHeight || this.isRendering) return;
-    this.isRendering = true;
-    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-    if (!this.image || !this.isLoaded) {
-      this.isRendering = false;
-      return;
-    }
-    this.context.save();
-    this.renderImage();
-    this.context.restore();
-    this.isRendering = false;
-  }
-  // Basic image rendering with smart scaling - can be overridden
-  renderImage() {
-    if (!this.image) return;
-    const scaleX = this.canvasWidth / this.image.naturalWidth;
-    const scaleY = this.canvasHeight / this.image.naturalHeight;
-    const scale = Math.min(scaleX, scaleY, 1);
-    const scaledWidth = this.image.naturalWidth * scale;
-    const scaledHeight = this.image.naturalHeight * scale;
-    const x = (this.canvasWidth - scaledWidth) / 2;
-    const y = (this.canvasHeight - scaledHeight) / 2;
-    this.context.drawImage(this.image, x, y, scaledWidth, scaledHeight);
-  }
-  // Utility methods
-  fitToContainer() {
-    if (!this.image || !this.canvasWidth || !this.canvasHeight) return;
-    const padding = 40;
-    const availableWidth = this.canvasWidth - padding;
-    const availableHeight = this.canvasHeight - padding;
-    availableWidth / this.image.naturalWidth;
-    availableHeight / this.image.naturalHeight;
-    if (this.canvasSize === "auto") {
-      this.setCanvasSize("auto");
-    }
-    this.renderCanvas();
-  }
-  center() {
-    this.renderCanvas();
-  }
-  reset() {
-    this.renderCanvas();
-  }
-  // Export functionality
-  exportImageData() {
-    if (!this.canvas) return null;
-    try {
-      return this.canvas.toDataURL("image/png");
-    } catch (error) {
-      console.error("Failed to export image data:", error);
-      return null;
-    }
-  }
-  exportImageBlob(quality = 0.9) {
-    if (!this.canvas) return Promise.resolve(null);
-    return new Promise((resolve) => {
-      try {
-        this.canvas.toBlob((blob) => {
-          resolve(blob);
-        }, "image/png", quality);
-      } catch (error) {
-        console.error("Failed to export image blob:", error);
-        resolve(null);
-      }
-    });
-  }
-  // Public API
-  setImage(imageUrl, alt = "", title = "") {
-    const oldImageUrl = this.imageUrl;
-    this.alt = alt;
-    this.title = title;
-    this.loadImage(imageUrl);
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imagecanvas:image-changed", {
-        view: this,
-        oldImageUrl,
-        newImageUrl: imageUrl
-      });
-    }
-  }
-  getImageData() {
-    return {
-      imageUrl: this.imageUrl,
-      alt: this.alt,
-      title: this.title,
-      naturalWidth: this.image?.naturalWidth || 0,
-      naturalHeight: this.image?.naturalHeight || 0,
-      isLoaded: this.isLoaded
-    };
-  }
-  async onBeforeDestroy() {
-    this.isLoaded = false;
-    this.isRendering = false;
-    this.image = null;
-    if (this._resizeHandler) {
-      window.removeEventListener("resize", this._resizeHandler);
-    }
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imagecanvas:destroyed", { view: this });
-    }
-  }
-}
-window.ImageCanvasView = ImageCanvasView;
-class ImageTransformView extends ImageCanvasView {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-transform-view ${options.className || ""}`
-    });
-    this.scale = 1;
-    this.rotation = 0;
-    this.translateX = 0;
-    this.translateY = 0;
-    this.minScale = 0.1;
-    this.maxScale = 5;
-    this.scaleStep = 0.02;
-    this.isDragging = false;
-    this.lastPointerX = 0;
-    this.lastPointerY = 0;
-    this.allowPan = options.allowPan !== false;
-    this.allowZoom = options.allowZoom !== false;
-    this.allowRotate = options.allowRotate !== false;
-    this.allowKeyboard = options.allowKeyboard !== false;
-    this._handleMouseMove = this.handleMouseMove.bind(this);
-    this._handleMouseUp = this.handleMouseUp.bind(this);
-    this._handleKeyboard = this.handleKeyboard.bind(this);
-    if (!options.maxCanvasHeightPercent) {
-      this.maxCanvasHeightPercent = 0.6;
-    }
-  }
-  async getTemplate() {
-    return `
-      <div class="image-transform-container d-flex flex-column h-100">
-        <!-- Transform Toolbar -->
-        <div class="image-transform-toolbar bg-light border-bottom p-2">
-          <div class="btn-toolbar justify-content-center" role="toolbar">
-            <div class="btn-group me-2" role="group" aria-label="Zoom controls">
-              <button type="button" class="btn btn-outline-primary btn-sm" data-action="zoom-in" title="Zoom In">
-                <i class="bi bi-zoom-in"></i>
-              </button>
-              <button type="button" class="btn btn-outline-primary btn-sm" data-action="zoom-out" title="Zoom Out">
-                <i class="bi bi-zoom-out"></i>
-              </button>
-              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="fit-to-screen" title="Fit to Screen">
-                <i class="bi bi-arrows-fullscreen"></i>
-              </button>
-              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="actual-size" title="Actual Size">
-                <i class="bi bi-1-square"></i>
-              </button>
-            </div>
-
-            <div class="btn-group me-2" role="group" aria-label="Rotate controls">
-              <button type="button" class="btn btn-outline-info btn-sm" data-action="rotate-left" title="Rotate Left">
-                <i class="bi bi-arrow-counterclockwise"></i>
-              </button>
-              <button type="button" class="btn btn-outline-info btn-sm" data-action="rotate-right" title="Rotate Right">
-                <i class="bi bi-arrow-clockwise"></i>
-              </button>
-            </div>
-
-            <div class="btn-group" role="group" aria-label="Position controls">
-              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="center-image" title="Center Image">
-                <i class="bi bi-bullseye"></i>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Canvas Area -->
-        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">
-          <canvas class="image-canvas" data-container="canvas"></canvas>
-
-          <!-- Loading Overlay -->
-          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"
-               style="display: none; z-index: 10;">
-            <div class="spinner-border text-primary" role="status">
-              <span class="visually-hidden">Loading...</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    this.setupInteractionListeners();
-  }
-  setupInteractionListeners() {
-    if (!this.canvas) return;
-    if (this.allowPan) {
-      this.canvas.addEventListener("mousedown", (e) => this.handleMouseDown(e));
-      document.addEventListener("mousemove", this._handleMouseMove);
-      document.addEventListener("mouseup", this._handleMouseUp);
-    }
-    if (this.allowZoom) {
-      this.canvas.addEventListener("wheel", (e) => this.handleWheel(e), { passive: false });
-    }
-    this.canvas.addEventListener("touchstart", (e) => this.handleTouchStart(e), { passive: false });
-    this.canvas.addEventListener("touchmove", (e) => this.handleTouchMove(e), { passive: false });
-    this.canvas.addEventListener("touchend", (e) => this.handleTouchEnd(e));
-    if (this.allowKeyboard) {
-      document.addEventListener("keydown", this._handleKeyboard);
-    }
-    this.canvas.addEventListener("contextmenu", (e) => e.preventDefault());
-    this.canvas.style.cursor = this.allowPan ? "grab" : "default";
-  }
-  // Override renderImage to apply transforms
-  renderImage() {
-    if (!this.image) return;
-    this.context.translate(
-      this.canvasWidth / 2 + this.translateX,
-      this.canvasHeight / 2 + this.translateY
-    );
-    this.context.scale(this.scale, this.scale);
-    this.context.rotate(this.rotation * Math.PI / 180);
-    this.context.drawImage(
-      this.image,
-      -this.image.naturalWidth / 2,
-      -this.image.naturalHeight / 2
-    );
-  }
-  // Mouse interaction
-  handleMouseDown(e) {
-    if (!this.allowPan || e.button !== 0) return;
-    e.preventDefault();
-    this.isDragging = true;
-    const rect = this.canvas.getBoundingClientRect();
-    this.lastPointerX = e.clientX - rect.left;
-    this.lastPointerY = e.clientY - rect.top;
-    this.canvas.style.cursor = "grabbing";
-  }
-  handleMouseMove(e) {
-    if (!this.isDragging || !this.allowPan) return;
-    e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    const currentX = e.clientX - rect.left;
-    const currentY = e.clientY - rect.top;
-    const deltaX = currentX - this.lastPointerX;
-    const deltaY = currentY - this.lastPointerY;
-    this.pan(deltaX, deltaY);
-    this.lastPointerX = currentX;
-    this.lastPointerY = currentY;
-  }
-  handleMouseUp(e) {
-    if (!this.isDragging) return;
-    this.isDragging = false;
-    this.canvas.style.cursor = this.allowPan ? "grab" : "default";
-  }
-  handleWheel(e) {
-    if (!this.allowZoom) return;
-    e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    const delta = e.deltaY > 0 ? -this.scaleStep * 0.5 : this.scaleStep * 0.5;
-    this.zoomAtPoint(this.scale + delta, x, y);
-  }
-  // Touch events
-  handleTouchStart(e) {
-    if (e.touches.length === 1 && this.allowPan) {
-      e.preventDefault();
-      const touch = e.touches[0];
-      const rect = this.canvas.getBoundingClientRect();
-      this.isDragging = true;
-      this.lastPointerX = touch.clientX - rect.left;
-      this.lastPointerY = touch.clientY - rect.top;
-    }
-  }
-  handleTouchMove(e) {
-    if (e.touches.length === 1 && this.isDragging && this.allowPan) {
-      e.preventDefault();
-      const touch = e.touches[0];
-      const rect = this.canvas.getBoundingClientRect();
-      const currentX = touch.clientX - rect.left;
-      const currentY = touch.clientY - rect.top;
-      const deltaX = currentX - this.lastPointerX;
-      const deltaY = currentY - this.lastPointerY;
-      this.pan(deltaX, deltaY);
-      this.lastPointerX = currentX;
-      this.lastPointerY = currentY;
-    }
-  }
-  handleTouchEnd(e) {
-    this.isDragging = false;
-  }
-  // Keyboard shortcuts
-  handleKeyboard(e) {
-    if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
-    switch (e.key) {
-      case "+":
-      case "=":
-        if (this.allowZoom) {
-          e.preventDefault();
-          this.zoomIn();
-        }
-        break;
-      case "-":
-        if (this.allowZoom) {
-          e.preventDefault();
-          this.zoomOut();
-        }
-        break;
-      case "0":
-        e.preventDefault();
-        this.fitToContainer();
-        break;
-      case "1":
-        e.preventDefault();
-        this.actualSize();
-        break;
-      case "r":
-      case "R":
-        if (this.allowRotate) {
-          e.preventDefault();
-          this.rotateRight();
-        }
-        break;
-    }
-  }
-  // Transform methods
-  zoomIn() {
-    this.setScale(this.scale + this.scaleStep);
-  }
-  zoomOut() {
-    this.setScale(this.scale - this.scaleStep);
-  }
-  setScale(scale) {
-    const oldScale = this.scale;
-    this.scale = Math.max(this.minScale, Math.min(this.maxScale, scale));
-    if (oldScale !== this.scale) {
-      this.renderCanvas();
-      this.emitTransformEvent("scale-changed", { oldScale, newScale: this.scale });
-    }
-  }
-  zoomAtPoint(scale, x, y) {
-    if (!this.image) return;
-    const oldScale = this.scale;
-    this.setScale(scale);
-    if (oldScale !== this.scale) {
-      const scaleDiff = this.scale / oldScale;
-      const centerX = this.canvasWidth / 2;
-      const centerY = this.canvasHeight / 2;
-      this.translateX = (this.translateX - (x - centerX)) * scaleDiff + (x - centerX);
-      this.translateY = (this.translateY - (y - centerY)) * scaleDiff + (y - centerY);
-      this.renderCanvas();
-    }
-  }
-  pan(deltaX, deltaY) {
-    this.translateX += deltaX;
-    this.translateY += deltaY;
-    this.renderCanvas();
-    this.emitTransformEvent("panned", { deltaX, deltaY });
-  }
-  rotate(degrees) {
-    const oldRotation = this.rotation;
-    this.rotation = (this.rotation + degrees) % 360;
-    if (this.rotation < 0) this.rotation += 360;
-    this.renderCanvas();
-    this.emitTransformEvent("rotated", { oldRotation, newRotation: this.rotation, degrees });
-  }
-  rotateLeft() {
-    this.rotate(-90);
-  }
-  rotateRight() {
-    this.rotate(90);
-  }
-  center() {
-    this.translateX = 0;
-    this.translateY = 0;
-    this.renderCanvas();
-    this.emitTransformEvent("centered");
-  }
-  actualSize() {
-    this.setScale(1);
-    this.center();
-  }
-  // Override fitToContainer with actual scaling logic
-  fitToContainer() {
-    if (!this.image || !this.canvasWidth || !this.canvasHeight) return;
-    const padding = 40;
-    const availableWidth = this.canvasWidth - padding;
-    const availableHeight = this.canvasHeight - padding;
-    const scaleX = availableWidth / this.image.naturalWidth;
-    const scaleY = availableHeight / this.image.naturalHeight;
-    const scale = Math.min(scaleX, scaleY, 1);
-    this.setScale(scale);
-    this.center();
-  }
-  smartFit() {
-    if (!this.image || !this.canvasWidth || !this.canvasHeight) return;
-    const padding = 80;
-    const scaleX = (this.canvasWidth - padding) / this.image.naturalWidth;
-    const scaleY = (this.canvasHeight - padding) / this.image.naturalHeight;
-    const fitScale = Math.min(scaleX, scaleY);
-    if (fitScale < 1) {
-      this.setScale(fitScale);
-    }
-    this.center();
-  }
-  // Override reset with transform-specific logic
-  reset() {
-    this.scale = 1;
-    this.rotation = 0;
-    this.translateX = 0;
-    this.translateY = 0;
-    this.renderCanvas();
-    this.emitTransformEvent("reset");
-  }
-  // Override handleImageLoad to apply initial transforms
-  handleImageLoad() {
-    super.handleImageLoad();
-    if (this.autoFit) {
-      this.fitToContainer();
-    } else {
-      this.smartFit();
-    }
-  }
-  // State management
-  getTransformState() {
-    return {
-      scale: this.scale,
-      rotation: this.rotation,
-      translateX: this.translateX,
-      translateY: this.translateY
-    };
-  }
-  setTransformState(state) {
-    if (state.scale !== void 0) this.scale = state.scale;
-    if (state.rotation !== void 0) this.rotation = state.rotation;
-    if (state.translateX !== void 0) this.translateX = state.translateX;
-    if (state.translateY !== void 0) this.translateY = state.translateY;
-    this.renderCanvas();
-  }
-  // Event emission
-  emitTransformEvent(type, data = {}) {
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit(`imagetransform:${type}`, {
-        view: this,
-        transform: this.getTransformState(),
-        ...data
-      });
-    }
-  }
-  // Action handlers for toolbar buttons
-  async handleActionZoomIn() {
-    this.zoomIn();
-  }
-  async handleActionZoomOut() {
-    this.zoomOut();
-  }
-  async handleActionFitToScreen() {
-    this.fitToContainer();
-  }
-  async handleActionActualSize() {
-    this.actualSize();
-  }
-  async handleActionRotateLeft() {
-    this.rotateLeft();
-  }
-  async handleActionRotateRight() {
-    this.rotateRight();
-  }
-  async handleActionCenterImage() {
-    this.center();
-  }
-  // Cleanup
-  async onBeforeDestroy() {
-    await super.onBeforeDestroy();
-    if (this.isDragging) {
-      this.isDragging = false;
-    }
-    document.removeEventListener("mousemove", this._handleMouseMove);
-    document.removeEventListener("mouseup", this._handleMouseUp);
-    document.removeEventListener("keydown", this._handleKeyboard);
-    this.emitTransformEvent("destroyed");
-  }
-  // Static method to show transform view in a dialog for standalone testing
-  static async showDialog(imageUrl, options = {}) {
-    const {
-      title = "Transform Image",
-      alt = "Image",
-      size = "xl",
-      allowPan = true,
-      allowZoom = true,
-      allowRotate = true,
-      ...dialogOptions
-    } = options;
-    const transformView = new ImageTransformView({
-      imageUrl,
-      alt,
-      title,
-      allowPan,
-      allowZoom,
-      allowRotate
-    });
-    const dialog = new Dialog({
-      title,
-      body: transformView,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      noBodyPadding: true,
-      maxCanvasHeightPercent: 0.5,
-      buttons: [
-        {
-          text: "Cancel",
-          action: "cancel",
-          class: "btn btn-secondary",
-          dismiss: true
-        },
-        {
-          text: "Apply Transform",
-          action: "apply-transform",
-          class: "btn btn-primary"
-        }
-      ],
-      ...dialogOptions
-    });
-    await dialog.render(true, document.body);
-    dialog.show();
-    return new Promise((resolve) => {
-      dialog.on("hidden", () => {
-        dialog.destroy();
-        resolve({ action: "cancel", view: transformView });
-      });
-      dialog.on("action:cancel", () => {
-        dialog.hide();
-      });
-      dialog.on("action:apply-transform", async () => {
-        const imageData = transformView.exportImageData();
-        dialog.hide();
-        resolve({
-          action: "transform",
-          view: transformView,
-          data: imageData,
-          transformState: transformView.getTransformState()
-        });
-      });
-    });
-  }
-}
-window.ImageTransformView = Image;
-class ImageCropView extends ImageCanvasView {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-crop-view ${options.className || ""}`
-    });
-    this.originalImageUrl = options.imageUrl;
-    this.cropMode = false;
-    this.cropBox = { x: 0, y: 0, width: 0, height: 0 };
-    this.aspectRatio = options.aspectRatio || null;
-    this.minCropSize = options.minCropSize || 50;
-    this.fixedCropSize = options.fixedCropSize || null;
-    this.cropAndScale = options.cropAndScale || null;
-    this.isDragging = false;
-    this.isResizing = false;
-    this.dragHandle = null;
-    this.dragStartImageX = 0;
-    this.dragStartImageY = 0;
-    this.initialCropBox = null;
-    this.newCropStart = null;
-    this.handles = {
-      "nw": { cursor: "nw-resize", x: 0, y: 0 },
-      "ne": { cursor: "ne-resize", x: 1, y: 0 },
-      "sw": { cursor: "sw-resize", x: 0, y: 1 },
-      "se": { cursor: "se-resize", x: 1, y: 1 },
-      "n": { cursor: "n-resize", x: 0.5, y: 0 },
-      "s": { cursor: "s-resize", x: 0.5, y: 1 },
-      "w": { cursor: "w-resize", x: 0, y: 0.5 },
-      "e": { cursor: "e-resize", x: 1, y: 0.5 }
-    };
-    this.handleSize = options.handleSize || 12;
-    this.showGrid = options.showGrid !== false;
-    this.showToolbar = options.showToolbar !== false;
-    this.autoFit = options.autoFit !== false;
-    this.imageOffsetX = 0;
-    this.imageOffsetY = 0;
-    this._handleMouseMove = this.handleMouseMove.bind(this);
-    this._handleMouseUp = this.handleMouseUp.bind(this);
-    if (!options.maxCanvasHeightPercent && this.showToolbar) {
-      this.maxCanvasHeightPercent = 0.6;
-    }
-  }
-  // Coordinate conversion helpers
-  imageToCanvas(imageCoords) {
-    if (!this.image) return imageCoords;
-    const scaleX = this.canvasWidth / this.image.naturalWidth;
-    const scaleY = this.canvasHeight / this.image.naturalHeight;
-    let imageScale;
-    if (this.autoFit) {
-      imageScale = Math.min(scaleX, scaleY, 1);
-    } else {
-      imageScale = 1;
-    }
-    const scaledImageWidth = this.image.naturalWidth * imageScale;
-    const scaledImageHeight = this.image.naturalHeight * imageScale;
-    const imageX = (this.canvasWidth - scaledImageWidth) / 2;
-    const imageY = (this.canvasHeight - scaledImageHeight) / 2;
-    return {
-      x: imageCoords.x * imageScale + imageX,
-      y: imageCoords.y * imageScale + imageY,
-      width: imageCoords.width * imageScale,
-      height: imageCoords.height * imageScale
-    };
-  }
-  canvasToImage(canvasCoords) {
-    if (!this.image) return canvasCoords;
-    const scaleX = this.canvasWidth / this.image.naturalWidth;
-    const scaleY = this.canvasHeight / this.image.naturalHeight;
-    let imageScale;
-    if (this.autoFit) {
-      imageScale = Math.min(scaleX, scaleY, 1);
-    } else {
-      imageScale = 1;
-    }
-    const scaledImageWidth = this.image.naturalWidth * imageScale;
-    const scaledImageHeight = this.image.naturalHeight * imageScale;
-    const imageX = (this.canvasWidth - scaledImageWidth) / 2;
-    const imageY = (this.canvasHeight - scaledImageHeight) / 2;
-    return {
-      x: (canvasCoords.x - imageX) / imageScale,
-      y: (canvasCoords.y - imageY) / imageScale,
-      width: canvasCoords.width / imageScale,
-      height: canvasCoords.height / imageScale
-    };
-  }
-  pointCanvasToImage(canvasX, canvasY) {
-    const result = this.canvasToImage({ x: canvasX, y: canvasY, width: 0, height: 0 });
-    return { x: result.x, y: result.y };
-  }
-  async getTemplate() {
-    return `
-      <div class="image-crop-container d-flex flex-column h-100">
-        {{#showToolbar}}
-        <!-- Crop Toolbar -->
-        <div class="image-crop-toolbar bg-light border-bottom p-2">
-          <div class="btn-toolbar justify-content-center" role="toolbar">
-            <div class="btn-group me-2" role="group" aria-label="Aspect ratio">
-              <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"
-                      data-bs-toggle="dropdown" title="Aspect Ratio">
-                <i class="bi bi-aspect-ratio"></i> Ratio
-              </button>
-              <ul class="dropdown-menu">
-                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="free">Free</a></li>
-                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="1">1:1 Square</a></li>
-                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="1.333">4:3</a></li>
-                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="1.777">16:9</a></li>
-                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="0.75">3:4 Portrait</a></li>
-              </ul>
-            </div>
-
-            <div class="btn-group me-2" role="group" aria-label="Fit mode">
-              <button type="button" class="btn btn-outline-info btn-sm" data-action="toggle-auto-fit" title="Toggle Auto-fit">
-                <i class="bi bi-arrows-fullscreen"></i> <span class="auto-fit-text">Fit</span>
-              </button>
-            </div>
-
-            <div class="btn-group me-2" role="group" aria-label="Crop actions">
-              <button type="button" class="btn btn-success btn-sm" data-action="apply-crop" title="Apply Crop">
-                <i class="bi bi-check"></i> Apply
-              </button>
-              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="reset-crop" title="Reset Crop">
-                <i class="bi bi-arrow-repeat"></i> Reset
-              </button>
-            </div>
-          </div>
-        </div>
-        {{/showToolbar}}
-
-        <!-- Canvas Area -->
-        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">
-          <canvas class="image-crop-canvas" data-container="canvas"></canvas>
-
-          <!-- Loading Overlay -->
-          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"
-               style="display: none; z-index: 10;">
-            <div class="spinner-border text-primary" role="status">
-              <span class="visually-hidden">Loading...</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    this.setupCropListeners();
-    this.updateAutoFitButtonState();
-  }
-  updateAutoFitButtonState() {
-    if (!this.showToolbar) return;
-    const button = this.element.querySelector('[data-action="toggle-auto-fit"]');
-    const textSpan = button?.querySelector(".auto-fit-text");
-    if (button && textSpan) {
-      if (this.autoFit) {
-        button.classList.remove("btn-outline-warning");
-        button.classList.add("btn-outline-info");
-        button.title = "Toggle Auto-fit (currently: fit to canvas)";
-        textSpan.textContent = "Fit";
-      } else {
-        button.classList.remove("btn-outline-info");
-        button.classList.add("btn-outline-warning");
-        button.title = "Toggle Auto-fit (currently: actual size)";
-        textSpan.textContent = "1:1";
-      }
-    }
-  }
-  handleImageLoad() {
-    super.handleImageLoad();
-    this.updateImageOffset();
-    setTimeout(() => {
-      if (this.isLoaded && this.canvasWidth > 0 && this.canvasHeight > 0) {
-        this.startCropMode();
-      }
-    }, 10);
-  }
-  updateImageOffset() {
-    if (!this.image) return;
-    const scaleX = this.canvasWidth / this.image.naturalWidth;
-    const scaleY = this.canvasHeight / this.image.naturalHeight;
-    let scale;
-    if (this.autoFit) {
-      scale = Math.min(scaleX, scaleY, 1);
-    } else {
-      scale = 1;
-    }
-    const scaledWidth = this.image.naturalWidth * scale;
-    const scaledHeight = this.image.naturalHeight * scale;
-    this.imageOffsetX = (this.canvasWidth - scaledWidth) / 2;
-    this.imageOffsetY = (this.canvasHeight - scaledHeight) / 2;
-    this.imageScale = scale;
-    console.log("Updated image offset:", this.imageOffsetX, this.imageOffsetY, "scale:", this.imageScale, "autoFit:", this.autoFit);
-  }
-  // Override setCanvasSize to update image offset when canvas is resized
-  setCanvasSize(size) {
-    super.setCanvasSize(size);
-    if (this.image && this.isLoaded) {
-      this.updateImageOffset();
-    }
-  }
-  // Override renderImage to scale and center the image (consistent with coordinate conversion)
-  renderImage() {
-    if (!this.image) return;
-    const scaleX = this.canvasWidth / this.image.naturalWidth;
-    const scaleY = this.canvasHeight / this.image.naturalHeight;
-    let scale;
-    if (this.autoFit) {
-      scale = Math.min(scaleX, scaleY, 1);
-    } else {
-      scale = 1;
-    }
-    const scaledWidth = this.image.naturalWidth * scale;
-    const scaledHeight = this.image.naturalHeight * scale;
-    const x = (this.canvasWidth - scaledWidth) / 2;
-    const y = (this.canvasHeight - scaledHeight) / 2;
-    this.context.drawImage(this.image, x, y, scaledWidth, scaledHeight);
-  }
-  setupCropListeners() {
-    if (!this.canvas) return;
-    this.canvas.addEventListener("mousedown", (e) => this.handleMouseDown(e));
-    document.addEventListener("mousemove", this._handleMouseMove);
-    document.addEventListener("mouseup", this._handleMouseUp);
-    this.canvas.addEventListener("touchstart", (e) => this.handleTouchStart(e), { passive: false });
-    this.canvas.addEventListener("touchmove", (e) => this.handleTouchMove(e), { passive: false });
-    this.canvas.addEventListener("touchend", (e) => this.handleTouchEnd(e));
-    this.canvas.style.cursor = "crosshair";
-  }
-  // Override renderCanvas to include crop overlay
-  renderCanvas() {
-    super.renderCanvas();
-    if (this.cropMode) {
-      this.renderCropOverlay();
-    }
-  }
-  renderCropOverlay() {
-    if (!this.cropMode || !this.cropBox) return;
-    const canvasBox = this.imageToCanvas(this.cropBox);
-    this.context.save();
-    this.context.globalAlpha = 0.5;
-    this.context.fillStyle = "#000000";
-    this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
-    this.context.globalCompositeOperation = "destination-out";
-    this.context.fillRect(
-      canvasBox.x,
-      canvasBox.y,
-      canvasBox.width,
-      canvasBox.height
-    );
-    this.context.globalCompositeOperation = "source-over";
-    this.context.globalAlpha = 1;
-    this.context.strokeStyle = "rgba(255, 255, 255, 0.9)";
-    this.context.lineWidth = 2;
-    this.context.strokeRect(
-      canvasBox.x,
-      canvasBox.y,
-      canvasBox.width,
-      canvasBox.height
-    );
-    if (this.showGrid) {
-      this.drawGrid();
-    }
-    this.drawHandles();
-    this.context.restore();
-  }
-  // Override parent's exportImageBlob to export only the cropped area without overlay
-  exportImageBlob(quality = 0.9) {
-    if (!this.canvas || !this.image || !this.isLoaded || !this.cropMode) {
-      return super.exportImageBlob(quality);
-    }
-    return new Promise((resolve) => {
-      try {
-        console.log("[ImageCropView] Exporting cropped image without overlay");
-        console.log("[ImageCropView] Crop box:", this.cropBox);
-        const cropArea = {
-          x: Math.max(0, Math.min(this.cropBox.x, this.image.naturalWidth)),
-          y: Math.max(0, Math.min(this.cropBox.y, this.image.naturalHeight)),
-          width: Math.min(this.cropBox.width, this.image.naturalWidth - this.cropBox.x),
-          height: Math.min(this.cropBox.height, this.image.naturalHeight - this.cropBox.y)
-        };
-        console.log("[ImageCropView] Crop area in image coords:", cropArea);
-        let outputWidth = cropArea.width;
-        let outputHeight = cropArea.height;
-        if (this.cropAndScale) {
-          outputWidth = this.cropAndScale.width;
-          outputHeight = this.cropAndScale.height;
-          console.log("[ImageCropView] Scaling to:", outputWidth, "x", outputHeight);
-        }
-        const tempCanvas = document.createElement("canvas");
-        tempCanvas.width = outputWidth;
-        tempCanvas.height = outputHeight;
-        const tempContext = tempCanvas.getContext("2d");
-        tempContext.drawImage(
-          this.image,
-          cropArea.x,
-          cropArea.y,
-          cropArea.width,
-          cropArea.height,
-          // Source rectangle
-          0,
-          0,
-          outputWidth,
-          outputHeight
-          // Destination rectangle
-        );
-        tempCanvas.toBlob((blob) => {
-          console.log("[ImageCropView] Successfully exported cropped image blob:", blob?.size, "bytes");
-          resolve(blob);
-        }, "image/png", quality);
-      } catch (error) {
-        console.error("Failed to export cropped image blob:", error);
-        resolve(null);
-      }
-    });
-  }
-  drawGrid() {
-    const canvasBox = this.imageToCanvas(this.cropBox);
-    this.context.globalAlpha = 0.6;
-    this.context.strokeStyle = "rgba(255, 255, 255, 0.7)";
-    this.context.lineWidth = 1;
-    const thirdW = canvasBox.width / 3;
-    const thirdH = canvasBox.height / 3;
-    for (let i = 1; i < 3; i++) {
-      const x = canvasBox.x + thirdW * i;
-      this.context.beginPath();
-      this.context.moveTo(x, canvasBox.y);
-      this.context.lineTo(x, canvasBox.y + canvasBox.height);
-      this.context.stroke();
-    }
-    for (let i = 1; i < 3; i++) {
-      const y = canvasBox.y + thirdH * i;
-      this.context.beginPath();
-      this.context.moveTo(canvasBox.x, y);
-      this.context.lineTo(canvasBox.x + canvasBox.width, y);
-      this.context.stroke();
-    }
-  }
-  drawHandles() {
-    if (this.fixedCropSize) return;
-    const canvasBox = this.imageToCanvas(this.cropBox);
-    this.context.globalAlpha = 1;
-    this.context.fillStyle = "#ffffff";
-    this.context.strokeStyle = "#000000";
-    this.context.lineWidth = 1;
-    Object.keys(this.handles).forEach((handleName) => {
-      const handle = this.handles[handleName];
-      const centerX = canvasBox.x + canvasBox.width * handle.x;
-      const centerY = canvasBox.y + canvasBox.height * handle.y;
-      const x = centerX - this.handleSize / 2;
-      const y = centerY - this.handleSize / 2;
-      this.context.fillRect(x, y, this.handleSize, this.handleSize);
-      this.context.strokeRect(x, y, this.handleSize, this.handleSize);
-    });
-  }
-  // Mouse interaction
-  handleMouseDown(e) {
-    if (!this.cropMode) return;
-    e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    const canvasX = e.clientX - rect.left;
-    const canvasY = e.clientY - rect.top;
-    const imagePoint = this.pointCanvasToImage(canvasX, canvasY);
-    this.dragStartImageX = imagePoint.x;
-    this.dragStartImageY = imagePoint.y;
-    this.initialCropBox = { ...this.cropBox };
-    if (this.fixedCropSize) {
-      if (this.isPointInCropBox(canvasX, canvasY)) {
-        this.isDragging = true;
-        this.canvas.style.cursor = "move";
-      }
-    } else {
-      const handle = this.getHandleAt(canvasX, canvasY);
-      if (handle) {
-        this.isResizing = true;
-        this.dragHandle = handle;
-        this.canvas.style.cursor = this.handles[handle].cursor;
-      } else if (this.isPointInCropBox(canvasX, canvasY)) {
-        this.isDragging = true;
-        this.canvas.style.cursor = "move";
-      } else {
-        this.startNewCrop(imagePoint.x, imagePoint.y);
-      }
-    }
-  }
-  handleMouseMove(e) {
-    if (!this.cropMode) return;
-    const rect = this.canvas.getBoundingClientRect();
-    const canvasX = e.clientX - rect.left;
-    const canvasY = e.clientY - rect.top;
-    if (this.isResizing && this.dragHandle) {
-      this.resizeCropBox(canvasX, canvasY);
-    } else if (this.isDragging) {
-      this.moveCropBox(canvasX, canvasY);
-    } else if (!this.isDragging && !this.isResizing) {
-      this.updateCursor(canvasX, canvasY);
-    }
-  }
-  handleMouseUp(e) {
-    if (!this.cropMode) return;
-    this.isDragging = false;
-    this.isResizing = false;
-    this.dragHandle = null;
-    this.initialCropBox = null;
-    this.newCropStart = null;
-    const rect = this.canvas.getBoundingClientRect();
-    const canvasX = e.clientX - rect.left;
-    const canvasY = e.clientY - rect.top;
-    this.updateCursor(canvasX, canvasY);
-  }
-  // Touch events
-  handleTouchStart(e) {
-    if (!this.cropMode || e.touches.length !== 1) return;
-    e.preventDefault();
-    const touch = e.touches[0];
-    const rect = this.canvas.getBoundingClientRect();
-    touch.clientX - rect.left;
-    touch.clientY - rect.top;
-    this.handleMouseDown({ clientX: touch.clientX, clientY: touch.clientY, preventDefault: () => {
-    } });
-  }
-  handleTouchMove(_e) {
-    if (!this.cropMode || _e.touches.length !== 1) return;
-    _e.preventDefault();
-    const touch = _e.touches[0];
-    this.handleMouseMove({ clientX: touch.clientX, clientY: touch.clientY });
-  }
-  handleTouchEnd(_e) {
-    if (!this.cropMode) return;
-    this.handleMouseUp({});
-  }
-  // Crop utility methods
-  getHandleAt(canvasX, canvasY) {
-    const hitAreaPadding = 4;
-    const canvasBox = this.imageToCanvas(this.cropBox);
-    for (const [handleName, handle] of Object.entries(this.handles)) {
-      const handleCenterX = canvasBox.x + canvasBox.width * handle.x;
-      const handleCenterY = canvasBox.y + canvasBox.height * handle.y;
-      const hitAreaSize = this.handleSize + hitAreaPadding;
-      const handleX = handleCenterX - hitAreaSize / 2;
-      const handleY = handleCenterY - hitAreaSize / 2;
-      if (canvasX >= handleX && canvasX <= handleX + hitAreaSize && canvasY >= handleY && canvasY <= handleY + hitAreaSize) {
-        return handleName;
-      }
-    }
-    return null;
-  }
-  isPointInCropBox(canvasX, canvasY) {
-    const imagePoint = this.pointCanvasToImage(canvasX, canvasY);
-    return imagePoint.x >= this.cropBox.x && imagePoint.x <= this.cropBox.x + this.cropBox.width && imagePoint.y >= this.cropBox.y && imagePoint.y <= this.cropBox.y + this.cropBox.height;
-  }
-  updateCursor(canvasX, canvasY) {
-    if (!this.cropMode) return;
-    const imageX = canvasX;
-    const imageY = canvasY;
-    if (this.fixedCropSize) {
-      if (this.isPointInCropBox(imageX, imageY)) {
-        this.canvas.style.cursor = "move";
-      } else {
-        this.canvas.style.cursor = "default";
-      }
-    } else {
-      const handle = this.getHandleAt(canvasX, canvasY);
-      if (handle) {
-        this.canvas.style.cursor = this.handles[handle].cursor;
-      } else if (this.isPointInCropBox(imageX, imageY)) {
-        this.canvas.style.cursor = "move";
-      } else {
-        this.canvas.style.cursor = "crosshair";
-      }
-    }
-  }
-  startNewCrop(x, y) {
-    this.newCropStart = { x, y };
-    this.cropBox = {
-      x,
-      y,
-      width: 0,
-      height: 0
-    };
-    this.isResizing = true;
-    this.dragHandle = "se";
-  }
-  resizeCropBox(canvasX, canvasY) {
-    if (!this.dragHandle) return;
-    const imagePoint = this.pointCanvasToImage(canvasX, canvasY);
-    if (this.newCropStart) {
-      const startX = this.newCropStart.x;
-      const startY = this.newCropStart.y;
-      this.cropBox = {
-        x: Math.min(startX, imagePoint.x),
-        y: Math.min(startY, imagePoint.y),
-        width: Math.abs(imagePoint.x - startX),
-        height: Math.abs(imagePoint.y - startY)
-      };
-      if (this.aspectRatio) {
-        this.constrainToAspectRatio(this.cropBox, "se");
-      }
-      if (this.cropBox.width < this.minCropSize) {
-        this.cropBox.width = this.minCropSize;
-      }
-      if (this.cropBox.height < this.minCropSize) {
-        this.cropBox.height = this.minCropSize;
-      }
-      this.constrainCropBox(this.cropBox);
-      return;
-    }
-    if (!this.initialCropBox) return;
-    const deltaX = imagePoint.x - this.dragStartImageX;
-    const deltaY = imagePoint.y - this.dragStartImageY;
-    let newBox = { ...this.initialCropBox };
-    switch (this.dragHandle) {
-      case "nw":
-        newBox.x += deltaX;
-        newBox.y += deltaY;
-        newBox.width -= deltaX;
-        newBox.height -= deltaY;
-        break;
-      case "ne":
-        newBox.y += deltaY;
-        newBox.width += deltaX;
-        newBox.height -= deltaY;
-        break;
-      case "sw":
-        newBox.x += deltaX;
-        newBox.width -= deltaX;
-        newBox.height += deltaY;
-        break;
-      case "se":
-        newBox.width += deltaX;
-        newBox.height += deltaY;
-        break;
-      case "n":
-        newBox.y += deltaY;
-        newBox.height -= deltaY;
-        break;
-      case "s":
-        newBox.height += deltaY;
-        break;
-      case "w":
-        newBox.x += deltaX;
-        newBox.width -= deltaX;
-        break;
-      case "e":
-        newBox.width += deltaX;
-        break;
-    }
-    if (this.aspectRatio) {
-      this.constrainToAspectRatio(newBox, this.dragHandle);
-    }
-    this.constrainCropBox(newBox);
-    this.cropBox = newBox;
-    this.renderCanvas();
-  }
-  moveCropBox(canvasX, canvasY) {
-    if (!this.initialCropBox) return;
-    const imagePoint = this.pointCanvasToImage(canvasX, canvasY);
-    const deltaX = imagePoint.x - this.dragStartImageX;
-    const deltaY = imagePoint.y - this.dragStartImageY;
-    let newBox = {
-      x: this.initialCropBox.x + deltaX,
-      y: this.initialCropBox.y + deltaY,
-      width: this.initialCropBox.width,
-      height: this.initialCropBox.height
-    };
-    if (this.image) {
-      newBox.x = Math.max(0, Math.min(this.image.naturalWidth - newBox.width, newBox.x));
-      newBox.y = Math.max(0, Math.min(this.image.naturalHeight - newBox.height, newBox.y));
-    }
-    this.cropBox = newBox;
-    this.renderCanvas();
-  }
-  constrainToAspectRatio(box, handle) {
-    let ratio = this.aspectRatio;
-    if (this.cropAndScale) {
-      ratio = this.cropAndScale.width / this.cropAndScale.height;
-    }
-    if (!ratio) return;
-    let anchorX, anchorY;
-    if (["nw", "ne", "sw", "se"].includes(handle)) {
-      switch (handle) {
-        case "nw":
-          anchorX = box.x + box.width;
-          anchorY = box.y + box.height;
-          break;
-        case "ne":
-          anchorX = box.x;
-          anchorY = box.y + box.height;
-          break;
-        case "sw":
-          anchorX = box.x + box.width;
-          anchorY = box.y;
-          break;
-        case "se":
-          anchorX = box.x;
-          anchorY = box.y;
-          break;
-      }
-      if (box.width / box.height > ratio) {
-        box.width = box.height * ratio;
-      } else {
-        box.height = box.width / ratio;
-      }
-      switch (handle) {
-        case "nw":
-          box.x = anchorX - box.width;
-          box.y = anchorY - box.height;
-          break;
-        case "ne":
-          box.x = anchorX;
-          box.y = anchorY - box.height;
-          break;
-        case "sw":
-          box.x = anchorX - box.width;
-          box.y = anchorY;
-          break;
-        case "se":
-          box.x = anchorX;
-          box.y = anchorY;
-          break;
-      }
-    } else if (["n", "s"].includes(handle)) {
-      const centerX = box.x + box.width / 2;
-      box.width = box.height * ratio;
-      box.x = centerX - box.width / 2;
-    } else if (["w", "e"].includes(handle)) {
-      const centerY = box.y + box.height / 2;
-      box.height = box.width / ratio;
-      box.y = centerY - box.height / 2;
-    }
-  }
-  constrainCropBox(box) {
-    box.width = Math.max(this.minCropSize, box.width);
-    box.height = Math.max(this.minCropSize, box.height);
-    if (this.image) {
-      if (box.x < 0) {
-        box.width += box.x;
-        box.x = 0;
-      }
-      if (box.y < 0) {
-        box.height += box.y;
-        box.y = 0;
-      }
-      if (box.x + box.width > this.image.naturalWidth) {
-        box.width = this.image.naturalWidth - box.x;
-      }
-      if (box.y + box.height > this.image.naturalHeight) {
-        box.height = this.image.naturalHeight - box.y;
-      }
-    }
-    box.width = Math.max(0, box.width);
-    box.height = Math.max(0, box.height);
-  }
-  // Public API
-  startCropMode() {
-    if (this.cropMode) {
-      console.log("Crop mode already active, skipping initialization");
-      return;
-    }
-    this.cropMode = true;
-    this.initializeCropBox();
-    console.log("Crop mode started - SE handle should be at buffer coords (100, 100)");
-    this.renderCanvas();
-    this.emitCropEvent("crop-started");
-  }
-  exitCropMode() {
-    this.cropMode = false;
-    this.isDragging = false;
-    this.isResizing = false;
-    this.dragHandle = null;
-    this.canvas.style.cursor = "default";
-    this.renderCanvas();
-    this.emitCropEvent("crop-exited");
-  }
-  initializeCropBox() {
-    if (!this.canvasWidth || !this.canvasHeight || !this.image) return;
-    const imageWidth = this.image.naturalWidth;
-    const imageHeight = this.image.naturalHeight;
-    let cropWidth, cropHeight;
-    if (this.fixedCropSize) {
-      cropWidth = this.fixedCropSize.width;
-      cropHeight = this.fixedCropSize.height;
-    } else {
-      cropWidth = Math.floor(imageWidth * 0.8);
-      cropHeight = Math.floor(imageHeight * 0.8);
-      let aspectRatio = this.aspectRatio;
-      if (this.cropAndScale) {
-        aspectRatio = this.cropAndScale.width / this.cropAndScale.height;
-      }
-      this.aspectRatio = aspectRatio;
-      if (aspectRatio) {
-        if (cropWidth / cropHeight > aspectRatio) {
-          cropWidth = cropHeight * aspectRatio;
-        } else {
-          cropHeight = cropWidth / aspectRatio;
-        }
-      }
-      cropWidth = Math.max(this.minCropSize || 50, cropWidth);
-      cropHeight = Math.max(this.minCropSize || 50, cropHeight);
-    }
-    const x = Math.floor((imageWidth - cropWidth) / 2);
-    const y = Math.floor((imageHeight - cropHeight) / 2);
-    this.cropBox = {
-      x,
-      // relative to image, not canvas
-      y,
-      // relative to image, not canvas
-      width: cropWidth,
-      height: cropHeight
-    };
-  }
-  setAspectRatio(ratio) {
-    this.aspectRatio = ratio;
-    if (this.cropMode) {
-      this.initializeCropBox();
-      this.renderCanvas();
-    }
-    this.emitCropEvent("aspect-ratio-changed", { aspectRatio: ratio });
-  }
-  getCropData() {
-    if (!this.cropBox || !this.image) return null;
-    return {
-      x: Math.max(0, Math.min(this.cropBox.x, this.image.naturalWidth)),
-      y: Math.max(0, Math.min(this.cropBox.y, this.image.naturalHeight)),
-      width: Math.min(this.cropBox.width, this.image.naturalWidth - this.cropBox.x),
-      height: Math.min(this.cropBox.height, this.image.naturalHeight - this.cropBox.y),
-      originalWidth: this.image.naturalWidth,
-      originalHeight: this.image.naturalHeight
-    };
-  }
-  async applyCrop() {
-    const cropData = this.getCropData();
-    if (!cropData || !this.image) {
-      return null;
-    }
-    const croppedCanvas = document.createElement("canvas");
-    const croppedContext = croppedCanvas.getContext("2d");
-    if (this.cropAndScale) {
-      croppedCanvas.width = this.cropAndScale.width;
-      croppedCanvas.height = this.cropAndScale.height;
-      croppedContext.drawImage(
-        this.image,
-        cropData.x,
-        cropData.y,
-        cropData.width,
-        cropData.height,
-        0,
-        0,
-        this.cropAndScale.width,
-        this.cropAndScale.height
-      );
-    } else {
-      croppedCanvas.width = cropData.width;
-      croppedCanvas.height = cropData.height;
-      croppedContext.drawImage(
-        this.image,
-        cropData.x,
-        cropData.y,
-        cropData.width,
-        cropData.height,
-        0,
-        0,
-        cropData.width,
-        cropData.height
-      );
-    }
-    const croppedImageData = croppedCanvas.toDataURL("image/png");
-    return {
-      canvas: croppedCanvas,
-      imageData: croppedImageData,
-      cropData
-    };
-  }
-  // Event emission
-  emitCropEvent(type, data = {}) {
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit(`imagecrop:${type}`, {
-        view: this,
-        cropBox: this.cropBox,
-        aspectRatio: this.aspectRatio,
-        ...data
-      });
-    }
-  }
-  // Toolbar control methods
-  showToolbarElement() {
-    if (!this.showToolbar) {
-      this.showToolbar = true;
-      const toolbar = this.element.querySelector(".image-crop-toolbar");
-      if (toolbar) {
-        toolbar.style.display = "block";
-      }
-      this.updateAutoFitButtonState();
-    }
-  }
-  hideToolbarElement() {
-    if (this.showToolbar) {
-      this.showToolbar = false;
-      const toolbar = this.element.querySelector(".image-crop-toolbar");
-      if (toolbar) {
-        toolbar.style.display = "none";
-      }
-    }
-  }
-  toggleToolbarElement() {
-    if (this.showToolbar) {
-      this.hideToolbarElement();
-    } else {
-      this.showToolbarElement();
-    }
-  }
-  // Cleanup
-  // Action handlers for toolbar buttons
-  async onPassThruActionSetAspectRatio(e, el) {
-    const ratio = el.getAttribute("data-ratio");
-    const aspectRatio = ratio === "free" ? null : parseFloat(ratio);
-    this.setAspectRatio(aspectRatio);
-  }
-  async handleActionApplyCrop() {
-    if (this.cropMode) {
-      const result = await this.applyCrop();
-      if (result && result.imageData) {
-        this.loadImage(result.imageData);
-        this.exitCropMode();
-        this.emitCropEvent("crop-applied", { result });
-      }
-    }
-  }
-  async handleActionToggleAutoFit() {
-    if (!this.showToolbar) return;
-    this.autoFit = !this.autoFit;
-    this.updateAutoFitButtonState();
-    this.updateImageOffset();
-    this.renderCanvas();
-    this.emitCropEvent("auto-fit-changed", { autoFit: this.autoFit });
-  }
-  async handleActionResetCrop() {
-    if (this.cropMode) {
-      this.exitCropMode();
-    }
-    if (this.originalImageUrl) {
-      await this.loadImage(this.originalImageUrl);
-    }
-    this.startCropMode();
-    this.emitCropEvent("crop-reset");
-  }
-  async onBeforeDestroy() {
-    await super.onBeforeDestroy();
-    this.cropMode = false;
-    this.isDragging = false;
-    this.isResizing = false;
-    document.removeEventListener("mousemove", this._handleMouseMove);
-    document.removeEventListener("mouseup", this._handleMouseUp);
-    this.emitCropEvent("destroyed");
-  }
-  // Static method to show crop view in a dialog for standalone testing
-  static async showDialog(imageUrl, options = {}) {
-    const {
-      title = "Crop Image",
-      alt = "Image",
-      size = "xl",
-      aspectRatio = null,
-      minCropSize = 50,
-      showGrid = true,
-      showToolbar = false,
-      autoFit = true,
-      fixedCropSize = null,
-      cropAndScale = null,
-      canvasSize = size || "auto",
-      ...dialogOptions
-    } = options;
-    const cropView = new ImageCropView({
-      imageUrl,
-      alt,
-      title,
-      aspectRatio,
-      minCropSize,
-      canvasSize: canvasSize || size || "md",
-      fixedCropSize,
-      cropAndScale,
-      showGrid,
-      showToolbar,
-      autoFit
-    });
-    const dialog = new Dialog({
-      title,
-      body: cropView,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      noBodyPadding: true,
-      buttons: [
-        {
-          text: "Cancel",
-          action: "cancel",
-          class: "btn btn-secondary",
-          dismiss: true
-        },
-        {
-          text: "Apply Crop",
-          action: "apply-crop",
-          class: "btn btn-primary"
-        }
-      ],
-      ...dialogOptions
-    });
-    await dialog.render(true, document.body);
-    dialog.show();
-    const initializeCrop = () => {
-      if (cropView.setupCanvas) {
-        cropView.setupCanvas();
-      }
-      if (cropView.isLoaded && cropView.canvasWidth > 0) {
-        cropView.startCropMode();
-      } else {
-        const checkReady = setInterval(() => {
-          if (cropView.isLoaded && cropView.canvasWidth > 0) {
-            clearInterval(checkReady);
-            cropView.startCropMode();
-          }
-        }, 100);
-        setTimeout(() => clearInterval(checkReady), 5e3);
-      }
-    };
-    dialog.on("shown", initializeCrop);
-    return new Promise((resolve) => {
-      dialog.on("hidden", () => {
-        dialog.destroy();
-        resolve({ action: "cancel", view: cropView });
-      });
-      dialog.on("action:cancel", () => {
-        dialog.hide();
-      });
-      dialog.on("action:apply-crop", async () => {
-        let result;
-        if (cropView.cropMode && cropView.cropBox) {
-          result = await cropView.applyCrop();
-        } else {
-          const currentImageData = cropView.canvas.toDataURL("image/png");
-          result = {
-            canvas: cropView.canvas,
-            imageData: currentImageData,
-            cropData: null
-            // No crop was applied
-          };
-        }
-        dialog.hide();
-        resolve({
-          action: "crop",
-          view: cropView,
-          data: result?.imageData,
-          cropData: result?.cropData
-        });
-      });
-    });
-  }
-}
-window.ImageCropView = ImageCropView;
-class ImageFiltersView extends ImageCanvasView {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-filters-view ${options.className || ""}`
-    });
-    this.filters = {
-      brightness: 100,
-      contrast: 100,
-      saturation: 100,
-      hue: 0,
-      blur: 0,
-      grayscale: 0,
-      sepia: 0
-    };
-    this.showControls = options.showControls ?? true;
-    this.allowReset = options.allowReset ?? true;
-    this.showPresets = options.showPresets ?? true;
-    this.showBasicControls = options.showBasicControls ?? true;
-    this.showAdvancedControls = options.showAdvancedControls ?? true;
-    this.controlsInDropdowns = options.controlsInDropdowns ?? true;
-    this.presetEffects = {
-      none: { name: "Original", filters: {} },
-      blackWhite: { name: "Black & White", filters: { grayscale: 100 } },
-      sepia: { name: "Sepia", filters: { sepia: 100 } },
-      vintage: { name: "Vintage", filters: { sepia: 60, contrast: 110, brightness: 110, saturation: 80 } },
-      cool: { name: "Cool Tones", filters: { hue: 200, saturation: 120, brightness: 95 } },
-      warm: { name: "Warm Tones", filters: { hue: 25, saturation: 110, brightness: 105 } },
-      vibrant: { name: "Vibrant", filters: { brightness: 105, contrast: 115, saturation: 140, hue: 5 } },
-      dramatic: { name: "Dramatic", filters: { brightness: 90, contrast: 150, saturation: 120 } },
-      soft: { name: "Soft", filters: { brightness: 110, contrast: 85, blur: 1 } }
-    };
-    this.currentPreset = "none";
-  }
-  async getTemplate() {
-    return `
-      <div class="image-filters-container d-flex flex-column h-100">
-        {{#showControls}}
-        <!-- Filter Toolbar -->
-        <div class="image-filters-toolbar bg-light border-bottom p-2">
-          <div class="btn-toolbar justify-content-center flex-wrap" role="toolbar">
-
-            {{#showPresets}}
-            <!-- Preset Effects -->
-            <div class="btn-group me-2 mb-2" role="group" aria-label="Preset effects">
-              <div class="dropdown">
-                <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle"
-                        data-bs-toggle="dropdown" aria-expanded="false" title="Preset Effects">
-                  <i class="bi bi-palette"></i> Effects
-                </button>
-                <ul class="dropdown-menu">
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="none">Original</a></li>
-                  <li><hr class="dropdown-divider"></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="blackWhite">Black & White</a></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="sepia">Sepia</a></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="vintage">Vintage</a></li>
-                  <li><hr class="dropdown-divider"></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="cool">Cool Tones</a></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="warm">Warm Tones</a></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="vibrant">Vibrant</a></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="dramatic">Dramatic</a></li>
-                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="soft">Soft</a></li>
-                </ul>
-              </div>
-            </div>
-            {{/showPresets}}
-
-            {{#showBasicControls}}
-            {{#controlsInDropdowns}}
-            <!-- Basic Controls in Dropdown -->
-            <div class="btn-group me-2 mb-2" role="group" aria-label="Basic controls">
-              <div class="dropdown">
-                <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"
-                        data-bs-toggle="dropdown" aria-expanded="false" title="Basic Adjustments">
-                  <i class="bi bi-sliders"></i> Basic
-                </button>
-                <div class="dropdown-menu p-3" style="min-width: 300px;">
-                  <div class="mb-3">
-                    <label class="form-label small fw-bold">Brightness</label>
-                    <input type="range" class="form-range"
-                           min="0" max="200" value="{{filters.brightness}}"
-                           data-change-action="filter-change" data-filter="brightness">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0%</small>
-                      <small class="text-muted filter-value" data-filter="brightness">{{filters.brightness}}%</small>
-                      <small class="text-muted">200%</small>
-                    </div>
-                  </div>
-                  <div class="mb-3">
-                    <label class="form-label small fw-bold">Contrast</label>
-                    <input type="range" class="form-range"
-                           min="0" max="200" value="{{filters.contrast}}"
-                           data-change-action="filter-change" data-filter="contrast">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0%</small>
-                      <small class="text-muted filter-value" data-filter="contrast">{{filters.contrast}}%</small>
-                      <small class="text-muted">200%</small>
-                    </div>
-                  </div>
-                  <div class="mb-0">
-                    <label class="form-label small fw-bold">Saturation</label>
-                    <input type="range" class="form-range"
-                           min="0" max="200" value="{{filters.saturation}}"
-                           data-change-action="filter-change" data-filter="saturation">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0%</small>
-                      <small class="text-muted filter-value" data-filter="saturation">{{filters.saturation}}%</small>
-                      <small class="text-muted">200%</small>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {{/controlsInDropdowns}}
-            {{/showBasicControls}}
-
-            {{#showAdvancedControls}}
-            {{#controlsInDropdowns}}
-            <!-- Advanced Controls in Dropdown -->
-            <div class="btn-group me-2 mb-2" role="group" aria-label="Advanced controls">
-              <div class="dropdown">
-                <button type="button" class="btn btn-outline-warning btn-sm dropdown-toggle"
-                        data-bs-toggle="dropdown" aria-expanded="false" title="Advanced Adjustments">
-                  <i class="bi bi-gear"></i> Advanced
-                </button>
-                <div class="dropdown-menu p-3" style="min-width: 300px;">
-                  <div class="mb-3">
-                    <label class="form-label small fw-bold">Hue</label>
-                    <input type="range" class="form-range"
-                           min="0" max="360" value="{{filters.hue}}"
-                           data-change-action="filter-change" data-filter="hue">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0°</small>
-                      <small class="text-muted filter-value" data-filter="hue">{{filters.hue}}°</small>
-                      <small class="text-muted">360°</small>
-                    </div>
-                  </div>
-                  <div class="mb-3">
-                    <label class="form-label small fw-bold">Blur</label>
-                    <input type="range" class="form-range"
-                           min="0" max="10" value="{{filters.blur}}"
-                           data-change-action="filter-change" data-filter="blur">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0px</small>
-                      <small class="text-muted filter-value" data-filter="blur">{{filters.blur}}px</small>
-                      <small class="text-muted">10px</small>
-                    </div>
-                  </div>
-                  <div class="mb-3">
-                    <label class="form-label small fw-bold">Grayscale</label>
-                    <input type="range" class="form-range"
-                           min="0" max="100" value="{{filters.grayscale}}"
-                           data-change-action="filter-change" data-filter="grayscale">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0%</small>
-                      <small class="text-muted filter-value" data-filter="grayscale">{{filters.grayscale}}%</small>
-                      <small class="text-muted">100%</small>
-                    </div>
-                  </div>
-                  <div class="mb-0">
-                    <label class="form-label small fw-bold">Sepia</label>
-                    <input type="range" class="form-range"
-                           min="0" max="100" value="{{filters.sepia}}"
-                           data-change-action="filter-change" data-filter="sepia">
-                    <div class="d-flex justify-content-between">
-                      <small class="text-muted">0%</small>
-                      <small class="text-muted filter-value" data-filter="sepia">{{filters.sepia}}%</small>
-                      <small class="text-muted">100%</small>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {{/controlsInDropdowns}}
-            {{/showAdvancedControls}}
-
-            {{#allowReset}}
-            <!-- Reset & Preview Controls -->
-            <div class="btn-group me-2 mb-2" role="group" aria-label="Reset controls">
-              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="reset-filters" title="Reset All Filters">
-                <i class="bi bi-arrow-repeat"></i> Reset
-              </button>
-              <button type="button" class="btn btn-outline-info btn-sm" data-action="preview-original" title="Preview Original"
-                      onmousedown="this.dataset.previewing='true'"
-                      onmouseup="this.dataset.previewing='false'"
-                      onmouseleave="this.dataset.previewing='false'">
-                <i class="bi bi-eye"></i> Original
-              </button>
-            </div>
-            {{/allowReset}}
-
-          </div>
-        </div>
-        {{/showControls}}
-
-        <!-- Canvas Area -->
-        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">
-          <canvas class="image-filters-canvas" data-container="canvas"></canvas>
-
-          <!-- Loading Overlay -->
-          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"
-               style="display: none; z-index: 10;">
-            <div class="spinner-border text-primary" role="status">
-              <span class="visually-hidden">Loading...</span>
-            </div>
-          </div>
-        </div>
-
-        {{#showControls}}
-        {{^controlsInDropdowns}}
-        <!-- Expanded Controls Panel (when not in dropdowns) -->
-        <div class="image-filters-controls bg-light border-top p-3" data-container="controls" style="max-height: 300px; overflow-y: auto;">
-          <div class="row g-3">
-            {{#showBasicControls}}
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Brightness</label>
-              <input type="range" class="form-range"
-                     min="0" max="200" value="{{filters.brightness}}"
-                     data-change-action="filter-change" data-filter="brightness">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0%</small>
-                <small class="text-muted filter-value" data-filter="brightness">{{filters.brightness}}%</small>
-                <small class="text-muted">200%</small>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Contrast</label>
-              <input type="range" class="form-range"
-                     min="0" max="200" value="{{filters.contrast}}"
-                     data-change-action="filter-change" data-filter="contrast">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0%</small>
-                <small class="text-muted filter-value" data-filter="contrast">{{filters.contrast}}%</small>
-                <small class="text-muted">200%</small>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Saturation</label>
-              <input type="range" class="form-range"
-                     min="0" max="200" value="{{filters.saturation}}"
-                     data-change-action="filter-change" data-filter="saturation">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0%</small>
-                <small class="text-muted filter-value" data-filter="saturation">{{filters.saturation}}%</small>
-                <small class="text-muted">200%</small>
-              </div>
-            </div>
-            {{/showBasicControls}}
-
-            {{#showAdvancedControls}}
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Hue</label>
-              <input type="range" class="form-range"
-                     min="0" max="360" value="{{filters.hue}}"
-                     data-change-action="filter-change" data-filter="hue">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0°</small>
-                <small class="text-muted filter-value" data-filter="hue">{{filters.hue}}°</small>
-                <small class="text-muted">360°</small>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Blur</label>
-              <input type="range" class="form-range"
-                     min="0" max="10" value="{{filters.blur}}"
-                     data-change-action="filter-change" data-filter="blur">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0px</small>
-                <small class="text-muted filter-value" data-filter="blur">{{filters.blur}}px</small>
-                <small class="text-muted">10px</small>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Grayscale</label>
-              <input type="range" class="form-range"
-                     min="0" max="100" value="{{filters.grayscale}}"
-                     data-change-action="filter-change" data-filter="grayscale">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0%</small>
-                <small class="text-muted filter-value" data-filter="grayscale">{{filters.grayscale}}%</small>
-                <small class="text-muted">100%</small>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-4">
-              <label class="form-label small fw-bold">Sepia</label>
-              <input type="range" class="form-range"
-                     min="0" max="100" value="{{filters.sepia}}"
-                     data-change-action="filter-change" data-filter="sepia">
-              <div class="d-flex justify-content-between">
-                <small class="text-muted">0%</small>
-                <small class="text-muted filter-value" data-filter="sepia">{{filters.sepia}}%</small>
-                <small class="text-muted">100%</small>
-              </div>
-            </div>
-            {{/showAdvancedControls}}
-          </div>
-        </div>
-        {{/controlsInDropdowns}}
-        {{/showControls}}
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    this.controlsElement = this.element.querySelector(".image-filters-controls");
-  }
-  // Override canvas sizing for container-aware dimensions
-  setupCanvas() {
-    if (!this.canvas || !this.containerElement) return;
-    this.setCanvasSize(this.canvasSize);
-    if (this.canvasSize === "fullscreen" || this.canvasSize === "auto") {
-      this._resizeHandler = () => this.setCanvasSize(this.canvasSize);
-      window.addEventListener("resize", this._resizeHandler);
-    }
-    this.context.imageSmoothingEnabled = true;
-    this.context.imageSmoothingQuality = "high";
-  }
-  // Override setCanvasSize to be more container-aware for dialogs
-  setCanvasSize(size) {
-    if (!this.canvas || !this.containerElement) return;
-    if (size === "auto") {
-      const container = this.containerElement;
-      let availableWidth = container.clientWidth - 40;
-      let availableHeight = container.clientHeight - 40;
-      if (availableWidth <= 40 || availableHeight <= 40) {
-        let parent = container.parentElement;
-        while (parent && (parent.clientWidth <= 40 || parent.clientHeight <= 40)) {
-          parent = parent.parentElement;
-          if (parent && (parent.classList.contains("modal-body") || parent.classList.contains("card-body") || parent.classList.contains("dialog-body") || parent.tagName === "MAIN" || parent.tagName === "BODY")) {
-            break;
-          }
-        }
-        if (parent) {
-          availableWidth = parent.clientWidth - 80;
-          availableHeight = parent.clientHeight - 80;
-        }
-      }
-      if (availableWidth > 100 && availableHeight > 100) {
-        let canvasWidth, canvasHeight;
-        if (this.image) {
-          const imageAspect = this.image.naturalWidth / this.image.naturalHeight;
-          const availableAspect = availableWidth / availableHeight;
-          if (imageAspect > availableAspect) {
-            canvasWidth = availableWidth;
-            canvasHeight = availableWidth / imageAspect;
-          } else {
-            canvasHeight = availableHeight;
-            canvasWidth = availableHeight * imageAspect;
-          }
-          canvasWidth = Math.max(300, Math.floor(canvasWidth));
-          canvasHeight = Math.max(200, Math.floor(canvasHeight));
-        } else {
-          canvasWidth = Math.min(600, Math.max(300, availableWidth));
-          canvasHeight = Math.min(450, Math.max(200, availableHeight));
-        }
-        this.applyCanvasSize(canvasWidth, canvasHeight);
-        return;
-      }
-    }
-    super.setCanvasSize(size);
-  }
-  // Helper method to apply calculated canvas size
-  applyCanvasSize(canvasWidth, canvasHeight) {
-    if (Math.abs(canvasWidth - this.canvasWidth) < 10 && Math.abs(canvasHeight - this.canvasHeight) < 10) {
-      return;
-    }
-    const dpr = window.devicePixelRatio || 1;
-    this.canvasWidth = canvasWidth;
-    this.canvasHeight = canvasHeight;
-    this.canvas.width = canvasWidth * dpr;
-    this.canvas.height = canvasHeight * dpr;
-    this.canvas.style.width = canvasWidth + "px";
-    this.canvas.style.height = canvasHeight + "px";
-    this.context.setTransform(dpr, 0, 0, dpr, 0, 0);
-    if (this.isLoaded) {
-      this.renderCanvas();
-    }
-  }
-  // Override image loading to re-render with current filters
-  async loadImage(imageUrl) {
-    await super.loadImage(imageUrl);
-    this.renderCanvas();
-  }
-  // Override renderImage to apply filters consistently
-  renderImage() {
-    if (!this.image) return;
-    this.context.filter = this.getFilterString();
-    const imageScale = Math.min(
-      this.canvasWidth / this.image.naturalWidth,
-      this.canvasHeight / this.image.naturalHeight
-    );
-    const scaledWidth = this.image.naturalWidth * imageScale;
-    const scaledHeight = this.image.naturalHeight * imageScale;
-    const x = (this.canvasWidth - scaledWidth) / 2;
-    const y = (this.canvasHeight - scaledHeight) / 2;
-    this.context.drawImage(this.image, x, y, scaledWidth, scaledHeight);
-    this.context.filter = "none";
-  }
-  // Get combined filter values from both sliders and current preset
-  getCombinedFilters() {
-    const combined = { ...this.filters };
-    if (this.currentPreset !== "none" && this.presetEffects[this.currentPreset]) {
-      const presetFilters = this.presetEffects[this.currentPreset].filters;
-      if (presetFilters) {
-        Object.assign(combined, presetFilters);
-      }
-    }
-    return combined;
-  }
-  getFilterString() {
-    const filters = this.getCombinedFilters();
-    if (!this.hasFilters() && this.currentPreset === "none") return "none";
-    return [
-      `brightness(${filters.brightness}%)`,
-      `contrast(${filters.contrast}%)`,
-      `saturate(${filters.saturation}%)`,
-      `hue-rotate(${filters.hue}deg)`,
-      `blur(${filters.blur}px)`,
-      `grayscale(${filters.grayscale}%)`,
-      `sepia(${filters.sepia}%)`
-    ].join(" ");
-  }
-  hasFilters() {
-    return this.filters.brightness !== 100 || this.filters.contrast !== 100 || this.filters.saturation !== 100 || this.filters.hue !== 0 || this.filters.blur !== 0 || this.filters.grayscale !== 0 || this.filters.sepia !== 0;
-  }
-  // Action Handlers
-  async onPassThruActionResetFilters() {
-    this.resetFilters();
-  }
-  async onPassThruActionApplyPreset(e, el) {
-    e.preventDefault();
-    const presetName = el.getAttribute("data-preset");
-    if (presetName && this.presetEffects[presetName]) {
-      this.applyPreset(presetName);
-    }
-  }
-  async onPassThruActionPreviewOriginal(e, el) {
-    const isPreviewing = el.dataset.previewing === "true";
-    if (isPreviewing) {
-      this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-      this.context.filter = "none";
-      const x = (this.canvasWidth - this.image.naturalWidth) / 2;
-      const y = (this.canvasHeight - this.image.naturalHeight) / 2;
-      this.context.drawImage(this.image, x, y);
-    } else {
-      this.renderCanvas();
-    }
-  }
-  // Change Handler for filter sliders
-  async onChangeFilterChange(e, el) {
-    const filterName = el.getAttribute("data-filter");
-    const value = parseFloat(el.value);
-    this.updateFilter(filterName, value);
-  }
-  // Filter methods
-  updateFilter(name, value) {
-    if (!(name in this.filters)) return;
-    const oldValue = this.filters[name];
-    this.filters[name] = value;
-    this.updateFilterDisplay(name, value);
-    this.renderCanvas();
-    this.emitFilterEvent("filter-changed", {
-      filter: name,
-      oldValue,
-      newValue: value,
-      allFilters: { ...this.filters }
-    });
-  }
-  updateFilterDisplay(name, value) {
-    const valueElement = this.element.querySelector(`[data-filter="${name}"].filter-value`);
-    if (valueElement) {
-      const unit = name === "hue" ? "°" : name === "blur" ? "px" : "%";
-      valueElement.textContent = `${value}${unit}`;
-    }
-  }
-  resetFilters() {
-    const oldFilters = { ...this.filters };
-    const oldPreset = this.currentPreset;
-    this.filters = {
-      brightness: 100,
-      contrast: 100,
-      saturation: 100,
-      hue: 0,
-      blur: 0,
-      grayscale: 0,
-      sepia: 0
-    };
-    this.currentPreset = "none";
-    this.updateAllFilterInputs();
-    this.renderCanvas();
-    this.emitFilterEvent("filters-reset", {
-      oldFilters,
-      newFilters: { ...this.filters },
-      oldPreset,
-      newPreset: this.currentPreset
-    });
-  }
-  updateAllFilterInputs() {
-    Object.keys(this.filters).forEach((filterName) => {
-      const input = this.element.querySelector(`[data-filter="${filterName}"][type="range"]`);
-      if (input) {
-        input.value = this.filters[filterName];
-        this.updateFilterDisplay(filterName, this.filters[filterName]);
-      }
-    });
-  }
-  // Enhanced preset system
-  applyPreset(presetName) {
-    if (!this.presetEffects[presetName]) return;
-    this.presetEffects[presetName];
-    this.currentPreset = presetName;
-    this.currentPreset = presetName;
-    this.renderCanvas();
-    this.emitFilterEvent("preset-applied", { preset: presetName, filters: { ...this.filters } });
-  }
-  // State management
-  getFilterState() {
-    return { ...this.filters };
-  }
-  setFilterState(filters) {
-    this.filters = { ...this.filters, ...filters };
-    this.updateAllFilterInputs();
-    this.renderCanvas();
-    this.emitFilterEvent("filters-set", { filters: { ...this.filters } });
-  }
-  // Export with filters applied
-  exportFilteredImageData() {
-    if (!this.canvas) return null;
-    return this.exportImageData();
-  }
-  async exportFilteredImageBlob(quality = 0.9) {
-    if (!this.canvas) return null;
-    return this.exportImageBlob(quality);
-  }
-  // Create a new canvas with original image + filters applied
-  createFilteredCanvas() {
-    if (!this.image) return null;
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    canvas.width = this.image.naturalWidth;
-    canvas.height = this.image.naturalHeight;
-    context.filter = this.getFilterString();
-    context.drawImage(this.image, 0, 0);
-    context.filter = "none";
-    return canvas;
-  }
-  // Event emission
-  emitFilterEvent(type, data = {}) {
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit(`imagefilters:${type}`, {
-        view: this,
-        hasFilters: this.hasFilters(),
-        filterString: this.getFilterString(),
-        ...data
-      });
-    }
-  }
-  // Override handleImageLoad to emit filter-ready event
-  handleImageLoad() {
-    super.handleImageLoad();
-    this.emitFilterEvent("ready", { filters: { ...this.filters } });
-  }
-  // Cleanup
-  async onBeforeDestroy() {
-    await super.onBeforeDestroy();
-    if (this._resizeHandler) {
-      window.removeEventListener("resize", this._resizeHandler);
-    }
-    this.emitFilterEvent("destroyed");
-  }
-  // Static method to show filters view in a dialog for standalone testing
-  static async showDialog(imageUrl, options = {}) {
-    const {
-      title = "Apply Filters",
-      alt = "Image",
-      size = "xl",
-      showControls = true,
-      allowReset = true,
-      showPresets = true,
-      showBasicControls = true,
-      showAdvancedControls = true,
-      controlsInDropdowns = true,
-      canvasSize = "auto",
-      autoFit = true,
-      crossOrigin = "anonymous",
-      ...dialogOptions
-    } = options;
-    const filtersView = new ImageFiltersView({
-      imageUrl,
-      alt,
-      title,
-      canvasSize,
-      autoFit,
-      crossOrigin,
-      showControls,
-      allowReset,
-      showPresets,
-      showBasicControls,
-      showAdvancedControls,
-      controlsInDropdowns
-    });
-    const dialog = new Dialog({
-      title,
-      body: filtersView,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      noBodyPadding: true,
-      buttons: [
-        {
-          text: "Cancel",
-          action: "cancel",
-          class: "btn btn-secondary",
-          dismiss: true
-        },
-        {
-          text: "Apply Filters",
-          action: "apply-filters",
-          class: "btn btn-primary"
-        }
-      ],
-      ...dialogOptions
-    });
-    await dialog.render(true, document.body);
-    dialog.show();
-    return new Promise((resolve) => {
-      dialog.on("hidden", () => {
-        dialog.destroy();
-        resolve({ action: "cancel", view: filtersView });
-      });
-      dialog.on("action:cancel", () => {
-        dialog.hide();
-      });
-      dialog.on("action:apply-filters", async () => {
-        const imageData = filtersView.exportFilteredImageData();
-        dialog.hide();
-        resolve({
-          action: "filters",
-          view: filtersView,
-          data: imageData,
-          filterState: filtersView.getFilterState()
-        });
-      });
-    });
-  }
-}
-window.ImageFiltersView = ImageFiltersView;
-class ImageEditor extends View {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-editor ${options.className || ""}`,
-      tagName: "div"
-    });
-    this.imageUrl = options.imageUrl || options.src || "";
-    this.alt = options.alt || "Image";
-    this.title = options.title || "";
-    this.currentImageData = null;
-    this.currentMode = options.startMode || "transform";
-    this.history = [];
-    this.historyIndex = -1;
-    this.maxHistory = options.maxHistory || 20;
-    this.showToolbar = options.showToolbar !== false;
-    this.allowTransform = options.allowTransform !== false;
-    this.allowCrop = options.allowCrop !== false;
-    this.allowFilters = options.allowFilters !== false;
-    this.allowExport = options.allowExport !== false;
-    this.allowHistory = options.allowHistory !== false;
-    this.currentView = null;
-    this.isInitialized = false;
-  }
-  async getTemplate() {
-    return `
-      <div class="image-editor-container d-flex flex-column h-100">
-        {{#showToolbar}}
-        <!-- Toolbar -->
-        <div class="image-editor-toolbar bg-light border-bottom p-3" data-container="toolbar">
-          <div class="d-flex justify-content-between align-items-center">
-            <!-- Mode Buttons -->
-            <div class="btn-group" role="group" aria-label="Editing modes">
-              {{#allowTransform}}
-              <button type="button" class="btn btn-outline-primary mode-btn"
-                      data-action="switch-mode" data-mode="transform"
-                      title="Transform: Zoom, Pan, Rotate">
-                <i class="bi bi-arrows-move"></i> Transform
-              </button>
-              {{/allowTransform}}
-
-              {{#allowCrop}}
-              <button type="button" class="btn btn-outline-primary mode-btn"
-                      data-action="switch-mode" data-mode="crop"
-                      title="Crop: Select and crop image">
-                <i class="bi bi-crop"></i> Crop
-              </button>
-              {{/allowCrop}}
-
-              {{#allowFilters}}
-              <button type="button" class="btn btn-outline-primary mode-btn"
-                      data-action="switch-mode" data-mode="filters"
-                      title="Filters: Brightness, Contrast, Effects">
-                <i class="bi bi-palette"></i> Filters
-              </button>
-              {{/allowFilters}}
-            </div>
-
-            <!-- Action Buttons -->
-            <div class="btn-group" role="group" aria-label="Actions">
-              {{#allowHistory}}
-              <button type="button" class="btn btn-outline-secondary btn-sm"
-                      data-action="undo" title="Undo" disabled>
-                <i class="bi bi-arrow-counterclockwise"></i>
-              </button>
-              <button type="button" class="btn btn-outline-secondary btn-sm"
-                      data-action="redo" title="Redo" disabled>
-                <i class="bi bi-arrow-clockwise"></i>
-              </button>
-              {{/allowHistory}}
-
-              <button type="button" class="btn btn-outline-secondary btn-sm"
-                      data-action="reset" title="Reset All Changes">
-                <i class="bi bi-arrow-repeat"></i>
-              </button>
-
-              {{#allowExport}}
-              <button type="button" class="btn btn-success btn-sm"
-                      data-action="export" title="Export Image">
-                <i class="bi bi-download"></i> Export
-              </button>
-              {{/allowExport}}
-            </div>
-          </div>
-
-
-        </div>
-        {{/showToolbar}}
-
-        <!-- Main editing area where child views will be mounted -->
-        <div class="image-editor-workspace flex-grow-1 position-relative" data-container="image-workspace">
-          <!-- Child views will be added here dynamically -->
-        </div>
-
-        <!-- Status bar -->
-        <div class="image-editor-status bg-light border-top p-2" data-container="status">
-          <div class="d-flex justify-content-between align-items-center">
-            <small class="text-muted">
-              Mode: <span class="current-mode fw-bold">Transform</span>
-            </small>
-            <small class="text-muted">
-              <span class="image-info">Ready</span>
-            </small>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    this.toolbarElement = this.element.querySelector(".image-editor-toolbar");
-    this.workspaceElement = this.element.querySelector(".image-editor-workspace");
-    this.statusElement = this.element.querySelector(".image-editor-status");
-    this.setupChildViewEvents();
-    await this.switchMode(this.currentMode, true);
-    this.saveState();
-    this.isInitialized = true;
-  }
-  createChildView(mode) {
-    const imageToUse = this.currentImageData || this.imageUrl;
-    console.log(
-      "[ImageEditor] Creating",
-      mode,
-      "view with:",
-      this.currentImageData ? "preserved canvas data" : "original image"
-    );
-    const childOptions = {
-      parent: this,
-      containerId: "image-workspace",
-      imageUrl: imageToUse,
-      alt: this.alt,
-      title: this.title
-    };
-    switch (mode) {
-      case "transform":
-        if (!this.allowTransform) return null;
-        return new ImageTransformView({
-          ...childOptions,
-          allowPan: true,
-          allowZoom: true,
-          allowRotate: true
-        });
-      case "crop":
-        if (!this.allowCrop) return null;
-        return new ImageCropView({
-          ...childOptions,
-          showGrid: true,
-          minCropSize: 50
-        });
-      case "filters":
-        if (!this.allowFilters) return null;
-        return new ImageFiltersView({
-          ...childOptions,
-          showControls: true,
-          allowReset: true
-        });
-      default:
-        return null;
-    }
-  }
-  setupChildViewEvents() {
-    const eventBus = this.getApp()?.events;
-    if (!eventBus) return;
-    eventBus.on("imagetransform:scale-changed", () => this.saveState());
-    eventBus.on("imagetransform:rotated", () => this.saveState());
-    eventBus.on("imagetransform:reset", () => this.saveState());
-    eventBus.on("imagecrop:crop-applied", (data) => {
-      const imageData = this.getCurrentImageData();
-      if (imageData) {
-        console.log("[ImageEditor] Crop applied - updating preserved canvas data");
-        this.currentImageData = imageData;
-      }
-      this.saveState();
-      this.updateStatus("Crop applied successfully");
-      this.updateHistoryButtons();
-    });
-    eventBus.on("imagefilters:filter-changed", () => {
-      this.saveState();
-      this.updateStatus("Filter applied");
-    });
-    eventBus.on("imagefilters:filters-reset", () => {
-      this.saveState();
-      this.updateStatus("Filters reset");
-    });
-  }
-  // Action handlers
-  async handleActionSwitchMode(e, el) {
-    const mode = el.getAttribute("data-mode");
-    await this.switchMode(mode);
-  }
-  async handleActionUndo() {
-    this.undo();
-  }
-  async handleActionRedo() {
-    this.redo();
-  }
-  async handleActionReset() {
-    await this.resetAll();
-  }
-  async handleActionExport() {
-    const result = await this.exportImage();
-    if (result) {
-      this.updateStatus("Image exported successfully");
-    }
-  }
-  // Mode management
-  async switchMode(mode, force = false) {
-    if (mode === this.currentMode && !force) return;
-    if (this.currentView && !force) {
-      const imageData = this.getCurrentImageData();
-      if (imageData) {
-        console.log("[ImageEditor] Preserving canvas state from", this.currentMode, "mode");
-        this.currentImageData = imageData;
-      } else {
-        console.log("[ImageEditor] No canvas data to preserve from", this.currentMode, "mode");
-      }
-    } else if (force) {
-      console.log("[ImageEditor] Force mode switch - not preserving canvas state");
-    }
-    if (this.currentView) {
-      await this.currentView.destroy();
-      this.currentView = null;
-    }
-    const modeButtons = this.element.querySelectorAll(".mode-btn");
-    modeButtons.forEach((btn) => {
-      btn.classList.remove("active");
-      if (btn.getAttribute("data-mode") === mode) {
-        btn.classList.add("active");
-      }
-    });
-    this.currentMode = mode;
-    this.currentView = this.createChildView(mode);
-    if (this.currentView) {
-      await this.currentView.render();
-      if (mode === "crop" && this.currentView.startCropMode) {
-        this.currentView.startCropMode();
-        this.updateStatus("Click and drag to select crop area");
-      } else if (mode === "transform") {
-        this.updateStatus("Use controls to transform the image");
-      } else if (mode === "filters") {
-        this.updateStatus("Adjust filters to enhance the image");
-      }
-    }
-    this.updateCurrentModeDisplay();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageeditor:mode-changed", {
-        editor: this,
-        mode,
-        currentView: this.currentView
-      });
-    }
-  }
-  updateCurrentModeDisplay() {
-    const modeDisplay = this.element.querySelector(".current-mode");
-    if (modeDisplay) {
-      modeDisplay.textContent = this.currentMode.charAt(0).toUpperCase() + this.currentMode.slice(1);
-    }
-  }
-  updateStatus(message) {
-    const infoDisplay = this.element.querySelector(".image-info");
-    if (infoDisplay) {
-      infoDisplay.textContent = message;
-    }
-  }
-  // History management
-  saveState() {
-    if (!this.isInitialized) return;
-    const state = {
-      mode: this.currentMode,
-      transform: this.currentView?.getTransformState?.(),
-      filters: this.currentView?.getFilterState?.(),
-      imageData: this.currentImageData,
-      timestamp: Date.now()
-    };
-    this.history = this.history.slice(0, this.historyIndex + 1);
-    this.history.push(state);
-    this.historyIndex = this.history.length - 1;
-    if (this.history.length > this.maxHistory) {
-      this.history.shift();
-      this.historyIndex--;
-    }
-    this.updateHistoryButtons();
-  }
-  undo() {
-    if (this.historyIndex > 0) {
-      this.historyIndex--;
-      this.restoreState(this.history[this.historyIndex]);
-    }
-  }
-  redo() {
-    if (this.historyIndex < this.history.length - 1) {
-      this.historyIndex++;
-      this.restoreState(this.history[this.historyIndex]);
-    }
-  }
-  async restoreState(state) {
-    if (state.imageData) {
-      console.log("[ImageEditor] Restoring preserved canvas data from history");
-      this.currentImageData = state.imageData;
-    }
-    await this.switchMode(state.mode, true);
-    if (this.currentView) {
-      if (state.transform && this.currentView.setTransformState) {
-        this.currentView.setTransformState(state.transform);
-      }
-      if (state.filters && this.currentView.setFilterState) {
-        this.currentView.setFilterState(state.filters);
-      }
-    }
-    this.updateHistoryButtons();
-    this.updateStatus(`Restored to ${state.mode} mode`);
-  }
-  updateHistoryButtons() {
-    const undoBtn = this.element.querySelector('[data-action="undo"]');
-    const redoBtn = this.element.querySelector('[data-action="redo"]');
-    if (undoBtn) undoBtn.disabled = this.historyIndex <= 0;
-    if (redoBtn) redoBtn.disabled = this.historyIndex >= this.history.length - 1;
-  }
-  async resetAll() {
-    console.log("[ImageEditor] Resetting - clearing preserved canvas data");
-    this.currentImageData = null;
-    if (this.currentView && this.currentView.reset) {
-      this.currentView.reset();
-    }
-    await this.switchMode("transform", true);
-    this.history = [];
-    this.historyIndex = -1;
-    this.saveState();
-    this.updateStatus("All changes reset");
-  }
-  // Export functionality
-  async exportImage() {
-    if (!this.currentView) return null;
-    try {
-      let imageData = null;
-      imageData = this.getCurrentImageData();
-      if (imageData) {
-        const link = document.createElement("a");
-        link.download = this.getExportFilename();
-        link.href = imageData;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        const eventBus = this.getApp()?.events;
-        if (eventBus) {
-          eventBus.emit("imageeditor:exported", {
-            editor: this,
-            imageData,
-            filename: link.download
-          });
-        }
-        return { imageData, filename: link.download };
-      }
-    } catch (error) {
-      console.error("Export failed:", error);
-      this.updateStatus("Export failed");
-    }
-    return null;
-  }
-  getExportFilename() {
-    const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[:\-]/g, "");
-    return `edited-image-${timestamp}.png`;
-  }
-  // Public API
-  async setImage(imageUrl, alt = "", title = "") {
-    console.log("[ImageEditor] Setting new image - clearing preserved canvas data");
-    this.imageUrl = imageUrl;
-    this.alt = alt;
-    this.title = title;
-    this.currentImageData = null;
-    if (this.currentView && this.currentView.setImage) {
-      this.currentView.setImage(imageUrl, alt, title);
-    }
-    await this.resetAll();
-  }
-  getCurrentImageData() {
-    if (!this.currentView) return null;
-    let imageData = null;
-    if (this.currentView.exportImageData) {
-      imageData = this.currentView.exportImageData();
-    } else if (this.currentView.exportFilteredImageData) {
-      imageData = this.currentView.exportFilteredImageData();
-    }
-    return imageData || null;
-  }
-  // Cleanup
-  async onBeforeDestroy() {
-    if (this.currentView) {
-      await this.currentView.destroy();
-      this.currentView = null;
-    }
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("imageeditor:destroyed", { editor: this });
-    }
-  }
-  // Static method to show editor in a fullscreen dialog
-  static async showDialog(imageUrl, options = {}) {
-    const {
-      title = "Image Editor",
-      alt = "Image",
-      size = "fullscreen",
-      showToolbar = true,
-      allowTransform = true,
-      allowCrop = true,
-      allowFilters = true,
-      allowExport = true,
-      ...dialogOptions
-    } = options;
-    const editor = new ImageEditor({
-      imageUrl,
-      alt,
-      title,
-      showToolbar,
-      allowTransform,
-      allowCrop,
-      allowFilters,
-      allowExport
-    });
-    const dialog = new Dialog({
-      title,
-      body: editor,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      buttons: [
-        {
-          text: "Cancel",
-          action: "cancel",
-          class: "btn btn-secondary",
-          dismiss: true
-        },
-        {
-          text: "Export & Close",
-          action: "export-close",
-          class: "btn btn-primary"
-        }
-      ],
-      ...dialogOptions
-    });
-    await dialog.render(true, document.body);
-    window.lastDialog = dialog;
-    dialog.show();
-    return new Promise((resolve) => {
-      dialog.on("hidden", () => {
-        dialog.destroy();
-        resolve({ action: "cancel", editor });
-      });
-      dialog.on("action:cancel", () => {
-        dialog.hide();
-      });
-      dialog.on("action:export-close", async () => {
-        const result = await editor.exportImage();
-        dialog.hide();
-        resolve({
-          action: "export",
-          editor,
-          data: result?.imageData,
-          filename: result?.filename
-        });
-      });
-    });
-  }
-}
-window.ImageEditor = ImageEditor;
-class ImageUploadView extends View {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `image-upload-view ${options.className || ""}`,
-      tagName: "div"
-    });
-    this.autoUpload = options.autoUpload || false;
-    this.acceptedTypes = options.acceptedTypes || ["image/jpeg", "image/png", "image/gif", "image/webp"];
-    this.maxFileSize = options.maxFileSize || 10 * 1024 * 1024;
-    this.uploadUrl = options.uploadUrl || null;
-    this.onUpload = options.onUpload || null;
-    this.selectedFile = null;
-    this.isUploading = false;
-    this.previewUrl = null;
-    this._handleDragOver = this.handleDragOver.bind(this);
-    this._handleDragLeave = this.handleDragLeave.bind(this);
-    this._handleDrop = this.handleDrop.bind(this);
-    this._handleFileSelect = this.handleFileSelect.bind(this);
-    this._preventDefaults = this.preventDefaults.bind(this);
-  }
-  async getTemplate() {
-    return `
-      <div class="image-upload-container">
-        <!-- Drop Zone -->
-        <div class="upload-drop-zone border-2 border-dashed rounded p-4 text-center position-relative" 
-             style="border-color: #dee2e6; min-height: 200px; transition: all 0.2s ease;">
-          
-          <!-- Default State -->
-          <div class="upload-prompt">
-            <i class="bi bi-cloud-upload text-muted" style="font-size: 3rem;"></i>
-            <h5 class="mt-3 text-muted">Drop your image here</h5>
-            <p class="text-muted mb-3">or</p>
-            <button type="button" class="btn btn-outline-primary" data-action="select-file">
-              <i class="bi bi-folder2-open"></i> Choose File
-            </button>
-            <input type="file" class="upload-file-input d-none" accept="image/*" multiple="false">
-            <div class="mt-3">
-              <small class="text-muted">Supported: JPEG, PNG, GIF, WebP (max ${Math.round(this.maxFileSize / 1024 / 1024)}MB)</small>
-            </div>
-          </div>
-          
-          <!-- Preview State -->
-          <div class="upload-preview d-none">
-            <div class="preview-image-container mb-3">
-              <img class="preview-image img-fluid rounded shadow-sm" style="max-height: 300px; max-width: 100%;">
-            </div>
-            <div class="preview-info">
-              <div class="file-name fw-bold mb-2 text-truncate"></div>
-              <div class="file-details text-muted small mb-3"></div>
-              <div class="upload-actions">
-                {{#autoUpload}}
-                <button type="button" class="btn btn-outline-secondary" data-action="clear">
-                  <i class="bi bi-x"></i> Clear
-                </button>
-                {{/autoUpload}}
-                {{^autoUpload}}
-                <button type="button" class="btn btn-success me-2" data-action="upload">
-                  <i class="bi bi-cloud-arrow-up"></i> Upload
-                </button>
-                <button type="button" class="btn btn-outline-secondary" data-action="clear">
-                  <i class="bi bi-x"></i> Clear
-                </button>
-                {{/autoUpload}}
-              </div>
-            </div>
-          </div>
-          
-          <!-- Loading State -->
-          <div class="upload-loading d-none">
-            <div class="spinner-border text-primary mb-3" role="status">
-              <span class="visually-hidden">Uploading...</span>
-            </div>
-            <div class="upload-progress">
-              <div class="progress mb-2" style="height: 8px;">
-                <div class="progress-bar progress-bar-striped progress-bar-animated" 
-                     role="progressbar" style="width: 0%"></div>
-              </div>
-              <small class="text-muted upload-status">Uploading...</small>
-            </div>
-          </div>
-        </div>
-        
-        <!-- Upload Result -->
-        <div class="upload-result mt-3 d-none">
-          <div class="alert" role="alert"></div>
-        </div>
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    this.dropZone = this.element.querySelector(".upload-drop-zone");
-    this.fileInput = this.element.querySelector(".upload-file-input");
-    this.promptElement = this.element.querySelector(".upload-prompt");
-    this.previewElement = this.element.querySelector(".upload-preview");
-    this.loadingElement = this.element.querySelector(".upload-loading");
-    this.resultElement = this.element.querySelector(".upload-result");
-    this.previewImage = this.element.querySelector(".preview-image");
-    this.fileName = this.element.querySelector(".file-name");
-    this.fileDetails = this.element.querySelector(".file-details");
-    this.progressBar = this.element.querySelector(".progress-bar");
-    this.uploadStatus = this.element.querySelector(".upload-status");
-    this.setupEventListeners();
-  }
-  setupEventListeners() {
-    this.dropZone.addEventListener("dragenter", this._preventDefaults);
-    this.dropZone.addEventListener("dragover", this._handleDragOver);
-    this.dropZone.addEventListener("dragleave", this._handleDragLeave);
-    this.dropZone.addEventListener("drop", this._handleDrop);
-    this.fileInput.addEventListener("change", this._handleFileSelect);
-    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
-      document.addEventListener(eventName, this._preventDefaults);
-    });
-  }
-  preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  handleDragOver(e) {
-    this.preventDefaults(e);
-    this.dropZone.classList.add("border-primary", "bg-light");
-    this.dropZone.style.borderColor = "#0d6efd";
-  }
-  handleDragLeave(e) {
-    this.preventDefaults(e);
-    if (!this.dropZone.contains(e.relatedTarget)) {
-      this.dropZone.classList.remove("border-primary", "bg-light");
-      this.dropZone.style.borderColor = "#dee2e6";
-    }
-  }
-  async handleDrop(e) {
-    this.preventDefaults(e);
-    this.dropZone.classList.remove("border-primary", "bg-light");
-    this.dropZone.style.borderColor = "#dee2e6";
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length > 0) {
-      await this.processFile(files[0]);
-    }
-  }
-  async handleFileSelect(e) {
-    const files = Array.from(e.target.files);
-    if (files.length > 0) {
-      await this.processFile(files[0]);
-    }
-  }
-  async processFile(file) {
-    const validation = this.validateFile(file);
-    if (!validation.valid) {
-      this.showError(validation.error);
-      return;
-    }
-    this.selectedFile = file;
-    await this.showPreview(file);
-    if (this.autoUpload) {
-      setTimeout(() => this.uploadFile(), 100);
-    }
-  }
-  validateFile(file) {
-    if (!this.acceptedTypes.includes(file.type)) {
-      return {
-        valid: false,
-        error: `File type "${file.type}" is not supported. Please use: ${this.acceptedTypes.map((t) => t.split("/")[1].toUpperCase()).join(", ")}`
-      };
-    }
-    if (file.size > this.maxFileSize) {
-      return {
-        valid: false,
-        error: `File size (${this.formatFileSize(file.size)}) exceeds maximum allowed size (${this.formatFileSize(this.maxFileSize)})`
-      };
-    }
-    return { valid: true };
-  }
-  async showPreview(file) {
-    if (this.previewUrl) {
-      URL.revokeObjectURL(this.previewUrl);
-    }
-    this.previewUrl = URL.createObjectURL(file);
-    this.previewImage.src = this.previewUrl;
-    this.fileName.textContent = file.name;
-    this.fileDetails.textContent = `${this.formatFileSize(file.size)} • ${file.type.split("/")[1].toUpperCase()}`;
-    this.promptElement.classList.add("d-none");
-    this.previewElement.classList.remove("d-none");
-    this.hideResult();
-    this.emitUploadEvent("preview", { file, previewUrl: this.previewUrl });
-  }
-  async uploadFile() {
-    if (!this.selectedFile || this.isUploading) return;
-    this.isUploading = true;
-    this.showLoading();
-    try {
-      let result;
-      if (this.onUpload && typeof this.onUpload === "function") {
-        result = await this.onUpload(this.selectedFile, this.updateProgress.bind(this));
-      } else if (this.uploadUrl) {
-        result = await this.uploadToUrl(this.selectedFile);
-      } else {
-        throw new Error("No upload method configured. Provide either uploadUrl or onUpload callback.");
-      }
-      this.showSuccess("File uploaded successfully!");
-      this.emitUploadEvent("upload-success", { file: this.selectedFile, result });
-    } catch (error) {
-      console.error("Upload failed:", error);
-      this.showError(`Upload failed: ${error.message}`);
-      this.emitUploadEvent("upload-error", { file: this.selectedFile, error });
-    } finally {
-      this.isUploading = false;
-      this.hideLoading();
-    }
-  }
-  async uploadToUrl(file) {
-    return new Promise((resolve, reject) => {
-      const formData = new FormData();
-      formData.append("image", file);
-      const xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener("progress", (e) => {
-        if (e.lengthComputable) {
-          const progress = Math.round(e.loaded / e.total * 100);
-          this.updateProgress(progress);
-        }
-      });
-      xhr.addEventListener("load", () => {
-        if (xhr.status >= 200 && xhr.status < 300) {
-          try {
-            const response = JSON.parse(xhr.responseText);
-            resolve(response);
-          } catch (e) {
-            resolve({ success: true, response: xhr.responseText });
-          }
-        } else {
-          reject(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
-        }
-      });
-      xhr.addEventListener("error", () => {
-        reject(new Error("Network error occurred"));
-      });
-      xhr.addEventListener("timeout", () => {
-        reject(new Error("Upload timeout"));
-      });
-      xhr.open("POST", this.uploadUrl);
-      xhr.timeout = 3e4;
-      xhr.send(formData);
-    });
-  }
-  updateProgress(percent) {
-    if (this.progressBar) {
-      this.progressBar.style.width = `${percent}%`;
-      this.progressBar.setAttribute("aria-valuenow", percent);
-    }
-    if (this.uploadStatus) {
-      this.uploadStatus.textContent = `Uploading... ${percent}%`;
-    }
-  }
-  showLoading() {
-    this.previewElement.classList.add("d-none");
-    this.loadingElement.classList.remove("d-none");
-    this.updateProgress(0);
-  }
-  hideLoading() {
-    this.loadingElement.classList.add("d-none");
-    if (!this.autoUpload || this.selectedFile) {
-      this.previewElement.classList.remove("d-none");
-    }
-  }
-  showSuccess(message) {
-    this.showResult("success", message);
-  }
-  showError(message) {
-    this.showResult("danger", message);
-  }
-  showResult(type, message) {
-    const alertElement = this.resultElement.querySelector(".alert");
-    const icon = type === "success" ? "check-circle-fill" : "exclamation-triangle-fill";
-    alertElement.className = `alert alert-${type}`;
-    alertElement.innerHTML = `
-      <i class="bi bi-${icon} me-2"></i>
-      ${message}
-    `;
-    this.resultElement.classList.remove("d-none");
-    if (type === "success") {
-      setTimeout(() => this.hideResult(), 5e3);
-    }
-  }
-  hideResult() {
-    this.resultElement.classList.add("d-none");
-  }
-  clearFile() {
-    if (this.previewUrl) {
-      URL.revokeObjectURL(this.previewUrl);
-      this.previewUrl = null;
-    }
-    this.selectedFile = null;
-    this.isUploading = false;
-    this.fileInput.value = "";
-    this.previewElement.classList.add("d-none");
-    this.loadingElement.classList.add("d-none");
-    this.promptElement.classList.remove("d-none");
-    this.hideResult();
-    this.emitUploadEvent("cleared");
-  }
-  formatFileSize(bytes) {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-  }
-  emitUploadEvent(type, data = {}) {
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit(`imageupload:${type}`, {
-        view: this,
-        ...data
-      });
-    }
-  }
-  // Action handlers
-  async handleActionSelectFile() {
-    this.fileInput.click();
-  }
-  async handleActionUpload() {
-    await this.uploadFile();
-  }
-  async handleActionClear() {
-    this.clearFile();
-  }
-  // Cleanup
-  async onBeforeDestroy() {
-    if (this.previewUrl) {
-      URL.revokeObjectURL(this.previewUrl);
-      this.previewUrl = null;
-    }
-    if (this.dropZone) {
-      this.dropZone.removeEventListener("dragenter", this._preventDefaults);
-      this.dropZone.removeEventListener("dragover", this._handleDragOver);
-      this.dropZone.removeEventListener("dragleave", this._handleDragLeave);
-      this.dropZone.removeEventListener("drop", this._handleDrop);
-    }
-    if (this.fileInput) {
-      this.fileInput.removeEventListener("change", this._handleFileSelect);
-    }
-    ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
-      document.removeEventListener(eventName, this._preventDefaults);
-    });
-    this.emitUploadEvent("destroyed");
-  }
-}
-window.ImageUploadView = ImageUploadView;
-export {
-  B as BUILD_TIME,
-  ImageCanvasView,
-  ImageCropView,
-  ImageEditor,
-  ImageFiltersView,
-  ImageTransformView,
-  ImageUploadView,
-  ImageViewer,
-  L as LightboxGallery,
-  P as PDFViewer,
-  a as VERSION,
-  V as VERSION_INFO,
-  b as VERSION_MAJOR,
-  c as VERSION_MINOR,
-  d as VERSION_REVISION,
-  W as WebApp
-};
+import{V as t}from"./chunks/Rest-DHbszkuP.js";import e from"./chunks/Dialog-BcgSR01Z.js";import{L as i,P as a}from"./chunks/PDFViewer-CsyKn-gh.js";import{W as s}from"./chunks/WebApp-CULZpO_0.js";import{B as n,V as o,a as r,b as l,c as h,d as c}from"./chunks/version-C3dnl1bg.js";class ImageViewer extends t{constructor(t={}){super({...t,className:`image-viewer ${t.className||""}`,tagName:"div"}),this.imageUrl=t.imageUrl||t.src||"",this.alt=t.alt||"Image",this.title=t.title||"",this.canvas=null,this.context=null,this.image=null,this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.minScale=.1,this.maxScale=5,this.scaleStep=.1,this.isDragging=!1,this.lastPointerX=0,this.lastPointerY=0,this.isLoaded=!1,this.showControls=!1!==t.showControls,this.allowRotate=!1!==t.allowRotate,this.allowZoom=!1!==t.allowZoom,this.allowPan=!1!==t.allowPan,this.allowDownload=!1!==t.allowDownload,this.autoFit=!1!==t.autoFit,this.containerElement=null,this.controlsElement=null}async getTemplate(){return'\n      <div class="image-viewer-container d-flex flex-column h-100" data-container="imageContainer">\n        <div class="image-viewer-content flex-grow-1 position-relative">\n          <canvas class="image-viewer-canvas w-100 h-100" data-container="canvas"></canvas>\n          <div class="image-viewer-overlay">\n            <div class="image-viewer-loading">\n              <div class="spinner-border text-light" role="status">\n                <span class="visually-hidden">Loading...</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {{#showControls}}\n        <div class="image-viewer-controls position-absolute top-0 start-50 translate-middle-x mt-3" data-container="controls" style="z-index: 10;">\n          <div class="btn-group" role="group">\n            {{#allowZoom}}\n            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-in" title="Zoom In">\n              <i class="bi bi-zoom-in"></i>\n            </button>\n            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-out" title="Zoom Out">\n              <i class="bi bi-zoom-out"></i>\n            </button>\n            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-fit" title="Fit to Screen">\n              <i class="bi bi-arrows-fullscreen"></i>\n            </button>\n            <button type="button" class="btn btn-dark btn-sm" data-action="zoom-actual" title="Actual Size">\n              <i class="bi bi-1-square"></i>\n            </button>\n            {{/allowZoom}}\n\n            {{#allowRotate}}\n            <button type="button" class="btn btn-dark btn-sm" data-action="rotate-left" title="Rotate Left">\n              <i class="bi bi-arrow-counterclockwise"></i>\n            </button>\n            <button type="button" class="btn btn-dark btn-sm" data-action="rotate-right" title="Rotate Right">\n              <i class="bi bi-arrow-clockwise"></i>\n            </button>\n            {{/allowRotate}}\n\n            <button type="button" class="btn btn-dark btn-sm" data-action="reset" title="Reset View">\n              <i class="bi bi-arrow-repeat"></i>\n            </button>\n\n            {{#allowDownload}}\n            <button type="button" class="btn btn-dark btn-sm" data-action="download" title="Download Image">\n              <i class="bi bi-download"></i>\n            </button>\n            {{/allowDownload}}\n          </div>\n\n          <div class="image-viewer-info">\n            <span class="zoom-level">{{scale}}%</span>\n          </div>\n        </div>\n        {{/showControls}}\n      </div>\n    '}async onAfterRender(){this.canvas=this.element.querySelector(".image-viewer-canvas"),this.context=this.canvas.getContext("2d"),this.containerElement=this.element.querySelector(".image-viewer-content"),this.controlsElement=this.element.querySelector(".image-viewer-controls"),this.setupCanvas(),this.setupEventListeners(),this.imageUrl&&this.loadImage(this.imageUrl)}setupCanvas(){this.canvas&&this.containerElement&&(this.context&&(this.context.imageSmoothingEnabled=!0,this.context.imageSmoothingQuality="high"),setTimeout(()=>{this.resizeCanvas(),this.isLoaded&&this.image&&this.renderCanvas()},2e3))}resizeCanvas(){if(!this.canvas)return;const t=window.innerWidth,e=window.innerHeight,i=Math.floor(.8*t),a=Math.floor(.8*e);if(i===this.canvasWidth&&a===this.canvasHeight)return;const s=window.devicePixelRatio||1;this.canvasWidth=i,this.canvasHeight=a,this.canvas.width=i*s,this.canvas.height=a*s,this.canvas.style.width=i+"px",this.canvas.style.height=a+"px",this.context.setTransform(s,0,0,s,0,0),this.isLoaded&&this.image&&this.renderCanvas()}setupEventListeners(){this.canvas&&(this.allowPan&&(this.canvas.addEventListener("mousedown",t=>this.handleMouseDown(t)),document.addEventListener("mousemove",t=>this.handleMouseMove(t)),document.addEventListener("mouseup",t=>this.handleMouseUp(t))),this.allowZoom&&this.canvas.addEventListener("wheel",t=>this.handleWheel(t),{passive:!1}),this.canvas.addEventListener("touchstart",t=>this.handleTouchStart(t),{passive:!1}),this.canvas.addEventListener("touchmove",t=>this.handleTouchMove(t),{passive:!1}),this.canvas.addEventListener("touchend",t=>this.handleTouchEnd(t)),this.canvas.addEventListener("contextmenu",t=>t.preventDefault()))}async handleActionZoomIn(){this.zoomIn()}async handleActionZoomOut(){this.zoomOut()}async handleActionZoomFit(){this.fitToContainer()}async handleActionZoomActual(){this.setScale(1),this.renderCanvas()}async handleActionRotateLeft(){this.rotate(-90)}async handleActionRotateRight(){this.rotate(90)}async handleActionReset(){this.reset()}async handleActionDownload(){this.downloadImage()}loadImage(t){this.isLoaded=!1,this.element.classList.remove("loaded");const e=new Image;e.crossOrigin="anonymous",e.onload=()=>{this.image=e,this.handleImageLoad()},e.onerror=()=>{this.handleImageError()},e.src=t}handleImageLoad(){this.isLoaded=!0,this.element.classList.add("loaded");const t=()=>{this.canvasWidth&&this.canvasHeight||this.resizeCanvas(),this.autoFit?this.fitToContainer():this.smartFit(),this.renderCanvas(),this.updateControls()};this.canvasWidth&&this.canvasHeight?requestAnimationFrame(t):setTimeout(t,2e3);const e=this.getApp()?.events;e&&e.emit("imageviewer:loaded",{viewer:this,imageUrl:this.imageUrl,naturalWidth:this.image.naturalWidth,naturalHeight:this.image.naturalHeight})}handleImageError(){console.error("Failed to load image:",this.imageUrl);const t=this.getApp()?.events;t&&t.emit("imageviewer:error",{viewer:this,imageUrl:this.imageUrl,error:"Failed to load image"})}handleMouseDown(t){if(!this.allowPan||0!==t.button)return;t.preventDefault(),this.isDragging=!0;const e=this.canvas.getBoundingClientRect();this.lastPointerX=t.clientX-e.left,this.lastPointerY=t.clientY-e.top,this.canvas.style.cursor="grabbing"}handleMouseMove(t){if(!this.isDragging||!this.allowPan)return;t.preventDefault();const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top,s=i-this.lastPointerX,n=a-this.lastPointerY;this.pan(s,n),this.lastPointerX=i,this.lastPointerY=a}handleMouseUp(t){this.isDragging&&(this.isDragging=!1,this.canvas.style.cursor=this.allowPan?"grab":"default")}handleWheel(t){if(!this.allowZoom)return;t.preventDefault();const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top,s=t.deltaY>0?.5*-this.scaleStep:.5*this.scaleStep;this.zoomAtPoint(this.scale+s,i,a)}handleTouchStart(t){if(1===t.touches.length&&this.allowPan){t.preventDefault();const e=t.touches[0],i=this.canvas.getBoundingClientRect();this.isDragging=!0,this.lastPointerX=e.clientX-i.left,this.lastPointerY=e.clientY-i.top}}handleTouchMove(t){if(1===t.touches.length&&this.isDragging&&this.allowPan){t.preventDefault();const e=t.touches[0],i=this.canvas.getBoundingClientRect(),a=e.clientX-i.left,s=e.clientY-i.top,n=a-this.lastPointerX,o=s-this.lastPointerY;this.pan(n,o),this.lastPointerX=a,this.lastPointerY=s}}handleTouchEnd(t){this.isDragging=!1}zoomIn(){this.setScale(this.scale+this.scaleStep)}zoomOut(){this.setScale(this.scale-this.scaleStep)}setScale(t){const e=this.scale;this.scale=Math.max(this.minScale,Math.min(this.maxScale,t)),this.renderCanvas(),this.updateControls();const i=this.getApp()?.events;i&&e!==this.scale&&i.emit("imageviewer:scale-changed",{viewer:this,oldScale:e,newScale:this.scale})}zoomAtPoint(t,e,i){if(!this.image)return;const a=this.scale;if(this.setScale(t),a!==this.scale){const t=this.scale/a,s=this.canvasWidth/2,n=this.canvasHeight/2;this.translateX=(this.translateX-(e-s))*t+(e-s),this.translateY=(this.translateY-(i-n))*t+(i-n),this.renderCanvas()}}pan(t,e){this.translateX+=t,this.translateY+=e,this.renderCanvas()}rotate(t){const e=this.rotation;this.rotation=(this.rotation+t)%360,this.rotation<0&&(this.rotation+=360),this.renderCanvas();const i=this.getApp()?.events;i&&i.emit("imageviewer:rotated",{viewer:this,oldRotation:e,newRotation:this.rotation,degrees:t})}center(){this.translateX=0,this.translateY=0,this.renderCanvas()}fitToContainer(){if(!this.image||!this.canvasWidth||!this.canvasHeight)return;const t=this.canvasWidth-40,e=this.canvasHeight-40,i=t/this.image.naturalWidth,a=e/this.image.naturalHeight,s=Math.min(i,a,1);this.setScale(s),this.renderCanvas()}smartFit(){if(!this.image||!this.canvasWidth||!this.canvasHeight)return;const t=(this.canvasWidth-80)/this.image.naturalWidth,e=(this.canvasHeight-80)/this.image.naturalHeight,i=Math.min(t,e);i<1&&this.setScale(i),this.renderCanvas()}reset(){this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.renderCanvas(),this.updateControls()}renderCanvas(){this.context&&this.canvasWidth&&this.canvasHeight&&(this.context.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.image&&this.isLoaded&&(this.context.save(),this.context.translate(this.canvasWidth/2+this.translateX,this.canvasHeight/2+this.translateY),this.context.scale(this.scale,this.scale),this.context.rotate(this.rotation*Math.PI/180),this.context.drawImage(this.image,-this.image.naturalWidth/2,-this.image.naturalHeight/2),this.context.restore()))}downloadImage(){if(this.canvas)try{const t=document.createElement("a");t.download=this.getDownloadFilename(),t.href=this.canvas.toDataURL("image/png"),document.body.appendChild(t),t.click(),document.body.removeChild(t);const e=this.getApp()?.events;e&&e.emit("imageviewer:downloaded",{viewer:this,filename:t.download})}catch(t){console.error("Failed to download image:",t);const e=this.getApp()?.events;e&&e.emit("imageviewer:download-error",{viewer:this,error:t.message})}}getDownloadFilename(){if(this.title)return`${this.title.replace(/[^a-z0-9]/gi,"_").toLowerCase()}.png`;try{const t=new URL(this.imageUrl).pathname.split("/").pop();if(t&&t.includes("."))return t.replace(/\.[^.]+$/,".png")}catch(t){}return"image.png"}updateControls(){if(!this.controlsElement)return;const t=this.controlsElement.querySelector(".zoom-level");t&&(t.textContent=`${Math.round(100*this.scale)}%`);const e=this.controlsElement.querySelector('[data-action="zoom-in"]'),i=this.controlsElement.querySelector('[data-action="zoom-out"]');e&&(e.disabled=this.scale>=this.maxScale),i&&(i.disabled=this.scale<=this.minScale)}setImage(t,e="",i=""){const a=this.imageUrl;this.imageUrl=t,this.alt=e,this.title=i,this.reset(),this.loadImage(t);const s=this.getApp()?.events;s&&s.emit("imageviewer:image-changed",{viewer:this,oldImageUrl:a,newImageUrl:t})}getCurrentState(){return{scale:this.scale,rotation:this.rotation,translateX:this.translateX,translateY:this.translateY}}setState(t){void 0!==t.scale&&(this.scale=t.scale),void 0!==t.rotation&&(this.rotation=t.rotation),void 0!==t.translateX&&(this.translateX=t.translateX),void 0!==t.translateY&&(this.translateY=t.translateY),this.renderCanvas(),this.updateControls()}async onBeforeDestroy(){this.isDragging&&(this.isDragging=!1);const t=this.getApp()?.events;t&&t.emit("imageviewer:destroyed",{viewer:this})}static async showDialog(t,i={}){const{title:a="Image Viewer",alt:s="Image",size:n="fullscreen",showControls:o=!0,allowRotate:r=!0,allowZoom:l=!0,allowPan:h=!0,allowDownload:c=!0,...d}=i,m=new ImageViewer({imageUrl:t,alt:s,title:a,showControls:o,allowRotate:r,allowZoom:l,allowPan:h,allowDownload:c,autoFit:!0});return e.showDialog({title:a,body:m,size:n,centered:!0,backdrop:"static",keyboard:!0,buttons:[{text:"Close",action:"close",class:"btn btn-secondary",dismiss:!0}],...d})}}window.ImageViewer=ImageViewer;class ImageCanvasView extends t{constructor(t={}){super({...t,className:`image-canvas-view ${t.className||""}`,tagName:"div"}),this.imageUrl=t.imageUrl||t.src||"",this.alt=t.alt||"Image",this.title=t.title||"",this.canvas=null,this.context=null,this.image=null,this.canvasWidth=0,this.canvasHeight=0,this.maxCanvasHeightPercent=t.maxCanvasHeightPercent||.7,this.maxCanvasWidthPercent=t.maxCanvasWidthPercent||.8,this.canvasSizes={sm:{width:400,height:300},md:{width:600,height:450},lg:{width:800,height:600},xl:{width:1e3,height:750},fullscreen:{width:0,height:0},auto:{width:0,height:0}},this.canvasSize=t.canvasSize||"auto",this.isLoaded=!1,this.isRendering=!1,this.autoFit=!1!==t.autoFit,this.crossOrigin=t.crossOrigin||"anonymous"}async getTemplate(){return'\n      <div class="image-canvas-container d-flex flex-column h-100">\n        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">\n          <canvas class="image-canvas w-100 h-100" data-container="canvas"></canvas>\n\n          \x3c!-- Loading Overlay --\x3e\n          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"\n               style="display: none; z-index: 10;">\n            <div class="spinner-border text-primary" role="status">\n              <span class="visually-hidden">Loading...</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}async onAfterRender(){this.canvas=this.element.querySelector("canvas"),this.context=this.canvas.getContext("2d"),this.containerElement=this.element.querySelector(".image-canvas-content"),this.loadingElement=this.element.querySelector(".image-canvas-loading"),this.setupCanvas(),this.imageUrl&&this.loadImage(this.imageUrl)}setupCanvas(){this.canvas&&this.containerElement&&(this.setCanvasSize(this.canvasSize),"fullscreen"===this.canvasSize&&(this._resizeHandler=()=>this.setCanvasSize("fullscreen"),window.addEventListener("resize",this._resizeHandler)),this.context.imageSmoothingEnabled=!0,this.context.imageSmoothingQuality="high")}setCanvasSize(t){const e=this.canvasSizes[t];if(!e&&"auto"!==t)return;let i,a;if("fullscreen"===t)i=Math.min(1200,.9*window.innerWidth),a=Math.min(900,.8*window.innerHeight);else if("auto"!==t&&e){const t=window.innerWidth*this.maxCanvasWidthPercent,s=window.innerHeight*this.maxCanvasHeightPercent;if(e.width>t||e.height>s)if(this.image){const e=t/this.image.naturalWidth,n=s/this.image.naturalHeight,o=Math.min(e,n,1);i=Math.floor(this.image.naturalWidth*o),a=Math.floor(this.image.naturalHeight*o),i=Math.max(300,i),a=Math.max(200,a)}else i=Math.min(600,t),a=Math.min(450,s);else i=e.width,a=e.height}else if(this.image){const t=window.innerWidth*this.maxCanvasWidthPercent,e=window.innerHeight*this.maxCanvasHeightPercent,s=t/this.image.naturalWidth,n=e/this.image.naturalHeight,o=Math.min(s,n,1);i=Math.floor(this.image.naturalWidth*o),a=Math.floor(this.image.naturalHeight*o),i=Math.max(300,i),a=Math.max(200,a)}else i=Math.min(600,window.innerWidth*this.maxCanvasWidthPercent),a=Math.min(450,window.innerHeight*this.maxCanvasHeightPercent);if(i=Math.min(i,window.innerWidth*this.maxCanvasWidthPercent),a=Math.min(a,window.innerHeight*this.maxCanvasHeightPercent),Math.abs(i-this.canvasWidth)<10&&Math.abs(a-this.canvasHeight)<10)return;const s=window.devicePixelRatio||1;this.canvasWidth=i,this.canvasHeight=a,this.canvas.width=i*s,this.canvas.height=a*s,this.canvas.style.width=i+"px",this.canvas.style.height=a+"px",this.context.setTransform(s,0,0,s,0,0),this.isLoaded&&this.renderCanvas()}loadImage(t){if(!t)return;this.imageUrl=t,this.isLoaded=!1,this.element.classList.remove("loaded"),this.showLoading();const e=new Image;this.crossOrigin&&(e.crossOrigin=this.crossOrigin),e.onload=()=>{this.image=e,this.handleImageLoad()},e.onerror=()=>{this.handleImageError()},e.src=t}handleImageLoad(){this.isLoaded=!0,this.element.classList.add("loaded"),this.hideLoading(),"auto"===this.canvasSize?this.setCanvasSize("auto"):this.autoFit&&this.fitToContainer(),this.renderCanvas();const t=this.getApp()?.events;t&&t.emit("imagecanvas:loaded",{view:this,imageUrl:this.imageUrl,naturalWidth:this.image.naturalWidth,naturalHeight:this.image.naturalHeight})}handleImageError(){console.error("Failed to load image:",this.imageUrl),this.hideLoading();const t=this.getApp()?.events;t&&t.emit("imagecanvas:error",{view:this,imageUrl:this.imageUrl,error:"Failed to load image"})}showLoading(){this.loadingElement&&(this.loadingElement.style.display="block")}hideLoading(){this.loadingElement&&(this.loadingElement.style.display="none")}renderCanvas(){this.context&&this.canvasWidth&&this.canvasHeight&&!this.isRendering&&(this.isRendering=!0,this.context.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.image&&this.isLoaded?(this.context.save(),this.renderImage(),this.context.restore(),this.isRendering=!1):this.isRendering=!1)}renderImage(){if(!this.image)return;const t=this.canvasWidth/this.image.naturalWidth,e=this.canvasHeight/this.image.naturalHeight,i=Math.min(t,e,1),a=this.image.naturalWidth*i,s=this.image.naturalHeight*i,n=(this.canvasWidth-a)/2,o=(this.canvasHeight-s)/2;this.context.drawImage(this.image,n,o,a,s)}fitToContainer(){this.image&&this.canvasWidth&&this.canvasHeight&&(this.canvasWidth,this.canvasHeight,this.image.naturalWidth,this.image.naturalHeight,"auto"===this.canvasSize&&this.setCanvasSize("auto"),this.renderCanvas())}center(){this.renderCanvas()}reset(){this.renderCanvas()}exportImageData(){if(!this.canvas)return null;try{return this.canvas.toDataURL("image/png")}catch(t){return console.error("Failed to export image data:",t),null}}exportImageBlob(t=.9){return this.canvas?new Promise(e=>{try{this.canvas.toBlob(t=>{e(t)},"image/png",t)}catch(i){console.error("Failed to export image blob:",i),e(null)}}):Promise.resolve(null)}setImage(t,e="",i=""){const a=this.imageUrl;this.alt=e,this.title=i,this.loadImage(t);const s=this.getApp()?.events;s&&s.emit("imagecanvas:image-changed",{view:this,oldImageUrl:a,newImageUrl:t})}getImageData(){return{imageUrl:this.imageUrl,alt:this.alt,title:this.title,naturalWidth:this.image?.naturalWidth||0,naturalHeight:this.image?.naturalHeight||0,isLoaded:this.isLoaded}}async onBeforeDestroy(){this.isLoaded=!1,this.isRendering=!1,this.image=null,this._resizeHandler&&window.removeEventListener("resize",this._resizeHandler);const t=this.getApp()?.events;t&&t.emit("imagecanvas:destroyed",{view:this})}}window.ImageCanvasView=ImageCanvasView;class ImageTransformView extends ImageCanvasView{constructor(t={}){super({...t,className:`image-transform-view ${t.className||""}`}),this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.minScale=.1,this.maxScale=5,this.scaleStep=.02,this.isDragging=!1,this.lastPointerX=0,this.lastPointerY=0,this.allowPan=!1!==t.allowPan,this.allowZoom=!1!==t.allowZoom,this.allowRotate=!1!==t.allowRotate,this.allowKeyboard=!1!==t.allowKeyboard,this._handleMouseMove=this.handleMouseMove.bind(this),this._handleMouseUp=this.handleMouseUp.bind(this),this._handleKeyboard=this.handleKeyboard.bind(this),t.maxCanvasHeightPercent||(this.maxCanvasHeightPercent=.6)}async getTemplate(){return'\n      <div class="image-transform-container d-flex flex-column h-100">\n        \x3c!-- Transform Toolbar --\x3e\n        <div class="image-transform-toolbar bg-light border-bottom p-2">\n          <div class="btn-toolbar justify-content-center" role="toolbar">\n            <div class="btn-group me-2" role="group" aria-label="Zoom controls">\n              <button type="button" class="btn btn-outline-primary btn-sm" data-action="zoom-in" title="Zoom In">\n                <i class="bi bi-zoom-in"></i>\n              </button>\n              <button type="button" class="btn btn-outline-primary btn-sm" data-action="zoom-out" title="Zoom Out">\n                <i class="bi bi-zoom-out"></i>\n              </button>\n              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="fit-to-screen" title="Fit to Screen">\n                <i class="bi bi-arrows-fullscreen"></i>\n              </button>\n              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="actual-size" title="Actual Size">\n                <i class="bi bi-1-square"></i>\n              </button>\n            </div>\n\n            <div class="btn-group me-2" role="group" aria-label="Rotate controls">\n              <button type="button" class="btn btn-outline-info btn-sm" data-action="rotate-left" title="Rotate Left">\n                <i class="bi bi-arrow-counterclockwise"></i>\n              </button>\n              <button type="button" class="btn btn-outline-info btn-sm" data-action="rotate-right" title="Rotate Right">\n                <i class="bi bi-arrow-clockwise"></i>\n              </button>\n            </div>\n\n            <div class="btn-group" role="group" aria-label="Position controls">\n              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="center-image" title="Center Image">\n                <i class="bi bi-bullseye"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        \x3c!-- Canvas Area --\x3e\n        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">\n          <canvas class="image-canvas" data-container="canvas"></canvas>\n\n          \x3c!-- Loading Overlay --\x3e\n          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"\n               style="display: none; z-index: 10;">\n            <div class="spinner-border text-primary" role="status">\n              <span class="visually-hidden">Loading...</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}async onAfterRender(){await super.onAfterRender(),this.setupInteractionListeners()}setupInteractionListeners(){this.canvas&&(this.allowPan&&(this.canvas.addEventListener("mousedown",t=>this.handleMouseDown(t)),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)),this.allowZoom&&this.canvas.addEventListener("wheel",t=>this.handleWheel(t),{passive:!1}),this.canvas.addEventListener("touchstart",t=>this.handleTouchStart(t),{passive:!1}),this.canvas.addEventListener("touchmove",t=>this.handleTouchMove(t),{passive:!1}),this.canvas.addEventListener("touchend",t=>this.handleTouchEnd(t)),this.allowKeyboard&&document.addEventListener("keydown",this._handleKeyboard),this.canvas.addEventListener("contextmenu",t=>t.preventDefault()),this.canvas.style.cursor=this.allowPan?"grab":"default")}renderImage(){this.image&&(this.context.translate(this.canvasWidth/2+this.translateX,this.canvasHeight/2+this.translateY),this.context.scale(this.scale,this.scale),this.context.rotate(this.rotation*Math.PI/180),this.context.drawImage(this.image,-this.image.naturalWidth/2,-this.image.naturalHeight/2))}handleMouseDown(t){if(!this.allowPan||0!==t.button)return;t.preventDefault(),this.isDragging=!0;const e=this.canvas.getBoundingClientRect();this.lastPointerX=t.clientX-e.left,this.lastPointerY=t.clientY-e.top,this.canvas.style.cursor="grabbing"}handleMouseMove(t){if(!this.isDragging||!this.allowPan)return;t.preventDefault();const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top,s=i-this.lastPointerX,n=a-this.lastPointerY;this.pan(s,n),this.lastPointerX=i,this.lastPointerY=a}handleMouseUp(t){this.isDragging&&(this.isDragging=!1,this.canvas.style.cursor=this.allowPan?"grab":"default")}handleWheel(t){if(!this.allowZoom)return;t.preventDefault();const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top,s=t.deltaY>0?.5*-this.scaleStep:.5*this.scaleStep;this.zoomAtPoint(this.scale+s,i,a)}handleTouchStart(t){if(1===t.touches.length&&this.allowPan){t.preventDefault();const e=t.touches[0],i=this.canvas.getBoundingClientRect();this.isDragging=!0,this.lastPointerX=e.clientX-i.left,this.lastPointerY=e.clientY-i.top}}handleTouchMove(t){if(1===t.touches.length&&this.isDragging&&this.allowPan){t.preventDefault();const e=t.touches[0],i=this.canvas.getBoundingClientRect(),a=e.clientX-i.left,s=e.clientY-i.top,n=a-this.lastPointerX,o=s-this.lastPointerY;this.pan(n,o),this.lastPointerX=a,this.lastPointerY=s}}handleTouchEnd(t){this.isDragging=!1}handleKeyboard(t){if("INPUT"!==t.target.tagName&&"TEXTAREA"!==t.target.tagName)switch(t.key){case"+":case"=":this.allowZoom&&(t.preventDefault(),this.zoomIn());break;case"-":this.allowZoom&&(t.preventDefault(),this.zoomOut());break;case"0":t.preventDefault(),this.fitToContainer();break;case"1":t.preventDefault(),this.actualSize();break;case"r":case"R":this.allowRotate&&(t.preventDefault(),this.rotateRight())}}zoomIn(){this.setScale(this.scale+this.scaleStep)}zoomOut(){this.setScale(this.scale-this.scaleStep)}setScale(t){const e=this.scale;this.scale=Math.max(this.minScale,Math.min(this.maxScale,t)),e!==this.scale&&(this.renderCanvas(),this.emitTransformEvent("scale-changed",{oldScale:e,newScale:this.scale}))}zoomAtPoint(t,e,i){if(!this.image)return;const a=this.scale;if(this.setScale(t),a!==this.scale){const t=this.scale/a,s=this.canvasWidth/2,n=this.canvasHeight/2;this.translateX=(this.translateX-(e-s))*t+(e-s),this.translateY=(this.translateY-(i-n))*t+(i-n),this.renderCanvas()}}pan(t,e){this.translateX+=t,this.translateY+=e,this.renderCanvas(),this.emitTransformEvent("panned",{deltaX:t,deltaY:e})}rotate(t){const e=this.rotation;this.rotation=(this.rotation+t)%360,this.rotation<0&&(this.rotation+=360),this.renderCanvas(),this.emitTransformEvent("rotated",{oldRotation:e,newRotation:this.rotation,degrees:t})}rotateLeft(){this.rotate(-90)}rotateRight(){this.rotate(90)}center(){this.translateX=0,this.translateY=0,this.renderCanvas(),this.emitTransformEvent("centered")}actualSize(){this.setScale(1),this.center()}fitToContainer(){if(!this.image||!this.canvasWidth||!this.canvasHeight)return;const t=this.canvasWidth-40,e=this.canvasHeight-40,i=t/this.image.naturalWidth,a=e/this.image.naturalHeight,s=Math.min(i,a,1);this.setScale(s),this.center()}smartFit(){if(!this.image||!this.canvasWidth||!this.canvasHeight)return;const t=(this.canvasWidth-80)/this.image.naturalWidth,e=(this.canvasHeight-80)/this.image.naturalHeight,i=Math.min(t,e);i<1&&this.setScale(i),this.center()}reset(){this.scale=1,this.rotation=0,this.translateX=0,this.translateY=0,this.renderCanvas(),this.emitTransformEvent("reset")}handleImageLoad(){super.handleImageLoad(),this.autoFit?this.fitToContainer():this.smartFit()}getTransformState(){return{scale:this.scale,rotation:this.rotation,translateX:this.translateX,translateY:this.translateY}}setTransformState(t){void 0!==t.scale&&(this.scale=t.scale),void 0!==t.rotation&&(this.rotation=t.rotation),void 0!==t.translateX&&(this.translateX=t.translateX),void 0!==t.translateY&&(this.translateY=t.translateY),this.renderCanvas()}emitTransformEvent(t,e={}){const i=this.getApp()?.events;i&&i.emit(`imagetransform:${t}`,{view:this,transform:this.getTransformState(),...e})}async handleActionZoomIn(){this.zoomIn()}async handleActionZoomOut(){this.zoomOut()}async handleActionFitToScreen(){this.fitToContainer()}async handleActionActualSize(){this.actualSize()}async handleActionRotateLeft(){this.rotateLeft()}async handleActionRotateRight(){this.rotateRight()}async handleActionCenterImage(){this.center()}async onBeforeDestroy(){await super.onBeforeDestroy(),this.isDragging&&(this.isDragging=!1),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),document.removeEventListener("keydown",this._handleKeyboard),this.emitTransformEvent("destroyed")}static async showDialog(t,i={}){const{title:a="Transform Image",alt:s="Image",size:n="xl",allowPan:o=!0,allowZoom:r=!0,allowRotate:l=!0,...h}=i,c=new ImageTransformView({imageUrl:t,alt:s,title:a,allowPan:o,allowZoom:r,allowRotate:l}),d=new e({title:a,body:c,size:n,centered:!0,backdrop:"static",keyboard:!0,noBodyPadding:!0,maxCanvasHeightPercent:.5,buttons:[{text:"Cancel",action:"cancel",class:"btn btn-secondary",dismiss:!0},{text:"Apply Transform",action:"apply-transform",class:"btn btn-primary"}],...h});return await d.render(!0,document.body),d.show(),new Promise(t=>{d.on("hidden",()=>{d.destroy(),t({action:"cancel",view:c})}),d.on("action:cancel",()=>{d.hide()}),d.on("action:apply-transform",async()=>{const e=c.exportImageData();d.hide(),t({action:"transform",view:c,data:e,transformState:c.getTransformState()})})})}}window.ImageTransformView=Image;class ImageCropView extends ImageCanvasView{constructor(t={}){super({...t,className:`image-crop-view ${t.className||""}`}),this.originalImageUrl=t.imageUrl,this.cropMode=!1,this.cropBox={x:0,y:0,width:0,height:0},this.aspectRatio=t.aspectRatio||null,this.minCropSize=t.minCropSize||50,this.fixedCropSize=t.fixedCropSize||null,this.cropAndScale=t.cropAndScale||null,this.isDragging=!1,this.isResizing=!1,this.dragHandle=null,this.dragStartImageX=0,this.dragStartImageY=0,this.initialCropBox=null,this.newCropStart=null,this.handles={nw:{cursor:"nw-resize",x:0,y:0},ne:{cursor:"ne-resize",x:1,y:0},sw:{cursor:"sw-resize",x:0,y:1},se:{cursor:"se-resize",x:1,y:1},n:{cursor:"n-resize",x:.5,y:0},s:{cursor:"s-resize",x:.5,y:1},w:{cursor:"w-resize",x:0,y:.5},e:{cursor:"e-resize",x:1,y:.5}},this.handleSize=t.handleSize||12,this.showGrid=!1!==t.showGrid,this.showToolbar=!1!==t.showToolbar,this.autoFit=!1!==t.autoFit,this.imageOffsetX=0,this.imageOffsetY=0,this._handleMouseMove=this.handleMouseMove.bind(this),this._handleMouseUp=this.handleMouseUp.bind(this),!t.maxCanvasHeightPercent&&this.showToolbar&&(this.maxCanvasHeightPercent=.6)}imageToCanvas(t){if(!this.image)return t;const e=this.canvasWidth/this.image.naturalWidth,i=this.canvasHeight/this.image.naturalHeight;let a;a=this.autoFit?Math.min(e,i,1):1;const s=this.image.naturalWidth*a,n=this.image.naturalHeight*a,o=(this.canvasWidth-s)/2,r=(this.canvasHeight-n)/2;return{x:t.x*a+o,y:t.y*a+r,width:t.width*a,height:t.height*a}}canvasToImage(t){if(!this.image)return t;const e=this.canvasWidth/this.image.naturalWidth,i=this.canvasHeight/this.image.naturalHeight;let a;a=this.autoFit?Math.min(e,i,1):1;const s=this.image.naturalWidth*a,n=this.image.naturalHeight*a,o=(this.canvasWidth-s)/2,r=(this.canvasHeight-n)/2;return{x:(t.x-o)/a,y:(t.y-r)/a,width:t.width/a,height:t.height/a}}pointCanvasToImage(t,e){const i=this.canvasToImage({x:t,y:e,width:0,height:0});return{x:i.x,y:i.y}}async getTemplate(){return'\n      <div class="image-crop-container d-flex flex-column h-100">\n        {{#showToolbar}}\n        \x3c!-- Crop Toolbar --\x3e\n        <div class="image-crop-toolbar bg-light border-bottom p-2">\n          <div class="btn-toolbar justify-content-center" role="toolbar">\n            <div class="btn-group me-2" role="group" aria-label="Aspect ratio">\n              <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"\n                      data-bs-toggle="dropdown" title="Aspect Ratio">\n                <i class="bi bi-aspect-ratio"></i> Ratio\n              </button>\n              <ul class="dropdown-menu">\n                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="free">Free</a></li>\n                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="1">1:1 Square</a></li>\n                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="1.333">4:3</a></li>\n                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="1.777">16:9</a></li>\n                <li><a class="dropdown-item" href="#" data-action="set-aspect-ratio" data-ratio="0.75">3:4 Portrait</a></li>\n              </ul>\n            </div>\n\n            <div class="btn-group me-2" role="group" aria-label="Fit mode">\n              <button type="button" class="btn btn-outline-info btn-sm" data-action="toggle-auto-fit" title="Toggle Auto-fit">\n                <i class="bi bi-arrows-fullscreen"></i> <span class="auto-fit-text">Fit</span>\n              </button>\n            </div>\n\n            <div class="btn-group me-2" role="group" aria-label="Crop actions">\n              <button type="button" class="btn btn-success btn-sm" data-action="apply-crop" title="Apply Crop">\n                <i class="bi bi-check"></i> Apply\n              </button>\n              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="reset-crop" title="Reset Crop">\n                <i class="bi bi-arrow-repeat"></i> Reset\n              </button>\n            </div>\n          </div>\n        </div>\n        {{/showToolbar}}\n\n        \x3c!-- Canvas Area --\x3e\n        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">\n          <canvas class="image-crop-canvas" data-container="canvas"></canvas>\n\n          \x3c!-- Loading Overlay --\x3e\n          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"\n               style="display: none; z-index: 10;">\n            <div class="spinner-border text-primary" role="status">\n              <span class="visually-hidden">Loading...</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}async onAfterRender(){await super.onAfterRender(),this.setupCropListeners(),this.updateAutoFitButtonState()}updateAutoFitButtonState(){if(!this.showToolbar)return;const t=this.element.querySelector('[data-action="toggle-auto-fit"]'),e=t?.querySelector(".auto-fit-text");t&&e&&(this.autoFit?(t.classList.remove("btn-outline-warning"),t.classList.add("btn-outline-info"),t.title="Toggle Auto-fit (currently: fit to canvas)",e.textContent="Fit"):(t.classList.remove("btn-outline-info"),t.classList.add("btn-outline-warning"),t.title="Toggle Auto-fit (currently: actual size)",e.textContent="1:1"))}handleImageLoad(){super.handleImageLoad(),this.updateImageOffset(),setTimeout(()=>{this.isLoaded&&this.canvasWidth>0&&this.canvasHeight>0&&this.startCropMode()},10)}updateImageOffset(){if(!this.image)return;const t=this.canvasWidth/this.image.naturalWidth,e=this.canvasHeight/this.image.naturalHeight;let i;i=this.autoFit?Math.min(t,e,1):1;const a=this.image.naturalWidth*i,s=this.image.naturalHeight*i;this.imageOffsetX=(this.canvasWidth-a)/2,this.imageOffsetY=(this.canvasHeight-s)/2,this.imageScale=i,this.imageOffsetX,this.imageOffsetY,this.imageScale,this.autoFit}setCanvasSize(t){super.setCanvasSize(t),this.image&&this.isLoaded&&this.updateImageOffset()}renderImage(){if(!this.image)return;const t=this.canvasWidth/this.image.naturalWidth,e=this.canvasHeight/this.image.naturalHeight;let i;i=this.autoFit?Math.min(t,e,1):1;const a=this.image.naturalWidth*i,s=this.image.naturalHeight*i,n=(this.canvasWidth-a)/2,o=(this.canvasHeight-s)/2;this.context.drawImage(this.image,n,o,a,s)}setupCropListeners(){this.canvas&&(this.canvas.addEventListener("mousedown",t=>this.handleMouseDown(t)),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp),this.canvas.addEventListener("touchstart",t=>this.handleTouchStart(t),{passive:!1}),this.canvas.addEventListener("touchmove",t=>this.handleTouchMove(t),{passive:!1}),this.canvas.addEventListener("touchend",t=>this.handleTouchEnd(t)),this.canvas.style.cursor="crosshair")}renderCanvas(){super.renderCanvas(),this.cropMode&&this.renderCropOverlay()}renderCropOverlay(){if(!this.cropMode||!this.cropBox)return;const t=this.imageToCanvas(this.cropBox);this.context.save(),this.context.globalAlpha=.5,this.context.fillStyle="#000000",this.context.fillRect(0,0,this.canvasWidth,this.canvasHeight),this.context.globalCompositeOperation="destination-out",this.context.fillRect(t.x,t.y,t.width,t.height),this.context.globalCompositeOperation="source-over",this.context.globalAlpha=1,this.context.strokeStyle="rgba(255, 255, 255, 0.9)",this.context.lineWidth=2,this.context.strokeRect(t.x,t.y,t.width,t.height),this.showGrid&&this.drawGrid(),this.drawHandles(),this.context.restore()}exportImageBlob(t=.9){return this.canvas&&this.image&&this.isLoaded&&this.cropMode?new Promise(e=>{try{this.cropBox;const i={x:Math.max(0,Math.min(this.cropBox.x,this.image.naturalWidth)),y:Math.max(0,Math.min(this.cropBox.y,this.image.naturalHeight)),width:Math.min(this.cropBox.width,this.image.naturalWidth-this.cropBox.x),height:Math.min(this.cropBox.height,this.image.naturalHeight-this.cropBox.y)};let a=i.width,s=i.height;this.cropAndScale&&(a=this.cropAndScale.width,s=this.cropAndScale.height);const n=document.createElement("canvas");n.width=a,n.height=s,n.getContext("2d").drawImage(this.image,i.x,i.y,i.width,i.height,0,0,a,s),n.toBlob(t=>{e(t)},"image/png",t)}catch(i){console.error("Failed to export cropped image blob:",i),e(null)}}):super.exportImageBlob(t)}drawGrid(){const t=this.imageToCanvas(this.cropBox);this.context.globalAlpha=.6,this.context.strokeStyle="rgba(255, 255, 255, 0.7)",this.context.lineWidth=1;const e=t.width/3,i=t.height/3;for(let a=1;a<3;a++){const i=t.x+e*a;this.context.beginPath(),this.context.moveTo(i,t.y),this.context.lineTo(i,t.y+t.height),this.context.stroke()}for(let a=1;a<3;a++){const e=t.y+i*a;this.context.beginPath(),this.context.moveTo(t.x,e),this.context.lineTo(t.x+t.width,e),this.context.stroke()}}drawHandles(){if(this.fixedCropSize)return;const t=this.imageToCanvas(this.cropBox);this.context.globalAlpha=1,this.context.fillStyle="#ffffff",this.context.strokeStyle="#000000",this.context.lineWidth=1,Object.keys(this.handles).forEach(e=>{const i=this.handles[e],a=t.x+t.width*i.x,s=t.y+t.height*i.y,n=a-this.handleSize/2,o=s-this.handleSize/2;this.context.fillRect(n,o,this.handleSize,this.handleSize),this.context.strokeRect(n,o,this.handleSize,this.handleSize)})}handleMouseDown(t){if(!this.cropMode)return;t.preventDefault();const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top,s=this.pointCanvasToImage(i,a);if(this.dragStartImageX=s.x,this.dragStartImageY=s.y,this.initialCropBox={...this.cropBox},this.fixedCropSize)this.isPointInCropBox(i,a)&&(this.isDragging=!0,this.canvas.style.cursor="move");else{const t=this.getHandleAt(i,a);t?(this.isResizing=!0,this.dragHandle=t,this.canvas.style.cursor=this.handles[t].cursor):this.isPointInCropBox(i,a)?(this.isDragging=!0,this.canvas.style.cursor="move"):this.startNewCrop(s.x,s.y)}}handleMouseMove(t){if(!this.cropMode)return;const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top;this.isResizing&&this.dragHandle?this.resizeCropBox(i,a):this.isDragging?this.moveCropBox(i,a):this.isDragging||this.isResizing||this.updateCursor(i,a)}handleMouseUp(t){if(!this.cropMode)return;this.isDragging=!1,this.isResizing=!1,this.dragHandle=null,this.initialCropBox=null,this.newCropStart=null;const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,a=t.clientY-e.top;this.updateCursor(i,a)}handleTouchStart(t){if(!this.cropMode||1!==t.touches.length)return;t.preventDefault();const e=t.touches[0],i=this.canvas.getBoundingClientRect();e.clientX,i.left,e.clientY,i.top,this.handleMouseDown({clientX:e.clientX,clientY:e.clientY,preventDefault:()=>{}})}handleTouchMove(t){if(!this.cropMode||1!==t.touches.length)return;t.preventDefault();const e=t.touches[0];this.handleMouseMove({clientX:e.clientX,clientY:e.clientY})}handleTouchEnd(t){this.cropMode&&this.handleMouseUp({})}getHandleAt(t,e){const i=this.imageToCanvas(this.cropBox);for(const[a,s]of Object.entries(this.handles)){const n=i.x+i.width*s.x,o=i.y+i.height*s.y,r=this.handleSize+4,l=n-r/2,h=o-r/2;if(t>=l&&t<=l+r&&e>=h&&e<=h+r)return a}return null}isPointInCropBox(t,e){const i=this.pointCanvasToImage(t,e);return i.x>=this.cropBox.x&&i.x<=this.cropBox.x+this.cropBox.width&&i.y>=this.cropBox.y&&i.y<=this.cropBox.y+this.cropBox.height}updateCursor(t,e){if(!this.cropMode)return;const i=t,a=e;if(this.fixedCropSize)this.isPointInCropBox(i,a)?this.canvas.style.cursor="move":this.canvas.style.cursor="default";else{const s=this.getHandleAt(t,e);s?this.canvas.style.cursor=this.handles[s].cursor:this.isPointInCropBox(i,a)?this.canvas.style.cursor="move":this.canvas.style.cursor="crosshair"}}startNewCrop(t,e){this.newCropStart={x:t,y:e},this.cropBox={x:t,y:e,width:0,height:0},this.isResizing=!0,this.dragHandle="se"}resizeCropBox(t,e){if(!this.dragHandle)return;const i=this.pointCanvasToImage(t,e);if(this.newCropStart){const t=this.newCropStart.x,e=this.newCropStart.y;return this.cropBox={x:Math.min(t,i.x),y:Math.min(e,i.y),width:Math.abs(i.x-t),height:Math.abs(i.y-e)},this.aspectRatio&&this.constrainToAspectRatio(this.cropBox,"se"),this.cropBox.width<this.minCropSize&&(this.cropBox.width=this.minCropSize),this.cropBox.height<this.minCropSize&&(this.cropBox.height=this.minCropSize),void this.constrainCropBox(this.cropBox)}if(!this.initialCropBox)return;const a=i.x-this.dragStartImageX,s=i.y-this.dragStartImageY;let n={...this.initialCropBox};switch(this.dragHandle){case"nw":n.x+=a,n.y+=s,n.width-=a,n.height-=s;break;case"ne":n.y+=s,n.width+=a,n.height-=s;break;case"sw":n.x+=a,n.width-=a,n.height+=s;break;case"se":n.width+=a,n.height+=s;break;case"n":n.y+=s,n.height-=s;break;case"s":n.height+=s;break;case"w":n.x+=a,n.width-=a;break;case"e":n.width+=a}this.aspectRatio&&this.constrainToAspectRatio(n,this.dragHandle),this.constrainCropBox(n),this.cropBox=n,this.renderCanvas()}moveCropBox(t,e){if(!this.initialCropBox)return;const i=this.pointCanvasToImage(t,e),a=i.x-this.dragStartImageX,s=i.y-this.dragStartImageY;let n={x:this.initialCropBox.x+a,y:this.initialCropBox.y+s,width:this.initialCropBox.width,height:this.initialCropBox.height};this.image&&(n.x=Math.max(0,Math.min(this.image.naturalWidth-n.width,n.x)),n.y=Math.max(0,Math.min(this.image.naturalHeight-n.height,n.y))),this.cropBox=n,this.renderCanvas()}constrainToAspectRatio(t,e){let i,a,s=this.aspectRatio;if(this.cropAndScale&&(s=this.cropAndScale.width/this.cropAndScale.height),s)if(["nw","ne","sw","se"].includes(e)){switch(e){case"nw":i=t.x+t.width,a=t.y+t.height;break;case"ne":i=t.x,a=t.y+t.height;break;case"sw":i=t.x+t.width,a=t.y;break;case"se":i=t.x,a=t.y}switch(t.width/t.height>s?t.width=t.height*s:t.height=t.width/s,e){case"nw":t.x=i-t.width,t.y=a-t.height;break;case"ne":t.x=i,t.y=a-t.height;break;case"sw":t.x=i-t.width,t.y=a;break;case"se":t.x=i,t.y=a}}else if(["n","s"].includes(e)){const e=t.x+t.width/2;t.width=t.height*s,t.x=e-t.width/2}else if(["w","e"].includes(e)){const e=t.y+t.height/2;t.height=t.width/s,t.y=e-t.height/2}}constrainCropBox(t){t.width=Math.max(this.minCropSize,t.width),t.height=Math.max(this.minCropSize,t.height),this.image&&(t.x<0&&(t.width+=t.x,t.x=0),t.y<0&&(t.height+=t.y,t.y=0),t.x+t.width>this.image.naturalWidth&&(t.width=this.image.naturalWidth-t.x),t.y+t.height>this.image.naturalHeight&&(t.height=this.image.naturalHeight-t.y)),t.width=Math.max(0,t.width),t.height=Math.max(0,t.height)}startCropMode(){this.cropMode||(this.cropMode=!0,this.initializeCropBox(),this.renderCanvas(),this.emitCropEvent("crop-started"))}exitCropMode(){this.cropMode=!1,this.isDragging=!1,this.isResizing=!1,this.dragHandle=null,this.canvas.style.cursor="default",this.renderCanvas(),this.emitCropEvent("crop-exited")}initializeCropBox(){if(!this.canvasWidth||!this.canvasHeight||!this.image)return;const t=this.image.naturalWidth,e=this.image.naturalHeight;let i,a;if(this.fixedCropSize)i=this.fixedCropSize.width,a=this.fixedCropSize.height;else{i=Math.floor(.8*t),a=Math.floor(.8*e);let s=this.aspectRatio;this.cropAndScale&&(s=this.cropAndScale.width/this.cropAndScale.height),this.aspectRatio=s,s&&(i/a>s?i=a*s:a=i/s),i=Math.max(this.minCropSize||50,i),a=Math.max(this.minCropSize||50,a)}const s=Math.floor((t-i)/2),n=Math.floor((e-a)/2);this.cropBox={x:s,y:n,width:i,height:a}}setAspectRatio(t){this.aspectRatio=t,this.cropMode&&(this.initializeCropBox(),this.renderCanvas()),this.emitCropEvent("aspect-ratio-changed",{aspectRatio:t})}getCropData(){return this.cropBox&&this.image?{x:Math.max(0,Math.min(this.cropBox.x,this.image.naturalWidth)),y:Math.max(0,Math.min(this.cropBox.y,this.image.naturalHeight)),width:Math.min(this.cropBox.width,this.image.naturalWidth-this.cropBox.x),height:Math.min(this.cropBox.height,this.image.naturalHeight-this.cropBox.y),originalWidth:this.image.naturalWidth,originalHeight:this.image.naturalHeight}:null}async applyCrop(){const t=this.getCropData();if(!t||!this.image)return null;const e=document.createElement("canvas"),i=e.getContext("2d");this.cropAndScale?(e.width=this.cropAndScale.width,e.height=this.cropAndScale.height,i.drawImage(this.image,t.x,t.y,t.width,t.height,0,0,this.cropAndScale.width,this.cropAndScale.height)):(e.width=t.width,e.height=t.height,i.drawImage(this.image,t.x,t.y,t.width,t.height,0,0,t.width,t.height));const a=e.toDataURL("image/png");return{canvas:e,imageData:a,cropData:t}}emitCropEvent(t,e={}){const i=this.getApp()?.events;i&&i.emit(`imagecrop:${t}`,{view:this,cropBox:this.cropBox,aspectRatio:this.aspectRatio,...e})}showToolbarElement(){if(!this.showToolbar){this.showToolbar=!0;const t=this.element.querySelector(".image-crop-toolbar");t&&(t.style.display="block"),this.updateAutoFitButtonState()}}hideToolbarElement(){if(this.showToolbar){this.showToolbar=!1;const t=this.element.querySelector(".image-crop-toolbar");t&&(t.style.display="none")}}toggleToolbarElement(){this.showToolbar?this.hideToolbarElement():this.showToolbarElement()}async onPassThruActionSetAspectRatio(t,e){const i=e.getAttribute("data-ratio"),a="free"===i?null:parseFloat(i);this.setAspectRatio(a)}async handleActionApplyCrop(){if(this.cropMode){const t=await this.applyCrop();t&&t.imageData&&(this.loadImage(t.imageData),this.exitCropMode(),this.emitCropEvent("crop-applied",{result:t}))}}async handleActionToggleAutoFit(){this.showToolbar&&(this.autoFit=!this.autoFit,this.updateAutoFitButtonState(),this.updateImageOffset(),this.renderCanvas(),this.emitCropEvent("auto-fit-changed",{autoFit:this.autoFit}))}async handleActionResetCrop(){this.cropMode&&this.exitCropMode(),this.originalImageUrl&&await this.loadImage(this.originalImageUrl),this.startCropMode(),this.emitCropEvent("crop-reset")}async onBeforeDestroy(){await super.onBeforeDestroy(),this.cropMode=!1,this.isDragging=!1,this.isResizing=!1,document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.emitCropEvent("destroyed")}static async showDialog(t,i={}){const{title:a="Crop Image",alt:s="Image",size:n="xl",aspectRatio:o=null,minCropSize:r=50,showGrid:l=!0,showToolbar:h=!1,autoFit:c=!0,fixedCropSize:d=null,cropAndScale:m=null,canvasSize:u=n||"auto",...g}=i,p=new ImageCropView({imageUrl:t,alt:s,title:a,aspectRatio:o,minCropSize:r,canvasSize:u||n||"md",fixedCropSize:d,cropAndScale:m,showGrid:l,showToolbar:h,autoFit:c}),v=new e({title:a,body:p,size:n,centered:!0,backdrop:"static",keyboard:!0,noBodyPadding:!0,buttons:[{text:"Cancel",action:"cancel",class:"btn btn-secondary",dismiss:!0},{text:"Apply Crop",action:"apply-crop",class:"btn btn-primary"}],...g});return await v.render(!0,document.body),v.show(),v.on("shown",()=>{if(p.setupCanvas&&p.setupCanvas(),p.isLoaded&&p.canvasWidth>0)p.startCropMode();else{const t=setInterval(()=>{p.isLoaded&&p.canvasWidth>0&&(clearInterval(t),p.startCropMode())},100);setTimeout(()=>clearInterval(t),5e3)}}),new Promise(t=>{v.on("hidden",()=>{v.destroy(),t({action:"cancel",view:p})}),v.on("action:cancel",()=>{v.hide()}),v.on("action:apply-crop",async()=>{let e;if(p.cropMode&&p.cropBox)e=await p.applyCrop();else{const t=p.canvas.toDataURL("image/png");e={canvas:p.canvas,imageData:t,cropData:null}}v.hide(),t({action:"crop",view:p,data:e?.imageData,cropData:e?.cropData})})})}}window.ImageCropView=ImageCropView;class ImageFiltersView extends ImageCanvasView{constructor(t={}){super({...t,className:`image-filters-view ${t.className||""}`}),this.filters={brightness:100,contrast:100,saturation:100,hue:0,blur:0,grayscale:0,sepia:0},this.showControls=t.showControls??!0,this.allowReset=t.allowReset??!0,this.showPresets=t.showPresets??!0,this.showBasicControls=t.showBasicControls??!0,this.showAdvancedControls=t.showAdvancedControls??!0,this.controlsInDropdowns=t.controlsInDropdowns??!0,this.presetEffects={none:{name:"Original",filters:{}},blackWhite:{name:"Black & White",filters:{grayscale:100}},sepia:{name:"Sepia",filters:{sepia:100}},vintage:{name:"Vintage",filters:{sepia:60,contrast:110,brightness:110,saturation:80}},cool:{name:"Cool Tones",filters:{hue:200,saturation:120,brightness:95}},warm:{name:"Warm Tones",filters:{hue:25,saturation:110,brightness:105}},vibrant:{name:"Vibrant",filters:{brightness:105,contrast:115,saturation:140,hue:5}},dramatic:{name:"Dramatic",filters:{brightness:90,contrast:150,saturation:120}},soft:{name:"Soft",filters:{brightness:110,contrast:85,blur:1}}},this.currentPreset="none"}async getTemplate(){return'\n      <div class="image-filters-container d-flex flex-column h-100">\n        {{#showControls}}\n        \x3c!-- Filter Toolbar --\x3e\n        <div class="image-filters-toolbar bg-light border-bottom p-2">\n          <div class="btn-toolbar justify-content-center flex-wrap" role="toolbar">\n\n            {{#showPresets}}\n            \x3c!-- Preset Effects --\x3e\n            <div class="btn-group me-2 mb-2" role="group" aria-label="Preset effects">\n              <div class="dropdown">\n                <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle"\n                        data-bs-toggle="dropdown" aria-expanded="false" title="Preset Effects">\n                  <i class="bi bi-palette"></i> Effects\n                </button>\n                <ul class="dropdown-menu">\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="none">Original</a></li>\n                  <li><hr class="dropdown-divider"></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="blackWhite">Black & White</a></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="sepia">Sepia</a></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="vintage">Vintage</a></li>\n                  <li><hr class="dropdown-divider"></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="cool">Cool Tones</a></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="warm">Warm Tones</a></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="vibrant">Vibrant</a></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="dramatic">Dramatic</a></li>\n                  <li><a class="dropdown-item" href="#" data-action="apply-preset" data-preset="soft">Soft</a></li>\n                </ul>\n              </div>\n            </div>\n            {{/showPresets}}\n\n            {{#showBasicControls}}\n            {{#controlsInDropdowns}}\n            \x3c!-- Basic Controls in Dropdown --\x3e\n            <div class="btn-group me-2 mb-2" role="group" aria-label="Basic controls">\n              <div class="dropdown">\n                <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle"\n                        data-bs-toggle="dropdown" aria-expanded="false" title="Basic Adjustments">\n                  <i class="bi bi-sliders"></i> Basic\n                </button>\n                <div class="dropdown-menu p-3" style="min-width: 300px;">\n                  <div class="mb-3">\n                    <label class="form-label small fw-bold">Brightness</label>\n                    <input type="range" class="form-range"\n                           min="0" max="200" value="{{filters.brightness}}"\n                           data-change-action="filter-change" data-filter="brightness">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0%</small>\n                      <small class="text-muted filter-value" data-filter="brightness">{{filters.brightness}}%</small>\n                      <small class="text-muted">200%</small>\n                    </div>\n                  </div>\n                  <div class="mb-3">\n                    <label class="form-label small fw-bold">Contrast</label>\n                    <input type="range" class="form-range"\n                           min="0" max="200" value="{{filters.contrast}}"\n                           data-change-action="filter-change" data-filter="contrast">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0%</small>\n                      <small class="text-muted filter-value" data-filter="contrast">{{filters.contrast}}%</small>\n                      <small class="text-muted">200%</small>\n                    </div>\n                  </div>\n                  <div class="mb-0">\n                    <label class="form-label small fw-bold">Saturation</label>\n                    <input type="range" class="form-range"\n                           min="0" max="200" value="{{filters.saturation}}"\n                           data-change-action="filter-change" data-filter="saturation">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0%</small>\n                      <small class="text-muted filter-value" data-filter="saturation">{{filters.saturation}}%</small>\n                      <small class="text-muted">200%</small>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            {{/controlsInDropdowns}}\n            {{/showBasicControls}}\n\n            {{#showAdvancedControls}}\n            {{#controlsInDropdowns}}\n            \x3c!-- Advanced Controls in Dropdown --\x3e\n            <div class="btn-group me-2 mb-2" role="group" aria-label="Advanced controls">\n              <div class="dropdown">\n                <button type="button" class="btn btn-outline-warning btn-sm dropdown-toggle"\n                        data-bs-toggle="dropdown" aria-expanded="false" title="Advanced Adjustments">\n                  <i class="bi bi-gear"></i> Advanced\n                </button>\n                <div class="dropdown-menu p-3" style="min-width: 300px;">\n                  <div class="mb-3">\n                    <label class="form-label small fw-bold">Hue</label>\n                    <input type="range" class="form-range"\n                           min="0" max="360" value="{{filters.hue}}"\n                           data-change-action="filter-change" data-filter="hue">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0°</small>\n                      <small class="text-muted filter-value" data-filter="hue">{{filters.hue}}°</small>\n                      <small class="text-muted">360°</small>\n                    </div>\n                  </div>\n                  <div class="mb-3">\n                    <label class="form-label small fw-bold">Blur</label>\n                    <input type="range" class="form-range"\n                           min="0" max="10" value="{{filters.blur}}"\n                           data-change-action="filter-change" data-filter="blur">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0px</small>\n                      <small class="text-muted filter-value" data-filter="blur">{{filters.blur}}px</small>\n                      <small class="text-muted">10px</small>\n                    </div>\n                  </div>\n                  <div class="mb-3">\n                    <label class="form-label small fw-bold">Grayscale</label>\n                    <input type="range" class="form-range"\n                           min="0" max="100" value="{{filters.grayscale}}"\n                           data-change-action="filter-change" data-filter="grayscale">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0%</small>\n                      <small class="text-muted filter-value" data-filter="grayscale">{{filters.grayscale}}%</small>\n                      <small class="text-muted">100%</small>\n                    </div>\n                  </div>\n                  <div class="mb-0">\n                    <label class="form-label small fw-bold">Sepia</label>\n                    <input type="range" class="form-range"\n                           min="0" max="100" value="{{filters.sepia}}"\n                           data-change-action="filter-change" data-filter="sepia">\n                    <div class="d-flex justify-content-between">\n                      <small class="text-muted">0%</small>\n                      <small class="text-muted filter-value" data-filter="sepia">{{filters.sepia}}%</small>\n                      <small class="text-muted">100%</small>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            {{/controlsInDropdowns}}\n            {{/showAdvancedControls}}\n\n            {{#allowReset}}\n            \x3c!-- Reset & Preview Controls --\x3e\n            <div class="btn-group me-2 mb-2" role="group" aria-label="Reset controls">\n              <button type="button" class="btn btn-outline-secondary btn-sm" data-action="reset-filters" title="Reset All Filters">\n                <i class="bi bi-arrow-repeat"></i> Reset\n              </button>\n              <button type="button" class="btn btn-outline-info btn-sm" data-action="preview-original" title="Preview Original"\n                      onmousedown="this.dataset.previewing=\'true\'"\n                      onmouseup="this.dataset.previewing=\'false\'"\n                      onmouseleave="this.dataset.previewing=\'false\'">\n                <i class="bi bi-eye"></i> Original\n              </button>\n            </div>\n            {{/allowReset}}\n\n          </div>\n        </div>\n        {{/showControls}}\n\n        \x3c!-- Canvas Area --\x3e\n        <div class="image-canvas-content flex-grow-1 position-relative d-flex justify-content-center align-items-center">\n          <canvas class="image-filters-canvas" data-container="canvas"></canvas>\n\n          \x3c!-- Loading Overlay --\x3e\n          <div class="image-canvas-loading position-absolute top-50 start-50 translate-middle"\n               style="display: none; z-index: 10;">\n            <div class="spinner-border text-primary" role="status">\n              <span class="visually-hidden">Loading...</span>\n            </div>\n          </div>\n        </div>\n\n        {{#showControls}}\n        {{^controlsInDropdowns}}\n        \x3c!-- Expanded Controls Panel (when not in dropdowns) --\x3e\n        <div class="image-filters-controls bg-light border-top p-3" data-container="controls" style="max-height: 300px; overflow-y: auto;">\n          <div class="row g-3">\n            {{#showBasicControls}}\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Brightness</label>\n              <input type="range" class="form-range"\n                     min="0" max="200" value="{{filters.brightness}}"\n                     data-change-action="filter-change" data-filter="brightness">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0%</small>\n                <small class="text-muted filter-value" data-filter="brightness">{{filters.brightness}}%</small>\n                <small class="text-muted">200%</small>\n              </div>\n            </div>\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Contrast</label>\n              <input type="range" class="form-range"\n                     min="0" max="200" value="{{filters.contrast}}"\n                     data-change-action="filter-change" data-filter="contrast">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0%</small>\n                <small class="text-muted filter-value" data-filter="contrast">{{filters.contrast}}%</small>\n                <small class="text-muted">200%</small>\n              </div>\n            </div>\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Saturation</label>\n              <input type="range" class="form-range"\n                     min="0" max="200" value="{{filters.saturation}}"\n                     data-change-action="filter-change" data-filter="saturation">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0%</small>\n                <small class="text-muted filter-value" data-filter="saturation">{{filters.saturation}}%</small>\n                <small class="text-muted">200%</small>\n              </div>\n            </div>\n            {{/showBasicControls}}\n\n            {{#showAdvancedControls}}\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Hue</label>\n              <input type="range" class="form-range"\n                     min="0" max="360" value="{{filters.hue}}"\n                     data-change-action="filter-change" data-filter="hue">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0°</small>\n                <small class="text-muted filter-value" data-filter="hue">{{filters.hue}}°</small>\n                <small class="text-muted">360°</small>\n              </div>\n            </div>\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Blur</label>\n              <input type="range" class="form-range"\n                     min="0" max="10" value="{{filters.blur}}"\n                     data-change-action="filter-change" data-filter="blur">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0px</small>\n                <small class="text-muted filter-value" data-filter="blur">{{filters.blur}}px</small>\n                <small class="text-muted">10px</small>\n              </div>\n            </div>\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Grayscale</label>\n              <input type="range" class="form-range"\n                     min="0" max="100" value="{{filters.grayscale}}"\n                     data-change-action="filter-change" data-filter="grayscale">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0%</small>\n                <small class="text-muted filter-value" data-filter="grayscale">{{filters.grayscale}}%</small>\n                <small class="text-muted">100%</small>\n              </div>\n            </div>\n            <div class="col-md-6 col-lg-4">\n              <label class="form-label small fw-bold">Sepia</label>\n              <input type="range" class="form-range"\n                     min="0" max="100" value="{{filters.sepia}}"\n                     data-change-action="filter-change" data-filter="sepia">\n              <div class="d-flex justify-content-between">\n                <small class="text-muted">0%</small>\n                <small class="text-muted filter-value" data-filter="sepia">{{filters.sepia}}%</small>\n                <small class="text-muted">100%</small>\n              </div>\n            </div>\n            {{/showAdvancedControls}}\n          </div>\n        </div>\n        {{/controlsInDropdowns}}\n        {{/showControls}}\n      </div>\n    '}async onAfterRender(){await super.onAfterRender(),this.controlsElement=this.element.querySelector(".image-filters-controls")}setupCanvas(){this.canvas&&this.containerElement&&(this.setCanvasSize(this.canvasSize),"fullscreen"!==this.canvasSize&&"auto"!==this.canvasSize||(this._resizeHandler=()=>this.setCanvasSize(this.canvasSize),window.addEventListener("resize",this._resizeHandler)),this.context.imageSmoothingEnabled=!0,this.context.imageSmoothingQuality="high")}setCanvasSize(t){if(this.canvas&&this.containerElement){if("auto"===t){const t=this.containerElement;let e=t.clientWidth-40,i=t.clientHeight-40;if(e<=40||i<=40){let a=t.parentElement;for(;a&&(a.clientWidth<=40||a.clientHeight<=40)&&(a=a.parentElement,!a||!(a.classList.contains("modal-body")||a.classList.contains("card-body")||a.classList.contains("dialog-body")||"MAIN"===a.tagName||"BODY"===a.tagName)););a&&(e=a.clientWidth-80,i=a.clientHeight-80)}if(e>100&&i>100){let t,a;if(this.image){const s=this.image.naturalWidth/this.image.naturalHeight;s>e/i?(t=e,a=e/s):(a=i,t=i*s),t=Math.max(300,Math.floor(t)),a=Math.max(200,Math.floor(a))}else t=Math.min(600,Math.max(300,e)),a=Math.min(450,Math.max(200,i));return void this.applyCanvasSize(t,a)}}super.setCanvasSize(t)}}applyCanvasSize(t,e){if(Math.abs(t-this.canvasWidth)<10&&Math.abs(e-this.canvasHeight)<10)return;const i=window.devicePixelRatio||1;this.canvasWidth=t,this.canvasHeight=e,this.canvas.width=t*i,this.canvas.height=e*i,this.canvas.style.width=t+"px",this.canvas.style.height=e+"px",this.context.setTransform(i,0,0,i,0,0),this.isLoaded&&this.renderCanvas()}async loadImage(t){await super.loadImage(t),this.renderCanvas()}renderImage(){if(!this.image)return;this.context.filter=this.getFilterString();const t=Math.min(this.canvasWidth/this.image.naturalWidth,this.canvasHeight/this.image.naturalHeight),e=this.image.naturalWidth*t,i=this.image.naturalHeight*t,a=(this.canvasWidth-e)/2,s=(this.canvasHeight-i)/2;this.context.drawImage(this.image,a,s,e,i),this.context.filter="none"}getCombinedFilters(){const t={...this.filters};if("none"!==this.currentPreset&&this.presetEffects[this.currentPreset]){const e=this.presetEffects[this.currentPreset].filters;e&&Object.assign(t,e)}return t}getFilterString(){const t=this.getCombinedFilters();return this.hasFilters()||"none"!==this.currentPreset?[`brightness(${t.brightness}%)`,`contrast(${t.contrast}%)`,`saturate(${t.saturation}%)`,`hue-rotate(${t.hue}deg)`,`blur(${t.blur}px)`,`grayscale(${t.grayscale}%)`,`sepia(${t.sepia}%)`].join(" "):"none"}hasFilters(){return 100!==this.filters.brightness||100!==this.filters.contrast||100!==this.filters.saturation||0!==this.filters.hue||0!==this.filters.blur||0!==this.filters.grayscale||0!==this.filters.sepia}async onPassThruActionResetFilters(){this.resetFilters()}async onPassThruActionApplyPreset(t,e){t.preventDefault();const i=e.getAttribute("data-preset");i&&this.presetEffects[i]&&this.applyPreset(i)}async onPassThruActionPreviewOriginal(t,e){if("true"===e.dataset.previewing){this.context.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.context.filter="none";const t=(this.canvasWidth-this.image.naturalWidth)/2,e=(this.canvasHeight-this.image.naturalHeight)/2;this.context.drawImage(this.image,t,e)}else this.renderCanvas()}async onChangeFilterChange(t,e){const i=e.getAttribute("data-filter"),a=parseFloat(e.value);this.updateFilter(i,a)}updateFilter(t,e){if(!(t in this.filters))return;const i=this.filters[t];this.filters[t]=e,this.updateFilterDisplay(t,e),this.renderCanvas(),this.emitFilterEvent("filter-changed",{filter:t,oldValue:i,newValue:e,allFilters:{...this.filters}})}updateFilterDisplay(t,e){const i=this.element.querySelector(`[data-filter="${t}"].filter-value`);if(i){const a="hue"===t?"°":"blur"===t?"px":"%";i.textContent=`${e}${a}`}}resetFilters(){const t={...this.filters},e=this.currentPreset;this.filters={brightness:100,contrast:100,saturation:100,hue:0,blur:0,grayscale:0,sepia:0},this.currentPreset="none",this.updateAllFilterInputs(),this.renderCanvas(),this.emitFilterEvent("filters-reset",{oldFilters:t,newFilters:{...this.filters},oldPreset:e,newPreset:this.currentPreset})}updateAllFilterInputs(){Object.keys(this.filters).forEach(t=>{const e=this.element.querySelector(`[data-filter="${t}"][type="range"]`);e&&(e.value=this.filters[t],this.updateFilterDisplay(t,this.filters[t]))})}applyPreset(t){this.presetEffects[t]&&(this.presetEffects[t],this.currentPreset=t,this.currentPreset=t,this.renderCanvas(),this.emitFilterEvent("preset-applied",{preset:t,filters:{...this.filters}}))}getFilterState(){return{...this.filters}}setFilterState(t){this.filters={...this.filters,...t},this.updateAllFilterInputs(),this.renderCanvas(),this.emitFilterEvent("filters-set",{filters:{...this.filters}})}exportFilteredImageData(){return this.canvas?this.exportImageData():null}async exportFilteredImageBlob(t=.9){return this.canvas?this.exportImageBlob(t):null}createFilteredCanvas(){if(!this.image)return null;const t=document.createElement("canvas"),e=t.getContext("2d");return t.width=this.image.naturalWidth,t.height=this.image.naturalHeight,e.filter=this.getFilterString(),e.drawImage(this.image,0,0),e.filter="none",t}emitFilterEvent(t,e={}){const i=this.getApp()?.events;i&&i.emit(`imagefilters:${t}`,{view:this,hasFilters:this.hasFilters(),filterString:this.getFilterString(),...e})}handleImageLoad(){super.handleImageLoad(),this.emitFilterEvent("ready",{filters:{...this.filters}})}async onBeforeDestroy(){await super.onBeforeDestroy(),this._resizeHandler&&window.removeEventListener("resize",this._resizeHandler),this.emitFilterEvent("destroyed")}static async showDialog(t,i={}){const{title:a="Apply Filters",alt:s="Image",size:n="xl",showControls:o=!0,allowReset:r=!0,showPresets:l=!0,showBasicControls:h=!0,showAdvancedControls:c=!0,controlsInDropdowns:d=!0,canvasSize:m="auto",autoFit:u=!0,crossOrigin:g="anonymous",...p}=i,v=new ImageFiltersView({imageUrl:t,alt:s,title:a,canvasSize:m,autoFit:u,crossOrigin:g,showControls:o,allowReset:r,showPresets:l,showBasicControls:h,showAdvancedControls:c,controlsInDropdowns:d}),w=new e({title:a,body:v,size:n,centered:!0,backdrop:"static",keyboard:!0,noBodyPadding:!0,buttons:[{text:"Cancel",action:"cancel",class:"btn btn-secondary",dismiss:!0},{text:"Apply Filters",action:"apply-filters",class:"btn btn-primary"}],...p});return await w.render(!0,document.body),w.show(),new Promise(t=>{w.on("hidden",()=>{w.destroy(),t({action:"cancel",view:v})}),w.on("action:cancel",()=>{w.hide()}),w.on("action:apply-filters",async()=>{const e=v.exportFilteredImageData();w.hide(),t({action:"filters",view:v,data:e,filterState:v.getFilterState()})})})}}window.ImageFiltersView=ImageFiltersView;class ImageEditor extends t{constructor(t={}){super({...t,className:`image-editor ${t.className||""}`,tagName:"div"}),this.imageUrl=t.imageUrl||t.src||"",this.alt=t.alt||"Image",this.title=t.title||"",this.currentImageData=null,this.currentMode=t.startMode||"transform",this.history=[],this.historyIndex=-1,this.maxHistory=t.maxHistory||20,this.showToolbar=!1!==t.showToolbar,this.allowTransform=!1!==t.allowTransform,this.allowCrop=!1!==t.allowCrop,this.allowFilters=!1!==t.allowFilters,this.allowExport=!1!==t.allowExport,this.allowHistory=!1!==t.allowHistory,this.currentView=null,this.isInitialized=!1}async getTemplate(){return'\n      <div class="image-editor-container d-flex flex-column h-100">\n        {{#showToolbar}}\n        \x3c!-- Toolbar --\x3e\n        <div class="image-editor-toolbar bg-light border-bottom p-3" data-container="toolbar">\n          <div class="d-flex justify-content-between align-items-center">\n            \x3c!-- Mode Buttons --\x3e\n            <div class="btn-group" role="group" aria-label="Editing modes">\n              {{#allowTransform}}\n              <button type="button" class="btn btn-outline-primary mode-btn"\n                      data-action="switch-mode" data-mode="transform"\n                      title="Transform: Zoom, Pan, Rotate">\n                <i class="bi bi-arrows-move"></i> Transform\n              </button>\n              {{/allowTransform}}\n\n              {{#allowCrop}}\n              <button type="button" class="btn btn-outline-primary mode-btn"\n                      data-action="switch-mode" data-mode="crop"\n                      title="Crop: Select and crop image">\n                <i class="bi bi-crop"></i> Crop\n              </button>\n              {{/allowCrop}}\n\n              {{#allowFilters}}\n              <button type="button" class="btn btn-outline-primary mode-btn"\n                      data-action="switch-mode" data-mode="filters"\n                      title="Filters: Brightness, Contrast, Effects">\n                <i class="bi bi-palette"></i> Filters\n              </button>\n              {{/allowFilters}}\n            </div>\n\n            \x3c!-- Action Buttons --\x3e\n            <div class="btn-group" role="group" aria-label="Actions">\n              {{#allowHistory}}\n              <button type="button" class="btn btn-outline-secondary btn-sm"\n                      data-action="undo" title="Undo" disabled>\n                <i class="bi bi-arrow-counterclockwise"></i>\n              </button>\n              <button type="button" class="btn btn-outline-secondary btn-sm"\n                      data-action="redo" title="Redo" disabled>\n                <i class="bi bi-arrow-clockwise"></i>\n              </button>\n              {{/allowHistory}}\n\n              <button type="button" class="btn btn-outline-secondary btn-sm"\n                      data-action="reset" title="Reset All Changes">\n                <i class="bi bi-arrow-repeat"></i>\n              </button>\n\n              {{#allowExport}}\n              <button type="button" class="btn btn-success btn-sm"\n                      data-action="export" title="Export Image">\n                <i class="bi bi-download"></i> Export\n              </button>\n              {{/allowExport}}\n            </div>\n          </div>\n\n\n        </div>\n        {{/showToolbar}}\n\n        \x3c!-- Main editing area where child views will be mounted --\x3e\n        <div class="image-editor-workspace flex-grow-1 position-relative" data-container="image-workspace">\n          \x3c!-- Child views will be added here dynamically --\x3e\n        </div>\n\n        \x3c!-- Status bar --\x3e\n        <div class="image-editor-status bg-light border-top p-2" data-container="status">\n          <div class="d-flex justify-content-between align-items-center">\n            <small class="text-muted">\n              Mode: <span class="current-mode fw-bold">Transform</span>\n            </small>\n            <small class="text-muted">\n              <span class="image-info">Ready</span>\n            </small>\n          </div>\n        </div>\n      </div>\n    '}async onAfterRender(){this.toolbarElement=this.element.querySelector(".image-editor-toolbar"),this.workspaceElement=this.element.querySelector(".image-editor-workspace"),this.statusElement=this.element.querySelector(".image-editor-status"),this.setupChildViewEvents(),await this.switchMode(this.currentMode,!0),this.saveState(),this.isInitialized=!0}createChildView(t){const e=this.currentImageData||this.imageUrl;this.currentImageData;const i={parent:this,containerId:"image-workspace",imageUrl:e,alt:this.alt,title:this.title};switch(t){case"transform":return this.allowTransform?new ImageTransformView({...i,allowPan:!0,allowZoom:!0,allowRotate:!0}):null;case"crop":return this.allowCrop?new ImageCropView({...i,showGrid:!0,minCropSize:50}):null;case"filters":return this.allowFilters?new ImageFiltersView({...i,showControls:!0,allowReset:!0}):null;default:return null}}setupChildViewEvents(){const t=this.getApp()?.events;t&&(t.on("imagetransform:scale-changed",()=>this.saveState()),t.on("imagetransform:rotated",()=>this.saveState()),t.on("imagetransform:reset",()=>this.saveState()),t.on("imagecrop:crop-applied",t=>{const e=this.getCurrentImageData();e&&(this.currentImageData=e),this.saveState(),this.updateStatus("Crop applied successfully"),this.updateHistoryButtons()}),t.on("imagefilters:filter-changed",()=>{this.saveState(),this.updateStatus("Filter applied")}),t.on("imagefilters:filters-reset",()=>{this.saveState(),this.updateStatus("Filters reset")}))}async handleActionSwitchMode(t,e){const i=e.getAttribute("data-mode");await this.switchMode(i)}async handleActionUndo(){this.undo()}async handleActionRedo(){this.redo()}async handleActionReset(){await this.resetAll()}async handleActionExport(){await this.exportImage()&&this.updateStatus("Image exported successfully")}async switchMode(t,e=!1){if(t===this.currentMode&&!e)return;if(this.currentView&&!e){const t=this.getCurrentImageData();t?(this.currentMode,this.currentImageData=t):this.currentMode}this.currentView&&(await this.currentView.destroy(),this.currentView=null),this.element.querySelectorAll(".mode-btn").forEach(e=>{e.classList.remove("active"),e.getAttribute("data-mode")===t&&e.classList.add("active")}),this.currentMode=t,this.currentView=this.createChildView(t),this.currentView&&(await this.currentView.render(),"crop"===t&&this.currentView.startCropMode?(this.currentView.startCropMode(),this.updateStatus("Click and drag to select crop area")):"transform"===t?this.updateStatus("Use controls to transform the image"):"filters"===t&&this.updateStatus("Adjust filters to enhance the image")),this.updateCurrentModeDisplay();const i=this.getApp()?.events;i&&i.emit("imageeditor:mode-changed",{editor:this,mode:t,currentView:this.currentView})}updateCurrentModeDisplay(){const t=this.element.querySelector(".current-mode");t&&(t.textContent=this.currentMode.charAt(0).toUpperCase()+this.currentMode.slice(1))}updateStatus(t){const e=this.element.querySelector(".image-info");e&&(e.textContent=t)}saveState(){if(!this.isInitialized)return;const t={mode:this.currentMode,transform:this.currentView?.getTransformState?.(),filters:this.currentView?.getFilterState?.(),imageData:this.currentImageData,timestamp:Date.now()};this.history=this.history.slice(0,this.historyIndex+1),this.history.push(t),this.historyIndex=this.history.length-1,this.history.length>this.maxHistory&&(this.history.shift(),this.historyIndex--),this.updateHistoryButtons()}undo(){this.historyIndex>0&&(this.historyIndex--,this.restoreState(this.history[this.historyIndex]))}redo(){this.historyIndex<this.history.length-1&&(this.historyIndex++,this.restoreState(this.history[this.historyIndex]))}async restoreState(t){t.imageData&&(this.currentImageData=t.imageData),await this.switchMode(t.mode,!0),this.currentView&&(t.transform&&this.currentView.setTransformState&&this.currentView.setTransformState(t.transform),t.filters&&this.currentView.setFilterState&&this.currentView.setFilterState(t.filters)),this.updateHistoryButtons(),this.updateStatus(`Restored to ${t.mode} mode`)}updateHistoryButtons(){const t=this.element.querySelector('[data-action="undo"]'),e=this.element.querySelector('[data-action="redo"]');t&&(t.disabled=this.historyIndex<=0),e&&(e.disabled=this.historyIndex>=this.history.length-1)}async resetAll(){this.currentImageData=null,this.currentView&&this.currentView.reset&&this.currentView.reset(),await this.switchMode("transform",!0),this.history=[],this.historyIndex=-1,this.saveState(),this.updateStatus("All changes reset")}async exportImage(){if(!this.currentView)return null;try{let t=null;if(t=this.getCurrentImageData(),t){const e=document.createElement("a");e.download=this.getExportFilename(),e.href=t,document.body.appendChild(e),e.click(),document.body.removeChild(e);const i=this.getApp()?.events;return i&&i.emit("imageeditor:exported",{editor:this,imageData:t,filename:e.download}),{imageData:t,filename:e.download}}}catch(t){console.error("Export failed:",t),this.updateStatus("Export failed")}return null}getExportFilename(){return`edited-image-${/* @__PURE__ */(new Date).toISOString().slice(0,19).replace(/[:\-]/g,"")}.png`}async setImage(t,e="",i=""){this.imageUrl=t,this.alt=e,this.title=i,this.currentImageData=null,this.currentView&&this.currentView.setImage&&this.currentView.setImage(t,e,i),await this.resetAll()}getCurrentImageData(){if(!this.currentView)return null;let t=null;return this.currentView.exportImageData?t=this.currentView.exportImageData():this.currentView.exportFilteredImageData&&(t=this.currentView.exportFilteredImageData()),t||null}async onBeforeDestroy(){this.currentView&&(await this.currentView.destroy(),this.currentView=null);const t=this.getApp()?.events;t&&t.emit("imageeditor:destroyed",{editor:this})}static async showDialog(t,i={}){const{title:a="Image Editor",alt:s="Image",size:n="fullscreen",showToolbar:o=!0,allowTransform:r=!0,allowCrop:l=!0,allowFilters:h=!0,allowExport:c=!0,...d}=i,m=new ImageEditor({imageUrl:t,alt:s,title:a,showToolbar:o,allowTransform:r,allowCrop:l,allowFilters:h,allowExport:c}),u=new e({title:a,body:m,size:n,centered:!0,backdrop:"static",keyboard:!0,buttons:[{text:"Cancel",action:"cancel",class:"btn btn-secondary",dismiss:!0},{text:"Export & Close",action:"export-close",class:"btn btn-primary"}],...d});return await u.render(!0,document.body),window.lastDialog=u,u.show(),new Promise(t=>{u.on("hidden",()=>{u.destroy(),t({action:"cancel",editor:m})}),u.on("action:cancel",()=>{u.hide()}),u.on("action:export-close",async()=>{const e=await m.exportImage();u.hide(),t({action:"export",editor:m,data:e?.imageData,filename:e?.filename})})})}}window.ImageEditor=ImageEditor;class ImageUploadView extends t{constructor(t={}){super({...t,className:`image-upload-view ${t.className||""}`,tagName:"div"}),this.autoUpload=t.autoUpload||!1,this.acceptedTypes=t.acceptedTypes||["image/jpeg","image/png","image/gif","image/webp"],this.maxFileSize=t.maxFileSize||10485760,this.uploadUrl=t.uploadUrl||null,this.onUpload=t.onUpload||null,this.selectedFile=null,this.isUploading=!1,this.previewUrl=null,this._handleDragOver=this.handleDragOver.bind(this),this._handleDragLeave=this.handleDragLeave.bind(this),this._handleDrop=this.handleDrop.bind(this),this._handleFileSelect=this.handleFileSelect.bind(this),this._preventDefaults=this.preventDefaults.bind(this)}async getTemplate(){return`\n      <div class="image-upload-container">\n        \x3c!-- Drop Zone --\x3e\n        <div class="upload-drop-zone border-2 border-dashed rounded p-4 text-center position-relative" \n             style="border-color: #dee2e6; min-height: 200px; transition: all 0.2s ease;">\n          \n          \x3c!-- Default State --\x3e\n          <div class="upload-prompt">\n            <i class="bi bi-cloud-upload text-muted" style="font-size: 3rem;"></i>\n            <h5 class="mt-3 text-muted">Drop your image here</h5>\n            <p class="text-muted mb-3">or</p>\n            <button type="button" class="btn btn-outline-primary" data-action="select-file">\n              <i class="bi bi-folder2-open"></i> Choose File\n            </button>\n            <input type="file" class="upload-file-input d-none" accept="image/*" multiple="false">\n            <div class="mt-3">\n              <small class="text-muted">Supported: JPEG, PNG, GIF, WebP (max ${Math.round(this.maxFileSize/1024/1024)}MB)</small>\n            </div>\n          </div>\n          \n          \x3c!-- Preview State --\x3e\n          <div class="upload-preview d-none">\n            <div class="preview-image-container mb-3">\n              <img class="preview-image img-fluid rounded shadow-sm" style="max-height: 300px; max-width: 100%;">\n            </div>\n            <div class="preview-info">\n              <div class="file-name fw-bold mb-2 text-truncate"></div>\n              <div class="file-details text-muted small mb-3"></div>\n              <div class="upload-actions">\n                {{#autoUpload}}\n                <button type="button" class="btn btn-outline-secondary" data-action="clear">\n                  <i class="bi bi-x"></i> Clear\n                </button>\n                {{/autoUpload}}\n                {{^autoUpload}}\n                <button type="button" class="btn btn-success me-2" data-action="upload">\n                  <i class="bi bi-cloud-arrow-up"></i> Upload\n                </button>\n                <button type="button" class="btn btn-outline-secondary" data-action="clear">\n                  <i class="bi bi-x"></i> Clear\n                </button>\n                {{/autoUpload}}\n              </div>\n            </div>\n          </div>\n          \n          \x3c!-- Loading State --\x3e\n          <div class="upload-loading d-none">\n            <div class="spinner-border text-primary mb-3" role="status">\n              <span class="visually-hidden">Uploading...</span>\n            </div>\n            <div class="upload-progress">\n              <div class="progress mb-2" style="height: 8px;">\n                <div class="progress-bar progress-bar-striped progress-bar-animated" \n                     role="progressbar" style="width: 0%"></div>\n              </div>\n              <small class="text-muted upload-status">Uploading...</small>\n            </div>\n          </div>\n        </div>\n        \n        \x3c!-- Upload Result --\x3e\n        <div class="upload-result mt-3 d-none">\n          <div class="alert" role="alert"></div>\n        </div>\n      </div>\n    `}async onAfterRender(){this.dropZone=this.element.querySelector(".upload-drop-zone"),this.fileInput=this.element.querySelector(".upload-file-input"),this.promptElement=this.element.querySelector(".upload-prompt"),this.previewElement=this.element.querySelector(".upload-preview"),this.loadingElement=this.element.querySelector(".upload-loading"),this.resultElement=this.element.querySelector(".upload-result"),this.previewImage=this.element.querySelector(".preview-image"),this.fileName=this.element.querySelector(".file-name"),this.fileDetails=this.element.querySelector(".file-details"),this.progressBar=this.element.querySelector(".progress-bar"),this.uploadStatus=this.element.querySelector(".upload-status"),this.setupEventListeners()}setupEventListeners(){this.dropZone.addEventListener("dragenter",this._preventDefaults),this.dropZone.addEventListener("dragover",this._handleDragOver),this.dropZone.addEventListener("dragleave",this._handleDragLeave),this.dropZone.addEventListener("drop",this._handleDrop),this.fileInput.addEventListener("change",this._handleFileSelect),["dragenter","dragover","dragleave","drop"].forEach(t=>{document.addEventListener(t,this._preventDefaults)})}preventDefaults(t){t.preventDefault(),t.stopPropagation()}handleDragOver(t){this.preventDefaults(t),this.dropZone.classList.add("border-primary","bg-light"),this.dropZone.style.borderColor="#0d6efd"}handleDragLeave(t){this.preventDefaults(t),this.dropZone.contains(t.relatedTarget)||(this.dropZone.classList.remove("border-primary","bg-light"),this.dropZone.style.borderColor="#dee2e6")}async handleDrop(t){this.preventDefaults(t),this.dropZone.classList.remove("border-primary","bg-light"),this.dropZone.style.borderColor="#dee2e6";const e=Array.from(t.dataTransfer.files);e.length>0&&await this.processFile(e[0])}async handleFileSelect(t){const e=Array.from(t.target.files);e.length>0&&await this.processFile(e[0])}async processFile(t){const e=this.validateFile(t);e.valid?(this.selectedFile=t,await this.showPreview(t),this.autoUpload&&setTimeout(()=>this.uploadFile(),100)):this.showError(e.error)}validateFile(t){return this.acceptedTypes.includes(t.type)?t.size>this.maxFileSize?{valid:!1,error:`File size (${this.formatFileSize(t.size)}) exceeds maximum allowed size (${this.formatFileSize(this.maxFileSize)})`}:{valid:!0}:{valid:!1,error:`File type "${t.type}" is not supported. Please use: ${this.acceptedTypes.map(t=>t.split("/")[1].toUpperCase()).join(", ")}`}}async showPreview(t){this.previewUrl&&URL.revokeObjectURL(this.previewUrl),this.previewUrl=URL.createObjectURL(t),this.previewImage.src=this.previewUrl,this.fileName.textContent=t.name,this.fileDetails.textContent=`${this.formatFileSize(t.size)} • ${t.type.split("/")[1].toUpperCase()}`,this.promptElement.classList.add("d-none"),this.previewElement.classList.remove("d-none"),this.hideResult(),this.emitUploadEvent("preview",{file:t,previewUrl:this.previewUrl})}async uploadFile(){if(this.selectedFile&&!this.isUploading){this.isUploading=!0,this.showLoading();try{let t;if(this.onUpload&&"function"==typeof this.onUpload)t=await this.onUpload(this.selectedFile,this.updateProgress.bind(this));else{if(!this.uploadUrl)throw new Error("No upload method configured. Provide either uploadUrl or onUpload callback.");t=await this.uploadToUrl(this.selectedFile)}this.showSuccess("File uploaded successfully!"),this.emitUploadEvent("upload-success",{file:this.selectedFile,result:t})}catch(t){console.error("Upload failed:",t),this.showError(`Upload failed: ${t.message}`),this.emitUploadEvent("upload-error",{file:this.selectedFile,error:t})}finally{this.isUploading=!1,this.hideLoading()}}}async uploadToUrl(t){return new Promise((e,i)=>{const a=new FormData;a.append("image",t);const s=new XMLHttpRequest;s.upload.addEventListener("progress",t=>{if(t.lengthComputable){const e=Math.round(t.loaded/t.total*100);this.updateProgress(e)}}),s.addEventListener("load",()=>{if(s.status>=200&&s.status<300)try{const t=JSON.parse(s.responseText);e(t)}catch(t){e({success:!0,response:s.responseText})}else i(new Error(`HTTP ${s.status}: ${s.statusText}`))}),s.addEventListener("error",()=>{i(new Error("Network error occurred"))}),s.addEventListener("timeout",()=>{i(new Error("Upload timeout"))}),s.open("POST",this.uploadUrl),s.timeout=3e4,s.send(a)})}updateProgress(t){this.progressBar&&(this.progressBar.style.width=`${t}%`,this.progressBar.setAttribute("aria-valuenow",t)),this.uploadStatus&&(this.uploadStatus.textContent=`Uploading... ${t}%`)}showLoading(){this.previewElement.classList.add("d-none"),this.loadingElement.classList.remove("d-none"),this.updateProgress(0)}hideLoading(){this.loadingElement.classList.add("d-none"),this.autoUpload&&!this.selectedFile||this.previewElement.classList.remove("d-none")}showSuccess(t){this.showResult("success",t)}showError(t){this.showResult("danger",t)}showResult(t,e){const i=this.resultElement.querySelector(".alert"),a="success"===t?"check-circle-fill":"exclamation-triangle-fill";i.className=`alert alert-${t}`,i.innerHTML=`\n      <i class="bi bi-${a} me-2"></i>\n      ${e}\n    `,this.resultElement.classList.remove("d-none"),"success"===t&&setTimeout(()=>this.hideResult(),5e3)}hideResult(){this.resultElement.classList.add("d-none")}clearFile(){this.previewUrl&&(URL.revokeObjectURL(this.previewUrl),this.previewUrl=null),this.selectedFile=null,this.isUploading=!1,this.fileInput.value="",this.previewElement.classList.add("d-none"),this.loadingElement.classList.add("d-none"),this.promptElement.classList.remove("d-none"),this.hideResult(),this.emitUploadEvent("cleared")}formatFileSize(t){if(0===t)return"0 Bytes";const e=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,e)).toFixed(2))+" "+["Bytes","KB","MB","GB"][e]}emitUploadEvent(t,e={}){const i=this.getApp()?.events;i&&i.emit(`imageupload:${t}`,{view:this,...e})}async handleActionSelectFile(){this.fileInput.click()}async handleActionUpload(){await this.uploadFile()}async handleActionClear(){this.clearFile()}async onBeforeDestroy(){this.previewUrl&&(URL.revokeObjectURL(this.previewUrl),this.previewUrl=null),this.dropZone&&(this.dropZone.removeEventListener("dragenter",this._preventDefaults),this.dropZone.removeEventListener("dragover",this._handleDragOver),this.dropZone.removeEventListener("dragleave",this._handleDragLeave),this.dropZone.removeEventListener("drop",this._handleDrop)),this.fileInput&&this.fileInput.removeEventListener("change",this._handleFileSelect),["dragenter","dragover","dragleave","drop"].forEach(t=>{document.removeEventListener(t,this._preventDefaults)}),this.emitUploadEvent("destroyed")}}window.ImageUploadView=ImageUploadView;export{n as BUILD_TIME,ImageCanvasView,ImageCropView,ImageEditor,ImageFiltersView,ImageTransformView,ImageUploadView,ImageViewer,i as LightboxGallery,a as PDFViewer,o as VERSION,r as VERSION_INFO,l as VERSION_MAJOR,h as VERSION_MINOR,c as VERSION_REVISION,s as WebApp};
 //# sourceMappingURL=lightbox.es.js.map