@pixerate/editor 0.10.0 → 0.12.0

package/dist/index.js

@@ -1277,10 +1277,10 @@ var HorizontalRule$1 = HorizontalRule.extend({
     };
   }
 });
-var Image = Node$1.create({
+var Image2 = Node$1.create({
   name: "image"
 });
-var Image$1 = Image.extend({
+var Image$1 = Image2.extend({
   /**
    * @return {{markdown: MarkdownNodeSpec}}
    */
@@ -1993,7 +1993,7 @@ function handleImageInsertion(view, file, options) {
     }
   }
 }
-var Image2 = BaseImage.extend({
+var Image3 = BaseImage.extend({
   addOptions() {
     return {
       ...this.parent?.(),
@@ -2188,7 +2188,7 @@ function createRichTextPreset(options = {}) {
   if (options.image !== false) {
     const imageConfig = typeof options.image === "object" ? options.image : {};
     extensions2.push(
-      Image2.configure({
+      Image3.configure({
         HTMLAttributes: {
           class: "rounded-md max-w-full h-auto my-2",
           ...imageConfig.HTMLAttributes || {}
@@ -4453,6 +4453,79 @@ function placeBeside(rects, size, side, nearNodeId, options = {}) {
   };
 }
 
+// src/canvas/clock.ts
+var pageHidden = () => typeof document !== "undefined" && document.hidden;
+var realClock = {
+  live: true,
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  frame: () => new Promise((resolve) => {
+    if (typeof requestAnimationFrame === "function" && !pageHidden()) {
+      requestAnimationFrame(() => resolve());
+    } else {
+      setTimeout(resolve, 16);
+    }
+  }),
+  sleep: (ms) => new Promise((resolve) => setTimeout(resolve, Math.max(0, ms)))
+};
+var settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+var ManualClock = class {
+  live = false;
+  time;
+  frames = [];
+  sleepers = [];
+  seq = 0;
+  constructor(start = 0) {
+    this.time = start;
+  }
+  now() {
+    return this.time;
+  }
+  frame() {
+    return new Promise((resolve) => this.frames.push(resolve));
+  }
+  sleep(ms) {
+    return new Promise(
+      (resolve) => this.sleepers.push({
+        at: this.time + Math.max(0, ms),
+        seq: this.seq++,
+        resolve
+      })
+    );
+  }
+  /** Whether any frames or sleep timers are currently pending. */
+  get pending() {
+    return this.frames.length > 0 || this.sleepers.length > 0;
+  }
+  /** Advances time by `ms`, resolving due sleep timers in order, followed by queued frames. */
+  async advance(ms) {
+    const end = this.time + Math.max(0, ms);
+    await settle();
+    while (true) {
+      let next;
+      for (const s of this.sleepers) {
+        if (s.at <= end && (!next || s.at < next.at || s.at === next.at && s.seq < next.seq)) {
+          next = s;
+        }
+      }
+      if (!next) break;
+      this.sleepers.splice(this.sleepers.indexOf(next), 1);
+      this.time = Math.max(this.time, next.at);
+      next.resolve();
+      await settle();
+    }
+    this.time = end;
+    const dueFrames = this.frames.splice(0, this.frames.length);
+    for (const resolveFrame of dueFrames) {
+      resolveFrame();
+    }
+    await settle();
+  }
+  /** Convenience method to advance by 1 frame at a given fps (default: 60fps = 16.67ms). */
+  async tick(fps = 60) {
+    await this.advance(Math.round(1e3 / fps));
+  }
+};
+
 // src/canvas/trajectory.ts
 var defaultEasing = (t) => --t * t * t + 1;
 var linearTrajectory = (origin, target, progress) => {
@@ -4520,9 +4593,15 @@ function runMultiNodeTransition(transitions, options = {}) {
     return () => {
     };
   }
-  const { defaultDuration = 400, defaultEasing: easingFunc = defaultEasing, onUpdate, onComplete } = options;
+  const {
+    defaultDuration = 400,
+    defaultEasing: easingFunc = defaultEasing,
+    clock = realClock,
+    onUpdate,
+    onComplete
+  } = options;
   let isCancelled = false;
-  const startTime = Date.now();
+  const startTime = clock.now();
   const items = transitions.map((tr, i) => ({
     ...tr,
     index: tr.index ?? i,
@@ -4534,7 +4613,7 @@ function runMultiNodeTransition(transitions, options = {}) {
   }));
   function frame() {
     if (isCancelled) return;
-    const now = Date.now();
+    const now = clock.now();
     let allCompleted = true;
     for (let i = 0; i < items.length; i++) {
       const item = items[i];
@@ -4566,9 +4645,7 @@ function runMultiNodeTransition(transitions, options = {}) {
     }
     onUpdate?.();
     if (!allCompleted) {
-      if (typeof requestAnimationFrame !== "undefined") {
-        requestAnimationFrame(frame);
-      }
+      clock.frame().then(frame);
     } else {
       onComplete?.();
     }
@@ -4846,10 +4923,76 @@ function repositionNodesTo(nodes, targetOrigin) {
   }));
 }
 
+// src/canvas/view.ts
+function clampHeight(contentHeight, options = {}) {
+  const { min = 320, max = 560, padding = 48 } = options;
+  return Math.round(Math.min(max, Math.max(min, contentHeight + padding)));
+}
+function layoutBounds(nodes) {
+  if (nodes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    const x = node.position.x;
+    const y = node.position.y;
+    const width = node.width ?? 180;
+    const height = node.height ?? 80;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + width);
+    maxY = Math.max(maxY, y + height);
+  }
+  if (minX === Infinity) return null;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function canvasHeight(nodes, options) {
+  return clampHeight(layoutBounds(nodes)?.height ?? 0, options);
+}
+var DEFAULT_RANK_HEIGHT = 80 + 72;
+var NODES_PER_RANK = 2;
+function estimateCanvasHeight(nodes, edges, options) {
+  const ranks = Math.max(1, Math.ceil(nodes.length / NODES_PER_RANK));
+  return clampHeight(ranks * DEFAULT_RANK_HEIGHT, options);
+}
+function mix(a, b, t) {
+  return a + (b - a) * t;
+}
+function blendLayout(from, to, t) {
+  if (t >= 1) return to;
+  const fromMap = new Map(from.map((n) => [n.id, n]));
+  return to.map((target) => {
+    const origin = fromMap.get(target.id);
+    if (!origin) return target;
+    return {
+      ...target,
+      position: {
+        x: mix(origin.position.x, target.position.x, t),
+        y: mix(origin.position.y, target.position.y, t)
+      },
+      width: origin.width !== void 0 && target.width !== void 0 ? mix(origin.width, target.width, t) : target.width,
+      height: origin.height !== void 0 && target.height !== void 0 ? mix(origin.height, target.height, t) : target.height
+    };
+  });
+}
+function connectedOnly(nodes, edges) {
+  if (edges.length === 0) return nodes;
+  const linkedNodeIds = /* @__PURE__ */ new Set();
+  for (const edge of edges) {
+    linkedNodeIds.add(edge.source);
+    linkedNodeIds.add(edge.target);
+  }
+  const filtered = nodes.filter((node) => linkedNodeIds.has(node.id));
+  return filtered.length > 0 ? filtered : nodes;
+}
+
 // src/canvas/streaming.ts
 var StreamingLayoutManager = class {
   throttleMs;
   glideDurationMs;
+  connectedOnly;
+  clock;
   layoutOptions;
   onLayoutUpdated;
   pendingTimer = null;
@@ -4858,6 +5001,8 @@ var StreamingLayoutManager = class {
   constructor(options = {}) {
     this.throttleMs = options.throttleMs ?? 200;
     this.glideDurationMs = options.glideDurationMs ?? 300;
+    this.connectedOnly = options.connectedOnly ?? false;
+    this.clock = options.clock ?? realClock;
     this.layoutOptions = options.layoutOptions ?? { direction: "LR" };
     this.onLayoutUpdated = options.onLayoutUpdated;
   }
@@ -4885,7 +5030,8 @@ var StreamingLayoutManager = class {
     this.recalculateAndGlide(nodes, edges, currentPositions);
   }
   recalculateAndGlide(nodes, edges, currentPositions) {
-    if (nodes.length === 0) return;
+    const targetNodes = this.connectedOnly ? connectedOnly(nodes, edges) : nodes;
+    if (targetNodes.length === 0) return;
     if (this.activeTransitionCancel) {
       this.activeTransitionCancel();
       this.activeTransitionCancel = null;
@@ -4894,7 +5040,7 @@ var StreamingLayoutManager = class {
     for (const [id, pos] of currentPositions.entries()) {
       stored[id] = pos;
     }
-    const layouted = ensureLayout(nodes, edges, {
+    const layouted = ensureLayout(targetNodes, edges, {
       ...this.layoutOptions,
       storedPositions: stored
     });
@@ -4918,6 +5064,7 @@ var StreamingLayoutManager = class {
     this.targetPositions = nextPositions;
     if (transitions.length > 0) {
       this.activeTransitionCancel = runMultiNodeTransition(transitions, {
+        clock: this.clock,
         onUpdate: () => {
           const liveMap = new Map(currentPositions);
           for (const trans of transitions) {
@@ -5125,6 +5272,24 @@ function planAgentCommand(command, snapshot, options = {}) {
         }
       ];
     }
+    case "choreography:say": {
+      return [
+        {
+          type: "step:say",
+          text: command.text,
+          atNodeId: command.atNodeId,
+          position: command.position
+        }
+      ];
+    }
+    case "choreography:wait": {
+      return [
+        {
+          type: "step:wait",
+          ms: command.ms
+        }
+      ];
+    }
     default: {
       return [];
     }
@@ -5249,20 +5414,1341 @@ var MCP_TOOL_EDIT_PROMPT = {
     required: ["operation"]
   }
 };
+var MCP_TOOL_VIEW_EDITOR = {
+  name: "view_editor",
+  description: "Captures a visual image snapshot (JPEG or PNG) of the editor canvas or viewport for multimodal evaluation. Active agent cursor indicators are automatically excluded from the snapshot.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      scope: {
+        type: "string",
+        enum: ["viewport", "canvas"],
+        description: "Whether to capture only the visible viewport or the full canvas bounding box (default: viewport)."
+      },
+      format: {
+        type: "string",
+        enum: ["jpeg", "png"],
+        description: "Image format of the base64 snapshot (default: jpeg)."
+      },
+      maxEdge: {
+        type: "integer",
+        description: "Maximum width or height dimension in pixels (default: 1024)."
+      }
+    }
+  }
+};
+var EXPORT_EXCLUDED_SELECTORS = [
+  ".pixerate-presence",
+  ".agent-presence",
+  ".ursula-presence"
+];
 var EDITOR_MCP_TOOLS = [
   MCP_TOOL_GET_EDITOR_STATE,
   MCP_TOOL_EDIT_CANVAS,
-  MCP_TOOL_EDIT_PROMPT
+  MCP_TOOL_EDIT_PROMPT,
+  MCP_TOOL_VIEW_EDITOR
 ];
+
+// src/image-editor/filters.ts
+function clamp(value, min = 0, max = 255) {
+  return Math.max(min, Math.min(max, value));
+}
+function applyAdjustments(imageData, adjustments) {
+  const { brightness, contrast, saturation, exposure, temperature, opacity, blur } = adjustments;
+  const data = imageData.data;
+  const len = data.length;
+  const hasBrightness = brightness !== 0;
+  const hasContrast = contrast !== 0;
+  const hasSaturation = saturation !== 0;
+  const hasExposure = exposure !== 0;
+  const hasTemperature = temperature !== 0;
+  const hasOpacity = opacity < 1;
+  const contrastFactor = hasContrast ? 259 * (contrast + 255) / (255 * (259 - contrast)) : 1;
+  const exposureMultiplier = hasExposure ? Math.pow(2, exposure / 50) : 1;
+  const satMultiplier = hasSaturation ? 1 + saturation / 100 : 1;
+  const tempOffset = hasTemperature ? temperature * 0.8 : 0;
+  if (hasBrightness || hasContrast || hasSaturation || hasExposure || hasTemperature || hasOpacity) {
+    for (let i = 0; i < len; i += 4) {
+      let r = data[i];
+      let g = data[i + 1];
+      let b = data[i + 2];
+      let a = data[i + 3];
+      if (hasExposure) {
+        r = clamp(r * exposureMultiplier);
+        g = clamp(g * exposureMultiplier);
+        b = clamp(b * exposureMultiplier);
+      }
+      if (hasBrightness) {
+        const bOffset = brightness * 2.55;
+        r = clamp(r + bOffset);
+        g = clamp(g + bOffset);
+        b = clamp(b + bOffset);
+      }
+      if (hasContrast) {
+        r = clamp(contrastFactor * (r - 128) + 128);
+        g = clamp(contrastFactor * (g - 128) + 128);
+        b = clamp(contrastFactor * (b - 128) + 128);
+      }
+      if (hasSaturation) {
+        const luminance = 0.2989 * r + 0.587 * g + 0.114 * b;
+        r = clamp(luminance + (r - luminance) * satMultiplier);
+        g = clamp(luminance + (g - luminance) * satMultiplier);
+        b = clamp(luminance + (b - luminance) * satMultiplier);
+      }
+      if (hasTemperature) {
+        r = clamp(r + tempOffset);
+        b = clamp(b - tempOffset);
+      }
+      if (hasOpacity) {
+        a = clamp(a * opacity);
+      }
+      data[i] = r;
+      data[i + 1] = g;
+      data[i + 2] = b;
+      data[i + 3] = a;
+    }
+  }
+  if (blur > 0) {
+    applyFastBoxBlur(imageData, Math.min(Math.round(blur), 40));
+  }
+}
+function applyFastBoxBlur(imageData, radius) {
+  if (radius < 1) return;
+  const w = imageData.width;
+  const h = imageData.height;
+  const src = imageData.data;
+  const temp = new Uint8ClampedArray(src.length);
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      let r = 0, g = 0, b = 0, a = 0;
+      let count = 0;
+      for (let k = -radius; k <= radius; k++) {
+        const px = Math.min(w - 1, Math.max(0, x + k));
+        const idx = (y * w + px) * 4;
+        r += src[idx];
+        g += src[idx + 1];
+        b += src[idx + 2];
+        a += src[idx + 3];
+        count++;
+      }
+      const dstIdx = (y * w + x) * 4;
+      temp[dstIdx] = Math.round(r / count);
+      temp[dstIdx + 1] = Math.round(g / count);
+      temp[dstIdx + 2] = Math.round(b / count);
+      temp[dstIdx + 3] = Math.round(a / count);
+    }
+  }
+  for (let x = 0; x < w; x++) {
+    for (let y = 0; y < h; y++) {
+      let r = 0, g = 0, b = 0, a = 0;
+      let count = 0;
+      for (let k = -radius; k <= radius; k++) {
+        const py = Math.min(h - 1, Math.max(0, y + k));
+        const idx = (py * w + x) * 4;
+        r += temp[idx];
+        g += temp[idx + 1];
+        b += temp[idx + 2];
+        a += temp[idx + 3];
+        count++;
+      }
+      const dstIdx = (y * w + x) * 4;
+      src[dstIdx] = Math.round(r / count);
+      src[dstIdx + 1] = Math.round(g / count);
+      src[dstIdx + 2] = Math.round(b / count);
+      src[dstIdx + 3] = Math.round(a / count);
+    }
+  }
+}
+function applyDepthMask(mainImageData, maskImageData, options) {
+  const { mode, depthRange, softness, invert } = options;
+  const mainData = mainImageData.data;
+  const maskData = maskImageData.data;
+  const len = Math.min(mainData.length, maskData.length);
+  const effectiveSoftness = Math.max(1, softness || 10);
+  const minDepth = depthRange[0];
+  const maxDepth = depthRange[1];
+  for (let i = 0; i < len; i += 4) {
+    let maskValue = maskData[i];
+    if (invert) {
+      maskValue = 255 - maskValue;
+    }
+    let alphaValue;
+    if (mode === "threshold") {
+      if (maskValue >= maxDepth + effectiveSoftness) {
+        alphaValue = 0;
+      } else if (maskValue > maxDepth) {
+        alphaValue = Math.round((maxDepth + effectiveSoftness - maskValue) / effectiveSoftness * 255);
+      } else if (maskValue >= minDepth) {
+        alphaValue = 255;
+      } else if (maskValue < minDepth - effectiveSoftness) {
+        alphaValue = 0;
+      } else {
+        alphaValue = Math.round((maskValue - (minDepth - effectiveSoftness)) / effectiveSoftness * 255);
+      }
+    } else {
+      alphaValue = clamp(maskValue + minDepth);
+    }
+    mainData[i + 3] = clamp(mainData[i + 3] * alphaValue / 255);
+  }
+}
+function removeAlpha(imageData) {
+  const data = imageData.data;
+  const len = data.length;
+  for (let i = 3; i < len; i += 4) {
+    data[i] = 255;
+  }
+}
+
+// src/image-editor/renderer.ts
+var ImageCache = class {
+  cache = /* @__PURE__ */ new Map();
+  async get(src) {
+    const existing = this.cache.get(src);
+    if (existing && existing.complete) {
+      return existing;
+    }
+    return new Promise((resolve, reject) => {
+      if (typeof window === "undefined" || typeof Image === "undefined") {
+        reject(new Error("Image loading is only supported in browser/DOM environments"));
+        return;
+      }
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        this.cache.set(src, img);
+        resolve(img);
+      };
+      img.onerror = (e) => reject(new Error(`Failed to load image from: ${src}`));
+      img.src = src;
+    });
+  }
+  set(src, img) {
+    this.cache.set(src, img);
+  }
+  clear() {
+    this.cache.clear();
+  }
+};
+var globalImageCache = new ImageCache();
+var ImageEditorRenderer = class {
+  imageCache = globalImageCache;
+  cachedBaseCanvas = null;
+  cachedBaseKey = "";
+  /**
+   * Helper to create a canvas element safely in browser/JSDOM.
+   */
+  createCanvas(width, height) {
+    if (typeof document !== "undefined" && document.createElement) {
+      const c = document.createElement("canvas");
+      c.width = Math.max(1, Math.round(width));
+      c.height = Math.max(1, Math.round(height));
+      return c;
+    }
+    return {
+      width: Math.max(1, Math.round(width)),
+      height: Math.max(1, Math.round(height)),
+      getContext: () => null,
+      toDataURL: () => "",
+      toBlob: () => {
+      }
+    };
+  }
+  /**
+   * Renders the editor state onto a canvas (viewport or preview).
+   */
+  async renderToCanvas(targetCanvas, imageSource, state, options = {}) {
+    const ctx = targetCanvas.getContext("2d");
+    if (!ctx) return;
+    let img;
+    if (typeof imageSource === "string") {
+      img = await this.imageCache.get(imageSource);
+    } else {
+      img = imageSource;
+    }
+    const naturalWidth = img.naturalWidth || img.videoWidth || img.width || 800;
+    const naturalHeight = img.naturalHeight || img.videoHeight || img.height || 600;
+    const { crop, transform, adjustments, depthMask, annotations, selectedAnnotationId, zoom, pan, isOriginalCompared } = state;
+    const vpWidth = options.viewportWidth || targetCanvas.width;
+    const vpHeight = options.viewportHeight || targetCanvas.height;
+    targetCanvas.width = vpWidth;
+    targetCanvas.height = vpHeight;
+    ctx.clearRect(0, 0, vpWidth, vpHeight);
+    if (isOriginalCompared) {
+      this.drawFittedImage(ctx, img, naturalWidth, naturalHeight, vpWidth, vpHeight, zoom, pan);
+      return;
+    }
+    const isActivelyCropping = Boolean(options.showCropOverlay || state.activeTool === "crop");
+    const cropX = !isActivelyCropping && crop ? Math.max(0, crop.x) : 0;
+    const cropY = !isActivelyCropping && crop ? Math.max(0, crop.y) : 0;
+    const cropW = !isActivelyCropping && crop ? Math.min(naturalWidth - cropX, crop.width) : naturalWidth;
+    const cropH = !isActivelyCropping && crop ? Math.min(naturalHeight - cropY, crop.height) : naturalHeight;
+    const angle = (transform.rotate % 360 + 360) % 360;
+    const isSwapped = angle === 90 || angle === 270;
+    const baseW = isSwapped ? cropH : cropW;
+    const baseH = isSwapped ? cropW : cropH;
+    const baseKey = `${state.sourceUrl}-${naturalWidth}x${naturalHeight}-${cropX},${cropY},${cropW},${cropH}-${angle},${transform.flipH},${transform.flipV}-${adjustments.brightness},${adjustments.contrast},${adjustments.saturation},${adjustments.exposure},${adjustments.temperature},${adjustments.blur},${adjustments.opacity}-${depthMask.enabled},${depthMask.depthRange?.[0]}-${depthMask.depthRange?.[1]},${depthMask.softness},${depthMask.invert},${depthMask.mode}`;
+    let baseCanvas = this.cachedBaseCanvas;
+    if (!baseCanvas || this.cachedBaseKey !== baseKey) {
+      baseCanvas = this.createCanvas(baseW, baseH);
+      const baseCtx = baseCanvas.getContext("2d");
+      if (baseCtx) {
+        baseCtx.save();
+        const rad = angle * Math.PI / 180;
+        baseCtx.translate(baseW / 2, baseH / 2);
+        baseCtx.rotate(rad);
+        baseCtx.scale(transform.flipH ? -1 : 1, transform.flipV ? -1 : 1);
+        baseCtx.drawImage(
+          img,
+          cropX,
+          cropY,
+          cropW,
+          cropH,
+          -cropW / 2,
+          -cropH / 2,
+          cropW,
+          cropH
+        );
+        baseCtx.restore();
+        const imageData = baseCtx.getImageData(0, 0, baseW, baseH);
+        if (imageData) {
+          applyAdjustments(imageData, adjustments);
+          if (depthMask.enabled && depthMask.maskSource) {
+            try {
+              const maskImg = await this.imageCache.get(depthMask.maskSource);
+              const maskCanvas = this.createCanvas(baseW, baseH);
+              const maskCtx = maskCanvas.getContext("2d");
+              if (maskCtx) {
+                maskCtx.drawImage(maskImg, cropX, cropY, cropW, cropH, 0, 0, baseW, baseH);
+                const maskData = maskCtx.getImageData(0, 0, baseW, baseH);
+                if (maskData) {
+                  applyDepthMask(imageData, maskData, depthMask);
+                }
+              }
+            } catch {
+            }
+          }
+          baseCtx.putImageData(imageData, 0, 0);
+        }
+      }
+      this.cachedBaseCanvas = baseCanvas;
+      this.cachedBaseKey = baseKey;
+    }
+    ctx.save();
+    ctx.translate(vpWidth / 2 + pan.x, vpHeight / 2 + pan.y);
+    ctx.scale(zoom, zoom);
+    const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
+    const renderW = baseW * fitScale;
+    const renderH = baseH * fitScale;
+    ctx.drawImage(baseCanvas, -renderW / 2, -renderH / 2, renderW, renderH);
+    const scaleFactor = fitScale;
+    ctx.save();
+    ctx.translate(-renderW / 2, -renderH / 2);
+    ctx.scale(scaleFactor, scaleFactor);
+    for (const ann of annotations) {
+      await this.drawAnnotation(ctx, ann);
+      if (options.showSelectionOverlay && ann.id === selectedAnnotationId) {
+        this.drawAnnotationSelection(ctx, ann);
+      }
+    }
+    if (options.draftAnnotation) {
+      await this.drawAnnotation(ctx, options.draftAnnotation);
+    }
+    ctx.restore();
+    ctx.restore();
+    const isCroppingActive = Boolean(options.showCropOverlay || state.activeTool === "crop");
+    const activeCrop = options.draftCrop !== void 0 && options.draftCrop !== null ? options.draftCrop : crop ?? (isCroppingActive ? {
+      x: 0,
+      y: 0,
+      width: naturalWidth,
+      height: naturalHeight
+    } : null);
+    if (isCroppingActive && activeCrop) {
+      this.drawCropOverlay(ctx, state, vpWidth, vpHeight, naturalWidth, naturalHeight, activeCrop);
+    }
+  }
+  /**
+   * Draws an individual annotation onto the canvas.
+   */
+  async drawAnnotation(ctx, ann) {
+    ctx.save();
+    if (ann.opacity !== void 0) {
+      ctx.globalAlpha = ann.opacity;
+    }
+    if (ann.rotation) {
+      ctx.translate(ann.x, ann.y);
+      ctx.rotate(ann.rotation * Math.PI / 180);
+      ctx.translate(-ann.x, -ann.y);
+    }
+    switch (ann.type) {
+      case "pen": {
+        const pen = ann;
+        if (pen.points.length > 0) {
+          ctx.beginPath();
+          ctx.strokeStyle = pen.strokeColor;
+          ctx.lineWidth = pen.strokeWidth;
+          ctx.lineCap = "round";
+          ctx.lineJoin = "round";
+          ctx.moveTo(pen.points[0].x, pen.points[0].y);
+          for (let i = 1; i < pen.points.length; i++) {
+            ctx.lineTo(pen.points[i].x, pen.points[i].y);
+          }
+          ctx.stroke();
+        }
+        break;
+      }
+      case "rect": {
+        const rect = ann;
+        ctx.strokeStyle = rect.strokeColor;
+        ctx.lineWidth = rect.strokeWidth;
+        if (rect.fillColor) {
+          ctx.fillStyle = rect.fillColor;
+          ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+        }
+        if (rect.strokeWidth > 0) {
+          ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        }
+        break;
+      }
+      case "circle": {
+        const circle = ann;
+        ctx.beginPath();
+        ctx.strokeStyle = circle.strokeColor;
+        ctx.lineWidth = circle.strokeWidth;
+        ctx.ellipse(circle.x, circle.y, Math.abs(circle.radiusX), Math.abs(circle.radiusY), 0, 0, 2 * Math.PI);
+        if (circle.fillColor) {
+          ctx.fillStyle = circle.fillColor;
+          ctx.fill();
+        }
+        if (circle.strokeWidth > 0) {
+          ctx.stroke();
+        }
+        break;
+      }
+      case "arrow": {
+        const arrow = ann;
+        ctx.strokeStyle = arrow.strokeColor;
+        ctx.fillStyle = arrow.strokeColor;
+        ctx.lineWidth = arrow.strokeWidth;
+        ctx.beginPath();
+        ctx.moveTo(arrow.x, arrow.y);
+        ctx.lineTo(arrow.endX, arrow.endY);
+        ctx.stroke();
+        const angle = Math.atan2(arrow.endY - arrow.y, arrow.endX - arrow.x);
+        const headLen = Math.max(12, arrow.strokeWidth * 3);
+        ctx.beginPath();
+        ctx.moveTo(arrow.endX, arrow.endY);
+        ctx.lineTo(
+          arrow.endX - headLen * Math.cos(angle - Math.PI / 6),
+          arrow.endY - headLen * Math.sin(angle - Math.PI / 6)
+        );
+        ctx.lineTo(
+          arrow.endX - headLen * Math.cos(angle + Math.PI / 6),
+          arrow.endY - headLen * Math.sin(angle + Math.PI / 6)
+        );
+        ctx.closePath();
+        ctx.fill();
+        break;
+      }
+      case "line": {
+        const line = ann;
+        ctx.beginPath();
+        ctx.strokeStyle = line.strokeColor;
+        ctx.lineWidth = line.strokeWidth;
+        ctx.moveTo(line.x, line.y);
+        ctx.lineTo(line.endX, line.endY);
+        ctx.stroke();
+        break;
+      }
+      case "text": {
+        const textAnn = ann;
+        ctx.font = `${textAnn.fontWeight || "normal"} ${textAnn.fontSize}px ${textAnn.fontFamily || "sans-serif"}`;
+        ctx.fillStyle = textAnn.color;
+        ctx.textBaseline = "top";
+        ctx.fillText(textAnn.text, textAnn.x, textAnn.y);
+        break;
+      }
+      case "image": {
+        const imgAnn = ann;
+        try {
+          const loadedImg = await this.imageCache.get(imgAnn.src);
+          ctx.drawImage(loadedImg, imgAnn.x, imgAnn.y, imgAnn.width, imgAnn.height);
+        } catch {
+        }
+        break;
+      }
+    }
+    ctx.restore();
+  }
+  /**
+   * Draws selection box around active annotation.
+   */
+  drawAnnotationSelection(ctx, ann) {
+    ctx.save();
+    ctx.strokeStyle = "#3b82f6";
+    ctx.lineWidth = 1.5;
+    ctx.setLineDash([4, 4]);
+    const bounds = this.getAnnotationBounds(ann);
+    const pad = 4;
+    ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.width + pad * 2, bounds.height + pad * 2);
+    ctx.fillStyle = "#ffffff";
+    ctx.strokeStyle = "#3b82f6";
+    ctx.setLineDash([]);
+    const handleSize = 6;
+    const corners = [
+      { x: bounds.x - pad, y: bounds.y - pad },
+      { x: bounds.x + bounds.width + pad, y: bounds.y - pad },
+      { x: bounds.x - pad, y: bounds.y + bounds.height + pad },
+      { x: bounds.x + bounds.width + pad, y: bounds.y + bounds.height + pad }
+    ];
+    for (const c of corners) {
+      ctx.fillRect(c.x - handleSize / 2, c.y - handleSize / 2, handleSize, handleSize);
+      ctx.strokeRect(c.x - handleSize / 2, c.y - handleSize / 2, handleSize, handleSize);
+    }
+    ctx.restore();
+  }
+  getAnnotationBounds(ann) {
+    switch (ann.type) {
+      case "rect":
+        return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
+      case "circle":
+        return {
+          x: ann.x - Math.abs(ann.radiusX),
+          y: ann.y - Math.abs(ann.radiusY),
+          width: Math.abs(ann.radiusX) * 2,
+          height: Math.abs(ann.radiusY) * 2
+        };
+      case "arrow":
+      case "line": {
+        const minX = Math.min(ann.x, ann.endX);
+        const minY = Math.min(ann.y, ann.endY);
+        return {
+          x: minX,
+          y: minY,
+          width: Math.max(Math.abs(ann.endX - ann.x), 10),
+          height: Math.max(Math.abs(ann.endY - ann.y), 10)
+        };
+      }
+      case "pen": {
+        if (!ann.points.length) return { x: ann.x, y: ann.y, width: 0, height: 0 };
+        let minX = ann.points[0].x, maxX = ann.points[0].x;
+        let minY = ann.points[0].y, maxY = ann.points[0].y;
+        for (const pt of ann.points) {
+          if (pt.x < minX) minX = pt.x;
+          if (pt.x > maxX) maxX = pt.x;
+          if (pt.y < minY) minY = pt.y;
+          if (pt.y > maxY) maxY = pt.y;
+        }
+        return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+      }
+      case "text":
+        return {
+          x: ann.x,
+          y: ann.y,
+          width: ann.text.length * ann.fontSize * 0.6,
+          height: ann.fontSize * 1.2
+        };
+      case "image":
+        return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
+    }
+  }
+  /**
+   * Draws a rule-of-thirds crop grid overlay.
+   */
+  drawCropOverlay(ctx, state, vpWidth, vpHeight, imgWidth, imgHeight, cropOverride) {
+    const crop = cropOverride !== void 0 && cropOverride !== null ? cropOverride : state.crop ?? {
+      x: 0,
+      y: 0,
+      width: imgWidth,
+      height: imgHeight
+    };
+    if (!crop) return;
+    const { transform, pan, zoom } = state;
+    const angle = (transform.rotate % 360 + 360) % 360;
+    const isSwapped = angle === 90 || angle === 270;
+    const baseW = isSwapped ? imgHeight : imgWidth;
+    const baseH = isSwapped ? imgWidth : imgHeight;
+    ctx.save();
+    ctx.translate(vpWidth / 2 + pan.x, vpHeight / 2 + pan.y);
+    ctx.scale(zoom, zoom);
+    const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
+    const renderW = baseW * fitScale;
+    const renderH = baseH * fitScale;
+    const startX = -renderW / 2 + crop.x / imgWidth * renderW;
+    const startY = -renderH / 2 + crop.y / imgHeight * renderH;
+    const cropBoxW = crop.width / imgWidth * renderW;
+    const cropBoxH = crop.height / imgHeight * renderH;
+    ctx.fillStyle = "rgba(0, 0, 0, 0.45)";
+    ctx.fillRect(-renderW / 2, -renderH / 2, renderW, startY - -renderH / 2);
+    ctx.fillRect(-renderW / 2, startY + cropBoxH, renderW, renderH / 2 - (startY + cropBoxH));
+    ctx.fillRect(-renderW / 2, startY, startX - -renderW / 2, cropBoxH);
+    ctx.fillRect(startX + cropBoxW, startY, renderW / 2 - (startX + cropBoxW), cropBoxH);
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 2;
+    ctx.strokeRect(startX, startY, cropBoxW, cropBoxH);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.4)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(startX + cropBoxW / 3, startY);
+    ctx.lineTo(startX + cropBoxW / 3, startY + cropBoxH);
+    ctx.moveTo(startX + cropBoxW * 2 / 3, startY);
+    ctx.lineTo(startX + cropBoxW * 2 / 3, startY + cropBoxH);
+    ctx.moveTo(startX, startY + cropBoxH / 3);
+    ctx.lineTo(startX + cropBoxW, startY + cropBoxH / 3);
+    ctx.moveTo(startX, startY + cropBoxH * 2 / 3);
+    ctx.lineTo(startX + cropBoxW, startY + cropBoxH * 2 / 3);
+    ctx.stroke();
+    ctx.fillStyle = "#ffffff";
+    ctx.strokeStyle = "#0284c7";
+    ctx.lineWidth = 1.5;
+    const handleSize = 10;
+    const handles = [
+      // Corners
+      { x: startX, y: startY },
+      { x: startX + cropBoxW, y: startY },
+      { x: startX, y: startY + cropBoxH },
+      { x: startX + cropBoxW, y: startY + cropBoxH },
+      // Edges
+      { x: startX + cropBoxW / 2, y: startY },
+      { x: startX + cropBoxW / 2, y: startY + cropBoxH },
+      { x: startX, y: startY + cropBoxH / 2 },
+      { x: startX + cropBoxW, y: startY + cropBoxH / 2 }
+    ];
+    for (const h of handles) {
+      ctx.fillRect(h.x - handleSize / 2, h.y - handleSize / 2, handleSize, handleSize);
+      ctx.strokeRect(h.x - handleSize / 2, h.y - handleSize / 2, handleSize, handleSize);
+    }
+    ctx.restore();
+  }
+  drawFittedImage(ctx, img, imgW, imgH, vpW, vpH, zoom, pan) {
+    ctx.save();
+    ctx.translate(vpW / 2 + pan.x, vpH / 2 + pan.y);
+    ctx.scale(zoom, zoom);
+    const fitScale = Math.min(vpW * 0.85 / imgW, vpH * 0.85 / imgH, 1);
+    const renderW = imgW * fitScale;
+    const renderH = imgH * fitScale;
+    ctx.drawImage(img, -renderW / 2, -renderH / 2, renderW, renderH);
+    ctx.restore();
+  }
+  /**
+   * Performs an export render at exact pixel dimensions without zoom/pan viewport offsets.
+   */
+  async renderExport(imageSource, state, options = {}) {
+    let img;
+    if (typeof imageSource === "string") {
+      img = await this.imageCache.get(imageSource);
+    } else {
+      img = imageSource;
+    }
+    const naturalWidth = img.naturalWidth || img.videoWidth || img.width || 800;
+    const naturalHeight = img.naturalHeight || img.videoHeight || img.height || 600;
+    const { crop, transform, adjustments, depthMask, annotations } = state;
+    const cropX = crop ? Math.max(0, crop.x) : 0;
+    const cropY = crop ? Math.max(0, crop.y) : 0;
+    const cropW = crop ? Math.min(naturalWidth - cropX, crop.width) : naturalWidth;
+    const cropH = crop ? Math.min(naturalHeight - cropY, crop.height) : naturalHeight;
+    const angle = (transform.rotate % 360 + 360) % 360;
+    const isSwapped = angle === 90 || angle === 270;
+    const baseW = isSwapped ? cropH : cropW;
+    const baseH = isSwapped ? cropW : cropH;
+    const exportW = options.width || baseW;
+    const exportH = options.height || baseH;
+    const exportCanvas = this.createCanvas(exportW, exportH);
+    const ctx = exportCanvas.getContext("2d");
+    if (!ctx) return exportCanvas;
+    const intermediateCanvas = this.createCanvas(baseW, baseH);
+    const interCtx = intermediateCanvas.getContext("2d");
+    if (interCtx) {
+      interCtx.save();
+      const rad = angle * Math.PI / 180;
+      interCtx.translate(baseW / 2, baseH / 2);
+      interCtx.rotate(rad);
+      interCtx.scale(transform.flipH ? -1 : 1, transform.flipV ? -1 : 1);
+      interCtx.drawImage(img, cropX, cropY, cropW, cropH, -cropW / 2, -cropH / 2, cropW, cropH);
+      interCtx.restore();
+      const imageData = interCtx.getImageData(0, 0, baseW, baseH);
+      if (imageData) {
+        applyAdjustments(imageData, adjustments);
+        if (depthMask.enabled && depthMask.maskSource) {
+          try {
+            const maskImg = await this.imageCache.get(depthMask.maskSource);
+            const maskCanvas = this.createCanvas(baseW, baseH);
+            const maskCtx = maskCanvas.getContext("2d");
+            if (maskCtx) {
+              maskCtx.drawImage(maskImg, cropX, cropY, cropW, cropH, 0, 0, baseW, baseH);
+              const maskData = maskCtx.getImageData(0, 0, baseW, baseH);
+              if (maskData) {
+                applyDepthMask(imageData, maskData, depthMask);
+              }
+            }
+          } catch {
+          }
+        }
+        interCtx.putImageData(imageData, 0, 0);
+      }
+    }
+    ctx.drawImage(intermediateCanvas, 0, 0, baseW, baseH, 0, 0, exportW, exportH);
+    if (options.includeAnnotations !== false && annotations.length > 0) {
+      const annScaleX = exportW / baseW;
+      const annScaleY = exportH / baseH;
+      ctx.save();
+      ctx.scale(annScaleX, annScaleY);
+      for (const ann of annotations) {
+        await this.drawAnnotation(ctx, ann);
+      }
+      ctx.restore();
+    }
+    return exportCanvas;
+  }
+};
+
+// src/image-editor/controller.ts
+var DEFAULT_ADJUSTMENTS = {
+  brightness: 0,
+  contrast: 0,
+  saturation: 0,
+  exposure: 0,
+  temperature: 0,
+  blur: 0,
+  opacity: 1
+};
+var DEFAULT_TRANSFORM = {
+  rotate: 0,
+  flipH: false,
+  flipV: false
+};
+var DEFAULT_DEPTH_MASK = {
+  enabled: false,
+  maskSource: null,
+  mode: "threshold",
+  depthRange: [0, 255],
+  softness: 10,
+  invert: false
+};
+var ImageEditorController = class {
+  state;
+  renderer;
+  imageElement = null;
+  listeners = /* @__PURE__ */ new Set();
+  onStateChange;
+  // History stacks
+  undoStack = [];
+  redoStack = [];
+  maxHistoryDepth;
+  isApplyingHistory = false;
+  initialSnapshot;
+  constructor(options = {}) {
+    this.maxHistoryDepth = options.maxHistoryDepth ?? 50;
+    this.onStateChange = options.onStateChange;
+    this.renderer = new ImageEditorRenderer();
+    const initialAdjustments = {
+      ...DEFAULT_ADJUSTMENTS,
+      ...options.initialState?.adjustments
+    };
+    const initialTransform = {
+      ...DEFAULT_TRANSFORM,
+      ...options.initialState?.transform
+    };
+    const initialDepthMask = {
+      ...DEFAULT_DEPTH_MASK,
+      ...options.initialState?.depthMask
+    };
+    this.state = {
+      sourceUrl: typeof options.image === "string" ? options.image : null,
+      imageDimensions: { width: 800, height: 600 },
+      crop: options.initialState?.crop ?? null,
+      transform: initialTransform,
+      adjustments: initialAdjustments,
+      depthMask: initialDepthMask,
+      annotations: options.initialState?.annotations ?? [],
+      selectedAnnotationId: null,
+      activeTool: "select",
+      zoom: 1,
+      pan: { x: 0, y: 0 },
+      isOriginalCompared: false
+    };
+    if (options.image instanceof Object && "width" in options.image) {
+      this.imageElement = options.image;
+      this.state.imageDimensions = {
+        width: options.image.naturalWidth || options.image.width || 800,
+        height: options.image.naturalHeight || options.image.height || 600
+      };
+    }
+    this.initialSnapshot = this.serializeState();
+    if (typeof options.image === "string") {
+      this.loadImage(options.image);
+    }
+  }
+  // --- Image Loading ---
+  async loadImage(src) {
+    if (typeof src === "string") {
+      this.state.sourceUrl = src;
+      try {
+        const img = await this.renderer.imageCache.get(src);
+        this.imageElement = img;
+        this.state.imageDimensions = {
+          width: img.naturalWidth || img.width || 800,
+          height: img.naturalHeight || img.height || 600
+        };
+      } catch (err) {
+      }
+    } else {
+      this.imageElement = src;
+      this.state.sourceUrl = src.src || null;
+      this.state.imageDimensions = {
+        width: src.naturalWidth || src.width || 800,
+        height: src.naturalHeight || src.height || 600
+      };
+    }
+    this.initialSnapshot = this.serializeState();
+    this.notify();
+  }
+  getImageElement() {
+    return this.imageElement;
+  }
+  // --- State & Subscription ---
+  getState() {
+    return this.state;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.state);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    const currentState = { ...this.state };
+    this.onStateChange?.(currentState);
+    this.listeners.forEach((l) => l(currentState));
+  }
+  // --- History (Undo / Redo / Reset) ---
+  recordHistory() {
+    if (this.isApplyingHistory) return;
+    this.undoStack.push(this.serializeState());
+    if (this.undoStack.length > this.maxHistoryDepth) {
+      this.undoStack.shift();
+    }
+    this.redoStack = [];
+  }
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  undo() {
+    if (!this.canUndo) return false;
+    this.isApplyingHistory = true;
+    const current = this.serializeState();
+    this.redoStack.push(current);
+    const prev = this.undoStack.pop();
+    this.applySerializedState(prev);
+    this.isApplyingHistory = false;
+    this.notify();
+    return true;
+  }
+  redo() {
+    if (!this.canRedo) return false;
+    this.isApplyingHistory = true;
+    const current = this.serializeState();
+    this.undoStack.push(current);
+    const next = this.redoStack.pop();
+    this.applySerializedState(next);
+    this.isApplyingHistory = false;
+    this.notify();
+    return true;
+  }
+  reset() {
+    this.recordHistory();
+    this.applySerializedState(this.initialSnapshot);
+    this.state.zoom = 1;
+    this.state.pan = { x: 0, y: 0 };
+    this.state.activeTool = "select";
+    this.state.selectedAnnotationId = null;
+    this.notify();
+  }
+  // --- Active Tool ---
+  setTool(tool) {
+    if (this.state.activeTool === tool) return;
+    this.state.activeTool = tool;
+    if (tool !== "select") {
+      this.state.selectedAnnotationId = null;
+    }
+    if (tool === "crop" && !this.state.crop) {
+      this.state.crop = {
+        x: 0,
+        y: 0,
+        width: this.state.imageDimensions.width,
+        height: this.state.imageDimensions.height
+      };
+    }
+    this.notify();
+  }
+  // --- Crop ---
+  setCrop(crop, addToHistory = true) {
+    if (addToHistory) {
+      this.recordHistory();
+    }
+    this.state.crop = crop;
+    this.notify();
+  }
+  applyCropPreset(ratio) {
+    this.recordHistory();
+    const { width, height } = this.state.imageDimensions;
+    if (!ratio) {
+      this.state.crop = { x: 0, y: 0, width, height };
+    } else {
+      let targetW = width;
+      let targetH = targetW / ratio;
+      if (targetH > height) {
+        targetH = height;
+        targetW = targetH * ratio;
+      }
+      const x = Math.max(0, Math.round((width - targetW) / 2));
+      const y = Math.max(0, Math.round((height - targetH) / 2));
+      this.state.crop = {
+        x,
+        y,
+        width: Math.round(targetW),
+        height: Math.round(targetH)
+      };
+    }
+    this.notify();
+  }
+  resetCrop() {
+    this.recordHistory();
+    this.state.crop = null;
+    this.notify();
+  }
+  // --- Transformations (Rotate / Flip) ---
+  rotate(degrees) {
+    this.recordHistory();
+    const current = this.state.transform.rotate;
+    this.state.transform.rotate = (current + degrees) % 360;
+    this.notify();
+  }
+  setRotation(degrees) {
+    this.recordHistory();
+    this.state.transform.rotate = degrees % 360;
+    this.notify();
+  }
+  flipHorizontal() {
+    this.recordHistory();
+    this.state.transform.flipH = !this.state.transform.flipH;
+    this.notify();
+  }
+  flipVertical() {
+    this.recordHistory();
+    this.state.transform.flipV = !this.state.transform.flipV;
+    this.notify();
+  }
+  // --- Adjustments ---
+  setAdjustments(partial, commitToHistory = true) {
+    if (commitToHistory) {
+      this.recordHistory();
+    }
+    this.state.adjustments = {
+      ...this.state.adjustments,
+      ...partial
+    };
+    this.notify();
+  }
+  resetAdjustments() {
+    this.recordHistory();
+    this.state.adjustments = { ...DEFAULT_ADJUSTMENTS };
+    this.notify();
+  }
+  // --- Depth Masking (Gleamforge) ---
+  setDepthMask(partial) {
+    this.recordHistory();
+    this.state.depthMask = {
+      ...this.state.depthMask,
+      ...partial
+    };
+    this.notify();
+  }
+  resetDepthMask() {
+    this.recordHistory();
+    this.state.depthMask = { ...DEFAULT_DEPTH_MASK };
+    this.notify();
+  }
+  // --- Annotations & Layers ---
+  addAnnotation(annotation) {
+    this.recordHistory();
+    const id = `ann_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+    const fullAnnotation = { ...annotation, id };
+    this.state.annotations = [...this.state.annotations, fullAnnotation];
+    this.state.selectedAnnotationId = id;
+    this.notify();
+    return id;
+  }
+  updateAnnotation(id, partial, commitToHistory = true) {
+    if (commitToHistory) {
+      this.recordHistory();
+    }
+    this.state.annotations = this.state.annotations.map((ann) => {
+      if (ann.id === id) {
+        return { ...ann, ...partial };
+      }
+      return ann;
+    });
+    this.notify();
+  }
+  removeAnnotation(id) {
+    this.recordHistory();
+    this.state.annotations = this.state.annotations.filter((ann) => ann.id !== id);
+    if (this.state.selectedAnnotationId === id) {
+      this.state.selectedAnnotationId = null;
+    }
+    this.notify();
+  }
+  clearAnnotations() {
+    this.recordHistory();
+    this.state.annotations = [];
+    this.state.selectedAnnotationId = null;
+    this.notify();
+  }
+  selectAnnotation(id) {
+    this.state.selectedAnnotationId = id;
+    this.notify();
+  }
+  // --- Zoom & Pan ---
+  setZoom(zoom) {
+    this.state.zoom = Math.max(0.1, Math.min(10, zoom));
+    this.notify();
+  }
+  zoomIn(factor = 1.2) {
+    this.setZoom(this.state.zoom * factor);
+  }
+  zoomOut(factor = 1.2) {
+    this.setZoom(this.state.zoom / factor);
+  }
+  resetZoom() {
+    this.state.zoom = 1;
+    this.state.pan = { x: 0, y: 0 };
+    this.notify();
+  }
+  setPan(pan) {
+    this.state.pan = pan;
+    this.notify();
+  }
+  setComparing(comparing) {
+    if (this.state.isOriginalCompared === comparing) return;
+    this.state.isOriginalCompared = comparing;
+    this.notify();
+  }
+  // --- Rendering & Export ---
+  async render(targetCanvas, options) {
+    const source = this.imageElement || this.state.sourceUrl;
+    if (!source) return;
+    await this.renderer.renderToCanvas(targetCanvas, source, this.state, options);
+  }
+  async renderExport(options) {
+    const source = this.imageElement || this.state.sourceUrl;
+    if (!source) {
+      return this.renderer.createCanvas(1, 1);
+    }
+    return this.renderer.renderExport(source, this.state, options);
+  }
+  async toDataURL(options = {}) {
+    const canvas = await this.renderExport(options);
+    const format = options.format || "image/png";
+    const quality = options.quality ?? 0.92;
+    return canvas.toDataURL(format, quality);
+  }
+  async toBlob(options = {}) {
+    const canvas = await this.renderExport(options);
+    const format = options.format || "image/png";
+    const quality = options.quality ?? 0.92;
+    return new Promise((resolve, reject) => {
+      if (canvas.toBlob) {
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("Failed to create Blob from canvas"));
+        }, format, quality);
+      } else {
+        try {
+          const dataUrl = canvas.toDataURL(format, quality);
+          const parts = dataUrl.split(",");
+          const byteStr = atob(parts[1]);
+          const ab = new ArrayBuffer(byteStr.length);
+          const ia = new Uint8Array(ab);
+          for (let i = 0; i < byteStr.length; i++) {
+            ia[i] = byteStr.charCodeAt(i);
+          }
+          resolve(new Blob([ab], { type: format }));
+        } catch (err) {
+          reject(err);
+        }
+      }
+    });
+  }
+  // --- Serialization ---
+  toJSON() {
+    return this.serializeState();
+  }
+  loadJSON(data) {
+    this.recordHistory();
+    this.applySerializedState(data);
+    this.notify();
+  }
+  serializeState() {
+    return {
+      version: 1,
+      crop: this.state.crop ? { ...this.state.crop } : null,
+      transform: { ...this.state.transform },
+      adjustments: { ...this.state.adjustments },
+      depthMask: {
+        ...this.state.depthMask,
+        depthRange: [...this.state.depthMask.depthRange]
+      },
+      annotations: JSON.parse(JSON.stringify(this.state.annotations))
+    };
+  }
+  applySerializedState(data) {
+    this.state.crop = data.crop ? { ...data.crop } : null;
+    this.state.transform = { ...data.transform };
+    this.state.adjustments = { ...data.adjustments };
+    this.state.depthMask = {
+      ...data.depthMask,
+      depthRange: [...data.depthMask.depthRange]
+    };
+    this.state.annotations = JSON.parse(JSON.stringify(data.annotations || []));
+  }
+};
+
+// src/image-editor/geometry.ts
+function getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping = false, cropOverride) {
+  const { imageDimensions, crop: stateCrop, transform, zoom, pan } = state;
+  const naturalWidth = imageDimensions.width || 800;
+  const naturalHeight = imageDimensions.height || 600;
+  const activeCrop = cropOverride !== void 0 && cropOverride !== null ? cropOverride : stateCrop ?? (isActivelyCropping ? { x: 0, y: 0, width: naturalWidth, height: naturalHeight } : null);
+  const cropW = !isActivelyCropping && activeCrop ? activeCrop.width : naturalWidth;
+  const cropH = !isActivelyCropping && activeCrop ? activeCrop.height : naturalHeight;
+  const angle = (transform.rotate % 360 + 360) % 360;
+  const isSwapped = angle === 90 || angle === 270;
+  const baseW = isSwapped ? cropH : cropW;
+  const baseH = isSwapped ? cropW : cropH;
+  const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
+  const renderW = baseW * fitScale;
+  const renderH = baseH * fitScale;
+  const totalScale = zoom * fitScale;
+  const centerX = vpWidth / 2 + pan.x;
+  const centerY = vpHeight / 2 + pan.y;
+  const imageRect = {
+    x: centerX - renderW * zoom / 2,
+    y: centerY - renderH * zoom / 2,
+    width: renderW * zoom,
+    height: renderH * zoom
+  };
+  let cropRect = null;
+  if (activeCrop) {
+    const startX = -renderW / 2 + activeCrop.x / naturalWidth * renderW;
+    const startY = -renderH / 2 + activeCrop.y / naturalHeight * renderH;
+    const cropBoxW = activeCrop.width / naturalWidth * renderW;
+    const cropBoxH = activeCrop.height / naturalHeight * renderH;
+    cropRect = {
+      x: centerX + zoom * startX,
+      y: centerY + zoom * startY,
+      width: zoom * cropBoxW,
+      height: zoom * cropBoxH
+    };
+  }
+  return {
+    vpWidth,
+    vpHeight,
+    centerX,
+    centerY,
+    baseW,
+    baseH,
+    fitScale,
+    renderW,
+    renderH,
+    totalScale,
+    imageRect,
+    cropRect
+  };
+}
+function canvasToImagePoint(canvasPt, state, vpWidth, vpHeight, isActivelyCropping = false) {
+  const metrics = getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping);
+  const unzoomedX = (canvasPt.x - metrics.centerX) / state.zoom;
+  const unzoomedY = (canvasPt.y - metrics.centerY) / state.zoom;
+  const x = (unzoomedX + metrics.renderW / 2) / metrics.fitScale;
+  const y = (unzoomedY + metrics.renderH / 2) / metrics.fitScale;
+  return { x: Math.round(x), y: Math.round(y) };
+}
+function imageToCanvasPoint(imgPt, state, vpWidth, vpHeight, isActivelyCropping = false) {
+  const metrics = getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping);
+  const unzoomedX = (imgPt.x - metrics.baseW / 2) * metrics.fitScale;
+  const unzoomedY = (imgPt.y - metrics.baseH / 2) * metrics.fitScale;
+  const canvasX = metrics.centerX + unzoomedX * state.zoom;
+  const canvasY = metrics.centerY + unzoomedY * state.zoom;
+  return { x: Math.round(canvasX), y: Math.round(canvasY) };
+}
+function hitTestCrop(canvasPt, state, vpWidth, vpHeight, handleThreshold = 14, cropOverride) {
+  const metrics = getViewportMetrics(state, vpWidth, vpHeight, true, cropOverride);
+  if (!metrics.cropRect) return null;
+  const { x, y, width: w, height: h } = metrics.cropRect;
+  const px = canvasPt.x;
+  const py = canvasPt.y;
+  const dist = (x1, y1, x2, y2) => Math.hypot(x1 - x2, y1 - y2);
+  if (dist(px, py, x, y) <= handleThreshold) return "nw";
+  if (dist(px, py, x + w, y) <= handleThreshold) return "ne";
+  if (dist(px, py, x + w, y + h) <= handleThreshold) return "se";
+  if (dist(px, py, x, y + h) <= handleThreshold) return "sw";
+  const nearX = px >= x - handleThreshold && px <= x + w + handleThreshold;
+  const nearY = py >= y - handleThreshold && py <= y + h + handleThreshold;
+  if (nearX && Math.abs(py - y) <= handleThreshold) return "n";
+  if (nearX && Math.abs(py - (y + h)) <= handleThreshold) return "s";
+  if (nearY && Math.abs(px - x) <= handleThreshold) return "w";
+  if (nearY && Math.abs(px - (x + w)) <= handleThreshold) return "e";
+  if (px >= x && px <= x + w && py >= y && py <= y + h) {
+    return "inside";
+  }
+  return null;
+}
+function getCropCursor(handle) {
+  switch (handle) {
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+    case "n":
+    case "s":
+      return "ns-resize";
+    case "e":
+    case "w":
+      return "ew-resize";
+    case "inside":
+      return "move";
+    default:
+      return "crosshair";
+  }
+}
+function calculateCropDrag(startCrop, handle, startImgPt, currentImgPt, imgWidth, imgHeight, aspectRatio) {
+  const dx = currentImgPt.x - startImgPt.x;
+  const dy = currentImgPt.y - startImgPt.y;
+  if (handle === "inside") {
+    const maxX = Math.max(0, imgWidth - startCrop.width);
+    const maxY = Math.max(0, imgHeight - startCrop.height);
+    const newX = Math.max(0, Math.min(maxX, startCrop.x + dx));
+    const newY = Math.max(0, Math.min(maxY, startCrop.y + dy));
+    return {
+      x: Math.round(newX),
+      y: Math.round(newY),
+      width: startCrop.width,
+      height: startCrop.height
+    };
+  }
+  let left = startCrop.x;
+  let top = startCrop.y;
+  let right = startCrop.x + startCrop.width;
+  let bottom = startCrop.y + startCrop.height;
+  const minSize = 20;
+  if (handle === "e" || handle === "ne" || handle === "se") {
+    right = Math.min(imgWidth, Math.max(left + minSize, startCrop.x + startCrop.width + dx));
+  }
+  if (handle === "w" || handle === "nw" || handle === "sw") {
+    left = Math.max(0, Math.min(right - minSize, startCrop.x + dx));
+  }
+  if (handle === "s" || handle === "se" || handle === "sw") {
+    bottom = Math.min(imgHeight, Math.max(top + minSize, startCrop.y + startCrop.height + dy));
+  }
+  if (handle === "n" || handle === "nw" || handle === "ne") {
+    top = Math.max(0, Math.min(bottom - minSize, startCrop.y + dy));
+  }
+  if (aspectRatio && aspectRatio > 0) {
+    let currentW = right - left;
+    let currentH = bottom - top;
+    if (handle === "e" || handle === "w") {
+      currentH = Math.min(imgHeight, currentW / aspectRatio);
+      bottom = Math.min(imgHeight, top + currentH);
+    } else if (handle === "n" || handle === "s") {
+      currentW = Math.min(imgWidth, currentH * aspectRatio);
+      right = Math.min(imgWidth, left + currentW);
+    } else {
+      const targetH = currentW / aspectRatio;
+      if (top + targetH <= imgHeight) {
+        bottom = top + targetH;
+      } else {
+        const targetW = currentH * aspectRatio;
+        right = Math.min(imgWidth, left + targetW);
+      }
+    }
+  }
+  return {
+    x: Math.round(left),
+    y: Math.round(top),
+    width: Math.round(Math.max(minSize, right - left)),
+    height: Math.round(Math.max(minSize, bottom - top))
+  };
+}
+function getAnnotationBounds(ann) {
+  switch (ann.type) {
+    case "rect":
+      return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
+    case "circle":
+      return {
+        x: ann.x - ann.radiusX,
+        y: ann.y - ann.radiusY,
+        width: ann.radiusX * 2,
+        height: ann.radiusY * 2
+      };
+    case "arrow":
+    case "line": {
+      const minX = Math.min(ann.x, ann.endX);
+      const minY = Math.min(ann.y, ann.endY);
+      return {
+        x: minX,
+        y: minY,
+        width: Math.max(Math.abs(ann.endX - ann.x), 10),
+        height: Math.max(Math.abs(ann.endY - ann.y), 10)
+      };
+    }
+    case "pen": {
+      if (!ann.points.length) return { x: ann.x, y: ann.y, width: 0, height: 0 };
+      let minX = ann.points[0].x;
+      let maxX = ann.points[0].x;
+      let minY = ann.points[0].y;
+      let maxY = ann.points[0].y;
+      for (const pt of ann.points) {
+        if (pt.x < minX) minX = pt.x;
+        if (pt.x > maxX) maxX = pt.x;
+        if (pt.y < minY) minY = pt.y;
+        if (pt.y > maxY) maxY = pt.y;
+      }
+      return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    }
+    case "text":
+      return {
+        x: ann.x,
+        y: ann.y,
+        width: ann.text.length * ann.fontSize * 0.6,
+        height: ann.fontSize * 1.2
+      };
+    case "image":
+      return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
+  }
+}
+function hitTestAnnotation(imgPt, ann, padding = 10) {
+  const b = getAnnotationBounds(ann);
+  return imgPt.x >= b.x - padding && imgPt.x <= b.x + b.width + padding && imgPt.y >= b.y - padding && imgPt.y <= b.y + b.height + padding;
+}
 export {
   ColorHighlighter,
+  DEFAULT_ADJUSTMENTS,
+  DEFAULT_DEPTH_MASK,
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
   DEFAULT_PLACEMENT_GAP,
+  DEFAULT_TRANSFORM,
   DataSourceBinder,
   DependencyGraph,
   DirtyTracker,
   EDITOR_MCP_TOOLS,
+  EXPORT_EXCLUDED_SELECTORS,
   EditorController,
   FontSize,
   FormulaEvaluator,
@@ -5270,13 +6756,17 @@ export {
   GradientText,
   HistoryManager,
   INSTRUCTION_REGEX,
-  Image2 as Image,
+  Image3 as Image,
+  ImageEditorController,
+  ImageEditorRenderer,
   LoadingNode,
   MARKDOWN_MENTION_SPLIT_REGEX,
   MCP_TOOL_EDIT_CANVAS,
   MCP_TOOL_EDIT_PROMPT,
   MCP_TOOL_GET_EDITOR_STATE,
+  MCP_TOOL_VIEW_EDITOR,
   MENTION_REGEX,
+  ManualClock,
   Markdown2 as Markdown,
   Mention,
   SlashCommands,
@@ -5286,13 +6776,20 @@ export {
   TEMPLATE_REGEX,
   TemplateSuggestions,
   VARIABLE_REGEX,
+  applyAdjustments,
+  applyDepthMask,
+  blendLayout,
   boundsOf,
+  calculateCropDrag,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement,
+  canvasHeight,
+  canvasToImagePoint,
   centerNodes,
   centre,
   colNameToIndex,
   computeNodesBoundingBox,
+  connectedOnly,
   createBezierTrajectory,
   createDirtyTracker,
   createEditor,
@@ -5304,6 +6801,7 @@ export {
   defaultIsEqual,
   ensureLayout,
   escapeHtml,
+  estimateCanvasHeight,
   estimateNodeSize,
   extractCellDependencies,
   extractInstructionNames,
@@ -5313,26 +6811,35 @@ export {
   extractVariableNames,
   findHexColors,
   flowSide,
+  getAnnotationBounds,
   getCenteredNodePosition,
+  getCropCursor,
   getEditorMarkdown,
   getEditorText,
   getLatestVersion,
   getLayoutedNodes,
+  getViewportMetrics,
+  globalImageCache,
   handleImageInsertion,
+  hitTestAnnotation,
+  hitTestCrop,
   htmlToPlainText,
   imagePastePluginKey,
+  imageToCanvasPoint,
   indexToColName,
   insertImageNode,
   instructionRegex,
   isEventFromTextInput,
   isValidCanvasNode,
   isValidUrl,
+  layoutBounds,
   linearPositionTrajectory,
   linearTrajectory,
   mapRawOffsetToResolved,
   mapResolvedOffsetToRaw,
   markdownToTipTapHtml,
   overlaps,
+  pageHidden,
   parseCanvasClipboardData,
   parseCellReference,
   parseFormula,
@@ -5343,7 +6850,9 @@ export {
   planAgentCommand,
   preprocessMarkdownFileLinks,
   preprocessMarkdownMentions,
+  realClock,
   remapPastedNodes,
+  removeAlpha,
   removeImageNode,
   repositionNodesTo,
   resolveTemplates,