web-mojo 2.1.46

package/dist/lightbox.es.js

@@ -0,0 +1,3737 @@
+import { V as View } from "./chunks/WebApp-B6mgbNn2.js";
+import { B, b, a, c, e, f, W } from "./chunks/WebApp-B6mgbNn2.js";
+import Dialog from "./chunks/Dialog-DSlctbon.js";
+import { L, P } from "./chunks/PDFViewer-Dyo-Oeyd.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", (e2) => this.handleMouseDown(e2));
+      document.addEventListener("mousemove", (e2) => this.handleMouseMove(e2));
+      document.addEventListener("mouseup", (e2) => this.handleMouseUp(e2));
+    }
+    if (this.allowZoom) {
+      this.canvas.addEventListener("wheel", (e2) => this.handleWheel(e2), { passive: false });
+    }
+    this.canvas.addEventListener("touchstart", (e2) => this.handleTouchStart(e2), { passive: false });
+    this.canvas.addEventListener("touchmove", (e2) => this.handleTouchMove(e2), { passive: false });
+    this.canvas.addEventListener("touchend", (e2) => this.handleTouchEnd(e2));
+    this.canvas.addEventListener("contextmenu", (e2) => e2.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(e2) {
+    if (!this.allowPan || e2.button !== 0) return;
+    e2.preventDefault();
+    this.isDragging = true;
+    const rect = this.canvas.getBoundingClientRect();
+    this.lastPointerX = e2.clientX - rect.left;
+    this.lastPointerY = e2.clientY - rect.top;
+    this.canvas.style.cursor = "grabbing";
+  }
+  handleMouseMove(e2) {
+    if (!this.isDragging || !this.allowPan) return;
+    e2.preventDefault();
+    const rect = this.canvas.getBoundingClientRect();
+    const currentX = e2.clientX - rect.left;
+    const currentY = e2.clientY - rect.top;
+    const deltaX = currentX - this.lastPointerX;
+    const deltaY = currentY - this.lastPointerY;
+    this.pan(deltaX, deltaY);
+    this.lastPointerX = currentX;
+    this.lastPointerY = currentY;
+  }
+  handleMouseUp(e2) {
+    if (!this.isDragging) return;
+    this.isDragging = false;
+    this.canvas.style.cursor = this.allowPan ? "grab" : "default";
+  }
+  handleWheel(e2) {
+    if (!this.allowZoom) return;
+    e2.preventDefault();
+    const rect = this.canvas.getBoundingClientRect();
+    const x = e2.clientX - rect.left;
+    const y = e2.clientY - rect.top;
+    const delta = e2.deltaY > 0 ? -this.scaleStep * 0.5 : this.scaleStep * 0.5;
+    this.zoomAtPoint(this.scale + delta, x, y);
+  }
+  // Touch events
+  handleTouchStart(e2) {
+    if (e2.touches.length === 1 && this.allowPan) {
+      e2.preventDefault();
+      const touch = e2.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      this.isDragging = true;
+      this.lastPointerX = touch.clientX - rect.left;
+      this.lastPointerY = touch.clientY - rect.top;
+    }
+  }
+  handleTouchMove(e2) {
+    if (e2.touches.length === 1 && this.isDragging && this.allowPan) {
+      e2.preventDefault();
+      const touch = e2.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(e2) {
+    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 (e2) {
+    }
+    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", (e2) => this.handleMouseDown(e2));
+      document.addEventListener("mousemove", this._handleMouseMove);
+      document.addEventListener("mouseup", this._handleMouseUp);
+    }
+    if (this.allowZoom) {
+      this.canvas.addEventListener("wheel", (e2) => this.handleWheel(e2), { passive: false });
+    }
+    this.canvas.addEventListener("touchstart", (e2) => this.handleTouchStart(e2), { passive: false });
+    this.canvas.addEventListener("touchmove", (e2) => this.handleTouchMove(e2), { passive: false });
+    this.canvas.addEventListener("touchend", (e2) => this.handleTouchEnd(e2));
+    if (this.allowKeyboard) {
+      document.addEventListener("keydown", this._handleKeyboard);
+    }
+    this.canvas.addEventListener("contextmenu", (e2) => e2.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(e2) {
+    if (!this.allowPan || e2.button !== 0) return;
+    e2.preventDefault();
+    this.isDragging = true;
+    const rect = this.canvas.getBoundingClientRect();
+    this.lastPointerX = e2.clientX - rect.left;
+    this.lastPointerY = e2.clientY - rect.top;
+    this.canvas.style.cursor = "grabbing";
+  }
+  handleMouseMove(e2) {
+    if (!this.isDragging || !this.allowPan) return;
+    e2.preventDefault();
+    const rect = this.canvas.getBoundingClientRect();
+    const currentX = e2.clientX - rect.left;
+    const currentY = e2.clientY - rect.top;
+    const deltaX = currentX - this.lastPointerX;
+    const deltaY = currentY - this.lastPointerY;
+    this.pan(deltaX, deltaY);
+    this.lastPointerX = currentX;
+    this.lastPointerY = currentY;
+  }
+  handleMouseUp(e2) {
+    if (!this.isDragging) return;
+    this.isDragging = false;
+    this.canvas.style.cursor = this.allowPan ? "grab" : "default";
+  }
+  handleWheel(e2) {
+    if (!this.allowZoom) return;
+    e2.preventDefault();
+    const rect = this.canvas.getBoundingClientRect();
+    const x = e2.clientX - rect.left;
+    const y = e2.clientY - rect.top;
+    const delta = e2.deltaY > 0 ? -this.scaleStep * 0.5 : this.scaleStep * 0.5;
+    this.zoomAtPoint(this.scale + delta, x, y);
+  }
+  // Touch events
+  handleTouchStart(e2) {
+    if (e2.touches.length === 1 && this.allowPan) {
+      e2.preventDefault();
+      const touch = e2.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      this.isDragging = true;
+      this.lastPointerX = touch.clientX - rect.left;
+      this.lastPointerY = touch.clientY - rect.top;
+    }
+  }
+  handleTouchMove(e2) {
+    if (e2.touches.length === 1 && this.isDragging && this.allowPan) {
+      e2.preventDefault();
+      const touch = e2.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(e2) {
+    this.isDragging = false;
+  }
+  // Keyboard shortcuts
+  handleKeyboard(e2) {
+    if (e2.target.tagName === "INPUT" || e2.target.tagName === "TEXTAREA") return;
+    switch (e2.key) {
+      case "+":
+      case "=":
+        if (this.allowZoom) {
+          e2.preventDefault();
+          this.zoomIn();
+        }
+        break;
+      case "-":
+        if (this.allowZoom) {
+          e2.preventDefault();
+          this.zoomOut();
+        }
+        break;
+      case "0":
+        e2.preventDefault();
+        this.fitToContainer();
+        break;
+      case "1":
+        e2.preventDefault();
+        this.actualSize();
+        break;
+      case "r":
+      case "R":
+        if (this.allowRotate) {
+          e2.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", (e2) => this.handleMouseDown(e2));
+    document.addEventListener("mousemove", this._handleMouseMove);
+    document.addEventListener("mouseup", this._handleMouseUp);
+    this.canvas.addEventListener("touchstart", (e2) => this.handleTouchStart(e2), { passive: false });
+    this.canvas.addEventListener("touchmove", (e2) => this.handleTouchMove(e2), { passive: false });
+    this.canvas.addEventListener("touchend", (e2) => this.handleTouchEnd(e2));
+    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(e2) {
+    if (!this.cropMode) return;
+    e2.preventDefault();
+    const rect = this.canvas.getBoundingClientRect();
+    const canvasX = e2.clientX - rect.left;
+    const canvasY = e2.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(e2) {
+    if (!this.cropMode) return;
+    const rect = this.canvas.getBoundingClientRect();
+    const canvasX = e2.clientX - rect.left;
+    const canvasY = e2.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(e2) {
+    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 = e2.clientX - rect.left;
+    const canvasY = e2.clientY - rect.top;
+    this.updateCursor(canvasX, canvasY);
+  }
+  // Touch events
+  handleTouchStart(e2) {
+    if (!this.cropMode || e2.touches.length !== 1) return;
+    e2.preventDefault();
+    const touch = e2.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(e2, 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(e2, el) {
+    e2.preventDefault();
+    const presetName = el.getAttribute("data-preset");
+    if (presetName && this.presetEffects[presetName]) {
+      this.applyPreset(presetName);
+    }
+  }
+  async onPassThruActionPreviewOriginal(e2, 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(e2, 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(e2, 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(e2) {
+    e2.preventDefault();
+    e2.stopPropagation();
+  }
+  handleDragOver(e2) {
+    this.preventDefaults(e2);
+    this.dropZone.classList.add("border-primary", "bg-light");
+    this.dropZone.style.borderColor = "#0d6efd";
+  }
+  handleDragLeave(e2) {
+    this.preventDefaults(e2);
+    if (!this.dropZone.contains(e2.relatedTarget)) {
+      this.dropZone.classList.remove("border-primary", "bg-light");
+      this.dropZone.style.borderColor = "#dee2e6";
+    }
+  }
+  async handleDrop(e2) {
+    this.preventDefaults(e2);
+    this.dropZone.classList.remove("border-primary", "bg-light");
+    this.dropZone.style.borderColor = "#dee2e6";
+    const files = Array.from(e2.dataTransfer.files);
+    if (files.length > 0) {
+      await this.processFile(files[0]);
+    }
+  }
+  async handleFileSelect(e2) {
+    const files = Array.from(e2.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", (e2) => {
+        if (e2.lengthComputable) {
+          const progress = Math.round(e2.loaded / e2.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 (e2) {
+            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,
+  b as VERSION,
+  a as VERSION_INFO,
+  c as VERSION_MAJOR,
+  e as VERSION_MINOR,
+  f as VERSION_REVISION,
+  W as WebApp
+};
+//# sourceMappingURL=lightbox.es.js.map